@noxlovette/material 0.3.3 → 0.4.0

package/dist/components/containers/action-rail/ActionRail.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ActionRailProps } from './types.js';
+/**
+ * Material 3 Action Rail.
+ *
+ * A rightmost, sticky container for hosting a vertical `Toolbar` (or other grouped
+ * actions) alongside page content. This is the M3 spec's newer "rail as a toolbar
+ * host" role — distinct from `Rail` (the navigation-rail component under `nav/`).
+ * Because it holds actions rather than destinations, it renders a plain container
+ * and is intentionally NOT wrapped in bits-ui's `NavigationMenu` — `Toolbar.svelte`
+ * (bits-ui `Toolbar.Root`) already supplies the correct `role="toolbar"` semantics
+ * for whatever is placed inside.
+ *
+ * @see https://m3.material.io/components/toolbars
+ */
+declare const ActionRail: import("svelte").Component<ActionRailProps, {}, "">;
+type ActionRail = ReturnType<typeof ActionRail>;
+export default ActionRail;

package/dist/components/containers/action-rail/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as ActionRail } from './ActionRail.svelte';

package/dist/components/containers/action-rail/index.js

@@ -0,0 +1,6 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
+export * from './theme.js';
+export * from './types.js';
+// default exports for components in this folder
+export { default as ActionRail } from './ActionRail.svelte';

