@urbicon-ui/blocks 6.1.4

package/dist/primitives/Select/select.variants.d.ts

@@ -0,0 +1,313 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const selectVariants: (props?: import("../../utils/variants").TVProps<{
+    tier: {
+        modify: {
+            trigger: string;
+        };
+        commit: {
+            trigger: string;
+        };
+    };
+    variant: {
+        outlined: {
+            trigger: string;
+        };
+        filled: {
+            trigger: string;
+        };
+        ghost: {
+            trigger: string;
+        };
+        underline: {
+            trigger: string;
+        };
+    };
+    size: {
+        sm: {
+            trigger: string;
+            chevron: string;
+            clear: string;
+            option: string;
+            optionCheck: string;
+            optionCheckbox: string;
+        };
+        md: {
+            trigger: string;
+            chevron: string;
+            clear: string;
+            option: string;
+            optionCheck: string;
+            optionCheckbox: string;
+        };
+        lg: {
+            trigger: string;
+            chevron: string;
+            clear: string;
+            option: string;
+            optionCheck: string;
+            optionCheckbox: string;
+        };
+    };
+    open: {
+        true: {
+            chevron: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            trigger: string;
+            message: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    selected: {
+        true: {
+            optionCheck: string;
+            optionCheckbox: string;
+        };
+    };
+    messageType: {
+        error: {
+            message: string;
+        };
+        helper: {
+            message: string;
+        };
+    };
+}> | undefined) => {
+    wrapper: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    base: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    trigger: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    triggerText: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    placeholder: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    chevron: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    clear: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    listbox: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    option: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    optionLabel: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    optionCheck: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    optionCheckbox: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    group: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    groupLabel: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    label: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    message: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        selected?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type SelectVariants = VariantProps<typeof selectVariants>;

package/dist/primitives/Select/select.variants.js

@@ -0,0 +1,155 @@
+import { tv } from '../../utils/variants';
+export const selectVariants = tv({
+    slots: {
+        wrapper: ['flex flex-col w-full gap-1.5'],
+        base: ['relative w-full'],
+        trigger: [
+            // Radius driven by `tier` axis below.
+            'flex w-full items-center justify-between border',
+            'bg-surface-base text-text-primary cursor-pointer select-none',
+            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            'hover:border-border-default',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary'
+        ],
+        triggerText: ['truncate text-left flex-1'],
+        placeholder: ['text-text-tertiary truncate flex-1'],
+        chevron: [
+            'shrink-0 text-text-tertiary',
+            'transition-transform duration-[var(--blocks-duration-fast)]'
+        ],
+        clear: [
+            'absolute top-1/2 -translate-y-1/2 flex items-center justify-center rounded-modify',
+            'text-text-tertiary hover:text-text-primary cursor-pointer',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+            'transition-colors duration-[var(--blocks-duration-fast)]'
+        ],
+        // `position`, `width`, `overflow-y` are set inline in Select.svelte
+        // so the native `popover="manual"` top-layer rendering works
+        // correctly and the UA's `overflow: auto` doesn't render a duplicate
+        // scrollbar. Width is sized by Floating UI's `size` middleware.
+        // tier: contain — floating dropdown panel.
+        listbox: [
+            'rounded-contain border',
+            'bg-surface-elevated border-border-subtle shadow-[var(--blocks-shadow-md)]',
+            'max-h-60 p-1 space-y-0.5'
+        ],
+        option: [
+            'flex w-full items-center gap-2 rounded-modify px-3 cursor-pointer select-none',
+            'text-text-primary',
+            'transition-colors duration-[var(--blocks-duration-fast)]',
+            'hover:bg-surface-hover focus-visible:outline-none focus-visible:bg-surface-hover'
+        ],
+        optionLabel: ['truncate text-left flex-1'],
+        optionCheck: [
+            'shrink-0 text-primary opacity-0 transition-opacity duration-[var(--blocks-duration-fast)]'
+        ],
+        // Multi-select indicator. Leading position (before the label) mirrors the
+        // native `<input type=checkbox>` placement so multi-select rows read like a
+        // checkbox list. The `[&_svg]` cascade lets the inner check icon fade in.
+        optionCheckbox: [
+            'shrink-0 inline-flex items-center justify-center rounded-modify border border-border-default',
+            'bg-surface-base transition-colors duration-[var(--blocks-duration-fast)]',
+            '[&_svg]:opacity-0 [&_svg]:transition-opacity [&_svg]:duration-[var(--blocks-duration-fast)]'
+        ],
+        group: [],
+        groupLabel: ['px-3 py-1.5 text-xs font-medium text-text-tertiary uppercase tracking-wider'],
+        label: ['block font-medium text-text-secondary text-sm'],
+        message: ['text-xs']
+    },
+    variants: {
+        // 3-tier semantic radius for the Select trigger. Default `modify`.
+        // Options inside the listbox keep their own r-interactive — switching
+        // them to pill would not improve readability and is intentionally not
+        // part of the tier axis.
+        tier: {
+            modify: { trigger: 'rounded-modify' },
+            commit: { trigger: 'rounded-commit' }
+        },
+        variant: {
+            outlined: { trigger: 'border-border-subtle' },
+            filled: {
+                trigger: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-visible:bg-surface-base'
+            },
+            ghost: {
+                trigger: 'bg-transparent border-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle'
+            },
+            underline: {
+                trigger: 'bg-transparent border-0 border-b-2 border-border-subtle rounded-none focus-visible:ring-0'
+            }
+        },
+        size: {
+            sm: {
+                trigger: 'h-8 pl-3 pr-8 text-sm gap-2',
+                chevron: 'w-3.5 h-3.5',
+                clear: 'right-2 p-0.5 [&_svg]:w-3.5 [&_svg]:h-3.5',
+                option: 'py-1.5 text-sm min-h-[2rem]',
+                optionCheck: 'w-3.5 h-3.5',
+                optionCheckbox: 'w-3.5 h-3.5 [&_svg]:w-2.5 [&_svg]:h-2.5'
+            },
+            md: {
+                trigger: 'h-10 pl-4 pr-10 text-base gap-2',
+                chevron: 'w-4 h-4',
+                clear: 'right-3 p-0.5 [&_svg]:w-4 [&_svg]:h-4',
+                option: 'py-2 text-sm min-h-[2.5rem]',
+                optionCheck: 'w-4 h-4',
+                optionCheckbox: 'w-4 h-4 [&_svg]:w-3 [&_svg]:h-3'
+            },
+            lg: {
+                trigger: 'h-12 pl-5 pr-12 text-lg gap-3',
+                chevron: 'w-5 h-5',
+                clear: 'right-4 p-0.5 [&_svg]:w-5 [&_svg]:h-5',
+                option: 'py-2.5 text-base min-h-[3rem]',
+                optionCheck: 'w-5 h-5',
+                optionCheckbox: 'w-[18px] h-[18px] [&_svg]:w-3.5 [&_svg]:h-3.5'
+            }
+        },
+        open: {
+            true: { chevron: 'rotate-180' }
+        },
+        disabled: {
+            true: {
+                trigger: 'opacity-50 cursor-not-allowed pointer-events-none bg-surface-subtle',
+                label: 'text-text-disabled'
+            }
+        },
+        error: {
+            true: {
+                trigger: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20',
+                message: 'text-danger'
+            }
+        },
+        required: {
+            true: {
+                label: "after:content-['*'] after:ml-1 after:text-danger"
+            }
+        },
+        selected: {
+            true: {
+                optionCheck: 'opacity-100',
+                optionCheckbox: 'border-primary bg-primary text-text-on-primary [&_svg]:opacity-100'
+            }
+        },
+        messageType: {
+            error: { message: 'text-danger' },
+            helper: { message: 'text-text-tertiary' }
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'ghost',
+            error: false,
+            class: { trigger: 'border-transparent' }
+        }
+    ],
+    defaultVariants: {
+        tier: 'modify',
+        variant: 'outlined',
+        size: 'md',
+        open: false,
+        disabled: false,
+        error: false,
+        required: false,
+        selected: false,
+        messageType: 'helper'
+    }
+});

package/dist/primitives/Separator/Separator.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { separatorVariants } from './separator.variants';
+  import type { SeparatorProps } from './index';
+
+  let {
+    orientation = 'horizontal',
+    size = 'md',
+    decorative = true,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: SeparatorProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.Separator?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'Separator', preset),
+      slotClassesProp
+    )
+  );
+
+  const classes = $derived(
+    [unstyled ? '' : separatorVariants({ orientation, size }), slotClasses?.base, className]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div
+  class={classes}
+  role={decorative ? 'none' : 'separator'}
+  aria-orientation={decorative ? undefined : orientation}
+  {...restProps}
+></div>

package/dist/primitives/Separator/Separator.svelte.d.ts

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

package/dist/primitives/Separator/index.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SeparatorVariants } from './separator.variants';
+/**
+ * @description Visual divider for separating content sections. Supports horizontal and
+ * vertical orientations with proper ARIA semantics.
+ *
+ * @tag layout
+ *
+ * @example
+ * ```svelte
+ * <Separator />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <div class="flex items-center gap-4">
+ *   <span>Item A</span>
+ *   <Separator orientation="vertical" size="sm" />
+ *   <span>Item B</span>
+ * </div>
+ * ```
+ */
+export interface SeparatorProps extends SeparatorVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> {
+    /** Horizontal renders a full-width line; vertical renders a full-height line (e.g. inside flex rows). */
+    orientation?: 'horizontal' | 'vertical';
+    /** Controls margin around the line — sm (0.5 rem), md (1 rem), lg (1.5 rem). */
+    size?: 'sm' | 'md' | 'lg';
+    /** When true, the separator is purely visual (role="none"); when false, it uses role="separator" with aria-orientation. */
+    decorative?: boolean;
+    /** Additional CSS class merged onto the root element. */
+    class?: string;
+    /** Strip all default styles; combine with slotClasses to rebuild from scratch. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. */
+    slotClasses?: Partial<Record<'base', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Separator: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent
+     * and make the custom look reusable across the project.
+     */
+    preset?: string;
+}
+export { default as Separator } from './Separator.svelte';
+export { type SeparatorVariants, separatorVariants } from './separator.variants';

package/dist/primitives/Separator/index.js

@@ -0,0 +1,2 @@
+export { default as Separator } from './Separator.svelte';
+export { separatorVariants } from './separator.variants';

package/dist/primitives/Separator/separator.variants.d.ts

@@ -0,0 +1,13 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const separatorVariants: (props?: import("../../utils/variants").TVProps<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}> | undefined) => string;
+export type SeparatorVariants = VariantProps<typeof separatorVariants>;

