@noxlovette/material 0.3.2 → 0.4.0

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

@@ -2,44 +2,44 @@ import { type VariantProps } from 'tailwind-variants';
 export type PillVariants = VariantProps<typeof pill>;
 export declare const pill: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
-        container: string;
-        'primary-container': string;
-        'secondary-container': string;
-        'tertiary-container': string;
-        'error-container': string;
-        yellow: string;
-        green: string;
+        primary: "md-component-button-filled-primary";
+        secondary: "md-component-button-filled-secondary";
+        tertiary: "md-component-button-filled-tertiary";
+        error: "md-component-button-filled-error";
+        container: "bg-md-sys-color-surface-container text-md-sys-color-on-surface";
+        'primary-container': "bg-md-sys-color-primary-container text-md-sys-color-on-primary-container";
+        'secondary-container': "bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container";
+        'tertiary-container': "bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container";
+        'error-container': "bg-md-sys-color-error-container text-md-sys-color-on-error-container";
+        yellow: "bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950";
+        green: "bg-green-600 text-white dark:bg-green-500 dark:text-green-950";
     };
 }, undefined, "relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full", {
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
-        container: string;
-        'primary-container': string;
-        'secondary-container': string;
-        'tertiary-container': string;
-        'error-container': string;
-        yellow: string;
-        green: string;
+        primary: "md-component-button-filled-primary";
+        secondary: "md-component-button-filled-secondary";
+        tertiary: "md-component-button-filled-tertiary";
+        error: "md-component-button-filled-error";
+        container: "bg-md-sys-color-surface-container text-md-sys-color-on-surface";
+        'primary-container': "bg-md-sys-color-primary-container text-md-sys-color-on-primary-container";
+        'secondary-container': "bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container";
+        'tertiary-container': "bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container";
+        'error-container': "bg-md-sys-color-error-container text-md-sys-color-on-error-container";
+        yellow: "bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950";
+        green: "bg-green-600 text-white dark:bg-green-500 dark:text-green-950";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
-        container: string;
-        'primary-container': string;
-        'secondary-container': string;
-        'tertiary-container': string;
-        'error-container': string;
-        yellow: string;
-        green: string;
+        primary: "md-component-button-filled-primary";
+        secondary: "md-component-button-filled-secondary";
+        tertiary: "md-component-button-filled-tertiary";
+        error: "md-component-button-filled-error";
+        container: "bg-md-sys-color-surface-container text-md-sys-color-on-surface";
+        'primary-container': "bg-md-sys-color-primary-container text-md-sys-color-on-primary-container";
+        'secondary-container': "bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container";
+        'tertiary-container': "bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container";
+        'error-container': "bg-md-sys-color-error-container text-md-sys-color-on-error-container";
+        yellow: "bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950";
+        green: "bg-green-600 text-white dark:bg-green-500 dark:text-green-950";
     };
-}, undefined, "relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full", unknown, unknown, undefined>>;
+}, undefined>>;

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

