@urbicon-ui/blocks 6.1.4

package/dist/primitives/Progress/progress.variants.js

@@ -0,0 +1,83 @@
+import { tv } from '../../utils/variants';
+export const progressVariants = tv({
+    slots: {
+        wrapper: ['flex flex-col gap-1.5 w-full'],
+        header: ['flex items-center justify-between'],
+        label: ['text-sm font-medium text-text-secondary'],
+        valueText: ['text-sm tabular-nums text-text-tertiary'],
+        // tier: commit — progress bar reads as a continuous status pill.
+        track: [
+            'relative w-full overflow-hidden rounded-commit bg-surface-subtle',
+            'transition-[background-color] duration-[var(--blocks-duration-fast)] ease-out'
+        ],
+        fill: [
+            'h-full rounded-commit',
+            'transition-[width,background-color] duration-[var(--blocks-duration-normal)] ease-out'
+        ],
+        circularWrapper: ['relative inline-flex items-center justify-center'],
+        circularTrack: ['stroke-current text-surface-subtle'],
+        circularFill: [
+            'stroke-current transition-[stroke-dashoffset] duration-[var(--blocks-duration-normal)] ease-out'
+        ],
+        circularLabel: ['absolute text-text-primary font-medium']
+    },
+    variants: {
+        intent: {
+            primary: { fill: 'bg-primary', circularFill: 'text-primary' },
+            secondary: { fill: 'bg-secondary', circularFill: 'text-secondary' },
+            success: { fill: 'bg-success', circularFill: 'text-success' },
+            warning: { fill: 'bg-warning', circularFill: 'text-warning-emphasis' },
+            danger: { fill: 'bg-danger', circularFill: 'text-danger' },
+            neutral: { fill: 'bg-neutral', circularFill: 'text-neutral' }
+        },
+        size: {
+            xs: {
+                track: 'h-1',
+                fill: 'h-1',
+                circularLabel: 'text-[10px]'
+            },
+            sm: {
+                track: 'h-1.5',
+                fill: 'h-1.5',
+                circularLabel: 'text-xs'
+            },
+            md: {
+                track: 'h-2.5',
+                fill: 'h-2.5',
+                circularLabel: 'text-sm'
+            },
+            lg: {
+                track: 'h-4',
+                fill: 'h-4',
+                circularLabel: 'text-base'
+            }
+        },
+        indeterminate: {
+            true: {
+                fill: 'animate-progress-indeterminate w-1/3'
+            }
+        },
+        striped: {
+            true: {
+                fill: 'bg-[length:1rem_1rem] bg-[linear-gradient(45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent)]'
+            }
+        },
+        animated: {
+            true: {}
+        }
+    },
+    compoundVariants: [
+        {
+            striped: true,
+            animated: true,
+            class: { fill: 'animate-progress-striped' }
+        }
+    ],
+    defaultVariants: {
+        intent: 'primary',
+        size: 'md',
+        indeterminate: false,
+        striped: false,
+        animated: false
+    }
+});

