kosui 0.0.7

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright © 2025 Koso Labs
+
+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,3 @@
+# Kosui
+
+A Svelte component library used by [Koso](https://koso.app) and [Cipherly](https://cipherly.app).

package/dist/alert/alert.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import { twMerge } from "tailwind-merge";
+  import { Box, type BoxProps } from "../box";
+
+  export type AlertProps = BoxProps;
+</script>
+
+<script lang="ts">
+  let {
+    el = $bindable(),
+    class: className,
+    variant = "elevated",
+    color = "primary",
+    shape = "rounded",
+    backdrop = true,
+    ...restProps
+  }: AlertProps = $props();
+</script>
+
+<Box
+  bind:el
+  {variant}
+  {color}
+  {shape}
+  {backdrop}
+  class={twMerge("p-3", className)}
+  {...restProps}
+/>

package/dist/alert/alert.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type BoxProps } from "../box";
+export type AlertProps = BoxProps;
+declare const Alert: import("svelte").Component<BoxProps, {}, "el">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/alert/index.d.ts

@@ -0,0 +1 @@
+export { default as Alert, type AlertProps } from "./alert.svelte";

package/dist/alert/index.js

@@ -0,0 +1 @@
+export { default as Alert } from "./alert.svelte";

package/dist/autocomplete/autocomplete-content.svelte

@@ -0,0 +1,47 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { baseClasses, type Variants } from "../base";
+  import { Popover, type PopoverProps } from "../popover";
+  import type { ClassName } from "../utils";
+  import { getAutocompleteContext } from "./autocomplete-context.svelte";
+
+  export type AutocompleteProps = {
+    children: Snippet;
+  } & ClassName &
+    Variants &
+    Omit<PopoverProps, "children">;
+</script>
+
+<script lang="ts">
+  let {
+    open = $bindable(false),
+    children,
+    class: className,
+    variant = "elevated",
+    color = "primary",
+    shape = "rounded",
+    ...restProps
+  }: AutocompleteProps = $props();
+
+  const ctx = getAutocompleteContext();
+  ctx.bindOpen(
+    () => open,
+    (newval) => (open = newval),
+  );
+</script>
+
+<Popover
+  bind:open={ctx.open}
+  role="menu"
+  class={twMerge(
+    baseClasses({ variant, color, shape }),
+    "max-h-[40%] border bg-m3-surface-container-highest p-1 shadow",
+    className,
+  )}
+  anchorEl={ctx.anchorEl}
+  placement="bottom"
+  {...restProps}
+>
+  {@render children()}
+</Popover>

package/dist/autocomplete/autocomplete-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import { type Variants } from "../base";
+import { type PopoverProps } from "../popover";
+import type { ClassName } from "../utils";
+export type AutocompleteProps = {
+    children: Snippet;
+} & ClassName & Variants & Omit<PopoverProps, "children">;
+declare const AutocompleteContent: import("svelte").Component<AutocompleteProps, {}, "open">;
+type AutocompleteContent = ReturnType<typeof AutocompleteContent>;
+export default AutocompleteContent;

package/dist/autocomplete/autocomplete-context.svelte.d.ts

@@ -0,0 +1,12 @@
+import { ItemContext } from "../common";
+export declare class AutocompleteContext extends ItemContext {
+    #private;
+    get open(): boolean;
+    set open(value: boolean);
+    bindOpen(getOpen: () => boolean, setOpen: (val: boolean) => void): void;
+    get anchorEl(): HTMLElement | undefined;
+    set anchorEl(value: HTMLElement | undefined);
+    bindAnchorEl(getAnchorEl: () => HTMLElement | undefined, setAnchorEl: (val: HTMLElement | undefined) => void): void;
+}
+export declare function setAutocompleteContext(state: AutocompleteContext): AutocompleteContext;
+export declare function getAutocompleteContext(): AutocompleteContext;

package/dist/autocomplete/autocomplete-context.svelte.js

