sv5ui 2.1.0 → 2.3.0

package/dist/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,142 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { Checkbox, Label, useId } from "bits-ui";
+import { checkboxVariants, checkboxDefaults } from "./checkbox.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
+const config = getComponentConfig("checkbox", checkboxDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  checked = $bindable(false),
+  onCheckedChange,
+  indeterminate = $bindable(false),
+  onIndeterminateChange,
+  ui,
+  id,
+  name,
+  value,
+  color = config.defaultVariants.color,
+  size,
+  variant = config.defaultVariants.variant,
+  indicator = config.defaultVariants.indicator,
+  disabled = false,
+  required = false,
+  loading = false,
+  loadingIcon = icons.loading,
+  icon = icons.check,
+  indeterminateIcon = "lucide:minus",
+  label,
+  description,
+  labelSlot,
+  descriptionSlot,
+  class: className,
+  ...restProps
+} = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const hasError = $derived(
+  formFieldContext?.error !== void 0 && formFieldContext?.error !== false
+);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const autoId = useId();
+const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const isDisabled = $derived(disabled || loading);
+const ariaDescribedBy = $derived(
+  !formFieldContext ? void 0 : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+);
+const resolvedIcon = $derived(loading ? loadingIcon : indeterminate ? indeterminateIcon : icon);
+let containerRef = null;
+function handleCardClick(e) {
+  if (isDisabled) return;
+  if (e.target.closest("button")) return;
+  containerRef?.querySelector("button")?.click();
+}
+const classes = $derived.by(() => {
+  const slots = checkboxVariants({
+    color: resolvedColor,
+    size: resolvedSize,
+    variant,
+    indicator,
+    loading,
+    required,
+    disabled: isDisabled ? true : void 0
+  });
+  return {
+    root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+    base: slots.base({ class: [config.slots.base, ui?.base] }),
+    container: slots.container({ class: [config.slots.container, ui?.container] }),
+    indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+    icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+    wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+    label: slots.label({ class: [config.slots.label, ui?.label] }),
+    description: slots.description({
+      class: [config.slots.description, ui?.description]
+    })
+  };
+});
+</script>
+
+<div
+    {...restProps}
+    bind:this={ref}
+    class={classes.root}
+    onclick={variant === 'card' ? handleCardClick : undefined}
+>
+    <div bind:this={containerRef} class={classes.container}>
+        <Checkbox.Root
+            bind:checked
+            onCheckedChange={(val) => {
+                emit.onChange()
+                onCheckedChange?.(val)
+            }}
+            bind:indeterminate
+            {onIndeterminateChange}
+            onblur={() => emit.onBlur()}
+            onfocus={() => emit.onFocus()}
+            id={resolvedId}
+            name={resolvedName}
+            {value}
+            disabled={isDisabled}
+            {required}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={hasError ? true : undefined}
+            class={classes.base}
+        >
+            {#snippet children({ checked: isChecked, indeterminate: isIndeterminate })}
+                {#if isChecked || isIndeterminate || loading}
+                    <span class={classes.indicator}>
+                        {#if resolvedIcon}
+                            <Icon name={resolvedIcon} class={classes.icon} />
+                        {/if}
+                    </span>
+                {/if}
+            {/snippet}
+        </Checkbox.Root>
+    </div>
+
+    {#if label || description || labelSlot || descriptionSlot}
+        <div class={classes.wrapper}>
+            {#if labelSlot}
+                {@render labelSlot({ label })}
+            {:else if label}
+                {#if variant === 'card'}
+                    <span class={classes.label}>{label}</span>
+                {:else}
+                    <Label.Root for={resolvedId} class={classes.label}>
+                        {label}
+                    </Label.Root>
+                {/if}
+            {/if}
+
+            {#if descriptionSlot}
+                {@render descriptionSlot({ description })}
+            {:else if description}
+                <p class={classes.description}>{description}</p>
+            {/if}
+        </div>
+    {/if}
+</div>

package/dist/{CheckboxGroup → components/CheckboxGroup}/CheckboxGroup.svelte

@@ -1,112 +1,92 @@
-<script lang="ts" module>
-    import type { CheckboxGroupProps } from './checkbox-group.types.js'
-
-    export type Props = CheckboxGroupProps
-</script>
-
-<script lang="ts">
-    import { Checkbox, Label, useId } from 'bits-ui'
-    import { checkboxGroupVariants, checkboxGroupDefaults } from './checkbox-group.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import type { CheckboxGroupItem } from './checkbox-group.types.js'
-
-    const config = getComponentConfig('checkboxGroup', checkboxGroupDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable([]),
-        onValueChange,
-        items = [],
-        ui,
-        id,
-        name,
-        color = config.defaultVariants.color,
-        size,
-        variant = config.defaultVariants.variant,
-        indicator = config.defaultVariants.indicator,
-        orientation = config.defaultVariants.orientation,
-        disabled = false,
-        required = false,
-        loading = false,
-        loadingIcon = icons.loading,
-        icon = icons.check,
-        legend,
-        legendSlot,
-        labelSlot,
-        descriptionSlot,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const autoId = useId()
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const isDisabled = $derived(disabled || loading)
-
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const slots = $derived(
-        checkboxGroupVariants({
-            color: resolvedColor,
-            size: resolvedSize,
-            variant,
-            indicator,
-            orientation,
-            loading,
-            required,
-            disabled: isDisabled ? true : undefined
-        })
-    )
-
-    const layoutClasses = $derived.by(() => ({
-        root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-        fieldset: slots.fieldset({ class: [config.slots.fieldset, ui?.fieldset] }),
-        legend: slots.legend({ class: [config.slots.legend, ui?.legend] }),
-        item: slots.item({ class: [config.slots.item, ui?.item] }),
-        container: slots.container({ class: [config.slots.container, ui?.container] }),
-        wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] })
-    }))
-
-    const elementClasses = $derived.by(() => ({
-        base: slots.base({ class: [config.slots.base, ui?.base] }),
-        indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
-        icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
-        label: slots.label({ class: [config.slots.label, ui?.label] }),
-        description: slots.description({ class: [config.slots.description, ui?.description] })
-    }))
-
-    function toggleItem(itemValue: string, checked: boolean) {
-        if (checked) {
-            value = [...value, itemValue]
-        } else {
-            value = value.filter((v) => v !== itemValue)
-        }
-        emit.onChange()
-        onValueChange?.(value)
-    }
-
-    function handleCardItemClick(e: MouseEvent, btnId: string, itemDisabled: boolean) {
-        if (itemDisabled) return
-        if ((e.target as Element).closest('button')) return
-        document.getElementById(btnId)?.click()
-    }
+<script lang="ts" module></script>
+
+<script lang="ts">import { Checkbox, Label, useId } from "bits-ui";
+import { checkboxGroupVariants, checkboxGroupDefaults } from "./checkbox-group.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
+const config = getComponentConfig("checkboxGroup", checkboxGroupDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  value = $bindable([]),
+  onValueChange,
+  items = [],
+  ui,
+  id,
+  name,
+  color = config.defaultVariants.color,
+  size,
+  variant = config.defaultVariants.variant,
+  indicator = config.defaultVariants.indicator,
+  orientation = config.defaultVariants.orientation,
+  disabled = false,
+  required = false,
+  loading = false,
+  loadingIcon = icons.loading,
+  icon = icons.check,
+  legend,
+  legendSlot,
+  labelSlot,
+  descriptionSlot,
+  class: className,
+  ...restProps
+} = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const hasError = $derived(
+  formFieldContext?.error !== void 0 && formFieldContext?.error !== false
+);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const autoId = useId();
+const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const isDisabled = $derived(disabled || loading);
+const ariaDescribedBy = $derived(
+  !formFieldContext ? void 0 : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+);
+const slots = $derived(
+  checkboxGroupVariants({
+    color: resolvedColor,
+    size: resolvedSize,
+    variant,
+    indicator,
+    orientation,
+    loading,
+    required,
+    disabled: isDisabled ? true : void 0
+  })
+);
+const layoutClasses = $derived.by(() => ({
+  root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+  fieldset: slots.fieldset({ class: [config.slots.fieldset, ui?.fieldset] }),
+  legend: slots.legend({ class: [config.slots.legend, ui?.legend] }),
+  item: slots.item({ class: [config.slots.item, ui?.item] }),
+  container: slots.container({ class: [config.slots.container, ui?.container] }),
+  wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] })
+}));
+const elementClasses = $derived.by(() => ({
+  base: slots.base({ class: [config.slots.base, ui?.base] }),
+  indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+  icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+  label: slots.label({ class: [config.slots.label, ui?.label] }),
+  description: slots.description({ class: [config.slots.description, ui?.description] })
+}));
+function toggleItem(itemValue, checked) {
+  if (checked) {
+    value = [...value, itemValue];
+  } else {
+    value = value.filter((v) => v !== itemValue);
+  }
+  emit.onChange();
+  onValueChange?.(value);
+}
+function handleCardItemClick(e, btnId, itemDisabled) {
+  if (itemDisabled) return;
+  if (e.target.closest("button")) return;
+  document.getElementById(btnId)?.click();
+}
 </script>
 
 {#snippet itemContent(checkboxItem: CheckboxGroupItem)}

package/dist/components/Chip/Chip.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { chipVariants, chipDefaults } from "./chip.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("chip", chipDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  ui,
+  text,
+  color = config.defaultVariants.color,
+  size = config.defaultVariants.size,
+  position = config.defaultVariants.position,
+  inset = false,
+  standalone = false,
+  show = $bindable(true),
+  class: className,
+  children,
+  content,
+  ...restProps
+} = $props();
+const classes = $derived.by(() => {
+  const slots = chipVariants({ color, size, position, inset, standalone });
+  return {
+    root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+    base: slots.base({ class: [config.slots.base, ui?.base] })
+  };
+});
+</script>
+
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {@render children?.()}
+
+    {#if show}
+        <span class={classes.base}>
+            {#if content}
+                {@render content()}
+            {:else if text !== undefined}
+                {text}
+            {/if}
+        </span>
+    {/if}
+</svelte:element>

package/dist/components/Collapsible/Collapsible.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { Collapsible } from "bits-ui";
+import { collapsibleVariants, collapsibleDefaults } from "./collapsible.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("collapsible", collapsibleDefaults);
+let {
+  ref = $bindable(null),
+  open = $bindable(false),
+  onOpenChange,
+  onOpenChangeComplete,
+  disabled = false,
+  trigger: triggerSlot,
+  content: contentSlot,
+  children,
+  ui,
+  class: className,
+  ...restProps
+} = $props();
+const slots = $derived(collapsibleVariants({ disabled }));
+const classes = $derived.by(() => {
+  const u = ui ?? {};
+  return {
+    root: slots.root({ class: [config.slots.root, className, u.root] }),
+    content: slots.content({ class: [config.slots.content, u.content] })
+  };
+});
+function handleOpenChange(value) {
+  open = value;
+  onOpenChange?.(value);
+}
+</script>
+
+<Collapsible.Root
+    {...restProps}
+    bind:ref
+    {open}
+    onOpenChange={handleOpenChange}
+    {onOpenChangeComplete}
+    {disabled}
+    class={classes.root}
+>
+    {#if triggerSlot}
+        <Collapsible.Trigger>
+            {#snippet child({ props })}
+                {@render triggerSlot({ open, props })}
+            {/snippet}
+        </Collapsible.Trigger>
+    {/if}
+
+    {#if contentSlot}
+        <Collapsible.Content class={classes.content}>
+            {@render contentSlot()}
+        </Collapsible.Content>
+    {/if}
+
+    {#if children}
+        {@render children()}
+    {/if}
+</Collapsible.Root>

package/dist/{Collapsible → components/Collapsible}/CollapsibleTestWrapper.svelte

@@ -1,8 +1,5 @@
-<script lang="ts">
-    import Collapsible from './Collapsible.svelte'
-    import type { CollapsibleProps } from './collapsible.types.js'
-
-    let { ...props }: Omit<CollapsibleProps, 'trigger' | 'content' | 'children'> = $props()
+<script lang="ts">import Collapsible from "./Collapsible.svelte";
+let { ...props } = $props();
 </script>
 
 <Collapsible {...props}>

package/dist/{Command → components/Command}/Command.svelte

@@ -1,82 +1,73 @@
-<script lang="ts" module>
-    import type { CommandProps } from './command.types.js'
+<script lang="ts" module></script>
 
-    export type Props = CommandProps
-</script>
-
-<script lang="ts">
-    import { Command } from 'bits-ui'
-    import { commandVariants, commandDefaults } from './command.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-
-    const config = getComponentConfig('command', commandDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(''),
-        search = $bindable(''),
-        onValueChange,
-        groups = [],
-        placeholder = 'Type a command or search...',
-        loading = false,
-        emptyText = 'No results found.',
-        icon,
-        label,
-        filter,
-        shouldFilter = true,
-        loop = false,
-        vimBindings = true,
-        size = config.defaultVariants.size,
-        item: itemSlot,
-        itemLeading: itemLeadingSlot,
-        itemLabel: itemLabelSlot,
-        itemTrailing: itemTrailingSlot,
-        empty: emptySlot,
-        footer: footerSlot,
-        ui,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const slots = $derived(commandVariants({ size }))
-    const classes = $derived.by(() => {
-        const u = ui ?? {}
-        return {
-            root: slots.root({ class: [config.slots.root, className, u.root] }),
-            inputWrapper: slots.inputWrapper({
-                class: [config.slots.inputWrapper, u.inputWrapper]
-            }),
-            inputIcon: slots.inputIcon({ class: [config.slots.inputIcon, u.inputIcon] }),
-            input: slots.input({ class: [config.slots.input, u.input] }),
-            list: slots.list({ class: [config.slots.list, u.list] }),
-            empty: slots.empty({ class: [config.slots.empty, u.empty] }),
-            loading: slots.loading({ class: [config.slots.loading, u.loading] }),
-            group: slots.group({ class: [config.slots.group, u.group] }),
-            groupHeading: slots.groupHeading({
-                class: [config.slots.groupHeading, u.groupHeading]
-            }),
-            groupItems: slots.groupItems({ class: [config.slots.groupItems, u.groupItems] }),
-            separator: slots.separator({ class: [config.slots.separator, u.separator] }),
-            item: slots.item({ class: [config.slots.item, u.item] }),
-            itemIcon: slots.itemIcon({ class: [config.slots.itemIcon, u.itemIcon] }),
-            itemWrapper: slots.itemWrapper({ class: [config.slots.itemWrapper, u.itemWrapper] }),
-            itemLabel: slots.itemLabel({ class: [config.slots.itemLabel, u.itemLabel] }),
-            itemDescription: slots.itemDescription({
-                class: [config.slots.itemDescription, u.itemDescription]
-            }),
-            itemTrailing: slots.itemTrailing({
-                class: [config.slots.itemTrailing, u.itemTrailing]
-            }),
-            footer: slots.footer({ class: [config.slots.footer, u.footer] })
-        }
-    })
-
-    function handleValueChange(v: string) {
-        value = v
-        onValueChange?.(v)
-    }
+<script lang="ts">import { Command } from "bits-ui";
+import { commandVariants, commandDefaults } from "./command.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+const config = getComponentConfig("command", commandDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  value = $bindable(""),
+  search = $bindable(""),
+  onValueChange,
+  groups = [],
+  placeholder = "Type a command or search...",
+  loading = false,
+  emptyText = "No results found.",
+  icon,
+  label,
+  filter,
+  shouldFilter = true,
+  loop = false,
+  vimBindings = true,
+  size = config.defaultVariants.size,
+  item: itemSlot,
+  itemLeading: itemLeadingSlot,
+  itemLabel: itemLabelSlot,
+  itemTrailing: itemTrailingSlot,
+  empty: emptySlot,
+  footer: footerSlot,
+  ui,
+  class: className,
+  ...restProps
+} = $props();
+const slots = $derived(commandVariants({ size }));
+const classes = $derived.by(() => {
+  const u = ui ?? {};
+  return {
+    root: slots.root({ class: [config.slots.root, className, u.root] }),
+    inputWrapper: slots.inputWrapper({
+      class: [config.slots.inputWrapper, u.inputWrapper]
+    }),
+    inputIcon: slots.inputIcon({ class: [config.slots.inputIcon, u.inputIcon] }),
+    input: slots.input({ class: [config.slots.input, u.input] }),
+    list: slots.list({ class: [config.slots.list, u.list] }),
+    empty: slots.empty({ class: [config.slots.empty, u.empty] }),
+    loading: slots.loading({ class: [config.slots.loading, u.loading] }),
+    group: slots.group({ class: [config.slots.group, u.group] }),
+    groupHeading: slots.groupHeading({
+      class: [config.slots.groupHeading, u.groupHeading]
+    }),
+    groupItems: slots.groupItems({ class: [config.slots.groupItems, u.groupItems] }),
+    separator: slots.separator({ class: [config.slots.separator, u.separator] }),
+    item: slots.item({ class: [config.slots.item, u.item] }),
+    itemIcon: slots.itemIcon({ class: [config.slots.itemIcon, u.itemIcon] }),
+    itemWrapper: slots.itemWrapper({ class: [config.slots.itemWrapper, u.itemWrapper] }),
+    itemLabel: slots.itemLabel({ class: [config.slots.itemLabel, u.itemLabel] }),
+    itemDescription: slots.itemDescription({
+      class: [config.slots.itemDescription, u.itemDescription]
+    }),
+    itemTrailing: slots.itemTrailing({
+      class: [config.slots.itemTrailing, u.itemTrailing]
+    }),
+    footer: slots.footer({ class: [config.slots.footer, u.footer] })
+  };
+});
+function handleValueChange(v) {
+  value = v;
+  onValueChange?.(v);
+}
 </script>
 
 <Command.Root

package/dist/components/Command/CommandTestWrapper.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">import Command from "./Command.svelte";
+let {
+  ...props
+} = $props();
+</script>
+
+<Command {...props} />

package/dist/components/Container/Container.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { containerVariants, containerDefaults } from "./container.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("container", containerDefaults);
+const slots = containerVariants();
+let { as = "div", ui, class: className, children, ...restProps } = $props();
+const rootClass = $derived(slots.root({ class: [config.slots.root, className, ui?.root] }));
+</script>
+
+<svelte:element this={as} class={rootClass} {...restProps}>
+    {@render children?.()}
+</svelte:element>