@signal9/era-ui 1.1.2

package/dist/ui/menubar/menubar-sub-trigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Menubar } from 'bits-ui';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Menubar.SubTriggerProps> = $props();
+</script>
+
+<Menubar.SubTrigger
+	bind:ref
+	class={cn(
+		'flex h-(--era-h-md) cursor-pointer items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow) data-[state=open]:bg-hover',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRight class="size-(--era-h-xs) text-muted" />
+</Menubar.SubTrigger>

package/dist/ui/menubar/menubar-sub-trigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Menubar } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const MenubarSubTrigger: import("svelte").Component<PartProps<Menubar.SubTriggerProps>, {}, "ref">;
+type MenubarSubTrigger = ReturnType<typeof MenubarSubTrigger>;
+export default MenubarSubTrigger;

package/dist/ui/menubar/menubar-trigger.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Menubar } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Menubar.TriggerProps> = $props();
+</script>
+
+<Menubar.Trigger
+	bind:ref
+	class={cn(
+		'flex h-(--era-h-md) items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body text-fg hover:bg-(--era-highlight) focus:outline-none disabled:opacity-50 has-[svg]:gap-(--era-inset-md) data-[state=open]:rounded-b-none data-[state=open]:bg-hover',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</Menubar.Trigger>

package/dist/ui/menubar/menubar-trigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Menubar } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const MenubarTrigger: import("svelte").Component<PartProps<Menubar.TriggerProps>, {}, "ref">;
+type MenubarTrigger = ReturnType<typeof MenubarTrigger>;
+export default MenubarTrigger;

package/dist/ui/meter/index.d.ts

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

package/dist/ui/meter/index.js

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

package/dist/ui/meter/meter.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Meter } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		value = 0,
+		min = 0,
+		max = 100,
+		class: className,
+		...restProps
+	}: Meter.RootProps = $props();
+
+	let percentage = $derived(((value - min) / (max - min)) * 100);
+</script>
+
+<Meter.Root
+	bind:ref
+	{value}
+	{min}
+	{max}
+	class={cn(
+		'h-(--era-sp) w-full overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
+		className
+	)}
+	{...restProps}
+>
+	<div
+		class="h-full w-full bg-fg transition-transform duration-(--era-duration) ease-(--era-ease)"
+		style="transform: translateX(-{100 - percentage}%)"
+	></div>
+</Meter.Root>

package/dist/ui/meter/meter.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Meter } from 'bits-ui';
+declare const Meter: import("svelte").Component<Meter.RootProps, {}, "ref">;
+type Meter = ReturnType<typeof Meter>;
+export default Meter;

package/dist/ui/mode/index.d.ts

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

package/dist/ui/mode/index.js

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

package/dist/ui/mode/mode.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Mode as ProviderMode, Surface, Corners, Font, Motion } from '../provider';
+
+	// Scoped system override. Every library axis is exposed as its own prop
+	// and gets mapped to the mechanism the token system already uses —
+	// either a data-* attribute or a CSS custom property — so the override
+	// flows through CSS inheritance with no JS. To add a new axis:
+	//   • data-* attribute  → add a prop, add it to the <div> data-* block
+	//   • CSS variable      → add a prop, append to inlineStyle
+	let {
+		mode,
+		surface,
+		corners,
+		font,
+		motion,
+		primary,
+		primaryFg,
+		style,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		mode?: ProviderMode;
+		surface?: Surface;
+		corners?: Corners;
+		font?: Font;
+		motion?: Motion;
+		/** Any CSS color — sets --color-primary for this subtree. */
+		primary?: string;
+		/** Foreground against `primary` — sets --color-primary-fg. */
+		primaryFg?: string;
+		children?: Snippet;
+	} = $props();
+
+	// Concatenated so consumers can still pass their own `style` string and
+	// the overrides append rather than clobber.
+	const inlineStyle = $derived(
+		[
+			primary ? `--color-primary: ${primary}` : null,
+			primaryFg ? `--color-primary-fg: ${primaryFg}` : null,
+			style
+		]
+			.filter(Boolean)
+			.join('; ') || undefined
+	);
+</script>
+
+<div
+	data-mode={mode}
+	data-surface={surface}
+	data-corners={corners}
+	data-font={font}
+	data-motion={motion}
+	class={className}
+	style={inlineStyle}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/ui/mode/mode.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Mode as ProviderMode, Surface, Corners, Font, Motion } from '../provider';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    mode?: ProviderMode;
+    surface?: Surface;
+    corners?: Corners;
+    font?: Font;
+    motion?: Motion;
+    /** Any CSS color — sets --color-primary for this subtree. */
+    primary?: string;
+    /** Foreground against `primary` — sets --color-primary-fg. */
+    primaryFg?: string;
+    children?: Snippet;
+};
+declare const Mode: import("svelte").Component<$$ComponentProps, {}, "">;
+type Mode = ReturnType<typeof Mode>;
+export default Mode;

