@keboola/design 11.0.0 → 11.2.0

package/dist/testing.d.ts

@@ -1,10 +1,10 @@
-import { ReactElement } from 'react';
-import { RenderOptions, RenderResult } from '@testing-library/react';
-import { Brand } from '@keboola/brand-registry';
-
+import { ReactElement } from "react";
+import { Brand } from "@keboola/brand-registry";
+import { RenderOptions, RenderResult } from "@testing-library/react";
+//#region src/testing/renderWithTheme.d.ts
 type Options = Omit<RenderOptions, 'wrapper'> & {
-    /** Brand to drive the wrapping `<ThemeProvider>`. Defaults to `keboola`. */
-    brand?: Brand;
+  /** Brand to drive the wrapping `<ThemeProvider>`. Defaults to `keboola`. */
+  brand?: Brand;
 };
 /**
  * `@testing-library/react` `render` wrapped in a `<ThemeProvider brand={...}>`.
@@ -21,5 +21,6 @@ type Options = Omit<RenderOptions, 'wrapper'> & {
  * working through a single `brand` option.
  */
 declare const renderWithTheme: (ui: ReactElement, options?: Options) => RenderResult;
-
+//#endregion
 export { renderWithTheme };
+//# sourceMappingURL=testing.d.ts.map

package/dist/testing.js

