@urbicon-ui/blocks 6.1.4

package/dist/primitives/Toggle/toggle.variants.d.ts

@@ -0,0 +1,134 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const toggleVariants: (props?: import("../../utils/variants").TVProps<{
+    tier: {
+        commit: {
+            track: string;
+            thumb: string;
+        };
+        modify: {
+            track: string;
+            thumb: string;
+        };
+    };
+    size: {
+        xs: {
+            track: string;
+            thumb: string;
+            label: string;
+        };
+        sm: {
+            track: string;
+            thumb: string;
+            label: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+            label: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+            label: string;
+        };
+    };
+    intent: {
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        neutral: {};
+    };
+    appearance: {
+        default: {};
+        dot: {};
+    };
+    checked: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            control: string;
+        };
+    };
+    withBorder: {
+        true: {};
+        false: {};
+    };
+}> | undefined) => {
+    wrapper: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        appearance?: "default" | "dot" | undefined;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        withBorder?: boolean | 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;
+    control: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        appearance?: "default" | "dot" | undefined;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        withBorder?: boolean | 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;
+    track: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        appearance?: "default" | "dot" | undefined;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        withBorder?: boolean | 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;
+    thumb: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        appearance?: "default" | "dot" | undefined;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        withBorder?: boolean | 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;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        appearance?: "default" | "dot" | undefined;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        withBorder?: boolean | 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;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        appearance?: "default" | "dot" | undefined;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        withBorder?: boolean | 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 ToggleVariants = VariantProps<typeof toggleVariants>;

package/dist/primitives/Toggle/toggle.variants.js

@@ -0,0 +1,226 @@
+import { tv } from '../../utils/variants';
+export const toggleVariants = tv({
+    slots: {
+        wrapper: ['inline-flex flex-col gap-1.5'],
+        control: ['group inline-flex items-center gap-3 select-none cursor-pointer min-h-11'],
+        // Geometry tier moves to the `tier` variant below. Track + thumb share
+        // the same tier — commit yields the classic Switch-Pill, modify a soft-
+        // rectangle switch that reads as inline-toolbar control.
+        track: [
+            'relative inline-flex items-center',
+            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            'border border-transparent',
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50',
+            'peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-base'
+        ],
+        thumb: [
+            'absolute bg-surface-base shadow-sm',
+            'transition-transform duration-[var(--blocks-duration-fast)] ease-out',
+            'left-0.5 top-1/2 -translate-y-1/2'
+        ],
+        label: ['text-text-primary select-none'],
+        message: ['text-xs text-text-tertiary']
+    },
+    variants: {
+        // 3-tier semantic radius. Default `commit` (classic Switch-Pill) — a
+        // toggle is a status declaration, identity-shaped. Opt-in `modify`
+        // renders a soft-rectangle switch for compact inline-toolbar contexts
+        // (usually inherited from a wrapping `<Toolbar tier="modify">` via
+        // TierContext). The `dot` appearance overrides geometry in compounds
+        // below, so tier is functionally a no-op there — both still type-check.
+        tier: {
+            commit: { track: 'rounded-commit', thumb: 'rounded-commit' },
+            modify: { track: 'rounded-modify', thumb: 'rounded-modify' }
+        },
+        size: {
+            xs: {
+                track: 'w-8 h-4',
+                thumb: 'w-3 h-3',
+                label: 'text-xs'
+            },
+            sm: {
+                track: 'w-10 h-5',
+                thumb: 'w-4 h-4',
+                label: 'text-sm'
+            },
+            md: {
+                track: 'w-12 h-6',
+                thumb: 'w-5 h-5',
+                label: 'text-base'
+            },
+            lg: {
+                track: 'w-14 h-7',
+                thumb: 'w-6 h-6',
+                label: 'text-lg'
+            }
+        },
+        intent: {
+            primary: {},
+            secondary: {},
+            success: {},
+            warning: {},
+            danger: {},
+            neutral: {}
+        },
+        // Appearance contract (see docs/ARCHITECTURE.md §Tier System
+        // for the commit/modify radius semantics).
+        //   default → classic switch pill (track + animated thumb).
+        //   dot     → small indicator dot left of the label. Off = outline only,
+        //             on = fill-intent. Monochrome, no pill background. Ideal
+        //             for inline settings, dense toolbars, knob-strips —
+        //             or anywhere the switch is visually too dominant.
+        appearance: {
+            default: {},
+            // Concrete styles for `dot` live in compoundVariants below, so that
+            // the override-bucket (w/h/rounded) can strip the corresponding
+            // size-variant classes. tv() does not dedupe across variants in the
+            // same pipeline stage — compoundVariants is the next stage.
+            dot: {}
+        },
+        checked: {
+            true: {},
+            false: {}
+        },
+        disabled: {
+            true: {
+                control: 'opacity-50 cursor-not-allowed pointer-events-none'
+            }
+        },
+        withBorder: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        // ── Default-appearance compounds (classic Switch-Pill) ──
+        // All filter on `appearance: 'default'` so the new `dot` mode picks
+        // up only its own monochrome compounds (defined further below).
+        {
+            appearance: 'default',
+            checked: false,
+            class: {
+                track: 'bg-surface-interactive',
+                thumb: 'translate-x-0'
+            }
+        },
+        // ── withBorder: visible boundary in both states ──
+        {
+            appearance: 'default',
+            checked: false,
+            withBorder: true,
+            class: { track: 'border-border-strong' }
+        },
+        {
+            appearance: 'default',
+            checked: true,
+            withBorder: true,
+            class: { track: 'ring-1 ring-inset ring-surface-base/40' }
+        },
+        // ── Checked track per intent (Switch-Pill only) ──
+        {
+            appearance: 'default',
+            checked: true,
+            intent: 'primary',
+            class: { track: 'bg-primary border-primary' }
+        },
+        {
+            appearance: 'default',
+            checked: true,
+            intent: 'secondary',
+            class: { track: 'bg-secondary border-secondary' }
+        },
+        {
+            appearance: 'default',
+            checked: true,
+            intent: 'success',
+            class: { track: 'bg-success border-success' }
+        },
+        {
+            appearance: 'default',
+            checked: true,
+            intent: 'warning',
+            class: { track: 'bg-warning border-warning' }
+        },
+        {
+            appearance: 'default',
+            checked: true,
+            intent: 'danger',
+            class: { track: 'bg-danger border-danger' }
+        },
+        {
+            appearance: 'default',
+            checked: true,
+            intent: 'neutral',
+            class: { track: 'bg-neutral border-neutral' }
+        },
+        // ── Thumb translation per size when checked (Switch-Pill only) ──
+        { appearance: 'default', checked: true, size: 'xs', class: { thumb: 'translate-x-4' } },
+        { appearance: 'default', checked: true, size: 'sm', class: { thumb: 'translate-x-5' } },
+        { appearance: 'default', checked: true, size: 'md', class: { thumb: 'translate-x-6' } },
+        { appearance: 'default', checked: true, size: 'lg', class: { thumb: 'translate-x-7' } },
+        // ── Dot appearance: monochrome circular indicator ──
+        // The base track is overridden to a tiny outline-only circle. The thumb
+        // is hidden. Off = border-only (no bg-class so CSS default `transparent`
+        // applies), on = fill-intent. compoundVariants run after the size-variant
+        // stage, so `w-3.5/h-3.5/rounded-full` strip the size-based
+        // `w-12/h-6/rounded-commit` from the resolved class set.
+        {
+            appearance: 'dot',
+            class: {
+                track: 'w-3.5 h-3.5 rounded-full border shadow-none',
+                thumb: 'hidden',
+                control: 'min-h-6 gap-2'
+            }
+        },
+        {
+            appearance: 'dot',
+            checked: false,
+            class: { track: 'border-border-default' }
+        },
+        {
+            appearance: 'dot',
+            checked: true,
+            intent: 'primary',
+            class: { track: 'border-primary bg-primary' }
+        },
+        {
+            appearance: 'dot',
+            checked: true,
+            intent: 'secondary',
+            class: { track: 'border-secondary bg-secondary' }
+        },
+        {
+            appearance: 'dot',
+            checked: true,
+            intent: 'success',
+            class: { track: 'border-success bg-success' }
+        },
+        {
+            appearance: 'dot',
+            checked: true,
+            intent: 'warning',
+            class: { track: 'border-warning bg-warning' }
+        },
+        {
+            appearance: 'dot',
+            checked: true,
+            intent: 'danger',
+            class: { track: 'border-danger bg-danger' }
+        },
+        {
+            appearance: 'dot',
+            checked: true,
+            intent: 'neutral',
+            class: { track: 'border-neutral bg-neutral' }
+        }
+    ],
+    defaultVariants: {
+        tier: 'commit',
+        size: 'md',
+        intent: 'primary',
+        appearance: 'default',
+        checked: false,
+        disabled: false,
+        withBorder: false
+    }
+});

package/dist/primitives/Toolbar/Toolbar.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { toolbarVariants } from './toolbar.variants';
+  import type { ToolbarProps } from './index';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { setTierContext } from '../../utils/tier-context';
+
+  let {
+    children,
+    variant = 'quiet',
+    orientation = 'horizontal',
+    gap = 'sm',
+    padding = 'sm',
+    tier = 'modify',
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    'aria-label': ariaLabel,
+    ...restProps
+  }: ToolbarProps = $props();
+
+  // Propagate tier to tier-aware descendants (Button, Badge, Input, …).
+  // The Toolbar's own surface is `r-structure` (set by toolbarVariants) —
+  // the propagated tier only affects interactive children.
+  setTierContext({
+    get tier() {
+      return tier;
+    }
+  });
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.Toolbar?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'Toolbar', preset),
+      slotClassesProp
+    )
+  );
+
+  const styles = $derived(toolbarVariants({ variant, orientation, gap, padding }));
+</script>
+
+<div
+  class={unstyled
+    ? [slotClasses?.base, className].filter(Boolean).join(' ')
+    : styles.base({ class: [slotClasses?.base, className] })}
+  role="toolbar"
+  aria-orientation={orientation}
+  aria-label={ariaLabel}
+  {...restProps}
+>
+  {@render children()}
+</div>

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

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

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

