@lerianstudio/sindarian-ui 1.3.0-beta.6 → 1.3.0-beta.7

package/README.md

@@ -41,18 +41,34 @@ npm install react@>=19.0.0 react-dom@>=19.0.0 react-hook-form@>=7.60.0 lucide-re
 
 ### Tailwind CSS Setup
 
-Add the package path to your `tailwind.config.js` to ensure proper styling:
-
-```js
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/sindarian-ui/**/*.{js,ts,jsx,tsx}' // Add this line
-  ]
-  // ... rest of your config
-}
+The library is built with Tailwind CSS v4, which is configured from CSS — there
+is no `tailwind.config.js`. Your app needs `tailwindcss@^4` plus
+`@tailwindcss/postcss` (Next.js) or `@tailwindcss/vite` (Vite).
+
+Wire the library into your app's entry stylesheet in this order:
+
+```css
+/* Keep the Tailwind import in your app's entry stylesheet — source scanning
+   breaks when the only import lives inside node_modules. */
+@import 'tailwindcss';
+
+/* The dark variant, matched against a `.dark` class on an ancestor. */
+@custom-variant dark (&:is(.dark *));
+
+/* Design tokens, base layer and component styles. */
+@import '@lerianstudio/sindarian-ui/dist/globals.css';
+
+/* Scan the library's compiled output so its utility classes survive the
+   content purge. The path is relative to this file. */
+@source '../node_modules/@lerianstudio/sindarian-ui/dist';
 ```
 
+Adjust the `@source` depth to where your entry stylesheet sits: `../..` from
+`src/app/globals.css` in a Next.js app, `..` from `src/index.css` in a Vite app.
+
+Non-Next.js apps must also load Inter themselves — see "Migrating to 1.3+"
+below.
+
 ## 🚀 Quick Start
 
 ```tsx