@@ -1,24 +1,39 @@
-import { ThemeProvider } from './chunk-KTTLLKGQ.js';
-import './chunk-KR7NXXHC.js';
-import './chunk-SWQFYNYG.js';
-import './chunk-3W27OLK5.js';
-import './chunk-MODE4QIA.js';
-import { keboolaLegacyIds, ArgoDesignContext } from './chunk-WETKNYZX.js';
-import './chunk-LXLIQ2D6.js';
-import './chunk-G3PMV62Z.js';
-import { render } from '@testing-library/react';
-import { keboola } from '@keboola/brand-registry';
-import { jsx } from 'react/jsx-runtime';
-
-var renderWithTheme = (ui, options = {}) => {
-  const { brand = keboola, ...rest } = options;
-  const isArgo = !keboolaLegacyIds.includes(brand.id);
-  return render(ui, {
-    ...rest,
-    wrapper: ({ children }) => /* @__PURE__ */ jsx(ThemeProvider, { brands: [brand], brandId: brand.id, children: /* @__PURE__ */ jsx(ArgoDesignContext, { value: isArgo, children }) })
-  });
+import { ArgoDesignContext, keboolaLegacyIds } from "./context-KxxeMHbR.js";
+import { ThemeProvider } from "./ThemeProvider-QncUrfJn.js";
+import { keboola } from "@keboola/brand-registry";
+import { jsx } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+//#region src/testing/renderWithTheme.tsx
+/**
+* `@testing-library/react` `render` wrapped in a `<ThemeProvider brand={...}>`.
+*
+* Use in unit tests for any component that calls `useTheme()` or relies on
+* the brand-driven CSS variables. Defaults to the canonical Keboola brand so
+* callers can opt into a specific brand only when they need to assert
+* brand-dependent behaviour (e.g. chrome re-skins under `keboola-legacy`).
+*
+* `ThemeProvider` no longer drives the argo/legacy design language (that is
+* kbc-ui-specific), so this helper also provides `ArgoDesignContext` derived
+* from the brand — a legacy brand renders legacy chrome, any other renders
+* argo — matching how kbc-ui wires it, so brand-dependent chrome tests keep
+* working through a single `brand` option.
+*/
+const renderWithTheme = (ui, options = {}) => {
+	const { brand = keboola, ...rest } = options;
+	const isArgo = !keboolaLegacyIds.includes(brand.id);
+	return render(ui, {
+		...rest,
+		wrapper: ({ children }) => /* @__PURE__ */ jsx(ThemeProvider, {
+			brands: [brand],
+			brandId: brand.id,
+			children: /* @__PURE__ */ jsx(ArgoDesignContext, {
+				value: isArgo,
+				children
+			})
+		})
+	});
 };
-
+//#endregion
 export { renderWithTheme };
-//# sourceMappingURL=testing.js.map
+
 //# sourceMappingURL=testing.js.map

package/dist/testing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/testing/renderWithTheme.tsx"],"names":[],"mappings":";;;;;;;;;;;;AA2BO,IAAM,eAAA,GAAkB,CAAC,EAAA,EAAkB,OAAA,GAAmB,EAAC,KAAoB;AACxF,EAAA,MAAM,EAAE,KAAA,GAAQ,OAAA,EAAS,GAAG,MAAK,GAAI,OAAA;AACrC,EAAA,MAAM,MAAA,GAAS,CAAC,gBAAA,CAAiB,QAAA,CAAS,MAAM,EAAE,CAAA;AAClD,EAAA,OAAO,OAAO,EAAA,EAAI;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,SAAS,CAAC,EAAE,UAAS,qBACnB,GAAA,CAAC,iBAAc,MAAA,EAAQ,CAAC,KAAK,CAAA,EAAG,OAAA,EAAS,MAAM,EAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,qBAAkB,KAAA,EAAO,MAAA,EAAS,UAAS,CAAA,EAC9C;AAAA,GAEH,CAAA;AACH","file":"testing.js","sourcesContent":["import type { ReactElement } from 'react';\nimport { render, type RenderOptions, type RenderResult } from '@testing-library/react';\n\nimport { type Brand, keboola } from '@keboola/brand-registry';\n\nimport { ArgoDesignContext, ThemeProvider } from '../components/ThemeProvider';\nimport { keboolaLegacyIds } from '../components/ThemeProvider/defaults';\n\ntype Options = Omit<RenderOptions, 'wrapper'> & {\n  /** Brand to drive the wrapping `<ThemeProvider>`. Defaults to `keboola`. */\n  brand?: Brand;\n};\n\n/**\n * `@testing-library/react` `render` wrapped in a `<ThemeProvider brand={...}>`.\n *\n * Use in unit tests for any component that calls `useTheme()` or relies on\n * the brand-driven CSS variables. Defaults to the canonical Keboola brand so\n * callers can opt into a specific brand only when they need to assert\n * brand-dependent behaviour (e.g. chrome re-skins under `keboola-legacy`).\n *\n * `ThemeProvider` no longer drives the argo/legacy design language (that is\n * kbc-ui-specific), so this helper also provides `ArgoDesignContext` derived\n * from the brand — a legacy brand renders legacy chrome, any other renders\n * argo — matching how kbc-ui wires it, so brand-dependent chrome tests keep\n * working through a single `brand` option.\n */\nexport const renderWithTheme = (ui: ReactElement, options: Options = {}): RenderResult => {\n  const { brand = keboola, ...rest } = options;\n  const isArgo = !keboolaLegacyIds.includes(brand.id);\n  return render(ui, {\n    ...rest,\n    wrapper: ({ children }) => (\n      <ThemeProvider brands={[brand]} brandId={brand.id}>\n        <ArgoDesignContext value={isArgo}>{children}</ArgoDesignContext>\n      </ThemeProvider>\n    ),\n  });\n};\n"]}
+{"version":3,"file":"testing.js","names":[],"sources":["../src/testing/renderWithTheme.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { render, type RenderOptions, type RenderResult } from '@testing-library/react';\n\nimport { type Brand, keboola } from '@keboola/brand-registry';\n\nimport { ArgoDesignContext, ThemeProvider } from '../components/ThemeProvider';\nimport { keboolaLegacyIds } from '../components/ThemeProvider/defaults';\n\ntype Options = Omit<RenderOptions, 'wrapper'> & {\n  /** Brand to drive the wrapping `<ThemeProvider>`. Defaults to `keboola`. */\n  brand?: Brand;\n};\n\n/**\n * `@testing-library/react` `render` wrapped in a `<ThemeProvider brand={...}>`.\n *\n * Use in unit tests for any component that calls `useTheme()` or relies on\n * the brand-driven CSS variables. Defaults to the canonical Keboola brand so\n * callers can opt into a specific brand only when they need to assert\n * brand-dependent behaviour (e.g. chrome re-skins under `keboola-legacy`).\n *\n * `ThemeProvider` no longer drives the argo/legacy design language (that is\n * kbc-ui-specific), so this helper also provides `ArgoDesignContext` derived\n * from the brand — a legacy brand renders legacy chrome, any other renders\n * argo — matching how kbc-ui wires it, so brand-dependent chrome tests keep\n * working through a single `brand` option.\n */\nexport const renderWithTheme = (ui: ReactElement, options: Options = {}): RenderResult => {\n  const { brand = keboola, ...rest } = options;\n  const isArgo = !keboolaLegacyIds.includes(brand.id);\n  return render(ui, {\n    ...rest,\n    wrapper: ({ children }) => (\n      <ThemeProvider brands={[brand]} brandId={brand.id}>\n        <ArgoDesignContext value={isArgo}>{children}</ArgoDesignContext>\n      </ThemeProvider>\n    ),\n  });\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,mBAAmB,IAAkB,UAAmB,CAAC,MAAoB;CACxF,MAAM,EAAE,QAAQ,SAAS,GAAG,SAAS;CACrC,MAAM,SAAS,CAAC,iBAAiB,SAAS,MAAM,EAAE;CAClD,OAAO,OAAO,IAAI;EAChB,GAAG;EACH,UAAU,EAAE,eACV,oBAAC,eAAD;GAAe,QAAQ,CAAC,KAAK;GAAG,SAAS,MAAM;GAC7C,UAAA,oBAAC,mBAAD;IAAmB,OAAO;IAAS;GAA4B,CAAA;EAClD,CAAA;CAEnB,CAAC;AACH"}

package/dist/themeTokens-BNg98Mu9.js

@@ -0,0 +1,85 @@
+import { DEFAULT_BRAND_ID, DEFAULT_COLOR_SCHEME } from "./context-KxxeMHbR.js";
+import { BRAND_ATTRIBUTE, THEME_ATTRIBUTE } from "./useColorSchemeState-CYqcUfSH.js";
+import { useSyncExternalStore } from "react";
+//#region src/components/ThemeProvider/useThemeAttributes.ts
+const DEFAULT_ATTRIBUTES = {
+	cacheKey: `${DEFAULT_COLOR_SCHEME}:${DEFAULT_BRAND_ID}`,
+	scheme: DEFAULT_COLOR_SCHEME,
+	brandId: DEFAULT_BRAND_ID
+};
+let snapshot = DEFAULT_ATTRIBUTES;
+const readThemeAttributes = () => {
+	if (typeof document === "undefined") return DEFAULT_ATTRIBUTES;
+	const root = document.documentElement;
+	const theme = root.getAttribute(THEME_ATTRIBUTE);
+	const scheme = theme === "dark" || theme === "light" ? theme : DEFAULT_COLOR_SCHEME;
+	const brandId = root.getAttribute("data-brand") ?? "design-system";
+	const cacheKey = `${scheme}:${brandId}`;
+	if (cacheKey !== snapshot.cacheKey) snapshot = {
+		cacheKey,
+		scheme,
+		brandId
+	};
+	return snapshot;
+};
+const subscribe = (onChange) => {
+	if (typeof document === "undefined") return () => {};
+	const observer = new MutationObserver(onChange);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: [THEME_ATTRIBUTE, BRAND_ATTRIBUTE]
+	});
+	return () => observer.disconnect();
+};
+const getServerSnapshot = () => DEFAULT_ATTRIBUTES;
+/**
+* The colour scheme and brand currently applied to `<html>`, plus a key that
+* changes whenever they do — for memoizing anything built from `resolveToken`.
+*
+* Read from the DOM rather than `useTheme()` on purpose: `ThemeProvider` writes
+* both attributes from passive effects, so during the render after a scheme
+* change the context already says `dark` while `<html>` — and therefore every
+* computed `--*` value — is still light. Keying off the attributes keeps the
+* values and the key that stands for them in lockstep, and works in a subtree
+* with no `ThemeProvider` above it.
+*
+* Returning `scheme` from the same read is what makes that safe by construction:
+* a caller cannot pick up the new key and the old scheme.
+*/
+const useThemeAttributes = () => useSyncExternalStore(subscribe, readThemeAttributes, getServerSnapshot);
+//#endregion
+//#region src/utils/themeTokens.ts
+/**
+* Live access to the semantic `--*` design tokens for consumers that cannot use
+* a Tailwind class — a CodeMirror theme object, a mermaid `themeVariables` map,
+* an SVG serialized for export. Those all need a concrete color string at build
+* time, so we resolve the value the browser currently computes for `<html>` and
+* hand the resulting `rgb(...)` to the library.
+*
+* SSR/no-document falls back to a literal; so does a token the stylesheet has
+* not defined (which is what unit tests see, since they load no CSS).
+*/
+const format = (channels, alpha) => alpha === void 0 ? `rgb(${channels})` : `rgb(${channels} / ${alpha})`;
+const resolveToken = (token, fallbackChannels, alpha) => {
+	const channels = typeof document === "undefined" ? fallbackChannels : getComputedStyle(document.documentElement).getPropertyValue(`--${token}`).trim() || fallbackChannels;
+	return format(channels, alpha);
+};
+/**
+* A {@link resolveToken} bound to a single `getComputedStyle` snapshot.
+*
+* Reach for this when building a whole palette at once: `resolveToken` reads the
+* computed style per call, so a config with dozens of token lookups forces dozens
+* of style resolutions for one render. Take a snapshot, read every token off it,
+* throw it away.
+*
+* Snapshot per palette build, never module-level — the values change whenever the
+* scheme or brand does, and a cached resolver would keep serving the old ones.
+*/
+const createTokenResolver = () => {
+	const computed = typeof document === "undefined" ? null : getComputedStyle(document.documentElement);
+	return (token, fallbackChannels, alpha) => format(computed?.getPropertyValue(`--${token}`).trim() || fallbackChannels, alpha);
+};
+//#endregion
+export { createTokenResolver, resolveToken, useThemeAttributes };
+
+//# sourceMappingURL=themeTokens-BNg98Mu9.js.map

