@noxlovette/material 0.1.0

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

@@ -0,0 +1,141 @@
+<!--
+@component
+Material 3 Select.
+
+Select components allow users to choose one option from a list.
+Powered by bits-ui for accessibility and behavior.
+
+@see https://m3.material.io/components/menus/overview
+-->
+<script lang="ts">
+  import { Select } from 'bits-ui';
+  import { select as selectCls } from './theme.js';
+  import { Icon } from '../../../utils/index.js';
+  import type { SelectProps } from './types.js';
+  import clsx from 'clsx';
+  import { enterExit } from '../../../animation/enterExit.js';
+  import { easeEmphasized } from '../../../animation/easing.js';
+
+  let {
+    value = $bindable(),
+    open = $bindable(false),
+    disabled = false,
+    options = [],
+    placeholder,
+    error = false,
+    supportingText,
+    leadingIconProps,
+    triggerProps,
+    contentProps,
+    portalDisabled = false,
+    class: className,
+    ...rootProps
+  }: SelectProps = $props();
+
+  const cls = $derived(selectCls({ disabled, error }));
+
+  const selectedLabel = $derived.by(() => {
+    for (const option of options as any[]) {
+      if (option.type === 'group') {
+        const found = option.items.find((i: any) => i.value === value);
+        if (found) return found.label;
+      } else if (option.value === value) {
+        return option.label;
+      }
+    }
+    return '';
+  });
+</script>
+
+<div class={clsx('relative w-full', className)}>
+  <div class={cls.base()}>
+    {#if leadingIconProps}
+      <Icon class={cls.leadingIcon()} {...leadingIconProps} />
+    {/if}
+
+    <div class={cls.inputWrapper()}>
+      <Select.Root bind:value={value as never} bind:open {disabled} {...rootProps}>
+        <Select.Trigger class={cls.trigger({ class: clsx(triggerProps?.class) })} {...triggerProps}>
+          <Select.Value {placeholder} class={cls.value()}>
+            {selectedLabel || placeholder}
+          </Select.Value>
+
+          <Icon name="arrow_drop_down" class={cls.dropdownIcon()} />
+        </Select.Trigger>
+
+        <Select.Portal disabled={portalDisabled}>
+          <Select.Content
+            forceMount
+            class={cls.content({ class: clsx('z-[100]', contentProps?.class) })}
+            sideOffset={4}
+            align="start"
+            {...contentProps}
+          >
+            {#snippet child({ wrapperProps, props, open })}
+              <div {...wrapperProps} class={clsx('z-[100]', wrapperProps.class as any)}>
+                {#if open}
+                  <div
+                    {...props}
+                    class={clsx('relative flex flex-col outline-none', props.class as any)}
+                    transition:enterExit={{
+                      duration: 200,
+                      easing: easeEmphasized,
+                      mode: 'scale'
+                    }}
+                    style:width="var(--bits-select-trigger-width)"
+                    style:max-width="min(calc(100vw - 32px), 560px)"
+                  >
+                    <Select.Viewport class="w-full">
+                      {#each options as item, i (i)}
+                        {#if item.type === 'group'}
+                          <Select.Group>
+                            {#if item.heading}
+                              <Select.GroupHeading class={cls.groupLabel()}>
+                                {item.heading}
+                              </Select.GroupHeading>
+                            {/if}
+                            {#each item.items as innerItem, j (j)}
+                              {#if innerItem.type !== 'group'}
+                                <Select.Item {...innerItem} class={cls.item()}>
+                                  {#snippet children({ selected })}
+                                    <span class="flex-1 truncate">{innerItem.label}</span>
+                                    {#if selected}
+                                      <Icon
+                                        aria-hidden="true"
+                                        name="check"
+                                        class="size-5 shrink-0"
+                                      />
+                                    {/if}
+                                  {/snippet}
+                                </Select.Item>
+                              {/if}
+                            {/each}
+                          </Select.Group>
+                        {:else}
+                          <Select.Item {...item} class={cls.item()}>
+                            {#snippet children({ selected })}
+                              <span class="flex-1 truncate">{item.label}</span>
+                              {#if selected}
+                                <Icon aria-hidden="true" name="check" class="size-5 shrink-0" />
+                              {/if}
+                            {/snippet}
+                          </Select.Item>
+                        {/if}
+                      {/each}
+                    </Select.Viewport>
+                  </div>
+                {/if}
+              </div>
+            {/snippet}
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+    </div>
+  </div>
+
+  {#if supportingText}
+    <div class={cls.supportingText()}>
+      <p>{@render supportingText()}</p>
+    </div>
+  {/if}
+</div>

package/dist/components/forms/select/Select.svelte.d.ts

@@ -0,0 +1,13 @@
+import { Select } from 'bits-ui';
+import type { SelectProps } from './types.js';
+/**
+ * Material 3 Select.
+ *
+ * Select components allow users to choose one option from a list.
+ * Powered by bits-ui for accessibility and behavior.
+ *
+ * @see https://m3.material.io/components/menus/overview
+ */
+declare const Select: import("svelte").Component<SelectProps, {}, "value" | "open">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/forms/select/SelectGroup.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Select } from 'bits-ui';
+  import { select as selectCls } from './theme.js';
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    class: className
+  }: {
+    children: Snippet;
+    class?: string;
+  } = $props();
+
+  const cls = selectCls();
+</script>
+
+<Select.Group class={className}>
+  {@render children()}
+</Select.Group>

package/dist/components/forms/select/SelectGroup.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    class?: string;
+};
+declare const SelectGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectGroup = ReturnType<typeof SelectGroup>;
+export default SelectGroup;

package/dist/components/forms/select/SelectItem.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Select } from 'bits-ui';
+  import { select as selectCls } from './theme.js';
+  import { Icon } from '../../../utils/index.js';
+  import type { Snippet } from 'svelte';
+
+  let {
+    value,
+    label,
+    disabled = false,
+    class: className,
+    children
+  }: {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet<[{ selected: boolean; highlighted: boolean }]>;
+  } = $props();
+
+  const cls = selectCls();
+</script>
+
+<Select.Item {value} label={label ?? value} {disabled} class={cls.item({ class: className })}>
+  {#snippet children({ selected, highlighted })}
+    {#if children}
+      {@render children({ selected, highlighted })}
+    {:else}
+      <span class="flex-1 truncate">{label ?? value}</span>
+      {#if selected}
+        <Icon name="check" class="size-5 shrink-0" />
+      {/if}
+    {/if}
+  {/snippet}
+</Select.Item>

package/dist/components/forms/select/SelectItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet<[{
+        selected: boolean;
+        highlighted: boolean;
+    }]>;
+};
+declare const SelectItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectItem = ReturnType<typeof SelectItem>;
+export default SelectItem;

package/dist/components/forms/select/SelectLabel.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Select } from 'bits-ui';
+  import { select as selectCls } from './theme.js';
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    class: className
+  }: {
+    children: Snippet;
+    class?: string;
+  } = $props();
+
+  const cls = selectCls();
+</script>
+
+<Select.GroupHeading class={cls.groupLabel({ class: className })}>
+  {@render children()}
+</Select.GroupHeading>

package/dist/components/forms/select/SelectLabel.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    class?: string;
+};
+declare const SelectLabel: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectLabel = ReturnType<typeof SelectLabel>;
+export default SelectLabel;

package/dist/components/forms/select/SelectSeparator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { select as selectCls } from './theme.js';
+
+  let {
+    class: className
+  }: {
+    class?: string;
+  } = $props();
+
+  const cls = selectCls();
+</script>
+
+<div class={cls.separator({ class: className })} role="separator"></div>

package/dist/components/forms/select/SelectSeparator.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const SelectSeparator: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectSeparator = ReturnType<typeof SelectSeparator>;
+export default SelectSeparator;

package/dist/components/forms/select/index.d.ts

@@ -0,0 +1,7 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Select } from './Select.svelte';
+export { default as SelectGroup } from './SelectGroup.svelte';
+export { default as SelectItem } from './SelectItem.svelte';
+export { default as SelectLabel } from './SelectLabel.svelte';
+export { default as SelectSeparator } from './SelectSeparator.svelte';

package/dist/components/forms/select/index.js

@@ -0,0 +1,10 @@
+// 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 Select } from './Select.svelte';
+export { default as SelectGroup } from './SelectGroup.svelte';
+export { default as SelectItem } from './SelectItem.svelte';
+export { default as SelectLabel } from './SelectLabel.svelte';
+export { default as SelectSeparator } from './SelectSeparator.svelte';

package/dist/components/forms/select/theme.d.ts

@@ -0,0 +1,84 @@
+import { type VariantProps } from 'tailwind-variants';
+export type SelectVariants = VariantProps<typeof select>;
+export declare const select: import("tailwind-variants").TVReturnType<{
+    error: {
+        true: {
+            base: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+    trigger: string;
+    inputWrapper: string;
+    value: string;
+    leadingIcon: string;
+    dropdownIcon: string;
+    content: string;
+    item: string;
+    groupLabel: string;
+    separator: string;
+    supportingText: string;
+}, undefined, {
+    error: {
+        true: {
+            base: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+    trigger: string;
+    inputWrapper: string;
+    value: string;
+    leadingIcon: string;
+    dropdownIcon: string;
+    content: string;
+    item: string;
+    groupLabel: string;
+    separator: string;
+    supportingText: string;
+}, import("tailwind-variants").TVReturnType<{
+    error: {
+        true: {
+            base: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+    trigger: string;
+    inputWrapper: string;
+    value: string;
+    leadingIcon: string;
+    dropdownIcon: string;
+    content: string;
+    item: string;
+    groupLabel: string;
+    separator: string;
+    supportingText: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/forms/select/theme.js

@@ -0,0 +1,87 @@
+import { tv } from 'tailwind-variants';
+export const select = tv({
+    slots: {
+        root: 'relative w-full',
+        base: `
+      group w-full h-14 px-0 bg-md-sys-color-surface-container-highest
+      rounded-t-xs state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8 relative flex items-center
+      after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-md-sys-color-on-surface-variant
+      after:transition-[height,background-color] after:duration-200
+      hover:after:bg-md-sys-color-on-surface
+      data-[state=open]:after:bg-md-sys-color-primary
+      data-[state=open]:after:h-[2px]
+      disabled:bg-md-sys-color-on-surface/4
+      disabled:after:bg-md-sys-color-on-surface/12
+    `,
+        trigger: `
+      peer w-full h-full flex items-center justify-between bg-transparent outline-none
+      cursor-pointer
+    `,
+        inputWrapper: `
+      relative flex-1 h-full px-4 flex items-center
+    `,
+        value: `
+      w-full bg-transparent outline-none
+      md-sys-typescale-body-large text-md-sys-color-on-surface
+      disabled:text-md-sys-color-on-surface/38
+      disabled:cursor-not-allowed
+      truncate text-left
+    `,
+        leadingIcon: `
+      text-md-sys-color-on-surface-variant size-6
+      group-data-[state=open]:text-md-sys-color-primary
+      group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
+    `,
+        dropdownIcon: `
+      mr-3 text-md-sys-color-on-surface-variant size-6
+      group-data-[state=open]:text-md-sys-color-primary
+      group-data-[invalid]:text-md-sys-color-error z-20 text-[24px]
+      transition-transform duration-200
+      group-data-[state=open]:rotate-180
+    `,
+        content: `
+      z-[100] min-w-[var(--bits-select-trigger-width)] max-h-96 overflow-y-auto
+      rounded-xl bg-md-sys-color-surface-container-high
+      shadow-elevation-3 py-2 outline-none
+    `,
+        item: `
+      relative flex w-full cursor-pointer select-none
+      px-4 py-3 outline-none
+      md-sys-typescale-body-large text-md-sys-color-on-surface
+      hover:bg-md-sys-color-on-surface/8
+      focus:bg-md-sys-color-on-surface/8
+      data-[selected]:bg-md-sys-color-secondary-container
+      data-[selected]:text-md-sys-color-on-secondary-container
+      data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50
+      transition-colors duration-150 first:rounded-t-xl last:rounded-b-xl
+    `,
+        groupLabel: `
+      px-4 py-2 md-sys-typescale-label-medium
+      text-md-sys-color-primary
+    `,
+        separator: `
+      -mx-1 my-1 h-px bg-md-sys-color-outline-variant
+    `,
+        supportingText: `
+      px-4 pt-1 flex justify-between
+      md-sys-typescale-body-small
+      text-md-sys-color-on-surface-variant
+      group-data-[invalid]:text-md-sys-color-error
+    `
+    },
+    variants: {
+        error: {
+            true: {
+                base: 'after:bg-md-sys-color-error data-[state=open]:after:bg-md-sys-color-error',
+                supportingText: 'text-md-sys-color-error',
+                leadingIcon: 'text-md-sys-color-error',
+                trailingIcon: 'text-md-sys-color-error'
+            }
+        },
+        disabled: {
+            true: {
+                root: 'cursor-not-allowed opacity-60'
+            }
+        }
+    }
+});

package/dist/components/forms/select/types.d.ts

@@ -0,0 +1,63 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { Select, WithoutChildren } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { SelectVariants } from './theme.js';
+/**
+ * Represents an option or group in the Select component.
+ *
+ */
+export type SelectOption = ({
+    type?: 'item';
+} & Select.ItemProps) | {
+    type: 'group';
+    /**
+     * If present, the group item will be heading
+     */
+    heading?: string;
+    items: SelectOption[];
+};
+/**
+ * Props for the Select component.
+ */
+export type SelectProps = SelectVariants & WithoutChildren<Select.RootProps> & {
+    /**
+     * Whether the select is open
+     */
+    open?: boolean;
+    /**
+     * Array of options to display in the select.
+     */
+    options?: SelectOption[];
+    /**
+     * The placeholder text displayed when no option is selected.
+     */
+    placeholder: string;
+    /**
+     * Supporting text shown below the select.
+     */
+    supportingText?: Snippet;
+    /**
+     * Additional props for the trigger element.
+     */
+    triggerProps?: Select.TriggerProps;
+    /**
+     * Additional props for the content element.
+     */
+    contentProps?: Select.ContentProps;
+    /**
+     * Whether the select is in an error state.
+     */
+    error?: boolean;
+    /**
+     * Whether to disable the portal (useful if the select is inside a form or dialogue that handles its own stacking).
+     */
+    portalDisabled?: boolean;
+    /**
+     * Props for the leading icon.
+     */
+    leadingIconProps?: IconProps;
+    /**
+     * Additional CSS classes to apply to the root wrapper.
+     */
+    class?: string;
+};

package/dist/components/forms/select/types.js

@@ -0,0 +1 @@
+export {};