@@ -0,0 +1,34 @@
+import { getContext, setContext } from "svelte";
+import { Bindable } from "../bindable.svelte";
+import { ItemContext } from "../common";
+export class AutocompleteContext extends ItemContext {
+    #open = new Bindable(false);
+    #anchorEl = new Bindable(undefined);
+    get open() {
+        return this.#open.value;
+    }
+    set open(value) {
+        this.#open.value = value;
+    }
+    bindOpen(getOpen, setOpen) {
+        this.#open.bind(getOpen, setOpen);
+    }
+    get anchorEl() {
+        return this.#anchorEl.value;
+    }
+    set anchorEl(value) {
+        this.#anchorEl.value = value;
+    }
+    bindAnchorEl(getAnchorEl, setAnchorEl) {
+        this.#anchorEl.bind(getAnchorEl, setAnchorEl);
+    }
+}
+export function setAutocompleteContext(state) {
+    return setContext(AutocompleteContext, state);
+}
+export function getAutocompleteContext() {
+    const ctx = getContext(AutocompleteContext);
+    if (!ctx)
+        throw new Error("AutocompleteContext is undefined");
+    return ctx;
+}

package/dist/autocomplete/autocomplete-input.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { type Variants } from "../base";
+  import { Input } from "../input";
+  import type { ClassName, ElementRef } from "../utils";
+  import { getAutocompleteContext } from "./autocomplete-context.svelte";
+
+  export type AutocompleteInputProps = {} & ElementRef &
+    ClassName &
+    Variants &
+    Omit<HTMLInputAttributes, "autocomplete">;
+</script>
+
+<script lang="ts">
+  import { mergeComponentProps } from "../merge-props";
+
+  let {
+    el = $bindable(),
+    value = $bindable(""),
+    ...restProps
+  }: AutocompleteInputProps = $props();
+
+  const ctx = getAutocompleteContext();
+  ctx.bindInput(
+    () => value,
+    (newval) => (value = newval),
+  );
+  ctx.bindAnchorEl(
+    () => el,
+    (newval) => (el = newval),
+  );
+
+  function handleKeyDown(event: KeyboardEvent) {
+    ctx.handleKeyDown(event);
+  }
+</script>
+
+<Input
+  bind:el={ctx.anchorEl}
+  bind:value={ctx.input}
+  autocomplete="off"
+  {...mergeComponentProps(Input, { onkeydown: handleKeyDown }, restProps)}
+/>

package/dist/autocomplete/autocomplete-input.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import { type Variants } from "../base";
+import type { ClassName, ElementRef } from "../utils";
+export type AutocompleteInputProps = {} & ElementRef & ClassName & Variants & Omit<HTMLInputAttributes, "autocomplete">;
+declare const AutocompleteInput: import("svelte").Component<AutocompleteInputProps, {}, "el" | "value">;
+type AutocompleteInput = ReturnType<typeof AutocompleteInput>;
+export default AutocompleteInput;

package/dist/autocomplete/autocomplete-item.svelte

@@ -0,0 +1,68 @@
+<script module lang="ts">
+  import { type Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import { baseClasses, type Variants } from "../base";
+  import { mergeProps } from "../merge-props";
+  import { type ClassName, type ElementRef } from "../utils";
+  import { getAutocompleteContext } from "./autocomplete-context.svelte";
+
+  export type AutocompleteItemProps = {
+    onSelect?: (el: HTMLElement) => void;
+    children: Snippet;
+  } & ElementRef &
+    ClassName &
+    Variants &
+    HTMLAttributes<HTMLDivElement>;
+</script>
+
+<script lang="ts">
+  let {
+    onSelect,
+    children,
+    el = $bindable(),
+    class: className,
+    variant = "plain",
+    color = "secondary",
+    shape = "rounded",
+    ...restProps
+  }: AutocompleteItemProps = $props();
+
+  const ctx = getAutocompleteContext();
+
+  function handleClick() {
+    if (el) {
+      onSelect?.(el);
+    }
+  }
+
+  function handleMouseEnter() {
+    ctx.focused = el;
+  }
+
+  $effect(() => {
+    if (el) {
+      return ctx.add(el);
+    }
+  });
+</script>
+
+<div
+  bind:this={el}
+  role="option"
+  aria-selected={ctx.focused === el}
+  class={twMerge(
+    baseClasses({ variant, color, shape }),
+    "flex w-full cursor-pointer items-center gap-1 px-2 py-1 text-left text-sm focus:ring-0 disabled:bg-transparent aria-selected:bg-m3-secondary/15",
+    className,
+  )}
+  {...mergeProps(
+    {
+      onclick: handleClick,
+      onmouseenter: handleMouseEnter,
+    },
+    restProps,
+  )}
+>
+  {@render children()}
+</div>

package/dist/autocomplete/autocomplete-item.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type Variants } from "../base";
+import { type ClassName, type ElementRef } from "../utils";
+export type AutocompleteItemProps = {
+    onSelect?: (el: HTMLElement) => void;
+    children: Snippet;
+} & ElementRef & ClassName & Variants & HTMLAttributes<HTMLDivElement>;
+declare const AutocompleteItem: import("svelte").Component<AutocompleteItemProps, {}, "el">;
+type AutocompleteItem = ReturnType<typeof AutocompleteItem>;
+export default AutocompleteItem;

