svelora 3.0.12 → 3.0.13

package/README.md

@@ -6,7 +6,7 @@
 
 <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
+  Tailwind CSS 4 &middot; OKLCH Color Tokens &middot; Fully Typed &middot; 60+ Components &middot; 16 Hooks
 </p>
 
 <p align="center">
@@ -17,7 +17,7 @@
 
 <p align="center">
   <a href="https://svelora-ui.vercel.app/"><strong>Live Demo</strong></a> &middot;
-  <a href="https://svelora-ui.vercel.app//getting-started"><strong>Getting Started</strong></a> &middot;
+  <a href="https://svelora-ui.vercel.app/docs/installation"><strong>Getting Started</strong></a> &middot;
   <a href="https://github.com/asphum/svelora/blob/main/CHANGELOG.md"><strong>Changelog</strong></a>
 </p>
 
@@ -26,16 +26,16 @@
 ## Install
 
 ```bash
-npm install svelora
-# pnpm add svelora
-# yarn add svelora
-# bun add svelora
+bun add svelora mode-watcher
+# npm install svelora mode-watcher
+# pnpm add svelora mode-watcher
+# yarn add svelora mode-watcher
 ```
 
 ```svelte
 <script lang="ts">
     import 'svelora/theme.css'
-    import { ModeWatcher } from 'svelora'
+    import { ModeWatcher } from 'mode-watcher'
 </script>
 
 <ModeWatcher />
@@ -48,12 +48,13 @@ npm install svelora
 
 ```svelte
 <script lang="ts">
-    import { Avatar, Button, ModeWatcher, toggleMode, toast } from 'svelora'
+    import { Avatar, Button, ThemeModeButton, toast } from 'svelora'
+    import { ModeWatcher } from 'mode-watcher'
 </script>
 
 <ModeWatcher />
 <Button variant="soft" color="primary" leadingIcon="lucide:edit">Edit</Button>
-<Button variant="ghost" color="secondary" onclick={toggleMode}>Toggle theme</Button>
+<ThemeModeButton />
 <Avatar src="/photo.jpg" alt="Jane" size="lg" />
 ```
 
@@ -65,7 +66,7 @@ npm install svelora
 - **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** — 16 reactive hooks for common UI patterns
 
 ## Hooks
 
@@ -73,11 +74,15 @@ Reactive hooks built on Svelte 5 runes and actions.
 
 ```svelte
 <script>
-    import { useMediaQuery, useClipboard, useDebounce } from 'svelora'
+    import { useMediaQuery, useClipboard, useEventListener } from 'svelora'
 
     const isMobile = useMediaQuery('(max-width: 640px)')
     const clipboard = useClipboard()
