@vitinnczk/onyx-ui 0.0.0-stage → 0.2.0

package/dist/tokens/themes.d.ts

@@ -0,0 +1,256 @@
+/**
+ * Semantic colors of the light theme (the default), exposed as `--color-<name>`. Components
+ * only use these, never the palette, so a theme only has to redefine this layer.
+ *
+ * Each intent (`primary`, `success`, `warning`, `danger`, `info`) has:
+ * - `<intent>`: solid fill, with `-hover` and `-active` states
+ * - `on-<intent>`: text and icons on the solid fill
+ * - `<intent>-subtle`: tinted background (alerts, badges)
+ * - `<intent>-text`: intent-colored text on any background, subtle included
+ * - `<intent>-border`: decorative border on the subtle background
+ */
+export declare const lightColors: {
+    readonly bg: string;
+    readonly 'bg-subtle': string;
+    readonly 'bg-muted': string;
+    readonly 'bg-inverse': string;
+    readonly surface: string;
+    readonly 'surface-raised': string;
+    readonly backdrop: `color-mix(in srgb, ${string} 50%, transparent)`;
+    readonly text: string;
+    readonly 'text-muted': string;
+    readonly 'text-disabled': string;
+    readonly 'text-inverse': string;
+    /** Decorative borders: dividers, card outlines. */
+    readonly border: string;
+    /** Borders that identify a control (inputs, checkboxes); must reach 3:1. */
+    readonly 'border-strong': string;
+    readonly focus: string;
+    /** Translucent layers for hovered and pressed items, over any surface. */
+    readonly 'state-hover': `color-mix(in srgb, ${string} 6%, transparent)`;
+    readonly 'state-active': `color-mix(in srgb, ${string} 12%, transparent)`;
+    readonly primary: string;
+    readonly 'primary-hover': string;
+    readonly 'primary-active': string;
+    readonly 'on-primary': string;
+    readonly 'primary-subtle': string;
+    readonly 'primary-text': string;
+    readonly 'primary-border': string;
+    readonly success: string;
+    readonly 'success-hover': string;
+    readonly 'success-active': string;
+    readonly 'on-success': string;
+    readonly 'success-subtle': string;
+    readonly 'success-text': string;
+    readonly 'success-border': string;
+    readonly warning: string;
+    readonly 'warning-hover': string;
+    readonly 'warning-active': string;
+    readonly 'on-warning': string;
+    readonly 'warning-subtle': string;
+    readonly 'warning-text': string;
+    readonly 'warning-border': string;
+    readonly danger: string;
+    readonly 'danger-hover': string;
+    readonly 'danger-active': string;
+    readonly 'on-danger': string;
+    readonly 'danger-subtle': string;
+    readonly 'danger-text': string;
+    readonly 'danger-border': string;
+    readonly info: string;
+    readonly 'info-hover': string;
+    readonly 'info-active': string;
+    readonly 'on-info': string;
+    readonly 'info-subtle': string;
+    readonly 'info-text': string;
+    readonly 'info-border': string;
+};
+export type SemanticColor = keyof typeof lightColors;
+/**
+ * Semantic colors of the dark theme. Solid fills use the light end of each scale with dark
+ * text on top, and hover/active get lighter instead of darker.
+ */
+export declare const darkColors: {
+    readonly bg: string;
+    readonly 'bg-subtle': string;
+    readonly 'bg-muted': string;
+    readonly 'bg-inverse': string;
+    readonly surface: string;
+    readonly 'surface-raised': string;
+    readonly backdrop: `color-mix(in srgb, ${string} 60%, transparent)`;
+    readonly text: string;
+    readonly 'text-muted': string;
+    readonly 'text-disabled': string;
+    readonly 'text-inverse': string;
+    readonly border: string;
+    readonly 'border-strong': string;
+    readonly focus: string;
+    readonly 'state-hover': `color-mix(in srgb, ${string} 8%, transparent)`;
+    readonly 'state-active': `color-mix(in srgb, ${string} 14%, transparent)`;
+    readonly primary: string;
+    readonly 'primary-hover': string;
+    readonly 'primary-active': string;
+    readonly 'on-primary': string;
+    readonly 'primary-subtle': string;
+    readonly 'primary-text': string;
+    readonly 'primary-border': string;
+    readonly success: string;
+    readonly 'success-hover': string;
+    readonly 'success-active': string;
+    readonly 'on-success': string;
+    readonly 'success-subtle': string;
+    readonly 'success-text': string;
+    readonly 'success-border': string;
+    readonly warning: string;
+    readonly 'warning-hover': string;
+    readonly 'warning-active': string;
+    readonly 'on-warning': string;
+    readonly 'warning-subtle': string;
+    readonly 'warning-text': string;
+    readonly 'warning-border': string;
+    readonly danger: string;
+    readonly 'danger-hover': string;
+    readonly 'danger-active': string;
+    readonly 'on-danger': string;
+    readonly 'danger-subtle': string;
+    readonly 'danger-text': string;
+    readonly 'danger-border': string;
+    readonly info: string;
+    readonly 'info-hover': string;
+    readonly 'info-active': string;
+    readonly 'on-info': string;
+    readonly 'info-subtle': string;
+    readonly 'info-text': string;
+    readonly 'info-border': string;
+};
+export interface ThemeTokens {
+    /** Value of the CSS `color-scheme` property: native controls and scrollbars follow it. */
+    colorScheme: 'light' | 'dark';
+    colors: Record<SemanticColor, string>;
+    /** RGB channels used by every `--shadow-*` token. */
+    shadowColor: string;
+}
+/**
+ * Built-in themes. Each one is a `[data-theme='<name>']` block in `src/styles/themes/`;
+ * light is also the default on `:root`.
+ */
+export declare const themes: {
+    readonly light: {
+        readonly colorScheme: "light";
+        readonly colors: {
+            readonly bg: string;
+            readonly 'bg-subtle': string;
+            readonly 'bg-muted': string;
+            readonly 'bg-inverse': string;
+            readonly surface: string;
+            readonly 'surface-raised': string;
+            readonly backdrop: `color-mix(in srgb, ${string} 50%, transparent)`;
+            readonly text: string;
+            readonly 'text-muted': string;
+            readonly 'text-disabled': string;
+            readonly 'text-inverse': string;
+            /** Decorative borders: dividers, card outlines. */
+            readonly border: string;
+            /** Borders that identify a control (inputs, checkboxes); must reach 3:1. */
+            readonly 'border-strong': string;
+            readonly focus: string;
+            /** Translucent layers for hovered and pressed items, over any surface. */
+            readonly 'state-hover': `color-mix(in srgb, ${string} 6%, transparent)`;
+            readonly 'state-active': `color-mix(in srgb, ${string} 12%, transparent)`;
+            readonly primary: string;
+            readonly 'primary-hover': string;
+            readonly 'primary-active': string;
+            readonly 'on-primary': string;
+            readonly 'primary-subtle': string;
+            readonly 'primary-text': string;
+            readonly 'primary-border': string;
+            readonly success: string;
+            readonly 'success-hover': string;
+            readonly 'success-active': string;
+            readonly 'on-success': string;
+            readonly 'success-subtle': string;
+            readonly 'success-text': string;
+            readonly 'success-border': string;
+            readonly warning: string;
+            readonly 'warning-hover': string;
+            readonly 'warning-active': string;
+            readonly 'on-warning': string;
+            readonly 'warning-subtle': string;
+            readonly 'warning-text': string;
+            readonly 'warning-border': string;
+            readonly danger: string;
+            readonly 'danger-hover': string;
+            readonly 'danger-active': string;
+            readonly 'on-danger': string;
+            readonly 'danger-subtle': string;
+            readonly 'danger-text': string;
+            readonly 'danger-border': string;
+            readonly info: string;
+            readonly 'info-hover': string;
+            readonly 'info-active': string;
+            readonly 'on-info': string;
+            readonly 'info-subtle': string;
+            readonly 'info-text': string;
+            readonly 'info-border': string;
+        };
+        readonly shadowColor: "24 24 27";
+    };
+    readonly dark: {
+        readonly colorScheme: "dark";
+        readonly colors: {
+            readonly bg: string;
+            readonly 'bg-subtle': string;
+            readonly 'bg-muted': string;
+            readonly 'bg-inverse': string;
+            readonly surface: string;
+            readonly 'surface-raised': string;
+            readonly backdrop: `color-mix(in srgb, ${string} 60%, transparent)`;
+            readonly text: string;
+            readonly 'text-muted': string;
+            readonly 'text-disabled': string;
+            readonly 'text-inverse': string;
+            readonly border: string;
+            readonly 'border-strong': string;
+            readonly focus: string;
+            readonly 'state-hover': `color-mix(in srgb, ${string} 8%, transparent)`;
+            readonly 'state-active': `color-mix(in srgb, ${string} 14%, transparent)`;
+            readonly primary: string;
+            readonly 'primary-hover': string;
+            readonly 'primary-active': string;
+            readonly 'on-primary': string;
+            readonly 'primary-subtle': string;
+            readonly 'primary-text': string;
+            readonly 'primary-border': string;
+            readonly success: string;
+            readonly 'success-hover': string;
+            readonly 'success-active': string;
+            readonly 'on-success': string;
+            readonly 'success-subtle': string;
+            readonly 'success-text': string;
+            readonly 'success-border': string;
+            readonly warning: string;
+            readonly 'warning-hover': string;
+            readonly 'warning-active': string;
+            readonly 'on-warning': string;
+            readonly 'warning-subtle': string;
+            readonly 'warning-text': string;
+            readonly 'warning-border': string;
+            readonly danger: string;
+            readonly 'danger-hover': string;
+            readonly 'danger-active': string;
+            readonly 'on-danger': string;
+            readonly 'danger-subtle': string;
+            readonly 'danger-text': string;
+            readonly 'danger-border': string;
+            readonly info: string;
+            readonly 'info-hover': string;
+            readonly 'info-active': string;
+            readonly 'on-info': string;
+            readonly 'info-subtle': string;
+            readonly 'info-text': string;
+            readonly 'info-border': string;
+        };
+        readonly shadowColor: "0 0 0";
+    };
+};
+export type ThemeName = keyof typeof themes;