package/dist/themeTokens-BNg98Mu9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeTokens-BNg98Mu9.js","names":[],"sources":["../src/components/ThemeProvider/useThemeAttributes.ts","../src/utils/themeTokens.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport { DEFAULT_BRAND_ID, DEFAULT_COLOR_SCHEME } from './defaults';\nimport type { BrandId, ResolvedColorScheme } from './types';\nimport { BRAND_ATTRIBUTE } from './useBrandState';\nimport { THEME_ATTRIBUTE } from './useColorSchemeState';\n\nexport type ThemeAttributes = {\n  /** Changes whenever `scheme` or `brandId` does — the memo key for anything built from live `--*` values. */\n  cacheKey: string;\n  scheme: ResolvedColorScheme;\n  brandId: BrandId;\n};\n\n// No attribute set means the stylesheet's own `:root` block is painting, which is\n// the default scheme — not a third \"unknown\" state. Same value on the server, so\n// the SSR snapshot and the client's first render agree.\nconst DEFAULT_ATTRIBUTES: ThemeAttributes = {\n  cacheKey: `${DEFAULT_COLOR_SCHEME}:${DEFAULT_BRAND_ID}`,\n  scheme: DEFAULT_COLOR_SCHEME,\n  brandId: DEFAULT_BRAND_ID,\n};\n\n// `useSyncExternalStore` re-renders forever on a snapshot whose reference changes\n// on every read, so the object is rebuilt only when the key it stands for moves.\nlet snapshot = DEFAULT_ATTRIBUTES;\n\nconst readThemeAttributes = (): ThemeAttributes => {\n  if (typeof document === 'undefined') return DEFAULT_ATTRIBUTES;\n\n  const root = document.documentElement;\n  const theme = root.getAttribute(THEME_ATTRIBUTE);\n  const scheme: ResolvedColorScheme =\n    theme === 'dark' || theme === 'light' ? theme : DEFAULT_COLOR_SCHEME;\n  const brandId = root.getAttribute(BRAND_ATTRIBUTE) ?? DEFAULT_BRAND_ID;\n  const cacheKey = `${scheme}:${brandId}`;\n\n  if (cacheKey !== snapshot.cacheKey) snapshot = { cacheKey, scheme, brandId };\n\n  return snapshot;\n};\n\nconst subscribe = (onChange: () => void): (() => void) => {\n  if (typeof document === 'undefined') return () => {};\n\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [THEME_ATTRIBUTE, BRAND_ATTRIBUTE],\n  });\n\n  return () => observer.disconnect();\n};\n\nconst getServerSnapshot = (): ThemeAttributes => DEFAULT_ATTRIBUTES;\n\n/**\n * The colour scheme and brand currently applied to `<html>`, plus a key that\n * changes whenever they do — for memoizing anything built from `resolveToken`.\n *\n * Read from the DOM rather than `useTheme()` on purpose: `ThemeProvider` writes\n * both attributes from passive effects, so during the render after a scheme\n * change the context already says `dark` while `<html>` — and therefore every\n * computed `--*` value — is still light. Keying off the attributes keeps the\n * values and the key that stands for them in lockstep, and works in a subtree\n * with no `ThemeProvider` above it.\n *\n * Returning `scheme` from the same read is what makes that safe by construction:\n * a caller cannot pick up the new key and the old scheme.\n */\nexport const useThemeAttributes = (): ThemeAttributes =>\n  useSyncExternalStore(subscribe, readThemeAttributes, getServerSnapshot);\n","/**\n * Live access to the semantic `--*` design tokens for consumers that cannot use\n * a Tailwind class — a CodeMirror theme object, a mermaid `themeVariables` map,\n * an SVG serialized for export. Those all need a concrete color string at build\n * time, so we resolve the value the browser currently computes for `<html>` and\n * hand the resulting `rgb(...)` to the library.\n *\n * SSR/no-document falls back to a literal; so does a token the stylesheet has\n * not defined (which is what unit tests see, since they load no CSS).\n */\nconst format = (channels: string, alpha?: number): string =>\n  alpha === undefined ? `rgb(${channels})` : `rgb(${channels} / ${alpha})`;\n\nexport const resolveToken = (token: string, fallbackChannels: string, alpha?: number): string => {\n  const channels =\n    typeof document === 'undefined'\n      ? fallbackChannels\n      : getComputedStyle(document.documentElement).getPropertyValue(`--${token}`).trim() ||\n        fallbackChannels;\n  return format(channels, alpha);\n};\n\n/**\n * A {@link resolveToken} bound to a single `getComputedStyle` snapshot.\n *\n * Reach for this when building a whole palette at once: `resolveToken` reads the\n * computed style per call, so a config with dozens of token lookups forces dozens\n * of style resolutions for one render. Take a snapshot, read every token off it,\n * throw it away.\n *\n * Snapshot per palette build, never module-level — the values change whenever the\n * scheme or brand does, and a cached resolver would keep serving the old ones.\n */\nexport const createTokenResolver = () => {\n  const computed =\n    typeof document === 'undefined' ? null : getComputedStyle(document.documentElement);\n\n  return (token: string, fallbackChannels: string, alpha?: number): string =>\n    format(computed?.getPropertyValue(`--${token}`).trim() || fallbackChannels, alpha);\n};\n"],"mappings":";;;;AAiBA,MAAM,qBAAsC;CAC1C,UAAU,GAAG,qBAAqB,GAAG;CACrC,QAAQ;CACR,SAAS;AACX;AAIA,IAAI,WAAW;AAEf,MAAM,4BAA6C;CACjD,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,OAAO,SAAS;CACtB,MAAM,QAAQ,KAAK,aAAa,eAAe;CAC/C,MAAM,SACJ,UAAU,UAAU,UAAU,UAAU,QAAQ;CAClD,MAAM,UAAU,KAAK,aAAA,YAA4B,KAAA;CACjD,MAAM,WAAW,GAAG,OAAO,GAAG;CAE9B,IAAI,aAAa,SAAS,UAAU,WAAW;EAAE;EAAU;EAAQ;CAAQ;CAE3E,OAAO;AACT;AAEA,MAAM,aAAa,aAAuC;CACxD,IAAI,OAAO,aAAa,aAAa,aAAa,CAAC;CAEnD,MAAM,WAAW,IAAI,iBAAiB,QAAQ;CAC9C,SAAS,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB,CAAC,iBAAiB,eAAe;CACpD,CAAC;CAED,aAAa,SAAS,WAAW;AACnC;AAEA,MAAM,0BAA2C;;;;;;;;;;;;;;;AAgBjD,MAAa,2BACX,qBAAqB,WAAW,qBAAqB,iBAAiB;;;;;;;;;;;;;AC7DxE,MAAM,UAAU,UAAkB,UAChC,UAAU,KAAA,IAAY,OAAO,SAAS,KAAK,OAAO,SAAS,KAAK,MAAM;AAExE,MAAa,gBAAgB,OAAe,kBAA0B,UAA2B;CAC/F,MAAM,WACJ,OAAO,aAAa,cAChB,mBACA,iBAAiB,SAAS,eAAe,CAAC,CAAC,iBAAiB,KAAK,OAAO,CAAC,CAAC,KAAK,KAC/E;CACN,OAAO,OAAO,UAAU,KAAK;AAC/B;;;;;;;;;;;;AAaA,MAAa,4BAA4B;CACvC,MAAM,WACJ,OAAO,aAAa,cAAc,OAAO,iBAAiB,SAAS,eAAe;CAEpF,QAAQ,OAAe,kBAA0B,UAC/C,OAAO,UAAU,iBAAiB,KAAK,OAAO,CAAC,CAAC,KAAK,KAAK,kBAAkB,KAAK;AACrF"}

