kosui 0.0.7

package/dist/breadcrumbs/breadcrumbs.svelte

@@ -0,0 +1,39 @@
+<script module lang="ts">
+  import { Link, type LinkProps } from "..";
+  import type { Snippet } from "svelte";
+  import { twMerge } from "tailwind-merge";
+
+  type Crumb = {
+    title: string;
+    href: string;
+  };
+
+  export type BreadcrumbsProps = {
+    path: Crumb[];
+    separator?: Snippet | string;
+  } & Omit<LinkProps, "children">;
+</script>
+
+<script lang="ts">
+  const {
+    path,
+    separator = "›",
+    class: className,
+    ...restProps
+  }: BreadcrumbsProps = $props();
+</script>
+
+<div class={twMerge("flex gap-2", className)}>
+  {#each path as { title, href }, index (title)}
+    {#if index !== 0}
+      <div>
+        {#if typeof separator === "function"}
+          {@render separator()}
+        {:else}
+          {separator}
+        {/if}
+      </div>
+    {/if}
+    <Link {href} {...restProps}>{title}</Link>
+  {/each}
+</div>

package/dist/breadcrumbs/breadcrumbs.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type LinkProps } from "..";
+import type { Snippet } from "svelte";
+type Crumb = {
+    title: string;
+    href: string;
+};
+export type BreadcrumbsProps = {
+    path: Crumb[];
+    separator?: Snippet | string;
+} & Omit<LinkProps, "children">;
+declare const Breadcrumbs: import("svelte").Component<BreadcrumbsProps, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/breadcrumbs/index.d.ts

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

package/dist/breadcrumbs/index.js

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

package/dist/button/button.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+  import type { Icon } from "@lucide/svelte";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import { baseClasses, type Variants } from "../base";
+  import { mergeProps } from "../merge-props";
+  import { Tooltip, type TooltipTriggerProps } from "../tooltip";
+  import { noop, type ClassName, type ElementRef } from "../utils";
+
+  export type ButtonProps = {
+    icon?: typeof Icon;
+    size?: number;
+    tooltip?: Snippet | string;
+  } & ElementRef &
+    ClassName &
+    Variants &
+    HTMLButtonAttributes;
+</script>
+
+<script lang="ts">
+  let {
+    icon: IconComponent,
+    size = 16,
+    tooltip,
+    children,
+    el = $bindable(),
+    ref = noop,
+    class: className,
+    variant = "outlined",
+    color = "primary",
+    shape = "rounded",
+    ...restProps
+  }: ButtonProps = $props();
+</script>
+
+{#snippet button({ ref: anchorRef, ...triggerProps }: TooltipTriggerProps)}
+  <button
+    bind:this={el}
+    use:ref
+    use:anchorRef
+    class={twMerge(
+      baseClasses({ variant, color, shape, hover: true, focus: true }),
+      "flex items-center justify-center gap-2 text-sm text-nowrap transition-all select-none enabled:active:scale-95",
+      children ? "px-4 py-2" : "p-2",
+      className,
+    )}
+    {...mergeProps(restProps, triggerProps)}
+  >
+    {#if IconComponent}
+      <IconComponent {size} />
+    {/if}
+    {@render children?.()}
+  </button>
+{/snippet}
+
+{#if tooltip}
+  <Tooltip arrow>
+    {#snippet trigger(props)}
+      {@render button(props)}
+    {/snippet}
+    {#if typeof tooltip === "function"}
+      {@render tooltip()}
+    {:else}
+      {tooltip}
+    {/if}
+  </Tooltip>
+{:else}
+  {@render button({ ref: noop })}
+{/if}

package/dist/button/button.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Icon } from "@lucide/svelte";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import { type Variants } from "../base";
+import { type ClassName, type ElementRef } from "../utils";
+export type ButtonProps = {
+    icon?: typeof Icon;
+    size?: number;
+    tooltip?: Snippet | string;
+} & ElementRef & ClassName & Variants & HTMLButtonAttributes;
+declare const Button: import("svelte").Component<ButtonProps, {}, "el">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/button/index.d.ts

@@ -0,0 +1 @@
+export { default as Button, type ButtonProps } from "./button.svelte";

package/dist/button/index.js

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

package/dist/chip/chip.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+  import { X } from "@lucide/svelte";
+  import type { Snippet } from "svelte";
+  import { twMerge } from "tailwind-merge";
+
+  export type ChipProps = {
+    title?: string;
+    onClick?: (event: MouseEvent | KeyboardEvent) => void;
+    onDelete?: (event: MouseEvent | KeyboardEvent) => void;
+    children: Snippet;
+  } & BoxProps;
+</script>
+
+<script lang="ts">
+  import { Box, type BoxProps } from "../box";
+
+  let {
+    title,
+    onClick,
+    onDelete,
+    children,
+    el = $bindable(),
+    class: className,
+    variant = "filled",
+    color = "primary",
+    shape = "rounded",
+    ...restProps
+  }: ChipProps = $props();
+</script>
+
+<Box
+  bind:el
+  role="option"
+  {variant}
+  {color}
+  {shape}
+  class={twMerge("inline-flex gap-1 px-1 py-0 text-xs", className)}
+  {...restProps}
+>
+  <button onclick={onClick} {title}>
+    {@render children()}
+  </button>
+
+  {#if onDelete}
+    <button
+      aria-label="Delete chip"
+      class={twMerge(
+        "transition-all hover:ring-1 active:scale-95",
+        shape === "rounded" && "rounded",
+        shape === "circle" && "rounded-full",
+      )}
+      onclick={onDelete}
+    >
+      <X size={12} />
+    </button>
+  {/if}
+</Box>

package/dist/chip/chip.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+export type ChipProps = {
+    title?: string;
+    onClick?: (event: MouseEvent | KeyboardEvent) => void;
+    onDelete?: (event: MouseEvent | KeyboardEvent) => void;
+    children: Snippet;
+} & BoxProps;
+import { type BoxProps } from "../box";
+declare const Chip: import("svelte").Component<ChipProps, {}, "el">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/chip/index.d.ts

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

package/dist/chip/index.js

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

package/dist/command/action.svelte.d.ts

@@ -0,0 +1,35 @@
+import { type Icon } from "@lucide/svelte";
+import type { Shortcut } from "../shortcut";
+type ActionProps = {
+    id: string;
+    callback: () => void;
+    category?: string;
+    name?: string;
+    description?: string;
+    icon?: typeof Icon;
+    enabled?: () => boolean;
+    selected?: () => boolean;
+    shortcut?: Shortcut;
+};
+export declare class Action {
+    id: string;
+    callback: () => void;
+    category: string;
+    name: string;
+    description: string;
+    icon: typeof Icon;
+    enabled: () => boolean;
+    selected?: () => boolean;
+    shortcut?: Shortcut;
+    constructor({ id, callback, category, name, description, icon, enabled, selected, shortcut, }: ActionProps);
+}
+export declare class Registry {
+    #private;
+    get actions(): Action[];
+    get(id: string): Action | undefined;
+    getByShortcut(shortcut: Shortcut): Action | undefined;
+    call(id: string): void;
+    register(...actions: Action[]): () => void;
+    unregister(...actions: Action[]): void;
+}
+export {};

package/dist/command/action.svelte.js

@@ -0,0 +1,76 @@
+import { CircleSlash } from "@lucide/svelte";
+import { untrack } from "svelte";
+export class Action {
+    id;
+    callback;
+    category;
+    name;
+    description;
+    icon;
+    enabled;
+    selected;
+    shortcut;
+    constructor({ id, callback, category, name, description, icon = CircleSlash, enabled = () => true, selected, shortcut, }) {
+        this.id = id;
+        this.callback = callback;
+        this.category = category ?? "";
+        this.name = name ?? id;
+        this.description = description ?? name ?? id;
+        this.icon = icon;
+        this.enabled = enabled;
+        this.selected = selected;
+        this.shortcut = shortcut;
+    }
+}
+export class Registry {
+    #actions = $state([]);
+    #shortcuts = {};
+    get actions() {
+        return this.#actions;
+    }
+    get(id) {
+        for (const action of this.#actions) {
+            if (action.id === id) {
+                return action;
+            }
+        }
+    }
+    getByShortcut(shortcut) {
+        return this.#shortcuts[shortcut.toString()];
+    }
+    call(id) {
+        const action = this.get(id);
+        if (!action) {
+            throw new Error(`No action named "${id}" is registered`);
+        }
+        action.callback();
+    }
+    register(...actions) {
+        for (const action of actions) {
+            untrack(() => {
+                if (this.#actions.find((existing) => existing.id === action.id)) {
+                    throw new Error(`${action.id} is already registered`);
+                }
+            });
+            if (action.shortcut) {
+                if (action.shortcut.toString() in this.#shortcuts) {
+                    throw new Error(`${action.shortcut} is already registered`);
+                }
+                this.#shortcuts[action.shortcut.toString()] = action;
+            }
+        }
+        this.#actions.unshift(...actions);
+        return () => this.unregister(...actions);
+    }
+    unregister(...actions) {
+        for (const action of actions) {
+            const index = this.#actions.indexOf(action);
+            if (index !== -1) {
+                this.#actions.splice(index, 1);
+                if (action.shortcut) {
+                    delete this.#shortcuts[action.shortcut.toString()];
+                }
+            }
+        }
+    }
+}

package/dist/command/command-content.svelte

@@ -0,0 +1,15 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import type { ClassName } from "../utils";
+
+  export type CommandContentProps = { children: Snippet } & ClassName;
+</script>
+
+<script lang="ts">
+  let { class: className, children }: CommandContentProps = $props();
+</script>
+
+<div class={twMerge("h-full overflow-scroll", className)}>
+  {@render children()}
+</div>

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

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

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

@@ -0,0 +1,5 @@
+import { ItemContext } from "../common";
+export declare class CommandContext extends ItemContext {
+}
+export declare function setCommandContext(state: CommandContext): CommandContext;
+export declare function getCommandContext(): CommandContext;

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

@@ -0,0 +1,13 @@
+import { getContext, setContext } from "svelte";
+import { ItemContext } from "../common";
+export class CommandContext extends ItemContext {
+}
+export function setCommandContext(state) {
+    return setContext(CommandContext, state);
+}
+export function getCommandContext() {
+    const ctx = getContext(CommandContext);
+    if (!ctx)
+        throw new Error("CommandContext is undefined");
+    return ctx;
+}

package/dist/command/command-input.svelte

@@ -0,0 +1,44 @@
+<script module lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import { baseClasses, type Variants } from "../base";
+  import { mergeProps } from "../merge-props";
+  import type { ClassName, ElementRef } from "../utils";
+  import { getCommandContext } from "./command-context.svelte";
+
+  export type CommandInputProps = {} & ElementRef &
+    ClassName &
+    Variants &
+    HTMLInputAttributes;
+</script>
+
+<script lang="ts">
+  let {
+    value = $bindable(""),
+    class: className,
+    variant = "plain",
+    color = "secondary",
+    shape = "rounded",
+    ...restProps
+  }: CommandInputProps = $props();
+
+  const ctx = getCommandContext();
+  ctx.bindInput(
+    () => value,
+    (newValue) => (value = newValue),
+  );
+
+  function handleKeyDown(event: KeyboardEvent) {
+    ctx.handleKeyDown(event);
+  }
+</script>
+
+<input
+  bind:value={ctx.input}
+  class={twMerge(
+    baseClasses({ variant, color, shape }),
+    "w-full p-1 focus-visible:outline-hidden",
+    className,
+  )}
+  {...mergeProps({ onkeydown: handleKeyDown }, restProps)}
+/>

package/dist/command/command-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 CommandInputProps = {} & ElementRef & ClassName & Variants & HTMLInputAttributes;
+declare const CommandInput: import("svelte").Component<CommandInputProps, {}, "value">;
+type CommandInput = ReturnType<typeof CommandInput>;
+export default CommandInput;

package/dist/command/command-item.svelte

@@ -0,0 +1,66 @@
+<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 { getCommandContext } from "./command-context.svelte";
+
+  export type CommandItemProps = {
+    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
+  }: CommandItemProps = $props();
+
+  const ctx = getCommandContext();
+
+  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"
+  tabindex="-1"
+  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(restProps, {
+    onclick: handleClick,
+    onmouseenter: handleMouseEnter,
+  })}
+>
+  {@render children()}
+</div>

package/dist/command/command-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 CommandItemProps = {
+    onSelect?: (el: HTMLElement) => void;
+    children: Snippet<[]>;
+} & ElementRef & ClassName & Variants & HTMLAttributes<HTMLDivElement>;
+declare const CommandItem: import("svelte").Component<CommandItemProps, {}, "el">;
+type CommandItem = ReturnType<typeof CommandItem>;
+export default CommandItem;

package/dist/command/command-search.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import { SearchIcon } from "@lucide/svelte";
+  import { CommandInput } from ".";
+  import type { CommandInputProps } from "./command-input.svelte";
+
+  export type CommandSearchProps = {} & CommandInputProps;
+</script>
+
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+
+  let {
+    value = $bindable(""),
+    placeholder = "Search...",
+    class: className,
+    ...restProps
+  }: CommandSearchProps = $props();
+</script>
+
+<div class={twMerge("flex items-center gap-2 px-2", className)}>
+  <SearchIcon size={16} />
+  <CommandInput
+    autofocus
+    bind:value
+    {placeholder}
+    class="h-10"
+    {...restProps}
+  />
+</div>

package/dist/command/command-search.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { CommandInputProps } from "./command-input.svelte";
+export type CommandSearchProps = {} & CommandInputProps;
+declare const CommandSearch: import("svelte").Component<CommandSearchProps, {}, "value">;
+type CommandSearch = ReturnType<typeof CommandSearch>;
+export default CommandSearch;

package/dist/command/command.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import type { ClassName } from "../utils";
+  import { CommandContext, setCommandContext } from "./command-context.svelte";
+
+  export type CommandProps = {
+    children: Snippet<[]>;
+  } & ClassName;
+</script>
+
+<script lang="ts">
+  let { children, class: className }: CommandProps = $props();
+  setCommandContext(new CommandContext());
+</script>
+
+<div class={twMerge("flex h-full flex-col p-1", className)}>
+  {@render children()}
+</div>

package/dist/command/command.svelte.d.ts

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