@lerianstudio/sindarian-ui 1.2.0-beta.13 → 1.2.0-beta.14

package/dist/theme/get-theme-script.d.ts

@@ -0,0 +1,3 @@
+import type { ThemePreference } from './theme-provider';
+export declare function getThemeScript(storageKey?: string, defaultTheme?: ThemePreference): string;
+//# sourceMappingURL=get-theme-script.d.ts.map

package/dist/theme/get-theme-script.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-theme-script.d.ts","sourceRoot":"","sources":["../../src/theme/get-theme-script.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAqCvD,wBAAgB,cAAc,CAC5B,UAAU,SAAoB,EAC9B,YAAY,GAAE,eAA0B,GACvC,MAAM,CAOR"}

package/dist/theme/get-theme-script.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemeScript = getThemeScript;
+/**
+ * Pre-paint theme script (FOUC guard). Returns a minified IIFE string that
+ * reads the persisted preference from localStorage, resolves it the way
+ * ThemeProvider does, and toggles the `.dark` class on the page root element
+ * before first paint — so the page never flashes the wrong theme while React
+ * hydrates. ThemeProvider owns the class from mount onward.
+ *
+ * The resolution mirrors ThemeProvider's exactly: an exact "dark"/"light"/
+ * "system" stored value wins; anything else — absent or corrupted — falls back
+ * to `defaultTheme`, which is then resolved ("dark" → dark, "light" → light,
+ * "system" → the media query). Pass the SAME `defaultTheme` you give
+ * ThemeProvider, or the two disagree on a first visit.
+ * `get-theme-script.test.tsx` pins that agreement case by case.
+ *
+ * Server-safe: this module references no browser globals at module scope; the
+ * returned string runs in the browser only, inside a try/catch.
+ *
+ * Consumer usage — inject in the page <head>, ideally as the first script:
+ *
+ *   <script dangerouslySetInnerHTML={{ __html: getThemeScript() }} />
+ *
+ * A dark-by-default app passes both arguments:
+ *
+ *   <script dangerouslySetInnerHTML={{ __html: getThemeScript('app.theme', 'dark') }} />
+ */
+/**
+ * JSON string literal with `<` escaped, so no embedded value can close the
+ * inline <script> element it is written into. `<` is `<` to the JS parser,
+ * so the emitted script still compares against the original text.
+ */
+function jsString(value) {
+    return JSON.stringify(value).replace(/</g, '\\u003C');
+}
+function getThemeScript(storageKey = 'sindarian.theme', defaultTheme = 'system') {
+    // The storage read gets its OWN try/catch, mirroring ThemeProvider, which
+    // isolates the same read. A browser with site data blocked throws on
+    // getItem; if that escaped to the outer catch the class would never be
+    // applied at all and a dark user would flash light before hydration.
+    // Resolution starts from defaultTheme and storage only narrows it.
+    return `(function(){try{var r=${jsString(defaultTheme)};try{var t=localStorage.getItem(${jsString(storageKey)});if(t==="dark"||t==="light"||t==="system")r=t}catch(e){}var d=r==="dark"||(r==="system"&&matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.toggle("dark",d)}catch(e){}})()`;
+}

package/dist/theme/index.d.ts

@@ -0,0 +1,6 @@
+export { ThemeProvider, useTheme } from './theme-provider';
+export type { ThemePreference, ThemeProviderProps } from './theme-provider';
+export { getThemeScript } from './get-theme-script';
+export { ModeToggle } from './mode-toggle';
+export type { ModeToggleLabels, ModeToggleProps } from './mode-toggle';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC1D,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA"}

package/dist/theme/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModeToggle = exports.getThemeScript = exports.useTheme = exports.ThemeProvider = void 0;
+// Owned by lane theme-toasts-charts — see docs/plans/2026-08-26-sindarian-x-retirement/
+var theme_provider_1 = require("./theme-provider");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_provider_1.ThemeProvider; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_provider_1.useTheme; } });
+var get_theme_script_1 = require("./get-theme-script");
+Object.defineProperty(exports, "getThemeScript", { enumerable: true, get: function () { return get_theme_script_1.getThemeScript; } });
+var mode_toggle_1 = require("./mode-toggle");
+Object.defineProperty(exports, "ModeToggle", { enumerable: true, get: function () { return mode_toggle_1.ModeToggle; } });