package/dist/toast-CjkURw0M.js

@@ -0,0 +1,184 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { AlertCircle, AlertTriangle, CircleCheck, Info, Loader2, X } from "./icons-Cek151jC.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+//#region src/components/Toast/ToastAction.tsx
+const ToastAction = ({ ref, className, ...rest }) => /* @__PURE__ */ jsx("button", {
+	...rest,
+	ref,
+	"data-slot": "toast-action",
+	type: "button",
+	className: cn("tw:col-start-3", "tw:row-start-1", "tw:flex", "tw:items-center", "tw:justify-center", "tw:text-xs", "tw:font-medium", "tw:text-primary", "tw:px-2", "tw:h-6", "tw:bg-primary-foreground", "tw:rounded", className)
+});
+//#endregion
+//#region src/components/Toast/ToastDescription.tsx
+const ToastDescription = ({ ref, className, children, ...rest }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "toast-description",
+	className: cn("tw:col-start-2", "tw:font-normal", "tw:break-words", "tw:text-white", "tw:group-data-[variant=default]/toast:text-muted-foreground", className),
+	...rest,
+	children
+});
+//#endregion
+//#region src/components/Toast/ToastDismiss.tsx
+const ToastDismiss = ({ ref, className, ...rest }) => /* @__PURE__ */ jsxs("button", {
+	ref,
+	"data-slot": "toast-dismiss",
+	className: cn("tw:flex", "tw:justify-center", "tw:col-start-4", "tw:row-start-1", "tailwindcss-preflight", "tw:[&_svg]:aspect-square", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-4", "tw:[&_svg]:m-1", "tw:text-white", "tw:group-data-[variant=default]/toast:[&_svg]:text-popover-foreground", "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:[&_svg]:text-foreground", className),
+	type: "button",
+	...rest,
+	children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
+		className: "tw:sr-only",
+		children: "Dismiss"
+	})]
+});
+//#endregion
+//#region src/components/Toast/ToastDuration.tsx
+const ToastDuration = ({ ref, duration, className, style, ...rest }) => /* @__PURE__ */ jsx("span", {
+	...rest,
+	ref,
+	className: cn("tw:bg-white/30", "tw:group-data-[variant=default]/toast:bg-popover-foreground/20", "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:bg-foreground/20", "tw:rounded-bl-lg", "tw:mx-px", "tw:absolute", "tw:bottom-0", "tw:left-0", "tw:h-1", "tw:animate-toast-progress", "tw:group-hover/toast:[animation-play-state:paused]", className),
+	style: {
+		animationDuration: `${duration}ms`,
+		...style
+	}
+});
+//#endregion
+//#region src/components/Toast/ToastTitle.tsx
+const ToastTitle = ({ ref, className, children, ...rest }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "toast-title",
+	className: cn("tw:col-start-2", "tw:text-sm", "tw:leading-6", "tw:min-h-6", "tw:self-center", "tw:text-white", "tw:group-data-[variant=default]/toast:text-popover-foreground", "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:text-foreground", "tw:break-words", "tw:font-medium", className),
+	...rest,
+	children
+});
+//#endregion
+//#region src/components/Toast/ToastRoot.tsx
+const variants = cva([
+	"tailwindcss-preflight",
+	"tw:group/toast",
+	"tw:relative",
+	"tw:grid",
+	"tw:grid-cols-[0_1fr_auto_auto]",
+	"tw:items-start",
+	"tw:has-[[data-slot=toast-description]]:grid-rows-[auto_auto]",
+	"tw:has-[[data-slot=toast-icon]]:grid-cols-[auto_1fr_auto_auto]",
+	"tw:[&_[data-slot=toast-icon]]:mr-2",
+	"tw:[&_[data-slot=toast-title]]:mr-2.5",
+	"tw:[&_[data-slot=toast-description]]:mr-2.5",
+	"tw:[&_[data-slot=toast-action]]:mr-2",
+	"tw:[&_[data-slot=toast-description]]:col-end-3",
+	"tw:gap-y-0",
+	"tw:p-4",
+	"tw:rounded-lg",
+	"tw:shadow-md"
+], {
+	defaultVariants: { variant: "info" },
+	variants: { variant: {
+		default: "tw:border tw:border-border tw:bg-popover",
+		error: "tw:bg-error-550",
+		info: "tw:bg-blue-600",
+		success: "tw:bg-green-700",
+		warning: "tw:bg-warning-550"
+	} }
+});
+const DEFAULT_VARIANT_ICON = {
+	error: /* @__PURE__ */ jsx(AlertTriangle, {}),
+	info: /* @__PURE__ */ jsx(Info, {}),
+	success: /* @__PURE__ */ jsx(CircleCheck, {}),
+	warning: /* @__PURE__ */ jsx(AlertCircle, {})
+};
+const ToastRoot = ({ id, title, description, action, duration = Infinity, variant = "info", loading = false, icon: iconProp }) => {
+	const renderArgo = useArgoDesign();
+	const icon = (() => {
+		if (loading) return /* @__PURE__ */ jsx(Loader2, { className: "tw:animate-spin" });
+		if (iconProp) return iconProp;
+		if (variant === "default" || variant === null) return null;
+		return DEFAULT_VARIANT_ICON[variant];
+	})();
+	const handleActionClick = (event) => {
+		toast.dismiss(id);
+		action?.onClick(event);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-variant": variant,
+		"data-argo": renderArgo,
+		className: cn(variants({ variant }), "tw:data-[variant=default]:data-[argo=true]:bg-background"),
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				"data-slot": "toast-icon",
+				className: cn("tw:inline-flex", "tw:items-center", "tw:justify-center", "tw:self-center", "tw:aspect-square", "tw:size-5", "tw:shrink-0", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-5", "tw:text-white", "tw:group-data-[variant=default]/toast:text-popover-foreground", "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:text-foreground"),
+				children: icon
+			}),
+			/* @__PURE__ */ jsx(ToastTitle, { children: title }),
+			description && /* @__PURE__ */ jsx(ToastDescription, { children: description }),
+			action && /* @__PURE__ */ jsx(ToastAction, {
+				style: action?.actionButtonStyle,
+				onClick: handleActionClick,
+				children: action.label
+			}),
+			/* @__PURE__ */ jsx(ToastDismiss, { onClick: () => toast.dismiss(id) }),
+			duration !== Infinity && /* @__PURE__ */ jsx(ToastDuration, { duration })
+		]
+	});
+};
+//#endregion
+//#region src/components/Toast/toast.tsx
+const toast$1 = ({ onAutoClose, onDismiss, testId, toasterId, dismissible = true, position, title: titleProp, ...toast$2 }) => {
+	const duration = (() => {
+		if (typeof toast$2.duration === "number") return toast$2.duration;
+		if (toast$2.variant === "error" || toast$2.variant === "warning") return Infinity;
+		return toast$2.duration ?? 5e3;
+	})();
+	const renderCustomToast = (id) => {
+		const title = typeof titleProp === "function" ? titleProp({ dismiss: () => toast.dismiss(id) }) : titleProp;
+		return /* @__PURE__ */ jsx(ToastRoot, {
+			...toast$2,
+			id,
+			title,
+			duration
+		});
+	};
+	return toast.custom(renderCustomToast, {
+		...toast$2.id != null ? { id: toast$2.id } : {},
+		unstyled: true,
+		position,
+		onAutoClose,
+		onDismiss,
+		testId,
+		toasterId,
+		dismissible,
+		duration,
+		className: cn("tw:rounded-lg", "tw:focus-visible:!ring-4", "tw:focus-visible:!ring-ring/50")
+	});
+};
+toast$1.success = (title, options) => toast$1({
+	...options,
+	title,
+	variant: "success"
+});
+toast$1.error = (title, options) => toast$1({
+	...options,
+	title,
+	variant: "error",
+	duration: options?.duration ?? Infinity
+});
+toast$1.warning = (title, options) => toast$1({
+	...options,
+	title,
+	variant: "warning",
+	duration: options?.duration ?? Infinity
+});
+toast$1.info = (title, options) => toast$1({
+	...options,
+	title,
+	variant: "info"
+});
+toast$1.dismiss = (toastId) => toast.dismiss(toastId);
+toast$1.dismissAll = () => toast.dismiss();
+//#endregion
+export { toast$1 as toast };
+
+//# sourceMappingURL=toast-CjkURw0M.js.map

