bits-ui 0.11.7 → 0.11.8

package/dist/bits/index.d.ts

@@ -8,15 +8,16 @@ export * as Checkbox from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as ContextMenu from "./context-menu/index.js";
 export * as DateField from "./date-field/index.js";
-export * as DateRangeField from "./date-range-field/index.js";
 export * as DatePicker from "./date-picker/index.js";
+export * as DateRangeField from "./date-range-field/index.js";
 export * as DateRangePicker from "./date-range-picker/index.js";
 export * as Dialog from "./dialog/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
-export * as LinkPreview from "./link-preview/index.js";
 export * as Label from "./label/index.js";
+export * as LinkPreview from "./link-preview/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as Pagination from "./pagination/index.js";
+export * as PinInput from "./pin-input/index.js";
 export * as Popover from "./popover/index.js";
 export * as Progress from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";

package/dist/bits/index.js

@@ -8,15 +8,16 @@ export * as Checkbox from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as ContextMenu from "./context-menu/index.js";
 export * as DateField from "./date-field/index.js";
-export * as DateRangeField from "./date-range-field/index.js";
 export * as DatePicker from "./date-picker/index.js";
+export * as DateRangeField from "./date-range-field/index.js";
 export * as DateRangePicker from "./date-range-picker/index.js";
 export * as Dialog from "./dialog/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
-export * as LinkPreview from "./link-preview/index.js";
 export * as Label from "./label/index.js";
+export * as LinkPreview from "./link-preview/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as Pagination from "./pagination/index.js";
+export * as PinInput from "./pin-input/index.js";
 export * as Popover from "./popover/index.js";
 export * as Progress from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";

package/dist/bits/pin-input/_export.types.d.ts

@@ -0,0 +1 @@
+export type { Props, InputProps as PinInputProps, HiddenInputProps as PinInputHiddenInputProps } from "./types.js";

package/dist/bits/pin-input/_export.types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/pin-input/_types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { CreatePinInputProps } from "@melt-ui/svelte";
+import type { AsChild, Expand, OmitIds, OmitValue, OnChangeFn } from "../../internal/index.js";
+type Props = Expand<OmitIds<OmitValue<CreatePinInputProps> & {
+    /**
+     * The value pin-input, which is an array of strings.
+     *
+     * You can bind to this to programmatically control the value.
+     */
+    value?: CreatePinInputProps["defaultValue"];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<CreatePinInputProps["defaultValue"]>;
+} & AsChild>>;
+type InputProps = AsChild;
+type HiddenInputProps = AsChild;
+export type { Props, InputProps, HiddenInputProps };

package/dist/bits/pin-input/_types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/pin-input/components/pin-input-hidden-input.svelte

@@ -0,0 +1,23 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getAttrs } from "../ctx.js";
+export let asChild = false;
+const {
+  elements: { hiddenInput },
+  options: { disabled }
+} = getCtx();
+$:
+  attrs = {
+    ...getAttrs("hidden-input"),
+    disabled: $disabled ? true : void 0
+  };
+$:
+  builder = $hiddenInput;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<input {...builder} use:builder.action {...$$restProps} />
+{/if}

package/dist/bits/pin-input/components/pin-input-hidden-input.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import type { HiddenInputProps } from "../types.js";
+declare const __propDef: {
+    props: HiddenInputProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                value: string;
+                name: string | undefined;
+                type: string;
+                'aria-hidden': boolean;
+                hidden: boolean;
+                tabIndex: number;
+                style: string;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+        };
+    };
+};
+export type PinInputHiddenInputProps = typeof __propDef.props;
+export type PinInputHiddenInputEvents = typeof __propDef.events;
+export type PinInputHiddenInputSlots = typeof __propDef.slots;
+export default class PinInputHiddenInput extends SvelteComponent<PinInputHiddenInputProps, PinInputHiddenInputEvents, PinInputHiddenInputSlots> {
+}
+export {};

package/dist/bits/pin-input/components/pin-input-input.svelte

