@chrissnell/chonky-ui 0.1.7

package/dist/components/ScrollArea/ScrollAreaViewport.svelte

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

package/dist/components/ScrollArea/ScrollAreaViewport.svelte.d.ts

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

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

@@ -0,0 +1,9 @@
+export type { ScrollAreaRootProps } from './ScrollAreaRoot.svelte';
+export type { ScrollAreaViewportProps } from './ScrollAreaViewport.svelte';
+export type { ScrollAreaScrollbarProps } from './ScrollAreaScrollbar.svelte';
+declare const ScrollArea: import("svelte").Component<import("./ScrollAreaRoot.svelte").ScrollAreaRootProps, {}, ""> & {
+    Root: import("svelte").Component<import("./ScrollAreaRoot.svelte").ScrollAreaRootProps, {}, "">;
+    Viewport: import("svelte").Component<import("./ScrollAreaViewport.svelte").ScrollAreaViewportProps, {}, "">;
+    Scrollbar: import("svelte").Component<import("./ScrollAreaScrollbar.svelte").ScrollAreaScrollbarProps, {}, "">;
+};
+export { ScrollArea };

package/dist/components/ScrollArea/index.js

@@ -0,0 +1,5 @@
+import Root from './ScrollAreaRoot.svelte';
+import Viewport from './ScrollAreaViewport.svelte';
+import Scrollbar from './ScrollAreaScrollbar.svelte';
+const ScrollArea = Object.assign(Root, { Root, Viewport, Scrollbar });
+export { ScrollArea };

package/dist/components/Select/Select.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { Select as BitsSelect } from 'bits-ui';
+  import type { SelectTriggerProps } from 'bits-ui';
+  import { cn } from '../../internal/utils.js';
+
+  export interface SelectProps extends SelectTriggerProps {
+    options: { value: string; label: string }[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    class?: string;
+  }
+
+  let {
+    options,
+    value = $bindable(''),
+    onValueChange,
+    placeholder = 'Select...',
+    class: className,
+    ...restProps
+  }: SelectProps = $props();
+</script>
+
+<BitsSelect.Root
+  type="single"
+  bind:value
+  onValueChange={(v) => onValueChange?.(v)}
+  items={options}
+>
+  <!-- restProps spread on Trigger: it's the visible interactive element that receives HTML attrs like id, aria-*, data-* -->
+  <BitsSelect.Trigger
+    class={cn('btn', className)}
+    {...restProps}
+  >
+    {options.find((o) => o.value === value)?.label ?? placeholder}
+  </BitsSelect.Trigger>
+  <BitsSelect.Portal>
+    <BitsSelect.Content>
+      <BitsSelect.Viewport>
+        {#each options as option}
+          <BitsSelect.Item value={option.value} label={option.label}>
+            {option.label}
+          </BitsSelect.Item>
+        {/each}
+      </BitsSelect.Viewport>
+    </BitsSelect.Content>
+  </BitsSelect.Portal>
+</BitsSelect.Root>

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

@@ -0,0 +1,14 @@
+import type { SelectTriggerProps } from 'bits-ui';
+export interface SelectProps extends SelectTriggerProps {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    class?: string;
+}
+declare const Select: import("svelte").Component<SelectProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

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

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

package/dist/components/Select/index.js

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

package/dist/components/Separator/Separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Separator as BitsSeparator } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+  }
+
+  let {
+    orientation = 'horizontal',
+    class: className,
+    ...restProps
+  }: SeparatorProps = $props();
+</script>
+
+<BitsSeparator.Root {orientation} class={cn(className)} {...restProps} />

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+}
+declare const Separator: import("svelte").Component<SeparatorProps, {}, "">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

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

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

package/dist/components/Separator/index.js

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

package/dist/components/Slider/Slider.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { Slider as BitsSlider } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface SliderProps extends HTMLAttributes<HTMLSpanElement> {
+    value?: number[];
+    onValueChange?: (value: number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    class?: string;
+  }
+
+  let {
+    value = $bindable([50]),
+    onValueChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    class: className,
+    ...restProps
+  }: SliderProps = $props();
+</script>
+
+<BitsSlider.Root
+  bind:value
+  onValueChange={(v) => onValueChange?.(v)}
+  {min}
+  {max}
+  {step}
+  {disabled}
+  class={cn(className)}
+  {...restProps}
+>
+  <BitsSlider.Range />
+  {#each value as _, i}
+    <BitsSlider.Thumb index={i} />
+  {/each}
+</BitsSlider.Root>

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface SliderProps extends HTMLAttributes<HTMLSpanElement> {
+    value?: number[];
+    onValueChange?: (value: number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    class?: string;
+}
+declare const Slider: import("svelte").Component<SliderProps, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

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

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

package/dist/components/Slider/index.js

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

package/dist/components/Spinner/Spinner.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: number;
+    class?: string;
+  }
+
+  let { size = 16, class: className, ...restProps }: SpinnerProps = $props();
+</script>
+
+<span
+  class={cn('spinner', className)}
+  style="width:{size}px;height:{size}px"
+  {...restProps}
+></span>

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: number;
+    class?: string;
+}
+declare const Spinner: import("svelte").Component<SpinnerProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

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

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

package/dist/components/Spinner/index.js

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

package/dist/components/StatCard/StatCard.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export type StatCardVariant = 'default' | 'success' | 'info' | 'danger' | 'warning' | 'primary';
+
+  export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    label: string;
+    value?: string | number;
+    variant?: StatCardVariant;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    label,
+    value,
+    variant = 'default',
+    children,
+    ...restProps
+  }: StatCardProps = $props();
+</script>
+
+<div
+  class={cn(
+    'stat-card',
+    variant !== 'default' ? `stat-card--${variant}` : '',
+    className
+  )}
+  {...restProps}
+>
+  <span class="stat-card__label">{label}</span>
+  {#if children}
+    <span class="stat-card__value">{@render children()}</span>
+  {:else}
+    <span class="stat-card__value">{value}</span>
+  {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type StatCardVariant = 'default' | 'success' | 'info' | 'danger' | 'warning' | 'primary';
+export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    label: string;
+    value?: string | number;
+    variant?: StatCardVariant;
+    children?: Snippet;
+}
+declare const StatCard: import("svelte").Component<StatCardProps, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;

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

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

package/dist/components/StatCard/index.js

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

package/dist/components/StatusBar/StatusBar.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 StatusBarProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: StatusBarProps = $props();
+</script>
+
+<div class={cn('status-bar', className)} {...restProps}>
+  {@render children()}
+</div>

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

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

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

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

package/dist/components/StatusBar/index.js

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

package/dist/components/Table/Table.svelte

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

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

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

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

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

package/dist/components/Table/index.js

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

package/dist/components/Tabs/TabsContent.svelte

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

package/dist/components/Tabs/TabsContent.svelte.d.ts

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

package/dist/components/Tabs/TabsList.svelte

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

package/dist/components/Tabs/TabsList.svelte.d.ts

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

package/dist/components/Tabs/TabsRoot.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Tabs as BitsTabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface TabsRootProps extends HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    value = $bindable(''),
+    onValueChange,
+    class: className,
+    children,
+    ...restProps
+  }: TabsRootProps = $props();
+</script>
+
+<BitsTabs.Root
+  bind:value
+  onValueChange={(v) => onValueChange?.(v)}
+  class={cn(className)}
+  {...restProps}
+>
+  {@render children()}
+</BitsTabs.Root>