package/dist/autocomplete/autocomplete.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassName } from "../utils";
+  import {
+    AutocompleteContext,
+    setAutocompleteContext,
+  } from "./autocomplete-context.svelte";
+
+  export type AutocompleteProps = {
+    children: Snippet;
+  } & ClassName;
+</script>
+
+<script lang="ts">
+  let { children }: AutocompleteProps = $props();
+
+  setAutocompleteContext(new AutocompleteContext());
+</script>
+
+{@render children()}

package/dist/autocomplete/autocomplete.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { ClassName } from "../utils";
+export type AutocompleteProps = {
+    children: Snippet;
+} & ClassName;
+declare const Autocomplete: import("svelte").Component<AutocompleteProps, {}, "">;
+type Autocomplete = ReturnType<typeof Autocomplete>;
+export default Autocomplete;

package/dist/autocomplete/index.d.ts

@@ -0,0 +1,4 @@
+export { default as AutocompleteContent } from "./autocomplete-content.svelte";
+export { default as AutocompleteInput } from "./autocomplete-input.svelte";
+export { default as AutocompleteItem } from "./autocomplete-item.svelte";
+export { default as Autocomplete } from "./autocomplete.svelte";

package/dist/autocomplete/index.js

@@ -0,0 +1,4 @@
+export { default as AutocompleteContent } from "./autocomplete-content.svelte";
+export { default as AutocompleteInput } from "./autocomplete-input.svelte";
+export { default as AutocompleteItem } from "./autocomplete-item.svelte";
+export { default as Autocomplete } from "./autocomplete.svelte";

package/dist/avatar/avatar.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+  import { twMerge } from "tailwind-merge";
+  import { Box, type BoxProps } from "../box";
+
+  export type AvatarProps = {
+    src?: string;
+    alt?: string;
+  } & BoxProps;
+</script>
+
+<script lang="ts">
+  let {
+    src,
+    alt,
+    children,
+    el = $bindable(),
+    class: className,
+    variant = "tonal",
+    color = "secondary",
+    shape = "rounded",
+    centered = true,
+    ...restProps
+  }: AvatarProps = $props();
+
+  let error: boolean = $state(false);
+</script>
+
+<Box
+  bind:el
+  {variant}
+  {color}
+  {shape}
+  {centered}
+  class={twMerge("aspect-square h-9 overflow-clip text-xl", className)}
+  {...restProps}
+>
+  {#if src && !error}
+    <img
+      {src}
+      {alt}
+      onerror={() => (error = true)}
+      referrerpolicy="no-referrer"
+    />
+  {:else}
+    {@render children?.()}
+  {/if}
+</Box>

package/dist/avatar/avatar.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type BoxProps } from "../box";
+export type AvatarProps = {
+    src?: string;
+    alt?: string;
+} & BoxProps;
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "el">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/avatar/index.d.ts

@@ -0,0 +1 @@
+export { default as Avatar, type AvatarProps } from "./avatar.svelte";

package/dist/avatar/index.js

@@ -0,0 +1 @@
+export { default as Avatar } from "./avatar.svelte";

package/dist/badge/badge.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import { Box, type BoxProps } from "../box";
+
+  export type BadgeProps = {
+    verticalAlignment?: "top" | "bottom";
+    horizontalAlignment?: "left" | "right";
+    content?: string;
+  } & BoxProps;
+
+  let {
+    verticalAlignment = "top",
+    horizontalAlignment = "right",
+    content,
+    children,
+    class: className,
+    variant = "filled",
+    color = "primary",
+    centered = true,
+  }: BadgeProps = $props();
+</script>
+
+<div class="relative">
+  {#if content}
+    <Box
+      {variant}
+      {color}
+      {centered}
+      shape="circle"
+      class={twMerge(
+        "absolute z-10 size-5 p-1 text-xs",
+
+        verticalAlignment === "top" && "top-0 -translate-y-1/2",
+        verticalAlignment === "bottom" && "bottom-0 translate-y-1/2",
+        horizontalAlignment === "left" && "left-0 -translate-x-1/2",
+        horizontalAlignment === "right" && "right-0 translate-x-1/2",
+
+        className,
+      )}>{content}</Box
+    >
+  {/if}
+  {@render children?.()}
+</div>

package/dist/badge/badge.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type BoxProps } from "../box";
+export type BadgeProps = {
+    verticalAlignment?: "top" | "bottom";
+    horizontalAlignment?: "left" | "right";
+    content?: string;
+} & BoxProps;
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/badge/index.d.ts