-    const debounce = useDebounce({ delay: 500 })
+    let width = $state(0)
+
+    useEventListener(() => window, 'resize', () => {
+        width = window.innerWidth
+    })
 </script>
 
 {#if isMobile.matches}
@@ -87,6 +92,8 @@ Reactive hooks built on Svelte 5 runes and actions.
 <Button onclick={() => clipboard.copy('Hello!')}>
     {clipboard.copied ? 'Copied!' : 'Copy'}
 </Button>
+
+<p>{width}px</p>
 ```
 
 | Hook                | Type           | Description                                    |
@@ -94,10 +101,21 @@ Reactive hooks built on Svelte 5 runes and actions.
 | `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                          |
+| `useDebounce`       | Runes          | Debounce with pending, cancel, flush           |
+| `useDebouncedState` | Runes          | Bindable debounced state helper                |
+| `useEventListener`  | Runes          | Reactive event listeners with cleanup          |
+| `useResizeObserver` | Runes          | Observe element size changes                   |
+| `useElementSize`    | Runes          | Read reactive element width and height         |
+| `useIntersectionObserver` | Runes    | Track viewport intersection state              |
+| `useScrollLock`     | Runes          | Lock and restore document scrolling            |
+| `useFocusTrap`      | Runes          | Keep focus inside a container                  |
+| `useLocalStorage`   | Runes          | SSR-safe localStorage binding                  |
+| `useThrottle`       | Runes          | Throttle reactive updates                      |
+| `useTimeout`        | Runes          | Schedule cancellable one-shot timers           |
+| `useInterval`       | Runes          | Schedule cancellable repeating timers          |
 
 ## Customization
 

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

@@ -3,7 +3,7 @@
 
 <script lang="ts">import { Accordion } from "bits-ui";
 import { slide } from "svelte/transition";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import Icon from "../Icon/Icon.svelte";
 import { accordionDefaults, accordionVariants } from "./accordion.variants.js";
 const config = getComponentConfig("accordion", accordionDefaults);

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

@@ -3,7 +3,7 @@
 
 <script lang="ts">import Avatar from "../Avatar/Avatar.svelte";
 import Button from "../Button/Button.svelte";
-import { getComponentConfig, iconsDefaults } from "../config.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
 import Icon from "../Icon/Icon.svelte";
 import { alertDefaults, alertVariants } from "./alert.variants.js";
 const config = getComponentConfig("alert", alertDefaults);

package/dist/{Alert → components/Alert}/Alert.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { AlertProps } from './alert.types.js';
 export type Props = AlertProps;
-declare const Alert: import("svelte").Component<AlertProps, {}, "open" | "ref">;
+declare const Alert: import("svelte").Component<AlertProps, {}, "ref" | "open">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;

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

@@ -4,7 +4,7 @@
 <script lang="ts">import { Avatar } from "bits-ui";
 import { getContext } from "svelte";
 import Chip from "../Chip/Chip.svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import Icon from "../Icon/Icon.svelte";
 import { avatarDefaults, avatarSizePx, avatarVariants } from "./avatar.variants.js";
 const config = getComponentConfig("avatar", avatarDefaults);

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

@@ -3,7 +3,7 @@
 
 <script lang="ts">import { setContext } from "svelte";
 import Avatar from "../Avatar/Avatar.svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import { avatarGroupDefaults, avatarGroupVariants } from "./avatar-group.variants.js";
 const config = getComponentConfig("avatarGroup", avatarGroupDefaults);
 let { ref = $bindable(null), as = "div", ui, size = config.defaultVariants.size ?? "md", rounded = config.defaultVariants.rounded ?? "full", avatars, max, class: className, children, ...restProps } = $props();

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

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import Avatar from "../Avatar/Avatar.svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import Icon from "../Icon/Icon.svelte";
 import { badgeDefaults, badgeVariants } from "./badge.variants.js";
 const config = getComponentConfig("badge", badgeDefaults);

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

@@ -3,7 +3,7 @@
 
 <script lang="ts">import { useId } from "bits-ui";
 import Button from "../Button/Button.svelte";
-import { getComponentConfig, iconsDefaults } from "../config.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
 import Icon from "../Icon/Icon.svelte";
 import { bannerDefaults, bannerVariants } from "./banner.variants.js";
 const config = getComponentConfig("banner", bannerDefaults);

package/dist/{Banner → components/Banner}/Banner.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { BannerProps } from './banner.types.js';
 export type Props = BannerProps;
-declare const Banner: import("svelte").Component<BannerProps, {}, "open" | "ref">;
+declare const Banner: import("svelte").Component<BannerProps, {}, "ref" | "open">;
 type Banner = ReturnType<typeof Banner>;
 export default Banner;

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import { getComponentConfig } from "../config.js";
+<script lang="ts">import { getComponentConfig } from "../../config.js";
 import Icon from "../Icon/Icon.svelte";
 import Link from "../Link/Link.svelte";
 import { breadcrumbDefaults, breadcrumbVariants } from "./breadcrumb.variants.js";

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

@@ -3,7 +3,7 @@
 
 <script lang="ts">import { getContext } from "svelte";
 import Avatar from "../Avatar/Avatar.svelte";
-import { getComponentConfig, iconsDefaults } from "../config.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
 import { fieldGroupVariant } from "../FieldGroup/field-group.variants.js";
 import Icon from "../Icon/Icon.svelte";
 import Link from "../Link/Link.svelte";

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

@@ -3,8 +3,8 @@
 
 <script lang="ts">import { getLocalTimeZone, today } from "@internationalized/date";
 import { Calendar, RangeCalendar } from "bits-ui";
-import { getComponentConfig } from "../config.js";
-import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import { getComponentConfig } from "../../config.js";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
 import Icon from "../Icon/Icon.svelte";
 import { calendarDefaults, calendarVariants } from "./calendar.variants.js";
 const config = getComponentConfig("calendar", calendarDefaults);

package/dist/{Calendar → components/Calendar}/Calendar.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { CalendarProps } from './calendar.types.js';
 export type Props = CalendarProps;
 import { Calendar } from 'bits-ui';
-declare const Calendar: import("svelte").Component<CalendarProps, {}, "ref" | "placeholder" | "value">;
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "value" | "ref" | "placeholder">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import { getComponentConfig } from "../config.js";
+<script lang="ts">import { getComponentConfig } from "../../config.js";
 import { cardDefaults, cardVariants } from "./card.variants.js";
 const config = getComponentConfig("card", cardDefaults);
 let { ref = $bindable(null), as = "div", ui, variant = config.defaultVariants.variant, class: className, header, children, footer, ...restProps } = $props();

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

@@ -7,7 +7,7 @@ import Fade from "embla-carousel-fade";
 import useEmblaCarousel from "embla-carousel-svelte";
 import { untrack } from "svelte";
 import Button from "../Button/Button.svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import { carouselDefaults, carouselVariants } from "./carousel.variants.js";
 const config = getComponentConfig("carousel", carouselDefaults);
 let { ref = $bindable(null), api = $bindable(), items, index = $bindable(0), onIndexChange, onSettle, slidesToShow = 1, loop = false, align = "start", orientation = "horizontal", draggable = true, dragFree = false, slidesToScroll = 1, autoplay = false, fade = false, classNames = false, breakpoints, plugins: extraPlugins, options: optionsOverride, arrows = true, dots = true, prevIcon, nextIcon, color = config.defaultVariants.color, size = config.defaultVariants.size, variant = config.defaultVariants.variant, class: className, ui, slide: slideSnippet, dot: dotSnippet, prevSlot, nextSlot, children } = $props();

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

@@ -2,8 +2,8 @@
 </script>
 
 <script lang="ts">import { Checkbox, Label, useId } from "bits-ui";
-import { getComponentConfig, iconsDefaults } from "../config.js";
-import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
 import Icon from "../Icon/Icon.svelte";
 import { checkboxDefaults, checkboxVariants } from "./checkbox.variants.js";
 const config = getComponentConfig("checkbox", checkboxDefaults);

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

@@ -2,8 +2,8 @@
 </script>
 
 <script lang="ts">import { Checkbox, Label, useId } from "bits-ui";
-import { getComponentConfig, iconsDefaults } from "../config.js";
-import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
 import Icon from "../Icon/Icon.svelte";
 import { checkboxGroupDefaults, checkboxGroupVariants } from "./checkbox-group.variants.js";
 const config = getComponentConfig("checkboxGroup", checkboxGroupDefaults);

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

@@ -1,5 +1,5 @@
 import type { CheckboxGroupProps } from './checkbox-group.types.js';
 export type Props = CheckboxGroupProps;
-declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "ref" | "value">;
+declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "value" | "ref">;
 type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
 export default CheckboxGroup;

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import { getComponentConfig } from "../config.js";
+<script lang="ts">import { getComponentConfig } from "../../config.js";
 import { chipDefaults, chipVariants } from "./chip.variants.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();

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import { getComponentConfig } from "../config.js";
+<script lang="ts">import { getComponentConfig } from "../../config.js";
 import { codeBlockDefaults, codeBlockVariants } from "./code-block.variants.js";
 const config = getComponentConfig("codeBlock", codeBlockDefaults);
 let { title = "Code", code = "", copyText, copyable = true, html, variant = config.defaultVariants.variant, size = config.defaultVariants.size, class: className, ui, children } = $props();

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

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import { Collapsible } from "bits-ui";
-import { getComponentConfig } from "../config.js";
+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();

package/dist/{Collapsible → components/Collapsible}/Collapsible.svelte.d.ts

@@ -1,6 +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, {}, "open" | "ref">;
+declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "ref" | "open">;
 type Collapsible = ReturnType<typeof Collapsible>;
 export default Collapsible;

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

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

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

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import { Command } from "bits-ui";
-import { getComponentConfig, iconsDefaults } from "../config.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
 import Icon from "../Icon/Icon.svelte";
 import { commandDefaults, commandVariants } from "./command.variants.js";
 const config = getComponentConfig("command", commandDefaults);

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

@@ -1,6 +1,6 @@
 import type { CommandProps } from './command.types.js';
 export type Props = CommandProps;
 import { Command } from 'bits-ui';
-declare const Command: import("svelte").Component<CommandProps, {}, "search" | "ref" | "value">;
+declare const Command: import("svelte").Component<CommandProps, {}, "search" | "value" | "ref">;
 type Command = ReturnType<typeof Command>;
 export default Command;

package/dist/{Command → components/Command}/CommandTestWrapper.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { CommandProps } from './command.types.js';
-declare const CommandTestWrapper: import("svelte").Component<Omit<CommandProps, "itemLeading" | "itemLabel" | "item" | "footer" | "itemTrailing" | "empty">, {}, "">;
+declare const CommandTestWrapper: import("svelte").Component<Omit<CommandProps, "item" | "footer" | "empty" | "itemLabel" | "itemTrailing" | "itemLeading">, {}, "">;
 type CommandTestWrapper = ReturnType<typeof CommandTestWrapper>;
 export default CommandTestWrapper;

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import { getComponentConfig } from "../config.js";
+<script lang="ts">import { getComponentConfig } from "../../config.js";
 import { containerDefaults, containerVariants } from "./container.variants.js";
 const config = getComponentConfig("container", containerDefaults);
 const slots = containerVariants();

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

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import { ContextMenu } from "bits-ui";
-import { getComponentConfig, iconsDefaults } from "../config.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
 import Icon from "../Icon/Icon.svelte";
 import Kbd from "../Kbd/Kbd.svelte";
 import { contextMenuDefaults, contextMenuVariants, itemColorClasses } from "./context-menu.variants.js";

package/dist/{ContextMenu → components/ContextMenu}/ContextMenu.svelte.d.ts

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

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

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import { Drawer } from "vaul-svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import { drawerDefaults, drawerVariants } from "./drawer.variants.js";
 const config = getComponentConfig("drawer", drawerDefaults);
 let { open = $bindable(false), onOpenChange, direction = config.defaultVariants.direction ?? "bottom", inset = config.defaultVariants.inset ?? false, title, description, overlay: showOverlay = true, handle: showHandle = true, portal = true, dismissible = true, modal = true, nested = false, shouldScaleBackground = false, closeThreshold, scrollLockTimeout, snapPoints, fadeFromIndex, activeSnapPoint = $bindable(undefined), onActiveSnapPointChange, handleOnly = false, noBodyStyles, onDrag, onRelease, onClose, ui, class: className, children, content: contentSlot, header: headerSlot, titleSlot, descriptionSlot, body: bodySlot, footer: footerSlot, ...rest } = $props();

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

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import { DropdownMenu } from "bits-ui";
-import { getComponentConfig, iconsDefaults } from "../config.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
 import Icon from "../Icon/Icon.svelte";
 import Kbd from "../Kbd/Kbd.svelte";
 import { dropdownMenuDefaults, dropdownMenuVariants, itemColorClasses } from "./dropdown-menu.variants.js";

package/dist/{DropdownMenu → components/DropdownMenu}/DropdownMenu.svelte.d.ts

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

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

@@ -4,8 +4,8 @@
 <script lang="ts">import { Editor } from "@tiptap/core";
 import BubbleMenuExt from "@tiptap/extension-bubble-menu";
 import { untrack } from "svelte";
-import { getComponentConfig } from "../config.js";
-import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import { getComponentConfig } from "../../config.js";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
 import Icon from "../Icon/Icon.svelte";
 import Tooltip from "../Tooltip/Tooltip.svelte";
 import EditorUrlPrompt from "./EditorUrlPrompt.svelte";

package/dist/{Editor → components/Editor}/Editor.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { EditorProps } from './editor.types.js';
 export type Props = EditorProps;
 import { Editor } from '@tiptap/core';
-declare const Editor: import("svelte").Component<EditorProps, {}, "ref" | "value" | "api">;
+declare const Editor: import("svelte").Component<EditorProps, {}, "value" | "ref" | "api">;
 type Editor = ReturnType<typeof Editor>;
 export default Editor;

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

@@ -3,7 +3,7 @@
 
 <script lang="ts">import Avatar from "../Avatar/Avatar.svelte";
 import Button from "../Button/Button.svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import Icon from "../Icon/Icon.svelte";
 import { emptyDefaults, emptyVariants } from "./empty.variants.js";
 const config = getComponentConfig("empty", emptyDefaults);

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

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import { setContext } from "svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import { fieldGroupDefaults, fieldGroupVariants } from "./field-group.variants.js";
 const config = getComponentConfig("fieldGroup", fieldGroupDefaults);
 let { ref = $bindable(null), as = "div", ui, size = config.defaultVariants.size ?? "md", orientation = config.defaultVariants.orientation ?? "horizontal", class: className, children, ...restProps } = $props();

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

@@ -4,8 +4,8 @@
 <script lang="ts">import { useId } from "bits-ui";
 import { untrack } from "svelte";
 import Button from "../Button/Button.svelte";
-import { getComponentConfig, iconsDefaults } from "../config.js";
-import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
 import Icon from "../Icon/Icon.svelte";
 import Modal from "../Modal/Modal.svelte";
 import { fileUploadDefaults, fileUploadVariants } from "./file-upload.variants.js";

package/dist/{FileUpload → components/FileUpload}/FileUpload.svelte.d.ts

@@ -3,6 +3,6 @@ export type Props = FileUploadProps;
 declare const FileUpload: import("svelte").Component<FileUploadProps, {
     open: () => void;
     clearAll: () => void;
-}, "ref" | "value">;
+}, "value" | "ref">;
 type FileUpload = ReturnType<typeof FileUpload>;
 export default FileUpload;

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import { getConfig } from "../config.js";
+<script lang="ts">import { getConfig } from "../../config.js";
 import { buildFontVariablesCss, buildGoogleFontsUrl, buildLocalFontFaceCss, fontsDefaults, resolveFontsOptions } from "./fonts.js";
 const globalConfig = getConfig();
 const config = resolveFontsOptions(globalConfig.fonts);

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

