@chrissnell/chonky-ui 0.1.7

package/dist/components/Listbox/index.js

@@ -0,0 +1,4 @@
+import Root from './Listbox.svelte';
+import Item from './ListboxItem.svelte';
+const Listbox = Object.assign(Root, { Root, Item });
+export { Listbox };

package/dist/components/LogViewer/LogViewer.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+  import Dot from '../Dot/Dot.svelte';
+
+  interface LogColumn {
+    key: string;
+    label?: string;
+    align?: 'left' | 'right' | 'center';
+    width?: string;
+  }
+
+  interface LogEntry {
+    level: 'info' | 'error' | 'warn' | 'debug';
+    [key: string]: string;
+  }
+
+  export interface LogViewerProps extends HTMLAttributes<HTMLDivElement> {
+    entries: LogEntry[];
+    columns: LogColumn[];
+    showHeader?: boolean;
+    live?: boolean;
+    height?: string;
+    autoscroll?: boolean;
+    class?: string;
+  }
+
+  let {
+    entries,
+    columns,
+    showHeader = false,
+    live = false,
+    height = '220px',
+    autoscroll = true,
+    class: className,
+    ...restProps
+  }: LogViewerProps = $props();
+
+  let bodyEl: HTMLDivElement | undefined = $state();
+
+  const gridTemplateColumns = $derived(
+    columns.map((c) => c.width ?? '1fr').join(' ')
+  );
+
+  const levelClass: Record<string, string> = {
+    info: 'log-ok',
+    error: 'log-err',
+    warn: 'log-warn',
+    debug: 'log-dim'
+  };
+
+  $effect(() => {
+    // track entries length to trigger scroll
+    entries.length;
+    if (autoscroll && bodyEl) {
+      bodyEl.scrollTop = bodyEl.scrollHeight;
+    }
+  });
+</script>
+
+<div class={cn('log-viewer', className)} {...restProps}>
+  <div class="log-toolbar">
+    <Dot on={live} />
+    <span>{live ? 'live' : 'paused'}</span>
+    <span class="ml-auto">{entries.length} entries</span>
+  </div>
+  <div
+    class="log-body log-grid"
+    style:height
+    style:grid-template-columns={gridTemplateColumns}
+    style:white-space="normal"
+    bind:this={bodyEl}
+  >
+    {#if showHeader}
+      {#each columns as col}
+        <div
+          class="log-grid-header"
+          style:text-align={col.align ?? 'left'}
+        >
+          {col.label ?? col.key}
+        </div>
+      {/each}
+    {/if}
+    {#each entries as entry}
+      {#each columns as col}
+        <div
+          class={cn('log-grid-cell', levelClass[entry.level])}
+          style:text-align={col.align ?? 'left'}
+        >
+          {entry[col.key] ?? ''}
+        </div>
+      {/each}
+    {/each}
+  </div>
+</div>

package/dist/components/LogViewer/LogViewer.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface LogColumn {
+    key: string;
+    label?: string;
+    align?: 'left' | 'right' | 'center';
+    width?: string;
+}
+interface LogEntry {
+    level: 'info' | 'error' | 'warn' | 'debug';
+    [key: string]: string;
+}
+export interface LogViewerProps extends HTMLAttributes<HTMLDivElement> {
+    entries: LogEntry[];
+    columns: LogColumn[];
+    showHeader?: boolean;
+    live?: boolean;
+    height?: string;
+    autoscroll?: boolean;
+    class?: string;
+}
+declare const LogViewer: import("svelte").Component<LogViewerProps, {}, "">;
+type LogViewer = ReturnType<typeof LogViewer>;
+export default LogViewer;

package/dist/components/LogViewer/index.d.ts

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

package/dist/components/LogViewer/index.js

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

package/dist/components/Menubar/MenubarContent.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Menubar as BitsMenubar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface MenubarContentProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: MenubarContentProps = $props();
+</script>
+
+<BitsMenubar.Content
+  class={cn(className)}
+  side="bottom"
+  align="start"
+  sideOffset={4}
+  {...restProps}
+>
+  {@render children()}
+</BitsMenubar.Content>

package/dist/components/Menubar/MenubarContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface MenubarContentProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const MenubarContent: import("svelte").Component<MenubarContentProps, {}, "">;
+type MenubarContent = ReturnType<typeof MenubarContent>;
+export default MenubarContent;

package/dist/components/Menubar/MenubarItem.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Menubar as BitsMenubar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLDivAttributes } from 'bits-ui';
+  import { cn } from '../../internal/utils.js';
+
+  export interface MenubarItemProps {
+    class?: string;
+    children?: Snippet;
+    onSelect?: () => void;
+  }
+
+  let {
+    class: className,
+    children,
+    onSelect,
+    ...restProps
+  }: MenubarItemProps = $props();
+</script>
+
+<BitsMenubar.Item class={cn(className)} {onSelect} {...restProps}>
+  {@render children()}
+</BitsMenubar.Item>

package/dist/components/Menubar/MenubarItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+export interface MenubarItemProps {
+    class?: string;
+    children?: Snippet;
+    onSelect?: () => void;
+}
+declare const MenubarItem: import("svelte").Component<MenubarItemProps, {}, "">;
+type MenubarItem = ReturnType<typeof MenubarItem>;
+export default MenubarItem;

package/dist/components/Menubar/MenubarMenu.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Menubar as BitsMenubar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  export interface MenubarMenuProps {
+    value?: string;
+    onOpenChange?: (open: boolean) => void;
+    children?: Snippet;
+  }
+
+  let { children, ...restProps }: MenubarMenuProps = $props();
+</script>
+
+<BitsMenubar.Menu {...restProps}>
+  {@render children()}
+</BitsMenubar.Menu>

package/dist/components/Menubar/MenubarMenu.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+export interface MenubarMenuProps {
+    value?: string;
+    onOpenChange?: (open: boolean) => void;
+    children?: Snippet;
+}
+declare const MenubarMenu: import("svelte").Component<MenubarMenuProps, {}, "">;
+type MenubarMenu = ReturnType<typeof MenubarMenu>;
+export default MenubarMenu;

package/dist/components/Menubar/MenubarRoot.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Menubar as BitsMenubar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface MenubarRootProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: MenubarRootProps = $props();
+</script>
+
+<BitsMenubar.Root class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsMenubar.Root>

package/dist/components/Menubar/MenubarRoot.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface MenubarRootProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const MenubarRoot: import("svelte").Component<MenubarRootProps, {}, "">;
+type MenubarRoot = ReturnType<typeof MenubarRoot>;
+export default MenubarRoot;

package/dist/components/Menubar/MenubarSeparator.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Menubar as BitsMenubar } from 'bits-ui';
+  import { cn } from '../../internal/utils.js';
+
+  export interface MenubarSeparatorProps {
+    class?: string;
+  }
+
+  let {
+    class: className,
+    ...restProps
+  }: MenubarSeparatorProps = $props();
+</script>
+
+<BitsMenubar.Separator class={cn(className)} {...restProps} />

package/dist/components/Menubar/MenubarSeparator.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface MenubarSeparatorProps {
+    class?: string;
+}
+declare const MenubarSeparator: import("svelte").Component<MenubarSeparatorProps, {}, "">;
+type MenubarSeparator = ReturnType<typeof MenubarSeparator>;
+export default MenubarSeparator;

package/dist/components/Menubar/MenubarTrigger.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Menubar as BitsMenubar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface MenubarTriggerProps extends HTMLButtonAttributes {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: MenubarTriggerProps = $props();
+</script>
+
+<BitsMenubar.Trigger class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsMenubar.Trigger>

package/dist/components/Menubar/MenubarTrigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface MenubarTriggerProps extends HTMLButtonAttributes {
+    class?: string;
+    children?: Snippet;
+}
+declare const MenubarTrigger: import("svelte").Component<MenubarTriggerProps, {}, "">;
+type MenubarTrigger = ReturnType<typeof MenubarTrigger>;
+export default MenubarTrigger;

package/dist/components/Menubar/index.d.ts

@@ -0,0 +1,15 @@
+export type { MenubarRootProps } from './MenubarRoot.svelte';
+export type { MenubarMenuProps } from './MenubarMenu.svelte';
+export type { MenubarTriggerProps } from './MenubarTrigger.svelte';
+export type { MenubarContentProps } from './MenubarContent.svelte';
+export type { MenubarItemProps } from './MenubarItem.svelte';
+export type { MenubarSeparatorProps } from './MenubarSeparator.svelte';
+declare const Menubar: import("svelte").Component<import("./MenubarRoot.svelte").MenubarRootProps, {}, ""> & {
+    Root: import("svelte").Component<import("./MenubarRoot.svelte").MenubarRootProps, {}, "">;
+    Menu: import("svelte").Component<import("./MenubarMenu.svelte").MenubarMenuProps, {}, "">;
+    Trigger: import("svelte").Component<import("./MenubarTrigger.svelte").MenubarTriggerProps, {}, "">;
+    Content: import("svelte").Component<import("./MenubarContent.svelte").MenubarContentProps, {}, "">;
+    Item: import("svelte").Component<import("./MenubarItem.svelte").MenubarItemProps, {}, "">;
+    Separator: import("svelte").Component<import("./MenubarSeparator.svelte").MenubarSeparatorProps, {}, "">;
+};
+export { Menubar };

package/dist/components/Menubar/index.js

@@ -0,0 +1,8 @@
+import Root from './MenubarRoot.svelte';
+import Menu from './MenubarMenu.svelte';
+import Trigger from './MenubarTrigger.svelte';
+import Content from './MenubarContent.svelte';
+import Item from './MenubarItem.svelte';
+import Separator from './MenubarSeparator.svelte';
+const Menubar = Object.assign(Root, { Root, Menu, Trigger, Content, Item, Separator });
+export { Menubar };

package/dist/components/Meter/Meter.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface MeterProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    min?: number;
+    max?: number;
+    low?: number;
+    high?: number;
+    invert?: boolean;
+    class?: string;
+  }
+
+  let {
+    value = 0,
+    min = 0,
+    max = 100,
+    low = 33,
+    high = 66,
+    invert = false,
+    class: className,
+    ...restProps
+  }: MeterProps = $props();
+
+  let pct = $derived(Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)));
+  let tier = $derived(value <= low ? 'meter-low' : value <= high ? 'meter-medium' : 'meter-high');
+</script>
+
+<div
+  class={cn('meter', invert && 'meter-invert', className)}
+  role="meter"
+  aria-valuenow={value}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  {...restProps}
+>
+  <div class={cn('meter-fill', tier)} style="width: {pct}%"></div>
+</div>