@@ -63,7 +79,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle
-} from 'sindarian-ui'
+} from '@lerianstudio/sindarian-ui'
 
 function App() {
   return (
@@ -80,6 +96,71 @@ function App() {
 }
 ```
 
+## ⬆️ Migrating to 1.3+
+
+What every app upgrading from an earlier version has had to work out.
+
+### Remove `tailwindcss-animate`
+
+The library imports `tw-animate-css` in its own `globals.css`. An app that still
+registers the v3-era `@plugin 'tailwindcss-animate'` wins the cascade with its
+`.animate-in` rules and pins every library overlay to that plugin's fixed
+duration, silently. Drop the plugin directive and the dependency.
+
+### `CardTitle` accepts a heading level
+
+New: `CardTitle` takes an `as` prop to pick the heading level. It has always
+rendered an `<h3>`, so consumer wrappers that existed only to get a real
+heading element can go — and where `h3` would skip a level under a page
+`<h1>`, set the level directly:
+
+```tsx
+<CardTitle as="h2">Accounts</CardTitle>
+```
+
+The omitted case still renders `h3` with the same classes and `data-slot`.
+
+The prop types now match the rendered elements: `CardTitle` is typed against
+`h3` (heading), `CardDescription` against `p` — both were typed against `div`.
+A `ref` typed `Ref<HTMLDivElement>` passed to either no longer compiles;
+retype it to the real element (`HTMLHeadingElement` / `HTMLParagraphElement`).
+
+### `Toaster` follows the app theme
+
+An unset `<Toaster />` rendered inside the library's `ThemeProvider` now
+follows the provider's resolved theme instead of the OS preference. Outside a
+provider nothing changes (`system`). To keep OS-following inside a provider,
+pass it explicitly:
+
+```tsx
+<Toaster theme="system" />
+```
+
+### Non-Next.js apps must load Inter
+
+`--font-sans` resolves to
+`var(--font-inter, 'Inter'), 'Inter', ui-sans-serif, system-ui, sans-serif`.
+`--font-inter` is a `next/font` slot: Next.js apps fill it, Vite and other
+bundlers do not. The fallback list keeps text readable, but nothing installs
+Inter for you. Install it (`npm install @fontsource-variable/inter`), load it
+and fill the slot:
+
+```css
+@import '@fontsource-variable/inter';
+
+:root {
+  --font-inter: 'Inter Variable';
+}
+```
+
+### The preflight is emitted twice
+
+The library's `globals.css` opens with `@import 'tailwindcss'`, so an app that
+also imports Tailwind — as the setup above requires — gets the preflight layer
+twice. The rules are identical and the duplication is harmless, costing roughly
+8 KB pre-gzip. Keep the app's `@import 'tailwindcss'` first; do not drop it to
+avoid the duplicate.
+
 ## 📚 Component Categories
 
 ### UI Primitives
@@ -219,7 +300,7 @@ Please ensure your code follows the project's coding standards and includes appr
 
 ## 📝 Changelog
 
-See [CHANGELOG.md](../../CHANGELOG.md) for a detailed history of changes.
+See [CHANGELOG.md](./CHANGELOG.md) for a detailed history of changes.
 
 ## 📄 License
 

package/dist/components/ui/badge/index.d.ts

@@ -9,10 +9,11 @@ import { type VariantProps } from 'class-variance-authority';
  */
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "outline" | "destructive" | "alert" | "success" | "active" | "inactive" | "credit" | "error" | "info" | "purple" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type BadgeProps = React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
 };
-declare function Badge({ className, variant, asChild, ...props }: BadgeProps): React.JSX.Element;
+declare function Badge({ className, variant, size, asChild, ...props }: BadgeProps): React.JSX.Element;
 export { Badge, badgeVariants };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE;;;;;;GAMG;AACH,QAAA,MAAM,aAAa;;8EAiClB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACnD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAE5D,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAUnE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE;;;;;;GAMG;AACH,QAAA,MAAM,aAAa;;;8EA6ClB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACnD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAE5D,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAUzE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/badge/index.js

@@ -28,14 +28,26 @@ const badgeVariants = (0, class_variance_authority_1.cva)('inline-flex items-cen
             alert: 'border-system-alert-border bg-system-alert-surface text-system-alert-text px-[10px] py-1',
             purple: 'border-system-purple-border bg-system-purple-surface text-system-purple-text px-[10px] py-1',
             outline: 'text-foreground'
+        },
+        /**
+         * Font size only. Padding is baked per-variant above, so a `sm` that also
+         * shrank the box would fight every variant that sets its own; scoping the
+         * axis to type keeps `sm` composable with all of them. 11px is the canon
+         * for fine print — the one micro-badge size, replacing the per-consumer
+         * 0.7rem/10px/11px anarchy.
+         */
+        size: {
+            default: '',
+            sm: 'text-[11px]'
         }
     },
     defaultVariants: {
-        variant: 'default'
+        variant: 'default',
+        size: 'default'
     }
 });
 exports.badgeVariants = badgeVariants;
-function Badge({ className, variant, asChild, ...props }) {
+function Badge({ className, variant, size, asChild, ...props }) {
     const Comp = asChild ? react_slot_1.Slot : 'span';
-    return ((0, jsx_runtime_1.jsx)(Comp, { "data-slot": "badge", className: (0, utils_1.cn)(badgeVariants({ variant }), className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(Comp, { "data-slot": "badge", className: (0, utils_1.cn)(badgeVariants({ variant, size }), className), ...props }));
 }

package/dist/components/ui/card/index.d.ts

@@ -1,8 +1,16 @@
 import * as React from 'react';
 declare function Card({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+type CardTitleProps = React.ComponentProps<'h3'> & {
+    /**
+     * Heading level to render. Defaults to `h3`, which is correct for a card
+     * nested under a section heading. Set it when the card sits directly under
+     * the page `h1` (or deeper), so the document heading order stays valid.
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+declare function CardTitle({ className, as: Comp, ...props }: CardTitleProps): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/dist/components/ui/card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACZ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG;IACjD;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC7C,CAAA;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAW1E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ1E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACZ,CAAA"}

package/dist/components/ui/card/index.js

@@ -15,8 +15,8 @@ function Card({ className, ...props }) {
 function CardHeader({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "card-header", className: (0, utils_1.cn)('flex flex-col space-y-1.5', className), ...props }));
 }
-function CardTitle({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("h3", { "data-slot": "card-title", className: (0, utils_1.cn)('text-sm leading-none font-medium tracking-tight', className), ...props }));
+function CardTitle({ className, as: Comp = 'h3', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Comp, { "data-slot": "card-title", className: (0, utils_1.cn)('text-sm leading-none font-medium tracking-tight', className), ...props }));
 }
 function CardDescription({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("p", { "data-slot": "card-description", className: (0, utils_1.cn)('text-muted-foreground text-sm', className), ...props }));

package/dist/components/ui/toast/toaster.d.ts

@@ -1,4 +1,9 @@
 type ToasterProps = {
+    /**
+     * Forces the toast theme. Omit it inside a `ThemeProvider` to follow the
+     * resolved theme automatically; with no provider the fallback is `'system'`,
+     * leaving the light/dark call to sonner's own media query.
+     */
     theme?: 'light' | 'dark' | 'system';
 };
 export declare function Toaster({ theme }: ToasterProps): import("react").JSX.Element;

package/dist/components/ui/toast/toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toast/toaster.tsx"],"names":[],"mappings":"AAIA,KAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;CACpC,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAgB,EAAE,EAAE,YAAY,+BAiBzD"}
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toast/toaster.tsx"],"names":[],"mappings":"AAMA,KAAK,YAAY,GAAG;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;CACpC,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAqB9C"}

package/dist/components/ui/toast/toaster.js

@@ -4,8 +4,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toaster = Toaster;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sonner_1 = require("sonner");
-function Toaster({ theme = 'system' }) {
-    return ((0, jsx_runtime_1.jsx)(sonner_1.Toaster, { theme: theme, position: "bottom-right", visibleToasts: 3, duration: 10000, expand: false, closeButton: true, richColors: false, offset: 16, gap: 8, toastOptions: {
+const theme_provider_1 = require("../../../theme/theme-provider");
+function Toaster({ theme }) {
+    // Optional read: a Toaster mounted outside any ThemeProvider must still
+    // render, so this cannot go through `useTheme`, which throws.
+    const themeContext = (0, theme_provider_1.useOptionalTheme)();
+    return ((0, jsx_runtime_1.jsx)(sonner_1.Toaster, { theme: theme ?? themeContext?.resolvedTheme ?? 'system', position: "bottom-right", visibleToasts: 3, duration: 10000, expand: false, closeButton: true, richColors: false, offset: 16, gap: 8, toastOptions: {
             className: 'font-sans !text-sm !font-medium'
         } }));
 }

package/dist/enterprise/app-shell/index.d.ts

@@ -46,6 +46,20 @@ export type AppShellProps = {
      * inside <main> and are correctly page content, not a top-level landmark.
      */
     header?: React.ReactNode;
+    /**
+     * Accessible name for the <header> banner landmark, rendered as its
+     * `aria-label`. Omit it and the attribute is absent — the single banner is
+     * unambiguous on its own, so a name buys nothing and an unlocalized one costs
+     * clarity.
+     *
+     * Name it when the page carries MORE than one banner-role region (the shell's
+     * banner plus, say, an embedded app frame), because a screen-reader landmark
+     * list then shows two entries called "banner" with nothing to tell them
+     * apart. Also name it when an audit rule demands every landmark be named
+     * (`landmark-unique` / a house i18n-strict policy). Pass an ALREADY-TRANSLATED
+     * string — the shell does no i18n.
+     */
+    headerLabel?: string;
     children: React.ReactNode;
     className?: string;
     contentClassName?: string;

package/dist/enterprise/app-shell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/app-shell/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,QAAQ,mFAgEpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/app-shell/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,QAAQ,mFAoEpB,CAAA"}

package/dist/enterprise/app-shell/index.js

@@ -72,14 +72,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const sidebar_1 = require("../../components/ui/sidebar");
 const utils_1 = require("../../lib/utils");
-exports.AppShell = React.forwardRef(function AppShell({ sidebar, header, children, className, contentClassName, skipToContentLabel }, ref) {
+exports.AppShell = React.forwardRef(function AppShell({ sidebar, header, headerLabel, children, className, contentClassName, skipToContentLabel }, ref) {
     // The content <main> id — wires the skip link to its target and gives the
     // <main> a stable, focusable anchor. Internal: no consumer-facing id prop.
     const mainId = React.useId();
     // sindarian-ui's SidebarProvider is context-only (it renders no DOM and
     // takes no className), so the shell owns the flex row itself and `className`
     // lands on it — the same element the legacy provider's className reached.
-    return ((0, jsx_runtime_1.jsx)(sidebar_1.SidebarProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex h-svh w-full overflow-hidden', className), children: [skipToContentLabel ? ((0, jsx_runtime_1.jsx)("a", { href: `#${mainId}`, className: "focus:bg-background focus:text-foreground sr-only focus:not-sr-only focus:absolute focus:z-50 focus:m-2 focus:rounded focus:px-3 focus:py-2 focus:shadow", children: skipToContentLabel })) : null, sidebar, (0, jsx_runtime_1.jsxs)("div", { "data-slot": "sidebar-inset", className: "bg-background relative flex w-full min-w-0 flex-1 flex-col", children: [header ? ((0, jsx_runtime_1.jsx)("header", { className: "border-border bg-background sticky top-0 z-10 flex items-center gap-3 border-b px-6 py-3", children: header })) : null, (0, jsx_runtime_1.jsx)("main", { id: mainId, ref: ref, tabIndex: -1, 
+    return ((0, jsx_runtime_1.jsx)(sidebar_1.SidebarProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex h-svh w-full overflow-hidden', className), children: [skipToContentLabel ? ((0, jsx_runtime_1.jsx)("a", { href: `#${mainId}`, className: "focus:bg-background focus:text-foreground sr-only focus:not-sr-only focus:absolute focus:z-50 focus:m-2 focus:rounded focus:px-3 focus:py-2 focus:shadow", children: skipToContentLabel })) : null, sidebar, (0, jsx_runtime_1.jsxs)("div", { "data-slot": "sidebar-inset", className: "bg-background relative flex w-full min-w-0 flex-1 flex-col", children: [header ? ((0, jsx_runtime_1.jsx)("header", { "aria-label": headerLabel, className: "border-border bg-background sticky top-0 z-10 flex items-center gap-3 border-b px-6 py-3", children: header })) : null, (0, jsx_runtime_1.jsx)("main", { id: mainId, ref: ref, tabIndex: -1, 
                             // min-h-0 lets this flex child shrink below its content height —
                             // without it `flex-1` keeps min-height:auto and nothing scrolls.
                             className: "min-h-0 flex-1 overflow-y-auto outline-none", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('mx-auto w-full max-w-7xl px-6 py-8 lg:px-8', contentClassName), children: children }) })] })] }) }));