package/dist/theme/mode-toggle.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ModeToggle — compact segmented light/system/dark control.
+ *
+ * Follows the lib's segmented canon: a `role="group"` with an aria-label, each
+ * segment a button carrying `aria-pressed`, the active segment marked with the
+ * `bg-secondary` tone. Icon-only segments and the group itself carry
+ * plain-English aria-labels by default; pass `labels` to localize them
+ * (`labels.group` names the whole control). Theme switches are instant — the
+ * 150ms transition is the local color-only hover affordance.
+ */
+import * as React from 'react';
+export interface ModeToggleLabels {
+    light?: string;
+    system?: string;
+    dark?: string;
+    /** aria-label for the whole control (the `role="group"`); default "Theme". */
+    group?: string;
+}
+export interface ModeToggleProps {
+    /** aria-label overrides for each segment and the group; default plain English. */
+    labels?: ModeToggleLabels;
+    className?: string;
+}
+export declare function ModeToggle({ labels, className }: ModeToggleProps): React.JSX.Element;
+//# sourceMappingURL=mode-toggle.d.ts.map

package/dist/theme/mode-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-toggle.d.ts","sourceRoot":"","sources":["../../src/theme/mode-toggle.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,kFAAkF;IAClF,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAkBD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,eAAe,qBAqChE"}

package/dist/theme/mode-toggle.js

@@ -0,0 +1,30 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModeToggle = ModeToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../lib/utils");
+const theme_provider_1 = require("./theme-provider");
+const SEGMENTS = [
+    { value: 'light', icon: lucide_react_1.Sun },
+    { value: 'system', icon: lucide_react_1.Monitor },
+    { value: 'dark', icon: lucide_react_1.Moon }
+];
+const DEFAULT_LABELS = {
+    light: 'Light',
+    system: 'System',
+    dark: 'Dark',
+    group: 'Theme'
+};
+function ModeToggle({ labels, className }) {
+    const { theme, setTheme } = (0, theme_provider_1.useTheme)();
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    return ((0, jsx_runtime_1.jsx)("div", { role: "group", "aria-label": resolved.group, className: (0, utils_1.cn)('border-input bg-card grid w-fit grid-cols-3 rounded-md border p-0.5 shadow-[var(--shadow-card)]', className), children: SEGMENTS.map(({ value, icon: Icon }) => {
+            const active = value === theme;
+            const label = resolved[value];
+            return ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-pressed": active, "aria-label": label, title: label, onClick: () => setTheme(value), className: (0, utils_1.cn)('focus-visible:ring-ring flex items-center justify-center rounded-sm px-2 py-1.5 transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none', active
+                    ? 'bg-secondary text-secondary-foreground'
+                    : 'text-muted-foreground hover:text-foreground'), children: (0, jsx_runtime_1.jsx)(Icon, { className: "size-4", "aria-hidden": true }) }, value));
+        }) }));
+}

package/dist/theme/theme-provider.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ThemeProvider — owns theme preference ('light' | 'dark' | 'system'),
+ * persists it to localStorage, applies the `.dark` class on
+ * `document.documentElement`, and resolves 'system' via
+ * `prefers-color-scheme`.
+ *
+ * SSR-safe: state initializes to `defaultTheme` and never reads
+ * window/localStorage during render. The persisted value is read inside an
+ * effect on mount, so first paint uses `defaultTheme`. Pair with
+ * `getThemeScript` in the document <head> to remove the flash before paint.
+ *
+ * Same-tab sync is handled by React context (every consumer reads the same
+ * provider state); cross-tab sync rides the native `storage` event. While the
+ * preference is 'system', `matchMedia('change')` keeps the resolved value live.
+ * Theme switches are instant by design — no global color transition.
+ */
+import * as React from 'react';
+export type ThemePreference = 'light' | 'dark' | 'system';
+type ThemeContextValue = {
+    /** The persisted preference (NOT the resolved light/dark value). */
+    theme: ThemePreference;
+    /** Persist a new preference; updates every consumer of this provider. */
+    setTheme: (next: ThemePreference) => void;
+    /** The effective mode after resolving 'system'. */
+    resolvedTheme: 'light' | 'dark';
+};
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** localStorage key holding the preference. */
+    storageKey?: string;
+    /** Preference used for the first (SSR / pre-hydration) paint. */
+    defaultTheme?: ThemePreference;
+}
+export declare function ThemeProvider({ children, storageKey, defaultTheme }: ThemeProviderProps): React.JSX.Element;
+/** Reads the theme context. Throws if used outside a ThemeProvider. */
+export declare function useTheme(): ThemeContextValue;
+export {};
+//# sourceMappingURL=theme-provider.d.ts.map