package/dist/tokens/themes.js

@@ -0,0 +1,120 @@
+// src/tokens/themes.ts
+var e = (e, t) => t === void 0 ? `var(--color-${e})` : `var(--color-${e}-${t})`, t = {
+	bg: e("white"),
+	"bg-subtle": e("neutral", 50),
+	"bg-muted": e("neutral", 100),
+	"bg-inverse": e("neutral", 900),
+	surface: e("white"),
+	"surface-raised": e("white"),
+	backdrop: `color-mix(in srgb, ${e("neutral", 900)} 50%, transparent)`,
+	text: e("neutral", 900),
+	"text-muted": e("neutral", 600),
+	"text-disabled": e("neutral", 400),
+	"text-inverse": e("white"),
+	border: e("neutral", 200),
+	"border-strong": e("neutral", 500),
+	focus: e("primary", 600),
+	"state-hover": `color-mix(in srgb, ${e("neutral", 900)} 6%, transparent)`,
+	"state-active": `color-mix(in srgb, ${e("neutral", 900)} 12%, transparent)`,
+	primary: e("primary", 600),
+	"primary-hover": e("primary", 700),
+	"primary-active": e("primary", 800),
+	"on-primary": e("white"),
+	"primary-subtle": e("primary", 50),
+	"primary-text": e("primary", 700),
+	"primary-border": e("primary", 200),
+	success: e("success", 700),
+	"success-hover": e("success", 800),
+	"success-active": e("success", 900),
+	"on-success": e("white"),
+	"success-subtle": e("success", 50),
+	"success-text": e("success", 800),
+	"success-border": e("success", 200),
+	warning: e("warning", 700),
+	"warning-hover": e("warning", 800),
+	"warning-active": e("warning", 900),
+	"on-warning": e("white"),
+	"warning-subtle": e("warning", 50),
+	"warning-text": e("warning", 800),
+	"warning-border": e("warning", 200),
+	danger: e("danger", 600),
+	"danger-hover": e("danger", 700),
+	"danger-active": e("danger", 800),
+	"on-danger": e("white"),
+	"danger-subtle": e("danger", 50),
+	"danger-text": e("danger", 700),
+	"danger-border": e("danger", 200),
+	info: e("info", 700),
+	"info-hover": e("info", 800),
+	"info-active": e("info", 900),
+	"on-info": e("white"),
+	"info-subtle": e("info", 50),
+	"info-text": e("info", 800),
+	"info-border": e("info", 200)
+}, n = {
+	bg: e("neutral", 900),
+	"bg-subtle": e("neutral", 800),
+	"bg-muted": e("neutral", 700),
+	"bg-inverse": e("neutral", 50),
+	surface: e("neutral", 900),
+	"surface-raised": e("neutral", 800),
+	backdrop: `color-mix(in srgb, ${e("black")} 60%, transparent)`,
+	text: e("neutral", 50),
+	"text-muted": e("neutral", 300),
+	"text-disabled": e("neutral", 500),
+	"text-inverse": e("neutral", 900),
+	border: e("neutral", 700),
+	"border-strong": e("neutral", 400),
+	focus: e("primary", 300),
+	"state-hover": `color-mix(in srgb, ${e("white")} 8%, transparent)`,
+	"state-active": `color-mix(in srgb, ${e("white")} 14%, transparent)`,
+	primary: e("primary", 400),
+	"primary-hover": e("primary", 300),
+	"primary-active": e("primary", 200),
+	"on-primary": e("neutral", 900),
+	"primary-subtle": e("primary", 900),
+	"primary-text": e("primary", 300),
+	"primary-border": e("primary", 700),
+	success: e("success", 400),
+	"success-hover": e("success", 300),
+	"success-active": e("success", 200),
+	"on-success": e("neutral", 900),
+	"success-subtle": e("success", 900),
+	"success-text": e("success", 300),
+	"success-border": e("success", 700),
+	warning: e("warning", 400),
+	"warning-hover": e("warning", 300),
+	"warning-active": e("warning", 200),
+	"on-warning": e("neutral", 900),
+	"warning-subtle": e("warning", 900),
+	"warning-text": e("warning", 300),
+	"warning-border": e("warning", 700),
+	danger: e("danger", 400),
+	"danger-hover": e("danger", 300),
+	"danger-active": e("danger", 200),
+	"on-danger": e("neutral", 900),
+	"danger-subtle": e("danger", 900),
+	"danger-text": e("danger", 300),
+	"danger-border": e("danger", 700),
+	info: e("info", 400),
+	"info-hover": e("info", 300),
+	"info-active": e("info", 200),
+	"on-info": e("neutral", 900),
+	"info-subtle": e("info", 900),
+	"info-text": e("info", 300),
+	"info-border": e("info", 700)
+}, r = {
+	light: {
+		colorScheme: "light",
+		colors: t,
+		shadowColor: "24 24 27"
+	},
+	dark: {
+		colorScheme: "dark",
+		colors: n,
+		shadowColor: "0 0 0"
+	}
+};
+export { n as darkColors, t as lightColors, r as themes };
+
+//# sourceMappingURL=themes.js.map