@@ -0,0 +1 @@
+export { default as Badge } from "./badge.svelte";

package/dist/badge/index.js

@@ -0,0 +1 @@
+export { default as Badge } from "./badge.svelte";

package/dist/base.d.ts

@@ -0,0 +1,21 @@
+export declare const variants: readonly ["elevated", "filled", "tonal", "outlined", "plain", "text"];
+export declare const colors: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
+export declare const shapes: readonly ["square", "rounded", "circle"];
+export declare const underlines: readonly ["always", "hover", "none"];
+export type Variant = {
+    variant?: (typeof variants)[number];
+};
+export type Color = {
+    color?: (typeof colors)[number];
+};
+export type Shape = {
+    shape?: (typeof shapes)[number];
+};
+export type Underline = {
+    underline?: (typeof underlines)[number];
+};
+export type Variants = Variant & Color & Shape & Underline & {
+    hover?: boolean;
+    focus?: boolean;
+};
+export declare const baseClasses: ({ variant, color, shape, underline, hover, focus, }: Variants) => string;

package/dist/base.js

@@ -0,0 +1,70 @@
+import { twMerge } from "tailwind-merge";
+export const variants = [
+    "elevated",
+    "filled",
+    "tonal",
+    "outlined",
+    "plain",
+    "text",
+];
+export const colors = [
+    "primary",
+    "secondary",
+    "tertiary",
+    "error",
+    "inherit",
+];
+export const shapes = ["square", "rounded", "circle"];
+export const underlines = ["always", "hover", "none"];
+const hoverBaseClasses = ({ variant, color }) => twMerge("disabled:text-m3-on-surface/38 disabled:bg-m3-on-surface/12 disabled:cursor-not-allowed", variant === "filled" && "hover:opacity-90", variant === "tonal" && "hover:opacity-80", variant === "text" && "hover:opacity-80", variant === "elevated" &&
+    color === "primary" &&
+    "hover:bg-m3-primary-container/30", variant === "elevated" &&
+    color === "secondary" &&
+    "hover:bg-m3-secondary-container/30", variant === "elevated" &&
+    color === "tertiary" &&
+    "hover:bg-m3-tertiary-container/30", variant === "elevated" &&
+    color === "error" &&
+    "hover:bg-m3-error-container/30", (variant === "outlined" || variant === "plain") &&
+    color === "primary" &&
+    "hover:bg-m3-primary/15", (variant === "outlined" || variant === "plain") &&
+    color === "secondary" &&
+    "hover:bg-m3-secondary/15", (variant === "outlined" || variant === "plain") &&
+    color === "tertiary" &&
+    "hover:bg-m3-tertiary/15", (variant === "outlined" || variant === "plain") &&
+    color === "error" &&
+    "hover:bg-m3-error/15");
+const focusBaseClasses = ({ variant, color }) => twMerge("disabled:text-m3-on-surface/38 disabled:bg-m3-on-surface/12 disabled:cursor-not-allowed", "focus:ring-1 focus-visible:outline-hidden", variant === "filled" && "focus:opacity-90", variant === "tonal" && "focus:opacity-80", variant === "text" && "focus:opacity-80", color === "primary" && "focus:ring-m3-primary", color === "secondary" && "focus:ring-m3-secondary", color === "tertiary" && "focus:ring-m3-tertiary", color === "error" && "focus:ring-m3-error", variant === "filled" && color === "primary" && "focus:ring-m3-on-primary", variant === "filled" &&
+    color === "secondary" &&
+    "focus:ring-m3-on-secondary", variant === "filled" && color === "tertiary" && "focus:ring-m3-on-tertiary", variant === "filled" && color === "error" && "focus:ring-m3-on-error", variant === "elevated" &&
+    color === "primary" &&
+    "focus:bg-m3-primary-container/30", variant === "elevated" &&
+    color === "secondary" &&
+    "focus:bg-m3-secondary-container/30", variant === "elevated" &&
+    color === "tertiary" &&
+    "focus:bg-m3-tertiary-container/30", variant === "elevated" &&
+    color === "error" &&
+    "focus:bg-m3-error-container/30", (variant === "outlined" || variant === "plain") &&
+    color === "primary" &&
+    "focus:bg-m3-primary/15", (variant === "outlined" || variant === "plain") &&
+    color === "secondary" &&
+    "focus:bg-m3-secondary/15", (variant === "outlined" || variant === "plain") &&
+    color === "tertiary" &&
+    "focus:bg-m3-tertiary/15", (variant === "outlined" || variant === "plain") &&
+    color === "error" &&
+    "focus:bg-m3-error/15");
+export const baseClasses = ({ variant, color, shape, underline, hover = false, focus = false, }) => twMerge(variant === "elevated" &&
+    "bg-m3-surface-container-low shadow shadow-m3-shadow/20", variant === "outlined" && "ring-1", variant === "plain" && "", variant === "text" && "underline-offset-4", color === "primary" && "text-m3-primary", color === "secondary" && "text-m3-secondary", color === "tertiary" && "text-m3-tertiary", color === "error" && "text-m3-error", shape === "square" && "", shape === "rounded" && "rounded-md", shape === "circle" && "rounded-full", underline === "always" && "underline", underline === "hover" && "hover:underline", underline === "none" && "", variant === "filled" &&
+    color === "primary" &&
+    "bg-m3-primary text-m3-on-primary", variant === "filled" &&
+    color === "secondary" &&
+    "bg-m3-secondary text-m3-on-secondary", variant === "filled" &&
+    color === "tertiary" &&
+    "bg-m3-tertiary text-m3-on-tertiary", variant === "filled" && color === "error" && "bg-m3-error text-m3-on-error", variant === "tonal" &&
+    color === "primary" &&
+    "bg-m3-primary-container text-m3-on-primary-container", variant === "tonal" &&
+    color === "secondary" &&
+    "bg-m3-secondary-container text-m3-on-secondary-container", variant === "tonal" &&
+    color === "tertiary" &&
+    "bg-m3-tertiary-container text-m3-on-tertiary-container", variant === "tonal" &&
+    color === "error" &&
+    "bg-m3-error-container text-m3-on-error-container", hover && hoverBaseClasses({ variant, color }), focus && focusBaseClasses({ variant, color }));