package/dist/theme/theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAgBzD,KAAK,iBAAiB,GAAG;IACvB,oEAAoE;IACpE,KAAK,EAAE,eAAe,CAAA;IACtB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACzC,mDAAmD;IACnD,aAAa,EAAE,OAAO,GAAG,MAAM,CAAA;CAChC,CAAA;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,eAAe,CAAA;CAC/B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAA8B,EAC9B,YAAuB,EACxB,EAAE,kBAAkB,qBAwEpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}

package/dist/theme/theme-provider.js

@@ -0,0 +1,135 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ThemeProvider — owns theme preference ('light' | 'dark' | 'system'),
+ * persists it to localStorage, applies the `.dark` class on
+ * `document.documentElement`, and resolves 'system' via
+ * `prefers-color-scheme`.
+ *
+ * SSR-safe: state initializes to `defaultTheme` and never reads
+ * window/localStorage during render. The persisted value is read inside an
+ * effect on mount, so first paint uses `defaultTheme`. Pair with
+ * `getThemeScript` in the document <head> to remove the flash before paint.
+ *
+ * Same-tab sync is handled by React context (every consumer reads the same
+ * provider state); cross-tab sync rides the native `storage` event. While the
+ * preference is 'system', `matchMedia('change')` keeps the resolved value live.
+ * Theme switches are instant by design — no global color transition.
+ */
+const React = __importStar(require("react"));
+const DARK_QUERY = '(prefers-color-scheme: dark)';
+function isThemePreference(value) {
+    return value === 'light' || value === 'dark' || value === 'system';
+}
+function systemPrefersDark() {
+    if (typeof window === 'undefined' ||
+        typeof window.matchMedia !== 'function') {
+        return false;
+    }
+    return window.matchMedia(DARK_QUERY).matches;
+}
+const ThemeContext = React.createContext(null);
+function ThemeProvider({ children, storageKey = 'sindarian.theme', defaultTheme = 'system' }) {
+    const [theme, setThemeState] = React.useState(defaultTheme);
+    const [resolvedTheme, setResolvedTheme] = React.useState(defaultTheme === 'dark' ? 'dark' : 'light');
+    const setTheme = React.useCallback((next) => {
+        setThemeState(next);
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.localStorage.setItem(storageKey, next);
+        }
+        catch {
+            // Storage unavailable (private mode, quota). In-memory state still works.
+        }
+    }, [storageKey]);
+    // Read the persisted preference once on mount (effect, never render).
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            const stored = window.localStorage.getItem(storageKey);
+            if (isThemePreference(stored))
+                setThemeState(stored);
+        }
+        catch {
+            // Ignore; keep defaultTheme.
+        }
+    }, [storageKey]);
+    // Apply the resolved class; while 'system', track prefers-color-scheme live.
+    React.useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const apply = (dark) => {
+            document.documentElement.classList.toggle('dark', dark);
+            setResolvedTheme(dark ? 'dark' : 'light');
+        };
+        apply(theme === 'system' ? systemPrefersDark() : theme === 'dark');
+        if (theme !== 'system' || typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const media = window.matchMedia(DARK_QUERY);
+        const onChange = (event) => apply(event.matches);
+        media.addEventListener('change', onChange);
+        return () => media.removeEventListener('change', onChange);
+    }, [theme]);
+    // Cross-tab sync: the native `storage` event only fires in OTHER tabs.
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const onStorage = (event) => {
+            if (event.key !== storageKey)
+                return;
+            setThemeState(isThemePreference(event.newValue) ? event.newValue : defaultTheme);
+        };
+        window.addEventListener('storage', onStorage);
+        return () => window.removeEventListener('storage', onStorage);
+    }, [storageKey, defaultTheme]);
+    const value = React.useMemo(() => ({ theme, setTheme, resolvedTheme }), [theme, setTheme, resolvedTheme]);
+    return (0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: value, children: children });
+}
+/** Reads the theme context. Throws if used outside a ThemeProvider. */
+function useTheme() {
+    const context = React.useContext(ThemeContext);
+    if (context === null) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}

