svelora 2.1.0

package/dist/Chip/chip.variants.d.ts

@@ -0,0 +1,418 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const chipVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        error: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+    size: {
+        '3xs': {
+            base: string;
+        };
+        '2xs': {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
+    };
+    position: {
+        'top-right': {
+            base: string;
+        };
+        'bottom-right': {
+            base: string;
+        };
+        'top-left': {
+            base: string;
+        };
+        'bottom-left': {
+            base: string;
+        };
+    };
+    inset: {
+        false: {};
+    };
+    standalone: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+}, undefined, {
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        error: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+    size: {
+        '3xs': {
+            base: string;
+        };
+        '2xs': {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
+    };
+    position: {
+        'top-right': {
+            base: string;
+        };
+        'bottom-right': {
+            base: string;
+        };
+        'top-left': {
+            base: string;
+        };
+        'bottom-left': {
+            base: string;
+        };
+    };
+    inset: {
+        false: {};
+    };
+    standalone: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        error: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+    size: {
+        '3xs': {
+            base: string;
+        };
+        '2xs': {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
+    };
+    position: {
+        'top-right': {
+            base: string;
+        };
+        'bottom-right': {
+            base: string;
+        };
+        'top-left': {
+            base: string;
+        };
+        'bottom-left': {
+            base: string;
+        };
+    };
+    inset: {
+        false: {};
+    };
+    standalone: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ChipVariantProps = VariantProps<typeof chipVariants>;
+export type ChipSlots = keyof ReturnType<typeof chipVariants>;
+export declare const chipDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        color: {
+            primary: {
+                base: string;
+            };
+            secondary: {
+                base: string;
+            };
+            tertiary: {
+                base: string;
+            };
+            success: {
+                base: string;
+            };
+            warning: {
+                base: string;
+            };
+            error: {
+                base: string;
+            };
+            info: {
+                base: string;
+            };
+            surface: {
+                base: string;
+            };
+        };
+        size: {
+            '3xs': {
+                base: string;
+            };
+            '2xs': {
+                base: string;
+            };
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+            '2xl': {
+                base: string;
+            };
+            '3xl': {
+                base: string;
+            };
+        };
+        position: {
+            'top-right': {
+                base: string;
+            };
+            'bottom-right': {
+                base: string;
+            };
+            'top-left': {
+                base: string;
+            };
+            'bottom-left': {
+                base: string;
+            };
+        };
+        inset: {
+            false: {};
+        };
+        standalone: {
+            true: {};
+            false: {
+                base: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string;
+    }, {
+        color: {
+            primary: {
+                base: string;
+            };
+            secondary: {
+                base: string;
+            };
+            tertiary: {
+                base: string;
+            };
+            success: {
+                base: string;
+            };
+            warning: {
+                base: string;
+            };
+            error: {
+                base: string;
+            };
+            info: {
+                base: string;
+            };
+            surface: {
+                base: string;
+            };
+        };
+        size: {
+            '3xs': {
+                base: string;
+            };
+            '2xs': {
+                base: string;
+            };
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+            '2xl': {
+                base: string;
+            };
+            '3xl': {
+                base: string;
+            };
+        };
+        position: {
+            'top-right': {
+                base: string;
+            };
+            'bottom-right': {
+                base: string;
+            };
+            'top-left': {
+                base: string;
+            };
+            'bottom-left': {
+                base: string;
+            };
+        };
+        inset: {
+            false: {};
+        };
+        standalone: {
+            true: {};
+            false: {
+                base: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string;
+    }>;
+    slots: Partial<Record<ChipSlots, string>>;
+};

package/dist/Chip/chip.variants.js

@@ -0,0 +1,74 @@
+import { tv } from 'tailwind-variants';
+export const chipVariants = tv({
+    slots: {
+        root: 'relative inline-flex items-center justify-center shrink-0',
+        base: 'rounded-full ring ring-surface flex items-center justify-center font-medium whitespace-nowrap'
+    },
+    variants: {
+        color: {
+            primary: { base: 'bg-primary text-on-primary' },
+            secondary: { base: 'bg-secondary text-on-secondary' },
+            tertiary: { base: 'bg-tertiary text-on-tertiary' },
+            success: { base: 'bg-success text-on-success' },
+            warning: { base: 'bg-warning text-on-warning' },
+            error: { base: 'bg-error text-on-error' },
+            info: { base: 'bg-info text-on-info' },
+            surface: { base: 'bg-inverse-surface text-inverse-on-surface' }
+        },
+        size: {
+            '3xs': { base: 'h-[4px] min-w-[4px] text-[4px]' },
+            '2xs': { base: 'h-[5px] min-w-[5px] text-[5px]' },
+            xs: { base: 'h-[6px] min-w-[6px] text-[6px]' },
+            sm: { base: 'h-[7px] min-w-[7px] text-[7px]' },
+            md: { base: 'h-[8px] min-w-[8px] text-[8px]' },
+            lg: { base: 'h-[9px] min-w-[9px] text-[9px]' },
+            xl: { base: 'h-[10px] min-w-[10px] text-[10px]' },
+            '2xl': { base: 'h-[11px] min-w-[11px] text-[11px]' },
+            '3xl': { base: 'h-[12px] min-w-[12px] text-[12px]' }
+        },
+        position: {
+            'top-right': { base: 'top-0 right-0' },
+            'bottom-right': { base: 'bottom-0 right-0' },
+            'top-left': { base: 'top-0 left-0' },
+            'bottom-left': { base: 'bottom-0 left-0' }
+        },
+        inset: {
+            false: {}
+        },
+        standalone: {
+            true: {},
+            false: { base: 'absolute' }
+        }
+    },
+    compoundVariants: [
+        {
+            position: 'top-right',
+            inset: false,
+            class: { base: '-translate-y-1/2 translate-x-1/2' }
+        },
+        {
+            position: 'bottom-right',
+            inset: false,
+            class: { base: 'translate-y-1/2 translate-x-1/2' }
+        },
+        {
+            position: 'top-left',
+            inset: false,
+            class: { base: '-translate-y-1/2 -translate-x-1/2' }
+        },
+        {
+            position: 'bottom-left',
+            inset: false,
+            class: { base: 'translate-y-1/2 -translate-x-1/2' }
+        }
+    ],
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        position: 'top-right'
+    }
+});
+export const chipDefaults = {
+    defaultVariants: chipVariants.defaultVariants,
+    slots: {}
+};

package/dist/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Chip } from './Chip.svelte';
+export type { ChipProps } from './chip.types.js';

package/dist/Chip/index.js

@@ -0,0 +1 @@
+export { default as Chip } from './Chip.svelte';

package/dist/Collapsible/Collapsible.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+    import type { CollapsibleProps } from './collapsible.types.js'
+
+    export type Props = CollapsibleProps
+</script>
+
+<script lang="ts">
+    import { Collapsible } from 'bits-ui'
+    import { getComponentConfig } from '../config.js'
+    import { collapsibleDefaults, collapsibleVariants } from './collapsible.variants.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 = $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: boolean) {
+        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/Collapsible.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { CollapsibleProps } from './collapsible.types.js';
+export type Props = CollapsibleProps;
+import { Collapsible } from 'bits-ui';
+declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "ref" | "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/Collapsible/CollapsibleTestWrapper.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import Collapsible from './Collapsible.svelte'
+    import type { CollapsibleProps } from './collapsible.types.js'
+
+    let { ...props }: Omit<CollapsibleProps, 'trigger' | 'content' | 'children'> = $props()
+</script>
+
+<Collapsible {...props}>
+    {#snippet trigger({ open, props: triggerProps })}
+        <button type="button" {...triggerProps}>
+            {open ? 'Close' : 'Open'}
+        </button>
+    {/snippet}
+    {#snippet content()}
+        <div data-testid="collapsible-body">Collapsible content</div>
+    {/snippet}
+</Collapsible>

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

@@ -0,0 +1,4 @@
+import type { CollapsibleProps } from './collapsible.types.js';
+declare const CollapsibleTestWrapper: import("svelte").Component<Omit<CollapsibleProps, "trigger" | "content" | "children">, {}, "">;
+type CollapsibleTestWrapper = ReturnType<typeof CollapsibleTestWrapper>;
+export default CollapsibleTestWrapper;

package/dist/Collapsible/collapsible.types.d.ts

@@ -0,0 +1,77 @@
+import type { CollapsibleRootProps, CollapsibleRootPropsWithoutHTML } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { CollapsibleSlots } from './collapsible.variants.js';
+/**
+ * Props for the Collapsible component.
+ *
+ * Wraps bits-ui's Collapsible primitives with a themed, slot-based API.
+ *
+ * @example
+ * ```svelte
+ * <Collapsible>
+ *   {#snippet trigger({ open })}
+ *     <Button>{open ? 'Hide' : 'Show'}</Button>
+ *   {/snippet}
+ *   {#snippet content()}
+ *     <p>Collapsible content here</p>
+ *   {/snippet}
+ * </Collapsible>
+ * ```
+ *
+ * @see https://bits-ui.com/docs/components/collapsible
+ */
+export interface CollapsibleProps extends Pick<CollapsibleRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete' | 'disabled'>, Pick<CollapsibleRootProps, 'id' | 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the root element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Override classes for collapsible component slots.
+     *
+     * @example
+     * ```ts
+     * ui={{ root: 'border rounded-lg', content: 'p-4' }}
+     * ```
+     */
+    ui?: Partial<Record<CollapsibleSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Snippet for the trigger element that toggles the collapsible.
+     * Receives `{ open }` to reflect the current state.
+     *
+     * @example
+     * ```svelte
+     * {#snippet trigger({ open })}
+     *   <Button variant="ghost">
+     *     {open ? 'Collapse' : 'Expand'}
+     *   </Button>
+     * {/snippet}
+     * ```
+     */
+    trigger?: Snippet<[{
+        open: boolean;
+        props: Record<string, unknown>;
+    }]>;
+    /**
+     * Snippet for the collapsible content area.
+     *
+     * @example
+     * ```svelte
+     * {#snippet content()}
+     *   <p>Hidden content revealed on expand.</p>
+     * {/snippet}
+     * ```
+     */
+    content?: Snippet;
+    /**
+     * Default slot children. If provided, rendered inside the root
+     * for full custom layouts using bits-ui primitives directly.
+     */
+    children?: Snippet;
+}

package/dist/Collapsible/collapsible.types.js

@@ -0,0 +1 @@
+export {};