@@ -0,0 +1,70 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { InteractiveTier } from '../../utils';
+import type { ToolbarVariants } from './toolbar.variants';
+/**
+ * Props interface for Toolbar component
+ *
+ * @description Container for grouping related controls in a horizontal or vertical bar.
+ * Renders with role="toolbar" and auto-sets aria-orientation.
+ *
+ * @tag action
+ * @related Button
+ * @related ButtonGroup
+ *
+ * @example
+ * ```svelte
+ * <Toolbar aria-label="Text formatting">
+ *   <Button variant="ghost" size="sm">B</Button>
+ *   <Button variant="ghost" size="sm">I</Button>
+ *   <Separator orientation="vertical" size="sm" />
+ *   <Button variant="ghost" size="sm">Left</Button>
+ *   <Button variant="ghost" size="sm">Center</Button>
+ * </Toolbar>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Toolbar aria-label="Actions" orientation="horizontal">
+ *   <ButtonGroup connected size="sm" variant="ghost">
+ *     <Button value="undo">Undo</Button>
+ *     <Button value="redo">Redo</Button>
+ *   </ButtonGroup>
+ *   <Separator orientation="vertical" />
+ *   <Button variant="ghost" size="sm" intent="danger">Delete</Button>
+ * </Toolbar>
+ * ```
+ */
+export interface ToolbarProps extends ToolbarVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Toolbar content — typically Buttons, Toggles, Separators, or ButtonGroups. */
+    children: Snippet;
+    /** Accessible label describing the toolbar's purpose (e.g. "Formatting toolbar"). Required. */
+    'aria-label': string;
+    /**
+     * Semantic radius tier propagated to tier-aware children (Buttons,
+     * Badges, Inputs, …). The Toolbar's own surface stays `r-structure`
+     * regardless of this prop.
+     *
+     * Default `modify` — toolbars typically hold compact, icon-only actions
+     * where pill-shaped buttons read as tags. Set to `commit` for marketing
+     * or hero toolbars with full CTAs.
+     *
+     * @default 'modify'
+     */
+    tier?: InteractiveTier;
+    /** Remove all default tv() classes. Combine with `slotClasses` to restyle from scratch. */
+    unstyled?: boolean;
+    /** Per-slot class overrides merged with (or replacing when `unstyled`) the default classes. */
+    slotClasses?: Partial<Record<'base', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Toolbar: {...} }}>`.
+     * 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;
+    /** Additional CSS class applied to the root element. */
+    class?: string;
+}
+export { default as Toolbar } from './Toolbar.svelte';
+export { type ToolbarVariants, toolbarVariants } from './toolbar.variants';

package/dist/primitives/Toolbar/index.js

@@ -0,0 +1,2 @@
+export { default as Toolbar } from './Toolbar.svelte';
+export { toolbarVariants } from './toolbar.variants';

package/dist/primitives/Toolbar/toolbar.variants.d.ts

@@ -0,0 +1,70 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const toolbarVariants: (props?: import("../../utils/variants").TVProps<{
+    variant: {
+        quiet: {
+            base: string;
+        };
+        elevated: {
+            base: string;
+        };
+        outlined: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    gap: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    padding: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}> | undefined) => {
+    base: (props?: ({
+        variant?: "ghost" | "elevated" | "outlined" | "quiet" | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+        gap?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        padding?: "sm" | "md" | "lg" | "xl" | "xs" | 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 ToolbarVariants = VariantProps<typeof toolbarVariants>;

package/dist/primitives/Toolbar/toolbar.variants.js

@@ -0,0 +1,57 @@
+import { tv } from '../../utils/variants';
+export const toolbarVariants = tv({
+    slots: {
+        // Structure radius — a toolbar is a container/surface, not a CTA.
+        base: ['flex items-center rounded-contain']
+    },
+    variants: {
+        // Variant contract (see docs/ARCHITECTURE.md §Tier System
+        // for the tier-aware toolbar context):
+        //   quiet    → softly tinted surface, no border, no shadow — reading-flow default
+        //   elevated → elevated surface, medium shadow, no border — reads as "floating toolbar"
+        //   outlined → transparent, stronger border — reads as in-page chrome
+        //   ghost    → no chrome, just padding around children
+        variant: {
+            quiet: {
+                base: 'bg-surface-quiet'
+            },
+            elevated: {
+                base: 'bg-surface-elevated shadow-[var(--blocks-shadow-md)]'
+            },
+            outlined: {
+                base: 'border border-border-default bg-transparent'
+            },
+            ghost: {
+                base: 'bg-transparent'
+            }
+        },
+        orientation: {
+            horizontal: {
+                base: 'flex-row items-center overflow-x-auto'
+            },
+            vertical: {
+                base: 'flex-col items-stretch'
+            }
+        },
+        gap: {
+            xs: { base: 'gap-0.5' },
+            sm: { base: 'gap-1' },
+            md: { base: 'gap-1.5' },
+            lg: { base: 'gap-3' },
+            xl: { base: 'gap-4' }
+        },
+        padding: {
+            xs: { base: 'p-0.5' },
+            sm: { base: 'p-1' },
+            md: { base: 'p-1.5' },
+            lg: { base: 'p-2' },
+            xl: { base: 'p-3' }
+        }
+    },
+    defaultVariants: {
+        variant: 'quiet',
+        orientation: 'horizontal',
+        gap: 'sm',
+        padding: 'sm'
+    }
+});