@@ -0,0 +1,29 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getAttrs } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let asChild = false;
+const {
+  elements: { input }
+} = getCtx();
+const dispatch = createDispatcher();
+const attrs = getAttrs("input");
+$:
+  builder = $input();
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<input
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+		on:m-input={dispatch}
+		on:m-paste={dispatch}
+		on:m-change={dispatch}
+		on:m-focus={dispatch}
+		on:m-blur={dispatch}
+	/>
+{/if}

package/dist/bits/pin-input/components/pin-input-input.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { InputEvents, InputProps } from "../types.js";
+declare const __propDef: {
+    props: InputProps;
+    slots: {
+        default: {
+            builder: (() => {
+                'data-complete': string | undefined;
+                placeholder: string;
+                disabled: boolean | undefined;
+                type: "text" | "password";
+                value: string;
+            }) & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLInputElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"input" | "keydown" | "blur" | "change" | "focus" | "paste">;
+            };
+        };
+    };
+    events: InputEvents;
+};
+export type PinInputInputProps = typeof __propDef.props;
+export type PinInputInputEvents = typeof __propDef.events;
+export type PinInputInputSlots = typeof __propDef.slots;
+export default class PinInputInput extends SvelteComponent<PinInputInputProps, PinInputInputEvents, PinInputInputSlots> {
+}
+export {};

package/dist/bits/pin-input/components/pin-input.svelte

@@ -0,0 +1,66 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { setCtx, getAttrs } from "../ctx.js";
+import { derived } from "svelte/store";
+export let placeholder = void 0;
+export let value = void 0;
+export let name = void 0;
+export let disabled = void 0;
+export let type = "text";
+export let onValueChange = void 0;
+export let id = void 0;
+export let asChild = false;
+const {
+  elements: { root },
+  states: { value: localValue },
+  updateOption,
+  ids
+} = setCtx({
+  placeholder,
+  defaultValue: value,
+  name,
+  disabled,
+  type,
+  onValueChange: ({ next }) => {
+    if (value !== next) {
+      onValueChange?.(next);
+      value = next;
+    }
+    return next;
+  }
+});
+$:
+  value !== void 0 && localValue.set(value);
+const attrs = getAttrs("root");
+$:
+  updateOption("placeholder", placeholder);
+$:
+  updateOption("name", name);
+$:
+  updateOption("disabled", disabled);
+$:
+  updateOption("type", type);
+$:
+  builder = $root;
+$:
+  Object.assign(builder, attrs);
+const idValues = derived([ids.root], ([$menubarId]) => ({
+  menubar: $menubarId
+}));
+$:
+  if (id) {
+    ids.root.set(id);
+  }
+$:
+  slotProps = {
+    builder,
+    ids: $idValues
+  };
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {...slotProps} />
+	</div>
+{/if}

package/dist/bits/pin-input/components/pin-input.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { Props } from "../types.js";
+declare const __propDef: {
+    props: Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                id: string;
+                'data-complete': string | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+            ids: {
+                menubar: string;
+            };
+        };
+    };
+};
+export type PinInputProps = typeof __propDef.props;
+export type PinInputEvents = typeof __propDef.events;
+export type PinInputSlots = typeof __propDef.slots;
+export default class PinInput extends SvelteComponent<PinInputProps, PinInputEvents, PinInputSlots> {
+}
+export {};

