@jakubmazanec/ui 0.1.0-unstable.081bdf1

package/source/development/internals/createSaturationScale.ts

@@ -0,0 +1,21 @@
+import {DEFAULT_STOP, DEFAULT_STOPS} from './constants.js';
+
+export function createSaturationScale(tweak = 0, stop: number = DEFAULT_STOP) {
+  let stops: number[] = DEFAULT_STOPS as unknown as number[];
+  let index = stops.indexOf(stop);
+
+  if (index === -1) {
+    throw new Error(`Invalid key value: ${stop}`);
+  }
+
+  return stops.map((stop) => {
+    let diff = Math.abs(stops.indexOf(stop) - index);
+    let tweakValue = tweak ? Math.round((diff + 1) * tweak * (1 + diff / 10)) : 0;
+
+    if (tweakValue > 100) {
+      return {stop, tweak: 100};
+    }
+
+    return {stop, tweak: tweakValue};
+  });
+}

package/source/development/internals/createSwatches.ts

@@ -0,0 +1,34 @@
+import {clamp} from './clamp.js';
+import {createDistributionValues} from './createDistributionValues.js';
+import {createHueScale} from './createHueScale.js';
+import {createSaturationScale} from './createSaturationScale.js';
+import {hexToHsl} from './hexToHsl.js';
+import {hslToHex} from './hslToHex.js';
+import {type PaletteConfig} from './PaletteConfig.js';
+import {unsignedModulo} from './unsignedModulo.js';
+
+export function createSwatches(palette: PaletteConfig) {
+  let hueScale = createHueScale(palette.h, palette.valueStop);
+  let saturationScale = createSaturationScale(palette.s, palette.valueStop);
+  let {h, s, l} = hexToHsl(palette.value);
+  let distributionScale = createDistributionValues(l, palette.valueStop);
+
+  let swatches = hueScale.map(({stop}, stopIndex) => {
+    let newH = unsignedModulo(h + hueScale[stopIndex]!.tweak, 360);
+    let newS = clamp(s + saturationScale[stopIndex]!.tweak, 0, 100);
+    let newL = clamp(distributionScale[stopIndex]!.value, 0.1, 99.9); // this is to make sure the first two or last two swatches (the first being total white and the last being total black) aren't the same lightness
+    let newHex = hslToHex(newH, newS, newL);
+
+    return {
+      stop,
+      hex: stop === palette.valueStop ? palette.value.toUpperCase() : newHex.toUpperCase(),
+      h: newH,
+      hScale: ((unsignedModulo(hueScale[stopIndex]!.tweak + 180, 360) - 180) / 180) * 50,
+      s: newS,
+      sScale: newS - 50,
+      l: newL,
+    };
+  });
+
+  return swatches;
+}

package/source/development/internals/hexToHsl.ts

@@ -0,0 +1,45 @@
+import {hexToRgb} from './hexToRgb.js';
+
+export function hexToHsl(rawHex: string) {
+  let hex = rawHex;
+
+  if (hex.length === 6 && !hex.startsWith(`#`)) {
+    hex = `#${hex}`;
+  }
+
+  let {r, g, b} = hexToRgb(hex);
+
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  let cmin = Math.min(r, g, b);
+  let cmax = Math.max(r, g, b);
+  let delta = cmax - cmin;
+  let h = 0;
+  let s = 0;
+  let l = 0;
+
+  if (delta === 0) {
+    h = 0;
+  } else if (cmax === r) {
+    h = ((g - b) / delta) % 6;
+  } else if (cmax === g) {
+    h = (b - r) / delta + 2;
+  } else {
+    h = (r - g) / delta + 4;
+  }
+
+  h = Math.round(h * 60);
+
+  if (h < 0) {
+    h += 360;
+  }
+
+  l = (cmax + cmin) / 2;
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return {h, s, l}; // values can be used like this: `hsl(${h}, ${s}%, ${l}%)`
+}

package/source/development/internals/hexToRgb.ts

