@urbicon-ui/blocks 6.1.4

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

@@ -0,0 +1,192 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const radioGroupVariants: (props?: import("../../utils/variants").TVProps<{
+    orientation: {
+        horizontal: {
+            group: string;
+        };
+        vertical: {
+            group: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            message: string;
+        };
+    };
+    disabled: {
+        true: {};
+    };
+}> | undefined) => {
+    root: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        required?: boolean | undefined;
+        error?: boolean | undefined;
+        disabled?: 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;
+    group: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        required?: boolean | undefined;
+        error?: boolean | undefined;
+        disabled?: 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?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        required?: boolean | undefined;
+        error?: boolean | undefined;
+        disabled?: 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?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        required?: boolean | undefined;
+        error?: boolean | undefined;
+        disabled?: 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 declare const radioItemVariants: (props?: import("../../utils/variants").TVProps<{
+    tier: {
+        commit: {
+            indicator: string;
+            dot: string;
+        };
+        modify: {
+            indicator: string;
+            dot: string;
+        };
+    };
+    size: {
+        xs: {
+            item: string;
+            indicator: string;
+            dot: string;
+            label: string;
+            description: string;
+        };
+        sm: {
+            item: string;
+            indicator: string;
+            dot: string;
+            label: string;
+            description: string;
+        };
+        md: {
+            item: string;
+            indicator: string;
+            dot: string;
+            label: string;
+            description: string;
+        };
+        lg: {
+            item: string;
+            indicator: string;
+            dot: string;
+            label: string;
+            description: string;
+        };
+    };
+    intent: {
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        neutral: {};
+    };
+    variant: {
+        outlined: {};
+        filled: {};
+        ghost: {};
+    };
+    checked: {
+        true: {
+            dot: string;
+        };
+    };
+    disabled: {
+        true: {
+            item: string;
+        };
+    };
+    error: {
+        true: {};
+    };
+}> | undefined) => {
+    item: (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;
+        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;
+    indicator: (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;
+        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;
+    dot: (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;
+        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;
+        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;
+    description: (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;
+        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 RadioGroupVariants = VariantProps<typeof radioGroupVariants>;
+export type RadioItemVariants = VariantProps<typeof radioItemVariants>;

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

@@ -0,0 +1,188 @@
+import { tv } from '../../utils/variants';
+export const radioGroupVariants = tv({
+    slots: {
+        root: ['flex flex-col gap-1.5'],
+        group: ['flex gap-3'],
+        label: ['block font-medium text-text-secondary text-sm'],
+        message: ['text-xs text-text-tertiary']
+    },
+    variants: {
+        orientation: {
+            horizontal: { group: 'flex-row flex-wrap' },
+            vertical: { group: 'flex-col' }
+        },
+        required: {
+            true: {
+                label: "after:content-['*'] after:ml-1 after:text-danger"
+            }
+        },
+        error: {
+            true: {
+                message: 'text-danger'
+            }
+        },
+        disabled: {
+            true: {}
+        }
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+        required: false,
+        error: false,
+        disabled: false
+    }
+});
+export const radioItemVariants = tv({
+    slots: {
+        item: ['group inline-flex items-start gap-2 select-none cursor-pointer'],
+        // Geometry tier moves to the `tier` variant below. Default `commit` —
+        // a radio indicator declares status, conventionally circular.
+        indicator: [
+            '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'
+        ],
+        dot: [
+            'opacity-0 scale-0',
+            'transition-[opacity,transform] duration-[var(--blocks-duration-fast)] ease-out'
+        ],
+        label: ['text-text-primary select-none leading-snug'],
+        description: ['text-text-tertiary leading-snug']
+    },
+    variants: {
+        // 3-tier semantic radius. Default `commit` (circle) — the canonical
+        // radio shape (Material, HIG, Carbon). `modify` produces a soft-
+        // rectangle indicator + dot for compact inline-toolbar contexts where
+        // the circle would feel oversized — usually inherited from the
+        // wrapping RadioGroup's `tier`-prop / TierContext.
+        tier: {
+            commit: { indicator: 'rounded-commit', dot: 'rounded-commit' },
+            modify: { indicator: 'rounded-modify', dot: 'rounded-modify' }
+        },
+        size: {
+            xs: {
+                item: 'gap-1.5',
+                indicator: 'w-3.5 h-3.5 mt-px',
+                dot: 'w-1.5 h-1.5',
+                label: 'text-xs',
+                description: 'text-[10px]'
+            },
+            sm: {
+                item: 'gap-2',
+                indicator: 'w-4 h-4 mt-0.5',
+                dot: 'w-2 h-2',
+                label: 'text-sm',
+                description: 'text-xs'
+            },
+            md: {
+                item: 'gap-2.5',
+                indicator: 'w-5 h-5 mt-0.5',
+                dot: 'w-2.5 h-2.5',
+                label: 'text-base',
+                description: 'text-sm'
+            },
+            lg: {
+                item: 'gap-3',
+                indicator: 'w-6 h-6 mt-0.5',
+                dot: 'w-3 h-3',
+                label: 'text-lg',
+                description: 'text-base'
+            }
+        },
+        intent: {
+            primary: {},
+            secondary: {},
+            success: {},
+            warning: {},
+            danger: {},
+            neutral: {}
+        },
+        variant: {
+            outlined: {},
+            filled: {},
+            ghost: {}
+        },
+        checked: {
+            true: {
+                dot: 'opacity-100 scale-100'
+            }
+        },
+        disabled: {
+            true: {
+                item: 'opacity-50 cursor-not-allowed pointer-events-none'
+            }
+        },
+        error: {
+            true: {}
+        }
+    },
+    compoundVariants: [
+        // Unchecked appearance per variant
+        {
+            checked: false,
+            variant: 'outlined',
+            class: {
+                indicator: 'bg-surface-base border-border-default group-hover:border-border-emphasis'
+            }
+        },
+        {
+            checked: false,
+            variant: 'filled',
+            class: {
+                indicator: 'bg-surface-subtle border-border-subtle group-hover:border-border-default'
+            }
+        },
+        {
+            checked: false,
+            variant: 'ghost',
+            class: { indicator: 'bg-transparent border-transparent group-hover:bg-surface-subtle' }
+        },
+        // Checked intent colors
+        {
+            checked: true,
+            intent: 'primary',
+            class: { indicator: 'bg-primary border-primary', dot: 'bg-text-on-primary' }
+        },
+        {
+            checked: true,
+            intent: 'secondary',
+            class: { indicator: 'bg-secondary border-secondary', dot: 'bg-text-on-primary' }
+        },
+        {
+            checked: true,
+            intent: 'success',
+            class: { indicator: 'bg-success border-success', dot: 'bg-text-on-primary' }
+        },
+        {
+            checked: true,
+            intent: 'warning',
+            class: { indicator: 'bg-warning border-warning', dot: 'bg-neutral-900' }
+        },
+        {
+            checked: true,
+            intent: 'danger',
+            class: { indicator: 'bg-danger border-danger', dot: 'bg-text-on-primary' }
+        },
+        {
+            checked: true,
+            intent: 'neutral',
+            class: { indicator: 'bg-neutral border-neutral', dot: 'bg-text-on-primary' }
+        },
+        // Error overrides unchecked border
+        {
+            error: true,
+            checked: false,
+            class: { indicator: 'border-danger peer-focus-visible:ring-danger/40' }
+        }
+    ],
+    defaultVariants: {
+        tier: 'commit',
+        size: 'md',
+        intent: 'primary',
+        variant: 'outlined',
+        checked: false,
+        disabled: false,
+        error: false
+    }
+});

package/dist/primitives/SegmentGroup/SegmentGroup.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import { SvelteMap } from 'svelte/reactivity';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getTierContext } from '../../utils';
+  import { segmentGroupVariants } from './segmentgroup.variants';
+  import { setSegmentGroupContext } from './segmentGroup.context';
+  import type { SegmentGroupContext, SegmentGroupProps } from './index';
+
+  let {
+    children,
+    value = $bindable(),
+    onValueChange,
+    size = 'md',
+    appearance = 'default',
+    tier,
+    fullWidth = false,
+    disabled = false,
+    mint = 'none',
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ariaLabel,
+    ...restProps
+  }: SegmentGroupProps = $props();
+
+  // Tier precedence (closest wins): own prop → TierContext (Toolbar /
+  // ButtonGroup) → 'commit' default. Propagated through SegmentGroupContext
+  // so the indicator + every item shares the same radius family.
+  const tierCtx = getTierContext();
+  const effectiveTier = $derived(tier ?? tierCtx?.tier ?? 'commit');
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.SegmentGroup?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'SegmentGroup', preset),
+      slotClassesProp
+    )
+  );
+
+  let containerElement = $state<HTMLDivElement>();
+  let indicatorStyle = $state('opacity: 0;');
+  // SvelteMap instead of `$state(new Map())` — `.set()`/`.delete()` must be
+  // reactive so the indicator updates when new items register.
+  const registeredItems = new SvelteMap<string, HTMLElement>();
+
+  const styles = $derived(
+    segmentGroupVariants({ size, appearance, tier: effectiveTier, fullWidth, disabled })
+  );
+
+  function updateIndicator() {
+    if (!containerElement || !value) {
+      indicatorStyle = 'opacity: 0;';
+      return;
+    }
+
+    const activeItem = registeredItems.get(value);
+    if (!activeItem) {
+      indicatorStyle = 'opacity: 0;';
+      return;
+    }
+
+    const containerRect = containerElement.getBoundingClientRect();
+    const itemRect = activeItem.getBoundingClientRect();
+
+    const left = itemRect.left - containerRect.left;
+    const top = itemRect.top - containerRect.top;
+    const width = itemRect.width;
+    const height = itemRect.height;
+
+    indicatorStyle = `left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px; opacity: 1;`;
+  }
+
+  const segmentContext: SegmentGroupContext = {
+    registerItem(itemValue: string, element: HTMLElement) {
+      registeredItems.set(itemValue, element);
+      requestAnimationFrame(updateIndicator);
+
+      return () => {
+        registeredItems.delete(itemValue);
+      };
+    },
+
+    selectItem(itemValue: string) {
+      if (disabled) return;
+      value = itemValue;
+      onValueChange?.(itemValue);
+      requestAnimationFrame(updateIndicator);
+    },
+
+    isActive(itemValue: string) {
+      return value === itemValue;
+    },
+
+    get size() {
+      return size;
+    },
+    get appearance() {
+      return appearance;
+    },
+    get tier() {
+      return effectiveTier;
+    },
+    get disabled() {
+      return disabled;
+    },
+    get unstyled() {
+      return unstyled;
+    },
+    get mint() {
+      return mint;
+    }
+  };
+
+  setSegmentGroupContext(segmentContext);
+
+  $effect(() => {
+    void value;
+    requestAnimationFrame(updateIndicator);
+  });
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (disabled) return;
+
+    const itemValues = Array.from(registeredItems.keys());
+    const currentIndex = value ? itemValues.indexOf(value) : -1;
+    let newIndex: number;
+
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        event.preventDefault();
+        newIndex = (currentIndex + 1) % itemValues.length;
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        event.preventDefault();
+        newIndex = currentIndex - 1 < 0 ? itemValues.length - 1 : currentIndex - 1;
+        break;
+      case 'Home':
+        event.preventDefault();
+        newIndex = 0;
+        break;
+      case 'End':
+        event.preventDefault();
+        newIndex = itemValues.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    if (newIndex !== currentIndex && itemValues[newIndex]) {
+      segmentContext.selectItem(itemValues[newIndex]);
+      const newItem = registeredItems.get(itemValues[newIndex]);
+      newItem?.focus();
+    }
+  }
+</script>
+
+<div
+  bind:this={containerElement}
+  role="radiogroup"
+  class={unstyled
+    ? [slotClasses?.base, className].filter(Boolean).join(' ')
+    : styles.base({ class: [slotClasses?.base, className] })}
+  aria-label={ariaLabel}
+  aria-disabled={disabled || undefined}
+  onkeydown={handleKeyDown}
+  {...restProps}
+>
+  <div
+    class={unstyled
+      ? (slotClasses?.indicator ?? '')
+      : styles.indicator({ class: slotClasses?.indicator })}
+    style={indicatorStyle}
+    aria-hidden="true"
+  ></div>
+
+  {@render children?.()}
+</div>

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

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

package/dist/primitives/SegmentGroup/SegmentItem.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { mintRegistry } from '../..';
+  import { segmentGroupVariants } from './segmentgroup.variants';
+  import { getSegmentGroupContext } from './segmentGroup.context';
+  import type { SegmentItemProps } from './index';
+
+  let {
+    value,
+    children,
+    disabled = false,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: SegmentItemProps = $props();
+
+  const ctx = getSegmentGroupContext();
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || ctx.unstyled || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.SegmentItem?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'SegmentItem', preset),
+      slotClassesProp
+    )
+  );
+
+  let itemElement = $state<HTMLButtonElement>();
+
+  const isActive = $derived(ctx.isActive(value));
+  const isDisabled = $derived(disabled || ctx.disabled);
+
+  const styles = $derived(
+    segmentGroupVariants({ size: ctx.size, appearance: ctx.appearance, tier: ctx.tier })
+  );
+
+  onMount(() => {
+    if (itemElement) {
+      return ctx.registerItem(value, itemElement);
+    }
+  });
+
+  $effect(() => {
+    const mint = ctx.mint;
+    if (itemElement && mint && mint !== 'none' && !isDisabled) {
+      return mintRegistry.apply(itemElement, mint);
+    }
+  });
+
+  function handleClick() {
+    if (!isDisabled) {
+      ctx.selectItem(value);
+    }
+  }
+</script>
+
+<button
+  bind:this={itemElement}
+  type="button"
+  role="radio"
+  class={unstyled
+    ? [slotClasses?.item, className].filter(Boolean).join(' ')
+    : styles.item({ class: [slotClasses?.item, className] })}
+  aria-checked={isActive}
+  tabindex={isActive ? 0 : -1}
+  data-state={isActive ? 'active' : 'inactive'}
+  disabled={isDisabled}
+  onclick={handleClick}
+  {...restProps}
+>
+  {@render children?.()}
+</button>

package/dist/primitives/SegmentGroup/SegmentItem.svelte.d.ts

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