svelora 2.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 asphum
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,145 @@
+<p align="center">
+  <img src="https://img.shields.io/badge/Svelora-ff3e00?style=for-the-badge&logo=svelte&logoColor=white" alt="Svelora" />
+</p>
+
+<h1 align="center">Svelora</h1>
+
+<p align="center">
+  <strong>Modern UI component library for Svelte 5</strong><br/>
+  Tailwind CSS 4 &middot; OKLCH Color Tokens &middot; Fully Typed &middot; 50+ Components &middot; 7 Hooks
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/svelora"><img src="https://img.shields.io/npm/v/svelora?style=flat-square&colorA=18181b&colorB=ff3e00" alt="npm" /></a>
+  <a href="https://www.npmjs.com/package/svelora"><img src="https://img.shields.io/npm/dm/svelora?style=flat-square&colorA=18181b&colorB=ff3e00" alt="downloads" /></a>
+  <a href="https://github.com/asphum/svelora/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/svelora?style=flat-square&colorA=18181b&colorB=ff3e00" alt="license" /></a>
+</p>
+
+<p align="center">
+  <a href="https://svelora.vercel.app"><strong>Live Demo</strong></a> &middot;
+  <a href="https://svelora.vercel.app/getting-started"><strong>Getting Started</strong></a> &middot;
+  <a href="https://github.com/asphum/svelora/blob/main/CHANGELOG.md"><strong>Changelog</strong></a>
+</p>
+
+---
+
+## Install
+
+```bash
+npm install svelora
+# pnpm add svelora
+# yarn add svelora
+# bun add svelora
+```
+
+```svelte
+<script lang="ts">
+    import 'svelora/theme.css'
+    import { ModeWatcher } from 'svelora'
+</script>
+
+<ModeWatcher />
+```
+
+```css
+/* layout.css */
+@import 'svelora/theme.css';
+```
+
+```svelte
+<script lang="ts">
+    import { Avatar, Button, ModeWatcher, toggleMode, toast } from 'svelora'
+</script>
+
+<ModeWatcher />
+<Button variant="soft" color="primary" leadingIcon="lucide:edit">Edit</Button>
+<Button variant="ghost" color="secondary" onclick={toggleMode}>Toggle theme</Button>
+<Avatar src="/photo.jpg" alt="Jane" size="lg" />
+```
+
+## Features
+
+- **Svelte 5** — Runes, snippets, latest reactivity
+- **Tailwind CSS 4** — Utility-first with [Tailwind Variants](https://www.tailwind-variants.org/)
+- **Fully Typed** — Strict TypeScript, exported prop types
+- **Accessible** — Built on [Bits UI](https://bits-ui.com) & [Vaul Svelte](https://vaul-svelte.com)
+- **200,000+ Icons** — [Iconify](https://iconify.design) integration
+- **Themeable** — OKLCH color tokens, light/dark mode, global config
+- **Hooks** — 7 reactive hooks for common UI patterns
+
+## Hooks
+
+Reactive hooks built on Svelte 5 runes and actions.
+
+```svelte
+<script>
+    import { useMediaQuery, useClipboard, useDebounce } from 'svelora'
+
+    const isMobile = useMediaQuery('(max-width: 640px)')
+    const clipboard = useClipboard()
+    const debounce = useDebounce({ delay: 500 })
+</script>
+
+{#if isMobile.matches}
+    <MobileLayout />
+{/if}
+
+<Button onclick={() => clipboard.copy('Hello!')}>
+    {clipboard.copied ? 'Copied!' : 'Copy'}
+</Button>
+```
+
+| Hook                | Type           | Description                                    |
+| ------------------- | -------------- | ---------------------------------------------- |
+| `useMediaQuery`     | Runes          | Reactive CSS media query tracking              |
+| `useClipboard`      | Runes          | Copy text with auto-reset state                |
+| `useFormField`      | Context        | Access FormField context from child components |
+| `useDebounce`       | Runes          | Debounce with pending, cancel, flush           |
+| `useClickOutside`   | Action         | Detect clicks outside an element               |
+| `useInfiniteScroll` | Runes + Action | Auto-load on scroll with loading state         |
+| `useEscapeKeydown`  | Action         | Listen for Escape key                          |
+
+## Customization
+
+```svelte
+<!-- Per-instance -->
+<Button ui={{ base: 'rounded-full shadow-lg' }}>Custom</Button>
+```
+
+```ts
+// Global defaults
+import { defineConfig } from 'svelora'
+
+defineConfig({
+    button: { defaultVariants: { variant: 'outline' } },
+    icons: { loading: 'lucide:loader' }
+})
+```
+
+```css
+/* Custom colors */
+:root {
+    --color-primary: oklch(0.55 0.25 270);
+}
+```
+
+## Publish
+
+```bash
+bun run release:verify
+```
+
+```bash
+npm login
+npm publish --access public
+```
+
+If you want to include the full test suite before publishing:
+
+```bash
+bun run release:verify:full
+```
+
+## License
+
+[MIT](LICENSE) &copy; [asphum](https://github.com/asphum)

package/dist/Accordion/Accordion.svelte

@@ -0,0 +1,207 @@
+<script lang="ts" module>
+    import type { AccordionItem, AccordionProps } from './accordion.types.js'
+
+    export type Props = AccordionProps
+</script>
+
+<script lang="ts">
+    import { Accordion } from 'bits-ui'
+    import { slide } from 'svelte/transition'
+    import { getComponentConfig } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { accordionDefaults, accordionVariants } from './accordion.variants.js'
+
+    const config = getComponentConfig('accordion', accordionDefaults)
+
+    let {
+        items = [],
+        type = 'single',
+        value = $bindable(),
+        onValueChange,
+        disabled = false,
+        loop = false,
+        orientation = 'vertical',
+        forceMount = false,
+        trailingIcon = 'lucide:chevron-down',
+        ui,
+        class: className,
+        leading,
+        label: labelSlot,
+        trailing,
+        content: contentSlot,
+        body: bodySlot
+    }: Props = $props()
+
+    const variantSlots = $derived(accordionVariants({ disabled }))
+    const rootClass = $derived(
+        variantSlots.root({ class: [config.slots.root, ui?.root, className] })
+    )
+
+    const singleValue = $derived(typeof value === 'string' ? value : undefined)
+    const multipleValue = $derived(Array.isArray(value) ? value : undefined)
+
+    const slotNames = [
+        'item',
+        'header',
+        'trigger',
+        'content',
+        'body',
+        'leadingIcon',
+        'trailingIcon',
+        'label'
+    ] as const
+
+    type SlotName = (typeof slotNames)[number]
+
+    const itemDefaults = $derived.by(() => {
+        const result = {} as Record<SlotName, string>
+        for (const slot of slotNames) {
+            result[slot] = variantSlots[slot]({ class: [config.slots[slot], ui?.[slot]] })
+        }
+        return result
+    })
+
+    function getItemClasses(item: AccordionItem) {
+        if (!item.ui && item.class === undefined && item.disabled === undefined) {
+            return itemDefaults
+        }
+        const result = {} as Record<SlotName, string>
+        for (const slot of slotNames) {
+            const baseClass = [
+                config.slots[slot],
+                ui?.[slot],
+                item.ui?.[slot],
+                slot === 'item' ? item.class : undefined
+            ]
+            const opts =
+                slot === 'trigger'
+                    ? { class: baseClass, disabled: item.disabled }
+                    : { class: baseClass }
+            result[slot] = variantSlots[slot](opts)
+        }
+        return result
+    }
+
+    function isOpen(itemValue: string): boolean {
+        if (!value) return false
+        if (Array.isArray(value)) return value.includes(itemValue)
+        return value === itemValue
+    }
+
+    function handleSingleValueChange(newValue: string) {
+        value = newValue
+        onValueChange?.(newValue)
+    }
+
+    function handleMultipleValueChange(newValue: string[]) {
+        value = newValue
+        onValueChange?.(newValue)
+    }
+</script>
+
+{#snippet accordionItem(item: AccordionItem, index: number)}
+    {@const itemValue = item.value ?? String(index)}
+    {@const cls = getItemClasses(item)}
+    {@const open = isOpen(itemValue)}
+    <Accordion.Item value={itemValue} disabled={item.disabled} class={cls.item}>
+        <Accordion.Header class={cls.header}>
+            <Accordion.Trigger class={cls.trigger}>
+                {#if leading}
+                    {@render leading({ item, index, open })}
+                {:else if item.icon}
+                    <Icon name={item.icon} class={cls.leadingIcon} />
+                {/if}
+
+                {#if item.label || labelSlot}
+                    <span class={cls.label}>
+                        {#if labelSlot}
+                            {@render labelSlot({ item, index, open })}
+                        {:else}
+                            {item.label}
+                        {/if}
+                    </span>
+                {/if}
+
+                {#if trailing}
+                    {@render trailing({ item, index, open })}
+                {:else}
+                    <Icon name={item.trailingIcon ?? trailingIcon} class={cls.trailingIcon} />
+                {/if}
+            </Accordion.Trigger>
+        </Accordion.Header>
+
+        {#if item.content || contentSlot || bodySlot}
+            {#if forceMount}
+                <Accordion.Content forceMount>
+                    {#snippet child({ props, open: isContentOpen })}
+                        {#if isContentOpen}
+                            <div {...props} transition:slide={{ duration: 200 }}>
+                                <div class={cls.content}>
+                                    {#if contentSlot}
+                                        {@render contentSlot({ item, index, open: isContentOpen })}
+                                    {:else}
+                                        <div class={cls.body}>
+                                            {#if bodySlot}
+                                                {@render bodySlot({
+                                                    item,
+                                                    index,
+                                                    open: isContentOpen
+                                                })}
+                                            {:else}
+                                                {item.content}
+                                            {/if}
+                                        </div>
+                                    {/if}
+                                </div>
+                            </div>
+                        {/if}
+                    {/snippet}
+                </Accordion.Content>
+            {:else}
+                <Accordion.Content class={cls.content}>
+                    {#if contentSlot}
+                        {@render contentSlot({ item, index, open })}
+                    {:else}
+                        <div class={cls.body}>
+                            {#if bodySlot}
+                                {@render bodySlot({ item, index, open })}
+                            {:else}
+                                {item.content}
+                            {/if}
+                        </div>
+                    {/if}
+                </Accordion.Content>
+            {/if}
+        {/if}
+    </Accordion.Item>
+{/snippet}
+
+{#if type === 'single'}
+    <Accordion.Root
+        type="single"
+        value={singleValue}
+        onValueChange={handleSingleValueChange}
+        {disabled}
+        {loop}
+        {orientation}
+        class={rootClass}
+    >
+        {#each items as item, index (item.value ?? index)}
+            {@render accordionItem(item, index)}
+        {/each}
+    </Accordion.Root>
+{:else}
+    <Accordion.Root
+        type="multiple"
+        value={multipleValue}
+        onValueChange={handleMultipleValueChange}
+        {disabled}
+        {loop}
+        {orientation}
+        class={rootClass}
+    >
+        {#each items as item, index (item.value ?? index)}
+            {@render accordionItem(item, index)}
+        {/each}
+    </Accordion.Root>
+{/if}

package/dist/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { AccordionProps } from './accordion.types.js';
+export type Props = AccordionProps;
+import { Accordion } from 'bits-ui';
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/Accordion/accordion.types.d.ts

@@ -0,0 +1,225 @@
+import type { AccordionContentPropsWithoutHTML, BaseAccordionRootPropsWithoutHTML } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { AccordionSlots } from './accordion.variants.js';
+/**
+ * Configuration for an individual accordion item.
+ *
+ * @example
+ * ```ts
+ * const item: AccordionItem = {
+ *   label: 'Section Title',
+ *   content: 'Section content goes here',
+ *   icon: 'lucide:settings',
+ *   value: 'section-1'
+ * }
+ * ```
+ */
+export interface AccordionItem {
+    /**
+     * The visible text displayed in the accordion trigger/header.
+     */
+    label?: string;
+    /**
+     * Icon displayed before the label (leading position).
+     * Supports any Iconify icon name (e.g., 'lucide:home', 'mdi:account').
+     */
+    icon?: string;
+    /**
+     * Icon displayed after the label (trailing position).
+     * Overrides the global `trailingIcon` prop for this item.
+     * Supports any Iconify icon name.
+     */
+    trailingIcon?: string;
+    /**
+     * The text content shown when the accordion item is expanded.
+     * For complex content, use the `body` or `content` snippet instead.
+     */
+    content?: string;
+    /**
+     * Unique identifier for this item.
+     * Used to control which item(s) are expanded via the `value` prop.
+     * @default String(index) - Falls back to the item's index as a string
+     */
+    value?: string;
+    /**
+     * Whether this specific item is disabled.
+     * Disabled items cannot be expanded or collapsed by the user.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes applied to this item's container element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override classes for specific slots within this item.
+     * Allows fine-grained styling control per item.
+     */
+    ui?: Partial<Pick<Record<AccordionSlots, ClassNameValue>, 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>>;
+}
+/**
+ * Props passed to accordion snippet slots.
+ * Provides context about the current item and its state.
+ */
+export interface AccordionSlotProps {
+    /** The current accordion item data */
+    item: AccordionItem;
+    /** Zero-based index of the item in the items array */
+    index: number;
+    /** Whether this item is currently expanded */
+    open: boolean;
+}
+/**
+ * Props for the Accordion component.
+ *
+ * Extends bits-ui's base accordion props for behavior (disabled, loop, orientation)
+ * and content props (forceMount).
+ *
+ * @example
+ * ```svelte
+ * <Accordion
+ *   type="single"
+ *   items={faqItems}
+ *   bind:value={openItem}
+ *   ui={{ trigger: 'font-semibold' }}
+ * />
+ * ```
+ *
+ * @see https://bits-ui.com/docs/components/accordion
+ */
+export interface AccordionProps extends Omit<BaseAccordionRootPropsWithoutHTML, 'loop'>, Pick<AccordionContentPropsWithoutHTML, 'forceMount'> {
+    /**
+     * Array of accordion items to render.
+     * Each item can have a label, content, icon, and optional styling overrides.
+     */
+    items?: AccordionItem[];
+    /**
+     * Default icon displayed on the trailing side of all triggers.
+     * Typically used for expand/collapse indicators.
+     * Can be overridden per-item via `item.trailingIcon`.
+     * @default 'lucide:chevron-down'
+     */
+    trailingIcon?: string;
+    /**
+     * Controls how many items can be expanded simultaneously.
+     * - `'single'`: Only one item can be open at a time (default)
+     * - `'multiple'`: Multiple items can be open simultaneously
+     * @default 'single'
+     */
+    type?: 'single' | 'multiple';
+    /**
+     * The currently expanded item value(s).
+     * - For `type="single"`: `string | undefined`
+     * - For `type="multiple"`: `string[] | undefined`
+     *
+     * Use `bind:value` for two-way binding.
+     */
+    value?: string | string[];
+    /**
+     * Callback fired when the expanded item(s) change.
+     * Receives the new value (string for single, string[] for multiple).
+     */
+    onValueChange?: (value: string | string[]) => void;
+    /**
+     * Whether to cycle focus when reaching the first/last item
+     * using keyboard navigation.
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Override classes for accordion component slots.
+     * Allows customization of root, item, header, trigger, content, body,
+     * label, leadingIcon, and trailingIcon elements.
+     *
+     * @example
+     * ```ts
+     * ui={{
+     *   trigger: 'py-4 hover:bg-muted',
+     *   body: 'text-muted-foreground'
+     * }}
+     * ```
+     */
+    ui?: Partial<Record<AccordionSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the root accordion container.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom snippet for the leading section of all item triggers.
+     * Replaces the default leading icon when provided.
+     *
+     * @param props - Contains `{ item, index, open }`
+     *
+     * @example
+     * ```svelte
+     * {#snippet leading({ item, open })}
+     *   <Avatar src={item.avatar} size="sm" />
+     * {/snippet}
+     * ```
+     */
+    leading?: Snippet<[AccordionSlotProps]>;
+    /**
+     * Custom snippet for the label section of all item triggers.
+     * Replaces the default `item.label` text when provided.
+     *
+     * @param props - Contains `{ item, index, open }`
+     *
+     * @example
+     * ```svelte
+     * {#snippet label({ item, open })}
+     *   <span class:font-bold={open}>{item.label}</span>
+     *   {#if item.badge}<Badge>{item.badge}</Badge>{/if}
+     * {/snippet}
+     * ```
+     */
+    label?: Snippet<[AccordionSlotProps]>;
+    /**
+     * Custom snippet for the trailing section of all item triggers.
+     * Replaces the default trailing icon when provided.
+     *
+     * @param props - Contains `{ item, index, open }`
+     *
+     * @example
+     * ```svelte
+     * {#snippet trailing({ open })}
+     *   <Icon name={open ? 'lucide:minus' : 'lucide:plus'} />
+     * {/snippet}
+     * ```
+     */
+    trailing?: Snippet<[AccordionSlotProps]>;
+    /**
+     * Custom snippet for the entire content area.
+     * Provides full control over the expanded content rendering.
+     * When used, `body` snippet and `item.content` are ignored.
+     *
+     * @param props - Contains `{ item, index, open }`
+     *
+     * @example
+     * ```svelte
+     * {#snippet content({ item })}
+     *   <div class="custom-content-wrapper">
+     *     <p>{item.content}</p>
+     *     <Button>Action</Button>
+     *   </div>
+     * {/snippet}
+     * ```
+     */
+    content?: Snippet<[AccordionSlotProps]>;
+    /**
+     * Custom snippet for the body content inside the default content wrapper.
+     * Replaces `item.content` text when provided.
+     * Use `content` snippet instead for full control over the content area.
+     *
+     * @param props - Contains `{ item, index, open }`
+     *
+     * @example
+     * ```svelte
+     * {#snippet body({ item })}
+     *   <p>{item.content}</p>
+     *   <a href={item.link}>Learn more</a>
+     * {/snippet}
+     * ```
+     */
+    body?: Snippet<[AccordionSlotProps]>;
+}

package/dist/Accordion/accordion.types.js

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

package/dist/Accordion/accordion.variants.d.ts

@@ -0,0 +1,88 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const accordionVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    content: string;
+    body: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    label: string;
+}, undefined, {
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    content: string;
+    body: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    content: string;
+    body: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AccordionVariantProps = VariantProps<typeof accordionVariants>;
+export type AccordionSlots = keyof ReturnType<typeof accordionVariants>;
+export declare const accordionDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        disabled: {
+            true: {
+                trigger: string;
+            };
+        };
+    }, {
+        root: string;
+        item: string;
+        header: string;
+        trigger: string;
+        content: string;
+        body: string;
+        leadingIcon: string;
+        trailingIcon: string;
+        label: string;
+    }, {
+        disabled: {
+            true: {
+                trigger: string;
+            };
+        };
+    }, {
+        root: string;
+        item: string;
+        header: string;
+        trigger: string;
+        content: string;
+        body: string;
+        leadingIcon: string;
+        trailingIcon: string;
+        label: string;
+    }>;
+    slots: Partial<Record<AccordionSlots, string>>;
+};