package/dist/toast-CjkURw0M.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-CjkURw0M.js","names":["sonnerToast","toast","sonnerToast"],"sources":["../src/components/Toast/ToastAction.tsx","../src/components/Toast/ToastDescription.tsx","../src/components/Toast/ToastDismiss.tsx","../src/components/Toast/ToastDuration.tsx","../src/components/Toast/ToastTitle.tsx","../src/components/Toast/ToastRoot.tsx","../src/components/Toast/toast.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'>;\n\nexport const ToastAction = ({ ref, className, ...rest }: Props) => (\n  <button\n    {...rest}\n    ref={ref}\n    data-slot=\"toast-action\"\n    type=\"button\"\n    className={cn(\n      // layout\n      'tw:col-start-3',\n      'tw:row-start-1',\n      'tw:flex',\n      'tw:items-center',\n      'tw:justify-center',\n\n      // font\n      'tw:text-xs',\n      'tw:font-medium',\n      'tw:text-primary',\n\n      // sizing\n      'tw:px-2',\n      'tw:h-6',\n\n      // styles\n      'tw:bg-primary-foreground',\n      'tw:rounded',\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const ToastDescription = ({ ref, className, children, ...rest }: Props) => (\n  <div\n    ref={ref}\n    data-slot=\"toast-description\"\n    className={cn(\n      'tw:col-start-2',\n      'tw:font-normal',\n      'tw:break-words',\n      'tw:text-white',\n      'tw:group-data-[variant=default]/toast:text-muted-foreground',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'>;\n\nexport const ToastDismiss = ({ ref, className, ...rest }: Props) => (\n  <button\n    ref={ref}\n    data-slot=\"toast-dismiss\"\n    className={cn(\n      'tw:flex',\n      'tw:justify-center',\n      'tw:col-start-4',\n      'tw:row-start-1',\n      'tailwindcss-preflight',\n      'tw:[&_svg]:aspect-square',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      'tw:[&_svg]:m-1',\n\n      'tw:text-white',\n      'tw:group-data-[variant=default]/toast:[&_svg]:text-popover-foreground',\n      'tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:[&_svg]:text-foreground',\n      className,\n    )}\n    type=\"button\"\n    {...rest}\n  >\n    <X />\n    <span className=\"tw:sr-only\">Dismiss</span>\n  </button>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype ToastDurationProps = ComponentProps<'span'> & {\n  duration: number;\n};\n\nexport const ToastDuration = ({ ref, duration, className, style, ...rest }: ToastDurationProps) => (\n  <span\n    {...rest}\n    ref={ref}\n    className={cn(\n      'tw:bg-white/30',\n      'tw:group-data-[variant=default]/toast:bg-popover-foreground/20',\n      'tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:bg-foreground/20',\n      'tw:rounded-bl-lg',\n      'tw:mx-px',\n\n      // positioning\n      'tw:absolute',\n      'tw:bottom-0',\n      'tw:left-0',\n\n      // sizing\n      'tw:h-1',\n\n      // animation\n      'tw:animate-toast-progress',\n      'tw:group-hover/toast:[animation-play-state:paused]',\n      className,\n    )}\n    style={{\n      animationDuration: `${duration}ms`,\n      ...style,\n    }}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const ToastTitle = ({ ref, className, children, ...rest }: Props) => (\n  <div\n    ref={ref}\n    data-slot=\"toast-title\"\n    className={cn(\n      'tw:col-start-2',\n      'tw:text-sm',\n      'tw:leading-6',\n      'tw:min-h-6',\n      'tw:self-center',\n      'tw:text-white',\n      'tw:group-data-[variant=default]/toast:text-popover-foreground',\n      'tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:text-foreground',\n\n      'tw:break-words',\n      'tw:font-medium',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n","import type { MouseEventHandler, ReactNode } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\nimport { type Action, toast as sonnerToast } from 'sonner';\n\nimport { AlertCircle, AlertTriangle, CircleCheck, Info, Loader2 } from '../../icons';\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { ToastAction } from './ToastAction';\nimport { ToastDescription } from './ToastDescription';\nimport { ToastDismiss } from './ToastDismiss';\nimport { ToastDuration } from './ToastDuration';\nimport { ToastTitle } from './ToastTitle';\n\nconst variants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/toast',\n    'tw:relative',\n\n    // layout\n    'tw:grid',\n    'tw:grid-cols-[0_1fr_auto_auto]',\n    'tw:items-start',\n    'tw:has-[[data-slot=toast-description]]:grid-rows-[auto_auto]',\n    'tw:has-[[data-slot=toast-icon]]:grid-cols-[auto_1fr_auto_auto]',\n    'tw:[&_[data-slot=toast-icon]]:mr-2',\n    'tw:[&_[data-slot=toast-title]]:mr-2.5',\n    'tw:[&_[data-slot=toast-description]]:mr-2.5',\n    'tw:[&_[data-slot=toast-action]]:mr-2',\n    'tw:[&_[data-slot=toast-description]]:col-end-3',\n    'tw:gap-y-0',\n\n    // styles\n    'tw:p-4',\n    'tw:rounded-lg',\n    'tw:shadow-md',\n  ],\n  {\n    defaultVariants: {\n      variant: 'info',\n    },\n    variants: {\n      variant: {\n        default: 'tw:border tw:border-border tw:bg-popover',\n        error: 'tw:bg-error-550',\n        info: 'tw:bg-blue-600',\n        success: 'tw:bg-green-700',\n        warning: 'tw:bg-warning-550',\n      },\n    },\n  },\n);\n\ntype Variants = VariantProps<typeof variants>;\ntype Variant = NonNullable<Variants['variant']>;\ntype VariantIcon = Exclude<Variant, 'default'>;\n\ntype Props = {\n  id: string | number;\n  title: ReactNode;\n  icon?: ReactNode;\n  description?: ReactNode;\n  action?: Action;\n  loading?: boolean;\n  duration?: number;\n  // offset?: number;\n} & Variants;\n\nconst DEFAULT_VARIANT_ICON: Record<VariantIcon, ReactNode> = {\n  error: <AlertTriangle />,\n  info: <Info />,\n  success: <CircleCheck />,\n  warning: <AlertCircle />,\n};\n\nexport const ToastRoot = ({\n  id,\n  title,\n  description,\n  action,\n  duration = Infinity,\n  variant = 'info',\n  loading = false,\n  icon: iconProp,\n}: Props) => {\n  const renderArgo = useArgoDesign();\n\n  const icon: ReactNode = (() => {\n    if (loading) return <Loader2 className=\"tw:animate-spin\" />;\n    if (iconProp) return iconProp;\n    if (variant === 'default' || variant === null) return null;\n    return DEFAULT_VARIANT_ICON[variant];\n  })();\n\n  const handleActionClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    sonnerToast.dismiss(id);\n    action?.onClick(event);\n  };\n\n  return (\n    <div\n      data-variant={variant}\n      data-argo={renderArgo}\n      className={cn(\n        variants({ variant }),\n        'tw:data-[variant=default]:data-[argo=true]:bg-background',\n      )}\n    >\n      {icon && (\n        <span\n          data-slot=\"toast-icon\"\n          className={cn(\n            'tw:inline-flex',\n            'tw:items-center',\n            'tw:justify-center',\n            'tw:self-center',\n            'tw:aspect-square',\n            'tw:size-5',\n            'tw:shrink-0',\n            'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n            'tw:text-white',\n            'tw:group-data-[variant=default]/toast:text-popover-foreground',\n            'tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:text-foreground',\n          )}\n        >\n          {icon}\n        </span>\n      )}\n\n      <ToastTitle>{title}</ToastTitle>\n      {description && <ToastDescription>{description}</ToastDescription>}\n      {action && (\n        <ToastAction style={action?.actionButtonStyle} onClick={handleActionClick}>\n          {action.label}\n        </ToastAction>\n      )}\n      <ToastDismiss onClick={() => sonnerToast.dismiss(id)} />\n      {duration !== Infinity && <ToastDuration duration={duration} />}\n    </div>\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { type ExternalToast, toast as sonnerToast } from 'sonner';\n\nimport { cn } from '../../utils';\n\nimport { ToastRoot } from './ToastRoot';\n\ntype ToastProps = ComponentProps<typeof ToastRoot>;\ntype Title = ToastProps['title'] | ((opts: { dismiss: () => void }) => ReactNode);\n\nexport type ToastOptions = { id?: string | number; title: Title } & Omit<\n  ToastProps,\n  'id' | 'title'\n> &\n  Pick<\n    ExternalToast,\n    'onAutoClose' | 'onDismiss' | 'testId' | 'toasterId' | 'dismissible' | 'position'\n  >;\ntype DerivedToastOptions = Omit<ToastOptions, 'title' | 'variant'>;\n\nexport const toast = ({\n  onAutoClose,\n  onDismiss,\n  testId,\n  toasterId,\n  dismissible = true,\n  position,\n  title: titleProp,\n  ...toast\n}: ToastOptions) => {\n  const duration = (() => {\n    if (typeof toast.duration === 'number') return toast.duration;\n    if (toast.variant === 'error' || toast.variant === 'warning') return Infinity;\n    return toast.duration ?? 5000;\n  })();\n\n  const renderCustomToast: Parameters<typeof sonnerToast.custom>[0] = (id) => {\n    const title =\n      typeof titleProp === 'function'\n        ? titleProp({ dismiss: () => sonnerToast.dismiss(id) })\n        : titleProp;\n\n    return <ToastRoot {...toast} id={id} title={title} duration={duration} />;\n  };\n\n  return sonnerToast.custom(renderCustomToast, {\n    // toast generated by sonner will always have an id, but we want to allow users to specify their own id if they want to\n    // can not pass undefined, as it will break dismiss\n    ...(toast.id != null ? { id: toast.id } : {}),\n    unstyled: true,\n    position,\n    onAutoClose,\n    onDismiss,\n    testId,\n    toasterId,\n    dismissible,\n    duration,\n    // override default focus-visible styles to match our design\n    className: cn('tw:rounded-lg', 'tw:focus-visible:!ring-4', 'tw:focus-visible:!ring-ring/50'),\n  });\n};\n\ntoast.success = (title: Title, options?: DerivedToastOptions) =>\n  toast({\n    ...options,\n    title,\n    variant: 'success',\n  });\n\ntoast.error = (title: Title, options?: DerivedToastOptions) =>\n  toast({\n    ...options,\n    title,\n    variant: 'error',\n    duration: options?.duration ?? Infinity,\n  });\n\ntoast.warning = (title: Title, options?: DerivedToastOptions) =>\n  toast({\n    ...options,\n    title,\n    variant: 'warning',\n    duration: options?.duration ?? Infinity,\n  });\n\ntoast.info = (title: Title, options?: DerivedToastOptions) =>\n  toast({\n    ...options,\n    title,\n    variant: 'info',\n  });\n\ntoast.dismiss = (toastId?: ToastOptions['id']) => sonnerToast.dismiss(toastId);\ntoast.dismissAll = () => sonnerToast.dismiss();\n"],"mappings":"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"}

