@noxlovette/material 0.3.2 → 0.4.0

package/dist/components/buttons/connected/ConnectedButtonGroup.stories.svelte

@@ -0,0 +1,118 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ConnectedButtonGroup from './ConnectedButtonGroup.svelte';
+  import ConnectedButtonGroupItem from './ConnectedButtonGroupItem.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Buttons/Connected Button Group',
+    component: ConnectedButtonGroup,
+    argTypes: {
+      type: {
+        control: 'select',
+        options: ['single', 'multiple']
+      },
+      orientation: {
+        control: 'select',
+        options: ['horizontal', 'vertical']
+      },
+      shape: {
+        control: 'select',
+        options: ['round', 'square']
+      },
+      size: {
+        control: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl']
+      }
+    },
+    args: {
+      type: 'single',
+      orientation: 'horizontal',
+      shape: 'round',
+      size: 'sm'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <ConnectedButtonGroup
+      type={args.type}
+      orientation={args.orientation}
+      shape={args.shape}
+      size={args.size}
+      value="left"
+    >
+      <ConnectedButtonGroupItem
+        value="left"
+        label="Left"
+        iconProps={{ name: 'format_align_left' }}
+      />
+      <ConnectedButtonGroupItem
+        value="center"
+        label="Center"
+        iconProps={{ name: 'format_align_center' }}
+      />
+      <ConnectedButtonGroupItem
+        value="right"
+        label="Right"
+        iconProps={{ name: 'format_align_right' }}
+      />
+    </ConnectedButtonGroup>
+  {/snippet}
+</Story>
+
+<Story name="Multi-select" asChild>
+  <div class="p-6">
+    <ConnectedButtonGroup type="multiple" value={['bold']}>
+      <ConnectedButtonGroupItem value="bold" label="Bold" iconProps={{ name: 'format_bold' }} />
+      <ConnectedButtonGroupItem
+        value="italic"
+        label="Italic"
+        iconProps={{ name: 'format_italic' }}
+      />
+      <ConnectedButtonGroupItem
+        value="underline"
+        label="Underline"
+        iconProps={{ name: 'format_underlined' }}
+      />
+    </ConnectedButtonGroup>
+  </div>
+</Story>
+
+<Story name="Icon Only" asChild>
+  <div class="p-6">
+    <ConnectedButtonGroup type="single" value="list">
+      <ConnectedButtonGroupItem value="list" iconProps={{ name: 'view_list' }} />
+      <ConnectedButtonGroupItem value="grid" iconProps={{ name: 'grid_view' }} />
+    </ConnectedButtonGroup>
+  </div>
+</Story>
+
+<Story name="Square Shape" asChild>
+  <div class="p-6">
+    <ConnectedButtonGroup type="single" shape="square" value="list">
+      <ConnectedButtonGroupItem value="list" iconProps={{ name: 'view_list' }} />
+      <ConnectedButtonGroupItem value="grid" iconProps={{ name: 'grid_view' }} />
+    </ConnectedButtonGroup>
+  </div>
+</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-col gap-6 p-6">
+    {#each ['xs', 'sm', 'md', 'lg', 'xl'] as const as size (size)}
+      <ConnectedButtonGroup type="single" {size} value="list">
+        <ConnectedButtonGroupItem value="list" iconProps={{ name: 'view_list' }} />
+        <ConnectedButtonGroupItem value="grid" iconProps={{ name: 'grid_view' }} />
+      </ConnectedButtonGroup>
+    {/each}
+  </div>
+</Story>
+
+<Story name="Vertical" asChild>
+  <div class="p-6">
+    <ConnectedButtonGroup type="single" orientation="vertical" value="list">
+      <ConnectedButtonGroupItem value="list" label="List" iconProps={{ name: 'view_list' }} />
+      <ConnectedButtonGroupItem value="grid" label="Grid" iconProps={{ name: 'grid_view' }} />
+    </ConnectedButtonGroup>
+  </div>
+</Story>

package/dist/components/buttons/connected/ConnectedButtonGroup.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import ConnectedButtonGroup from './ConnectedButtonGroup.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 ConnectedButtonGroup: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConnectedButtonGroup = InstanceType<typeof ConnectedButtonGroup>;
+export default ConnectedButtonGroup;

package/dist/components/buttons/connected/ConnectedButtonGroup.svelte

@@ -0,0 +1,52 @@
+<!--
+@component
+A connected button group — the M3 replacement for the deprecated segmented
+button. Items sit in a shared pill (or square) shape with a small gap between
+them; selecting or pressing an item changes only that item's own shape and
+color, never its neighbors'.
+
+@see https://m3.material.io/components/button-groups/overview
+-->
+<script lang="ts">
+  import { ToggleGroup } from 'bits-ui';
+  import clsx from 'clsx';
+  import { setContext } from 'svelte';
+  import { connectedButtonGroup } from './theme.js';
+  import type { ConnectedButtonGroupCtx, ConnectedButtonGroupProps } from './types.js';
+
+  let {
+    type,
+    value = $bindable(undefined),
+    onValueChange,
+    disabled = false,
+    loop = true,
+    orientation = 'horizontal',
+    shape = 'round',
+    size = 'sm',
+    children,
+    class: className
+  }: ConnectedButtonGroupProps = $props();
+
+  const cls = $derived(connectedButtonGroup({ orientation }));
+
+  setContext<ConnectedButtonGroupCtx>('connectedButtonGroup', {
+    get size() {
+      return size;
+    },
+    get shape() {
+      return shape;
+    }
+  });
+</script>
+
+<ToggleGroup.Root
+  {type}
+  bind:value
+  {onValueChange}
+  {disabled}
+  {loop}
+  {orientation}
+  class={cls.root({ class: clsx(className) })}
+>
+  {@render children?.()}
+</ToggleGroup.Root>

package/dist/components/buttons/connected/ConnectedButtonGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ConnectedButtonGroupProps } from './types.js';
+/**
+ * A connected button group — the M3 replacement for the deprecated segmented
+ * button. Items sit in a shared pill (or square) shape with a small gap between
+ * them; selecting or pressing an item changes only that item's own shape and
+ * color, never its neighbors'.
+ *
+ * @see https://m3.material.io/components/button-groups/overview
+ */
+declare const ConnectedButtonGroup: import("svelte").Component<ConnectedButtonGroupProps, {}, "value">;
+type ConnectedButtonGroup = ReturnType<typeof ConnectedButtonGroup>;
+export default ConnectedButtonGroup;

package/dist/components/buttons/connected/ConnectedButtonGroupItem.svelte

@@ -0,0 +1,37 @@
+<!--
+@component
+A single item within a ConnectedButtonGroup. Selection is communicated through
+shape (round collapsing toward square) and color, matching the M3 spec — not
+through an overlaid check icon.
+-->
+<script lang="ts">
+  import { ToggleGroup } from 'bits-ui';
+  import clsx from 'clsx';
+  import { getContext } from 'svelte';
+  import { Icon, Layer } from '../../../utils/index.js';
+  import { connectedButtonGroupItem } from './theme.js';
+  import type { ConnectedButtonGroupCtx, ConnectedButtonGroupItemProps } from './types.js';
+
+  let {
+    value,
+    label,
+    iconProps,
+    disabled = false,
+    class: className
+  }: ConnectedButtonGroupItemProps = $props();
+
+  const ctx = getContext<ConnectedButtonGroupCtx | undefined>('connectedButtonGroup');
+  const size = $derived(ctx?.size ?? 'sm');
+  const shape = $derived(ctx?.shape ?? 'round');
+  const { base, icon } = $derived(connectedButtonGroupItem({ size, shape }));
+</script>
+
+<ToggleGroup.Item {value} {disabled} class={base({ class: clsx(className) })}>
+  {#if iconProps}
+    <Icon {...iconProps} class={icon()} />
+  {/if}
+  {#if label}
+    <span>{label}</span>
+  {/if}
+  <Layer />
+</ToggleGroup.Item>

package/dist/components/buttons/connected/ConnectedButtonGroupItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ConnectedButtonGroupItemProps } from './types.js';
+/**
+ * A single item within a ConnectedButtonGroup. Selection is communicated through
+ * shape (round collapsing toward square) and color, matching the M3 spec — not
+ * through an overlaid check icon.
+ */
+declare const ConnectedButtonGroupItem: import("svelte").Component<ConnectedButtonGroupItemProps, {}, "">;
+type ConnectedButtonGroupItem = ReturnType<typeof ConnectedButtonGroupItem>;
+export default ConnectedButtonGroupItem;

package/dist/components/buttons/connected/index.d.ts

@@ -1,2 +1,4 @@
+export * from './theme.js';
 export * from './types.js';
-export { default as ConnectedButtons } from './ConnectedButtons.svelte';
+export { default as ConnectedButtonGroup } from './ConnectedButtonGroup.svelte';
+export { default as ConnectedButtonGroupItem } from './ConnectedButtonGroupItem.svelte';

package/dist/components/buttons/connected/index.js

@@ -1,5 +1,7 @@
 // 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 ConnectedButtons } from './ConnectedButtons.svelte';
+export { default as ConnectedButtonGroup } from './ConnectedButtonGroup.svelte';
+export { default as ConnectedButtonGroupItem } from './ConnectedButtonGroupItem.svelte';

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

@@ -0,0 +1,125 @@
+import { type VariantProps } from 'tailwind-variants';
+export type ConnectedButtonGroupVariants = VariantProps<typeof connectedButtonGroup>;
+export type ConnectedButtonGroupItemVariants = VariantProps<typeof connectedButtonGroupItem>;
+export declare const connectedButtonGroup: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}>>;
+export declare const connectedButtonGroupItem: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    shape: {
+        round: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    shape: {
+        round: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    shape: {
+        round: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}>>;

package/dist/components/buttons/connected/theme.js

@@ -0,0 +1,38 @@
+import { tv } from 'tailwind-variants';
+export const connectedButtonGroup = tv({
+    slots: {
+        root: 'flex w-full items-stretch gap-0.5'
+    },
+    variants: {
+        orientation: {
+            horizontal: { root: 'flex-row' },
+            vertical: { root: 'h-auto flex-col' }
+        }
+    },
+    defaultVariants: {
+        orientation: 'horizontal'
+    }
+});
+export const connectedButtonGroupItem = tv({
+    slots: {
+        base: 'md-btn-connected layer-container state-layer relative inline-flex min-w-12 flex-1 items-center justify-center gap-2 bg-md-sys-color-surface-container-high px-4 md-sys-typescale-label-large text-md-sys-color-on-surface-variant outline-none disabled:cursor-not-allowed disabled:opacity-38 data-[state=on]:bg-md-sys-color-primary data-[state=on]:text-md-sys-color-on-primary',
+        icon: 'size-[18px] text-[18px]'
+    },
+    variants: {
+        size: {
+            xs: { base: 'h-8 [--cbg-inner:0.25rem]' },
+            sm: { base: 'h-10 [--cbg-inner:0.5rem]' },
+            md: { base: 'h-14 [--cbg-inner:0.5rem]' },
+            lg: { base: 'h-24 [--cbg-inner:1rem]' },
+            xl: { base: 'h-34 [--cbg-inner:1.25rem]' }
+        },
+        shape: {
+            round: { base: '[--cbg-outer:9999px]' },
+            square: { base: '[--cbg-outer:var(--cbg-inner)]' }
+        }
+    },
+    defaultVariants: {
+        size: 'sm',
+        shape: 'round'
+    }
+});

package/dist/components/buttons/connected/types.d.ts

@@ -1,14 +1,33 @@
+import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-export interface ConnectedButtonsProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The buttons to be connected.
-     * @example
-     * <ConnectedButtons>
-     *   <Button>Left</Button>
-     *   <Button>Center</Button>
-     *   <Button>Right</Button>
-     * </ConnectedButtons>
-     */
-    children: Snippet;
-}
+import type { ConnectedButtonGroupVariants } from './theme.js';
+export type ConnectedButtonGroupCtx = {
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape: 'round' | 'square';
+};
+export type ConnectedButtonGroupProps = ConnectedButtonGroupVariants & {
+    /** Whether only one item can be active at a time, or multiple. */
+    type: 'single' | 'multiple';
+    /** Currently selected value(s). @bindable */
+    value?: any;
+    onValueChange?: (value: any) => void;
+    disabled?: boolean;
+    loop?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    /** Outer corner shape of the group. A selected/pressed item collapses to its inner corner size regardless. */
+    shape?: ConnectedButtonGroupCtx['shape'];
+    /** Drives the group's height and inner corner size. Match the size of the buttons this replaces. */
+    size?: ConnectedButtonGroupCtx['size'];
+    children?: Snippet;
+    class?: string;
+};
+export type ConnectedButtonGroupItemProps = {
+    /** The value this item represents. */
+    value: string;
+    /** Text label displayed inside the item. */
+    label?: string;
+    /** Optional icon. Stays visible when selected — selection is shown via shape and color, not an icon swap. */
+    iconProps?: IconProps;
+    disabled?: boolean;
+    class?: string;
+};

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

@@ -1,5 +1,6 @@
 export * from './button-group/index.js';
 export * from './connected/index.js';
+export * from './split-button/index.js';
 export * from './theme.js';
 export * from './types.js';
 export { default as Button } from './Button.svelte';

package/dist/components/buttons/index.js

@@ -2,6 +2,7 @@
 // folder re-exports (export everything from these folders)
 export * from './button-group/index.js';
 export * from './connected/index.js';
+export * from './split-button/index.js';
 // re-export TS/JS modules from this folder
 export * from './theme.js';
 export * from './types.js';

package/dist/components/buttons/split-button/SplitButton.stories.svelte

@@ -0,0 +1,103 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import MenuItem from '../../containers/menu/menu-item/MenuItem.svelte';
+  import SplitButton from './SplitButton.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Buttons/Split Button',
+    component: SplitButton,
+    argTypes: {
+      variant: {
+        control: 'select',
+        options: ['elevated', 'filled', 'tonal', 'outlined', 'text']
+      },
+      color: {
+        control: 'select',
+        options: ['default', 'primary', 'secondary', 'tertiary', 'error']
+      },
+      size: {
+        control: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl']
+      }
+    },
+    args: {
+      variant: 'filled',
+      color: 'default',
+      size: 'md'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <SplitButton variant={args.variant} color={args.color} size={args.size}>
+      {#snippet children()}
+        Reply
+      {/snippet}
+      {#snippet menuChildren()}
+        <MenuItem iconProps={{ name: 'reply_all' }}>Reply all</MenuItem>
+        <MenuItem iconProps={{ name: 'forward' }}>Forward</MenuItem>
+      {/snippet}
+    </SplitButton>
+  {/snippet}
+</Story>
+
+<Story name="WithLeadingIcon" asChild>
+  <div class="p-6">
+    <SplitButton iconProps={{ name: 'send' }}>
+      {#snippet children()}
+        Send
+      {/snippet}
+      {#snippet menuChildren()}
+        <MenuItem iconProps={{ name: 'schedule_send' }}>Send later</MenuItem>
+        <MenuItem iconProps={{ name: 'drafts' }}>Save as draft</MenuItem>
+      {/snippet}
+    </SplitButton>
+  </div>
+</Story>
+
+<Story name="Variants" asChild>
+  <div class="flex flex-wrap items-center gap-6 p-6">
+    {#each ['elevated', 'filled', 'tonal', 'outlined', 'text'] as const as variant (variant)}
+      <SplitButton {variant}>
+        {#snippet children()}
+          Reply
+        {/snippet}
+        {#snippet menuChildren()}
+          <MenuItem iconProps={{ name: 'reply_all' }}>Reply all</MenuItem>
+          <MenuItem iconProps={{ name: 'forward' }}>Forward</MenuItem>
+        {/snippet}
+      </SplitButton>
+    {/each}
+  </div>
+</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-wrap items-center gap-6 p-6">
+    {#each ['xs', 'sm', 'md', 'lg', 'xl'] as const as size (size)}
+      <SplitButton {size}>
+        {#snippet children()}
+          Reply
+        {/snippet}
+        {#snippet menuChildren()}
+          <MenuItem iconProps={{ name: 'reply_all' }}>Reply all</MenuItem>
+          <MenuItem iconProps={{ name: 'forward' }}>Forward</MenuItem>
+        {/snippet}
+      </SplitButton>
+    {/each}
+  </div>
+</Story>
+
+<Story name="Disabled" asChild>
+  <div class="p-6">
+    <SplitButton disabled>
+      {#snippet children()}
+        Reply
+      {/snippet}
+      {#snippet menuChildren()}
+        <MenuItem iconProps={{ name: 'reply_all' }}>Reply all</MenuItem>
+        <MenuItem iconProps={{ name: 'forward' }}>Forward</MenuItem>
+      {/snippet}
+    </SplitButton>
+  </div>
+</Story>

package/dist/components/buttons/split-button/SplitButton.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import SplitButton from './SplitButton.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 SplitButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SplitButton = InstanceType<typeof SplitButton>;
+export default SplitButton;