package/dist/tokens/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","names":["ref","step","color","lightColors","darkColors","themes"],"sources":["../../src/tokens/themes.ts"],"sourcesContent":["import type { baseColors, PaletteColor, PaletteStep } from './colors';\n\nconst ref = (color: PaletteColor | keyof typeof baseColors, step?: PaletteStep) =>\n  step === undefined ? `var(--color-${color})` : `var(--color-${color}-${step})`;\n\n/**\n * Semantic colors of the light theme (the default), exposed as `--color-<name>`. Components\n * only use these, never the palette, so a theme only has to redefine this layer.\n *\n * Each intent (`primary`, `success`, `warning`, `danger`, `info`) has:\n * - `<intent>`: solid fill, with `-hover` and `-active` states\n * - `on-<intent>`: text and icons on the solid fill\n * - `<intent>-subtle`: tinted background (alerts, badges)\n * - `<intent>-text`: intent-colored text on any background, subtle included\n * - `<intent>-border`: decorative border on the subtle background\n */\nexport const lightColors = {\n  bg: ref('white'),\n  'bg-subtle': ref('neutral', 50),\n  'bg-muted': ref('neutral', 100),\n  'bg-inverse': ref('neutral', 900),\n  surface: ref('white'),\n  'surface-raised': ref('white'),\n  backdrop: `color-mix(in srgb, ${ref('neutral', 900)} 50%, transparent)`,\n\n  text: ref('neutral', 900),\n  'text-muted': ref('neutral', 600),\n  'text-disabled': ref('neutral', 400),\n  'text-inverse': ref('white'),\n\n  /** Decorative borders: dividers, card outlines. */\n  border: ref('neutral', 200),\n  /** Borders that identify a control (inputs, checkboxes); must reach 3:1. */\n  'border-strong': ref('neutral', 500),\n  focus: ref('primary', 600),\n\n  /** Translucent layers for hovered and pressed items, over any surface. */\n  'state-hover': `color-mix(in srgb, ${ref('neutral', 900)} 6%, transparent)`,\n  'state-active': `color-mix(in srgb, ${ref('neutral', 900)} 12%, transparent)`,\n\n  primary: ref('primary', 600),\n  'primary-hover': ref('primary', 700),\n  'primary-active': ref('primary', 800),\n  'on-primary': ref('white'),\n  'primary-subtle': ref('primary', 50),\n  'primary-text': ref('primary', 700),\n  'primary-border': ref('primary', 200),\n\n  success: ref('success', 700),\n  'success-hover': ref('success', 800),\n  'success-active': ref('success', 900),\n  'on-success': ref('white'),\n  'success-subtle': ref('success', 50),\n  'success-text': ref('success', 800),\n  'success-border': ref('success', 200),\n\n  warning: ref('warning', 700),\n  'warning-hover': ref('warning', 800),\n  'warning-active': ref('warning', 900),\n  'on-warning': ref('white'),\n  'warning-subtle': ref('warning', 50),\n  'warning-text': ref('warning', 800),\n  'warning-border': ref('warning', 200),\n\n  danger: ref('danger', 600),\n  'danger-hover': ref('danger', 700),\n  'danger-active': ref('danger', 800),\n  'on-danger': ref('white'),\n  'danger-subtle': ref('danger', 50),\n  'danger-text': ref('danger', 700),\n  'danger-border': ref('danger', 200),\n\n  info: ref('info', 700),\n  'info-hover': ref('info', 800),\n  'info-active': ref('info', 900),\n  'on-info': ref('white'),\n  'info-subtle': ref('info', 50),\n  'info-text': ref('info', 800),\n  'info-border': ref('info', 200),\n} as const;\n\nexport type SemanticColor = keyof typeof lightColors;\n\n/**\n * Semantic colors of the dark theme. Solid fills use the light end of each scale with dark\n * text on top, and hover/active get lighter instead of darker.\n */\nexport const darkColors = {\n  bg: ref('neutral', 900),\n  'bg-subtle': ref('neutral', 800),\n  'bg-muted': ref('neutral', 700),\n  'bg-inverse': ref('neutral', 50),\n  surface: ref('neutral', 900),\n  'surface-raised': ref('neutral', 800),\n  backdrop: `color-mix(in srgb, ${ref('black')} 60%, transparent)`,\n\n  text: ref('neutral', 50),\n  'text-muted': ref('neutral', 300),\n  'text-disabled': ref('neutral', 500),\n  'text-inverse': ref('neutral', 900),\n\n  border: ref('neutral', 700),\n  'border-strong': ref('neutral', 400),\n  focus: ref('primary', 300),\n\n  'state-hover': `color-mix(in srgb, ${ref('white')} 8%, transparent)`,\n  'state-active': `color-mix(in srgb, ${ref('white')} 14%, transparent)`,\n\n  primary: ref('primary', 400),\n  'primary-hover': ref('primary', 300),\n  'primary-active': ref('primary', 200),\n  'on-primary': ref('neutral', 900),\n  'primary-subtle': ref('primary', 900),\n  'primary-text': ref('primary', 300),\n  'primary-border': ref('primary', 700),\n\n  success: ref('success', 400),\n  'success-hover': ref('success', 300),\n  'success-active': ref('success', 200),\n  'on-success': ref('neutral', 900),\n  'success-subtle': ref('success', 900),\n  'success-text': ref('success', 300),\n  'success-border': ref('success', 700),\n\n  warning: ref('warning', 400),\n  'warning-hover': ref('warning', 300),\n  'warning-active': ref('warning', 200),\n  'on-warning': ref('neutral', 900),\n  'warning-subtle': ref('warning', 900),\n  'warning-text': ref('warning', 300),\n  'warning-border': ref('warning', 700),\n\n  danger: ref('danger', 400),\n  'danger-hover': ref('danger', 300),\n  'danger-active': ref('danger', 200),\n  'on-danger': ref('neutral', 900),\n  'danger-subtle': ref('danger', 900),\n  'danger-text': ref('danger', 300),\n  'danger-border': ref('danger', 700),\n\n  info: ref('info', 400),\n  'info-hover': ref('info', 300),\n  'info-active': ref('info', 200),\n  'on-info': ref('neutral', 900),\n  'info-subtle': ref('info', 900),\n  'info-text': ref('info', 300),\n  'info-border': ref('info', 700),\n} as const satisfies Record<SemanticColor, string>;\n\nexport interface ThemeTokens {\n  /** Value of the CSS `color-scheme` property: native controls and scrollbars follow it. */\n  colorScheme: 'light' | 'dark';\n  colors: Record<SemanticColor, string>;\n  /** RGB channels used by every `--shadow-*` token. */\n  shadowColor: string;\n}\n\n/**\n * Built-in themes. Each one is a `[data-theme='<name>']` block in `src/styles/themes/`;\n * light is also the default on `:root`.\n */\nexport const themes = {\n  light: { colorScheme: 'light', colors: lightColors, shadowColor: '24 24 27' },\n  dark: { colorScheme: 'dark', colors: darkColors, shadowColor: '0 0 0' },\n} as const satisfies Record<string, ThemeTokens>;\n\nexport type ThemeName = keyof typeof themes;\n"],"mappings":"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"}