@@ -5,7 +5,7 @@
     lang="ts"
     generics="S extends FormSchema | undefined = FormSchema | undefined, T extends boolean = true, N extends boolean = false"
 >import { onDestroy, onMount, setContext, untrack } from "svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import { FORM_CONTEXT_KEY, FormContext, getFormContext } from "./form.context.svelte.js";
 import { formDefaults, formVariants } from "./form.variants.js";
 const config = getComponentConfig("form", formDefaults);

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

@@ -3,9 +3,9 @@
 
 <script lang="ts">import { Label, useId } from "bits-ui";
 import { setContext, untrack } from "svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import { getFormContext } from "../Form/form.context.svelte.js";
-import { FORM_FIELD_CONTEXT_KEY } from "../hooks/useFormField.svelte.js";
+import { FORM_FIELD_CONTEXT_KEY } from "../../hooks/useFormField/index.js";
 import { formFieldDefaults, formFieldVariants } from "./form-field.variants.js";
 const config = getComponentConfig("formField", formFieldDefaults);
 let { ref = $bindable(null), ui, name, label, description, hint, help, error, size = config.defaultVariants.size ?? "md", required = false, orientation = config.defaultVariants.orientation ?? "vertical", eagerValidation, validateOnInputDelay, errorPattern, class: className, children, labelSlot, hintSlot, descriptionSlot, helpSlot, errorSlot, ...restProps } = $props();

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

