diff --git a/apps/starlight/src/assets/sidebar.ts b/apps/starlight/src/assets/sidebar.ts index b90eec6..7277ec5 100644 --- a/apps/starlight/src/assets/sidebar.ts +++ b/apps/starlight/src/assets/sidebar.ts @@ -30,6 +30,10 @@ export const sidebar: StarlightUserConfigWithPlugins['sidebar'] = [ label: 'Styles and Themes', slug: 'browser-utils/styles-and-themes', }, + { + label: 'Types', + autogenerate: { directory: 'browser-utils/types' }, + }, { label: 'Services', autogenerate: { directory: 'browser-utils/services' }, diff --git a/apps/starlight/src/content/docs/browser-utils/styles-and-themes.mdx b/apps/starlight/src/content/docs/browser-utils/styles-and-themes.mdx index 0301171..e4b1bfb 100644 --- a/apps/starlight/src/content/docs/browser-utils/styles-and-themes.mdx +++ b/apps/starlight/src/content/docs/browser-utils/styles-and-themes.mdx @@ -3,8 +3,6 @@ title: 'Styles and Themes' description: '@spuxx/browser-utils provides a set of CSS styles and themes primarily intended for my personal use.' --- -import TypeDoc from '@docs/browser-utils/types/styles.md'; - The package provides a set of CSS styles and themes primarily intended for my personal use. You are free to use it in your own projects, but I will not be accepting pull requests or issues requesting changes to this part of the library. ## Styles @@ -136,7 +134,4 @@ To do this, you can use the `spx-theme` attribute on the element itself. ## Variables and Types -The library also provides a set of variables and types for use with TypeScript. They can help you use the styles correctly and in a type-safe manner. -They are primarily intended for use with [SolidJS](https://www.solidjs.com/) and my [@spuxx/solid](https://spuxx-dev.github.io/jslibs/browser-utils) library. - - +The library also provides a set of variables and types for use with TypeScript. They can help you use the styles correctly and in a type-safe manner. You can find them [here](types/styles). diff --git a/apps/starlight/src/content/docs/browser-utils/types/html.mdx b/apps/starlight/src/content/docs/browser-utils/types/html.mdx new file mode 100644 index 0000000..d775480 --- /dev/null +++ b/apps/starlight/src/content/docs/browser-utils/types/html.mdx @@ -0,0 +1,10 @@ +--- +title: 'HTML Types' +description: 'A selection of HTML-related utility types for use in browser applications.' +--- + +import TypeDoc from '@docs/browser-utils/types/html.md'; + +The package includes a collection of useful TypeScript types that can help with HTML-related use-cases in browser applications. + + diff --git a/apps/starlight/src/content/docs/browser-utils/types/styles.mdx b/apps/starlight/src/content/docs/browser-utils/types/styles.mdx new file mode 100644 index 0000000..d266a5d --- /dev/null +++ b/apps/starlight/src/content/docs/browser-utils/types/styles.mdx @@ -0,0 +1,11 @@ +--- +title: 'Style-related Types' +description: 'A selection of style-related utility types for use in browser applications.' +--- + +import TypeDoc from '@docs/browser-utils/types/styles.md'; + +The library also provides a set of variables and types for use with TypeScript. They can help you use the styles correctly and in a type-safe manner. +They are primarily intended for use with [SolidJS](https://www.solidjs.com/) and my [@spuxx/solid](https://spuxx-dev.github.io/jslibs/browser-utils) library. + + diff --git a/packages/browser-utils/src/main.ts b/packages/browser-utils/src/main.ts index d2234f5..10766d6 100644 --- a/packages/browser-utils/src/main.ts +++ b/packages/browser-utils/src/main.ts @@ -6,3 +6,4 @@ export * from './services/config'; export * from './services/local-storage'; export * from './services/user-agent'; export * from './types/styles'; +export * from './types/html'; diff --git a/packages/browser-utils/src/types/html/index.ts b/packages/browser-utils/src/types/html/index.ts new file mode 100644 index 0000000..6217814 --- /dev/null +++ b/packages/browser-utils/src/types/html/index.ts @@ -0,0 +1,42 @@ +/** + * Valid input types according to the HTML specification. + * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types} + */ +export const InputType = { + button: 'button', + checkbox: 'checkbox', + color: 'color', + date: 'date', + datetimeLocal: 'datetime-local', + email: 'email', + file: 'file', + hidden: 'hidden', + image: 'image', + month: 'month', + number: 'number', + password: 'password', + radio: 'radio', + range: 'range', + reset: 'reset', + search: 'search', + submit: 'submit', + tel: 'tel', + text: 'text', + time: 'time', + url: 'url', + week: 'week', +} as const; +/** + * Valid input types according to the HTML specification. + * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types} + */ +export type InputType = (typeof InputType)[keyof typeof InputType]; + +/** + * Represents an `option` element's data. May be used for `select`, `datalist` and similar + * elements. + */ +export interface SelectOption { + value: string; + label: string; +}