package/dist/tokens/typography.d.ts

@@ -0,0 +1,37 @@
+export declare const fontFamily: {
+    readonly base: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+    readonly mono: "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace";
+};
+/** In `rem` so text follows the user's browser font size. */
+export declare const fontSize: {
+    readonly xs: "0.75rem";
+    readonly sm: "0.875rem";
+    readonly md: "1rem";
+    readonly lg: "1.125rem";
+    readonly xl: "1.25rem";
+    readonly '2xl': "1.5rem";
+    readonly '3xl': "1.875rem";
+    readonly '4xl': "2.25rem";
+    readonly '5xl': "3rem";
+};
+export declare const fontWeight: {
+    readonly regular: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+/** Unitless, so they scale with the font size of the element they are applied to. */
+export declare const lineHeight: {
+    readonly none: "1";
+    readonly tight: "1.25";
+    readonly snug: "1.375";
+    readonly normal: "1.5";
+    readonly relaxed: "1.625";
+};
+export declare const letterSpacing: {
+    readonly tighter: "-0.05em";
+    readonly tight: "-0.025em";
+    readonly normal: "0";
+    readonly wide: "0.025em";
+    readonly wider: "0.05em";
+};

package/dist/tokens/typography.js

@@ -0,0 +1,35 @@
+// src/tokens/typography.ts
+var e = {
+	base: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+	mono: "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace"
+}, t = {
+	xs: "0.75rem",
+	sm: "0.875rem",
+	md: "1rem",
+	lg: "1.125rem",
+	xl: "1.25rem",
+	"2xl": "1.5rem",
+	"3xl": "1.875rem",
+	"4xl": "2.25rem",
+	"5xl": "3rem"
+}, n = {
+	regular: "400",
+	medium: "500",
+	semibold: "600",
+	bold: "700"
+}, r = {
+	none: "1",
+	tight: "1.25",
+	snug: "1.375",
+	normal: "1.5",
+	relaxed: "1.625"
+}, i = {
+	tighter: "-0.05em",
+	tight: "-0.025em",
+	normal: "0",
+	wide: "0.025em",
+	wider: "0.05em"
+};
+export { e as fontFamily, t as fontSize, n as fontWeight, i as letterSpacing, r as lineHeight };
+
+//# sourceMappingURL=typography.js.map

package/dist/tokens/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","names":["fontFamily","fontSize","fontWeight","lineHeight","letterSpacing"],"sources":["../../src/tokens/typography.ts"],"sourcesContent":["export const fontFamily = {\n  base: \"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n  mono: \"ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace\",\n} as const;\n\n/** In `rem` so text follows the user's browser font size. */\nexport const fontSize = {\n  xs: '0.75rem',\n  sm: '0.875rem',\n  md: '1rem',\n  lg: '1.125rem',\n  xl: '1.25rem',\n  '2xl': '1.5rem',\n  '3xl': '1.875rem',\n  '4xl': '2.25rem',\n  '5xl': '3rem',\n} as const;\n\nexport const fontWeight = {\n  regular: '400',\n  medium: '500',\n  semibold: '600',\n  bold: '700',\n} as const;\n\n/** Unitless, so they scale with the font size of the element they are applied to. */\nexport const lineHeight = {\n  none: '1',\n  tight: '1.25',\n  snug: '1.375',\n  normal: '1.5',\n  relaxed: '1.625',\n} as const;\n\nexport const letterSpacing = {\n  tighter: '-0.05em',\n  tight: '-0.025em',\n  normal: '0',\n  wide: '0.025em',\n  wider: '0.05em',\n} as const;\n"],"mappings":";AAAA,IAAaA,IAAa;CACxB,MAAM;CACN,MAAM;AACR,GAGaC,IAAW;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;AACT,GAEaC,IAAa;CACxB,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;AACR,GAGaC,IAAa;CACxB,MAAM;CACN,OAAO;CACP,MAAM;CACN,QAAQ;CACR,SAAS;AACX,GAEaC,IAAgB;CAC3B,SAAS;CACT,OAAO;CACP,QAAQ;CACR,MAAM;CACN,OAAO;AACT"}

