svelora 2.1.0

package/dist/PinInput/pin-input.variants.d.ts

@@ -0,0 +1,303 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const pinInputVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        subtle: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        tertiary: {};
+        success: {};
+        warning: {};
+        error: {};
+        info: {};
+        surface: {};
+    };
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    highlight: {
+        true: {};
+    };
+    fixed: {
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+}, undefined, {
+    variant: {
+        outline: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        subtle: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        tertiary: {};
+        success: {};
+        warning: {};
+        error: {};
+        info: {};
+        surface: {};
+    };
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    highlight: {
+        true: {};
+    };
+    fixed: {
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        subtle: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        tertiary: {};
+        success: {};
+        warning: {};
+        error: {};
+        info: {};
+        surface: {};
+    };
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    highlight: {
+        true: {};
+    };
+    fixed: {
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type PinInputVariantProps = VariantProps<typeof pinInputVariants>;
+export type PinInputSlots = keyof ReturnType<typeof pinInputVariants>;
+export declare const pinInputDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        variant: {
+            outline: {
+                base: string;
+            };
+            soft: {
+                base: string;
+            };
+            subtle: {
+                base: string;
+            };
+            ghost: {
+                base: string;
+            };
+            none: {
+                base: string;
+            };
+        };
+        color: {
+            primary: {};
+            secondary: {};
+            tertiary: {};
+            success: {};
+            warning: {};
+            error: {};
+            info: {};
+            surface: {};
+        };
+        size: {
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+        };
+        highlight: {
+            true: {};
+        };
+        fixed: {
+            false: {};
+        };
+        disabled: {
+            true: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string[];
+    }, {
+        variant: {
+            outline: {
+                base: string;
+            };
+            soft: {
+                base: string;
+            };
+            subtle: {
+                base: string;
+            };
+            ghost: {
+                base: string;
+            };
+            none: {
+                base: string;
+            };
+        };
+        color: {
+            primary: {};
+            secondary: {};
+            tertiary: {};
+            success: {};
+            warning: {};
+            error: {};
+            info: {};
+            surface: {};
+        };
+        size: {
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+        };
+        highlight: {
+            true: {};
+        };
+        fixed: {
+            false: {};
+        };
+        disabled: {
+            true: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string[];
+    }>;
+    slots: Partial<Record<PinInputSlots, string>>;
+};

package/dist/PinInput/pin-input.variants.js

@@ -0,0 +1,196 @@
+import { tv } from 'tailwind-variants';
+export const pinInputVariants = tv({
+    slots: {
+        root: 'relative inline-flex items-center gap-1.5 align-top',
+        base: [
+            'relative flex items-center justify-center rounded-md',
+            'select-none cursor-text transition-colors'
+        ]
+    },
+    variants: {
+        variant: {
+            outline: {
+                base: 'text-on-surface bg-surface ring-2 ring-inset ring-outline-variant'
+            },
+            soft: {
+                base: 'text-on-surface bg-surface-container/50 data-[active]:bg-surface-container disabled:bg-surface-container/50'
+            },
+            subtle: {
+                base: 'text-on-surface bg-surface-container ring-2 ring-inset ring-outline-variant'
+            },
+            ghost: {
+                base: 'text-on-surface bg-transparent data-[active]:bg-surface-container'
+            },
+            none: {
+                base: 'text-on-surface bg-transparent'
+            }
+        },
+        color: {
+            primary: {},
+            secondary: {},
+            tertiary: {},
+            success: {},
+            warning: {},
+            error: {},
+            info: {},
+            surface: {}
+        },
+        size: {
+            xs: { base: 'size-6 text-sm/4' },
+            sm: { base: 'size-7 text-sm/4' },
+            md: { base: 'size-8 text-base/5' },
+            lg: { base: 'size-9 text-base/5' },
+            xl: { base: 'size-10 text-base' }
+        },
+        highlight: {
+            true: {}
+        },
+        fixed: {
+            false: {}
+        },
+        disabled: {
+            true: {
+                root: 'opacity-75 cursor-not-allowed'
+            }
+        }
+    },
+    compoundVariants: [
+        // outline + color → active cell ring
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-primary'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-secondary'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'tertiary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-tertiary'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-success'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-warning'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'error',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-error'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: { base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-info' }
+        },
+        {
+            variant: 'outline',
+            color: 'surface',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-on-surface'
+            }
+        },
+        // subtle + color → active cell ring
+        {
+            variant: 'subtle',
+            color: 'primary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-primary'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'secondary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-secondary'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'tertiary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-tertiary'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'success',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-success'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'warning',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-warning'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'error',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-error'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'info',
+            class: { base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-info' }
+        },
+        {
+            variant: 'subtle',
+            color: 'surface',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-on-surface'
+            }
+        },
+        // highlight + color → all cells always show color ring
+        { highlight: true, color: 'primary', class: { base: 'ring-2 ring-inset ring-primary' } },
+        {
+            highlight: true,
+            color: 'secondary',
+            class: { base: 'ring-2 ring-inset ring-secondary' }
+        },
+        { highlight: true, color: 'tertiary', class: { base: 'ring-2 ring-inset ring-tertiary' } },
+        { highlight: true, color: 'success', class: { base: 'ring-2 ring-inset ring-success' } },
+        { highlight: true, color: 'warning', class: { base: 'ring-2 ring-inset ring-warning' } },
+        { highlight: true, color: 'error', class: { base: 'ring-2 ring-inset ring-error' } },
+        { highlight: true, color: 'info', class: { base: 'ring-2 ring-inset ring-info' } },
+        { highlight: true, color: 'surface', class: { base: 'ring-2 ring-inset ring-on-surface' } },
+        // fixed=false → responsive text (smaller on mobile)
+        { fixed: false, size: 'xs', class: { base: 'md:text-xs' } },
+        { fixed: false, size: 'sm', class: { base: 'md:text-xs' } },
+        { fixed: false, size: 'md', class: { base: 'md:text-sm' } },
+        { fixed: false, size: 'lg', class: { base: 'md:text-sm' } }
+    ],
+    defaultVariants: {
+        variant: 'outline',
+        color: 'primary',
+        size: 'md'
+    }
+});
+export const pinInputDefaults = {
+    defaultVariants: pinInputVariants.defaultVariants,
+    slots: {}
+};