package/dist/esm/components/ui/badge/index.d.ts

@@ -9,10 +9,11 @@ import { type VariantProps } from 'class-variance-authority';
  */
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "outline" | "destructive" | "alert" | "success" | "active" | "inactive" | "credit" | "error" | "info" | "purple" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type BadgeProps = React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
 };
-declare function Badge({ className, variant, asChild, ...props }: BadgeProps): React.JSX.Element;
+declare function Badge({ className, variant, size, asChild, ...props }: BadgeProps): React.JSX.Element;
 export { Badge, badgeVariants };
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE;;;;;;GAMG;AACH,QAAA,MAAM,aAAa;;8EAiClB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACnD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAE5D,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAUnE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE;;;;;;GAMG;AACH,QAAA,MAAM,aAAa;;;8EA6ClB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACnD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAE5D,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAUzE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/esm/components/ui/badge/index.js

@@ -24,14 +24,26 @@ const badgeVariants = cva('inline-flex items-center rounded-full border border-b
             alert: 'border-system-alert-border bg-system-alert-surface text-system-alert-text px-[10px] py-1',
             purple: 'border-system-purple-border bg-system-purple-surface text-system-purple-text px-[10px] py-1',
             outline: 'text-foreground'
+        },
+        /**
+         * Font size only. Padding is baked per-variant above, so a `sm` that also
+         * shrank the box would fight every variant that sets its own; scoping the
+         * axis to type keeps `sm` composable with all of them. 11px is the canon
+         * for fine print — the one micro-badge size, replacing the per-consumer
+         * 0.7rem/10px/11px anarchy.
+         */
+        size: {
+            default: '',
+            sm: 'text-[11px]'
         }
     },
     defaultVariants: {
-        variant: 'default'
+        variant: 'default',
+        size: 'default'
     }
 });