package/dist/useColorSchemeState-CYqcUfSH.js

@@ -0,0 +1,61 @@
+import { DEFAULT_BRAND_ID, DEFAULT_COLOR_SCHEME } from "./context-KxxeMHbR.js";
+import { useCallback, useEffect, useState } from "react";
+//#region src/components/ThemeProvider/useBrandState.ts
+const BRAND_ATTRIBUTE = "data-brand";
+const useBrandState = ({ defaultBrandId: defaultBrand = DEFAULT_BRAND_ID, brandId: controlledBrand, onBrandIdChange: onBrandChange } = {}) => {
+	const [uncontrolledBrand, setUncontrolledBrand] = useState(defaultBrand);
+	const isControlled = controlledBrand !== void 0;
+	const brandId = isControlled ? controlledBrand : uncontrolledBrand;
+	const setBrand = useCallback((next) => {
+		if (!isControlled) setUncontrolledBrand(next);
+		onBrandChange?.(next);
+	}, [isControlled, onBrandChange]);
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		document.documentElement.setAttribute(BRAND_ATTRIBUTE, brandId);
+	}, [brandId]);
+	return {
+		brandId,
+		setBrand
+	};
+};
+//#endregion
+//#region src/components/ThemeProvider/useColorSchemeState.ts
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+const THEME_ATTRIBUTE = "data-theme";
+const getSystemColorScheme = () => {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+	return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+};
+const useColorSchemeState = ({ defaultScheme = DEFAULT_COLOR_SCHEME, scheme: propScheme, onSchemeChange } = {}) => {
+	const [uncontrolledScheme, setUncontrolledScheme] = useState(defaultScheme);
+	const [systemScheme, setSystemScheme] = useState(getSystemColorScheme);
+	const isControlled = propScheme !== void 0;
+	const scheme = isControlled ? propScheme : uncontrolledScheme;
+	const setScheme = useCallback((next) => {
+		if (!isControlled) setUncontrolledScheme(next);
+		onSchemeChange?.(next);
+	}, [isControlled, onSchemeChange]);
+	useEffect(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const mq = window.matchMedia(DARK_QUERY);
+		const onChange = () => setSystemScheme(mq.matches ? "dark" : "light");
+		onChange();
+		mq.addEventListener("change", onChange);
+		return () => mq.removeEventListener("change", onChange);
+	}, []);
+	const resolvedScheme = scheme === "system" ? systemScheme : scheme;
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		document.documentElement.setAttribute(THEME_ATTRIBUTE, resolvedScheme);
+	}, [resolvedScheme]);
+	return {
+		scheme,
+		resolvedScheme,
+		setScheme
+	};
+};
+//#endregion
+export { BRAND_ATTRIBUTE, THEME_ATTRIBUTE, useBrandState, useColorSchemeState };
+
+//# sourceMappingURL=useColorSchemeState-CYqcUfSH.js.map

