@urbicon-ui/blocks 6.1.4

package/dist/primitives/Checkbox/checkbox.variants.js

@@ -0,0 +1,185 @@
+import { tv } from '../../utils/variants';
+export const checkboxVariants = tv({
+    slots: {
+        wrapper: ['inline-flex flex-col gap-1.5'],
+        control: ['group inline-flex items-center gap-2 select-none cursor-pointer min-h-11'],
+        // Geometry tier moves to the `tier` variant below. Default `modify` —
+        // the checkbox box is an input-tap surface.
+        box: [
+            'relative flex items-center justify-center shrink-0 border',
+            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50',
+            'peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-base'
+        ],
+        icon: [
+            'opacity-0 scale-75 transition-[opacity,transform] duration-[var(--blocks-duration-fast)] ease-out'
+        ],
+        label: ['text-text-primary select-none'],
+        message: ['text-xs text-text-tertiary']
+    },
+    variants: {
+        // 3-tier semantic radius. Default `modify` — a checkbox is an input-
+        // tap surface. `commit` (pill) is rare but available for status-style
+        // checklists where the box should read as identity rather than
+        // selection. Inherited from TierContext when omitted.
+        tier: {
+            commit: { box: 'rounded-commit' },
+            modify: { box: 'rounded-modify' }
+        },
+        size: {
+            xs: {
+                box: 'w-3.5 h-3.5',
+                icon: 'w-2.5 h-2.5',
+                label: 'text-xs'
+            },
+            sm: {
+                box: 'w-4 h-4',
+                icon: 'w-3 h-3',
+                label: 'text-sm'
+            },
+            md: {
+                box: 'w-5 h-5',
+                icon: 'w-3.5 h-3.5',
+                label: 'text-base'
+            },
+            lg: {
+                box: 'w-6 h-6',
+                icon: 'w-4 h-4',
+                label: 'text-lg'
+            }
+        },
+        intent: {
+            primary: {},
+            secondary: {},
+            success: {},
+            warning: {},
+            danger: {},
+            neutral: {}
+        },
+        variant: {
+            outlined: {},
+            filled: {},
+            ghost: {}
+        },
+        checked: {
+            true: {
+                icon: 'opacity-100 scale-100'
+            }
+        },
+        indeterminate: {
+            true: {
+                icon: 'opacity-100 scale-100'
+            }
+        },
+        disabled: {
+            true: {
+                control: 'opacity-50 cursor-not-allowed pointer-events-none'
+            }
+        },
+        error: {
+            true: {
+                message: 'text-danger'
+            }
+        }
+    },
+    compoundVariants: [
+        // ── Unchecked appearance per variant ──
+        {
+            checked: false,
+            indeterminate: false,
+            variant: 'outlined',
+            class: { box: 'bg-surface-base border-border-default group-hover:border-border-emphasis' }
+        },
+        {
+            checked: false,
+            indeterminate: false,
+            variant: 'filled',
+            class: { box: 'bg-surface-subtle border-border-subtle group-hover:border-border-default' }
+        },
+        {
+            checked: false,
+            indeterminate: false,
+            variant: 'ghost',
+            class: { box: 'bg-transparent border-transparent group-hover:bg-surface-subtle' }
+        },
+        // ── Checked intent colors (identical across all variants) ──
+        {
+            checked: true,
+            intent: 'primary',
+            class: { box: 'bg-primary border-primary text-text-on-primary' }
+        },
+        {
+            checked: true,
+            intent: 'secondary',
+            class: { box: 'bg-secondary border-secondary text-text-on-primary' }
+        },
+        {
+            checked: true,
+            intent: 'success',
+            class: { box: 'bg-success border-success text-text-on-primary' }
+        },
+        {
+            checked: true,
+            intent: 'warning',
+            class: { box: 'bg-warning border-warning text-text-on-surface' }
+        },
+        {
+            checked: true,
+            intent: 'danger',
+            class: { box: 'bg-danger border-danger text-text-on-primary' }
+        },
+        {
+            checked: true,
+            intent: 'neutral',
+            class: { box: 'bg-neutral border-neutral text-text-on-primary' }
+        },
+        // ── Indeterminate mirrors checked ──
+        {
+            indeterminate: true,
+            intent: 'primary',
+            class: { box: 'bg-primary border-primary text-text-on-primary' }
+        },
+        {
+            indeterminate: true,
+            intent: 'secondary',
+            class: { box: 'bg-secondary border-secondary text-text-on-primary' }
+        },
+        {
+            indeterminate: true,
+            intent: 'success',
+            class: { box: 'bg-success border-success text-text-on-primary' }
+        },
+        {
+            indeterminate: true,
+            intent: 'warning',
+            class: { box: 'bg-warning border-warning text-text-on-surface' }
+        },
+        {
+            indeterminate: true,
+            intent: 'danger',
+            class: { box: 'bg-danger border-danger text-text-on-primary' }
+        },
+        {
+            indeterminate: true,
+            intent: 'neutral',
+            class: { box: 'bg-neutral border-neutral text-text-on-primary' }
+        },
+        // ── Error overrides unchecked border ──
+        {
+            error: true,
+            checked: false,
+            indeterminate: false,
+            class: { box: 'border-danger peer-focus-visible:ring-danger/40' }
+        }
+    ],
+    defaultVariants: {
+        tier: 'modify',
+        size: 'md',
+        intent: 'primary',
+        variant: 'outlined',
+        checked: false,
+        indeterminate: false,
+        disabled: false,
+        error: false
+    }
+});

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

