@jakubmazanec/ui 0.4.2 → 0.5.0-unstable.5f3ffbeb

package/build/development/createTailwindConfig.d.ts

@@ -1,7 +1,84 @@
 import { type Config as BaseTailwindConfig } from 'tailwindcss';
 import { type DEFAULT_STOPS } from './internals/constants.js';
+export declare const defaultCreateTailwindConfigOptions: {
+    colors: {
+        gray: string;
+        neutral: string;
+        red: string;
+        danger: string;
+        orange: {
+            hex: string;
+            hueShift: number;
+        };
+        warning: {
+            hex: string;
+            hueShift: number;
+        };
+        yellow: {
+            swatches: ({
+                hex: string;
+                stop: 10;
+            } | {
+                hex: string;
+                stop: 25;
+            } | {
+                hex: string;
+                stop: 50;
+            } | {
+                hex: string;
+                stop: 100;
+            } | {
+                hex: string;
+                stop: 200;
+            } | {
+                hex: string;
+                stop: 300;
+            } | {
+                hex: string;
+                stop: 400;
+            } | {
+                hex: string;
+                stop: 500;
+            } | {
+                hex: string;
+                stop: 600;
+            } | {
+                hex: string;
+                stop: 700;
+            } | {
+                hex: string;
+                stop: 800;
+            } | {
+                hex: string;
+                stop: 900;
+            } | {
+                hex: string;
+                stop: 950;
+            } | {
+                hex: string;
+                stop: 975;
+            } | {
+                hex: string;
+                stop: 990;
+            })[];
+            hex: string;
+            hueShift: number;
+        };
+        green: string;
+        teal: {
+            hex: string;
+            hueShift: number;
+        };
+        blue: string;
+        primary: string;
+        violet: string;
+        pink: {
+            hex: string;
+            hueShift: number;
+        };
+    };
+};
 export type CreateTailwindConfigOptions = {
-    content?: string[] | undefined;
     colors?: Record<string, {
         hex: string;
         hueShift?: number;
@@ -19,4 +96,4 @@ export type TailwindConfig = {
     theme: BaseTailwindConfig['theme'];
     plugins: BaseTailwindConfig['plugins'];
 };
-export declare function createTailwindConfig({ content, colors, }?: CreateTailwindConfigOptions): TailwindConfig;
+export declare function createTailwindConfig({ colors, }?: CreateTailwindConfigOptions): TailwindConfig;

package/build/development/createTailwindConfig.js

@@ -1,8 +1,7 @@
 "use strict";
 import plugin from "tailwindcss/plugin";
-import { DEFAULT_STOP } from "./internals/constants.js";
-import { createPalette } from "./internals/createPalette.js";
-let defaultCreateTailwindConfigOptions = {
+import { createTailwindThemeColors } from "./internals.js";
+export const defaultCreateTailwindConfigOptions = {
   colors: {
     gray: "#6c6e79",
     neutral: "#6c6e79",
@@ -56,62 +55,18 @@ let defaultCreateTailwindConfigOptions = {
   }
 };
 export function createTailwindConfig({
-  content,
   colors
 } = defaultCreateTailwindConfigOptions) {
-  let themeColors = {
-    transparent: "transparent",
-    current: "currentColor",
-    white: "#fff",
-    black: "#000"
-  };
-  for (let [name, color] of Object.entries(colors ?? {})) {
-    if (typeof color === "string") {
-      themeColors = {
-        ...themeColors,
-        ...createPalette({
-          name,
-          swatches: [
-            {
-              hex: color,
-              stop: DEFAULT_STOP
-            }
-          ],
-          hueShift: 0,
-          saturationShift: 0
-        })
-      };
-    } else if ("swatches" in color) {
-      themeColors = {
-        ...themeColors,
-        ...createPalette({
-          name,
-          swatches: color.swatches,
-          hueShift: color.hueShift ?? 0,
-          saturationShift: color.saturationShift ?? 0
-        })
-      };
-    } else if ("hex" in color) {
-      themeColors = {
-        ...themeColors,
-        ...createPalette({
-          name,
-          swatches: [{ hex: color.hex, stop: DEFAULT_STOP }],
-          hueShift: color.hueShift ?? 0,
-          saturationShift: color.saturationShift ?? 0
-        })
-      };
-    }
-  }
+  let themeColors = createTailwindThemeColors(colors);
   let root = {
     "--radius-none": "0",
-    "--radius-0_5": "0.125rem",
-    "--radius-1": "0.25rem",
-    "--radius-1_5": "0.375rem",
-    "--radius-2": "0.5rem",
-    "--radius-2_5": "0.625rem",
-    "--radius-3": "0.75rem",
-    "--radius-4": "1rem",
+    "--radius-0_5": "2px",
+    "--radius-1": "4px",
+    "--radius-1_5": "6px",
+    "--radius-2": "8px",
+    "--radius-2_5": "10px",
+    "--radius-3": "12px",
+    "--radius-4": "16px",
     "--radius-full": "9999px",
     "--font-sans": 'InterVariable, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
   };

package/build/development/createTailwindConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/development/createTailwindConfig.ts"],
-  "sourcesContent": ["import {type Config as BaseTailwindConfig} from 'tailwindcss';\nimport plugin from 'tailwindcss/plugin';\n\nimport {DEFAULT_STOP, type DEFAULT_STOPS} from './internals/constants.js';\nimport {createPalette} from './internals/createPalette.js';\n\nlet defaultCreateTailwindConfigOptions = {\n  colors: {\n    gray: '#6c6e79',\n    neutral: '#6c6e79', // copy of \"gray\"\n    red: '#d1002f',\n    danger: '#d1002f', // copy of \"red\"\n    orange: {\n      hex: '#c33909',\n      hueShift: 1,\n    },\n    warning: {\n      hex: '#c33909',\n      hueShift: 1,\n    }, // copy of \"orange\"\n    yellow: {\n      swatches: [\n        {hex: '#fffffa', stop: 10},\n        {hex: '#fffef0', stop: 25},\n        {hex: '#fffbdb', stop: 50},\n        {hex: '#fff3b8', stop: 100},\n        {hex: '#ffe06f', stop: 200},\n        {hex: '#ffc72d', stop: 300},\n        {hex: '#e69d00', stop: 400},\n        {hex: '#9e6300', stop: 500},\n        {hex: '#805701', stop: 600},\n        {hex: '#614700', stop: 700},\n        {hex: '#3d3000', stop: 800},\n        {hex: '#1f1a00', stop: 900},\n        {hex: '#0f0e00', stop: 950},\n        {hex: '#0a0a00', stop: 975},\n        {hex: '#050500', stop: 990},\n      ],\n      hex: '#9e6300',\n      hueShift: 3,\n    },\n    green: '#0a7e22',\n    teal: {\n      hex: '#007c65',\n      hueShift: 5,\n    },\n    blue: '#006dca',\n    primary: '#006dca', // copy of \"blue\"\n    violet: '#8649e1',\n    pink: {\n      hex: '#b229b9',\n      hueShift: 10,\n    },\n  },\n} satisfies CreateTailwindConfigOptions;\n\nexport type CreateTailwindConfigOptions = {\n  content?: string[] | undefined;\n  colors?: Record<\n    string,\n    | {hex: string; hueShift?: number; saturationShift?: number}\n    | {\n        swatches: Array<{hex: string; stop: (typeof DEFAULT_STOPS)[number]}>;\n        hueShift?: number;\n        saturationShift?: number;\n      }\n    | string\n  >;\n};\n\nexport type TailwindConfig = {\n  theme: BaseTailwindConfig['theme'];\n  // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237\n  plugins: BaseTailwindConfig['plugins'];\n};\n\nexport function createTailwindConfig({\n  content,\n  colors,\n}: CreateTailwindConfigOptions = defaultCreateTailwindConfigOptions): TailwindConfig {\n  let themeColors: Record<string, Record<string, string> | string> = {\n    transparent: 'transparent',\n    current: 'currentColor',\n    white: '#fff',\n    black: '#000',\n  };\n\n  for (let [name, color] of Object.entries(colors ?? {})) {\n    if (typeof color === 'string') {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: [\n            {\n              hex: color,\n              stop: DEFAULT_STOP,\n            },\n          ],\n          hueShift: 0,\n          saturationShift: 0,\n        }),\n      };\n    } else if ('swatches' in color) {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: color.swatches,\n          hueShift: color.hueShift ?? 0,\n          saturationShift: color.saturationShift ?? 0,\n        }),\n      };\n    } else if ('hex' in color) {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: [{hex: color.hex, stop: DEFAULT_STOP}],\n          hueShift: color.hueShift ?? 0,\n          saturationShift: color.saturationShift ?? 0,\n        }),\n      };\n    }\n  }\n\n  // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237\n  let root: Record<string, Record<string, string> | string> = {\n    '--radius-none': '0',\n    '--radius-0_5': '0.125rem',\n    '--radius-1': '0.25rem',\n    '--radius-1_5': '0.375rem',\n    '--radius-2': '0.5rem',\n    '--radius-2_5': '0.625rem',\n    '--radius-3': '0.75rem',\n    '--radius-4': '1rem',\n    '--radius-full': '9999px',\n    '--font-sans':\n      'InterVariable, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n  };\n\n  for (let [colorName, colorValue] of Object.entries(themeColors)) {\n    if (typeof colorValue === 'string') {\n      let variableName = `--color-${colorName}`;\n      let variableValue = colorValue;\n\n      root[variableName] = variableValue;\n      themeColors[colorName] = `var(${variableName})`;\n    } else if (typeof colorValue === 'object') {\n      for (let [shadeName, shadeValue] of Object.entries(colorValue)) {\n        let variableName = `--color-${colorName}-${shadeName}`;\n        let variableValue = shadeValue;\n\n        root[variableName] = variableValue;\n        (themeColors[colorName] as Record<string, string>)[shadeName] = `var(${variableName})`; // type assertion is ok, we know the shape of `themeColors`\n      }\n    }\n  }\n\n  return {\n    theme: {\n      colors: themeColors,\n      radius: {\n        none: 'var(--radius-none)',\n        '0.5': 'var(--radius-0_5)',\n        '1': 'var(--radius-1)',\n        '1.5': 'var(--radius-1_5)',\n        '2': 'var(--radius-2)',\n        '2.5': 'var(--radius-2_5)',\n        '3': 'var(--radius-3)',\n        '4': 'var(--radius-4)',\n        full: 'var(--radius-full)',\n      },\n      font: {\n        sans: 'var(--font-sans)',\n      },\n    },\n    // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237\n    plugins: [\n      plugin(({addBase}) => {\n        addBase({\n          ':root': root,\n        });\n      }),\n    ],\n  };\n}\n"],
-  "mappings": ";AACA,OAAO,YAAY;AAEnB,SAAQ,oBAAuC;AAC/C,SAAQ,qBAAoB;AAE5B,IAAI,qCAAqC;AAAA,EACvC,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,IACT,KAAK;AAAA,IACL,QAAQ;AAAA;AAAA,IACR,QAAQ;AAAA,MACN,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,QACR,EAAC,KAAK,WAAW,MAAM,GAAE;AAAA,QACzB,EAAC,KAAK,WAAW,MAAM,GAAE;AAAA,QACzB,EAAC,KAAK,WAAW,MAAM,GAAE;AAAA,QACzB,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,QAC1B,EAAC,KAAK,WAAW,MAAM,IAAG;AAAA,MAC5B;AAAA,MACA,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,MACJ,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,IACA,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,EACF;AACF;AAsBO,gBAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AACF,IAAiC,oCAAoD;AACnF,MAAI,cAA+D;AAAA,IACjE,aAAa;AAAA,IACb,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,WAAS,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,UAAU,CAAC,CAAC,GAAG;AACtD,QAAI,OAAO,UAAU,UAAU;AAC7B,oBAAc;AAAA,QACZ,GAAG;AAAA,QACH,GAAG,cAAc;AAAA,UACf;AAAA,UACA,UAAU;AAAA,YACR;AAAA,cACE,KAAK;AAAA,cACL,MAAM;AAAA,YACR;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,QACnB,CAAC;AAAA,MACH;AAAA,IACF,WAAW,cAAc,OAAO;AAC9B,oBAAc;AAAA,QACZ,GAAG;AAAA,QACH,GAAG,cAAc;AAAA,UACf;AAAA,UACA,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM,YAAY;AAAA,UAC5B,iBAAiB,MAAM,mBAAmB;AAAA,QAC5C,CAAC;AAAA,MACH;AAAA,IACF,WAAW,SAAS,OAAO;AACzB,oBAAc;AAAA,QACZ,GAAG;AAAA,QACH,GAAG,cAAc;AAAA,UACf;AAAA,UACA,UAAU,CAAC,EAAC,KAAK,MAAM,KAAK,MAAM,aAAY,CAAC;AAAA,UAC/C,UAAU,MAAM,YAAY;AAAA,UAC5B,iBAAiB,MAAM,mBAAmB;AAAA,QAC5C,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAGA,MAAI,OAAwD;AAAA,IAC1D,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,eACE;AAAA,EACJ;AAEA,WAAS,CAAC,WAAW,UAAU,KAAK,OAAO,QAAQ,WAAW,GAAG;AAC/D,QAAI,OAAO,eAAe,UAAU;AAClC,UAAI,eAAe,WAAW,SAAS;AACvC,UAAI,gBAAgB;AAEpB,WAAK,YAAY,IAAI;AACrB,kBAAY,SAAS,IAAI,OAAO,YAAY;AAAA,IAC9C,WAAW,OAAO,eAAe,UAAU;AACzC,eAAS,CAAC,WAAW,UAAU,KAAK,OAAO,QAAQ,UAAU,GAAG;AAC9D,YAAI,eAAe,WAAW,SAAS,IAAI,SAAS;AACpD,YAAI,gBAAgB;AAEpB,aAAK,YAAY,IAAI;AACrB,QAAC,YAAY,SAAS,EAA6B,SAAS,IAAI,OAAO,YAAY;AAAA,MACrF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,QACL,OAAO;AAAA,QACP,KAAK;AAAA,QACL,OAAO;AAAA,QACP,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA;AAAA,IAEA,SAAS;AAAA,MACP,OAAO,CAAC,EAAC,QAAO,MAAM;AACpB,gBAAQ;AAAA,UACN,SAAS;AAAA,QACX,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF;AACF;",
+  "sourcesContent": ["import {type Config as BaseTailwindConfig} from 'tailwindcss';\nimport plugin from 'tailwindcss/plugin';\n\nimport {createTailwindThemeColors} from './internals.js';\nimport {type DEFAULT_STOPS} from './internals/constants.js';\n\nexport const defaultCreateTailwindConfigOptions = {\n  colors: {\n    gray: '#6c6e79',\n    neutral: '#6c6e79', // copy of \"gray\"\n    red: '#d1002f',\n    danger: '#d1002f', // copy of \"red\"\n    orange: {\n      hex: '#c33909',\n      hueShift: 1,\n    },\n    warning: {\n      hex: '#c33909',\n      hueShift: 1,\n    }, // copy of \"orange\"\n    yellow: {\n      swatches: [\n        {hex: '#fffffa', stop: 10},\n        {hex: '#fffef0', stop: 25},\n        {hex: '#fffbdb', stop: 50},\n        {hex: '#fff3b8', stop: 100},\n        {hex: '#ffe06f', stop: 200},\n        {hex: '#ffc72d', stop: 300},\n        {hex: '#e69d00', stop: 400},\n        {hex: '#9e6300', stop: 500},\n        {hex: '#805701', stop: 600},\n        {hex: '#614700', stop: 700},\n        {hex: '#3d3000', stop: 800},\n        {hex: '#1f1a00', stop: 900},\n        {hex: '#0f0e00', stop: 950},\n        {hex: '#0a0a00', stop: 975},\n        {hex: '#050500', stop: 990},\n      ],\n      hex: '#9e6300',\n      hueShift: 3,\n    },\n    green: '#0a7e22',\n    teal: {\n      hex: '#007c65',\n      hueShift: 5,\n    },\n    blue: '#006dca',\n    primary: '#006dca', // copy of \"blue\"\n    violet: '#8649e1',\n    pink: {\n      hex: '#b229b9',\n      hueShift: 10,\n    },\n  },\n} satisfies CreateTailwindConfigOptions;\n\nexport type CreateTailwindConfigOptions = {\n  colors?: Record<\n    string,\n    | {hex: string; hueShift?: number; saturationShift?: number}\n    | {\n        swatches: Array<{hex: string; stop: (typeof DEFAULT_STOPS)[number]}>;\n        hueShift?: number;\n        saturationShift?: number;\n      }\n    | string\n  >;\n};\n\nexport type TailwindConfig = {\n  theme: BaseTailwindConfig['theme'];\n  // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237\n  plugins: BaseTailwindConfig['plugins'];\n};\n\nexport function createTailwindConfig({\n  colors,\n}: CreateTailwindConfigOptions = defaultCreateTailwindConfigOptions): TailwindConfig {\n  let themeColors = createTailwindThemeColors(colors);\n\n  // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237\n  let root: Record<string, Record<string, string> | string> = {\n    '--radius-none': '0',\n    '--radius-0_5': '2px',\n    '--radius-1': '4px',\n    '--radius-1_5': '6px',\n    '--radius-2': '8px',\n    '--radius-2_5': '10px',\n    '--radius-3': '12px',\n    '--radius-4': '16px',\n    '--radius-full': '9999px',\n    '--font-sans':\n      'InterVariable, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n  };\n\n  for (let [colorName, colorValue] of Object.entries(themeColors)) {\n    if (typeof colorValue === 'string') {\n      let variableName = `--color-${colorName}`;\n      let variableValue = colorValue;\n\n      root[variableName] = variableValue;\n      themeColors[colorName] = `var(${variableName})`;\n    } else if (typeof colorValue === 'object') {\n      for (let [shadeName, shadeValue] of Object.entries(colorValue)) {\n        let variableName = `--color-${colorName}-${shadeName}`;\n        let variableValue = shadeValue;\n\n        root[variableName] = variableValue;\n        (themeColors[colorName] as Record<string, string>)[shadeName] = `var(${variableName})`; // type assertion is ok, we know the shape of `themeColors`\n      }\n    }\n  }\n\n  return {\n    theme: {\n      colors: themeColors,\n      radius: {\n        none: 'var(--radius-none)',\n        '0.5': 'var(--radius-0_5)',\n        '1': 'var(--radius-1)',\n        '1.5': 'var(--radius-1_5)',\n        '2': 'var(--radius-2)',\n        '2.5': 'var(--radius-2_5)',\n        '3': 'var(--radius-3)',\n        '4': 'var(--radius-4)',\n        full: 'var(--radius-full)',\n      },\n      font: {\n        sans: 'var(--font-sans)',\n      },\n    },\n    // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237\n    plugins: [\n      plugin(({addBase}) => {\n        addBase({\n          ':root': root,\n        });\n      }),\n    ],\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build/development/internals/createTailwindThemeColors.d.ts

@@ -0,0 +1,2 @@
+import { type CreateTailwindConfigOptions } from '../createTailwindConfig.js';
+export declare function createTailwindThemeColors(colors: CreateTailwindConfigOptions['colors']): Record<string, string | Record<string, string>>;

package/build/development/internals/createTailwindThemeColors.js

@@ -0,0 +1,51 @@
+"use strict";
+import { DEFAULT_STOP } from "./constants.js";
+import { createPalette } from "./createPalette.js";
+export function createTailwindThemeColors(colors) {
+  let themeColors = {
+    transparent: "transparent",
+    current: "currentColor",
+    white: "#fff",
+    black: "#000"
+  };
+  for (let [name, color] of Object.entries(colors ?? {})) {
+    if (typeof color === "string") {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: [
+            {
+              hex: color,
+              stop: DEFAULT_STOP
+            }
+          ],
+          hueShift: 0,
+          saturationShift: 0
+        })
+      };
+    } else if ("swatches" in color) {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: color.swatches,
+          hueShift: color.hueShift ?? 0,
+          saturationShift: color.saturationShift ?? 0
+        })
+      };
+    } else if ("hex" in color) {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: [{ hex: color.hex, stop: DEFAULT_STOP }],
+          hueShift: color.hueShift ?? 0,
+          saturationShift: color.saturationShift ?? 0
+        })
+      };
+    }
+  }
+  return themeColors;
+}
+//# sourceMappingURL=createTailwindThemeColors.js.map

