@urbicon-ui/blocks 6.1.4

package/dist/primitives/Card/card.variants.js

@@ -0,0 +1,142 @@
+import { tv } from '../../utils/variants';
+export const cardVariants = tv({
+    slots: {
+        base: [
+            'relative block w-full transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--blocks-duration-fast)] ease-out box-border',
+            // Structure radius — cards are architectural surfaces, not human/CTA.
+            'rounded-contain'
+        ],
+        header: ['flex items-center justify-between'],
+        content: ['flex-1'],
+        footer: ['flex items-center justify-between']
+    },
+    // Variant contract (surface-token explainer in
+    // docs/ARCHITECTURE.md §Component Styling):
+    //   quiet    → bg-surface-quiet, no border / no shadow — reading-flow default
+    //   outlined → border only, transparent bg — architectural in-page
+    //   elevated → shadow only, surface-elevated bg — lifted, no border
+    //   floating → shadow-lg, surface-elevated bg — popover-family
+    variants: {
+        variant: {
+            quiet: {
+                base: ['bg-surface-quiet']
+            },
+            outlined: {
+                base: ['bg-transparent border border-border-default']
+            },
+            elevated: {
+                // The `hover:shadow-lg` lift is gated on `interactive: true` via the
+                // compoundVariant below — a non-interactive elevated card should not
+                // animate on hover (would falsely signal interactivity, WCAG 3.2).
+                base: ['bg-surface-elevated', 'shadow-[var(--blocks-shadow-md)]']
+            },
+            floating: {
+                base: ['bg-surface-elevated shadow-[var(--blocks-shadow-lg)]']
+            }
+        },
+        padding: {
+            none: {
+                base: 'p-0',
+                header: 'p-0',
+                content: 'p-0',
+                footer: 'p-0'
+            },
+            sm: {
+                base: 'p-4',
+                header: 'pb-2',
+                content: 'py-2',
+                footer: 'pt-2'
+            },
+            md: {
+                base: 'p-6',
+                header: 'pb-3',
+                content: 'py-3',
+                footer: 'pt-3'
+            },
+            lg: {
+                base: 'p-8',
+                header: 'pb-4',
+                content: 'py-4',
+                footer: 'pt-4'
+            },
+            xl: {
+                base: 'p-10',
+                header: 'pb-5',
+                content: 'py-5',
+                footer: 'pt-5'
+            }
+        },
+        // Opt-in slot separators. Default `false` (Lighter): header/footer
+        // sit flush against the body, the slots are separated by spacing
+        // only. Set `dividers={true}` for traditional card-with-header look.
+        // Uses `border-hairline` (Lighter token) — leiser als border-subtle.
+        dividers: {
+            true: {
+                header: 'border-b border-border-hairline',
+                footer: 'border-t border-border-hairline'
+            }
+        },
+        // `interactive` is gated on a real click-source — `clickable`,
+        // `onclick`, or `href`. The Card component derives it from those
+        // props; consumers never set it directly. Setting it without a
+        // click source would render the card as a non-button div with
+        // `cursor-pointer` and a hover-translate, which falsely signals
+        // interactivity (WCAG 3.2 Predictable).
+        interactive: {
+            true: {
+                base: 'cursor-pointer hover:-translate-y-0.5 active:translate-y-0'
+            }
+        },
+        elementType: {
+            button: {
+                base: 'border-none font-inherit text-left cursor-pointer'
+            },
+            a: {
+                base: 'no-underline text-inherit'
+            },
+            div: {}
+        },
+        disabled: {
+            true: {
+                base: 'opacity-50 cursor-not-allowed pointer-events-none'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            interactive: true,
+            elementType: ['button', 'a'],
+            class: {
+                base: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2'
+            }
+        },
+        {
+            interactive: true,
+            variant: 'quiet',
+            class: { base: 'hover:bg-surface-hover' }
+        },
+        {
+            interactive: true,
+            variant: 'outlined',
+            class: { base: 'hover:shadow-[var(--blocks-shadow-sm)]' }
+        },
+        {
+            interactive: true,
+            variant: 'elevated',
+            class: { base: 'hover:shadow-[var(--blocks-shadow-lg)]' }
+        },
+        {
+            interactive: true,
+            variant: 'floating',
+            class: { base: 'hover:bg-surface-hover' }
+        }
+    ],
+    defaultVariants: {
+        variant: 'quiet',
+        padding: 'md',
+        dividers: false,
+        interactive: false,
+        elementType: 'div',
+        disabled: false
+    }
+});

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

@@ -0,0 +1,82 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MintProp } from '../../mint';
+import type { CardVariants } from './card.variants';
+/**
+ * @description Flexible container for grouping related content with optional header, footer,
+ * and interactive states. Renders as div, button, or anchor depending on the provided props.
+ *
+ * @tag layout
+ * @related Accordion
+ * @related Collapsible
+ *
+ * @example
+ * ```svelte
+ * <Card padding="lg">
+ *   {#snippet header()}
+ *     <h3>Title</h3>
+ *   {/snippet}
+ *   <p>Body content</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Card variant="elevated" dividers onclick={() => navigate('/detail')}>
+ *   {#snippet header()}
+ *     <div class="flex items-center gap-3">
+ *       <Avatar name="Jane Doe" size="sm" />
+ *       <span class="font-medium">Jane Doe</span>
+ *     </div>
+ *   {/snippet}
+ *   <p>Interactive card that navigates on click.</p>
+ *   {#snippet footer()}
+ *     <span class="text-text-tertiary text-sm">2 min ago</span>
+ *   {/snippet}
+ * </Card>
+ * ```
+ */
+export interface CardProps extends Omit<CardVariants, 'elementType' | 'interactive'>, Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Main body content. */
+    children?: Snippet;
+    /** Content rendered above the body. With `dividers`, a hairline separates header from body. */
+    header?: Snippet;
+    /** Content rendered below the body. With `dividers`, a hairline separates body from footer. */
+    footer?: Snippet;
+    /** Click handler. When provided, the card renders as `<button>` and gains interactive styles. */
+    onclick?: (event: MouseEvent) => void;
+    /** Called when hover state changes. Receives `true` on mouse-enter, `false` on mouse-leave. */
+    onHover?: (hovered: boolean) => void;
+    /** URL target. When provided, the card renders as `<a>`. */
+    href?: string;
+    /**
+     * Force `<button>` rendering and interactive hover styles without
+     * providing an `onclick` handler — useful when delegating clicks
+     * through a wrapper component or library. `onclick` and `href`
+     * already enable interactive styles automatically; reach for
+     * `clickable` only when neither is appropriate.
+     *
+     * Don't combine with an outer `<a href>` or inner interactive
+     * content — `<a><Card clickable>…</Card></a>` produces nested
+     * interactive elements (invalid HTML, a11y violation). Prefer
+     * `<Card href={…}>` so the card itself becomes the anchor.
+     */
+    clickable?: boolean;
+    /** Extra classes merged onto the root element. */
+    class?: string;
+    /** Remove all default tv classes. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. */
+    slotClasses?: Partial<Record<'base' | 'header' | 'content' | 'footer', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Card: {...} }}>`.
+     * 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. Only takes effect on interactive cards. */
+    mint?: MintProp;
+}
+export { default as Card } from './Card.svelte';
+export { type CardVariants, cardVariants } from './card.variants';

package/dist/primitives/Card/index.js

@@ -0,0 +1,2 @@
+export { default as Card } from './Card.svelte';
+export { cardVariants } from './card.variants';

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import { mintRegistry } from '../..';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getTierContext, useFormField } from '../../utils';
+  import { checkboxVariants } from '..';
+  import { resolveIcon } from '../../icons';
+  import CheckIconDefault from '../../icons/CheckIcon.svelte';
+  import MinusIconDefault from '../../icons/MinusIcon.svelte';
+  import type { CheckboxProps } from './index';
+
+  const CheckMarkIcon = resolveIcon('check', CheckIconDefault);
+  const IndeterminateIcon = resolveIcon('minus', MinusIconDefault);
+
+  let {
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    label,
+    helper,
+    error,
+    tier,
+    size = 'md',
+    intent = 'primary',
+    variant = 'outlined',
+    disabled = false,
+    required = false,
+    name,
+    value = 'on',
+    id: idProp,
+    mint = 'none',
+    onCheckedChange,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: CheckboxProps = $props();
+
+  // Tier precedence (closest wins): own prop → TierContext (Toolbar /
+  // ButtonGroup) → 'modify' default (checkbox is an input-tap surface).
+  const tierCtx = getTierContext();
+  const effectiveTier = $derived(tier ?? tierCtx?.tier ?? 'modify');
+
+  // ARIA wiring is shared with every form primitive — see XC-2.
+  const propsId = $props.id();
+  const id = $derived(idProp ?? propsId);
+  const ff = useFormField(() => ({
+    fieldId: id,
+    hint: helper,
+    error,
+    required,
+    disabled
+  }));
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.Checkbox?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'Checkbox', preset),
+      slotClassesProp
+    )
+  );
+
+  let controlElement = $state<HTMLElement>();
+  let inputRef = $state<HTMLInputElement>();
+
+  const dataState = $derived(indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked');
+
+  const styles = $derived(
+    checkboxVariants({
+      tier: effectiveTier,
+      size,
+      intent,
+      variant,
+      checked,
+      indeterminate,
+      disabled,
+      error: !!error
+    })
+  );
+
+  $effect(() => {
+    if (inputRef) {
+      inputRef.indeterminate = !!indeterminate;
+    }
+  });
+
+  $effect(() => {
+    if (controlElement && mint && mint !== 'none' && !disabled) {
+      return mintRegistry.apply(controlElement, mint);
+    }
+  });
+
+  function handleChange(event: Event) {
+    if (disabled) return;
+    if (indeterminate) indeterminate = false;
+    // Read the new value directly from the input — `bind:checked`
+    // propagation may not have run yet when this handler executes.
+    const next = (event.target as HTMLInputElement).checked;
+    checked = next;
+    onCheckedChange?.(next);
+  }
+</script>
+
+<div
+  class={unstyled
+    ? [slotClasses?.wrapper, className].filter(Boolean).join(' ')
+    : styles.wrapper({ class: [slotClasses?.wrapper, className] })}
+>
+  <label
+    class={unstyled
+      ? (slotClasses?.control ?? '')
+      : styles.control({ class: slotClasses?.control })}
+    bind:this={controlElement}
+    for={id}
+  >
+    <input
+      bind:this={inputRef}
+      {id}
+      type="checkbox"
+      {name}
+      {value}
+      bind:checked
+      {disabled}
+      {required}
+      class="peer sr-only"
+      aria-checked={indeterminate ? 'mixed' : undefined}
+      aria-invalid={ff.invalid ? 'true' : undefined}
+      aria-describedby={ff.describedBy}
+      onchange={handleChange}
+      {...restProps}
+    />
+
+    <span
+      class={unstyled ? (slotClasses?.box ?? '') : styles.box({ class: slotClasses?.box })}
+      aria-hidden="true"
+      data-state={dataState}
+    >
+      {#if indeterminate}
+        <IndeterminateIcon
+          class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}
+        />
+      {:else if checked}
+        <CheckMarkIcon
+          class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}
+          strokeWidth={3}
+        />
+      {/if}
+    </span>
+
+    {#if label}
+      <span
+        class={unstyled ? (slotClasses?.label ?? '') : styles.label({ class: slotClasses?.label })}
+        >{label}</span
+      >
+    {/if}
+  </label>
+
+  {#if ff.errorId}
+    <div
+      id={ff.errorId}
+      class={unstyled
+        ? (slotClasses?.message ?? '')
+        : styles.message({ class: slotClasses?.message })}
+      role="alert"
+    >
+      {error}
+    </div>
+  {:else if ff.hintId}
+    <div
+      id={ff.hintId}
+      class={unstyled
+        ? (slotClasses?.message ?? '')
+        : styles.message({ class: slotClasses?.message })}
+    >
+      {helper}
+    </div>
+  {/if}
+</div>

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

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

package/dist/primitives/Checkbox/checkbox.variants.d.ts

@@ -0,0 +1,146 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const checkboxVariants: (props?: import("../../utils/variants").TVProps<{
+    tier: {
+        commit: {
+            box: string;
+        };
+        modify: {
+            box: string;
+        };
+    };
+    size: {
+        xs: {
+            box: string;
+            icon: string;
+            label: string;
+        };
+        sm: {
+            box: string;
+            icon: string;
+            label: string;
+        };
+        md: {
+            box: string;
+            icon: string;
+            label: string;
+        };
+        lg: {
+            box: string;
+            icon: string;
+            label: string;
+        };
+    };
+    intent: {
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        neutral: {};
+    };
+    variant: {
+        outlined: {};
+        filled: {};
+        ghost: {};
+    };
+    checked: {
+        true: {
+            icon: string;
+        };
+    };
+    indeterminate: {
+        true: {
+            icon: string;
+        };
+    };
+    disabled: {
+        true: {
+            control: string;
+        };
+    };
+    error: {
+        true: {
+            message: string;
+        };
+    };
+}> | undefined) => {
+    wrapper: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        checked?: boolean | undefined;
+        indeterminate?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: 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;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        checked?: boolean | undefined;
+        indeterminate?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: 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;
+    box: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        checked?: boolean | undefined;
+        indeterminate?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: 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;
+    icon: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        checked?: boolean | undefined;
+        indeterminate?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: 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;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        checked?: boolean | undefined;
+        indeterminate?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: 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;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        checked?: boolean | undefined;
+        indeterminate?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: 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 CheckboxVariants = VariantProps<typeof checkboxVariants>;