npm - @noxlovette/material - Versions diffs - 0.2.1 → 0.3.0 - Mend

@noxlovette/material 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/dist/components/containers/popover/Popover.stories.svelte ADDED Viewed

@@ -0,0 +1,65 @@
+<!--
+  Popover owns its own open/close state internally (bits-ui Popover.Root bind:open, defaulting to
+  closed) and requires a `trigger` snippet — clicking that trigger toggles it, so no external open
+  state is needed here (same as Menu).
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Popover from './Popover.svelte';
+  import Button from '../../buttons/Button.svelte';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import { Body } from '../../../index.js';
+  const { Story } = defineMeta({
+    title: 'Containers/Popover',
+    component: Popover,
+    argTypes: {
+      title: { control: 'text' },
+      showClose: { control: 'boolean' },
+      side: { control: 'select', options: ['top', 'right', 'bottom', 'left'] },
+      align: { control: 'select', options: ['start', 'center', 'end'] },
+      sideOffset: { control: 'number' }
+    },
+    args: {
+      title: 'Storage',
+      showClose: true,
+      side: 'bottom',
+      align: 'start',
+      sideOffset: 8
+    }
+  });
+</script>
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="p-24">
+      <Popover
+        title={args.title}
+        showClose={args.showClose}
+        side={args.side}
+        align={args.align}
+        sideOffset={args.sideOffset}
+      >
+        {#snippet trigger()}
+          <Button variant="outlined">Show info</Button>
+        {/snippet}
+        <Body class="text-md-sys-color-on-surface-variant">
+          75% of your storage has been used. Consider upgrading your plan.
+        </Body>
+      </Popover>
+    </div>
+  {/snippet}
+</Story>
+<Story name="Icon Trigger, No Title" asChild>
+  <div class="p-24">
+    <Popover showClose={false}>
+      {#snippet trigger()}
+        <ButtonIcon iconProps={{ name: 'info' }} variant="text" />
+      {/snippet}
+      <Body class="text-md-sys-color-on-surface-variant">
+        A minimal popover with no header — just an icon trigger and body text.
+      </Body>
+    </Popover>
+  </div>
+</Story>

package/dist/components/containers/popover/Popover.stories.svelte.d.ts ADDED Viewed

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

package/dist/components/containers/side-sheet/SideSheet.stories.svelte ADDED Viewed

@@ -0,0 +1,54 @@
+<!--
+  SideSheet is a content template only — a headline row with a close button, followed by
+  `children`. It renders no backdrop, no fixed/absolute positioning, and no open/close
+  transition of its own (unlike Dialogue and BottomSheet, which own their overlay). Consumers
+  are expected to place it inside their own positioned container (e.g. a fixed aside, or a
+  SplitPane right pane) — the wrapping <div> below is that story-only host, not part of the
+  component.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SideSheet from './SideSheet.svelte';
+  import Button from '../../buttons/Button.svelte';
+  import { Body } from '../../../index.js';
+  const { Story } = defineMeta({
+    title: 'Containers/Side Sheet',
+    component: SideSheet,
+    argTypes: {
+      headline: { control: 'text' }
+    },
+    args: {
+      headline: 'Details'
+    }
+  });
+</script>
+<script lang="ts">
+  let playgroundOpen = $state(true);
+</script>
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="bg-md-sys-color-surface relative h-[420px] overflow-hidden">
+      {#if playgroundOpen}
+        <div
+          class="bg-md-sys-color-surface-container-low shadow-elevation-1 absolute top-0 right-0 h-full w-80"
+        >
+          <SideSheet headline={args.headline} close={() => (playgroundOpen = false)}>
+            <div class="flex flex-col gap-3 px-6 pb-6">
+              <Body class="text-md-sys-color-on-surface-variant">
+                Supplementary content and actions, anchored to the edge of the screen while the main
+                content stays visible.
+              </Body>
+            </div>
+          </SideSheet>
+        </div>
+      {:else}
+        <div class="p-6">
+          <Button onclick={() => (playgroundOpen = true)}>Show side sheet</Button>
+        </div>
+      {/if}
+    </div>
+  {/snippet}
+</Story>

package/dist/components/containers/side-sheet/SideSheet.stories.svelte.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import SideSheet from './SideSheet.svelte';
+declare const SideSheet: import("svelte").Component<Record<string, never>, {}, "">;
+type SideSheet = ReturnType<typeof SideSheet>;
+export default SideSheet;

package/dist/components/forms/checkbox/Checkbox.stories.svelte ADDED Viewed

@@ -0,0 +1,42 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Checkbox from './Checkbox.svelte';
+  const { Story } = defineMeta({
+    title: 'Forms/Checkbox',
+    component: Checkbox,
+    argTypes: {
+      labelText: { control: 'text' },
+      checked: { control: 'boolean' },
+      indeterminate: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+      error: { control: 'boolean' }
+    },
+    args: {
+      labelText: 'Accept terms and conditions',
+      checked: false,
+      indeterminate: false,
+      disabled: false,
+      error: false
+    }
+  });
+</script>
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="p-6">
+      <Checkbox {...args} />
+    </div>
+  {/snippet}
+</Story>
+<Story name="States" asChild>
+  <div class="flex flex-col gap-4 p-6">
+    <Checkbox labelText="Unchecked" checked={false} />
+    <Checkbox labelText="Checked" checked={true} />
+    <Checkbox labelText="Indeterminate" indeterminate={true} />
+    <Checkbox labelText="Error" checked={true} error />
+    <Checkbox labelText="Disabled unchecked" disabled />
+    <Checkbox labelText="Disabled checked" checked disabled />
+  </div>
+</Story>

package/dist/components/forms/checkbox/Checkbox.stories.svelte.d.ts ADDED Viewed

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

package/dist/components/forms/search/Search.stories.svelte ADDED Viewed

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Search from './Search.svelte';
+  const { Story } = defineMeta({
+    title: 'Forms/Search',
+    component: Search,
+    argTypes: {
+      placeholder: { control: 'text' },
+      value: { control: 'text' }
+    },
+    args: {
+      placeholder: 'Search',
+      value: ''
+    }
+  });
+</script>
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="max-w-md p-6">
+      <Search {...args} />
+    </div>
+  {/snippet}
+</Story>
+<Story name="With Value" asChild>
+  <div class="max-w-md p-6">
+    <Search value="Material Design" />
+  </div>
+</Story>
+<Story name="Custom Icons" asChild>
+  <div class="max-w-md p-6">
+    <Search
+      value="query"
+      leadingIconProps={{ name: 'search' }}
+      trailingIconProps={{ name: 'mic' }}
+    />
+  </div>
+</Story>

package/dist/components/forms/search/Search.stories.svelte.d.ts ADDED Viewed

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

package/dist/components/forms/select/Select.stories.svelte ADDED Viewed

@@ -0,0 +1,89 @@
+<!--
+  NOTE: Select.svelte renders its Content entirely from the `options` prop — it does not
+  expose a `children` snippet, so SelectItem/SelectGroup/SelectLabel/SelectSeparator cannot
+  be composed as children of <Select> (unlike Navbar+NavbarItem). Those four are themed
+  primitives for consumers who build a custom dropdown directly against bits-ui's
+  Select.Root instead of this component. The Playground below uses the actual `options`
+  API, which is how this component is meant to be driven.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Select from './Select.svelte';
+  import type { SelectOption } from './types.js';
+  const fruitOptions: SelectOption[] = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date', disabled: true }
+  ];
+  const groupedOptions: SelectOption[] = [
+    {
+      type: 'group',
+      heading: 'Citrus',
+      items: [
+        { value: 'orange', label: 'Orange' },
+        { value: 'lemon', label: 'Lemon' }
+      ]
+    },
+    {
+      type: 'group',
+      heading: 'Berries',
+      items: [
+        { value: 'strawberry', label: 'Strawberry' },
+        { value: 'blueberry', label: 'Blueberry' }
+      ]
+    }
+  ];
+  const { Story } = defineMeta({
+    title: 'Forms/Select',
+    component: Select,
+    argTypes: {
+      placeholder: { control: 'text' },
+      disabled: { control: 'boolean' },
+      error: { control: 'boolean' }
+    },
+    args: {
+      type: 'single',
+      placeholder: 'Choose a fruit',
+      disabled: false,
+      error: false,
+      options: fruitOptions
+    }
+  });
+</script>
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="max-w-sm p-6">
+      <Select {...args} />
+    </div>
+  {/snippet}
+</Story>
+<Story name="Grouped Options" asChild>
+  <div class="max-w-sm p-6">
+    <Select type="single" placeholder="Choose a fruit" options={groupedOptions} />
+  </div>
+</Story>
+<Story name="With Leading Icon" asChild>
+  <div class="max-w-sm p-6">
+    <Select
+      type="single"
+      placeholder="Choose a fruit"
+      options={fruitOptions}
+      leadingIconProps={{ name: 'nutrition' }}
+    />
+  </div>
+</Story>
+<Story name="States" asChild>
+  <div class="flex max-w-sm flex-col gap-6 p-6">
+    <Select type="single" placeholder="Default" options={fruitOptions} />
+    <Select type="single" placeholder="Error" options={fruitOptions} error value="apple" />
+    <Select type="single" placeholder="Disabled" options={fruitOptions} disabled />
+  </div>
+</Story>

package/dist/components/forms/select/Select.stories.svelte.d.ts ADDED Viewed

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

package/dist/components/forms/select/Select.svelte CHANGED Viewed

@@ -47,7 +47,7 @@ Powered by bits-ui for accessibility and behavior.
   });
 </script>