package/dist/tokens/z-index.d.ts

@@ -0,0 +1,8 @@
+/** Stacking order of floating layers, lowest to highest. */
+export declare const zIndex: {
+    readonly dropdown: "1000";
+    readonly overlay: "1100";
+    readonly modal: "1200";
+    readonly toast: "1300";
+    readonly tooltip: "1400";
+};

package/dist/tokens/z-index.js

@@ -0,0 +1,11 @@
+// src/tokens/z-index.ts
+var e = {
+	dropdown: "1000",
+	overlay: "1100",
+	modal: "1200",
+	toast: "1300",
+	tooltip: "1400"
+};
+export { e as zIndex };
+
+//# sourceMappingURL=z-index.js.map

package/dist/tokens/z-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-index.js","names":["zIndex"],"sources":["../../src/tokens/z-index.ts"],"sourcesContent":["/** Stacking order of floating layers, lowest to highest. */\nexport const zIndex = {\n  dropdown: '1000',\n  overlay: '1100',\n  modal: '1200',\n  toast: '1300',\n  tooltip: '1400',\n} as const;\n"],"mappings":";AACA,IAAaA,IAAS;CACpB,UAAU;CACV,SAAS;CACT,OAAO;CACP,OAAO;CACP,SAAS;AACX"}

package/dist/utils/cn.d.ts