-function Badge({ className, variant, asChild, ...props }) {
+function Badge({ className, variant, size, asChild, ...props }) {
     const Comp = asChild ? Slot : 'span';
-    return (_jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props }));
+    return (_jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant, size }), className), ...props }));
 }
 export { Badge, badgeVariants };

package/dist/esm/components/ui/card/index.d.ts

@@ -1,8 +1,16 @@
 import * as React from 'react';
 declare function Card({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+type CardTitleProps = React.ComponentProps<'h3'> & {
+    /**
+     * Heading level to render. Defaults to `h3`, which is correct for a card
+     * nested under a section heading. Set it when the card sits directly under
+     * the page `h1` (or deeper), so the document heading order stays valid.
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+declare function CardTitle({ className, as: Comp, ...props }: CardTitleProps): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/dist/esm/components/ui/card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACZ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG;IACjD;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC7C,CAAA;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAW1E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ1E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACZ,CAAA"}

package/dist/esm/components/ui/card/index.js

@@ -6,8 +6,8 @@ function Card({ className, ...props }) {
 function CardHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-header", className: cn('flex flex-col space-y-1.5', className), ...props }));
 }
-function CardTitle({ className, ...props }) {
-    return (_jsx("h3", { "data-slot": "card-title", className: cn('text-sm leading-none font-medium tracking-tight', className), ...props }));
+function CardTitle({ className, as: Comp = 'h3', ...props }) {
+    return (_jsx(Comp, { "data-slot": "card-title", className: cn('text-sm leading-none font-medium tracking-tight', className), ...props }));
 }
 function CardDescription({ className, ...props }) {
     return (_jsx("p", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props }));

package/dist/esm/components/ui/toast/toaster.d.ts

@@ -1,4 +1,9 @@
 type ToasterProps = {
+    /**
+     * Forces the toast theme. Omit it inside a `ThemeProvider` to follow the
+     * resolved theme automatically; with no provider the fallback is `'system'`,
+     * leaving the light/dark call to sonner's own media query.
+     */
     theme?: 'light' | 'dark' | 'system';
 };
 export declare function Toaster({ theme }: ToasterProps): import("react").JSX.Element;

package/dist/esm/components/ui/toast/toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/toast/toaster.tsx"],"names":[],"mappings":"AAIA,KAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;CACpC,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAgB,EAAE,EAAE,YAAY,+BAiBzD"}
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/toast/toaster.tsx"],"names":[],"mappings":"AAMA,KAAK,YAAY,GAAG;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;CACpC,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAqB9C"}

package/dist/esm/components/ui/toast/toaster.js

@@ -1,8 +1,12 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toaster as SonnerToaster } from 'sonner';
-export function Toaster({ theme = 'system' }) {
-    return (_jsx(SonnerToaster, { theme: theme, position: "bottom-right", visibleToasts: 3, duration: 10000, expand: false, closeButton: true, richColors: false, offset: 16, gap: 8, toastOptions: {
+import { useOptionalTheme } from '../../../theme/theme-provider.js';
+export function Toaster({ theme }) {
+    // Optional read: a Toaster mounted outside any ThemeProvider must still
+    // render, so this cannot go through `useTheme`, which throws.
+    const themeContext = useOptionalTheme();
+    return (_jsx(SonnerToaster, { theme: theme ?? themeContext?.resolvedTheme ?? 'system', position: "bottom-right", visibleToasts: 3, duration: 10000, expand: false, closeButton: true, richColors: false, offset: 16, gap: 8, toastOptions: {
             className: 'font-sans !text-sm !font-medium'
         } }));
 }

package/dist/esm/enterprise/app-shell/index.d.ts

@@ -46,6 +46,20 @@ export type AppShellProps = {
      * inside <main> and are correctly page content, not a top-level landmark.
      */
     header?: React.ReactNode;
+    /**
+     * Accessible name for the <header> banner landmark, rendered as its
+     * `aria-label`. Omit it and the attribute is absent — the single banner is
+     * unambiguous on its own, so a name buys nothing and an unlocalized one costs
+     * clarity.
+     *
+     * Name it when the page carries MORE than one banner-role region (the shell's
+     * banner plus, say, an embedded app frame), because a screen-reader landmark
+     * list then shows two entries called "banner" with nothing to tell them
+     * apart. Also name it when an audit rule demands every landmark be named
+     * (`landmark-unique` / a house i18n-strict policy). Pass an ALREADY-TRANSLATED
+     * string — the shell does no i18n.
+     */
+    headerLabel?: string;
     children: React.ReactNode;
     className?: string;
     contentClassName?: string;

package/dist/esm/enterprise/app-shell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/app-shell/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,QAAQ,mFAgEpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/app-shell/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,QAAQ,mFAoEpB,CAAA"}

package/dist/esm/enterprise/app-shell/index.js

@@ -36,14 +36,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { SidebarProvider } from '../../components/ui/sidebar/index.js';
 import { cn } from '../../lib/utils.js';
-export const AppShell = React.forwardRef(function AppShell({ sidebar, header, children, className, contentClassName, skipToContentLabel }, ref) {
+export const AppShell = React.forwardRef(function AppShell({ sidebar, header, headerLabel, children, className, contentClassName, skipToContentLabel }, ref) {
     // The content <main> id — wires the skip link to its target and gives the
     // <main> a stable, focusable anchor. Internal: no consumer-facing id prop.
     const mainId = React.useId();
     // sindarian-ui's SidebarProvider is context-only (it renders no DOM and
     // takes no className), so the shell owns the flex row itself and `className`
     // lands on it — the same element the legacy provider's className reached.
-    return (_jsx(SidebarProvider, { children: _jsxs("div", { className: cn('flex h-svh w-full overflow-hidden', className), children: [skipToContentLabel ? (_jsx("a", { href: `#${mainId}`, className: "focus:bg-background focus:text-foreground sr-only focus:not-sr-only focus:absolute focus:z-50 focus:m-2 focus:rounded focus:px-3 focus:py-2 focus:shadow", children: skipToContentLabel })) : null, sidebar, _jsxs("div", { "data-slot": "sidebar-inset", className: "bg-background relative flex w-full min-w-0 flex-1 flex-col", children: [header ? (_jsx("header", { className: "border-border bg-background sticky top-0 z-10 flex items-center gap-3 border-b px-6 py-3", children: header })) : null, _jsx("main", { id: mainId, ref: ref, tabIndex: -1, 
+    return (_jsx(SidebarProvider, { children: _jsxs("div", { className: cn('flex h-svh w-full overflow-hidden', className), children: [skipToContentLabel ? (_jsx("a", { href: `#${mainId}`, className: "focus:bg-background focus:text-foreground sr-only focus:not-sr-only focus:absolute focus:z-50 focus:m-2 focus:rounded focus:px-3 focus:py-2 focus:shadow", children: skipToContentLabel })) : null, sidebar, _jsxs("div", { "data-slot": "sidebar-inset", className: "bg-background relative flex w-full min-w-0 flex-1 flex-col", children: [header ? (_jsx("header", { "aria-label": headerLabel, className: "border-border bg-background sticky top-0 z-10 flex items-center gap-3 border-b px-6 py-3", children: header })) : null, _jsx("main", { id: mainId, ref: ref, tabIndex: -1, 
                             // min-h-0 lets this flex child shrink below its content height —
                             // without it `flex-1` keeps min-height:auto and nothing scrolls.
                             className: "min-h-0 flex-1 overflow-y-auto outline-none", children: _jsx("div", { className: cn('mx-auto w-full max-w-7xl px-6 py-8 lg:px-8', contentClassName), children: children }) })] })] }) }));

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

@@ -34,5 +34,13 @@ export interface ThemeProviderProps {
 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;
+/**
+ * Reads the theme context without requiring a provider — `undefined` when
+ * there is none. For library components that should follow the theme when one
+ * exists but must not force every consumer to mount a ThemeProvider (Toaster).
+ * Not re-exported from the package barrel: consumers use `useTheme`, whose
+ * throw is the intended signal that the provider is missing.
+ */
+export declare function useOptionalTheme(): ThemeContextValue | undefined;
 export {};
 //# sourceMappingURL=theme-provider.d.ts.map

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

@@ -1 +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,qBAwFpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}
+{"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,qBAwFpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,iBAAiB,GAAG,SAAS,CAEhE"}

package/dist/esm/theme/theme-provider.js

@@ -110,3 +110,13 @@ export function useTheme() {
     }
     return context;
 }
+/**
+ * Reads the theme context without requiring a provider — `undefined` when
+ * there is none. For library components that should follow the theme when one
+ * exists but must not force every consumer to mount a ThemeProvider (Toaster).
+ * Not re-exported from the package barrel: consumers use `useTheme`, whose
+ * throw is the intended signal that the provider is missing.
+ */
+export function useOptionalTheme() {
+    return React.useContext(ThemeContext) ?? undefined;
+}

package/dist/globals.css

@@ -212,6 +212,8 @@
 
 @layer base {
   :root {
+    color-scheme: light; /* native widgets (form controls, scrollbars) follow the theme */
+
     /* Application tokens (from Figma ring-tokens) */
     --body-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
     --body-text: 240 4% 46%; /* base/500 = #71717A */
@@ -320,6 +322,8 @@
   }
 
   .dark {
+    color-scheme: dark; /* native widgets (form controls, scrollbars) follow the theme */
+
     /* Custom — Layout */
     --link-hover: 240 5% 96%; /* #F4F4F5 80% (opacity via /80) */
     --link-mute: 240 5% 96%; /* #F4F4F5 40% (opacity via /40) */

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

@@ -34,5 +34,13 @@ export interface ThemeProviderProps {
 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;
+/**
+ * Reads the theme context without requiring a provider — `undefined` when
+ * there is none. For library components that should follow the theme when one
+ * exists but must not force every consumer to mount a ThemeProvider (Toaster).
+ * Not re-exported from the package barrel: consumers use `useTheme`, whose
+ * throw is the intended signal that the provider is missing.
+ */
+export declare function useOptionalTheme(): ThemeContextValue | undefined;
 export {};
 //# sourceMappingURL=theme-provider.d.ts.map

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

@@ -1 +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,qBAwFpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}
+{"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,qBAwFpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,iBAAiB,GAAG,SAAS,CAEhE"}

package/dist/theme/theme-provider.js

@@ -36,6 +36,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProvider = ThemeProvider;
 exports.useTheme = useTheme;
+exports.useOptionalTheme = useOptionalTheme;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * ThemeProvider — owns theme preference ('light' | 'dark' | 'system'),
@@ -147,3 +148,13 @@ function useTheme() {
     }
     return context;
 }
+/**
+ * Reads the theme context without requiring a provider — `undefined` when
+ * there is none. For library components that should follow the theme when one
+ * exists but must not force every consumer to mount a ThemeProvider (Toaster).
+ * Not re-exported from the package barrel: consumers use `useTheme`, whose
+ * throw is the intended signal that the provider is missing.
+ */
+function useOptionalTheme() {
+    return React.useContext(ThemeContext) ?? undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.3.0-beta.6",
+  "version": "1.3.0-beta.7",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {