@noxlovette/material 0.3.3 → 0.4.0

package/dist/components/toolbar/theme.d.ts

@@ -6,111 +6,126 @@ export declare const toolbar: import("tailwind-variants").TVReturnType<{
     orientation: {
         horizontal: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
         vertical: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
     };
     variant: {
         floating: {
             root: string;
+            segment: string;
         };
         docked: {
             root: string;
-        };
-        mobile: {
-            root: string;
+            segment: string;
         };
     };
     color: {
         standard: {
-            root: string;
+            segment: string;
         };
         vibrant: {
-            root: string;
+            segment: string;
         };
     };
 }, {
     root: string;
+    segment: string;
     group: string;
     divider: string;
+    spacer: string;
     fabSlot: string;
     ghost: string;
 }, undefined, {
     orientation: {
         horizontal: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
         vertical: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
     };
     variant: {
         floating: {
             root: string;
+            segment: string;
         };
         docked: {
             root: string;
-        };
-        mobile: {
-            root: string;
+            segment: string;
         };
     };
     color: {
         standard: {
-            root: string;
+            segment: string;
         };
         vibrant: {
-            root: string;
+            segment: string;
         };
     };
 }, {
     root: string;
+    segment: string;
     group: string;
     divider: string;
+    spacer: string;
     fabSlot: string;
     ghost: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         horizontal: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
         vertical: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
     };
     variant: {
         floating: {
             root: string;
+            segment: string;
         };
         docked: {
             root: string;
-        };
-        mobile: {
-            root: string;
+            segment: string;
         };
     };
     color: {
         standard: {
-            root: string;
+            segment: string;
         };
         vibrant: {
-            root: string;
+            segment: string;
         };
     };
 }, {
     root: string;
+    segment: string;
     group: string;
     divider: string;
+    spacer: string;
     fabSlot: string;
     ghost: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
     color: {
         standard: {
@@ -135,7 +150,7 @@ export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     color: {
         standard: {
             base: string;
@@ -147,7 +162,7 @@ export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const toolbarGroupItem: import("tailwind-variants").TVReturnType<{
     color: {
         standard: {
@@ -172,7 +187,7 @@ export declare const toolbarGroupItem: import("tailwind-variants").TVReturnType<
 }, {
     base: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     color: {
         standard: {
             base: string;
@@ -184,4 +199,4 @@ export declare const toolbarGroupItem: import("tailwind-variants").TVReturnType<
 }, {
     base: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/toolbar/theme.js

@@ -1,27 +1,43 @@
 import { tv } from 'tailwind-variants';
 export const toolbar = tv({
     slots: {
-        root: 'items-center gap-0.5 px-2',
-        group: 'inline-flex items-center gap-0.5',
+        // Layout/position only — no paint. Holds one implicit `segment` by default, or,
+        // with `sections`, whatever ToolbarSection/ToolbarSpacer children the consumer supplies.
+        root: 'flex items-center gap-2',
+        // The pill/bar surface itself — bg, shape, elevation, chrome padding. Toolbar renders
+        // exactly one of these around `children` by default; ToolbarSection renders one per
+        // cluster when `sections` splits the toolbar into independently painted groups.
+        segment: 'inline-flex items-center gap-1 p-2 justify-between',
+        group: 'inline-flex items-center gap-1',
         divider: 'shrink-0 bg-md-sys-color-outline-variant',
+        // A marker gap between ToolbarSections under `sections` — same size as `root`'s own
+        // `gap-2`, it does not grow, so it doesn't push sections apart to opposite edges.
+        spacer: '',
         fabSlot: 'ml-auto flex items-center ps-2',
         ghost: 'h-16 w-full shrink-0 pointer-events-none'
     },
     variants: {
         orientation: {
-            horizontal: { root: 'flex-row', divider: 'mx-1 h-6 w-px' },
-            vertical: { root: 'flex-col h-auto w-14 py-2 px-1', divider: 'my-1 h-px w-6' }
+            horizontal: {
+                root: 'flex-row',
+                segment: 'flex-row h-13',
+                group: 'flex-row',
+                divider: 'mx-1 h-6 w-px'
+            },
+            vertical: {
+                root: 'flex-col h-max',
+                segment: 'flex-col w-14',
+                group: 'flex-col',
+                divider: 'my-1 h-px w-6'
+            }
         },
         variant: {
-            floating: { root: 'inline-flex rounded-2xl shadow-elevation-1 py-1' },
-            docked: { root: 'flex w-full rounded-none py-3' },
-            mobile: {
-                root: 'flex w-full rounded-none py-3 fixed bottom-20 left-0 z-10 shadow-elevation-2'
-            }
+            floating: { root: 'inline-flex', segment: 'rounded-full shadow-elevation-1' },
+            docked: { root: 'fixed left-0 z-10 w-full', segment: 'w-full rounded-none' }
         },
         color: {
-            standard: { root: 'bg-md-sys-color-surface-container' },
-            vibrant: { root: 'bg-md-sys-color-secondary-container' }
+            standard: { segment: 'bg-md-sys-color-surface-container' },
+            vibrant: { segment: 'bg-md-sys-color-secondary-container' }
         }
     },
     defaultVariants: {

package/dist/components/toolbar/types.d.ts

@@ -1,23 +1,56 @@
-import type { IconProps } from '../../utils/index.js';
+import type { DivAttrs, IconProps } from '../../utils/index.js';
 import type { ToolbarButtonProps as BitsToolbarButtonProps, ToolbarGroupItemProps as BitsToolbarGroupItemProps, ToolbarGroupProps as BitsToolbarGroupProps, ToolbarRootProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { ToolbarVariants } from './theme.js';
 export type ToolbarColor = 'standard' | 'vibrant';
-export type ToolbarProps = ToolbarVariants & Omit<ToolbarRootProps, 'children' | 'child'> & {
+export type ToolbarProps = ToolbarVariants & Omit<ToolbarRootProps, 'children' | 'child' | 'orientation'> & {
     children?: Snippet;
     fab?: Snippet;
     ghost?: boolean;
+    /**
+     * Splits the toolbar into independently painted surfaces instead of one continuous
+     * pill/bar — compose `children` from `ToolbarSection` + `ToolbarSpacer` when true.
+     */
+    sections?: boolean;
     class?: string;
 };
+export type ToolbarSectionProps = DivAttrs & {
+    children?: Snippet;
+};
 export type ToolbarButtonProps = Omit<BitsToolbarButtonProps, 'children' | 'child'> & {
-    iconProps: IconProps;
+    /** Configuration for the leading icon. Omit when `avatar` is provided. */
+    iconProps?: IconProps;
+    /**
+     * Custom leading content (e.g. an avatar/image) rendered instead of `iconProps`.
+     */
+    avatar?: Snippet;
+    /**
+     * Content to display in a tooltip when hovering over the button.
+     * If omitted, no tooltip is shown.
+     */
+    tooltipContent?: string;
+    /** CSS class added to the tooltip trigger wrapper. */
+    triggerClass?: string;
     class?: string;
 };
 export type ToolbarGroupProps = Omit<BitsToolbarGroupProps, 'children' | 'child'> & {
     children?: Snippet;
     class?: string;
 };
+export type ToolbarSpacerProps = DivAttrs;
 export type ToolbarGroupItemProps = Omit<BitsToolbarGroupItemProps, 'children' | 'child'> & {
-    iconProps: IconProps;
+    /** Configuration for the leading icon. Omit when `avatar` is provided. */
+    iconProps?: IconProps;
+    /**
+     * Custom leading content (e.g. an avatar/image) rendered instead of `iconProps`.
+     */
+    avatar?: Snippet;
+    /**
+     * Content to display in a tooltip when hovering over the button.
+     * If omitted, no tooltip is shown.
+     */
+    tooltipContent?: string;
+    /** CSS class added to the tooltip trigger wrapper. */
+    triggerClass?: string;
     class?: string;
 };

package/dist/components/typography/body/theme.d.ts

@@ -2,29 +2,29 @@ import { type VariantProps } from 'tailwind-variants';
 export type BodyVariants = VariantProps<typeof body>;
 export declare const body: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-body-small";
+        medium: "md-sys-typescale-body-medium";
+        large: "md-sys-typescale-body-large";
     };
 }, undefined, "", {
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-body-small";
+        medium: "md-sys-typescale-body-medium";
+        large: "md-sys-typescale-body-large";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-body-small";
+        medium: "md-sys-typescale-body-medium";
+        large: "md-sys-typescale-body-large";
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/typography/display/theme.d.ts

@@ -2,29 +2,29 @@ import { type VariantProps } from 'tailwind-variants';
 export type DisplayVariants = VariantProps<typeof display>;
 export declare const display: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-display-small";
+        medium: "md-sys-typescale-display-medium";
+        large: "md-sys-typescale-display-large";
     };
 }, undefined, "", {
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-display-small";
+        medium: "md-sys-typescale-display-medium";
+        large: "md-sys-typescale-display-large";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-display-small";
+        medium: "md-sys-typescale-display-medium";
+        large: "md-sys-typescale-display-large";
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/typography/headline/theme.d.ts

@@ -2,29 +2,29 @@ import { type VariantProps } from 'tailwind-variants';
 export type HeadlineVariants = VariantProps<typeof headline>;
 export declare const headline: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-headline-small";
+        medium: "md-sys-typescale-headline-medium";
+        large: "md-sys-typescale-headline-large";
     };
 }, undefined, "", {
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-headline-small";
+        medium: "md-sys-typescale-headline-medium";
+        large: "md-sys-typescale-headline-large";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-headline-small";
+        medium: "md-sys-typescale-headline-medium";
+        large: "md-sys-typescale-headline-large";
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/typography/kbd/Kbd.stories.svelte

@@ -33,7 +33,7 @@
 
 <Story name="Anchored in a Search Field" asChild>
   <div
-    class="relative flex h-12 w-80 items-center rounded-full bg-md-sys-color-surface-container-high px-4 md-sys-typescale-body-large text-md-sys-color-on-surface-variant"
+    class="bg-md-sys-color-surface-container-high md-sys-typescale-body-large text-md-sys-color-on-surface-variant relative flex h-12 w-80 items-center rounded-full px-4"
   >
     Search...
     <Kbd position="absolute">⌘K</Kbd>

package/dist/components/typography/kbd/theme.d.ts

@@ -2,17 +2,17 @@ import { type VariantProps } from 'tailwind-variants';
 export type KbdVariants = VariantProps<typeof kbd>;
 export declare const kbd: import("tailwind-variants").TVReturnType<{
     position: {
-        absolute: string;
-        relative: string;
+        absolute: "right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex";
+        relative: "";
     };
 }, undefined, "md-sys-typescale-label-small font-semibold text-md-sys-color-on-surface-variant", {
     position: {
-        absolute: string;
-        relative: string;
+        absolute: "right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex";
+        relative: "";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     position: {
-        absolute: string;
-        relative: string;
+        absolute: "right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex";
+        relative: "";
     };
-}, undefined, "md-sys-typescale-label-small font-semibold text-md-sys-color-on-surface-variant", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/typography/label/theme.d.ts

@@ -1,28 +1,28 @@
 export declare const label: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-label-small";
+        medium: "md-sys-typescale-label-medium";
+        large: "md-sys-typescale-label-large";
     };
 }, undefined, "", {
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-label-small";
+        medium: "md-sys-typescale-label-medium";
+        large: "md-sys-typescale-label-large";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-label-small";
+        medium: "md-sys-typescale-label-medium";
+        large: "md-sys-typescale-label-large";
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/typography/title/theme.d.ts

@@ -2,29 +2,29 @@ import { type VariantProps } from 'tailwind-variants';
 export type TitleVariants = VariantProps<typeof title>;
 export declare const title: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-title-small";
+        medium: "md-sys-typescale-title-medium";
+        large: "md-sys-typescale-title-large";
     };
 }, undefined, "", {
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-title-small";
+        medium: "md-sys-typescale-title-medium";
+        large: "md-sys-typescale-title-large";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-title-small";
+        medium: "md-sys-typescale-title-medium";
+        large: "md-sys-typescale-title-large";
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined>>;