@@ -3,7 +3,7 @@
 
 <script lang="ts">import Iconify from "@iconify/svelte";
 import { twMerge } from "tailwind-merge";
-import { getComponentConfig, iconsDefaults } from "../config.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
 const config = getComponentConfig("icons", iconsDefaults);
 let { name, size = 24, color, flipH = false, flipV = false, rotate = 0, class: className, ...restProps } = $props();
 const flip = $derived(flipH && flipV ? "horizontal,vertical" : flipH ? "horizontal" : flipV ? "vertical" : undefined);

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

@@ -3,9 +3,9 @@
 
 <script lang="ts" generics="T extends InputValue = InputValue">import { getContext } from "svelte";
 import Avatar from "../Avatar/Avatar.svelte";
-import { getComponentConfig, iconsDefaults } from "../config.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
 import { fieldGroupVariantWithRoot } from "../FieldGroup/field-group.variants.js";
-import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
 import Icon from "../Icon/Icon.svelte";
 import { inputDefaults, inputVariants } from "./input.variants.js";
 const config = getComponentConfig("input", inputDefaults);

package/dist/{Input → components/Input}/Input.svelte.d.ts

@@ -3,7 +3,7 @@ export type Props<T extends InputValue = InputValue> = InputProps<T>;
 declare function $$render<T extends InputValue = InputValue>(): {
     props: Props<T>;
     exports: {};
-    bindings: "ref" | "value";
+    bindings: "value" | "ref";
     slots: {};
     events: {};
 };