package/dist/bindable.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare class Bindable<T> {
+    #private;
+    constructor(value: T);
+    bind(getValue: () => T, setValue: (value: T) => void): void;
+    get value(): T;
+    set value(value: T);
+}

package/dist/bindable.svelte.js

@@ -0,0 +1,25 @@
+export class Bindable {
+    #value = $state();
+    #setValue;
+    constructor(value) {
+        this.#value = value;
+    }
+    bind(getValue, setValue) {
+        this.#value = getValue();
+        this.#setValue = setValue;
+        $effect(() => {
+            if (this.#value !== getValue()) {
+                this.#value = getValue();
+            }
+        });
+    }
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        if (this.#value !== value) {
+            this.#value = value;
+            this.#setValue?.(value);
+        }
+    }
+}

package/dist/box/box.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import { baseClasses, type Variants } from "../base";
+  import { noop, type ClassName, type ElementRef } from "../utils";
+
+  export type BoxProps = {
+    centered?: boolean;
+    backdrop?: boolean;
+    children?: Snippet;
+  } & ElementRef &
+    ClassName &
+    Variants &
+    HTMLAttributes<HTMLDivElement>;
+  let {
+    backdrop = false,
+    centered = false,
+    children,
+    el = $bindable(),
+    ref = noop,
+    class: className,
+    variant,
+    color,
+    shape,
+    ...restProps
+  }: BoxProps = $props();
+</script>
+
+<div
+  bind:this={el}
+  use:ref
+  class={twMerge(
+    backdrop && "bg-m3-surface-container",
+    baseClasses({ variant, color, shape }),
+    centered && "flex items-center justify-center",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/box/box.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type Variants } from "../base";
+import { type ClassName, type ElementRef } from "../utils";
+export type BoxProps = {
+    centered?: boolean;
+    backdrop?: boolean;
+    children?: Snippet;
+} & ElementRef & ClassName & Variants & HTMLAttributes<HTMLDivElement>;
+declare const Box: import("svelte").Component<BoxProps, {}, "el">;
+type Box = ReturnType<typeof Box>;
+export default Box;

package/dist/box/index.d.ts

@@ -0,0 +1 @@
+export { default as Box, type BoxProps } from "./box.svelte";

package/dist/box/index.js

@@ -0,0 +1 @@
+export { default as Box } from "./box.svelte";