@@ -2,8 +2,8 @@ import { type VariantProps } from 'tailwind-variants';
 export type SnackBarVariants = VariantProps<typeof snackbar>;
 export declare const snackbar: import("tailwind-variants").TVReturnType<{
     fixed: {
-        true: string;
-        false: string;
+        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        false: "";
     };
 }, {
     base: string;
@@ -13,8 +13,8 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, undefined, {
     fixed: {
-        true: string;
-        false: string;
+        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        false: "";
     };
 }, {
     base: string;
@@ -22,10 +22,10 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     actionWrapper: string;
     supportingText: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     fixed: {
-        true: string;
-        false: string;
+        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        false: "";
     };
 }, {
     base: string;
@@ -33,4 +33,4 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     actionWrapper: string;
     supportingText: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/table/Table.stories.svelte

@@ -0,0 +1,267 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Table from './Table.svelte';
+  import TableHead from './TableHead.svelte';
+  import TableBody from './TableBody.svelte';
+  import TableFoot from './TableFoot.svelte';
+  import TableRow from './TableRow.svelte';
+  import TableHeader from './TableHeader.svelte';
+  import TableCell from './TableCell.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Table/Table',
+    component: Table,
+    argTypes: {
+      rounded: { control: 'boolean' }
+    },
+    args: {
+      rounded: false
+    }
+  });
+
+  const rows = [
+    { name: 'Frozen yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 },
+    { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3 },
+    { name: 'Eclair', calories: 262, fat: 16.0, carbs: 24, protein: 6.0 },
+    { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3 },
+    { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9 }
+  ];
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <Table rounded={args.rounded}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Dessert</TableHeader>
+          <TableHeader numeric>Calories</TableHeader>
+          <TableHeader numeric>Fat (g)</TableHeader>
+          <TableHeader numeric>Carbs (g)</TableHeader>
+          <TableHeader numeric>Protein (g)</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {#each rows as row (row.name)}
+          <TableRow hoverable>
+            <TableCell>{row.name}</TableCell>
+            <TableCell numeric>{row.calories}</TableCell>
+            <TableCell numeric>{row.fat}</TableCell>
+            <TableCell numeric>{row.carbs}</TableCell>
+            <TableCell numeric>{row.protein}</TableCell>
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  {/snippet}
+</Story>
+
+<Story name="Rounded" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader>Dessert</TableHeader>
+        <TableHeader numeric>Calories</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each rows as row (row.name)}
+        <TableRow>
+          <TableCell>{row.name}</TableCell>
+          <TableCell numeric>{row.calories}</TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+</Story>
+
+<Story name="Sortable Header" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader sortable sorted sortDirection="asc">Dessert</TableHeader>
+        <TableHeader numeric sortable sortDirection="desc">Calories</TableHeader>
+        <TableHeader numeric sortable>Fat (g)</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each rows as row (row.name)}
+        <TableRow hoverable>
+          <TableCell>{row.name}</TableCell>
+          <TableCell numeric>{row.calories}</TableCell>
+          <TableCell numeric>{row.fat}</TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+</Story>
+
+<Story name="Selected Row" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader>Dessert</TableHeader>
+        <TableHeader numeric>Calories</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each rows as row, i (row.name)}
+        <TableRow hoverable selected={i === 1}>
+          <TableCell>{row.name}</TableCell>
+          <TableCell numeric>{row.calories}</TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+</Story>
+
+<Story name="With Footer" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader>Dessert</TableHeader>
+        <TableHeader numeric>Calories</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each rows as row (row.name)}
+        <TableRow>
+          <TableCell>{row.name}</TableCell>
+          <TableCell numeric>{row.calories}</TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+    <TableFoot>
+      <TableRow>
+        <TableCell>Total</TableCell>
+        <TableCell numeric>{rows.reduce((sum, r) => sum + r.calories, 0)}</TableCell>
+      </TableRow>
+    </TableFoot>
+  </Table>
+</Story>
+
+<Story name="Sticky Header (Scroll Container)" asChild>
+  <div class="ring-md-sys-color-outline-variant h-64 w-full overflow-auto rounded-md ring-1">
+    <Table>
+      <TableHead sticky>
+        <TableRow>
+          <TableHeader>Dessert</TableHeader>
+          <TableHeader numeric>Calories</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {#each Array(30) as _, i (i)}
+          <TableRow hoverable>
+            <TableCell>Row {i + 1}</TableCell>
+            <TableCell numeric>{100 + i}</TableCell>
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  </div>
+</Story>
+
+<Story name="Extreme: Long Cell Content" asChild>
+  <div class="w-[420px]">
+    <Table rounded>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Description</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Item</TableCell>
+          <TableCell
+            >This is an unusually long piece of supporting text that will wrap across multiple lines
+            inside a fixed-width table cell to check padding, line-height, and vertical alignment
+            under wrapping conditions.</TableCell
+          >
+        </TableRow>
+        <TableRow>
+          <TableCell
+            >SupercalifragilisticexpialidociousItemNameWithNoSpacesWhatsoeverToTestOverflow</TableCell
+          >
+          <TableCell>Short</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+</Story>
+
+<Story name="Extreme: Many Columns (Horizontal Scroll)" asChild>
+  <div class="w-full max-w-[600px] overflow-x-auto">
+    <Table rounded>
+      <TableHead>
+        <TableRow>
+          {#each Array(12) as _, i (i)}
+            <TableHeader numeric>Col {i + 1}</TableHeader>
+          {/each}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {#each Array(3) as _, r (r)}
+          <TableRow>
+            {#each Array(12) as _, c (c)}
+              <TableCell numeric>{r * 12 + c}</TableCell>
+            {/each}
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  </div>
+</Story>
+
+<Story name="Extreme: Single Row" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader>Dessert</TableHeader>
+        <TableHeader numeric>Calories</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>Frozen yogurt</TableCell>
+        <TableCell numeric>159</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</Story>
+
+<Story name="Extreme: Empty State" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader>Dessert</TableHeader>
+        <TableHeader numeric>Calories</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell class="text-md-sys-color-on-surface-variant text-center" colspan={2}
+          >No results found</TableCell
+        >
+      </TableRow>
+    </TableBody>
+  </Table>
+</Story>
+
+<Story name="Mixed Alignment" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader align="left">Left</TableHeader>
+        <TableHeader align="center">Center</TableHeader>
+        <TableHeader align="right">Right</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell align="left">L</TableCell>
+        <TableCell align="center">C</TableCell>
+        <TableCell align="right">R</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</Story>

package/dist/components/table/Table.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Table from './Table.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Table: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Table = InstanceType<typeof Table>;
+export default Table;

package/dist/components/table/Table.svelte

@@ -14,7 +14,7 @@ Compose with TableHead, TableBody, TableFoot, TableRow, TableCell, and TableHead
 </script>
 
 {#if rounded}
-  <div class="ring-md-sys-color-outline-variant overflow-hidden rounded-xl ring-1">
+  <div class="ring-md-sys-color-outline-variant overflow-x-auto rounded-sm ring-1">
     <table class={root({ class: clsx(className) })} {...restProps}>
       {@render children()}
     </table>

package/dist/components/table/TableBody.svelte

@@ -1,17 +1,30 @@
 <!--
 @component
-Wraps the data rows of a Table.
+Wraps the data rows of a Table. Rows are keyboard-navigable by default: Tab/Shift+Tab
+stop on the table once (roving tabindex), and ArrowUp/ArrowDown or k/j move focus
+between rows. Set `navigable={false}` to opt a purely presentational table out.
 -->
 <script lang="ts">
   import type { TableBodyProps } from './types.js';
   import { table } from './theme.js';
+  import { rovingFocusGroup } from '../../actions/index.js';
   import clsx from 'clsx';
 
-  let { children, class: className, ...restProps }: TableBodyProps = $props();
+  let {
+    children,
+    navigable = true,
+    loop = false,
+    class: className,
+    ...restProps
+  }: TableBodyProps = $props();
 
   const { body } = table();
 </script>
 
-<tbody class={body({ class: clsx(className) })} {...restProps}>
+<tbody
+  class={body({ class: clsx(className) })}
+  use:rovingFocusGroup={{ candidateSelector: '[data-table-row]', loop, enabled: navigable }}
+  {...restProps}
+>
   {@render children()}
 </tbody>

package/dist/components/table/TableBody.svelte.d.ts

@@ -1,5 +1,9 @@
 import type { TableBodyProps } from './types.js';
-/** Wraps the data rows of a Table. */
+/**
+ * Wraps the data rows of a Table. Rows are keyboard-navigable by default: Tab/Shift+Tab
+ * stop on the table once (roving tabindex), and ArrowUp/ArrowDown or k/j move focus
+ * between rows. Set `navigable={false}` to opt a purely presentational table out.
+ */
 declare const TableBody: import("svelte").Component<TableBodyProps, {}, "">;
 type TableBody = ReturnType<typeof TableBody>;
 export default TableBody;

package/dist/components/table/TableRow.svelte

@@ -19,6 +19,6 @@ and `hoverable` to show a hover background (e.g. for clickable rows).
   const { row } = $derived(table({ selected, hoverable }));
 </script>
 
-<tr class={row({ class: clsx(className) })} {...restProps}>
+<tr data-table-row class={row({ class: clsx(className) })} {...restProps}>
   {@render children()}
 </tr>

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

@@ -107,7 +107,7 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     row: string;
     cell: string;
     header: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     hoverable: {
         true: {
             row: string;
@@ -161,5 +161,5 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     row: string;
     cell: string;
     header: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type TableVariants = VariantProps<typeof table>;

package/dist/components/table/theme.js

@@ -5,8 +5,8 @@ export const table = tv({
         head: '',
         body: '[&_tr:last-child]:border-b-0',
         foot: 'border-t border-md-sys-color-outline-variant',
-        row: 'border-b border-md-sys-color-outline-variant transition-colors',
-        cell: 'px-4 py-3 align-middle',
+        row: 'border-b border-md-sys-color-outline-variant transition-colors focus-visible:outline focus-visible:-outline-offset-2 focus-visible:outline-md-sys-color-primary',
+        cell: 'px-4 py-3 align-middle wrap-anywhere',
         header: 'px-4 py-4 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface font-medium whitespace-nowrap'
     },
     variants: {

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

@@ -13,6 +13,13 @@ export type TableHeadProps = HTMLAttributes<HTMLTableSectionElement> & {
 };
 export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
     children: Snippet;
+    /**
+     * Make rows keyboard-navigable: roving tabindex so Tab/Shift+Tab stop on the table
+     * once, and ArrowUp/ArrowDown (or k/j) move focus between rows. Default `true`.
+     */
+    navigable?: boolean;
+    /** Loop focus from the last row back to the first (and vice versa). Default `false`. */
+    loop?: boolean;
 };
 export type TableFootProps = HTMLAttributes<HTMLTableSectionElement> & {
     children: Snippet;

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

@@ -2,28 +2,28 @@ import { type VariantProps } from 'tailwind-variants';
 export type TimepickerVariants = VariantProps<typeof timepicker>;
 export declare const timepicker: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            headline?: import("tailwind-merge").ClassNameValue;
-            inputWrapper?: import("tailwind-merge").ClassNameValue;
-            clockDiv?: import("tailwind-merge").ClassNameValue;
-            buttonDiv?: import("tailwind-merge").ClassNameValue;
-            fieldSeparator?: import("tailwind-merge").ClassNameValue;
-            timeInput?: import("tailwind-merge").ClassNameValue;
-            timeInputSupportingText?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            headline?: import("tailwind-variants").ClassValue;
+            inputWrapper?: import("tailwind-variants").ClassValue;
+            clockDiv?: import("tailwind-variants").ClassValue;
+            buttonDiv?: import("tailwind-variants").ClassValue;
+            fieldSeparator?: import("tailwind-variants").ClassValue;
+            timeInput?: import("tailwind-variants").ClassValue;
+            timeInputSupportingText?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            headline?: import("tailwind-merge").ClassNameValue;
-            inputWrapper?: import("tailwind-merge").ClassNameValue;
-            clockDiv?: import("tailwind-merge").ClassNameValue;
-            buttonDiv?: import("tailwind-merge").ClassNameValue;
-            fieldSeparator?: import("tailwind-merge").ClassNameValue;
-            timeInput?: import("tailwind-merge").ClassNameValue;
-            timeInputSupportingText?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            headline?: import("tailwind-variants").ClassValue;
+            inputWrapper?: import("tailwind-variants").ClassValue;
+            clockDiv?: import("tailwind-variants").ClassValue;
+            buttonDiv?: import("tailwind-variants").ClassValue;
+            fieldSeparator?: import("tailwind-variants").ClassValue;
+            timeInput?: import("tailwind-variants").ClassValue;
+            timeInputSupportingText?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -37,15 +37,15 @@ export declare const timepicker: import("tailwind-variants").TVReturnType<{
     timeInputSupportingText: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            headline?: import("tailwind-merge").ClassNameValue;
-            inputWrapper?: import("tailwind-merge").ClassNameValue;
-            clockDiv?: import("tailwind-merge").ClassNameValue;
-            buttonDiv?: import("tailwind-merge").ClassNameValue;
-            fieldSeparator?: import("tailwind-merge").ClassNameValue;
-            timeInput?: import("tailwind-merge").ClassNameValue;
-            timeInputSupportingText?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            headline?: import("tailwind-variants").ClassValue;
+            inputWrapper?: import("tailwind-variants").ClassValue;
+            clockDiv?: import("tailwind-variants").ClassValue;
+            buttonDiv?: import("tailwind-variants").ClassValue;
+            fieldSeparator?: import("tailwind-variants").ClassValue;
+            timeInput?: import("tailwind-variants").ClassValue;
+            timeInputSupportingText?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -57,7 +57,7 @@ export declare const timepicker: import("tailwind-variants").TVReturnType<{
     fieldSeparator: string;
     timeInput: string;
     timeInputSupportingText: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
     clockDiv: string;
     buttonDiv: string;
@@ -66,4 +66,4 @@ export declare const timepicker: import("tailwind-variants").TVReturnType<{
     fieldSeparator: string;
     timeInput: string;
     timeInputSupportingText: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/time/theme.js

@@ -7,7 +7,7 @@ export const timepicker = tv({
         headline: 'text-md-sys-color-on-surface-variant md-sys-typescale-label-medium',
         inputWrapper: 'space-y-2',
         fieldSeparator: 'text-md-sys-color-on-surface md-sys-typescale-display-large ',
-        timeInput: 'bg-md-sys-color-surface-container-highest rounded-sm outline outline-md-sys-color-outline w-24 h-18 md-sys-typescale-display-medium text-md-sys-color-on-surface hover:text-sys-color-on-surface state-layer before:bg-md-sys-color-on-surface/8 md-sys-state-focus-indicator inline-flex items-center justify-center cursor-text focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary focus:bg-md-sys-color-primary-container relative',
-        timeInputSupportingText: 'text-md-color-on-surface-variant md-sys-typescale-body-small'
+        timeInput: 'bg-md-sys-color-surface-container-highest rounded-sm outline outline-md-sys-color-outline w-24 h-18 md-sys-typescale-display-medium text-md-sys-color-on-surface hover:text-md-sys-color-on-surface state-layer before:bg-md-sys-color-on-surface/8 md-sys-state-focus-indicator inline-flex items-center justify-center cursor-text focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary focus:bg-md-sys-color-primary-container relative',
+        timeInputSupportingText: 'text-md-sys-color-on-surface-variant md-sys-typescale-body-small'
     }
 });