@@ -0,0 +1,23 @@
+export function hexToRgb(rawHex: string) {
+  let hex = rawHex;
+
+  if (hex.length === 6 && !hex.startsWith(`#`)) {
+    hex = `#${hex}`;
+  }
+
+  let r = `0`;
+  let g = `0`;
+  let b = `0`;
+
+  if (hex.length === 4) {
+    r = `0x${hex[1]}${hex[1]}`;
+    g = `0x${hex[2]}${hex[2]}`;
+    b = `0x${hex[3]}${hex[3]}`;
+  } else if (hex.length === 7) {
+    r = `0x${hex[1]}${hex[2]}`;
+    g = `0x${hex[3]}${hex[4]}`;
+    b = `0x${hex[5]}${hex[6]}`;
+  }
+
+  return {r: Number(r), g: Number(g), b: Number(b)};
+}

package/source/development/internals/hslToHex.ts

@@ -0,0 +1,23 @@
+import {hslToRgb} from './hslToRgb.js';
+
+export function hslToHex(h: number, s: number, l: number) {
+  let {r, g, b} = hslToRgb(h, s, l);
+
+  let rHex = r.toString(16);
+  let gHex = g.toString(16);
+  let bHex = b.toString(16);
+
+  if (rHex.length === 1) {
+    rHex = `0${rHex}`;
+  }
+
+  if (gHex.length === 1) {
+    gHex = `0${gHex}`;
+  }
+
+  if (bHex.length === 1) {
+    bHex = `0${bHex}`;
+  }
+
+  return `#${rHex}${gHex}${bHex}`;
+}

package/source/development/internals/hslToRgb.ts