package/dist/components/containers/action-rail/theme.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from 'tailwind-variants';
+export type ActionRailVariants = VariantProps<typeof actionRail>;
+export declare const actionRail: import("tailwind-variants").TVReturnType<{
+    anchor: {
+        viewport: {
+            base: string;
+        };
+        parent: {
+            base: string;
+        };
+        sticky: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    anchor: {
+        viewport: {
+            base: string;
+        };
+        parent: {
+            base: string;
+        };
+        sticky: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    anchor: {
+        viewport: {
+            base: string;
+        };
+        parent: {
+            base: string;
+        };
+        sticky: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>>;

package/dist/components/containers/action-rail/theme.js

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+export const actionRail = tv({
+    slots: {
+        base: 'z-30 flex flex-col items-center justify-center right-0'
+    },
+    variants: {
+        anchor: {
+            // Fixes to the true viewport edge — for an outermost, full-page rail.
+            viewport: {
+                base: 'fixed top-[var(--action-rail-top,0px)] bottom-[var(--action-rail-bottom,0px)]'
+            },
+            // Absolutely positioned within a relative ancestor — for embedded/contained demos.
+            parent: {
+                base: 'absolute top-[var(--action-rail-top,0px)] bottom-[var(--action-rail-bottom,0px)]'
+            },
+            // In-flow and sticks to the top as the page scrolls — for a rail nested inside
+            // other already-offset content (the default: this is the M3 "sticky toolbar host" role).
+            sticky: {
+                base: 'sticky top-[var(--action-rail-top,0px)] self-start max-h-dvh'
+            }
+        }
+    },
+    defaultVariants: {
+        anchor: 'sticky'
+    }
+});

package/dist/components/containers/action-rail/types.d.ts

@@ -0,0 +1,20 @@
+import type { DivAttrs } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { ActionRailVariants } from './theme.js';
+/**
+ * Props for the ActionRail component.
+ */
+export type ActionRailProps = ActionRailVariants & DivAttrs & {
+    /** Rail content — typically a vertical `Toolbar`. */
+    children: Snippet;
+    /**
+     * Top offset in px, e.g. the height of a top app bar.
+     * @default 0
+     */
+    top?: number;
+    /**
+     * Bottom offset in px (`viewport`/`parent` anchor only).
+     * @default 0
+     */
+    bottom?: number;
+};

package/dist/components/containers/action-rail/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/containers/app/App.svelte

@@ -1,8 +1,10 @@
 <!--
 @component
 The core App wrapper that gives default backgrounds and sets up tooltips and icons.
-By default it also manages the Material 3 Dynamic Theme and dark mode; pass
-`dynamicTheme={false}` to opt out and rely on static theme CSS instead.
+By default it also manages the Material 3 Dynamic Theme; pass `dynamicTheme={false}`
+to opt out and rely on static theme CSS instead. Either way, App always keeps the
+`dark` class on `<html>` in sync with the user's/system's color scheme, so static
+theme CSS still responds to dark mode.
 -->
 <script lang="ts">
   import { MaterialSymbolsProvider, Theme } from '../../../utils/index.js';
@@ -22,10 +24,8 @@ By default it also manages the Material 3 Dynamic Theme and dark mode; pass
   const baseCls = $derived(app({ class: className }));
 </script>
 
-{#if dynamicTheme}
-  <ThemeScript />
-  <Theme />
-{/if}
+<ThemeScript />
+<Theme generateCSS={dynamicTheme} />
 <MaterialSymbolsProvider {...iconProviderProps} />
 <Tooltip.Provider>
   <div class={baseCls} {...restProps}>

package/dist/components/containers/app/App.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { AppProps } from './types';
 /**
  * The core App wrapper that gives default backgrounds and sets up tooltips and icons.
- * By default it also manages the Material 3 Dynamic Theme and dark mode; pass
- * `dynamicTheme={false}` to opt out and rely on static theme CSS instead.
+ * By default it also manages the Material 3 Dynamic Theme; pass `dynamicTheme={false}`
+ * to opt out and rely on static theme CSS instead. Either way, App always keeps the
+ * `dark` class on `<html>` in sync with the user's/system's color scheme, so static
+ * theme CSS still responds to dark mode.
  */
 declare const App: import("svelte").Component<AppProps, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/containers/app/theme.d.ts

@@ -1,3 +1,3 @@
 import { type VariantProps } from 'tailwind-variants';
 export type AppVariants = VariantProps<typeof app>;
-export declare const app: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] antialiased", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] antialiased", unknown, unknown, undefined>>;
+export declare const app: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] antialiased", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

package/dist/components/containers/app/types.d.ts

@@ -9,10 +9,15 @@ export type AppProps = DivAttrs & {
     /** Props to pass to the material symbols provider */
     iconProviderProps?: Partial<MaterialSymbolsProviderProps>;
     /**
-     * Whether App manages the M3 dynamic theme (source-color extraction, dark-mode
-     * sync, and the injected `<ThemeScript>`/`<Theme>` head elements).
-     * Set to `false` if you supply your own static `@noxlovette/material/theme/*` CSS
-     * and want to opt out of the runtime dynamic-theming machinery entirely.
+     * Whether App generates and injects M3 dynamic-color CSS (source-color
+     * extraction into per-scheme custom properties). Set to `false` if you
+     * supply your own static `@noxlovette/material/theme/*` CSS instead.
+     *
+     * Either way, App always mounts `<ThemeScript>`/`<Theme>` to keep the
+     * `dark` class on `<html>` in sync with `themeState.scheme` (including
+     * system `prefers-color-scheme` changes) — turning this off does not
+     * disable dark-mode tracking, since static theme CSS depends on the same
+     * `dark` class to apply.
      * @default true
      */
     dynamicTheme?: boolean;

package/dist/components/containers/bottom-sheet/BottomSheet.stories.svelte

@@ -9,7 +9,7 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import BottomSheet from './BottomSheet.svelte';
   import Button from '../../buttons/Button.svelte';
-  import MenuItem from '../menu-item/MenuItem.svelte';
+  import MenuItem from '../menu/menu-item/MenuItem.svelte';
 
   const { Story } = defineMeta({
     title: 'Containers/Bottom Sheet',

package/dist/components/containers/bottom-sheet/BottomSheet.svelte

@@ -61,7 +61,7 @@ while keeping the main screen content visible.
 />
 
 <dialog
-  class="bg-md-sys-color-surface-container-low text-md-sys-color-on-surface m-0 mt-auto w-full max-w-2xl overflow-hidden rounded-t-[28px] border-none p-0"
+  class="bg-md-sys-color-surface-container-low mx-auto mt-auto w-full max-w-2xl overflow-hidden rounded-t-md"
   style:max-height="{height}px"
   use:open
   use:outroClass

package/dist/components/containers/context-menu/ContextMenu.stories.svelte

@@ -1,11 +1,23 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import ContextMenu from './ContextMenu.svelte';
+  import Table from '../../table/Table.svelte';
+  import TableHead from '../../table/TableHead.svelte';
+  import TableBody from '../../table/TableBody.svelte';
+  import TableRow from '../../table/TableRow.svelte';
+  import TableHeader from '../../table/TableHeader.svelte';
+  import TableCell from '../../table/TableCell.svelte';
 
   const { Story } = defineMeta({
     title: 'Containers/Context Menu',
     component: ContextMenu
   });
+
+  const rows = [
+    { name: 'Frozen yogurt', calories: 159 },
+    { name: 'Ice cream sandwich', calories: 237 },
+    { name: 'Eclair', calories: 262 }
+  ];
 </script>
 
 <Story name="Playground" asChild>
@@ -69,3 +81,35 @@
     </div>
   </ContextMenu>
 </Story>
+
+<Story name="In Table Row">
+  {#snippet template()}
+    <Table rounded>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Dessert</TableHeader>
+          <TableHeader numeric>Calories</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {#each rows as row (row.name)}
+          <ContextMenu
+            items={[
+              { label: 'Edit', value: 'edit', iconProps: { name: 'edit' } },
+              { separator: true },
+              { label: 'Delete', value: 'delete', iconProps: { name: 'delete' } }
+            ]}
+            onselect={(value) => console.log('selected', value, 'for', row.name)}
+          >
+            {#snippet trigger(props)}
+              <TableRow {...props} hoverable>
+                <TableCell>{row.name}</TableCell>
+                <TableCell numeric>{row.calories}</TableCell>
+              </TableRow>
+            {/snippet}
+          </ContextMenu>
+        {/each}
+      </TableBody>
+    </Table>
+  {/snippet}
+</Story>

package/dist/components/containers/context-menu/ContextMenu.svelte

@@ -16,6 +16,17 @@ Context menus appear on right-click and provide actions related to the clicked e
 </ContextMenu>
 ```
 
+Pass `trigger` instead of `children` when the wrapping `<div>` isn't valid where
+you need it (e.g. a table row):
+
+```svelte
+<ContextMenu items={rowItems} onselect={handleSelect}>
+  {#snippet trigger(props)}
+    <TableRow {...props} hoverable>...</TableRow>
+  {/snippet}
+</ContextMenu>
+```
+
 @see https://m3.material.io/components/menus/guidelines
 -->
 <script lang="ts">
@@ -31,6 +42,7 @@ Context menus appear on right-click and provide actions related to the clicked e
     items = [],
     selected,
     children,
+    trigger,
     onselect,
     itemDataCyPrefix = 'context-menu-item',
     disabled = false
@@ -89,7 +101,7 @@ Context menus appear on right-click and provide actions related to the clicked e
   {:else}
     {@const isSelected = item.selected || (selected !== undefined && item.value === selected)}
     <BitsContextMenu.Item
-      class={theme.item({ selected: isSelected })}
+      class={theme.item({ selected: isSelected, color: item.color })}
       disabled={item.disabled}
       onSelect={() => {
         if (item.value !== undefined) {
@@ -100,7 +112,7 @@ Context menus appear on right-click and provide actions related to the clicked e
       data-cy={`${itemDataCyPrefix}-${toDataCy(item.value)}`}
     >
       {#if item.iconProps}
-        <Icon class={theme.icon()} {...item.iconProps} />
+        <Icon class={theme.icon({ color: item.color })} {...item.iconProps} />
       {/if}
       <div class={theme.itemContent()}>
         <span class={theme.label()}>{item.label}</span>
@@ -119,9 +131,13 @@ Context menus appear on right-click and provide actions related to the clicked e
 <BitsContextMenu.Root>
   <BitsContextMenu.Trigger {disabled}>
     {#snippet child({ props })}
-      <div {...props}>
-        {@render children()}
-      </div>
+      {#if trigger}
+        {@render trigger(props)}
+      {:else}
+        <div {...props}>
+          {@render children?.()}
+        </div>
+      {/if}
     {/snippet}
   </BitsContextMenu.Trigger>
 

package/dist/components/containers/context-menu/ContextMenu.svelte.d.ts

@@ -16,6 +16,17 @@ import type { ContextMenuProps } from './types.js';
  * </ContextMenu>
  * ```
  *
+ * Pass `trigger` instead of `children` when the wrapping `<div>` isn't valid where
+ * you need it (e.g. a table row):
+ *
+ * ```svelte
+ * <ContextMenu items={rowItems} onselect={handleSelect}>
+ * {#snippet trigger(props)}
+ *   <TableRow {...props} hoverable>...</TableRow>
+ * {/snippet}
+ * </ContextMenu>
+ * ```
+ *
  * @see https://m3.material.io/components/menus/guidelines
  */
 declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "">;

package/dist/components/containers/context-menu/theme.d.ts

@@ -6,6 +6,12 @@ export declare const contextMenu: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    color: {
+        error: {
+            item: string;
+            icon: string;
+        };
+    };
 }, {
     content: string;
     item: string;
@@ -22,6 +28,12 @@ export declare const contextMenu: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    color: {
+        error: {
+            item: string;
+            icon: string;
+        };
+    };
 }, {
     content: string;
     item: string;
@@ -32,12 +44,18 @@ export declare const contextMenu: import("tailwind-variants").TVReturnType<{
     icon: string;
     separator: string;
     rightSlot: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     selected: {
         true: {
             item: string;
         };
     };
+    color: {
+        error: {
+            item: string;
+            icon: string;
+        };
+    };
 }, {
     content: string;
     item: string;
@@ -48,4 +66,4 @@ export declare const contextMenu: import("tailwind-variants").TVReturnType<{
     icon: string;
     separator: string;
     rightSlot: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/containers/context-menu/theme.js

@@ -1,20 +1,43 @@
 import { tv } from 'tailwind-variants';
 export const contextMenu = tv({
     slots: {
-        content: 'z-[100] min-w-48 overflow-hidden rounded-xl bg-md-sys-color-surface-container-high py-2 ring-1 ring-md-sys-color-outline/10 shadow-elevation-3',
-        item: 'relative flex w-full cursor-pointer select-none items-center gap-3 px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface outline-none data-[highlighted]:bg-md-sys-color-on-surface/8 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38',
-        subTrigger: 'relative flex w-full cursor-pointer select-none items-center gap-3 px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface outline-none data-[state=open]:bg-md-sys-color-on-surface/8 data-[highlighted]:bg-md-sys-color-on-surface/8 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38',
-        itemContent: 'flex flex-1 flex-col gap-0.5',
+        content: `
+      z-[100] min-w-48 max-w-sm gap-1 overflow-y-auto rounded-lg
+      bg-md-sys-color-surface-container-high px-2 py-1
+      shadow-elevation-3 ring-md-sys-color-outline/10
+    `,
+        item: `
+      rounded-sm relative flex w-full cursor-pointer select-none items-center gap-2
+      px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
+      outline-none transition-colors duration-150
+      hover:bg-md-sys-color-on-surface/8 data-[highlighted]:bg-md-sys-color-on-surface/8
+      data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
+    `,
+        subTrigger: `
+      rounded-sm relative flex w-full cursor-pointer select-none items-center gap-2
+      px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
+      outline-none transition-colors duration-150
+      hover:bg-md-sys-color-on-surface/8 data-[state=open]:bg-md-sys-color-on-surface/8
+      data-[highlighted]:bg-md-sys-color-on-surface/8
+      data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
+    `,
+        itemContent: 'flex flex-1 flex-col gap-0.5 min-w-0',
         label: 'md-sys-typescale-body-large text-md-sys-color-on-surface',
         helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        icon: 'size-6 text-[24px] text-md-sys-color-on-surface-variant',
-        separator: 'my-2 h-px bg-md-sys-color-outline-variant/30',
-        rightSlot: 'ml-auto text-md-sys-color-on-surface-variant'
+        icon: 'size-5 text-[20px] text-md-sys-color-on-surface-variant shrink-0',
+        separator: 'my-1 h-px bg-md-sys-color-outline-variant',
+        rightSlot: 'ml-auto size-5 text-[20px] shrink-0 text-md-sys-color-on-surface-variant'
     },
     variants: {
         selected: {
             true: {
-                item: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container'
+                item: 'rounded-lg bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container'
+            }
+        },
+        color: {
+            error: {
+                item: 'text-md-sys-color-error hover:bg-md-sys-color-error/8 data-[highlighted]:bg-md-sys-color-error/8',
+                icon: 'text-md-sys-color-error'
             }
         }
     }

package/dist/components/containers/context-menu/types.d.ts

@@ -18,6 +18,8 @@ export type ContextMenuDataItem = {
     separator?: boolean;
     /** Whether the item is selected. */
     selected?: boolean;
+    /** Tint the item (and its icon) with the error color, for destructive actions. */
+    color?: 'error';
     /** Callback function when the item is selected. */
     onselect?: (value: string) => void;
     /** Optional sub-items for nested menus. */
@@ -31,8 +33,18 @@ export type ContextMenuProps = {
     items: ContextMenuDataItem[];
     /** The value of the currently selected item. */
     selected?: string;
-    /** The element(s) that will trigger the context menu on right-click. */
-    children: Snippet;
+    /**
+     * The element(s) that will trigger the context menu on right-click,
+     * rendered inside a plain wrapping `<div>`. Ignored when `trigger` is given.
+     */
+    children?: Snippet;
+    /**
+     * Escape hatch for when the wrapping `<div>` from `children` isn't valid in
+     * context (e.g. a table row, which can't have a `<div>` as its parent's
+     * direct child). Receives the trigger props to spread onto your own
+     * element instead.
+     */
+    trigger?: Snippet<[Record<string, unknown>]>;
     /** Callback function when an item is selected. */
     onselect?: (value: string) => void;
     /**

package/dist/components/containers/dialogue/theme.d.ts

@@ -2,22 +2,22 @@ import { type VariantProps } from 'tailwind-variants';
 export type DialogueVariants = VariantProps<typeof dialogue>;
 export declare const dialogue: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            inner?: import("tailwind-merge").ClassNameValue;
-            headlineContainer?: import("tailwind-merge").ClassNameValue;
-            supportingTextContainer?: import("tailwind-merge").ClassNameValue;
-            buttonContainer?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            inner?: import("tailwind-variants").ClassValue;
+            headlineContainer?: import("tailwind-variants").ClassValue;
+            supportingTextContainer?: import("tailwind-variants").ClassValue;
+            buttonContainer?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            inner?: import("tailwind-merge").ClassNameValue;
-            headlineContainer?: import("tailwind-merge").ClassNameValue;
-            supportingTextContainer?: import("tailwind-merge").ClassNameValue;
-            buttonContainer?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            inner?: import("tailwind-variants").ClassValue;
+            headlineContainer?: import("tailwind-variants").ClassValue;
+            supportingTextContainer?: import("tailwind-variants").ClassValue;
+            buttonContainer?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -28,12 +28,12 @@ export declare const dialogue: import("tailwind-variants").TVReturnType<{
     buttonContainer: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            inner?: import("tailwind-merge").ClassNameValue;
-            headlineContainer?: import("tailwind-merge").ClassNameValue;
-            supportingTextContainer?: import("tailwind-merge").ClassNameValue;
-            buttonContainer?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            inner?: import("tailwind-variants").ClassValue;
+            headlineContainer?: import("tailwind-variants").ClassValue;
+            supportingTextContainer?: import("tailwind-variants").ClassValue;
+            buttonContainer?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -42,10 +42,10 @@ export declare const dialogue: import("tailwind-variants").TVReturnType<{
     headlineContainer: string;
     supportingTextContainer: string;
     buttonContainer: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
     inner: string;
     headlineContainer: string;
     supportingTextContainer: string;
     buttonContainer: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/containers/divider/theme.d.ts

@@ -2,32 +2,32 @@ import { type VariantProps } from 'tailwind-variants';
 export type HrVariants = VariantProps<typeof hr>;
 export declare const hr: import("tailwind-variants").TVReturnType<{
     orientation: {
-        horizontal: string;
-        vertical: string;
+        horizontal: "h-[1px] mt-1 mb-2 w-full";
+        vertical: "w-[1px] self-stretch min-h-[1em]";
     };
     variant: {
-        inset: string;
-        full: string;
-        wavy: string;
+        inset: "mr-2 ml-4";
+        full: "";
+        wavy: "";
     };
 }, undefined, "bg-md-sys-color-outline-variant", {
     orientation: {
-        horizontal: string;
-        vertical: string;
+        horizontal: "h-[1px] mt-1 mb-2 w-full";
+        vertical: "w-[1px] self-stretch min-h-[1em]";
     };
     variant: {
-        inset: string;
-        full: string;
-        wavy: string;
+        inset: "mr-2 ml-4";
+        full: "";
+        wavy: "";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
-        horizontal: string;
-        vertical: string;
+        horizontal: "h-[1px] mt-1 mb-2 w-full";
+        vertical: "w-[1px] self-stretch min-h-[1em]";
     };
     variant: {
-        inset: string;
-        full: string;
-        wavy: string;
+        inset: "mr-2 ml-4";
+        full: "";
+        wavy: "";
     };
-}, undefined, "bg-md-sys-color-outline-variant", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/containers/index.d.ts

@@ -1,3 +1,4 @@
+export * from './action-rail/index.js';
 export * from './app/index.js';
 export * from './bottom-sheet/index.js';
 export * from './context-menu/index.js';
@@ -5,10 +6,8 @@ export * from './dialogue/index.js';
 export * from './divider/index.js';
 export * from './link-preview/index.js';
 export * from './list/index.js';
-export * from './menu-item/index.js';
 export * from './menu/index.js';
-export * from './merger/index.js';
-export * from './panes/index.js';
+export * from './pane/index.js';
 export * from './popover/index.js';
 export * from './scroll-area/index.js';
 export * from './side-sheet/index.js';

package/dist/components/containers/index.js

@@ -1,5 +1,6 @@
 // THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
 // folder re-exports (export everything from these folders)
+export * from './action-rail/index.js';
 export * from './app/index.js';
 export * from './bottom-sheet/index.js';
 export * from './context-menu/index.js';
@@ -7,10 +8,8 @@ export * from './dialogue/index.js';
 export * from './divider/index.js';
 export * from './link-preview/index.js';
 export * from './list/index.js';
-export * from './menu-item/index.js';
 export * from './menu/index.js';
-export * from './merger/index.js';
-export * from './panes/index.js';
+export * from './pane/index.js';
 export * from './popover/index.js';
 export * from './scroll-area/index.js';
 export * from './side-sheet/index.js';