package/build/development/internals/createTailwindThemeColors.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../source/development/internals/createTailwindThemeColors.ts"],
+  "sourcesContent": ["import {type CreateTailwindConfigOptions} from '../createTailwindConfig.js';\nimport {DEFAULT_STOP} from './constants.js';\nimport {createPalette} from './createPalette.js';\n\nexport function createTailwindThemeColors(colors: CreateTailwindConfigOptions['colors']) {\n  let themeColors: Record<string, Record<string, string> | string> = {\n    transparent: 'transparent',\n    current: 'currentColor',\n    white: '#fff',\n    black: '#000',\n  };\n\n  for (let [name, color] of Object.entries(colors ?? {})) {\n    if (typeof color === 'string') {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: [\n            {\n              hex: color,\n              stop: DEFAULT_STOP,\n            },\n          ],\n          hueShift: 0,\n          saturationShift: 0,\n        }),\n      };\n    } else if ('swatches' in color) {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: color.swatches,\n          hueShift: color.hueShift ?? 0,\n          saturationShift: color.saturationShift ?? 0,\n        }),\n      };\n    } else if ('hex' in color) {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: [{hex: color.hex, stop: DEFAULT_STOP}],\n          hueShift: color.hueShift ?? 0,\n          saturationShift: color.saturationShift ?? 0,\n        }),\n      };\n    }\n  }\n\n  return themeColors;\n}\n"],
+  "mappings": ";AACA,SAAQ,oBAAmB;AAC3B,SAAQ,qBAAoB;AAErB,gBAAS,0BAA0B,QAA+C;AACvF,MAAI,cAA+D;AAAA,IACjE,aAAa;AAAA,IACb,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,WAAS,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,UAAU,CAAC,CAAC,GAAG;AACtD,QAAI,OAAO,UAAU,UAAU;AAC7B,oBAAc;AAAA,QACZ,GAAG;AAAA,QACH,GAAG,cAAc;AAAA,UACf;AAAA,UACA,UAAU;AAAA,YACR;AAAA,cACE,KAAK;AAAA,cACL,MAAM;AAAA,YACR;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,QACnB,CAAC;AAAA,MACH;AAAA,IACF,WAAW,cAAc,OAAO;AAC9B,oBAAc;AAAA,QACZ,GAAG;AAAA,QACH,GAAG,cAAc;AAAA,UACf;AAAA,UACA,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM,YAAY;AAAA,UAC5B,iBAAiB,MAAM,mBAAmB;AAAA,QAC5C,CAAC;AAAA,MACH;AAAA,IACF,WAAW,SAAS,OAAO;AACzB,oBAAc;AAAA,QACZ,GAAG;AAAA,QACH,GAAG,cAAc;AAAA,UACf;AAAA,UACA,UAAU,CAAC,EAAC,KAAK,MAAM,KAAK,MAAM,aAAY,CAAC;AAAA,UAC/C,UAAU,MAAM,YAAY;AAAA,UAC5B,iBAAiB,MAAM,mBAAmB;AAAA,QAC5C,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

package/build/development/internals.d.ts

@@ -6,6 +6,7 @@ export * from './internals/createHueScale.js';
 export * from './internals/createPalette.js';
 export * from './internals/createSaturationScale.js';
 export * from './internals/createSwatches.js';
+export * from './internals/createTailwindThemeColors.js';
 export * from './internals/hexToHsl.js';
 export * from './internals/hexToRgb.js';
 export * from './internals/hslToHex.js';

package/build/development/internals.js

@@ -7,6 +7,7 @@ export * from "./internals/createHueScale.js";
 export * from "./internals/createPalette.js";
 export * from "./internals/createSaturationScale.js";
 export * from "./internals/createSwatches.js";
+export * from "./internals/createTailwindThemeColors.js";
 export * from "./internals/hexToHsl.js";
 export * from "./internals/hexToRgb.js";
 export * from "./internals/hslToHex.js";

package/build/development/internals.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/development/internals.ts"],
-  "sourcesContent": ["export * from './internals/clamp.js';\nexport * from './internals/constants.js';\nexport * from './internals/createDisplayColor.js';\nexport * from './internals/createDistributionValues.js';\nexport * from './internals/createHueScale.js';\nexport * from './internals/createPalette.js';\nexport * from './internals/createSaturationScale.js';\nexport * from './internals/createSwatches.js';\nexport * from './internals/hexToHsl.js';\nexport * from './internals/hexToRgb.js';\nexport * from './internals/hslToHex.js';\nexport * from './internals/hslToRgb.js';\nexport * from './internals/isHex.js';\nexport type * from './internals/PaletteConfig.js';\nexport * from './internals/round.js';\nexport type * from './internals/SwatchValue.js';\nexport * from './internals/unsignedModulo.js';\n"],
-  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;",
+  "sourcesContent": ["export * from './internals/clamp.js';\nexport * from './internals/constants.js';\nexport * from './internals/createDisplayColor.js';\nexport * from './internals/createDistributionValues.js';\nexport * from './internals/createHueScale.js';\nexport * from './internals/createPalette.js';\nexport * from './internals/createSaturationScale.js';\nexport * from './internals/createSwatches.js';\nexport * from './internals/createTailwindThemeColors.js';\nexport * from './internals/hexToHsl.js';\nexport * from './internals/hexToRgb.js';\nexport * from './internals/hslToHex.js';\nexport * from './internals/hslToRgb.js';\nexport * from './internals/isHex.js';\nexport type * from './internals/PaletteConfig.js';\nexport * from './internals/round.js';\nexport type * from './internals/SwatchValue.js';\nexport * from './internals/unsignedModulo.js';\n"],
+  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;",
   "names": []
 }

package/build/styles.css

@@ -12,6 +12,7 @@
   font-display: swap;
   src: url(./inter-variable-italic.woff2) format("woff2");
 }
+@theme { --spacing: 4px; }
 @layer base {
   html {
     font-family: var(--font-sans);
@@ -19,8 +20,21 @@
   }
   * {
     scrollbar-color: var(--color-neutral-200) var(--color-transparent);
+    outline-color: transparent;
+  }
+  *:focus {
+    outline-style: none;
+    outline-width: 0;
+  }
+  *:focus-visible {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: calc(var(--spacing) * 0.5);
+    outline-color: color-mix(in oklab, var(--color-blue-400) 50%, transparent);
+    transition-property: outline-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 }
-@theme { --spacing: 4px; }
 @source "./";
 /*# sourceMappingURL=styles.css.map */

package/build/styles.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../source/styles.css"],
-  "sourcesContent": ["@font-face {\n  font-family: InterVariable;\n  font-style: normal;\n  font-weight: 100 900;\n  font-display: swap;\n  src: url('./inter-variable.woff2') format('woff2');\n}\n\n@font-face {\n  font-family: InterVariable;\n  font-style: italic;\n  font-weight: 100 900;\n  font-display: swap;\n  src: url('./inter-variable-italic.woff2') format('woff2');\n}\n\n@layer base {\n  html {\n    font-family: var(--font-sans);\n    color: var(--color-neutral-550);\n  }\n\n  * {\n    scrollbar-color: var(--color-neutral-200) var(--color-transparent);\n  }\n}\n\n@theme {\n  --spacing: 4px;\n}\n\n@source \"./\";\n"],
-  "mappings": "AAAA;AACE,eAAa;AACb,cAAY;AACZ,eAAa,IAAI;AACjB,gBAAc;AACd,OAAK,4BAA8B,OAAO;AAC5C;AAEA;AACE,eAAa;AACb,cAAY;AACZ,eAAa,IAAI;AACjB,gBAAc;AACd,OAAK,mCAAqC,OAAO;AACnD;AAEA;AACE;AACE,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA;AACE,qBAAiB,IAAI,qBAAqB,IAAI;AAChD;AACF;AAEA,OAAO,EACL,SAAS,EAAE,GAAG;AAGhB,QAAQ;",
+  "sourcesContent": ["@font-face {\n  font-family: InterVariable;\n  font-style: normal;\n  font-weight: 100 900;\n  font-display: swap;\n  src: url('./inter-variable.woff2') format('woff2');\n}\n\n@font-face {\n  font-family: InterVariable;\n  font-style: italic;\n  font-weight: 100 900;\n  font-display: swap;\n  src: url('./inter-variable-italic.woff2') format('woff2');\n}\n\n@theme {\n  --spacing: 4px;\n}\n\n@layer base {\n  html {\n    font-family: var(--font-sans);\n    color: var(--color-neutral-550);\n  }\n\n  * {\n    scrollbar-color: var(--color-neutral-200) var(--color-transparent);\n    outline-color: transparent;\n  }\n\n  *:focus {\n    outline-style: none;\n    outline-width: 0;\n  }\n\n  *:focus-visible {\n    outline-style: solid;\n    outline-width: 2px;\n    outline-offset: calc(var(--spacing) * 0.5);\n    outline-color: color-mix(in oklab, var(--color-blue-400) 50%, transparent);\n    transition-property: outline-color;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n}\n\n@source \"./\";\n"],
+  "mappings": "AAAA;AACE,eAAa;AACb,cAAY;AACZ,eAAa,IAAI;AACjB,gBAAc;AACd,OAAK,4BAA8B,OAAO;AAC5C;AAEA;AACE,eAAa;AACb,cAAY;AACZ,eAAa,IAAI;AACjB,gBAAc;AACd,OAAK,mCAAqC,OAAO;AACnD;AAEA,OAAO,EACL,SAAS,EAAE,GAAG;AAGhB;AACE;AACE,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA;AACE,qBAAiB,IAAI,qBAAqB,IAAI;AAC9C,mBAAe;AACjB;AAEA,GAAC;AACC,mBAAe;AACf,mBAAe;AACjB;AAEA,GAAC;AACC,mBAAe;AACf,mBAAe;AACf,oBAAgB,KAAK,IAAI,WAAW,EAAE;AACtC,mBAAe,UAAU,GAAG,KAAK,EAAE,IAAI,kBAAkB,GAAG,EAAE;AAC9D,yBAAqB;AACrB,gCAA4B,IAAI,SAAS,EAAE,IAAI;AAC/C,yBAAqB,IAAI,aAAa,EAAE,IAAI;AAC9C;AACF;AAEA,QAAQ;",
   "names": []
 }

package/build/theme/Theme.d.ts

@@ -14,6 +14,7 @@ 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 useHeadingTheme } from '../components/Heading.js';
 import { type useIconTheme } from '../components/Icon.js';
 import { type useInputTheme } from '../components/Input.js';
 import { type useLabelTheme } from '../components/Label.js';
@@ -77,6 +78,8 @@ export type Theme = Simplify<ComponentTheme<typeof useButtonTheme, {
     outputComponentName: true;
 }> & ComponentTheme<typeof useFormTheme, {
     outputComponentName: true;
+}> & ComponentTheme<typeof useHeadingTheme, {
+    outputComponentName: true;
 }> & ComponentTheme<typeof useIconTheme, {
     outputComponentName: true;
 }> & ComponentTheme<typeof useInputTheme, {

package/build/theme/defaultTheme.js

@@ -15,6 +15,7 @@ import {
   fieldsetnTheme,
   fieldTheme,
   formTheme,
+  headingTheme,
   iconTheme,
   inputTheme,
   labelTheme,
@@ -65,6 +66,7 @@ export const defaultTheme = {
   Field: fieldTheme,
   Fieldset: fieldsetnTheme,
   Form: formTheme,
+  Heading: headingTheme,
   Icon: iconTheme,
   Input: inputTheme,
   Label: labelTheme,

package/build/theme/defaultTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/theme/defaultTheme.ts"],
-  "sourcesContent": ["import {\n  buttonTheme,\n  cardTheme,\n  checkboxFieldTheme,\n  checkboxTheme,\n  comboboxOptionTheme,\n  comboboxTheme,\n  containerTheme,\n  descriptionTheme,\n  dialogPanelTheme,\n  dialogTheme,\n  dialogTitleTheme,\n  errorTheme,\n  fieldsetnTheme,\n  fieldTheme,\n  formTheme,\n  iconTheme,\n  inputTheme,\n  labelTheme,\n  legendTheme,\n  listboxOptionTheme,\n  listboxTheme,\n  menuButtonTheme,\n  menuHeadingTheme,\n  menuItemsTheme,\n  menuItemTheme,\n  menuSectionTheme,\n  menuSeparatorTheme,\n  menuTheme,\n  popoverBackdropTheme,\n  popoverButtonTheme,\n  popoverGroupTheme,\n  popoverPanelTheme,\n  popoverTheme,\n  radioFieldTheme,\n  radioGroupTheme,\n  radioTheme,\n  spinnerTheme,\n  tableBodyTheme,\n  tableCaptionTheme,\n  tableCellTheme,\n  tableFootTheme,\n  tableHeaderTheme,\n  tableHeadTheme,\n  tableRowTheme,\n  tableTheme,\n  textareaTheme,\n  textTheme,\n} from '../components.js';\nimport {createTailwindConfig, createTailwindMerge} from '../development.js';\nimport {type Theme} from './Theme.js';\n\nexport const defaultTheme: Theme = {\n  Button: buttonTheme,\n  Card: cardTheme,\n  Checkbox: checkboxTheme,\n  CheckboxField: checkboxFieldTheme,\n  Combobox: comboboxTheme,\n  ComboboxOption: comboboxOptionTheme,\n  Container: containerTheme,\n  Description: descriptionTheme,\n  Dialog: dialogTheme,\n  DialogPanel: dialogPanelTheme,\n  DialogTitle: dialogTitleTheme,\n  Error: errorTheme,\n  Field: fieldTheme,\n  Fieldset: fieldsetnTheme,\n  Form: formTheme,\n  Icon: iconTheme,\n  Input: inputTheme,\n  Label: labelTheme,\n  Legend: legendTheme,\n  Listbox: listboxTheme,\n  ListboxOption: listboxOptionTheme,\n  Menu: menuTheme,\n  MenuButton: menuButtonTheme,\n  MenuHeading: menuHeadingTheme,\n  MenuItem: menuItemTheme,\n  MenuItems: menuItemsTheme,\n  MenuSection: menuSectionTheme,\n  MenuSeparator: menuSeparatorTheme,\n  Popover: popoverTheme,\n  PopoverBackdrop: popoverBackdropTheme,\n  PopoverButton: popoverButtonTheme,\n  PopoverGroup: popoverGroupTheme,\n  PopoverPanel: popoverPanelTheme,\n  Radio: radioTheme,\n  RadioField: radioFieldTheme,\n  RadioGroup: radioGroupTheme,\n  Spinner: spinnerTheme,\n  Table: tableTheme,\n  TableBody: tableBodyTheme,\n  TableCaption: tableCaptionTheme,\n  TableCell: tableCellTheme,\n  TableFoot: tableFootTheme,\n  TableHead: tableHeadTheme,\n  TableHeader: tableHeaderTheme,\n  TableRow: tableRowTheme,\n  Text: textTheme,\n  Textarea: textareaTheme,\n\n  merge: createTailwindMerge(createTailwindConfig()),\n};\n"],
-  "mappings": ";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAQ,sBAAsB,2BAA0B;AAGjD,aAAM,eAAsB;AAAA,EACjC,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,aAAa;AAAA,EACb,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,eAAe;AAAA,EACf,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AAAA,EACb,eAAe;AAAA,EACf,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EAEV,OAAO,oBAAoB,qBAAqB,CAAC;AACnD;",
+  "sourcesContent": ["import {\n  buttonTheme,\n  cardTheme,\n  checkboxFieldTheme,\n  checkboxTheme,\n  comboboxOptionTheme,\n  comboboxTheme,\n  containerTheme,\n  descriptionTheme,\n  dialogPanelTheme,\n  dialogTheme,\n  dialogTitleTheme,\n  errorTheme,\n  fieldsetnTheme,\n  fieldTheme,\n  formTheme,\n  headingTheme,\n  iconTheme,\n  inputTheme,\n  labelTheme,\n  legendTheme,\n  listboxOptionTheme,\n  listboxTheme,\n  menuButtonTheme,\n  menuHeadingTheme,\n  menuItemsTheme,\n  menuItemTheme,\n  menuSectionTheme,\n  menuSeparatorTheme,\n  menuTheme,\n  popoverBackdropTheme,\n  popoverButtonTheme,\n  popoverGroupTheme,\n  popoverPanelTheme,\n  popoverTheme,\n  radioFieldTheme,\n  radioGroupTheme,\n  radioTheme,\n  spinnerTheme,\n  tableBodyTheme,\n  tableCaptionTheme,\n  tableCellTheme,\n  tableFootTheme,\n  tableHeaderTheme,\n  tableHeadTheme,\n  tableRowTheme,\n  tableTheme,\n  textareaTheme,\n  textTheme,\n} from '../components.js';\nimport {createTailwindConfig, createTailwindMerge} from '../development.js';\nimport {type Theme} from './Theme.js';\n\nexport const defaultTheme: Theme = {\n  Button: buttonTheme,\n  Card: cardTheme,\n  Checkbox: checkboxTheme,\n  CheckboxField: checkboxFieldTheme,\n  Combobox: comboboxTheme,\n  ComboboxOption: comboboxOptionTheme,\n  Container: containerTheme,\n  Description: descriptionTheme,\n  Dialog: dialogTheme,\n  DialogPanel: dialogPanelTheme,\n  DialogTitle: dialogTitleTheme,\n  Error: errorTheme,\n  Field: fieldTheme,\n  Fieldset: fieldsetnTheme,\n  Form: formTheme,\n  Heading: headingTheme,\n  Icon: iconTheme,\n  Input: inputTheme,\n  Label: labelTheme,\n  Legend: legendTheme,\n  Listbox: listboxTheme,\n  ListboxOption: listboxOptionTheme,\n  Menu: menuTheme,\n  MenuButton: menuButtonTheme,\n  MenuHeading: menuHeadingTheme,\n  MenuItem: menuItemTheme,\n  MenuItems: menuItemsTheme,\n  MenuSection: menuSectionTheme,\n  MenuSeparator: menuSeparatorTheme,\n  Popover: popoverTheme,\n  PopoverBackdrop: popoverBackdropTheme,\n  PopoverButton: popoverButtonTheme,\n  PopoverGroup: popoverGroupTheme,\n  PopoverPanel: popoverPanelTheme,\n  Radio: radioTheme,\n  RadioField: radioFieldTheme,\n  RadioGroup: radioGroupTheme,\n  Spinner: spinnerTheme,\n  Table: tableTheme,\n  TableBody: tableBodyTheme,\n  TableCaption: tableCaptionTheme,\n  TableCell: tableCellTheme,\n  TableFoot: tableFootTheme,\n  TableHead: tableHeadTheme,\n  TableHeader: tableHeaderTheme,\n  TableRow: tableRowTheme,\n  Text: textTheme,\n  Textarea: textareaTheme,\n\n  merge: createTailwindMerge(createTailwindConfig()),\n};\n"],
+  "mappings": ";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAQ,sBAAsB,2BAA0B;AAGjD,aAAM,eAAsB;AAAA,EACjC,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,aAAa;AAAA,EACb,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,eAAe;AAAA,EACf,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AAAA,EACb,eAAe;AAAA,EACf,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EAEV,OAAO,oBAAoB,qBAAqB,CAAC;AACnD;",
   "names": []
 }

package/build/theme/internals/themeContext.d.ts

@@ -120,6 +120,16 @@ export declare const themeContext: import("react").Context<import("@jakubmazanec
     Form: {
         className: import("./ClassName.js").ClassName;
     };
+} & {
+    Heading: {
+        className?: import("./ClassName.js").ClassName;
+        variants: import("./ComponentThemeVariants.js").ComponentThemeVariants<{
+            readonly size: ["small", "medium", "large"];
+        }, undefined>;
+        compoundVariants?: import("./ComponentThemeCompoundVariants.js").ComponentThemeCompoundVariants<{
+            readonly size: ["small", "medium", "large"];
+        }, undefined> | undefined;
+    };
 } & {
     Icon: {
         className?: import("./ClassName.js").ClassName;

package/build/theme/internals/useTheme.d.ts

@@ -120,6 +120,16 @@ export declare function useTheme(): import("@jakubmazanec/ts-utils").Simplify<{
     Form: {
         className: import("./ClassName.js").ClassName;
     };
+} & {
+    Heading: {
+        className?: import("./ClassName.js").ClassName;
+        variants: import("./ComponentThemeVariants.js").ComponentThemeVariants<{
+            readonly size: ["small", "medium", "large"];
+        }, undefined>;
+        compoundVariants?: import("./ComponentThemeCompoundVariants.js").ComponentThemeCompoundVariants<{
+            readonly size: ["small", "medium", "large"];
+        }, undefined> | undefined;
+    };
 } & {
     Icon: {
         className?: import("./ClassName.js").ClassName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jakubmazanec/ui",
-  "version": "0.4.2",
+  "version": "0.5.0-unstable.5f3ffbeb",
   "description": "React component library.",
   "repository": {
     "type": "git",

package/source/components/Button.tsx

@@ -78,7 +78,11 @@ export function Button<T extends ElementType = typeof BUTTON_ELEMENT>({
   let enhancedChildren = Children.map(children, (child) => {
     if (isValidElement(child) && (child.type === Icon || child.type === Spinner)) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
-      return cloneElement<any>(child, {'data-icon': ''});
+      return cloneElement<any>(child, {'data-slot': 'icon'});
+    }
+
+    if (!isValidElement(child) && typeof child === 'string') {
+      return <span data-slot="text">{child}</span>;
     }
 
     return child;
@@ -96,7 +100,7 @@ export function Button<T extends ElementType = typeof BUTTON_ELEMENT>({
 
 export const buttonTheme: ComponentTheme<typeof useButtonTheme> = {
   className:
-    'rounded-2 flex items-center justify-center text-nowrap font-sans font-medium text-sm transition-colors',
+    'rounded-2 inline-flex items-center justify-center text-nowrap font-sans font-medium text-sm transition-colors',
   variants: {
     variant: {
       solid: 'text-white bg-neutral-900 hover:bg-neutral-800',
@@ -105,9 +109,12 @@ export const buttonTheme: ComponentTheme<typeof useButtonTheme> = {
       invisible: 'cursor-default text-neutral-200 hover:text-neutral-600 select-none',
     },
     size: {
-      small: 'text-sm leading-6 px-2.5 h-8 min-w-8 gap-x-2',
-      medium: 'leading-6 px-2.5 h-9 min-w-9 gap-x-2',
-      large: 'text-lg leading-6 px-3 h-10 min-w-10 gap-x-2',
+      small:
+        'text-sm leading-6 px-2.5 h-8 min-w-8 gap-x-1 *:first:data-[slot=icon]:-ml-2 *:last:data-[slot=icon]:-mr-2',
+      medium:
+        'leading-6 px-2.5 h-9 min-w-9 gap-x-1 *:first:data-[slot=icon]:-ml-1.5 *:last:data-[slot=icon]:-mr-1.5',
+      large:
+        'text-lg leading-6 px-3 h-10 min-w-10 gap-x-1 *:first:data-[slot=icon]:-ml-1 *:last:data-[slot=icon]:-mr-1',
     },
     disabled: {
       true: '',

package/source/components/Checkbox.tsx

@@ -106,13 +106,13 @@ export function Checkbox<T extends ElementType = typeof CHECKBOX_ELEMENT>({
 export const checkboxTheme: ComponentTheme<typeof useCheckboxTheme> = {
   classNames: {
     root: 'group/checkbox inline-block size-5 cursor-pointer',
-    icon: 'flex justify-content justify-item size-5 *:rounded-2 *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/checkbox:*:bg-neutral-950 group-data-[checked]/checkbox:*:border-neutral-950 group-data-[checked]/checkbox:*:text-white',
+    icon: 'flex justify-content justify-item size-5 *:rounded-2 *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/checkbox:*:bg-neutral-950 group-data-[checked]/checkbox:*:border-neutral-950 group-data-[checked]/checkbox:*:text-white hover:group-data-[checked]/checkbox:*:border-neutral-950 hover:group-data-[checked]/checkbox:*:text-white',
   },
   variants: {
     disabled: {
       true: {
         root: 'cursor-not-allowed',
-        icon: '*:hover:text-transparent *:border-neutral-50 *:hover:border-neutral-50 group-data-[checked]/checkbox:*:bg-neutral-100 group-data-[checked]/checkbox:*:border-neutral-100 group-data-[checked]/checkbox:*:text-white',
+        icon: '*:hover:text-transparent *:border-neutral-50 *:hover:border-neutral-50 group-data-[checked]/checkbox:*:bg-neutral-100 group-data-[checked]/checkbox:*:border-neutral-100 group-data-[checked]/checkbox:*:text-white hover:group-data-[checked]/checkbox:*:border-neutral-100 hover:group-data-[checked]/checkbox:*:text-white',
       },
       false: {
         root: '',

package/source/components/Combobox.tsx

@@ -260,7 +260,7 @@ export const comboboxTheme: ComponentTheme<typeof useComboboxTheme> = {
       'flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',
     icon: 'text-neutral-500 size-5 top-2 right-2 cursor-pointer',
     options:
-      'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--input-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',
+      'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--input-width)] [--anchor-gap:var(--spacing)] [--anchor-padding:calc(var(--spacing)*2)] [scrollbar-width:thin] empty:invisible transition-colors',
   },
   variants: {
     disabled: {

package/source/components/DialogPanel.tsx

@@ -47,5 +47,5 @@ export function DialogPanel<T extends ElementType = typeof DIALOG_PANEL_ELEMENT>
 
 export const dialogPanelTheme: ComponentTheme<typeof useDialogPanelTheme> = {
   className:
-    'shadow-1 relative flex w-full min-w-[300px] max-w-[900px] flex-col gap-y-6 rounded-4 bg-white p-6 max-h-[calc(100vh-3rem)] overflow-hidden overflow-y-auto',
+    'shadow-1 relative w-full min-w-[300px] max-w-[900px] gap-y-6 rounded-4 bg-white p-6 max-h-[calc(100vh-var(--spacing)*2)] overflow-hidden overflow-y-auto',
 };

package/source/components/DialogTitle.tsx

@@ -42,5 +42,5 @@ export const DialogTitle = <T extends ElementType = typeof DIALOG_TITLE_ELEMENT>
 };
 
 export const dialogTitleTheme: ComponentTheme<typeof useDialogTitleTheme> = {
-  className: 'text-xl font-bold',
+  className: 'text-lg font-medium',
 };

package/source/components/Heading.ts

@@ -0,0 +1,69 @@
+import {
+  type ComponentPropsWithoutRef,
+  createElement,
+  type ElementType,
+  type PropsWithChildren,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {type ComponentRef} from './ComponentRef.js';
+
+export const useHeadingTheme = createComponentTheme('Heading', {
+  variants: {
+    size: ['small', 'medium', 'large'],
+  },
+});
+
+const HEADING_ELEMENT = 'h1';
+
+export type HeadingProps<T extends ElementType> = ComponentProps<typeof useHeadingTheme> &
+  ComponentPropsWithoutRef<T> &
+  ComponentRef<T> &
+  PropsWithChildren & {
+    as?: T | undefined;
+    className?: string;
+  };
+
+export function Heading<T extends ElementType = typeof HEADING_ELEMENT>({
+  size = 'medium',
+  as: Component,
+  className,
+  ref,
+  children,
+  ...rest
+}: HeadingProps<T>) {
+  let theme = useHeadingTheme({size});
+  let props = {
+    ref,
+    className: theme(null, className),
+    'data-component': 'heading',
+    ...rest,
+  };
+  // TODO: is this ok typings-wise? Are types for <h1> and <h2> different?
+  let DefaultComponent = HEADING_ELEMENT;
+
+  if (size === 'small') {
+    DefaultComponent = 'h3';
+  }
+
+  if (size === 'medium') {
+    DefaultComponent = 'h2';
+  }
+
+  return createElement(Component ?? DefaultComponent, props, children);
+}
+
+export const headingTheme: ComponentTheme<typeof useHeadingTheme> = {
+  className: 'm-0',
+  variants: {
+    size: {
+      small: 'text-lg font-medium',
+      medium: 'text-xl font-medium',
+      large: 'text-2xl font-medium',
+    },
+  },
+};

package/source/components/Icon.tsx

@@ -82,7 +82,7 @@ export function Icon<T extends ElementType = typeof ICON_ELEMENT>({
 }
 
 export const iconTheme: ComponentTheme<typeof useIconTheme> = {
-  className: 'inline-block shrink-0 *:w-full *:h-full data-[icon]:-mx-1 select-none',
+  className: 'inline-block shrink-0 *:w-full *:h-full select-none',
   variants: {
     size: {
       small: 'size-4',