package/dist/toast/helpers.d.ts

@@ -0,0 +1,16 @@
+import type { ToastActionElement } from '../components/ui/toast';
+/** Extra toast props for the severity helpers (the variant is fixed per helper). */
+export interface ToastOptions {
+    /** Optional action element rendered inside the toast. */
+    action?: ToastActionElement;
+    /**
+     * Originating error code, when the toast was raised from an API failure.
+     * Accepted for call-site compatibility; sindarian-ui's toast has no slot for
+     * it, so it is not rendered. Put it in `description` if it must be visible.
+     */
+    errorCode?: string;
+}
+export declare function successToast(title: string, description?: string, opts?: Partial<ToastOptions>): void;
+export declare function errorToast(title: string, description?: string, opts?: Partial<ToastOptions>): void;
+export declare function warningToast(title: string, description?: string, opts?: Partial<ToastOptions>): void;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/toast/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/toast/helpers.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE/D,oFAAoF;AACpF,MAAM,WAAW,YAAY;IAC3B,yDAAyD;IACzD,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAWD,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC3B,IAAI,CAEN;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC3B,IAAI,CAEN;AAED,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC3B,IAAI,CAEN"}

package/dist/toast/helpers.js

@@ -0,0 +1,34 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.successToast = successToast;
+exports.errorToast = errorToast;
+exports.warningToast = warningToast;
+/**
+ * Severity toast helpers — thin wrappers over sindarian-ui's own toast
+ * machinery (`@/hooks/use-toast`), which renders through `<Toaster />`.
+ *
+ * The bare `toast` is deliberately NOT re-exported here: sindarian-ui already
+ * exports it from the main barrel, and one name must resolve to one function.
+ * Call `toast({ title, description, variant })` directly when a helper does not
+ * fit.
+ *
+ * Variant mapping — one helper per severity, onto sindarian-ui's own variants:
+ *
+ *   successToast → 'success'      (green)
+ *   errorToast   → 'destructive'  (red)
+ *   warningToast → 'warning'      (amber)
+ */
+const use_toast_1 = require("../hooks/use-toast");
+function raise(variant, title, description, opts) {
+    (0, use_toast_1.toast)({ action: opts?.action, variant, title, description });
+}
+function successToast(title, description, opts) {
+    raise('success', title, description, opts);
+}
+function errorToast(title, description, opts) {
+    raise('destructive', title, description, opts);
+}
+function warningToast(title, description, opts) {
+    raise('warning', title, description, opts);
+}

package/dist/toast/index.d.ts

@@ -0,0 +1,3 @@
+export { successToast, errorToast, warningToast } from './helpers';
+export type { ToastOptions } from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toast/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}

package/dist/toast/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.warningToast = exports.errorToast = exports.successToast = void 0;
+// Owned by lane theme-toasts-charts — see docs/plans/2026-08-26-sindarian-x-retirement/
+// NOTE: the bare `toast` is NOT re-exported here — sindarian-ui's main barrel
+// already exports it from `@/hooks/use-toast`.
+var helpers_1 = require("./helpers");
+Object.defineProperty(exports, "successToast", { enumerable: true, get: function () { return helpers_1.successToast; } });
+Object.defineProperty(exports, "errorToast", { enumerable: true, get: function () { return helpers_1.errorToast; } });
+Object.defineProperty(exports, "warningToast", { enumerable: true, get: function () { return helpers_1.warningToast; } });

package/dist/utils/countries.cjs

@@ -0,0 +1,17 @@
+'use strict'
+
+/**
+ * The country/state dataset, loaded through CommonJS on purpose.
+ *
+ * A plain `import ... from './countries.json'` compiles fine, but Node's ESM
+ * loader rejects it without an `with { type: 'json' }` attribute — and that
+ * attribute cannot be written once for a dual build: TypeScript refuses it in
+ * any file that compiles to a `require` call (TS2856). Since a JSON `require`
+ * needs no attribute in either output, the one-line load lives here, in a
+ * `.cjs` file that is CommonJS inside `dist/` and inside `dist/esm/` alike.
+ *
+ * Without this, `import '@lerianstudio/sindarian-ui'` throws
+ * ERR_IMPORT_ATTRIBUTE_MISSING under any native-ESM consumer — Vitest, which
+ * externalises ESM dependencies, being the one the apps actually hit.
+ */
+module.exports = require('../public/countries.json')