@@ -0,0 +1,73 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { MintProp } from '../../mint';
+import type { InteractiveTier } from '../../utils';
+import type { CheckboxVariants } from './checkbox.variants';
+/**
+ * @description Accessible checkbox with indeterminate support, semantic intents, and form integration.
+ * Uses a hidden native input for correct form behavior and ARIA semantics.
+ *
+ * @tag form
+ * @related Toggle
+ * @related RadioGroup
+ *
+ * @example
+ * ```svelte
+ * <Checkbox label="Accept terms" bind:checked />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Checkbox
+ *   label="Select all"
+ *   indeterminate
+ *   onCheckedChange={(val) => console.log(val)}
+ * />
+ * ```
+ */
+export interface CheckboxProps extends Omit<CheckboxVariants, 'error' | 'checked' | 'indeterminate'>, Omit<HTMLInputAttributes, 'type' | 'size' | 'checked' | 'class' | 'children'> {
+    /** Current checked state. Supports two-way binding via `bind:checked`. */
+    checked?: boolean;
+    /** Visual-only third state showing a dash icon. Resets to unchecked on next user toggle. Does not affect the submitted form value. Supports `bind:indeterminate`. */
+    indeterminate?: boolean;
+    /** Text label displayed to the right of the checkbox box. */
+    label?: string;
+    /** Hint text shown below the control. Hidden when `error` is set. */
+    helper?: string;
+    /** Error message that replaces `helper`, styles the message red, and sets `aria-invalid` on the input. */
+    error?: string;
+    /** Prevent interaction and dim the control. */
+    disabled?: boolean;
+    /** Mark the native input as required for form validation. */
+    required?: boolean;
+    /** The `name` attribute of the underlying `<input>`. Used for form submission. */
+    name?: string;
+    /** The value submitted when checked. Defaults to `'on'`. */
+    value?: string;
+    /** Extra classes merged onto the wrapper element. */
+    class?: string;
+    /** Strip all default tailwind-variants classes. Use with `slotClasses` for a fully custom look. The box exposes `data-state` for conditional styling. */
+    unstyled?: boolean;
+    /** Per-slot class overrides merged with (or replacing, when `unstyled`) the default styles. */
+    slotClasses?: Partial<Record<'wrapper' | 'control' | 'box' | 'icon' | 'label' | 'message', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Checkbox: {...} }}>`.
+     * 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;
+    /** Micro-interaction preset applied to the control area on hover/click. */
+    mint?: MintProp;
+    /** Fired after the checked state changes. Receives the new `checked` value. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Explicit `id` to link `<label>` and `<input>`. Auto-generated if omitted. */
+    id?: string;
+    /**
+     * Semantic radius tier. Default `modify` — checkbox is an input-tap
+     * surface. Inherited from TierContext when omitted; falls back to
+     * `modify` outside of any tier-aware container.
+     */
+    tier?: InteractiveTier;
+}
+export { default as Checkbox } from './Checkbox.svelte';
+export { type CheckboxVariants, checkboxVariants } from './checkbox.variants';

package/dist/primitives/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox.svelte';
+export { checkboxVariants } from './checkbox.variants';

package/dist/primitives/Collapsible/Collapsible.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { collapsibleVariants } from './collapsible.variants';
+  import { resolveIcon } from '../../icons';
+  import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
+  import type { CollapsibleProps } from './index';
+
+  const ChevronDownIcon = resolveIcon('chevronDown', ChevronDownIconDefault);
+
+  let {
+    open = $bindable(),
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false,
+    title,
+    trigger,
+    variant = 'default',
+    size = 'md',
+    name,
+    children,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: CollapsibleProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.Collapsible?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'Collapsible', preset),
+      slotClassesProp
+    )
+  );
+
+  let internalOpen = $state(defaultOpen ?? false);
+  const isOpen = $derived(open !== undefined ? open : internalOpen);
+
+  function toggle() {
+    if (disabled) return;
+    const next = !isOpen;
+    if (open !== undefined) {
+      open = next;
+    } else {
+      internalOpen = next;
+    }
+    onOpenChange?.(next);
+  }
+
+  const styles = $derived(
+    unstyled
+      ? {
+          base: () => '',
+          trigger: () => '',
+          chevron: () => '',
+          content: () => '',
+          contentInner: () => ''
+        }
+      : collapsibleVariants({ variant, size })
+  );
+
+  function slot(key: keyof typeof styles, extra?: string) {
+    const overrides = [slotClasses?.[key], extra].filter(Boolean).join(' ');
+    if (unstyled) return overrides;
+    return styles[key]({ class: overrides });
+  }
+
+  const propsId = $props.id();
+  const fallbackName = `collapsible-${propsId}`;
+  const uid = $derived(name ?? fallbackName);
+  const triggerId = $derived(`${uid}-trigger`);
+  const contentId = $derived(`${uid}-content`);
+</script>
+
+<div class={slot('base', className)} data-state={isOpen ? 'open' : 'closed'} {...restProps}>
+  {#if trigger}
+    {@render trigger({ open: isOpen, toggle, disabled, triggerId, contentId })}
+  {:else}
+    <button
+      id={triggerId}
+      type="button"
+      class={slot('trigger')}
+      aria-expanded={isOpen}
+      aria-controls={contentId}
+      {disabled}
+      onclick={toggle}
+    >
+      <span>{title ?? ''}</span>
+      <ChevronDownIcon class={slot('chevron', isOpen ? 'rotate-180' : '')} />
+    </button>
+  {/if}
+
+  <div
+    id={contentId}
+    role="region"
+    aria-labelledby={triggerId}
+    class={slot('content')}
+    style="display:grid; grid-template-rows: {isOpen ? '1fr' : '0fr'};"
+  >
+    <div class="overflow-hidden">
+      <div class={slot('contentInner')}>
+        {@render children()}
+      </div>
+    </div>
+  </div>
+</div>

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

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

package/dist/primitives/Collapsible/collapsible.variants.d.ts

@@ -0,0 +1,68 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const collapsibleVariants: (props?: import("../../utils/variants").TVProps<{
+    variant: {
+        default: {};
+        card: {
+            base: string;
+            trigger: string;
+            contentInner: string;
+        };
+        ghost: {
+            trigger: string;
+        };
+    };
+    size: {
+        sm: {
+            trigger: string;
+            contentInner: string;
+            chevron: string;
+        };
+        md: {
+            trigger: string;
+            contentInner: string;
+            chevron: string;
+        };
+        lg: {
+            trigger: string;
+            contentInner: string;
+            chevron: string;
+        };
+    };
+}> | undefined) => {
+    base: (props?: ({
+        variant?: "default" | "ghost" | "card" | undefined;
+        size?: "sm" | "md" | "lg" | 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?: ({
+        variant?: "default" | "ghost" | "card" | undefined;
+        size?: "sm" | "md" | "lg" | 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?: ({
+        variant?: "default" | "ghost" | "card" | undefined;
+        size?: "sm" | "md" | "lg" | 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;
+    content: (props?: ({
+        variant?: "default" | "ghost" | "card" | undefined;
+        size?: "sm" | "md" | "lg" | 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;
+    contentInner: (props?: ({
+        variant?: "default" | "ghost" | "card" | undefined;
+        size?: "sm" | "md" | "lg" | 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 CollapsibleVariants = VariantProps<typeof collapsibleVariants>;

package/dist/primitives/Collapsible/collapsible.variants.js

@@ -0,0 +1,57 @@
+import { tv } from '../../utils/variants';
+export const collapsibleVariants = tv({
+    slots: {
+        base: 'w-full',
+        trigger: [
+            'flex w-full items-center justify-between text-left font-medium cursor-pointer',
+            'text-text-primary',
+            'transition-[color,background-color,border-color,box-shadow,opacity] duration-[var(--blocks-duration-fast)]',
+            'hover:text-primary',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:rounded-sm',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+        ],
+        chevron: [
+            'shrink-0 text-text-tertiary',
+            'transition-transform duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
+        ],
+        content: [
+            'overflow-hidden',
+            'transition-[grid-template-rows] duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
+        ],
+        contentInner: 'text-text-secondary'
+    },
+    variants: {
+        variant: {
+            default: {},
+            card: {
+                base: 'border border-border-hairline rounded-contain shadow-[var(--blocks-shadow-sm)]',
+                trigger: 'px-4',
+                contentInner: 'px-4'
+            },
+            ghost: {
+                trigger: 'px-4 rounded-contain hover:bg-surface-hover'
+            }
+        },
+        size: {
+            sm: {
+                trigger: 'py-2 text-sm',
+                contentInner: 'pb-2 text-sm',
+                chevron: 'w-4 h-4'
+            },
+            md: {
+                trigger: 'py-3 text-base',
+                contentInner: 'pb-3 text-sm',
+                chevron: 'w-5 h-5'
+            },
+            lg: {
+                trigger: 'py-4 text-lg',
+                contentInner: 'pb-4 text-base',
+                chevron: 'w-5 h-5'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});

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

@@ -0,0 +1,74 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { CollapsibleVariants } from './collapsible.variants';
+/**
+ * Props interface for the Collapsible component
+ *
+ * @description A single expand/collapse panel with animated content, trigger button,
+ * and full ARIA support. Can be used standalone or as the foundation for compound
+ * components like Accordion.
+ *
+ * @tag layout
+ * @related Accordion
+ * @related Card
+ *
+ * @example
+ * ```svelte
+ * <Collapsible title="Show details">
+ *   <p>Hidden content revealed when expanded.</p>
+ * </Collapsible>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Collapsible bind:open={isOpen} variant="card">
+ *   {#snippet trigger({ open, toggle })}
+ *     <button onclick={toggle}>
+ *       {open ? 'Hide' : 'Show'} settings
+ *     </button>
+ *   {/snippet}
+ *   <SettingsForm />
+ * </Collapsible>
+ * ```
+ */
+export interface CollapsibleProps extends CollapsibleVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Whether the content is visible. Supports bind:open. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage @default false */
+    defaultOpen?: boolean;
+    /** Callback fired when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Disable the trigger @default false */
+    disabled?: boolean;
+    /** Trigger label text (used by the default trigger) */
+    title?: string;
+    /** Custom trigger snippet — receives open state, toggle fn, disabled flag, and ARIA IDs */
+    trigger?: Snippet<[
+        {
+            open: boolean;
+            toggle: () => void;
+            disabled: boolean;
+            triggerId: string;
+            contentId: string;
+        }
+    ]>;
+    /** Collapsible content */
+    children: Snippet;
+    /** Base name for generating ARIA IDs. Defaults to auto-generated. */
+    name?: string;
+    /** Custom CSS class */
+    class?: string;
+    /** Remove default styles */
+    unstyled?: boolean;
+    /** Per-slot class overrides */
+    slotClasses?: Partial<Record<'base' | 'trigger' | 'chevron' | 'content' | 'contentInner', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Collapsible: {...} }}>`.
+     * 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 Collapsible } from './Collapsible.svelte';
+export { type CollapsibleVariants, collapsibleVariants } from './collapsible.variants';

package/dist/primitives/Collapsible/index.js

@@ -0,0 +1,2 @@
+export { default as Collapsible } from './Collapsible.svelte';
+export { collapsibleVariants } from './collapsible.variants';