package/dist/useColorSchemeState-CYqcUfSH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorSchemeState-CYqcUfSH.js","names":[],"sources":["../src/components/ThemeProvider/useBrandState.ts","../src/components/ThemeProvider/useColorSchemeState.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport { DEFAULT_BRAND_ID } from './defaults';\nimport type { BrandId } from './types';\n\nexport const BRAND_ATTRIBUTE = 'data-brand';\n\nexport type UseBrandOptions = {\n  /** Initial active brand id for uncontrolled use. Defaults to the design-system sentinel (`DEFAULT_BRAND_ID`) — no brand tokens injected, so the stylesheet defaults apply. */\n  defaultBrandId?: BrandId;\n  /** Controlled active brand id. When set, the parent owns the value and `setBrand` only notifies via `onBrandIdChange` (it does not mutate internal state). */\n  brandId?: BrandId;\n  /** Called with the next id whenever `setBrand` runs — required to persist the choice in controlled mode. */\n  onBrandIdChange?: (brandId: BrandId) => void;\n};\n\nexport const useBrandState = ({\n  defaultBrandId: defaultBrand = DEFAULT_BRAND_ID,\n  brandId: controlledBrand,\n  onBrandIdChange: onBrandChange,\n}: UseBrandOptions = {}) => {\n  const [uncontrolledBrand, setUncontrolledBrand] = useState(defaultBrand);\n\n  const isControlled = controlledBrand !== undefined;\n  const brandId = isControlled ? controlledBrand : uncontrolledBrand;\n\n  const setBrand = useCallback(\n    (next: BrandId) => {\n      if (!isControlled) setUncontrolledBrand(next);\n      onBrandChange?.(next);\n    },\n    [isControlled, onBrandChange],\n  );\n\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n    document.documentElement.setAttribute(BRAND_ATTRIBUTE, brandId);\n  }, [brandId]);\n\n  return { brandId, setBrand };\n};\n","import { useCallback, useEffect, useState } from 'react';\n\nimport { DEFAULT_COLOR_SCHEME } from './defaults';\nimport type { ColorScheme, ResolvedColorScheme } from './types';\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\nexport const THEME_ATTRIBUTE = 'data-theme';\n\nconst getSystemColorScheme = (): ResolvedColorScheme => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return 'light';\n  return window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light';\n};\n\nexport type UseColorSchemeOptions = {\n  /** Initial colour scheme for uncontrolled use. Defaults to `light` (`DEFAULT_COLOR_SCHEME`). */\n  defaultScheme?: ColorScheme;\n  /** Controlled colour scheme (`light` / `dark` / `system`). When set, the parent owns the value and `setScheme` only notifies via `onSchemeChange`. `system` follows `prefers-color-scheme` and resolves reactively. */\n  scheme?: ColorScheme;\n  /** Called with the next scheme whenever `setScheme` runs — required to persist the choice in controlled mode. */\n  onSchemeChange?: (theme: ColorScheme) => void;\n};\n\nexport const useColorSchemeState = ({\n  defaultScheme = DEFAULT_COLOR_SCHEME,\n  scheme: propScheme,\n  onSchemeChange,\n}: UseColorSchemeOptions = {}) => {\n  const [uncontrolledScheme, setUncontrolledScheme] = useState(defaultScheme);\n  const [systemScheme, setSystemScheme] = useState<ResolvedColorScheme>(getSystemColorScheme);\n\n  const isControlled = propScheme !== undefined;\n  const scheme = isControlled ? propScheme : uncontrolledScheme;\n\n  const setScheme = useCallback(\n    (next: ColorScheme) => {\n      if (!isControlled) setUncontrolledScheme(next);\n      onSchemeChange?.(next);\n    },\n    [isControlled, onSchemeChange],\n  );\n\n  // Track the OS preference so `system` stays live as the user flips it.\n  useEffect(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;\n    const mq = window.matchMedia(DARK_QUERY);\n    const onChange = () => setSystemScheme(mq.matches ? 'dark' : 'light');\n    onChange();\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, []);\n\n  const resolvedScheme: ResolvedColorScheme = scheme === 'system' ? systemScheme : scheme;\n\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n    document.documentElement.setAttribute(THEME_ATTRIBUTE, resolvedScheme);\n  }, [resolvedScheme]);\n\n  return { scheme, resolvedScheme, setScheme };\n};\n"],"mappings":";;;AAKA,MAAa,kBAAkB;AAW/B,MAAa,iBAAiB,EAC5B,gBAAgB,eAAe,kBAC/B,SAAS,iBACT,iBAAiB,kBACE,CAAC,MAAM;CAC1B,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,YAAY;CAEvE,MAAM,eAAe,oBAAoB,KAAA;CACzC,MAAM,UAAU,eAAe,kBAAkB;CAEjD,MAAM,WAAW,aACd,SAAkB;EACjB,IAAI,CAAC,cAAc,qBAAqB,IAAI;EAC5C,gBAAgB,IAAI;CACtB,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,gBAAgB;EACd,IAAI,OAAO,aAAa,aAAa;EACrC,SAAS,gBAAgB,aAAa,iBAAiB,OAAO;CAChE,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;EAAE;EAAS;CAAS;AAC7B;;;ACnCA,MAAM,aAAa;AACnB,MAAa,kBAAkB;AAE/B,MAAM,6BAAkD;CACtD,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY,OAAO;CACrF,OAAO,OAAO,WAAW,UAAU,CAAC,CAAC,UAAU,SAAS;AAC1D;AAWA,MAAa,uBAAuB,EAClC,gBAAgB,sBAChB,QAAQ,YACR,mBACyB,CAAC,MAAM;CAChC,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,aAAa;CAC1E,MAAM,CAAC,cAAc,mBAAmB,SAA8B,oBAAoB;CAE1F,MAAM,eAAe,eAAe,KAAA;CACpC,MAAM,SAAS,eAAe,aAAa;CAE3C,MAAM,YAAY,aACf,SAAsB;EACrB,IAAI,CAAC,cAAc,sBAAsB,IAAI;EAC7C,iBAAiB,IAAI;CACvB,GACA,CAAC,cAAc,cAAc,CAC/B;CAGA,gBAAgB;EACd,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY;EAC9E,MAAM,KAAK,OAAO,WAAW,UAAU;EACvC,MAAM,iBAAiB,gBAAgB,GAAG,UAAU,SAAS,OAAO;EACpE,SAAS;EACT,GAAG,iBAAiB,UAAU,QAAQ;EACtC,aAAa,GAAG,oBAAoB,UAAU,QAAQ;CACxD,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAsC,WAAW,WAAW,eAAe;CAEjF,gBAAgB;EACd,IAAI,OAAO,aAAa,aAAa;EACrC,SAAS,gBAAgB,aAAa,iBAAiB,cAAc;CACvE,GAAG,CAAC,cAAc,CAAC;CAEnB,OAAO;EAAE;EAAQ;EAAgB;CAAU;AAC7C"}