package/dist/bits/pin-input/ctx.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="svelte" />
+import { type PinInput as PinInputReturn, type CreatePinInputProps as PinInputProps } from "@melt-ui/svelte";
+export declare const getAttrs: (part: "input" | "root" | "hidden-input") => Record<string, string>;
+export declare function setCtx(props: PinInputProps): {
+    updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
+        root: string;
+    }>;
+    elements: {
+        root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
+            update: (updater: import("svelte/store").Updater<string[]>, sideEffect?: ((newValue: string[]) => void) | undefined) => void;
+            set: (this: void, value: string[]) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined): import("svelte/store").Unsubscriber;
+        }, import("svelte/store").Writable<string>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $rootId]: [string[], string]) => {
+            id: string;
+            'data-complete': string | undefined;
+        }, string>;
+        input: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
+            update: (updater: import("svelte/store").Updater<string[]>, sideEffect?: ((newValue: string[]) => void) | undefined) => void;
+            set: (this: void, value: string[]) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined): import("svelte/store").Unsubscriber;
+        }, import("svelte/store").Writable<string>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<"text" | "password">], (node: HTMLInputElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"input" | "keydown" | "blur" | "change" | "focus" | "paste">, ([$value, $placeholder, $disabled, $type]: [string[], string, boolean, "text" | "password"]) => () => {
+            'data-complete': string | undefined;
+            placeholder: string;
+            disabled: boolean | undefined;
+            type: "text" | "password";
+            value: string;
+        }, string>;
+        hiddenInput: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<string>, import("svelte/store").Writable<string | undefined>], import("svelte/action").Action<any, any, Record<never, any>>, ([$valueStr, $nameStore]: [string, string | undefined]) => {
+            value: string;
+            name: string | undefined;
+            type: string;
+            'aria-hidden': boolean;
+            hidden: boolean;
+            tabIndex: number;
+            style: string;
+        }, string>;
+    };
+    states: {
+        value: {
+            update: (updater: import("svelte/store").Updater<string[]>, sideEffect?: ((newValue: string[]) => void) | undefined) => void;
+            set: (this: void, value: string[]) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined): import("svelte/store").Unsubscriber;
+        };
+        valueStr: import("svelte/store").Readable<string>;
+    };
+    helpers: {
+        clear: () => void;
+    };
+    options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<Omit<{
+        placeholder: string;
+        name: string | undefined;
+        disabled: boolean;
+        type: "text" | "password";
+        defaultValue: string[];
+        value?: import("svelte/store").Writable<string[]> | undefined;
+        onValueChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<string[]> | undefined;
+        ids?: Partial<{
+            root: string;
+        }> | undefined;
+    }, "value" | "ids">>;
+};
+export declare function getCtx(): PinInputReturn;

package/dist/bits/pin-input/ctx.js

@@ -0,0 +1,17 @@
+import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
+import { createPinInput } from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+const NAME = "pin-input";
+const PARTS = ["root", "input", "hidden-input"];
+export const getAttrs = createBitAttrs(NAME, PARTS);
+export function setCtx(props) {
+    const pinInput = createPinInput(removeUndefined(props));
+    setContext(NAME, pinInput);
+    return {
+        ...pinInput,
+        updateOption: getOptionUpdater(pinInput.options)
+    };
+}
+export function getCtx() {
+    return getContext(NAME);
+}

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

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/pin-input.svelte";
+export { default as Input } from "./components/pin-input-input.svelte";
+export { default as HiddenInput } from "./components/pin-input-hidden-input.svelte";
+export * from "./types.js";

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

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/pin-input.svelte";
+export { default as Input } from "./components/pin-input-input.svelte";
+export { default as HiddenInput } from "./components/pin-input-hidden-input.svelte";
+export * from "./types.js";

package/dist/bits/pin-input/types.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLDivAttributes } from "../../internal/index.js";
+import type { CustomEventHandler } from "../..";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type * as I from "./_types.js";
+type Props = I.Props & HTMLDivAttributes;
+type InputProps = I.InputProps & HTMLInputAttributes;
+type InputEvents = {
+    keydown: CustomEventHandler<KeyboardEvent, HTMLInputElement>;
+    input: CustomEventHandler<InputEvent, HTMLInputElement>;
+    paste: CustomEventHandler<ClipboardEvent, HTMLInputElement>;
+    change: CustomEventHandler<Event, HTMLInputElement>;
+    focus: CustomEventHandler<FocusEvent, HTMLInputElement>;
+    blur: CustomEventHandler<FocusEvent, HTMLInputElement>;
+};
+type HiddenInputProps = I.HiddenInputProps & HTMLInputAttributes;
+export type { Props, InputProps, HiddenInputProps, InputEvents };

package/dist/bits/pin-input/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "exports": {
@@ -74,7 +74,7 @@
   "type": "module",
   "dependencies": {
     "@internationalized/date": "^3.5.0",
-    "@melt-ui/svelte": "0.65.1",
+    "@melt-ui/svelte": "0.65.2",
     "nanoid": "^5.0.4"
   },
   "peerDependencies": {