package/dist/components/Meter/Meter.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface MeterProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    min?: number;
+    max?: number;
+    low?: number;
+    high?: number;
+    invert?: boolean;
+    class?: string;
+}
+declare const Meter: import("svelte").Component<MeterProps, {}, "">;
+type Meter = ReturnType<typeof Meter>;
+export default Meter;

package/dist/components/Meter/index.d.ts

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

package/dist/components/Meter/index.js

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

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface ModalProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onClose?: () => void;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    onClose,
+    class: className,
+    children,
+  }: ModalProps = $props();
+</script>
+
+<Dialog.Root
+  bind:open
+  onOpenChange={(o) => {
+    onOpenChange?.(o);
+    if (!o) onClose?.();
+  }}
+>
+  <Dialog.Overlay class="backdrop" />
+  <Dialog.Content class={cn('modal', className)}>
+    {@render children()}
+  </Dialog.Content>
+</Dialog.Root>

package/dist/components/Modal/Modal.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+export interface ModalProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onClose?: () => void;
+    class?: string;
+    children?: Snippet;
+}
+declare const Modal: import("svelte").Component<ModalProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/Modal/ModalBody.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: ModalBodyProps = $props();
+</script>
+
+<div class={cn('modal-body', className)} {...restProps}>
+  {@render children()}
+</div>