package/dist/useControllableState-M6494mCT.js

@@ -0,0 +1,31 @@
+import { useCallback, useRef, useState } from "react";
+//#region src/hooks/useControllableState.ts
+/**
+* Controlled/uncontrolled state, à la Radix's `useControllableState`.
+*
+* Returns a `[value, setValue]` tuple where `setValue` accepts a value or an updater
+* function (`SetStateAction<T>`). In controlled mode (`prop !== undefined`) the hook never
+* owns state — `setValue` resolves the next value and calls `onChange`; the parent is
+* responsible for feeding the new `prop` back. In uncontrolled mode the hook owns the value
+* in internal state and still calls `onChange`. `onChange` fires on every `setValue` call
+* (it is not deduped against the previous value).
+*/
+const useControllableState = ({ prop, defaultProp, onChange }) => {
+	const [uncontrolled, setUncontrolled] = useState(defaultProp);
+	const isControlled = prop !== void 0;
+	const value = prop !== void 0 ? prop : uncontrolled;
+	const valueRef = useRef(value);
+	valueRef.current = value;
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	return [value, useCallback((next) => {
+		const nextValue = typeof next === "function" ? next(valueRef.current) : next;
+		valueRef.current = nextValue;
+		if (!isControlled) setUncontrolled(nextValue);
+		onChangeRef.current?.(nextValue);
+	}, [isControlled])];
+};
+//#endregion
+export { useControllableState };
+
+//# sourceMappingURL=useControllableState-M6494mCT.js.map

package/dist/useControllableState-M6494mCT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableState-M6494mCT.js","names":[],"sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport type { Dispatch, SetStateAction } from 'react';\n\ntype UseControllableStateParams<T> = {\n  /** The controlled value. When defined, the hook operates in controlled mode. */\n  prop: T | undefined;\n  /** The initial value used in uncontrolled mode. */\n  defaultProp: T;\n  /** Called with the next value whenever `setValue` runs (controlled and uncontrolled). */\n  onChange?: (value: T) => void;\n};\n\n/**\n * Controlled/uncontrolled state, à la Radix's `useControllableState`.\n *\n * Returns a `[value, setValue]` tuple where `setValue` accepts a value or an updater\n * function (`SetStateAction<T>`). In controlled mode (`prop !== undefined`) the hook never\n * owns state — `setValue` resolves the next value and calls `onChange`; the parent is\n * responsible for feeding the new `prop` back. In uncontrolled mode the hook owns the value\n * in internal state and still calls `onChange`. `onChange` fires on every `setValue` call\n * (it is not deduped against the previous value).\n */\nexport const useControllableState = <T>({\n  prop,\n  defaultProp,\n  onChange,\n}: UseControllableStateParams<T>): readonly [T, Dispatch<SetStateAction<T>>] => {\n  const [uncontrolled, setUncontrolled] = useState<T>(defaultProp);\n  const isControlled = prop !== undefined;\n  // Inline the `!== undefined` check (rather than reusing `isControlled`) so TypeScript\n  // narrows `prop` from `T | undefined` to `T` here.\n  const value = prop !== undefined ? prop : uncontrolled;\n\n  // Read the latest value/onChange without widening `setValue`'s dependency list,\n  // keeping its identity stable across renders.\n  const valueRef = useRef(value);\n  valueRef.current = value;\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  const setValue = useCallback<Dispatch<SetStateAction<T>>>(\n    (next) => {\n      const nextValue =\n        typeof next === 'function' ? (next as (prev: T) => T)(valueRef.current) : next;\n      // Advance the ref immediately so multiple functional-updater calls in the same tick\n      // compose (each resolves against the previous result, not the stale render value).\n      valueRef.current = nextValue;\n      if (!isControlled) setUncontrolled(nextValue);\n      onChangeRef.current?.(nextValue);\n    },\n    [isControlled],\n  );\n\n  return [value, setValue] as const;\n};\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAa,wBAA2B,EACtC,MACA,aACA,eAC8E;CAC9E,MAAM,CAAC,cAAc,mBAAmB,SAAY,WAAW;CAC/D,MAAM,eAAe,SAAS,KAAA;CAG9B,MAAM,QAAQ,SAAS,KAAA,IAAY,OAAO;CAI1C,MAAM,WAAW,OAAO,KAAK;CAC7B,SAAS,UAAU;CACnB,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CAetB,OAAO,CAAC,OAbS,aACd,SAAS;EACR,MAAM,YACJ,OAAO,SAAS,aAAc,KAAwB,SAAS,OAAO,IAAI;EAG5E,SAAS,UAAU;EACnB,IAAI,CAAC,cAAc,gBAAgB,SAAS;EAC5C,YAAY,UAAU,SAAS;CACjC,GACA,CAAC,YAAY,CAGO,CAAC;AACzB"}

package/dist/useElement-DkF6esWL.js

@@ -0,0 +1,15 @@
+import { useCallback, useState } from "react";
+//#region src/hooks/useElement.ts
+const useElement = () => {
+	const [element, _setElement] = useState(null);
+	return [element, useCallback((node) => {
+		_setElement((prev) => {
+			if (prev !== null) return prev;
+			return node;
+		});
+	}, [])];
+};
+//#endregion
+export { useElement };
+
+//# sourceMappingURL=useElement-DkF6esWL.js.map

package/dist/useElement-DkF6esWL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElement-DkF6esWL.js","names":[],"sources":["../src/hooks/useElement.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\n// This hook is used to set an element reference and ensure that it only updates once, when element is first set.\nexport const useElement = () => {\n  const [element, _setElement] = useState<HTMLElement | null>(null);\n\n  const setElement = useCallback((node: HTMLElement | null) => {\n    _setElement((prev) => {\n      // Only update if not already set\n      if (prev !== null) return prev;\n      return node;\n    });\n  }, []);\n\n  return [element, setElement] as const;\n};\n"],"mappings":";;AAGA,MAAa,mBAAmB;CAC9B,MAAM,CAAC,SAAS,eAAe,SAA6B,IAAI;CAUhE,OAAO,CAAC,SARW,aAAa,SAA6B;EAC3D,aAAa,SAAS;GAEpB,IAAI,SAAS,MAAM,OAAO;GAC1B,OAAO;EACT,CAAC;CACH,GAAG,CAAC,CAEsB,CAAC;AAC7B"}