-<div class={clsx('relative w-full', className)}>
+<div class={cls.root({ class: className })}>
   <div class={cls.base()}>
     {#if leadingIconProps}
       <Icon class={cls.leadingIcon()} {...leadingIconProps} />

package/dist/components/forms/slider/Slider.stories.svelte ADDED Viewed

@@ -0,0 +1,76 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Slider from './Slider.svelte';
+  const { Story } = defineMeta({
+    title: 'Forms/Slider',
+    component: Slider,
+    argTypes: {
+      value: { control: 'number' },
+      min: { control: 'number' },
+      max: { control: 'number' },
+      step: { control: 'number' },
+      disabled: { control: 'boolean' },
+      showValue: { control: 'boolean' },
+      size: {
+        control: 'select',
+        options: ['xs', 's', 'm', 'l', 'xl']
+      },
+      stops: { control: 'boolean' },
+      endStops: { control: 'boolean' },
+      vertical: { control: 'boolean' }
+    },
+    args: {
+      value: 40,
+      min: 0,
+      max: 100,
+      disabled: false,
+      showValue: true,
+      size: 'xs',
+      stops: false,
+      endStops: true,
+      vertical: false
+    }
+  });
+</script>
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="max-w-sm p-10">
+      <Slider {...args} />
+    </div>
+  {/snippet}
+</Story>
+<Story name="Sizes" asChild>
+  <div class="flex max-w-sm flex-col gap-8 p-10">
+    <Slider value={30} size="xs" />
+    <Slider value={30} size="s" />
+    <Slider value={30} size="m" />
+    <Slider value={30} size="l" />
+    <Slider value={30} size="xl" />
+  </div>
+</Story>
+<Story name="With Icons" asChild>
+  <div class="max-w-sm p-10">
+    <Slider
+      value={60}
+      size="m"
+      leadingIconProps={{ name: 'volume_down' }}
+      trailingIconProps={{ name: 'volume_up' }}
+    />
+  </div>
+</Story>
+<Story name="Discrete With Stops" asChild>
+  <div class="max-w-sm p-10">
+    <Slider value={40} step={20} stops />
+  </div>
+</Story>
+<Story name="Disabled" asChild>
+  <div class="max-w-sm p-10">
+    <Slider value={40} disabled />
+  </div>
+</Story>

package/dist/components/forms/slider/Slider.stories.svelte.d.ts ADDED Viewed

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

package/dist/components/forms/switch/Switch.stories.svelte ADDED Viewed

@@ -0,0 +1,47 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Switch from './Switch.svelte';
+  const { Story } = defineMeta({
+    title: 'Forms/Switch',
+    component: Switch,
+    argTypes: {
+      checked: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+      icons: {
+        control: 'select',
+        options: ['checked', 'both', 'none']
+      }
+    },
+    args: {
+      checked: false,
+      disabled: false,
+      icons: 'checked'
+    }
+  });
+</script>
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="p-6">
+      <Switch {...args} />
+    </div>
+  {/snippet}
+</Story>
+<Story name="Icon Modes" asChild>
+  <div class="flex flex-col gap-4 p-6">
+    <Switch checked icons="checked" />
+    <Switch checked icons="both" />
+    <Switch checked icons="none" />
+  </div>
+</Story>
+<Story name="States" asChild>
+  <div class="flex flex-col gap-4 p-6">
+    <Switch checked={false} />
+    <Switch checked={true} />
+    <Switch checked={false} disabled />
+    <Switch checked={true} disabled />
+  </div>
+</Story>

package/dist/components/forms/switch/Switch.stories.svelte.d.ts ADDED Viewed

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

package/dist/components/forms/textfield/Textfield.stories.svelte ADDED Viewed

@@ -0,0 +1,74 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Textfield from './Textfield.svelte';
+  const { Story } = defineMeta({
+    title: 'Forms/Textfield',
+    component: Textfield,
+    argTypes: {
+      label: { control: 'text' },
+      placeholder: { control: 'text' },
+      disabled: { control: 'boolean' },
+      error: { control: 'boolean' },
+      required: { control: 'boolean' },
+      characterLimit: { control: 'number' }
+    },
+    args: {
+      label: 'Label',
+      disabled: false,
+      error: false,
+      required: false
+    }
+  });
+</script>
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="max-w-sm p-6">
+      <Textfield {...args} />
+    </div>
+  {/snippet}
+</Story>
+<Story name="With Supporting Text" asChild>
+  <div class="max-w-sm p-6">
+    <Textfield label="Email">
+      {#snippet supportingText()}
+        We'll never share your email.
+      {/snippet}
+    </Textfield>
+  </div>
+</Story>
+<Story name="With Icons" asChild>
+  <div class="max-w-sm p-6">
+    <Textfield
+      label="Search"
+      leadingIconProps={{ name: 'search' }}
+      trailingIconProps={{ name: 'close' }}
+    />
+  </div>
+</Story>
+<Story name="Character Limit" asChild>
+  <div class="max-w-sm p-6">
+    <Textfield label="Bio" characterLimit={80} value="">
+      {#snippet supportingText()}
+        Keep it short.
+      {/snippet}
+    </Textfield>
+  </div>
+</Story>
+<Story name="States" asChild>
+  <div class="flex max-w-sm flex-col gap-6 p-6">
+    <Textfield label="Default" />
+    <Textfield label="Required" required />
+    <Textfield label="Error" error value="Invalid value">
+      {#snippet supportingText()}
+        This field is required.
+      {/snippet}
+    </Textfield>
+    <Textfield label="Disabled" disabled value="Can't edit" />
+  </div>
+</Story>

package/dist/components/forms/textfield/Textfield.stories.svelte.d.ts ADDED Viewed

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

package/dist/components/misc/Avatar.svelte CHANGED Viewed

@@ -14,6 +14,7 @@ Avatars can be used to represent people or objects.
     src,
     alt = 'User avatar',
     seed = 'ogonek',
+    dicebearStyle = 'shapes',
     size = 'lg',
     loadingStatus = $bindable('loading'),
     class: className,
@@ -22,7 +23,6 @@ Avatars can be used to represent people or objects.
   }: AvatarProps = $props();
   const materialPalette = ['e8f0fe', 'e8f5e9', 'fff7e6', 'fde7ec', 'e3f2fd'];
-  const dicebearBaseUrl = 'https://api.dicebear.com/9.x/shapes/svg';
   const sizeMap = {
     sm: 48,
     md: 72,
@@ -38,7 +38,7 @@ Avatars can be used to represent people or objects.
       backgroundColor: materialPalette.join(',')
     });
-    return `${dicebearBaseUrl}?${params.toString()}`;
+    return `https://api.dicebear.com/9.x/${dicebearStyle}/svg?${params.toString()}`;
   });
   const { root, image, fallback, button } = $derived(avatar({ size }));