package/dist/ui/navigation-menu/index.d.ts

@@ -0,0 +1,10 @@
+import { NavigationMenu } from 'bits-ui';
+export declare const Root: typeof NavigationMenu.Root;
+export declare const Content: typeof NavigationMenu.Content;
+export declare const Indicator: typeof NavigationMenu.Indicator;
+export declare const Item: typeof NavigationMenu.Item;
+export declare const Link: typeof NavigationMenu.Link;
+export declare const List: typeof NavigationMenu.List;
+export declare const Trigger: typeof NavigationMenu.Trigger;
+export declare const Viewport: typeof NavigationMenu.Viewport;
+export declare const Sub: typeof NavigationMenu.Sub;

package/dist/ui/navigation-menu/index.js

@@ -0,0 +1,10 @@
+import { NavigationMenu } from 'bits-ui';
+export const Root = NavigationMenu.Root;
+export const Content = NavigationMenu.Content;
+export const Indicator = NavigationMenu.Indicator;
+export const Item = NavigationMenu.Item;
+export const Link = NavigationMenu.Link;
+export const List = NavigationMenu.List;
+export const Trigger = NavigationMenu.Trigger;
+export const Viewport = NavigationMenu.Viewport;
+export const Sub = NavigationMenu.Sub;

package/dist/ui/pagination/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Root } from './pagination-root.svelte';
+export { default as Page } from './pagination-page.svelte';
+export { default as PrevButton } from './pagination-prev-button.svelte';
+export { default as NextButton } from './pagination-next-button.svelte';

package/dist/ui/pagination/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './pagination-root.svelte';
+export { default as Page } from './pagination-page.svelte';
+export { default as PrevButton } from './pagination-prev-button.svelte';
+export { default as NextButton } from './pagination-next-button.svelte';