package/dist/primitives/RadioGroup/RadioGroup.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getTierContext, useFormField } from '../../utils';
+  import type { RadioGroupProps } from './index';
+  import { setRadioGroupContext } from './radioGroup.context';
+  import { radioGroupVariants } from './radioGroup.variants';
+
+  let {
+    children,
+    value = $bindable(),
+    name: nameProp,
+    orientation = 'vertical',
+    size = 'md',
+    intent = 'primary',
+    variant = 'outlined',
+    tier,
+    disabled = false,
+    required = false,
+    error,
+    helper,
+    label,
+    onValueChange,
+    mint = 'none',
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    id,
+    ...restProps
+  }: RadioGroupProps = $props();
+
+  // Tier precedence (closest wins): own prop → TierContext (Toolbar /
+  // ButtonGroup) → 'commit' default. Propagated through RadioGroupContext
+  // so every RadioItem indicator shares the same radius family.
+  const tierCtx = getTierContext();
+  const effectiveTier = $derived(tier ?? tierCtx?.tier ?? 'commit');
+
+  const propsId = $props.id();
+  const name = $derived(nameProp ?? `radio-${propsId}`);
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.RadioGroup?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'RadioGroup', preset),
+      slotClassesProp
+    )
+  );
+
+  const groupId = $derived(id || `radiogroup-${propsId}`);
+  const labelId = $derived(label ? `${groupId}-label` : undefined);
+  // ARIA wiring is shared with every form primitive — see XC-2.
+  const ff = useFormField(() => ({
+    fieldId: groupId,
+    hint: helper,
+    error,
+    required,
+    disabled
+  }));
+
+  const styles = $derived(
+    radioGroupVariants({
+      orientation,
+      required: required || undefined,
+      error: !!error || undefined,
+      disabled: disabled || undefined
+    })
+  );
+
+  function select(itemValue: string) {
+    if (disabled) return;
+    value = itemValue;
+    onValueChange?.(itemValue);
+  }
+
+  let groupElement = $state<HTMLDivElement>();
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!groupElement) return;
+    const isVertical = orientation === 'vertical';
+    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+
+    if (event.key !== nextKey && event.key !== prevKey) return;
+
+    event.preventDefault();
+    const radios = Array.from(
+      groupElement.querySelectorAll<HTMLInputElement>('input[type="radio"]:not(:disabled)')
+    );
+    if (radios.length === 0) return;
+
+    const currentIndex = radios.findIndex((r) => r === document.activeElement);
+    let nextIndex: number;
+
+    if (event.key === nextKey) {
+      nextIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;
+    } else {
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;
+    }
+
+    radios[nextIndex].focus();
+    radios[nextIndex].click();
+  }
+
+  setRadioGroupContext({
+    get name() {
+      return name;
+    },
+    get size() {
+      return size;
+    },
+    get intent() {
+      return intent;
+    },
+    get variant() {
+      return variant;
+    },
+    get tier() {
+      return effectiveTier;
+    },
+    get disabled() {
+      return disabled;
+    },
+    get error() {
+      return !!error;
+    },
+    get value() {
+      return value;
+    },
+    get mint() {
+      return mint;
+    },
+    select
+  });
+</script>
+
+<div
+  class={unstyled
+    ? [slotClasses?.root, className].filter(Boolean).join(' ')
+    : styles.root({ class: [slotClasses?.root, className] })}
+>
+  {#if label}
+    <span
+      id={labelId}
+      class={unstyled ? (slotClasses?.label ?? '') : styles.label({ class: slotClasses?.label })}
+    >
+      {label}
+    </span>
+  {/if}
+
+  <div
+    bind:this={groupElement}
+    role="radiogroup"
+    id={groupId}
+    class={unstyled ? (slotClasses?.group ?? '') : styles.group({ class: slotClasses?.group })}
+    aria-labelledby={labelId}
+    aria-describedby={ff.describedBy}
+    aria-required={required || undefined}
+    aria-invalid={ff.invalid ? 'true' : undefined}
+    onkeydown={handleKeydown}
+    {...restProps}
+  >
+    {@render children()}
+  </div>
+
+  {#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/RadioGroup/RadioGroup.svelte.d.ts

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

package/dist/primitives/RadioGroup/RadioItem.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { mintRegistry } from '../..';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import type { RadioItemProps } from './index';
+  import { getRadioGroupContext } from './radioGroup.context';
+  import { radioItemVariants } from './radioGroup.variants';
+
+  let {
+    value,
+    label,
+    description,
+    disabled: disabledProp = false,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    id: idProp,
+    ...restProps
+  }: RadioItemProps = $props();
+
+  const propsId = $props.id();
+  const id = $derived(idProp ?? propsId);
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.RadioItem?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'RadioItem', preset),
+      slotClassesProp
+    )
+  );
+
+  const ctx = getRadioGroupContext();
+
+  const isChecked = $derived(ctx.value === value);
+  const isDisabled = $derived(ctx.disabled || disabledProp);
+  const dataState = $derived(isChecked ? 'checked' : 'unchecked');
+
+  const styles = $derived(
+    radioItemVariants({
+      size: ctx.size,
+      intent: ctx.intent,
+      variant: ctx.variant,
+      tier: ctx.tier,
+      checked: isChecked,
+      disabled: isDisabled || undefined,
+      error: ctx.error || undefined
+    })
+  );
+
+  let controlElement = $state<HTMLElement>();
+
+  $effect(() => {
+    if (controlElement && ctx.mint && ctx.mint !== 'none' && !isDisabled) {
+      return mintRegistry.apply(controlElement, ctx.mint);
+    }
+  });
+
+  function handleChange() {
+    if (isDisabled) return;
+    ctx.select(value);
+  }
+</script>
+
+<label
+  class={unstyled
+    ? [slotClasses?.item, className].filter(Boolean).join(' ')
+    : styles.item({ class: [slotClasses?.item, className] })}
+  bind:this={controlElement}
+  for={id}
+>
+  <input
+    {id}
+    type="radio"
+    name={ctx.name}
+    {value}
+    checked={isChecked}
+    disabled={isDisabled}
+    class="peer sr-only"
+    tabindex={isChecked || (!ctx.value && !isDisabled) ? 0 : -1}
+    onchange={handleChange}
+    {...restProps}
+  />
+
+  <span
+    class={unstyled
+      ? (slotClasses?.indicator ?? '')
+      : styles.indicator({ class: slotClasses?.indicator })}
+    aria-hidden="true"
+    data-state={dataState}
+  >
+    <span class={unstyled ? (slotClasses?.dot ?? '') : styles.dot({ class: slotClasses?.dot })}
+    ></span>
+  </span>
+
+  {#if label || description}
+    <span class="flex flex-col">
+      {#if label}
+        <span
+          class={unstyled
+            ? (slotClasses?.label ?? '')
+            : styles.label({ class: slotClasses?.label })}
+        >
+          {label}
+        </span>
+      {/if}
+      {#if description}
+        <span
+          class={unstyled
+            ? (slotClasses?.description ?? '')
+            : styles.description({ class: slotClasses?.description })}
+        >
+          {description}
+        </span>
+      {/if}
+    </span>
+  {/if}
+</label>

package/dist/primitives/RadioGroup/RadioItem.svelte.d.ts

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

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

@@ -0,0 +1,126 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { MintProp } from '../../mint';
+import type { InteractiveTier } from '../../utils';
+import type { RadioItemVariants } from './radioGroup.variants';
+/**
+ * @description Accessible radio group for single-option selection with semantic intents and form integration.
+ * Uses native radio inputs for correct form behavior and ARIA semantics with keyboard navigation.
+ *
+ * @tag form
+ * @related Checkbox
+ * @related Select
+ *
+ * @example
+ * ```svelte
+ * <RadioGroup label="Plan" bind:value={plan}>
+ *   <RadioItem value="free" label="Free" />
+ *   <RadioItem value="pro" label="Pro" description="Best for teams" />
+ * </RadioGroup>
+ * ```
+ */
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> {
+    /** RadioItem children to render inside the group. */
+    children: Snippet;
+    /** Currently selected value. Supports two-way binding via `bind:value`. */
+    value?: string;
+    /** Shared `name` attribute for all radio inputs. Auto-generated if omitted. */
+    name?: string;
+    /** Stack direction for the radio items. @default 'vertical' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Visual size propagated to all child RadioItems. @default 'md' */
+    size?: RadioItemVariants['size'];
+    /** Semantic color propagated to all child RadioItems. @default 'primary' */
+    intent?: RadioItemVariants['intent'];
+    /** Visual weight propagated to all child RadioItems. @default 'outlined' */
+    variant?: RadioItemVariants['variant'];
+    /**
+     * Semantic radius tier propagated to every RadioItem. Default `commit`
+     * — radio indicators read as identity circles. Set to `modify` (or
+     * inherit via TierContext from a wrapping `<Toolbar tier="modify">`)
+     * for inline-toolbar contexts where a circle feels oversized.
+     *
+     * @default 'commit'
+     */
+    tier?: InteractiveTier;
+    /** Disable all radio items in the group. */
+    disabled?: boolean;
+    /** Mark the group as required for form validation. Adds an asterisk to the label. */
+    required?: boolean;
+    /** Error message below the group. Replaces `helper` and sets `aria-invalid`. */
+    error?: string;
+    /** Hint text below the group. Hidden when `error` is set. */
+    helper?: string;
+    /** Group label displayed above the radio items. */
+    label?: string;
+    /** Fired after the selected value changes. Receives the new value. */
+    onValueChange?: (value: string) => void;
+    /** Extra classes merged onto the root wrapper element. */
+    class?: string;
+    /** Remove all default tv() classes. Only user-provided classes apply. */
+    unstyled?: boolean;
+    /** Per-slot class overrides merged with tv() styles. */
+    slotClasses?: Partial<Record<'root' | 'group' | 'label' | 'message', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ RadioGroup: {...} }}>`.
+     * 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 propagated to child RadioItems. @default 'none' */
+    mint?: MintProp;
+    /** Explicit `id` for the group element. Auto-generated if omitted. */
+    id?: string;
+}
+/** Reactive context exposed to child RadioItem components via `getRadioGroupContext()`. */
+export interface RadioGroupContext {
+    readonly name: string;
+    readonly size: NonNullable<RadioItemVariants['size']>;
+    readonly intent: NonNullable<RadioItemVariants['intent']>;
+    readonly variant: NonNullable<RadioItemVariants['variant']>;
+    readonly tier: InteractiveTier;
+    readonly disabled: boolean;
+    readonly error: boolean;
+    readonly value: string | undefined;
+    readonly mint: MintProp;
+    select: (value: string) => void;
+}
+/**
+ * Individual radio option inside a RadioGroup.
+ * Renders a hidden native `<input type="radio">` for form semantics and a styled visual indicator.
+ * The indicator exposes a `data-state` attribute (`checked | unchecked`) for CSS-based custom styling.
+ *
+ * @example
+ * ```svelte
+ * <RadioItem value="dark" label="Dark Mode" description="Easier on the eyes" />
+ * ```
+ */
+export interface RadioItemProps extends Omit<HTMLInputAttributes, 'type' | 'size' | 'checked' | 'class' | 'children' | 'value'> {
+    /** The value submitted when this item is selected. Must be unique within the group. */
+    value: string;
+    /** Text label displayed next to the radio indicator. */
+    label?: string;
+    /** Secondary text below the label for additional context. */
+    description?: string;
+    /** Disable this individual item (in addition to group-level `disabled`). */
+    disabled?: boolean;
+    /** Extra classes merged onto the item wrapper element. */
+    class?: string;
+    /** Remove all default tv() classes for this item. */
+    unstyled?: boolean;
+    /** Per-slot class overrides for this item. */
+    slotClasses?: Partial<Record<'item' | 'indicator' | 'dot' | 'label' | 'description', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ RadioItem: {...} }}>`.
+     * 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;
+    /** Explicit `id` for the radio input. Auto-generated if omitted. */
+    id?: string;
+}
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as RadioItem } from './RadioItem.svelte';
+export { type RadioGroupVariants, type RadioItemVariants, radioGroupVariants, radioItemVariants } from './radioGroup.variants';

package/dist/primitives/RadioGroup/index.js

@@ -0,0 +1,3 @@
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as RadioItem } from './RadioItem.svelte';
+export { radioGroupVariants, radioItemVariants } from './radioGroup.variants';

package/dist/primitives/RadioGroup/radioGroup.context.d.ts

@@ -0,0 +1,3 @@
+import type { RadioGroupContext } from './index';
+declare const getRadioGroupContext: () => RadioGroupContext, setRadioGroupContext: (context: RadioGroupContext) => RadioGroupContext;
+export { getRadioGroupContext, setRadioGroupContext };

package/dist/primitives/RadioGroup/radioGroup.context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'svelte';
+const [getRadioGroupContext, setRadioGroupContext] = createContext();
+export { getRadioGroupContext, setRadioGroupContext };