@noxlovette/material 0.3.2 → 0.4.0

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

@@ -7,23 +7,23 @@ export type ButtonIconVariants = VariantProps<typeof buttonIcon>;
 export type FABMenuItemVariants = VariantProps<typeof fabMenuItem>;
 export declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
-        elevated: string;
-        filled: string;
-        tonal: string;
-        outlined: string;
-        text: string;
-        bare: string;
+        elevated: "";
+        filled: "";
+        tonal: "";
+        outlined: "";
+        text: "";
+        bare: "";
     };
     color: {
-        default: string;
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
+        default: "";
+        primary: "";
+        secondary: "";
+        tertiary: "";
+        error: "";
     };
     usage: {
-        selection: string;
-        default: string;
+        selection: "";
+        default: "";
     };
     size: {
         xs: {
@@ -48,35 +48,35 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         };
     };
     shape: {
-        round: string;
-        square: string;
+        round: "";
+        square: "[--btn-shape-override:0.375rem]";
     };
     selected: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
 }, {
     base: string;
     icon: string;
 }, undefined, {
     variant: {
-        elevated: string;
-        filled: string;
-        tonal: string;
-        outlined: string;
-        text: string;
-        bare: string;
+        elevated: "";
+        filled: "";
+        tonal: "";
+        outlined: "";
+        text: "";
+        bare: "";
     };
     color: {
-        default: string;
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
+        default: "";
+        primary: "";
+        secondary: "";
+        tertiary: "";
+        error: "";
     };
     usage: {
-        selection: string;
-        default: string;
+        selection: "";
+        default: "";
     };
     size: {
         xs: {
@@ -101,35 +101,35 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         };
     };
     shape: {
-        round: string;
-        square: string;
+        round: "";
+        square: "[--btn-shape-override:0.375rem]";
     };
     selected: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
 }, {
     base: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        elevated: string;
-        filled: string;
-        tonal: string;
-        outlined: string;
-        text: string;
-        bare: string;
+        elevated: "";
+        filled: "";
+        tonal: "";
+        outlined: "";
+        text: "";
+        bare: "";
     };
     color: {
-        default: string;
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
+        default: "";
+        primary: "";
+        secondary: "";
+        tertiary: "";
+        error: "";
     };
     usage: {
-        selection: string;
-        default: string;
+        selection: "";
+        default: "";
     };
     size: {
         xs: {
@@ -154,32 +154,32 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         };
     };
     shape: {
-        round: string;
-        square: string;
+        round: "";
+        square: "[--btn-shape-override:0.375rem]";
     };
     selected: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
 }, {
     base: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
-        elevated: string;
-        filled: string;
-        tonal: string;
-        outlined: string;
-        text: string;
-        bare: string;
+        elevated: "";
+        filled: "";
+        tonal: "";
+        outlined: "";
+        text: "";
+        bare: "";
     };
     color: {
-        default: string;
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
+        default: "";
+        primary: "";
+        secondary: "";
+        tertiary: "";
+        error: "";
     };
     size: {
         xs: {
@@ -204,40 +204,40 @@ export declare const buttonIcon: import("tailwind-variants").TVReturnType<{
         };
     };
     width: {
-        narrow: string;
-        wide: string;
-        default: string;
+        narrow: "";
+        wide: "";
+        default: "aspect-square";
     };
     shape: {
-        round: string;
-        square: string;
+        round: "";
+        square: "[--btn-shape-override:0.75rem]";
     };
     selected: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     variation: {
-        toggle: string;
-        default: string;
+        toggle: "";
+        default: "";
     };
 }, {
     base: string;
     icon: string;
 }, undefined, {
     variant: {
-        elevated: string;
-        filled: string;
-        tonal: string;
-        outlined: string;
-        text: string;
-        bare: string;
+        elevated: "";
+        filled: "";
+        tonal: "";
+        outlined: "";
+        text: "";
+        bare: "";
     };
     color: {
-        default: string;
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
+        default: "";
+        primary: "";
+        secondary: "";
+        tertiary: "";
+        error: "";
     };
     size: {
         xs: {
@@ -262,40 +262,40 @@ export declare const buttonIcon: import("tailwind-variants").TVReturnType<{
         };
     };
     width: {
-        narrow: string;
-        wide: string;
-        default: string;
+        narrow: "";
+        wide: "";
+        default: "aspect-square";
     };
     shape: {
-        round: string;
-        square: string;
+        round: "";
+        square: "[--btn-shape-override:0.75rem]";
     };
     selected: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     variation: {
-        toggle: string;
-        default: string;
+        toggle: "";
+        default: "";
     };
 }, {
     base: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        elevated: string;
-        filled: string;
-        tonal: string;
-        outlined: string;
-        text: string;
-        bare: string;
+        elevated: "";
+        filled: "";
+        tonal: "";
+        outlined: "";
+        text: "";
+        bare: "";
     };
     color: {
-        default: string;
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
+        default: "";
+        primary: "";
+        secondary: "";
+        tertiary: "";
+        error: "";
     };
     size: {
         xs: {
@@ -320,26 +320,26 @@ export declare const buttonIcon: import("tailwind-variants").TVReturnType<{
         };
     };
     width: {
-        narrow: string;
-        wide: string;
-        default: string;
+        narrow: "";
+        wide: "";
+        default: "aspect-square";
     };
     shape: {
-        round: string;
-        square: string;
+        round: "";
+        square: "[--btn-shape-override:0.75rem]";
     };
     selected: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     variation: {
-        toggle: string;
-        default: string;
+        toggle: "";
+        default: "";
     };
 }, {
     base: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const fab: import("tailwind-variants").TVReturnType<{
     config: {
         primary: {
@@ -359,8 +359,8 @@ export declare const fab: import("tailwind-variants").TVReturnType<{
         };
     };
     expanded: {
-        true: string;
-        false: string;
+        true: "gap-3 px-4";
+        false: "aspect-square";
     };
     size: {
         small: {
@@ -402,8 +402,8 @@ export declare const fab: import("tailwind-variants").TVReturnType<{
         };
     };
     expanded: {
-        true: string;
-        false: string;
+        true: "gap-3 px-4";
+        false: "aspect-square";
     };
     size: {
         small: {
@@ -426,7 +426,7 @@ export declare const fab: import("tailwind-variants").TVReturnType<{
     base: string;
     icon: string;
     label: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     config: {
         primary: {
             base: string;
@@ -445,8 +445,8 @@ export declare const fab: import("tailwind-variants").TVReturnType<{
         };
     };
     expanded: {
-        true: string;
-        false: string;
+        true: "gap-3 px-4";
+        false: "aspect-square";
     };
     size: {
         small: {
@@ -469,57 +469,57 @@ export declare const fab: import("tailwind-variants").TVReturnType<{
     base: string;
     icon: string;
     label: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const fabMenu: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     base: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     base: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const fabMenuItem: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
+        primary: "md-component-button-filled-primary";
+        secondary: "md-component-button-tonal-secondary";
+        tertiary: "md-component-button-outline-tertiary";
     };
 }, {
     base: string;
     icon: string;
 }, undefined, {
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
+        primary: "md-component-button-filled-primary";
+        secondary: "md-component-button-tonal-secondary";
+        tertiary: "md-component-button-outline-tertiary";
     };
 }, {
     base: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
+        primary: "md-component-button-filled-primary";
+        secondary: "md-component-button-tonal-secondary";
+        tertiary: "md-component-button-outline-tertiary";
     };
 }, {
     base: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/buttons/theme.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const button = tv({
     slots: {
-        base: 'md-component-button-base md-btn-morph group max-w-max',
+        base: 'md-component-button-base relative md-btn-morph group max-w-max',
         icon: 'inline-flex items-center justify-center leading-none'
     },
     variants: {
@@ -205,7 +205,7 @@ export const button = tv({
 });
 export const buttonIcon = tv({
     slots: {
-        base: 'md-component-button-base md-btn-morph group max-w-max',
+        base: 'md-component-button-base relative md-btn-morph group max-w-max',
         icon: 'inline-flex items-center justify-center leading-none'
     },
     variants: {

package/dist/components/cards/Card.stories.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Card from './Card.svelte';
+  import { Button } from '../buttons/index.js';
 
   const { Story } = defineMeta({
     title: 'Cards/Card',
@@ -24,6 +25,17 @@
       href: undefined
     }
   });
+
+  const selectableItems = [
+    { id: 1, title: 'Q3 roadmap', body: 'Planning doc for the next quarter.' },
+    { id: 2, title: 'Design review', body: 'Notes from the Tuesday sync.' },
+    { id: 3, title: 'Onboarding guide', body: 'Draft for new hires.' }
+  ];
+</script>
+
+<script lang="ts">
+  let items = $state(selectableItems);
+  let selectedId = $state<number | null>(null);
 </script>
 
 <Story name="Playground">
@@ -70,3 +82,49 @@
     </p>
   </Card>
 </Story>
+
+<Story name="Selectable" asChild>
+  <div class="flex flex-wrap gap-4 p-6">
+    {#each items as item (item.id)}
+      <Card
+        type="outlined"
+        class="w-56"
+        selected={selectedId === item.id}
+        onselect={() => (selectedId = item.id)}
+        ondelete={() => {
+          items = items.filter((i) => i.id !== item.id);
+          if (selectedId === item.id) selectedId = null;
+        }}
+      >
+        <p class="md-sys-typescale-title-medium mb-1">{item.title}</p>
+        <p class="text-md-sys-color-on-surface-variant text-sm">{item.body}</p>
+      </Card>
+    {/each}
+  </div>
+</Story>
+
+<Story name="Selectable With Nested Button" asChild>
+  <div class="flex flex-wrap gap-4 p-6">
+    <Card
+      type="outlined"
+      class="w-64"
+      onselect={() => console.log('card selected')}
+      ondelete={() => console.log('card deleted')}
+    >
+      <p class="md-sys-typescale-title-medium mb-1">Card with an action</p>
+      <p class="text-md-sys-color-on-surface-variant mb-3 text-sm">
+        Clicking the card selects it. The button below calls
+        <code>event.stopPropagation()</code> so it doesn't also trigger selection.
+      </p>
+      <Button
+        variant="text"
+        onclick={(event: MouseEvent) => {
+          event.stopPropagation();
+          console.log('button clicked, card not selected');
+        }}
+      >
+        Open
+      </Button>
+    </Card>
+  </div>
+</Story>

package/dist/components/cards/Card.stories.svelte.d.ts

@@ -1,19 +1,4 @@
 import Card from './Card.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 Card: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Card = InstanceType<typeof Card>;
+declare const Card: import("svelte").Component<Record<string, never>, {}, "">;
+type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/cards/Card.svelte

@@ -20,21 +20,89 @@ and serve as an entry point to more detailed information.
     padding = 'md',
     class: className,
     href,
-    hoverable = !!href,
+    onselect,
+    ondelete,
+    onleave,
+    hoverable = !!href || !!onselect || !!ondelete,
+    selected = false,
+    onclick: onclickProp,
+    onkeydown: onkeydownProp,
+    onfocusout: onfocusoutProp,
     ...restProps
   }: CardProps = $props();
 
-  const { base } = $derived(card({ type, hoverable, padding }));
+  const selectable = $derived(!!onselect || !!ondelete);
+
+  const { base } = $derived(card({ type, hoverable, padding, selected }));
+
+  const handleClick: (event: MouseEvent) => void = (event) => {
+    (onclickProp as ((event: MouseEvent) => void) | undefined)?.(event);
+    onselect?.();
+  };
+
+  const handleKeydown: (event: KeyboardEvent) => void = (event) => {
+    (onkeydownProp as ((event: KeyboardEvent) => void) | undefined)?.(event);
+    if (event.target !== event.currentTarget) return;
+    if (onselect && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      onselect();
+    } else if (ondelete && (event.key === 'Delete' || event.key === 'Backspace')) {
+      event.preventDefault();
+      ondelete();
+    }
+  };
+
+  const handleFocusOut: (event: FocusEvent) => void = (event) => {
+    (onfocusoutProp as ((event: FocusEvent) => void) | undefined)?.(event);
+    if (!onleave) return;
+    const currentTarget = event.currentTarget as HTMLElement;
+    const relatedTarget = event.relatedTarget as Node | null;
+    if (relatedTarget && currentTarget.contains(relatedTarget)) return;
+    onleave();
+  };
 </script>
 
+{#snippet content()}
+  {#if hoverable}<Layer />{/if}
+  {@render children?.()}
+{/snippet}
+
 {#if href}
-  <a {href} class={base({ class: clsx(className) })} data-cy="m3-card" {...restProps}>
-    {#if hoverable}<Layer />{/if}
-    {@render children?.()}
+  <a
+    {href}
+    class={base({ class: clsx(className) })}
+    data-cy="m3-card"
+    tabindex={selectable ? 0 : undefined}
+    {...restProps}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+    onfocusout={handleFocusOut}
+  >
+    {@render content()}
   </a>
+{:else if selectable}
+  <div
+    class={base({ class: clsx(className) })}
+    data-cy="m3-card"
+    role="button"
+    tabindex={0}
+    aria-pressed={selected}
+    {...restProps}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+    onfocusout={handleFocusOut}
+  >
+    {@render content()}
+  </div>
 {:else}
-  <div class={base({ class: clsx(className) })} data-cy="m3-card" {...restProps}>
-    {#if hoverable}<Layer />{/if}
-    {@render children?.()}
+  <div
+    class={base({ class: clsx(className) })}
+    data-cy="m3-card"
+    {...restProps}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+    onfocusout={handleFocusOut}
+  >
+    {@render content()}
   </div>
 {/if}