@@ -0,0 +1,43 @@
+export function hslToRgb(h: number, rawS: number, rawL: number) {
+  let s = rawS / 100;
+  let l = rawL / 100;
+
+  let c = (1 - Math.abs(2 * l - 1)) * s;
+  let x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  let m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (h >= 0 && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (h >= 300 && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+  };
+}

package/source/development/internals/isHex.ts

@@ -0,0 +1,7 @@
+export function isHex(value: string) {
+  const valueHex = value.length === 6 && !value.startsWith(`#`) ? `#${value}` : value;
+
+  const re = new RegExp(/^#[\da-f]{6}$/i);
+
+  return re.test(valueHex.toUpperCase());
+}

package/source/development/internals/resolveModule.ts

@@ -0,0 +1,9 @@
+import module from 'node:module';
+import path from 'node:path';
+
+export function resolveModule(moduleId: string) {
+  let require = module.createRequire(import.meta.url);
+  let modulePath = path.dirname(require.resolve(`${moduleId}/package.json`));
+
+  return modulePath;
+}

package/source/development/internals/round.ts

@@ -0,0 +1,5 @@
+export function round(value: number, precision = 0) {
+  const multiplier = 10 ** precision;
+
+  return Math.round(value * multiplier) / multiplier;
+}

package/source/development/internals/unsignedModulo.ts

@@ -0,0 +1,3 @@
+export function unsignedModulo(x: number, n: number) {
+  return ((x % n) + n) % n;
+}

package/source/development/internals.ts

@@ -0,0 +1 @@
+export * from './internals/constants.js';

package/source/development.ts

@@ -0,0 +1,2 @@
+export * from './development/createTailwindConfig.js';
+export * from './development/createTailwindMerge.js';

package/source/main.ts

@@ -0,0 +1,5 @@
+export * from './components.js';
+export {createTailwindMerge} from './development/createTailwindMerge.js';
+export * from './theme.js';
+export * from './utilities.js';
+export {createColumnHelper} from '@tanstack/react-table';

package/source/styles.css

@@ -0,0 +1,25 @@
+@font-face {
+  font-family: InterVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('./inter-variable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: InterVariable;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('./inter-variable-italic.woff2') format('woff2');
+}
+
+@layer base {
+  html {
+    @apply font-sans text-gray-950;
+  }
+
+  * {
+    scrollbar-color: theme(colors.gray.200) theme(colors.transparent);
+  }
+}

package/source/theme/Theme.ts

@@ -0,0 +1,100 @@
+import {type Simplify} from '@jakubmazanec/ts-utils';
+
+import {type useButtonTheme} from '../components/Button.js';
+import {type useCardTheme} from '../components/Card.js';
+import {type useCheckboxTheme} from '../components/Checkbox.js';
+import {type useCheckboxFieldTheme} from '../components/CheckboxField.js';
+import {type useComboboxTheme} from '../components/Combobox.js';
+import {type useComboboxOptionTheme} from '../components/ComboboxOption.js';
+import {type useDescriptionTheme} from '../components/Description.js';
+import {type useDialogTheme} from '../components/Dialog.js';
+import {type useDialogPanelTheme} from '../components/DialogPanel.js';
+import {type useDialogTitleTheme} from '../components/DialogTitle.js';
+import {type useErrorTheme} from '../components/Error.js';
+import {type useFieldTheme} from '../components/Field.js';
+import {type useFieldsetTheme} from '../components/Fieldset.js';
+import {type useFormTheme} from '../components/Form.js';
+import {type useIconTheme} from '../components/Icon.js';
+import {type useInputTheme} from '../components/Input.js';
+import {type useLabelTheme} from '../components/Label.js';
+import {type useLegendTheme} from '../components/Legend.js';
+import {type useListboxTheme} from '../components/Listbox.js';
+import {type useListboxOptionTheme} from '../components/ListboxOption.js';
+import {type useMenuTheme} from '../components/Menu.js';
+import {type useMenuButtonTheme} from '../components/MenuButton.js';
+import {type useMenuHeadingTheme} from '../components/MenuHeading.js';
+import {type useMenuItemTheme} from '../components/MenuItem.js';
+import {type useMenuItemsTheme} from '../components/MenuItems.js';
+import {type useMenuSectionTheme} from '../components/MenuSection.js';
+import {type useMenuSeparatorTheme} from '../components/MenuSeparator.js';
+import {type usePopoverTheme} from '../components/Popover.js';
+import {type usePopoverBackdropTheme} from '../components/PopoverBackdrop.js';
+import {type usePopoverButtonTheme} from '../components/PopoverButton.js';
+import {type usePopoverGroupTheme} from '../components/PopoverGroup.js';
+import {type usePopoverPanelTheme} from '../components/PopoverPanel.js';
+import {type useRadioTheme} from '../components/Radio.js';
+import {type useRadioFieldTheme} from '../components/RadioField.js';
+import {type useRadioGroupTheme} from '../components/RadioGroup.js';
+import {type useSpinnerTheme} from '../components/Spinner.js';
+import {type useTableTheme} from '../components/Table.js';
+import {type useTableBodyTheme} from '../components/TableBody.js';
+import {type useTableCaptionTheme} from '../components/TableCaption.js';
+import {type useTableCellTheme} from '../components/TableCell.js';
+import {type useTableFootTheme} from '../components/TableFoot.js';
+import {type useTableHeadTheme} from '../components/TableHead.js';
+import {type useTableHeaderTheme} from '../components/TableHeader.js';
+import {type useTableRowTheme} from '../components/TableRow.js';
+import {type useTextTheme} from '../components/Text.js';
+import {type useTextareaTheme} from '../components/Textarea.js';
+import {type ClassName, type ComponentTheme} from './internals.js';
+
+export type Theme = Simplify<
+  ComponentTheme<typeof useButtonTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useCardTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useCheckboxFieldTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useCheckboxTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useComboboxOptionTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useComboboxTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useDescriptionTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useDialogPanelTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useDialogTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useDialogTitleTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useErrorTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useFieldsetTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useFieldTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useFormTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useIconTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useInputTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useLabelTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useLegendTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useListboxOptionTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useListboxTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useMenuButtonTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useMenuHeadingTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useMenuItemsTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useMenuItemTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useMenuSectionTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useMenuSeparatorTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useMenuTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof usePopoverBackdropTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof usePopoverButtonTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof usePopoverGroupTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof usePopoverPanelTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof usePopoverTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useRadioFieldTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useRadioGroupTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useRadioTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useSpinnerTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useTableBodyTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useTableCaptionTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useTableCellTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useTableFootTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useTableHeaderTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useTableHeadTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useTableRowTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useTableTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useTextareaTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useTextTheme, {outputComponentName: true}> & {
+      merge: (...rest: ClassName[]) => string;
+    }
+>;

package/source/theme/ThemeProvider.tsx

@@ -0,0 +1,12 @@
+import {type PropsWithChildren} from 'react';
+
+import {themeContext} from './internals.js';
+import {type Theme} from './Theme.js';
+
+export type ThemeProviderProps = {
+  theme: Theme;
+};
+
+export function ThemeProvider({children, theme}: PropsWithChildren<ThemeProviderProps>) {
+  return <themeContext.Provider value={theme}>{children}</themeContext.Provider>;
+}

package/source/theme/defaultTheme.ts

@@ -0,0 +1,100 @@
+import {
+  buttonTheme,
+  cardTheme,
+  checkboxFieldTheme,
+  checkboxTheme,
+  comboboxOptionTheme,
+  comboboxTheme,
+  descriptionTheme,
+  dialogPanelTheme,
+  dialogTheme,
+  dialogTitleTheme,
+  errorTheme,
+  fieldsetnTheme,
+  fieldTheme,
+  formTheme,
+  iconTheme,
+  inputTheme,
+  labelTheme,
+  legendTheme,
+  listboxOptionTheme,
+  listboxTheme,
+  menuButtonTheme,
+  menuHeadingTheme,
+  menuItemsTheme,
+  menuItemTheme,
+  menuSectionTheme,
+  menuSeparatorTheme,
+  menuTheme,
+  popoverBackdropTheme,
+  popoverButtonTheme,
+  popoverGroupTheme,
+  popoverPanelTheme,
+  popoverTheme,
+  radioFieldTheme,
+  radioGroupTheme,
+  radioTheme,
+  spinnerTheme,
+  tableBodyTheme,
+  tableCaptionTheme,
+  tableCellTheme,
+  tableFootTheme,
+  tableHeaderTheme,
+  tableHeadTheme,
+  tableRowTheme,
+  tableTheme,
+  textareaTheme,
+  textTheme,
+} from '../components.js';
+import {createTailwindConfig, createTailwindMerge} from '../development.js';
+import {type Theme} from './Theme.js';
+
+export const defaultTheme: Theme = {
+  Button: buttonTheme,
+  Card: cardTheme,
+  Checkbox: checkboxTheme,
+  CheckboxField: checkboxFieldTheme,
+  Combobox: comboboxTheme,
+  ComboboxOption: comboboxOptionTheme,
+  Description: descriptionTheme,
+  Dialog: dialogTheme,
+  DialogPanel: dialogPanelTheme,
+  DialogTitle: dialogTitleTheme,
+  Error: errorTheme,
+  Field: fieldTheme,
+  Fieldset: fieldsetnTheme,
+  Form: formTheme,
+  Icon: iconTheme,
+  Input: inputTheme,
+  Label: labelTheme,
+  Legend: legendTheme,
+  Listbox: listboxTheme,
+  ListboxOption: listboxOptionTheme,
+  Menu: menuTheme,
+  MenuButton: menuButtonTheme,
+  MenuHeading: menuHeadingTheme,
+  MenuItem: menuItemTheme,
+  MenuItems: menuItemsTheme,
+  MenuSection: menuSectionTheme,
+  MenuSeparator: menuSeparatorTheme,
+  Popover: popoverTheme,
+  PopoverBackdrop: popoverBackdropTheme,
+  PopoverButton: popoverButtonTheme,
+  PopoverGroup: popoverGroupTheme,
+  PopoverPanel: popoverPanelTheme,
+  Radio: radioTheme,
+  RadioField: radioFieldTheme,
+  RadioGroup: radioGroupTheme,
+  Spinner: spinnerTheme,
+  Table: tableTheme,
+  TableBody: tableBodyTheme,
+  TableCaption: tableCaptionTheme,
+  TableCell: tableCellTheme,
+  TableFoot: tableFootTheme,
+  TableHead: tableHeadTheme,
+  TableHeader: tableHeaderTheme,
+  TableRow: tableRowTheme,
+  Text: textTheme,
+  Textarea: textareaTheme,
+  merge: createTailwindMerge(createTailwindConfig()),
+};

package/source/theme/internals/ClassName.ts

@@ -0,0 +1 @@
+export type ClassName = ClassName[] | string | 0 | false | null | undefined;

package/source/theme/internals/ComponentProps.ts

@@ -0,0 +1,13 @@
+import {type Writable} from '@jakubmazanec/ts-utils';
+
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+import {type ComponentThemeProps} from './ComponentThemeProps.js';
+
+// extracts props for component that uses created useTheme hook
+export type ComponentProps<U extends {themeDefinition: ComponentThemeDefinition | undefined}> =
+  U['themeDefinition'] extends ComponentThemeDefinition ?
+    U['themeDefinition']['variants'] extends ComponentThemeDefinitionVariants ?
+      Partial<Writable<ComponentThemeProps<U['themeDefinition']>>>
+    : NonNullable<unknown>
+  : NonNullable<unknown>;

package/source/theme/internals/ComponentTheme.ts

@@ -0,0 +1,50 @@
+import {type ClassName} from './ClassName.js';
+import {type ComponentThemeCompoundVariants} from './ComponentThemeCompoundVariants.js';
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+import {type ComponentThemeVariants} from './ComponentThemeVariants.js';
+import {type ComponentWithTheme} from './ComponentWithTheme.js';
+
+export type ComponentThemeOptions = {
+  outputComponentName: boolean;
+};
+
+type ComponentThemeFromDefinition<D extends ComponentThemeDefinition | undefined> =
+  D extends ComponentThemeDefinition ?
+    D['elements'] extends ComponentThemeDefinitionElements ?
+      D['variants'] extends ComponentThemeDefinitionVariants ?
+        {
+          classNames?: {
+            [K in D['elements'][number]]: ClassName;
+          };
+          variants: ComponentThemeVariants<D['variants'], D['elements']>;
+          compoundVariants?: ComponentThemeCompoundVariants<D['variants'], D['elements']>;
+        }
+      : {
+          classNames: {
+            [K in D['elements'][number]]: ClassName;
+          };
+        }
+    : D['variants'] extends ComponentThemeDefinitionVariants ?
+      {
+        className?: ClassName;
+        variants: ComponentThemeVariants<D['variants'], undefined>;
+        compoundVariants?: ComponentThemeCompoundVariants<D['variants'], undefined>;
+      }
+    : {className: ClassName}
+  : {
+      className: ClassName;
+    };
+
+export type ComponentTheme<
+  D extends ComponentThemeDefinition | ComponentWithTheme | undefined,
+  O extends ComponentThemeOptions = {outputComponentName: false},
+> =
+  O['outputComponentName'] extends true ?
+    D extends ComponentWithTheme ?
+      {[K in D['componentThemeName']]: ComponentThemeFromDefinition<D['themeDefinition']>}
+    : never
+  : D extends ComponentThemeDefinition ? ComponentThemeFromDefinition<D>
+  : D extends ComponentWithTheme ? ComponentThemeFromDefinition<D['themeDefinition']>
+  : ComponentThemeFromDefinition<undefined>;

package/source/theme/internals/ComponentThemeCompoundVariants.ts

@@ -0,0 +1,20 @@
+import {type ClassName} from './ClassName.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+
+export type ComponentThemeCompoundVariants<
+  V extends ComponentThemeDefinitionVariants,
+  E extends ComponentThemeDefinitionElements | undefined,
+> = Array<
+  (E extends ComponentThemeDefinitionElements ?
+    {
+      classNames: {
+        [K in E[number]]: ClassName;
+      };
+    }
+  : {
+      className: ClassName;
+    }) & {
+    [K in keyof V]?: Array<V[K][number]> | V[K][number];
+  }
+>;

package/source/theme/internals/ComponentThemeDefinition.ts

@@ -0,0 +1,7 @@
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+
+export type ComponentThemeDefinition = {
+  variants?: ComponentThemeDefinitionVariants;
+  elements?: ComponentThemeDefinitionElements;
+};

package/source/theme/internals/ComponentThemeDefinitionElements.ts

@@ -0,0 +1 @@
+export type ComponentThemeDefinitionElements = string[];

package/source/theme/internals/ComponentThemeDefinitionVariants.ts

@@ -0,0 +1,3 @@
+export type ComponentThemeDefinitionVariants = {
+  [key: string]: string[] | [true, false];
+};

package/source/theme/internals/ComponentThemeProps.ts

@@ -0,0 +1,11 @@
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+
+export type ComponentThemeProps<D extends ComponentThemeDefinition | undefined> =
+  D extends ComponentThemeDefinition ?
+    D['variants'] extends ComponentThemeDefinitionVariants ?
+      {
+        [J in keyof D['variants']]: D['variants'][J][number];
+      }
+    : NonNullable<unknown>
+  : NonNullable<unknown>;

package/source/theme/internals/ComponentThemeVariants.ts

@@ -0,0 +1,24 @@
+import {type ClassName} from './ClassName.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+
+export type ComponentThemeVariants<
+  V extends ComponentThemeDefinitionVariants,
+  E extends ComponentThemeDefinitionElements | undefined,
+> = {
+  [J in keyof V]: V[J] extends string[] ?
+    {
+      [K in V[J][number]]: E extends ComponentThemeDefinitionElements ?
+        {
+          [L in E[number]]: ClassName;
+        }
+      : ClassName;
+    }
+  : {
+      [K in 'false' | 'true']: E extends ComponentThemeDefinitionElements ?
+        {
+          [L in E[number]]: ClassName;
+        }
+      : ClassName;
+    };
+};

package/source/theme/internals/ComponentWithTheme.ts

@@ -0,0 +1,6 @@
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+
+export type ComponentWithTheme = {
+  themeDefinition: ComponentThemeDefinition | undefined;
+  componentThemeName: string;
+};

package/source/theme/internals/UseComponentTheme.ts

@@ -0,0 +1,22 @@
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+import {type ComponentThemeProps} from './ComponentThemeProps.js';
+import {type UseComponentThemeReturn} from './UseComponentThemeReturn.js';
+
+export type UseComponentTheme<N extends string, D extends ComponentThemeDefinition | undefined> =
+  D extends ComponentThemeDefinition ?
+    D['variants'] extends ComponentThemeDefinitionVariants ?
+      D['elements'] extends ComponentThemeDefinitionElements ?
+        ((themeProps: ComponentThemeProps<D>) => UseComponentThemeReturn<D>) & {
+          componentThemeName: N;
+          themeDefinition: D;
+        }
+      : ((themeProps: ComponentThemeProps<D>) => UseComponentThemeReturn<D>) & {
+          componentThemeName: N;
+          themeDefinition: D;
+        }
+    : D['elements'] extends ComponentThemeDefinitionElements ?
+      (() => UseComponentThemeReturn<D>) & {componentThemeName: N; themeDefinition: D}
+    : (() => UseComponentThemeReturn<D>) & {componentThemeName: N; themeDefinition: D}
+  : (() => UseComponentThemeReturn<D>) & {componentThemeName: N; themeDefinition: D};