package/dist/ui/pagination/pagination-next-button.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Pagination, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Button, type ButtonVariants } from '../button';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+
+	let {
+		ref = $bindable(null),
+		tone,
+		size,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<Pagination.NextButtonProps> &
+		Pick<ButtonVariants, 'tone' | 'size'> & {
+			children?: Snippet;
+		} = $props();
+</script>
+
+<Pagination.NextButton {...restProps}>
+	{#snippet child({ props })}
+		<Button bind:ref {...props} {tone} {size} icon class={className}>
+			{#if children}
+				{@render children()}
+			{:else}
+				<ChevronRight class="size-(--era-h-xs)" />
+			{/if}
+		</Button>
+	{/snippet}
+</Pagination.NextButton>

package/dist/ui/pagination/pagination-next-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { Pagination, type WithoutChildrenOrChild } from 'bits-ui';
+import { type ButtonVariants } from '../button';
+type $$ComponentProps = WithoutChildrenOrChild<Pagination.NextButtonProps> & Pick<ButtonVariants, 'tone' | 'size'> & {
+    children?: Snippet;
+};
+declare const PaginationNextButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PaginationNextButton = ReturnType<typeof PaginationNextButton>;
+export default PaginationNextButton;

package/dist/ui/pagination/pagination-page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Pagination, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Button, type ButtonVariants } from '../button';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		tone,
+		size,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<Pagination.PageProps> &
+		Pick<ButtonVariants, 'tone' | 'size'> & {
+			children?: Snippet;
+		} = $props();
+</script>
+
+<Pagination.Page {...restProps}>
+	{#snippet child({ props })}
+		<Button
+			bind:ref
+			{...props}
+			{tone}
+			{size}
+			class={cn('data-[selected]:bg-hover data-[selected]:text-bright', className)}
+		>
+			{@render children?.()}
+		</Button>
+	{/snippet}
+</Pagination.Page>

package/dist/ui/pagination/pagination-page.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { Pagination, type WithoutChildrenOrChild } from 'bits-ui';
+import { type ButtonVariants } from '../button';
+type $$ComponentProps = WithoutChildrenOrChild<Pagination.PageProps> & Pick<ButtonVariants, 'tone' | 'size'> & {
+    children?: Snippet;
+};
+declare const PaginationPage: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PaginationPage = ReturnType<typeof PaginationPage>;
+export default PaginationPage;

package/dist/ui/pagination/pagination-prev-button.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Pagination, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Button, type ButtonVariants } from '../button';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+
+	let {
+		ref = $bindable(null),
+		tone,
+		size,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<Pagination.PrevButtonProps> &
+		Pick<ButtonVariants, 'tone' | 'size'> & {
+			children?: Snippet;
+		} = $props();
+</script>
+
+<Pagination.PrevButton {...restProps}>
+	{#snippet child({ props })}
+		<Button bind:ref {...props} {tone} {size} icon class={className}>
+			{#if children}
+				{@render children()}
+			{:else}
+				<ChevronLeft class="size-(--era-h-xs)" />
+			{/if}
+		</Button>
+	{/snippet}
+</Pagination.PrevButton>

package/dist/ui/pagination/pagination-prev-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { Pagination, type WithoutChildrenOrChild } from 'bits-ui';
+import { type ButtonVariants } from '../button';
+type $$ComponentProps = WithoutChildrenOrChild<Pagination.PrevButtonProps> & Pick<ButtonVariants, 'tone' | 'size'> & {
+    children?: Snippet;
+};
+declare const PaginationPrevButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PaginationPrevButton = ReturnType<typeof PaginationPrevButton>;
+export default PaginationPrevButton;

package/dist/ui/pagination/pagination-root.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Pagination } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		page = $bindable(1),
+		class: className,
+		...restProps
+	}: Pagination.RootProps = $props();
+</script>
+
+<Pagination.Root
+	bind:ref
+	bind:page
+	class={cn('flex items-center gap-(--era-gap) text-body', className)}
+	{...restProps}
+/>

package/dist/ui/pagination/pagination-root.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination } from 'bits-ui';
+declare const PaginationRoot: import("svelte").Component<Pagination.RootProps, {}, "ref" | "page">;
+type PaginationRoot = ReturnType<typeof PaginationRoot>;
+export default PaginationRoot;

package/dist/ui/pane/index.d.ts

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

package/dist/ui/pane/index.js

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

package/dist/ui/pane/pane.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		draggable,
+		controls,
+		ControlFrom,
+		disabled as disabledPlugin,
+		events,
+		position as positionPlugin,
+		stateMarker,
+		Compartment,
+		type Plugin,
+		type DragEventData
+	} from '@neodrag/svelte';
+	import type { Component } from 'svelte';
+	import type { IconProps } from '@lucide/svelte';
+	import { cn } from '../../utils/index.js';
+	import { Bar } from '../bar';
+	import { Button } from '../button';
+	import X from '@lucide/svelte/icons/x';
+	import AppWindow from '@lucide/svelte/icons/app-window';
+
+	let {
+		ref = $bindable(null),
+		position = $bindable({ x: 0, y: 0 }),
+		title,
+		icon = AppWindow,
+		disabled = false,
+		plugins = [],
+		onDragStart,
+		onDrag,
+		onDragEnd,
+		onClose,
+		header,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		/** Offset from the pane's layout position. Bindable and writable —
+		 * assign to move the pane programmatically (e.g. reset to 0,0). */
+		position?: { x: number; y: number };
+		/** Text shown in the handle bar. For richer chrome use `header`. */
+		title?: string;
+		/** Lucide icon rendered left of the title. Pass `null` to omit. */
+		icon?: Component<IconProps> | null;
+		/** Disables dragging (reactive). */
+		disabled?: boolean;
+		/** Extra neodrag plugins (axis, bounds, grid, threshold, …) appended
+		 * after the pane's own. Pass Compartments for reactive plugin sets. */
+		plugins?: (Plugin | Compartment)[] | (() => (Plugin | Compartment)[]);
+		onDragStart?: (data: DragEventData) => void;
+		onDrag?: (data: DragEventData) => void;
+		onDragEnd?: (data: DragEventData) => void;
+		/** When set, a close button renders at the right of the handle bar. */
+		onClose?: () => void;
+		/** Extra handle-bar content, rendered after the title. */
+		header?: Snippet;
+		children?: Snippet;
+	} = $props();
+
+	// Compartments are v3's reactive-update mechanism: the wrapped closure
+	// re-resolves when its reactive inputs change, without re-initializing
+	// the draggable.
+	const positionComp = Compartment.of(() => positionPlugin({ current: position }));
+	const disabledComp = Compartment.of(() => (disabled ? disabledPlugin() : null));
+
+	const sync = (data: DragEventData) => {
+		position = { x: data.offset.x, y: data.offset.y };
+	};
+</script>
+
+<div
+	bind:this={ref}
+	class={cn(
+		'group absolute flex w-max flex-col overflow-hidden rounded-(--era-rd-lg) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg) glass-blur',
+		// Promote to its own compositor layer only while dragging, so moves
+		// repaint the layer instead of the page; dropped back to auto at idle.
+		'data-[neodrag-state=dragging]:will-change-transform',
+		className
+	)}
+	{...restProps}
+	{@attach draggable(() => [
+		// The handle bar initiates a drag; interactive controls inside it
+		// (the close button) are carved back out so they click, not drag.
+		controls({
+			allow: ControlFrom.selector('[data-pane-handle]'),
+			block: ControlFrom.selector('[data-pane-control]')
+		}),
+		// Exposes data-neodrag-state="idle | dragging" (and a drag count) on
+		// the root — the hover-highlight and layer-promotion hooks hang off it.
+		stateMarker(),
+		events({
+			onDragStart,
+			onDrag: (data) => {
+				sync(data);
+				onDrag?.(data);
+			},
+			onDragEnd: (data) => {
+				sync(data);
+				onDragEnd?.(data);
+			}
+		}),
+		positionComp,
+		disabledComp,
+		...(typeof plugins === 'function' ? plugins() : plugins)
+	])}
+>
+	<!-- The handle is a small Bar (size="sm", the standalone-pill tier): a
+	     comfortable one line that scales WITH ambient density (22/26/30/38)
+	     but stays well below a full Bar (lg, 32/40/48/64). The sm ⊃ xs (icon
+	     button) even-gap is sp/2 by construction, so the close button stays
+	     concentric at every density. rounded-none defers the corners to the
+	     root's overflow clip — the hover highlight follows the root radius,
+	     square mode included. The whole bar hover-highlights (transient token)
+	     with the default pointer. -->
+	<Bar
+		data-pane-handle
+		size="sm"
+		class="shrink-0 rounded-none select-none hover:bg-(--era-highlight)"
+	>
+		{#if icon}{@const Icon = icon}<Icon class="size-(--era-h-xs) shrink-0 text-muted" />{/if}
+		{#if title}<span class="text-body text-bright">{title}</span>{/if}
+		{@render header?.()}
+		{#if onClose}
+			<Button
+				icon
+				size="icon"
+				tone="destructive"
+				data-pane-control
+				aria-label="Close"
+				onclick={onClose}
+				class="ml-auto"
+			>
+				<X class="size-(--era-h-xs)" />
+			</Button>
+		{/if}
+	</Bar>
+	{#if children}
+		<div class="p-(--era-pad-md)">
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/dist/ui/pane/pane.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { Compartment, type Plugin, type DragEventData } from '@neodrag/svelte';
+import type { Component } from 'svelte';
+import type { IconProps } from '@lucide/svelte';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    /** Offset from the pane's layout position. Bindable and writable —
+     * assign to move the pane programmatically (e.g. reset to 0,0). */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /** Text shown in the handle bar. For richer chrome use `header`. */
+    title?: string;
+    /** Lucide icon rendered left of the title. Pass `null` to omit. */
+    icon?: Component<IconProps> | null;
+    /** Disables dragging (reactive). */
+    disabled?: boolean;
+    /** Extra neodrag plugins (axis, bounds, grid, threshold, …) appended
+     * after the pane's own. Pass Compartments for reactive plugin sets. */
+    plugins?: (Plugin | Compartment)[] | (() => (Plugin | Compartment)[]);
+    onDragStart?: (data: DragEventData) => void;
+    onDrag?: (data: DragEventData) => void;
+    onDragEnd?: (data: DragEventData) => void;
+    /** When set, a close button renders at the right of the handle bar. */
+    onClose?: () => void;
+    /** Extra handle-bar content, rendered after the title. */
+    header?: Snippet;
+    children?: Snippet;
+};
+declare const Pane: Component<$$ComponentProps, {}, "position" | "ref">;
+type Pane = ReturnType<typeof Pane>;
+export default Pane;

package/dist/ui/pin-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './pin-input-root.svelte';
+export { default as Cell } from './pin-input-cell.svelte';

package/dist/ui/pin-input/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './pin-input-root.svelte';
+export { default as Cell } from './pin-input-cell.svelte';

package/dist/ui/pin-input/pin-input-cell.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { PinInput, type WithoutChildrenOrChild } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		cell,
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<PinInput.CellProps> = $props();
+</script>
+
+<PinInput.Cell
+	bind:ref
+	{cell}
+	class={cn(
+		'relative flex h-(--era-h-md) min-w-(--era-h-md) items-center justify-center border-y border-r border-divider bg-(--era-surface-bg-elevated) text-body transition-colors duration-(--era-duration) outline-none first:rounded-l-(--era-rd-md) first:border-l last:rounded-r-(--era-rd-md) data-[active]:bg-(--era-highlight) [&:has(+_:not([data-pin-input-cell]))]:rounded-r-(--era-rd-md)',
+		className
+	)}
+	{...restProps}
+>
+	{#if cell.char !== null}
+		<div>{cell.char}</div>
+	{/if}
+	{#if cell.hasFakeCaret}
+		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+			<div class="h-4 w-px animate-pulse bg-fg"></div>
+		</div>
+	{/if}
+</PinInput.Cell>

package/dist/ui/pin-input/pin-input-cell.svelte.d.ts

@@ -0,0 +1,4 @@
+import { PinInput } from 'bits-ui';
+declare const PinInputCell: import("svelte").Component<Omit<Omit<PinInput.CellProps, "child">, "children">, {}, "ref">;
+type PinInputCell = ReturnType<typeof PinInputCell>;
+export default PinInputCell;

package/dist/ui/pin-input/pin-input-root.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { PinInput } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: PinInput.RootProps = $props();
+</script>
+
+<PinInput.Root
+	bind:ref
+	bind:value
+	class={cn('group/pininput flex items-center text-fg has-[:disabled]:opacity-50', className)}
+	{...restProps}
+/>

package/dist/ui/pin-input/pin-input-root.svelte.d.ts

@@ -0,0 +1,4 @@
+import { PinInput } from 'bits-ui';
+declare const PinInputRoot: import("svelte").Component<PinInput.RootProps, {}, "value" | "ref">;
+type PinInputRoot = ReturnType<typeof PinInputRoot>;
+export default PinInputRoot;

package/dist/ui/popover/index.d.ts

@@ -0,0 +1,7 @@
+import { Popover } from 'bits-ui';
+export declare const Root: typeof Popover.Root;
+export declare const Portal: typeof Popover.Portal;
+export declare const Arrow: typeof Popover.Arrow;
+export { default as Trigger } from './popover-trigger.svelte';
+export { default as Content } from './popover-content.svelte';
+export { default as Close } from './popover-close.svelte';

package/dist/ui/popover/index.js

@@ -0,0 +1,7 @@
+import { Popover } from 'bits-ui';
+export const Root = Popover.Root;
+export const Portal = Popover.Portal;
+export const Arrow = Popover.Arrow;
+export { default as Trigger } from './popover-trigger.svelte';
+export { default as Content } from './popover-content.svelte';
+export { default as Close } from './popover-close.svelte';