@@ -0,0 +1,8 @@
+export type ClassValue = string | number | false | null | undefined | readonly ClassValue[];
+/**
+ * Merges class names, skipping falsy values and flattening nested arrays.
+ *
+ * @example
+ * cn('button', isActive && 'button--active', className);
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,14 @@
+// src/utils/cn.ts
+function e(...t) {
+	let n = [];
+	for (let r of t) if (r || r === 0) {
+		if (Array.isArray(r)) {
+			let t = e(...r);
+			t && n.push(t);
+		} else n.push(String(r));
+	}
+	return n.join(" ");
+}
+export { e as cn };
+
+//# sourceMappingURL=cn.js.map

package/dist/utils/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","names":["cn","inputs","classes","input","nested"],"sources":["../../src/utils/cn.ts"],"sourcesContent":["export type ClassValue = string | number | false | null | undefined | readonly ClassValue[];\n\n/**\n * Merges class names, skipping falsy values and flattening nested arrays.\n *\n * @example\n * cn('button', isActive && 'button--active', className);\n */\nexport function cn(...inputs: ClassValue[]): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input && input !== 0) continue;\n\n    if (Array.isArray(input)) {\n      const nested = cn(...input);\n      if (nested) classes.push(nested);\n    } else {\n      classes.push(String(input));\n    }\n  }\n\n  return classes.join(' ');\n}\n"],"mappings":";AAQA,SAAgBA,EAAG,GAAGC,GAA8B;CAClD,IAAMC,IAAoB,CAAC;CAE3B,KAAK,IAAMC,KAASF,GAClB,IAAKE,KAASA,MAAU,GAExB;MAAI,MAAM,QAAQA,CAAK,GAAG;GACxB,IAAMC,IAASJ,EAAG,GAAGG,CAAK;GAC1B,AAAIC,KAAQF,EAAQ,KAAKE,CAAM;EACjC,OACE,EAAQ,KAAK,OAAOD,CAAK,CAAC;CAAA;CAI9B,OAAOD,EAAQ,KAAK,GAAG;AACzB"}