package/dist/components/Tabs/TabsRoot.svelte.d.ts

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

package/dist/components/Tabs/TabsTrigger.svelte

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

package/dist/components/Tabs/TabsTrigger.svelte.d.ts

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

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

@@ -0,0 +1,11 @@
+export type { TabsRootProps } from './TabsRoot.svelte';
+export type { TabsListProps } from './TabsList.svelte';
+export type { TabsTriggerProps } from './TabsTrigger.svelte';
+export type { TabsContentProps } from './TabsContent.svelte';
+declare const Tabs: import("svelte").Component<import("./TabsRoot.svelte").TabsRootProps, {}, "value"> & {
+    Root: import("svelte").Component<import("./TabsRoot.svelte").TabsRootProps, {}, "value">;
+    List: import("svelte").Component<import("./TabsList.svelte").TabsListProps, {}, "">;
+    Trigger: import("svelte").Component<import("./TabsTrigger.svelte").TabsTriggerProps, {}, "">;
+    Content: import("svelte").Component<import("./TabsContent.svelte").TabsContentProps, {}, "">;
+};
+export { Tabs };

package/dist/components/Tabs/index.js

@@ -0,0 +1,6 @@
+import Root from './TabsRoot.svelte';
+import List from './TabsList.svelte';
+import Trigger from './TabsTrigger.svelte';
+import Content from './TabsContent.svelte';
+const Tabs = Object.assign(Root, { Root, List, Trigger, Content });
+export { Tabs };

package/dist/components/ThemeToggle/ThemeToggle.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import Toggle from '../Toggle/Toggle.svelte';
+
+  export interface ThemeToggleProps extends HTMLAttributes<HTMLElement> {
+    theme?: 'dark' | 'light';
+    onThemeChange?: (theme: 'dark' | 'light') => void;
+    class?: string;
+  }
+
+  let {
+    theme = $bindable('light'),
+    onThemeChange,
+    class: className,
+    ...restProps
+  }: ThemeToggleProps = $props();
+
+  let checked = $derived(theme === 'light');
+
+  function handleChange(value: boolean) {
+    theme = value ? 'light' : 'dark';
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', theme);
+      localStorage.setItem('theme', theme);
+    }
+    onThemeChange?.(theme);
+  }
+
+  if (typeof document !== 'undefined') {
+    const stored = localStorage.getItem('theme') as 'dark' | 'light' | null;
+    if (stored) {
+      theme = stored;
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      theme = 'dark';
+    }
+    document.documentElement.setAttribute('data-theme', theme);
+  }
+</script>
+
+<Toggle
+  {checked}
+  onCheckedChange={handleChange}
+  label={theme}
+  class={className}
+  {...restProps}
+/>

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ThemeToggleProps extends HTMLAttributes<HTMLElement> {
+    theme?: 'dark' | 'light';
+    onThemeChange?: (theme: 'dark' | 'light') => void;
+    class?: string;
+}
+declare const ThemeToggle: import("svelte").Component<ThemeToggleProps, {}, "theme">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

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

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

package/dist/components/ThemeToggle/index.js

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

package/dist/components/TimeField/TimeFieldInput.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { TimeField as BitsTimeField } from 'bits-ui';
+  import { cn } from '../../internal/utils.js';
+
+  export interface TimeFieldInputProps {
+    name?: string;
+    class?: string;
+  }
+
+  let { name, class: className, ...restProps }: TimeFieldInputProps = $props();
+</script>
+
+<BitsTimeField.Input {name} class={cn(className)} {...restProps}>
+  {#snippet children({ segments })}
+    {#each segments as { part, value }}
+      <BitsTimeField.Segment {part}>{value}</BitsTimeField.Segment>
+    {/each}
+  {/snippet}
+</BitsTimeField.Input>

package/dist/components/TimeField/TimeFieldInput.svelte.d.ts

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