package/dist/utils/countries.d.cts

@@ -0,0 +1,14 @@
+/** Shape of `src/public/countries.json`, loaded by `countries.cjs`. */
+type RawCountry = {
+  code2: string
+  code3: string
+  name: string
+  capital: string
+  region: string
+  subregion: string
+  states: { code: string; name: string; subdivision: string | null }[]
+}
+
+declare const countries: RawCountry[]
+
+export = countries

package/dist/utils/country-utils.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStateCountry = exports.getCountries = void 0;
-const countries_json_1 = __importDefault(require("../public/countries.json"));
+const countries_cjs_1 = __importDefault(require("./countries.cjs"));
 const getCountries = () => {
-    return countries_json_1.default.map((country) => ({
+    return countries_cjs_1.default.map((country) => ({
         code: country.code2,
         name: country.name,
         states: country.states.map((state) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.2.0-beta.13",
+  "version": "1.2.0-beta.14",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {
@@ -13,15 +13,34 @@
     "url": "https://github.com/LerianStudio/console-sdk.git",
     "directory": "packages/sindarian-ui"
   },
+  "type": "commonjs",
   "main": "dist/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/esm/index.d.ts",
+        "require": "./dist/index.d.ts"
+      },
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
   "scripts": {
-    "check-types": "tsc --noEmit",
-    "build": "tsc && npm run copy:assets && npm run copy:styles && npm run build:paths",
-    "build:paths": "tsc-alias -p tsconfig.json",
+    "check-types": "tsc --noEmit && tsc -p tsconfig.storybook.json",
+    "build": "npm run build:cjs && npm run build:esm && npm run copy:assets && npm run copy:styles",
+    "build:cjs": "tsc && tsc-alias -p tsconfig.json && copyfiles -u 1 \"src/**/*.cjs\" \"src/**/*.d.cts\" \"src/**/*.json\" dist",
+    "build:esm": "tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json --resolve-full-paths && copyfiles -u 1 \"src/**/*.cjs\" \"src/**/*.d.cts\" \"src/**/*.json\" dist/esm && node -e \"require('fs').writeFileSync('dist/esm/package.json',JSON.stringify({type:'module'}))\" && node scripts/check-esm-output.mjs",
     "copy:assets": "copyfiles -f src/public/**/* dist/public",
     "copy:styles": "copyfiles -u 1 src/**/*.css dist",
     "lint": "eslint . --fix",
@@ -32,21 +51,29 @@
     "test:cov": "jest --coverage"
   },
   "dependencies": {
-    "@radix-ui/react-avatar": "^1.2.1",
-    "@radix-ui/react-checkbox": "^1.3.6",
-    "@radix-ui/react-collapsible": "^1.1.15",
-    "@radix-ui/react-dialog": "^1.1.18",
-    "@radix-ui/react-dropdown-menu": "^2.1.19",
-    "@radix-ui/react-label": "^2.1.11",
-    "@radix-ui/react-popover": "^1.1.18",
-    "@radix-ui/react-progress": "^1.1.11",
-    "@radix-ui/react-select": "^2.3.2",
-    "@radix-ui/react-separator": "^1.1.11",
-    "@radix-ui/react-slot": "^1.3.0",
-    "@radix-ui/react-switch": "^1.3.2",
-    "@radix-ui/react-tabs": "^1.1.16",
-    "@radix-ui/react-tooltip": "^1.2.11",
+    "@radix-ui/react-accordion": "^1.2.20",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-hover-card": "^1.1.23",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toggle-group": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.2.16",
     "@tailwindcss/postcss": "^4.3.2",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -54,6 +81,7 @@
     "input-otp": "^1.4.2",
     "postcss": "^8.5.16",
     "qrcode.react": "^4.2.0",
+    "recharts": "^3.8.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.2",
@@ -62,17 +90,25 @@
   "peerDependencies": {
     "lodash": ">=4.17.0",
     "lucide-react": ">=0.536.0",
+    "next": ">=14.0.0",
     "react": ">=19.0.0",
     "react-day-picker": ">=9.13.0",
     "react-dom": ">=19.0.0",
     "react-hook-form": ">=7.60.0"
   },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/addon-links": "^10.4.6",
     "@storybook/nextjs": "^10.4.6",
     "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.5",
+    "next": "^16.2.6",
     "storybook": "^10.4.6"
   },
   "publishConfig": {

package/dist/components/ui/button/button.test.d.ts

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-//# sourceMappingURL=button.test.d.ts.map

package/dist/components/ui/button/button.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.test.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.test.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA"}

package/dist/components/ui/button/button.test.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("@testing-library/jest-dom");
-const react_1 = require("@testing-library/react");
-const _1 = require(".");
-/**
- * Regression coverage for `asChild`.
- *
- * Button always renders three children (the two icon slots evaluate to `false`
- * when no `icon` is given). Without a `Slottable` marking the real child, Radix
- * Slot >=1.3.0 cannot tell which of the three to merge onto and throws
- * "Slot failed to slot onto its children" — which broke `<Button asChild>` for
- * every consumer, icon or not.
- */
-describe('Button asChild', () => {
-    it('renders the child element instead of a button, with no icon', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { asChild: true, variant: "link", children: (0, jsx_runtime_1.jsx)("a", { href: "/somewhere", children: "Go somewhere" }) }));
-        const link = react_1.screen.getByRole('link', { name: 'Go somewhere' });
-        expect(link).toBeInTheDocument();
-        expect(link).toHaveAttribute('href', '/somewhere');
-        // asChild must NOT leave a wrapping <button> around the anchor.
-        expect(react_1.screen.queryByRole('button')).not.toBeInTheDocument();
-    });
-    it('merges the button classes onto the child element', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { asChild: true, variant: "link", size: "small", className: "custom-class", children: (0, jsx_runtime_1.jsx)("a", { href: "/x", children: "Styled" }) }));
-        const link = react_1.screen.getByRole('link', { name: 'Styled' });
-        expect(link).toHaveClass('custom-class');
-        expect(link).toHaveAttribute('data-slot', 'button');
-    });
-    it('keeps a start icon alongside the slotted child', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { asChild: true, icon: (0, jsx_runtime_1.jsx)("span", { "data-testid": "icon", children: "*" }), children: (0, jsx_runtime_1.jsx)("a", { href: "/x", children: "With icon" }) }));
-        const link = react_1.screen.getByRole('link', { name: /With icon/ });
-        expect(link).toBeInTheDocument();
-        // The icon renders inside the slotted element, not as a sibling of it.
-        expect(link).toContainElement(react_1.screen.getByTestId('icon'));
-    });
-    it('keeps an end icon alongside the slotted child', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { asChild: true, icon: (0, jsx_runtime_1.jsx)("span", { "data-testid": "icon", children: "*" }), iconPlacement: "end", children: (0, jsx_runtime_1.jsx)("a", { href: "/x", children: "Trailing" }) }));
-        expect(react_1.screen.getByRole('link', { name: /Trailing/ })).toContainElement(react_1.screen.getByTestId('icon'));
-    });
-    it('accepts a child whose own content is multiple nodes', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { asChild: true, variant: "link", children: (0, jsx_runtime_1.jsxs)("a", { href: "/x", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u21A9" }), "Back to list"] }) }));
-        expect(react_1.screen.getByRole('link', { name: 'Back to list' })).toBeInTheDocument();
-    });
-});
-describe('Button without asChild', () => {
-    it('still renders a native button (the Slottable path must be transparent)', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { variant: "primary", children: "Click me" }));
-        const button = react_1.screen.getByRole('button', { name: 'Click me' });
-        expect(button.tagName).toBe('BUTTON');
-        expect(button).toHaveAttribute('data-slot', 'button');
-    });
-    it('still renders its icon', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { icon: (0, jsx_runtime_1.jsx)("span", { "data-testid": "icon", children: "*" }), children: "Has an icon" }));
-        expect(react_1.screen.getByTestId('icon')).toBeInTheDocument();
-        expect(react_1.screen.getByRole('button', { name: /Has an icon/ })).toBeInTheDocument();
-    });
-    it('suppresses onClick when readOnly', () => {
-        const onClick = jest.fn();
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { readOnly: true, onClick: onClick, children: "Read only" }));
-        react_1.screen.getByRole('button', { name: 'Read only' }).click();
-        expect(onClick).not.toHaveBeenCalled();
-    });
-});