package/dist/components/Modal/ModalBody.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const ModalBody: import("svelte").Component<ModalBodyProps, {}, "">;
+type ModalBody = ReturnType<typeof ModalBody>;
+export default ModalBody;

package/dist/components/Modal/ModalClose.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface ModalCloseProps extends HTMLAttributes<HTMLButtonElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: ModalCloseProps = $props();
+</script>
+
+<Dialog.Close class={cn('modal-close', className)} {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    x
+  {/if}
+</Dialog.Close>

package/dist/components/Modal/ModalClose.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ModalCloseProps extends HTMLAttributes<HTMLButtonElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const ModalClose: import("svelte").Component<ModalCloseProps, {}, "">;
+type ModalClose = ReturnType<typeof ModalClose>;
+export default ModalClose;

package/dist/components/Modal/ModalFooter.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: ModalFooterProps = $props();
+</script>
+
+<div class={cn('modal-footer', className)} {...restProps}>
+  {@render children()}
+</div>

package/dist/components/Modal/ModalFooter.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const ModalFooter: import("svelte").Component<ModalFooterProps, {}, "">;
+type ModalFooter = ReturnType<typeof ModalFooter>;
+export default ModalFooter;

package/dist/components/Modal/ModalHeader.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: ModalHeaderProps = $props();
+</script>
+
+<div class={cn('modal-header', className)} {...restProps}>
+  {@render children()}
+</div>

package/dist/components/Modal/ModalHeader.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const ModalHeader: import("svelte").Component<ModalHeaderProps, {}, "">;
+type ModalHeader = ReturnType<typeof ModalHeader>;
+export default ModalHeader;

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,13 @@
+export type { ModalProps } from './Modal.svelte';
+export type { ModalHeaderProps } from './ModalHeader.svelte';
+export type { ModalBodyProps } from './ModalBody.svelte';
+export type { ModalFooterProps } from './ModalFooter.svelte';
+export type { ModalCloseProps } from './ModalClose.svelte';
+declare const Modal: import("svelte").Component<import("./Modal.svelte").ModalProps, {}, "open"> & {
+    Root: import("svelte").Component<import("./Modal.svelte").ModalProps, {}, "open">;
+    Header: import("svelte").Component<import("./ModalHeader.svelte").ModalHeaderProps, {}, "">;
+    Body: import("svelte").Component<import("./ModalBody.svelte").ModalBodyProps, {}, "">;
+    Footer: import("svelte").Component<import("./ModalFooter.svelte").ModalFooterProps, {}, "">;
+    Close: import("svelte").Component<import("./ModalClose.svelte").ModalCloseProps, {}, "">;
+};
+export { Modal };

package/dist/components/Modal/index.js

@@ -0,0 +1,7 @@
+import Root from './Modal.svelte';
+import Header from './ModalHeader.svelte';
+import Body from './ModalBody.svelte';
+import Footer from './ModalFooter.svelte';
+import Close from './ModalClose.svelte';
+const Modal = Object.assign(Root, { Root, Header, Body, Footer, Close });
+export { Modal };

package/dist/components/NavigationMenu/NavigationMenuContent.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { NavigationMenu as BitsNav } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface NavigationMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: NavigationMenuContentProps = $props();
+</script>
+
+<BitsNav.Content class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsNav.Content>

package/dist/components/NavigationMenu/NavigationMenuContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface NavigationMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const NavigationMenuContent: import("svelte").Component<NavigationMenuContentProps, {}, "">;
+type NavigationMenuContent = ReturnType<typeof NavigationMenuContent>;
+export default NavigationMenuContent;

package/dist/components/NavigationMenu/NavigationMenuItem.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { NavigationMenu as BitsNav } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLLiAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface NavigationMenuItemProps extends HTMLLiAttributes {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: NavigationMenuItemProps = $props();
+</script>
+
+<BitsNav.Item class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsNav.Item>