@@ -11,7 +11,7 @@ declare class __sveltets_Render<T extends InputValue = InputValue> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "ref" | "value";
+    bindings(): "value" | "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import { onMount } from "svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import { kbdDefaults, kbdVariants } from "./kbd.variants.js";
 const config = getComponentConfig("kbd", kbdDefaults);
 let { ref = $bindable(null), as = "kbd", value, color = config.defaultVariants.color, size = config.defaultVariants.size, variant = config.defaultVariants.variant, ui, class: className, children, ...restProps } = $props();

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

@@ -101,7 +101,7 @@ export {};
 
 <script lang="ts">import { getContext, onMount } from "svelte";
 import { twMerge } from "tailwind-merge";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import { LINK_LOCATION_CONTEXT_KEY } from "./location-context.js";
 import { linkDefaults, linkVariants } from "./link.variants.js";
 const config = getComponentConfig("link", linkDefaults);

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

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import Button from "../Button/Button.svelte";
-import { getComponentConfig, iconsDefaults } from "../config.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
 import DropdownMenu from "../DropdownMenu/DropdownMenu.svelte";
 import Icon from "../Icon/Icon.svelte";
 import Link from "../Link/Link.svelte";

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

@@ -3,7 +3,7 @@
 
 <script lang="ts">import { Dialog } from "bits-ui";
 import Button from "../Button/Button.svelte";
-import { getComponentConfig } from "../config.js";
+import { getComponentConfig } from "../../config.js";
 import { modalDefaults, modalVariants } from "./modal.variants.js";
 const config = getComponentConfig("modal", modalDefaults);
 let { open = $bindable(false), onOpenChange, onOpenChangeComplete, trapFocus = true, preventScroll = true, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeydown, onInteractOutside, forceMount, restoreScrollDelay, title, description, overlay: showOverlay = config.defaultVariants.overlay ?? true, scrollable = config.defaultVariants.scrollable ?? false, transition = config.defaultVariants.transition ?? "scale", size = config.defaultVariants.size ?? "md", fullscreen = false, portal = true, close: closeProp = true, dismissible = true, ui, class: className, children, content: contentSlot, header: headerSlot, titleSlot, descriptionSlot, actions: actionsSlot, body: bodySlot, footer: footerSlot, closeSlot } = $props();