Merge pull request #144 from spuxx-dev/feat/browser-types

feat(types): Add new `InputType` and `SelectOption` utility types

Author: spuxx-dev

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' },

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.
-
-<TypeDoc />
+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).

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.
+
+<TypeDoc />

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.
+
+<TypeDoc />

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';

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;
+}