package/dist/primitives/Separator/separator.variants.js

@@ -0,0 +1,32 @@
+import { tv } from '../../utils/variants';
+// Separator is a purely visual primitive. Spacing belongs to the surrounding
+// layout (flex/grid gap, `space-y-*`, `space-x-*`) — not to the separator
+// itself. Pre-v1.0 we dropped the built-in margins that forced consumers to
+// override with `!my-0` (SEP-1). The `size` axis is retained but now controls
+// the *thickness* of the rule, which is what consumers actually need to vary.
+export const separatorVariants = tv({
+    base: ['shrink-0 bg-border-subtle'],
+    variants: {
+        orientation: {
+            horizontal: 'w-full',
+            vertical: 'h-full'
+        },
+        size: {
+            sm: '',
+            md: '',
+            lg: ''
+        }
+    },
+    compoundVariants: [
+        { orientation: 'horizontal', size: 'sm', class: 'h-px' },
+        { orientation: 'horizontal', size: 'md', class: 'h-px' },
+        { orientation: 'horizontal', size: 'lg', class: 'h-0.5' },
+        { orientation: 'vertical', size: 'sm', class: 'w-px' },
+        { orientation: 'vertical', size: 'md', class: 'w-px' },
+        { orientation: 'vertical', size: 'lg', class: 'w-0.5' }
+    ],
+    defaultVariants: {
+        orientation: 'horizontal',
+        size: 'md'
+    }
+});