@noxlovette/material 0.1.0

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

@@ -0,0 +1,60 @@
+import { type VariantProps } from 'tailwind-variants';
+export type PinInputVariants = VariantProps<typeof pinInput>;
+export declare const pinInput: import("tailwind-variants").TVReturnType<{
+    error: {
+        true: {
+            cell: string;
+            label: string;
+            supportingText: string;
+        };
+    };
+    disabled: {
+        true: {
+            cell: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    container: string;
+    cell: string;
+    supportingText: string;
+}, undefined, {
+    error: {
+        true: {
+            cell: string;
+            label: string;
+            supportingText: string;
+        };
+    };
+    disabled: {
+        true: {
+            cell: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    container: string;
+    cell: string;
+    supportingText: string;
+}, import("tailwind-variants").TVReturnType<{
+    error: {
+        true: {
+            cell: string;
+            label: string;
+            supportingText: string;
+        };
+    };
+    disabled: {
+        true: {
+            cell: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    container: string;
+    cell: string;
+    supportingText: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants';
+export const pinInput = tv({
+    slots: {
+        root: 'flex flex-col gap-2',
+        label: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant',
+        container: 'flex items-center gap-2',
+        cell: `
+      relative flex h-14 w-12 items-center justify-center
+      bg-md-sys-color-surface-container-highest rounded-t-xs
+      md-sys-typescale-headline-small text-md-sys-color-on-surface
+      transition-all duration-200
+      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
+      data-[focus]:after:bg-md-sys-color-primary data-[focus]:after:h-[2px]
+      data-[placeholder]:text-md-sys-color-on-surface-variant/38
+    `,
+        supportingText: 'md-sys-typescale-body-small text-md-sys-color-on-surface-variant'
+    },
+    variants: {
+        error: {
+            true: {
+                cell: 'after:bg-md-sys-color-error data-[focus]:after:bg-md-sys-color-error',
+                label: 'text-md-sys-color-error',
+                supportingText: 'text-md-sys-color-error'
+            }
+        },
+        disabled: {
+            true: {
+                cell: 'bg-md-sys-color-on-surface/4 after:bg-md-sys-color-on-surface/12 opacity-60 cursor-not-allowed'
+            }
+        }
+    }
+});

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

@@ -0,0 +1,29 @@
+import type { PinInput as PinInputPrimitive } from 'bits-ui';
+import type { PinInputVariants } from './theme.js';
+export type PinInputProps = Omit<PinInputPrimitive.RootProps, 'maxlength'> & PinInputVariants & {
+    /**
+     * The number of cells in the PIN input.
+     * @default 4
+     */
+    count?: number;
+    /**
+     * The number of cells in the PIN input (alias for count, to match Bits UI).
+     */
+    maxlength?: number;
+    /**
+     * The label for the PIN input.
+     */
+    label?: string;
+    /**
+     * The supporting text (helper text) displayed below the PIN input.
+     */
+    supportingText?: string;
+    /**
+     * Whether the PIN input is in an error state.
+     */
+    error?: boolean;
+    /**
+     * Whether the PIN input is disabled.
+     */
+    disabled?: boolean;
+};

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

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

package/dist/components/forms/radio-group/RadioGroup.svelte

@@ -0,0 +1,61 @@
+<!--
+@component
+Radio buttons let users select one option from a set.
+
+@see https://m3.material.io/components/radio-button/overview
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { RadioGroup } from 'bits-ui';
+  import { Layer } from '../../../utils/index.js';
+  import { radioGroup } from './theme.js';
+  import type { RadioGroupProps } from './types.js';
+
+  let {
+    items,
+    value = $bindable(''),
+    orientation = 'vertical',
+    disabled = false,
+    error = false,
+    class: className,
+    ...restProps
+  }: RadioGroupProps = $props();
+
+  const cls = $derived(radioGroup({ orientation }));
+</script>
+
+<RadioGroup.Root
+  bind:value
+  {disabled}
+  {orientation}
+  class={cls.root({ class: clsx(className) })}
+  {...restProps}
+>
+  {#each items as item (item.value)}
+    {@const isChecked = value === item.value}
+    {@const isDisabled = disabled || !!item.disabled}
+    {@const itemCls = radioGroup({
+      checked: isChecked,
+      disabled: isDisabled,
+      error
+    })}
+
+    <RadioGroup.Item value={item.value} disabled={isDisabled} class={itemCls.item()}>
+      {#snippet children({ checked })}
+        <div class={itemCls.indicator()}>
+          <div class={itemCls.control()}>
+            <Layer />
+          </div>
+          <div class={itemCls.outerRing()}></div>
+          <div class={itemCls.innerDot()}></div>
+        </div>
+        <div class="flex flex-col gap-0.5 text-left">
+          <span class={itemCls.label()}>{item.label}</span>
+          {#if item.supportingText}
+            <span class={itemCls.supporting()}>{item.supportingText}</span>
+          {/if}
+        </div>
+      {/snippet}
+    </RadioGroup.Item>
+  {/each}
+</RadioGroup.Root>

package/dist/components/forms/radio-group/RadioGroup.svelte.d.ts

@@ -0,0 +1,10 @@
+import { RadioGroup } from 'bits-ui';
+import type { RadioGroupProps } from './types.js';
+/**
+ * Radio buttons let users select one option from a set.
+ *
+ * @see https://m3.material.io/components/radio-button/overview
+ */
+declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/forms/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as RadioGroup } from './RadioGroup.svelte';

package/dist/components/forms/radio-group/index.js

@@ -0,0 +1,6 @@
+// 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 RadioGroup } from './RadioGroup.svelte';

package/dist/components/forms/radio-group/theme.d.ts

@@ -0,0 +1,132 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const radioGroup: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+    checked: {
+        true: {
+            control: string;
+            innerDot: string;
+            outerRing: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            item: string;
+            control: string;
+            outerRing: string;
+            innerDot: string;
+            label: string;
+            supporting: string;
+        };
+    };
+    error: {
+        true: {
+            control: string;
+            label: string;
+            supporting: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    indicator: string;
+    control: string;
+    outerRing: string;
+    innerDot: string;
+    label: string;
+    supporting: string;
+}, undefined, {
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+    checked: {
+        true: {
+            control: string;
+            innerDot: string;
+            outerRing: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            item: string;
+            control: string;
+            outerRing: string;
+            innerDot: string;
+            label: string;
+            supporting: string;
+        };
+    };
+    error: {
+        true: {
+            control: string;
+            label: string;
+            supporting: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    indicator: string;
+    control: string;
+    outerRing: string;
+    innerDot: string;
+    label: string;
+    supporting: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+    checked: {
+        true: {
+            control: string;
+            innerDot: string;
+            outerRing: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            item: string;
+            control: string;
+            outerRing: string;
+            innerDot: string;
+            label: string;
+            supporting: string;
+        };
+    };
+    error: {
+        true: {
+            control: string;
+            label: string;
+            supporting: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    indicator: string;
+    control: string;
+    outerRing: string;
+    innerDot: string;
+    label: string;
+    supporting: string;
+}, undefined, unknown, unknown, undefined>>;
+export type RadioGroupVariants = VariantProps<typeof radioGroup>;

package/dist/components/forms/radio-group/theme.js

@@ -0,0 +1,48 @@
+import { tv } from 'tailwind-variants';
+export const radioGroup = tv({
+    slots: {
+        root: 'flex',
+        item: 'inline-flex min-h-10 cursor-pointer select-none items-center gap-3 text-md-sys-color-on-surface',
+        indicator: 'relative inline-flex  size-[20px] shrink-0',
+        control: 'relative layer-container absolute -inset-[10px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full',
+        outerRing: 'absolute inset-0 rounded-full border-2 border-md-sys-color-outline transition-colors',
+        innerDot: 'absolute inset-0 m-auto size-2.5 scale-0 rounded-full bg-md-sys-color-on-primary-container transition-transform duration-[350ms] [transition-timing-function:var(--md-sys-motion-timing-function-fast-spatial)]',
+        label: 'md-sys-typescale-body-large text-md-sys-color-on-surface',
+        supporting: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant'
+    },
+    variants: {
+        orientation: {
+            vertical: { root: 'flex-col gap-1' },
+            horizontal: { root: 'flex-row flex-wrap gap-6' }
+        },
+        checked: {
+            true: {
+                control: 'text-md-sys-color-primary',
+                innerDot: 'scale-100',
+                outerRing: 'border-md-sys-color-primary'
+            },
+            false: {}
+        },
+        disabled: {
+            true: {
+                item: 'cursor-not-allowed',
+                control: 'text-md-sys-color-on-surface/38 before:hidden',
+                outerRing: 'border-md-sys-color-on-surface/38',
+                innerDot: 'bg-md-sys-color-on-surface/38',
+                label: 'text-md-sys-color-on-surface/38',
+                supporting: 'text-md-sys-color-on-surface/38'
+            }
+        },
+        error: {
+            true: {
+                control: 'text-md-sys-color-error',
+                label: 'text-md-sys-color-error',
+                supporting: 'text-md-sys-color-error'
+            }
+        }
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+        checked: false
+    }
+});

package/dist/components/forms/radio-group/types.d.ts

@@ -0,0 +1,24 @@
+import type { RadioGroupRootProps } from 'bits-ui';
+import type { RadioGroupVariants } from './theme.js';
+export interface RadioGroupItem {
+    /** The value submitted to the form and used for `bind:value` matching. */
+    value: string;
+    /** Label displayed beside the indicator. */
+    label: string;
+    /** Optional secondary text below the label. */
+    supportingText?: string;
+    /** Disables this individual item. */
+    disabled?: boolean;
+}
+export type RadioGroupProps = RadioGroupVariants & Omit<RadioGroupRootProps, 'children' | 'orientation'> & {
+    /** The list of options to render. */
+    items: RadioGroupItem[];
+    /** Currently selected value. @bindable */
+    value?: string;
+    /** Layout direction. Defaults to 'vertical'. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Marks all items as error state. */
+    error?: boolean;
+    /** Additional CSS classes for the root element. */
+    class?: string;
+};

package/dist/components/forms/radio-group/types.js

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

package/dist/components/forms/search/Search.svelte

@@ -0,0 +1,52 @@
+<!--
+@component
+Material 3 Search Bar.
+
+Search bars allow users to enter a query to find specific information within an app.
+
+@see https://m3.material.io/components/search/overview
+-->
+<script lang="ts">
+  import { search } from './theme.js';
+  import clsx from 'clsx';
+  import type { SearchProps } from './types.js';
+  import { Icon } from '../../../utils/index.js';
+
+  let {
+    children,
+    placeholder = 'Поиск',
+    value = $bindable(),
+    elementRef = $bindable(),
+    trailingIconProps = { name: 'close' },
+    leadingIconProps = { name: 'search' },
+    class: className,
+    trailingClick = () => {
+      value = '';
+    },
+    ...restProps
+  }: SearchProps = $props();
+
+  const { base, leadingIcon, trailingIcon, input } = $derived(search());
+</script>
+
+<label for="search" class={base({ class: clsx(className) })}>
+  {#if leadingIconProps}
+    <Icon {...leadingIconProps} class={leadingIcon()} />
+  {/if}
+  <input
+    id="search"
+    {...restProps}
+    {placeholder}
+    bind:this={elementRef}
+    bind:value
+    type="text"
+    class={input()}
+    oncancel={() => (value = undefined)}
+  />
+
+  {#if trailingIconProps && value}
+    <button onclick={trailingClick} class="z-10">
+      <Icon {...trailingIconProps} class={trailingIcon()} />
+    </button>
+  {/if}
+</label>

package/dist/components/forms/search/Search.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SearchProps } from './types.js';
+/**
+ * Material 3 Search Bar.
+ *
+ * Search bars allow users to enter a query to find specific information within an app.
+ *
+ * @see https://m3.material.io/components/search/overview
+ */
+declare const Search: import("svelte").Component<SearchProps, {}, "value" | "elementRef">;
+type Search = ReturnType<typeof Search>;
+export default Search;

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

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Search } from './Search.svelte';

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

@@ -0,0 +1,6 @@
+// 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 Search } from './Search.svelte';

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

@@ -0,0 +1,33 @@
+import { type VariantProps } from 'tailwind-variants';
+export type SearchVariants = VariantProps<typeof search>;
+export declare const search: import("tailwind-variants").TVReturnType<{
+    shadow: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    input: string;
+}, undefined, {
+    shadow: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<{
+    shadow: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    input: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+export const search = tv({
+    slots: {
+        base: 'group grow cursor-text focus-inside:ring-3 focus-inside:ring-inset-2 focus-inside:ring-md-sys-color-secondary relative bg-md-sys-color-surface-container-high  rounded-full h-14 state-layer before:rounded-full hover:before:bg-md-sys-color-on-surface/8 items-center flex w-full max-w-[720px] px-4',
+        leadingIcon: 'text-md-sys-color-on-surface text-[24px] size-6 mr-4',
+        trailingIcon: 'text-md-sys-color-on-surface-variant text-[24px] size-6 ml-4',
+        input: ' placeholder:text-md-sys-color-on-surface-variant placeholder:md-sys-typescale-body-large z-50 md-sys-typescale-body-large text-md-sys-color-on-surface outline-none w-full'
+    },
+    variants: {
+        shadow: {
+            true: 'shadow-elevation-3',
+            false: ''
+        }
+    }
+});

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

@@ -0,0 +1,34 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { SearchVariants } from './theme.js';
+/**
+ * Props for the Search component.
+ */
+export interface SearchProps extends SearchVariants, Omit<HTMLInputAttributes, 'size'> {
+    /**
+     * The content of the search bar, typically used for custom layouts.
+     */
+    children?: Snippet;
+    /**
+     * The current value of the search input.
+     */
+    value?: string | null;
+    /**
+     * Reference to the HTML input element.
+     */
+    elementRef?: HTMLInputElement;
+    /**
+     * Callback function when the trailing icon is clicked.
+     * Default behavior clears the search value.
+     */
+    trailingClick?: () => void;
+    /**
+     * Props for the leading icon (typically a search icon).
+     */
+    leadingIconProps?: IconProps;
+    /**
+     * Props for the trailing icon (typically a clear/close icon).
+     */
+    trailingIconProps?: IconProps;
+}

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

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