package/dist/utils/floating.d.ts

@@ -0,0 +1,20 @@
+import { Placement } from '@floating-ui/react-dom';
+export type { Placement };
+export interface UseFloatingLayerOptions {
+    open: boolean;
+    placement: Placement;
+    /** Gap between the reference and the floating element, in pixels. */
+    gap: number;
+    /** Makes the floating element at least as wide as the reference. */
+    matchWidth?: boolean;
+}
+/**
+ * Positions a floating element next to a reference element, flipping and shifting it to stay in
+ * the viewport and capping its height to the space available.
+ */
+export declare function useFloatingLayer({ open, placement, gap, matchWidth, }: UseFloatingLayerOptions): {
+    setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+    setFloating: (node: HTMLElement | null) => void;
+    floatingStyles: import('react').CSSProperties;
+    side: "top" | "right" | "bottom" | "left";
+};

package/dist/utils/floating.js

@@ -0,0 +1,31 @@
+import { autoUpdate as e, flip as t, offset as n, shift as r, size as i, useFloating as a } from "@floating-ui/react-dom";
+// src/utils/floating.ts
+var o = 8;
+function s({ open: s, placement: c, gap: l, matchWidth: u = !1 }) {
+	let d = a({
+		open: s,
+		placement: c,
+		strategy: "fixed",
+		whileElementsMounted: e,
+		middleware: [
+			n(l),
+			t({ padding: o }),
+			r({ padding: o }),
+			i({
+				padding: o,
+				apply({ availableHeight: e, rects: t, elements: n }) {
+					n.floating.style.maxHeight = `${Math.max(e, 0)}px`, u && (n.floating.style.minWidth = `${t.reference.width}px`);
+				}
+			})
+		]
+	});
+	return {
+		setReference: d.refs.setReference,
+		setFloating: d.refs.setFloating,
+		floatingStyles: d.floatingStyles,
+		side: d.placement.split("-")[0]
+	};
+}
+export { s as useFloatingLayer };
+
+//# sourceMappingURL=floating.js.map

package/dist/utils/floating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating.js","names":["viewportPadding","useFloatingLayer","floating","useFloating","autoUpdate","offset","gap","flip","shift","size","availableHeight","matchWidth","rects"],"sources":["../../src/utils/floating.ts"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  size,\n  useFloating,\n  type Placement,\n} from '@floating-ui/react-dom';\n\nexport type { Placement };\n\nexport interface UseFloatingLayerOptions {\n  open: boolean;\n  placement: Placement;\n  /** Gap between the reference and the floating element, in pixels. */\n  gap: number;\n  /** Makes the floating element at least as wide as the reference. */\n  matchWidth?: boolean;\n}\n\nconst viewportPadding = 8;\n\n/**\n * Positions a floating element next to a reference element, flipping and shifting it to stay in\n * the viewport and capping its height to the space available.\n */\nexport function useFloatingLayer({\n  open,\n  placement,\n  gap,\n  matchWidth = false,\n}: UseFloatingLayerOptions) {\n  const floating = useFloating({\n    open,\n    placement,\n    strategy: 'fixed',\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(gap),\n      flip({ padding: viewportPadding }),\n      shift({ padding: viewportPadding }),\n      size({\n        padding: viewportPadding,\n        apply({ availableHeight, rects, elements }) {\n          elements.floating.style.maxHeight = `${Math.max(availableHeight, 0)}px`;\n          if (matchWidth) elements.floating.style.minWidth = `${rects.reference.width}px`;\n        },\n      }),\n    ],\n  });\n\n  return {\n    setReference: floating.refs.setReference,\n    setFloating: floating.refs.setFloating,\n    floatingStyles: floating.floatingStyles,\n    side: floating.placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left',\n  };\n}\n"],"mappings":";;AAqBA,IAAMA,IAAkB;AAMxB,SAAgBC,EAAiB,EAC/B,SACA,cACA,QACA,gBAAa,MACa;CAC1B,IAAMC,IAAWC,EAAY;EAC3B;EACA;EACA,UAAU;EACV,sBAAsBC;EACtB,YAAY;GACVC,EAAOC,CAAG;GACVC,EAAK,EAAE,SAASP,EAAgB,CAAC;GACjCQ,EAAM,EAAE,SAASR,EAAgB,CAAC;GAClCS,EAAK;IACH,SAAST;IACT,MAAM,EAAE,oBAAiB,UAAO,eAAY;KAE1C,AADA,EAAS,SAAS,MAAM,YAAY,GAAG,KAAK,IAAIU,GAAiB,CAAC,EAAE,KAChEC,MAAY,EAAS,SAAS,MAAM,WAAW,GAAGC,EAAM,UAAU,MAAM;IAC9E;GACF,CAAC;EACH;CACF,CAAC;CAED,OAAO;EACL,cAAcV,EAAS,KAAK;EAC5B,aAAaA,EAAS,KAAK;EAC3B,gBAAgBA,EAAS;EACzB,MAAMA,EAAS,UAAU,MAAM,GAAG,CAAC,CAAC;CACtC;AACF"}