package/dist/Popover/Popover.svelte

@@ -0,0 +1,122 @@
+<script lang="ts" module>
+    import type { PopoverProps } from './popover.types.js'
+
+    export type Props = PopoverProps
+</script>
+
+<script lang="ts">
+    import { Popover } from 'bits-ui'
+    import { getComponentConfig } from '../config.js'
+    import { popoverDefaults, popoverVariants } from './popover.variants.js'
+
+    const config = getComponentConfig('popover', popoverDefaults)
+
+    let {
+        ref = $bindable(null),
+        open = $bindable(false),
+        onOpenChange,
+        onOpenChangeComplete,
+        side = 'bottom',
+        sideOffset = 8,
+        align = 'center',
+        alignOffset = 0,
+        avoidCollisions = true,
+        collisionBoundary,
+        collisionPadding = 8,
+        sticky = 'partial',
+        hideWhenDetached = false,
+        trapFocus = true,
+        preventScroll = false,
+        onOpenAutoFocus,
+        onCloseAutoFocus,
+        onEscapeKeydown,
+        onInteractOutside,
+        forceMount,
+        arrow = false,
+        transition = config.defaultVariants.transition ?? true,
+        portal = true,
+        dismissible = true,
+        ui,
+        class: className,
+        children,
+        content: contentSlot,
+        ...restProps
+    }: Props = $props()
+
+    const variantSlots = $derived(popoverVariants({ transition }))
+    const classes = $derived({
+        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+        arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] })
+    })
+
+    const arrowProps = $derived.by(() => {
+        if (typeof arrow === 'object') {
+            return { width: 12, height: 6, ...arrow }
+        }
+        return { width: 12, height: 6 }
+    })
+
+    const dismissBehavior = $derived(dismissible ? ('close' as const) : ('ignore' as const))
+
+    function close() {
+        open = false
+    }
+</script>
+
+{#snippet popoverContentEl()}
+    <Popover.Content
+        bind:ref
+        {side}
+        {sideOffset}
+        {align}
+        {alignOffset}
+        {avoidCollisions}
+        {collisionBoundary}
+        {collisionPadding}
+        {sticky}
+        {hideWhenDetached}
+        {trapFocus}
+        {preventScroll}
+        escapeKeydownBehavior={dismissBehavior}
+        interactOutsideBehavior={dismissBehavior}
+        {onOpenAutoFocus}
+        {onCloseAutoFocus}
+        {onEscapeKeydown}
+        {onInteractOutside}
+        {forceMount}
+        class={[classes.content, !children ? className : undefined]}
+        {...restProps}
+    >
+        {#if contentSlot}
+            {@render contentSlot({ open, close })}
+        {/if}
+
+        {#if arrow}
+            <Popover.Arrow
+                width={arrowProps.width}
+                height={arrowProps.height}
+                class={classes.arrow}
+            />
+        {/if}
+    </Popover.Content>
+{/snippet}
+
+<Popover.Root bind:open {onOpenChange} {onOpenChangeComplete}>
+    {#if children}
+        <Popover.Trigger>
+            {#snippet child({ props })}
+                <span {...props} class={[className]}>
+                    {@render children({ open })}
+                </span>
+            {/snippet}
+        </Popover.Trigger>
+    {/if}
+
+    {#if portal}
+        <Popover.Portal>
+            {@render popoverContentEl()}
+        </Popover.Portal>
+    {:else}
+        {@render popoverContentEl()}
+    {/if}
+</Popover.Root>

package/dist/Popover/Popover.svelte.d.ts

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

package/dist/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Popover } from './Popover.svelte';
+export type { PopoverProps } from './popover.types.js';

package/dist/Popover/index.js

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

package/dist/Popover/popover.types.d.ts

@@ -0,0 +1,58 @@
+import type { PopoverArrowPropsWithoutHTML, PopoverContentPropsWithoutHTML, PopoverRootPropsWithoutHTML } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { PopoverSlots, PopoverVariantProps } from './popover.variants.js';
+type RootProps = Pick<PopoverRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete'>;
+type ContentProps = Pick<PopoverContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'trapFocus' | 'preventScroll' | 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeydown' | 'onInteractOutside' | 'forceMount'>;
+export interface PopoverProps extends RootProps, ContentProps {
+    /** Custom data attributes are forwarded to the content element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
+    /**
+     * Bindable reference to the content DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Display an arrow alongside the popover.
+     * Can be a boolean or arrow props for customization.
+     * @default false
+     */
+    arrow?: boolean | Pick<PopoverArrowPropsWithoutHTML, 'width' | 'height'>;
+    /**
+     * Animate the popover on open and close.
+     * @default true
+     */
+    transition?: PopoverVariantProps['transition'];
+    /**
+     * Render the popover content in a portal.
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Allow dismissing the popover by clicking outside or pressing Escape.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Additional CSS class for the trigger wrapper.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override classes for popover slots.
+     */
+    ui?: Partial<Record<PopoverSlots, ClassNameValue>>;
+    /**
+     * Default slot content used as the trigger element.
+     * When provided, clicking this element opens the popover.
+     */
+    children?: Snippet<[{
+        open: boolean;
+    }]>;
+    /**
+     * Custom popover content.
+     */
+    content?: Snippet<[{
+        open: boolean;
+        close: () => void;
+    }]>;
+}
+export {};

package/dist/Popover/popover.types.js

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