package/dist/utils/getElementRef.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement, Ref } from 'react';
+/** Reads the ref of an element: a prop since React 19, a field of the element before. */
+export declare function getElementRef<T>(element: ReactElement): Ref<T> | undefined;

package/dist/utils/getElementRef.js

@@ -0,0 +1,8 @@
+// src/utils/getElementRef.ts
+function e(e) {
+	let t = e.props, n = Object.getOwnPropertyDescriptor(t, "ref"), r = n?.get && "isReactWarning" in n.get;
+	return n && !r ? t.ref : e.ref ?? void 0;
+}
+export { e as getElementRef };
+
+//# sourceMappingURL=getElementRef.js.map

package/dist/utils/getElementRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getElementRef.js","names":["getElementRef","props","element","descriptor","warnsOnAccess"],"sources":["../../src/utils/getElementRef.ts"],"sourcesContent":["import type { ReactElement, Ref } from 'react';\n\n/** Reads the ref of an element: a prop since React 19, a field of the element before. */\nexport function getElementRef<T>(element: ReactElement): Ref<T> | undefined {\n  const props = element.props as { ref?: Ref<T> };\n  const descriptor = Object.getOwnPropertyDescriptor(props, 'ref');\n  const warnsOnAccess = descriptor?.get && 'isReactWarning' in descriptor.get;\n\n  if (descriptor && !warnsOnAccess) return props.ref;\n  return (element as unknown as { ref?: Ref<T> }).ref ?? undefined;\n}\n"],"mappings":";AAGA,SAAgBA,EAAiB,GAA2C;CAC1E,IAAMC,IAAQC,EAAQ,OAChBC,IAAa,OAAO,yBAAyBF,GAAO,KAAK,GACzDG,IAAgBD,GAAY,OAAO,oBAAoBA,EAAW;CAGxE,OADIA,KAAc,CAACC,IAAsBH,EAAM,MACvCC,EAAwC,OAAO,KAAA;AACzD"}

package/dist/utils/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import { Ref, RefCallback } from 'react';
+export declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;

package/dist/utils/mergeRefs.js

@@ -0,0 +1,9 @@
+// src/utils/mergeRefs.ts
+function e(...e) {
+	return (t) => {
+		for (let n of e) typeof n == "function" ? n(t) : n && (n.current = t);
+	};
+}
+export { e as mergeRefs };
+
+//# sourceMappingURL=mergeRefs.js.map

package/dist/utils/mergeRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeRefs.js","names":["mergeRefs","refs","ref","value"],"sources":["../../src/utils/mergeRefs.ts"],"sourcesContent":["import type { Ref, RefCallback } from 'react';\n\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> {\n  return (value) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') ref(value);\n      else if (ref) ref.current = value;\n    }\n  };\n}\n"],"mappings":";AAEA,SAAgBA,EAAa,GAAGC,GAA8C;CAC5E,QAAQ,MAAU;EAChB,KAAK,IAAMC,KAAOD,GAChB,AAAI,OAAOC,KAAQ,aAAYA,EAAIC,CAAK,IAC/BD,MAAK,EAAI,UAAUC;CAEhC;AACF"}

package/dist/utils/polymorphic.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+export type PolymorphicRef<As extends ElementType> = ComponentPropsWithRef<As>['ref'];
+export type PolymorphicProps<As extends ElementType, Props = object> = Props & {
+    /** Element or component rendered in place of the default one. */
+    as?: As;
+} & Omit<ComponentPropsWithoutRef<As>, keyof Props | 'as'>;
+export type PolymorphicPropsWithRef<As extends ElementType, Props = object> = PolymorphicProps<As, Props> & {
+    ref?: PolymorphicRef<As>;
+};
+export interface PolymorphicComponent<DefaultAs extends ElementType, Props = object> {
+    <As extends ElementType = DefaultAs>(props: PolymorphicPropsWithRef<As, Props>): ReactNode;
+    displayName?: string;
+}