@gunkin/uiify 0.0.1-alpha

package/dist/components/number-field.d.ts

@@ -0,0 +1 @@
+export * from "./number-field/index.js";

package/dist/components/number-field.js

@@ -0,0 +1 @@
+export * from "./number-field/index.js";

package/dist/components/otp-input/OtpInput.d.ts

@@ -0,0 +1,14 @@
+import { type ElementType, type ReactElement } from "react";
+import type { OtpInputRootProps, OtpInputSlotProps, OtpInputHiddenInputProps } from "./types.js";
+export declare function OtpInputRoot<TAs extends ElementType = "div">(props: OtpInputRootProps<TAs>): ReactElement | null;
+export declare namespace OtpInputRoot {
+    var displayName: string;
+}
+export declare function OtpInputSlot<TAs extends ElementType = "div">(props: OtpInputSlotProps<TAs>): ReactElement | null;
+export declare function OtpInputHiddenInput<TAs extends ElementType = "input">(props: OtpInputHiddenInputProps<TAs>): ReactElement | null;
+export declare const OtpInput: {
+    Root: typeof OtpInputRoot;
+    Slot: typeof OtpInputSlot;
+    HiddenInput: typeof OtpInputHiddenInput;
+};
+//# sourceMappingURL=OtpInput.d.ts.map

package/dist/components/otp-input/OtpInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.d.ts","sourceRoot":"","sources":["../../../src/components/otp-input/OtpInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,WAAW,EAEhB,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAGV,iBAAiB,EACjB,iBAAiB,EACjB,wBAAwB,EACzB,MAAM,YAAY,CAAC;AASpB,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC1D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,GAAG,IAAI,CAuErB;yBAzEe,YAAY;;;AA4E5B,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC1D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,GAAG,IAAI,CA2BrB;AAED,wBAAgB,mBAAmB,CAAC,GAAG,SAAS,WAAW,GAAG,OAAO,EACnE,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC,GACnC,YAAY,GAAG,IAAI,CAqFrB;AAED,eAAO,MAAM,QAAQ;;;;CAIpB,CAAC"}

package/dist/components/otp-input/OtpInput.js

@@ -0,0 +1,193 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { useControllableState, useId } from "@gunkin/uiify/hooks";
+import { createPartContext } from "@gunkin/uiify/core";
+import { composeEventHandlers } from "@gunkin/uiify/core/compose-event-handlers";
+import { useRenderElement } from "@gunkin/uiify/core/render";
+const [OtpInputProvider, useOtpInputContext] = createPartContext("OtpInput");
+function sanitizeValue(raw, type, maxLength) {
+  const pattern = type === "numeric" ? /\d/g : /[a-zA-Z0-9]/g;
+  return (raw.match(pattern) ?? []).join("").slice(0, maxLength);
+}
+function OtpInputRoot(props) {
+  const {
+    as,
+    render,
+    length = 6,
+    value: controlledValue,
+    defaultValue = "",
+    onChange,
+    onComplete,
+    type = "numeric",
+    mask = false,
+    disabled = false,
+    autoFocus = false,
+    ...consumerProps
+  } = props;
+  const hiddenInputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange
+  });
+  const updateValue = useCallback(
+    (nextRaw) => {
+      const next = sanitizeValue(nextRaw, type, length);
+      setValue(next);
+      if (next.length === length) onComplete?.(next);
+    },
+    [length, onComplete, setValue, type]
+  );
+  const { onClick: consumerOnClick } = consumerProps;
+  const handleClick = () => hiddenInputRef.current?.focus();
+  const activeIndex = focused ? Math.min(value.length, length - 1) : -1;
+  const contextValue = useMemo(
+    () => ({
+      activeIndex,
+      autoFocus,
+      disabled,
+      hiddenInputRef,
+      length,
+      mask,
+      onHiddenBlur: () => setFocused(false),
+      onHiddenFocus: () => setFocused(true),
+      type,
+      updateValue,
+      value
+    }),
+    [activeIndex, autoFocus, disabled, length, mask, type, updateValue, value]
+  );
+  const element = useRenderElement({
+    as,
+    defaultTag: "div",
+    props: {
+      ...consumerProps,
+      "data-disabled": disabled ? "" : void 0,
+      "data-complete": value.length === length ? "" : void 0,
+      onClick: composeEventHandlers(consumerOnClick, handleClick)
+    },
+    render,
+    state: { disabled, mask, type }
+  });
+  return /* @__PURE__ */ jsx(OtpInputProvider, { value: contextValue, children: element });
+}
+OtpInputRoot.displayName = "OtpInputRoot";
+function OtpInputSlot(props) {
+  const { as, render, index, ...consumerProps } = props;
+  const { activeIndex, disabled, length, mask, value } = useOtpInputContext("Slot");
+  if (index < 0 || index >= length) {
+    throw new Error(`OtpInput.Slot index ${index} is out of range for length ${length}`);
+  }
+  const char = value[index] ?? "";
+  const active = activeIndex === index;
+  const filled = char !== "";
+  return useRenderElement({
+    as,
+    defaultTag: "div",
+    props: {
+      ...consumerProps,
+      "aria-hidden": true,
+      "data-active": active ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-filled": filled ? "" : void 0,
+      "data-index": index,
+      children: mask && filled ? "\u2022" : char
+    },
+    render,
+    state: { active, filled }
+  });
+}
+function OtpInputHiddenInput(props) {
+  const {
+    as,
+    render,
+    autoFocus: autoFocusProp,
+    style: consumerStyle,
+    ...consumerProps
+  } = props;
+  const {
+    autoFocus: rootAutoFocus,
+    disabled,
+    hiddenInputRef,
+    length,
+    mask,
+    onHiddenBlur,
+    onHiddenFocus,
+    type,
+    updateValue,
+    value
+  } = useOtpInputContext("HiddenInput");
+  const inputId = useId();
+  const autoFocus = autoFocusProp ?? rootAutoFocus;
+  const {
+    onBlur: consumerOnBlur,
+    onChange: consumerOnChange,
+    onFocus: consumerOnFocus,
+    onKeyDown: consumerOnKeyDown,
+    onPaste: consumerOnPaste
+  } = consumerProps;
+  const handleChange = (event) => {
+    updateValue(event.currentTarget.value);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Backspace" && value.length > 0) {
+      event.preventDefault();
+      updateValue(value.slice(0, -1));
+    }
+  };
+  const handlePaste = (event) => {
+    event.preventDefault();
+    updateValue(event.clipboardData.getData("text"));
+  };
+  return useRenderElement({
+    as,
+    defaultTag: "input",
+    props: {
+      ...consumerProps,
+      id: inputId,
+      ref: hiddenInputRef,
+      type: mask ? "password" : "text",
+      inputMode: type === "numeric" ? "numeric" : "text",
+      autoComplete: "one-time-code",
+      autoFocus: autoFocus || void 0,
+      disabled: disabled || void 0,
+      "aria-label": "One-time code",
+      value,
+      maxLength: length,
+      onChange: composeEventHandlers(consumerOnChange, handleChange),
+      onFocus: composeEventHandlers(consumerOnFocus, onHiddenFocus),
+      onBlur: composeEventHandlers(consumerOnBlur, onHiddenBlur),
+      onKeyDown: composeEventHandlers(consumerOnKeyDown, handleKeyDown),
+      onPaste: composeEventHandlers(consumerOnPaste, handlePaste),
+      style: {
+        ...consumerStyle,
+        position: "absolute",
+        opacity: 0,
+        pointerEvents: "none",
+        width: 1,
+        height: 1
+      }
+    },
+    render,
+    state: { disabled }
+  });
+}
+const OtpInput = {
+  Root: OtpInputRoot,
+  Slot: OtpInputSlot,
+  HiddenInput: OtpInputHiddenInput
+};
+export {
+  OtpInput,
+  OtpInputHiddenInput,
+  OtpInputRoot,
+  OtpInputSlot
+};
+//# sourceMappingURL=OtpInput.js.map

package/dist/components/otp-input/OtpInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/otp-input/OtpInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type CSSProperties,\n  type ElementType,\n  type KeyboardEvent,\n  type ReactElement,\n  type SyntheticEvent,\n} from \"react\";\nimport { useControllableState, useId } from \"@gunkin/uiify/hooks\";\nimport { createPartContext } from \"@gunkin/uiify/core\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport type { PolymorphicProps } from \"@gunkin/uiify/core/render\";\nimport type {\n  OtpInputType,\n  OtpInputContextValue,\n  OtpInputRootProps,\n  OtpInputSlotProps,\n  OtpInputHiddenInputProps,\n} from \"./types.js\";\n\nconst [OtpInputProvider, useOtpInputContext] = createPartContext<OtpInputContextValue>(\"OtpInput\");\n\nfunction sanitizeValue(raw: string, type: OtpInputType, maxLength: number): string {\n  const pattern = type === \"numeric\" ? /\\d/g : /[a-zA-Z0-9]/g;\n  return (raw.match(pattern) ?? []).join(\"\").slice(0, maxLength);\n}\n\nexport function OtpInputRoot<TAs extends ElementType = \"div\">(\n  props: OtpInputRootProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    length = 6,\n    value: controlledValue,\n    defaultValue = \"\",\n    onChange,\n    onComplete,\n    type = \"numeric\",\n    mask = false,\n    disabled = false,\n    autoFocus = false,\n    ...consumerProps\n  } = props as OtpInputRootProps<ElementType>;\n\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n  const [focused, setFocused] = useState(false);\n  const [value, setValue] = useControllableState<string>({\n    value: controlledValue,\n    defaultValue,\n    onChange,\n  });\n\n  const updateValue = useCallback(\n    (nextRaw: string) => {\n      const next = sanitizeValue(nextRaw, type, length);\n      setValue(next);\n      if (next.length === length) onComplete?.(next);\n    },\n    [length, onComplete, setValue, type],\n  );\n\n  const { onClick: consumerOnClick } = consumerProps as {\n    onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  };\n\n  const handleClick = () => hiddenInputRef.current?.focus();\n\n  const activeIndex = focused ? Math.min(value.length, length - 1) : -1;\n  const contextValue = useMemo<OtpInputContextValue>(\n    () => ({\n      activeIndex,\n      autoFocus,\n      disabled,\n      hiddenInputRef,\n      length,\n      mask,\n      onHiddenBlur: () => setFocused(false),\n      onHiddenFocus: () => setFocused(true),\n      type,\n      updateValue,\n      value,\n    }),\n    [activeIndex, autoFocus, disabled, length, mask, type, updateValue, value],\n  );\n\n  const element = useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      \"data-disabled\": disabled ? \"\" : undefined,\n      \"data-complete\": value.length === length ? \"\" : undefined,\n      onClick: composeEventHandlers(consumerOnClick, handleClick),\n    },\n    render,\n    state: { disabled, mask, type },\n  });\n\n  return <OtpInputProvider value={contextValue}>{element}</OtpInputProvider>;\n}\nOtpInputRoot.displayName = \"OtpInputRoot\";\n\nexport function OtpInputSlot<TAs extends ElementType = \"div\">(\n  props: OtpInputSlotProps<TAs>,\n): ReactElement | null {\n  const { as, render, index, ...consumerProps } = props as OtpInputSlotProps<ElementType>;\n  const { activeIndex, disabled, length, mask, value } = useOtpInputContext(\"Slot\");\n\n  if (index < 0 || index >= length) {\n    throw new Error(`OtpInput.Slot index ${index} is out of range for length ${length}`);\n  }\n\n  const char = value[index] ?? \"\";\n  const active = activeIndex === index;\n  const filled = char !== \"\";\n\n  return useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      \"aria-hidden\": true,\n      \"data-active\": active ? \"\" : undefined,\n      \"data-disabled\": disabled ? \"\" : undefined,\n      \"data-filled\": filled ? \"\" : undefined,\n      \"data-index\": index,\n      children: mask && filled ? \"•\" : char,\n    },\n    render,\n    state: { active, filled },\n  });\n}\n\nexport function OtpInputHiddenInput<TAs extends ElementType = \"input\">(\n  props: OtpInputHiddenInputProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    autoFocus: autoFocusProp,\n    style: consumerStyle,\n    ...consumerProps\n  } = props as PolymorphicProps<\"input\", { readonly autoFocus?: boolean }>;\n\n  const {\n    autoFocus: rootAutoFocus,\n    disabled,\n    hiddenInputRef,\n    length,\n    mask,\n    onHiddenBlur,\n    onHiddenFocus,\n    type,\n    updateValue,\n    value,\n  } = useOtpInputContext(\"HiddenInput\");\n  const inputId = useId();\n  const autoFocus = autoFocusProp ?? rootAutoFocus;\n  const {\n    onBlur: consumerOnBlur,\n    onChange: consumerOnChange,\n    onFocus: consumerOnFocus,\n    onKeyDown: consumerOnKeyDown,\n    onPaste: consumerOnPaste,\n  } = consumerProps as {\n    onBlur?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    onChange?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    onFocus?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onPaste?: (event: ClipboardEvent<HTMLInputElement>) => void;\n  };\n\n  const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n    updateValue(event.currentTarget.value);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Backspace\" && value.length > 0) {\n      event.preventDefault();\n      updateValue(value.slice(0, -1));\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n    event.preventDefault();\n    updateValue(event.clipboardData.getData(\"text\"));\n  };\n\n  return useRenderElement({\n    as,\n    defaultTag: \"input\",\n    props: {\n      ...consumerProps,\n      id: inputId,\n      ref: hiddenInputRef,\n      type: mask ? \"password\" : \"text\",\n      inputMode: type === \"numeric\" ? \"numeric\" : \"text\",\n      autoComplete: \"one-time-code\",\n      autoFocus: autoFocus || undefined,\n      disabled: disabled || undefined,\n      \"aria-label\": \"One-time code\",\n      value,\n      maxLength: length,\n      onChange: composeEventHandlers(consumerOnChange, handleChange),\n      onFocus: composeEventHandlers(consumerOnFocus, onHiddenFocus),\n      onBlur: composeEventHandlers(consumerOnBlur, onHiddenBlur),\n      onKeyDown: composeEventHandlers(consumerOnKeyDown, handleKeyDown),\n      onPaste: composeEventHandlers(consumerOnPaste, handlePaste),\n      style: {\n        ...consumerStyle,\n        position: \"absolute\",\n        opacity: 0,\n        pointerEvents: \"none\",\n        width: 1,\n        height: 1,\n      } as CSSProperties,\n    },\n    render,\n    state: { disabled },\n  });\n}\n\nexport const OtpInput = {\n  Root: OtpInputRoot,\n  Slot: OtpInputSlot,\n  HiddenInput: OtpInputHiddenInput,\n};\n"],"mappings":"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","names":[]}

package/dist/components/otp-input/index.d.ts

@@ -0,0 +1,3 @@
+export { OtpInput, OtpInputHiddenInput, OtpInputRoot, OtpInputSlot } from "./OtpInput.js";
+export type { OtpInputHiddenInputProps, OtpInputRootControlledOwnProps, OtpInputRootShellOwnProps, OtpInputRootShellProps, OtpInputRootProps, OtpInputSlotOwnProps, OtpInputSlotProps, } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/otp-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/otp-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC1F,YAAY,EACV,wBAAwB,EACxB,8BAA8B,EAC9B,yBAAyB,EACzB,sBAAsB,EACtB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,GAClB,MAAM,YAAY,CAAC"}

package/dist/components/otp-input/index.js

@@ -0,0 +1,8 @@
+import { OtpInput, OtpInputHiddenInput, OtpInputRoot, OtpInputSlot } from "./OtpInput.js";
+export {
+  OtpInput,
+  OtpInputHiddenInput,
+  OtpInputRoot,
+  OtpInputSlot
+};
+//# sourceMappingURL=index.js.map

package/dist/components/otp-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/otp-input/index.ts"],"sourcesContent":["export { OtpInput, OtpInputHiddenInput, OtpInputRoot, OtpInputSlot } from \"./OtpInput.js\";\nexport type {\n  OtpInputHiddenInputProps,\n  OtpInputRootControlledOwnProps,\n  OtpInputRootShellOwnProps,\n  OtpInputRootShellProps,\n  OtpInputRootProps,\n  OtpInputSlotOwnProps,\n  OtpInputSlotProps,\n} from \"./types.js\";\n"],"mappings":"AAAA,SAAS,UAAU,qBAAqB,cAAc,oBAAoB;","names":[]}

package/dist/components/otp-input/types.d.ts

@@ -0,0 +1,46 @@
+import type { ElementType } from "react";
+import type { RenderableProps } from "@gunkin/uiify/core/render";
+export type OtpInputType = "numeric" | "alphanumeric";
+export interface OtpInputContextValue {
+    readonly activeIndex: number;
+    readonly autoFocus: boolean;
+    readonly disabled: boolean;
+    readonly hiddenInputRef: React.RefObject<HTMLInputElement | null>;
+    readonly length: number;
+    readonly mask: boolean;
+    readonly type: OtpInputType;
+    readonly updateValue: (raw: string) => void;
+    readonly value: string;
+    readonly onHiddenBlur: () => void;
+    readonly onHiddenFocus: () => void;
+}
+export interface OtpInputRootShellOwnProps {
+    readonly autoFocus?: boolean;
+    readonly defaultValue?: string;
+    readonly disabled?: boolean;
+    readonly id?: string;
+    readonly length?: number;
+    readonly mask?: boolean;
+    readonly pattern?: string;
+    readonly type?: OtpInputType;
+}
+export interface OtpInputRootControlledOwnProps {
+    readonly onChange?: (value: string) => void;
+    readonly onComplete?: (value: string) => void;
+    readonly value?: string;
+}
+export type OtpInputRootShellProps<TAs extends ElementType = "div"> = RenderableProps<TAs, OtpInputRootShellOwnProps, OtpInputRootShellOwnProps, HTMLElement>;
+export type OtpInputRootProps<TAs extends ElementType = "div"> = RenderableProps<TAs, OtpInputRootShellOwnProps & OtpInputRootControlledOwnProps, OtpInputRootShellOwnProps & OtpInputRootControlledOwnProps, HTMLElement>;
+export interface OtpInputSlotOwnProps {
+    readonly index: number;
+}
+export type OtpInputSlotProps<TAs extends ElementType = "div"> = RenderableProps<TAs, OtpInputSlotOwnProps, {
+    active: boolean;
+    filled: boolean;
+}, HTMLElement>;
+export type OtpInputHiddenInputProps<TAs extends ElementType = "input"> = RenderableProps<TAs, {
+    readonly autoFocus?: boolean;
+}, {
+    disabled: boolean;
+}, HTMLInputElement>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/otp-input/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/otp-input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,cAAc,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAClE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC;IAClC,QAAQ,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC;CAC9B;AAED,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,sBAAsB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,IAAI,eAAe,CACnF,GAAG,EACH,yBAAyB,EACzB,yBAAyB,EACzB,WAAW,CACZ,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,IAAI,eAAe,CAC9E,GAAG,EACH,yBAAyB,GAAG,8BAA8B,EAC1D,yBAAyB,GAAG,8BAA8B,EAC1D,WAAW,CACZ,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,IAAI,eAAe,CAC9E,GAAG,EACH,oBAAoB,EACpB;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,EACpC,WAAW,CACZ,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,GAAG,SAAS,WAAW,GAAG,OAAO,IAAI,eAAe,CACvF,GAAG,EACH;IAAE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAChC;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,EACrB,gBAAgB,CACjB,CAAC"}

package/dist/components/otp-input/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/otp-input/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/otp-input.d.ts

@@ -0,0 +1 @@
+export * from "./otp-input/index.js";

package/dist/components/otp-input.js

@@ -0,0 +1 @@
+export * from "./otp-input/index.js";

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,22 @@
+import type { ElementType, ReactElement } from "react";
+import { PaginationEllipsis as PaginationEllipsisElement, PaginationItemPart } from "./PaginationShell.js";
+import type { PaginationLinkProps, PaginationRootProps } from "./types.js";
+export type { PaginationItem } from "./types.js";
+export { PaginationEllipsis, PaginationItemPart } from "./PaginationShell.js";
+export declare function PaginationRoot<TAs extends ElementType = "nav">(props: PaginationRootProps<TAs>): ReactElement | null;
+export declare namespace PaginationRoot {
+    var displayName: string;
+}
+export declare function PaginationList(): ReactElement | null;
+export declare namespace PaginationList {
+    var displayName: string;
+}
+export declare function PaginationLink<TAs extends ElementType = "button">(props: PaginationLinkProps<TAs>): ReactElement | null;
+export declare const Pagination: {
+    Ellipsis: typeof PaginationEllipsisElement;
+    Item: typeof PaginationItemPart;
+    Link: typeof PaginationLink;
+    List: typeof PaginationList;
+    Root: typeof PaginationRoot;
+};
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAInE,OAAO,EACL,kBAAkB,IAAI,yBAAyB,EAC/C,kBAAkB,EAEnB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAGV,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAK9E,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC5D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CAuDrB;yBAzDe,cAAc;;;AA8F9B,wBAAgB,cAAc,IAAI,YAAY,GAAG,IAAI,CAUpD;yBAVe,cAAc;;;AAa9B,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC/D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CA8BrB;AA0ED,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC"}

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,195 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { createPartContext } from "@gunkin/uiify/core";
+import { composeEventHandlers } from "@gunkin/uiify/core/compose-event-handlers";
+import { useRenderElement } from "@gunkin/uiify/core/render";
+import {
+  PaginationEllipsis as PaginationEllipsisElement,
+  PaginationItemPart,
+  PaginationList as PaginationListElement
+} from "./PaginationShell.js";
+import { usePagination } from "./use-pagination.js";
+import { PaginationEllipsis, PaginationItemPart as PaginationItemPart2 } from "./PaginationShell.js";
+const [PaginationProvider, usePaginationContext] = createPartContext("Pagination");
+function PaginationRoot(props) {
+  const {
+    as,
+    render,
+    "aria-label": ariaLabel = "Pagination",
+    boundaryCount,
+    count,
+    defaultPage,
+    disabled,
+    onChange,
+    page,
+    showFirstLast,
+    siblingCount,
+    children,
+    ...consumerProps
+  } = props;
+  const {
+    items,
+    page: currentPage,
+    setPage
+  } = usePagination({
+    count,
+    ...boundaryCount !== void 0 ? { boundaryCount } : {},
+    ...defaultPage !== void 0 ? { defaultPage } : {},
+    ...disabled !== void 0 ? { disabled } : {},
+    ...onChange !== void 0 ? { onChange } : {},
+    ...page !== void 0 ? { page } : {},
+    ...showFirstLast !== void 0 ? { showFirstLast } : {},
+    ...siblingCount !== void 0 ? { siblingCount } : {}
+  });
+  const contextValue = useMemo(
+    () => ({ count, items, page: currentPage, setPage }),
+    [count, currentPage, items, setPage]
+  );
+  const element = useRenderElement({
+    as,
+    defaultTag: "nav",
+    props: {
+      ...consumerProps,
+      "aria-label": ariaLabel,
+      children: children ?? /* @__PURE__ */ jsx("ol", { children: /* @__PURE__ */ jsx(PaginationListItems, {}) }),
+      "data-uiify-pagination": ""
+    },
+    render,
+    state: { page: currentPage }
+  });
+  return /* @__PURE__ */ jsx(PaginationProvider, { value: contextValue, children: element });
+}
+PaginationRoot.displayName = "PaginationRoot";
+function PaginationListItems() {
+  const { items } = usePaginationContext("List");
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((item, index) => /* @__PURE__ */ jsx(PaginationItemRenderer, { item }, `${item.type}-${item.page ?? index}`)) });
+}
+PaginationListItems.displayName = "PaginationListItems";
+function PaginationItemRenderer({ item }) {
+  switch (item.type) {
+    case "ellipsis":
+      return /* @__PURE__ */ jsx(PaginationEllipsisElement, {});
+    case "previous":
+      return /* @__PURE__ */ jsx(PaginationPrevious, { disabled: item.disabled });
+    case "next":
+      return /* @__PURE__ */ jsx(PaginationNext, { disabled: item.disabled });
+    case "first":
+      return /* @__PURE__ */ jsx(PaginationFirst, { disabled: item.disabled });
+    case "last":
+      return /* @__PURE__ */ jsx(PaginationLast, { disabled: item.disabled });
+    default:
+      return /* @__PURE__ */ jsx(PaginationItemPart, { children: /* @__PURE__ */ jsx(PaginationLink, { disabled: item.disabled, page: item.page ?? 1, selected: item.selected }) });
+  }
+}
+PaginationItemRenderer.displayName = "PaginationItemRenderer";
+function PaginationList() {
+  const { items } = usePaginationContext("List");
+  return /* @__PURE__ */ jsx(PaginationListElement, { children: items.map((item, index) => /* @__PURE__ */ jsx(PaginationItemRenderer, { item }, `${item.type}-${item.page ?? index}`)) });
+}
+PaginationList.displayName = "PaginationList";
+function PaginationLink(props) {
+  const {
+    as,
+    render,
+    disabled = false,
+    page,
+    selected = false,
+    ...consumerProps
+  } = props;
+  const { setPage } = usePaginationContext("Link");
+  const onClick = consumerProps.onClick;
+  return useRenderElement({
+    as,
+    defaultTag: "button",
+    props: {
+      ...consumerProps,
+      "aria-current": selected ? "page" : void 0,
+      "aria-label": `Page ${page}`,
+      "data-selected": selected ? "" : void 0,
+      "data-type": "page",
+      disabled: disabled || void 0,
+      onClick: composeEventHandlers(onClick, () => setPage(page)),
+      type: "button",
+      children: page
+    },
+    render,
+    state: { selected }
+  });
+}
+function PaginationPrevious({ disabled }) {
+  const { page, setPage } = usePaginationContext("Previous");
+  return /* @__PURE__ */ jsx(PaginationItemPart, { children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Previous page",
+      "data-type": "previous",
+      disabled,
+      onClick: () => setPage(page - 1),
+      type: "button",
+      children: "Previous"
+    }
+  ) });
+}
+PaginationPrevious.displayName = "PaginationPrevious";
+function PaginationNext({ disabled }) {
+  const { page, setPage } = usePaginationContext("Next");
+  return /* @__PURE__ */ jsx(PaginationItemPart, { children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Next page",
+      "data-type": "next",
+      disabled,
+      onClick: () => setPage(page + 1),
+      type: "button",
+      children: "Next"
+    }
+  ) });
+}
+PaginationNext.displayName = "PaginationNext";
+function PaginationFirst({ disabled }) {
+  const { setPage } = usePaginationContext("First");
+  return /* @__PURE__ */ jsx(PaginationItemPart, { children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "First page",
+      "data-type": "first",
+      disabled,
+      onClick: () => setPage(1),
+      type: "button",
+      children: "First"
+    }
+  ) });
+}
+PaginationFirst.displayName = "PaginationFirst";
+function PaginationLast({ disabled }) {
+  const { count, setPage } = usePaginationContext("Last");
+  return /* @__PURE__ */ jsx(PaginationItemPart, { children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Last page",
+      "data-type": "last",
+      disabled,
+      onClick: () => setPage(count),
+      type: "button",
+      children: "Last"
+    }
+  ) });
+}
+PaginationLast.displayName = "PaginationLast";
+const Pagination = {
+  Ellipsis: PaginationEllipsisElement,
+  Item: PaginationItemPart,
+  Link: PaginationLink,
+  List: PaginationList,
+  Root: PaginationRoot
+};
+export {
+  Pagination,
+  PaginationEllipsis,
+  PaginationItemPart2 as PaginationItemPart,
+  PaginationLink,
+  PaginationList,
+  PaginationRoot
+};
+//# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport type { ElementType, MouseEvent, ReactElement } from \"react\";\nimport { createPartContext } from \"@gunkin/uiify/core\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport {\n  PaginationEllipsis as PaginationEllipsisElement,\n  PaginationItemPart,\n  PaginationList as PaginationListElement,\n} from \"./PaginationShell.js\";\nimport { usePagination } from \"./use-pagination.js\";\nimport type {\n  PaginationContextValue,\n  PaginationItem,\n  PaginationLinkProps,\n  PaginationRootProps,\n} from \"./types.js\";\n\nexport type { PaginationItem } from \"./types.js\";\n\nexport { PaginationEllipsis, PaginationItemPart } from \"./PaginationShell.js\";\n\nconst [PaginationProvider, usePaginationContext] =\n  createPartContext<PaginationContextValue>(\"Pagination\");\n\nexport function PaginationRoot<TAs extends ElementType = \"nav\">(\n  props: PaginationRootProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    \"aria-label\": ariaLabel = \"Pagination\",\n    boundaryCount,\n    count,\n    defaultPage,\n    disabled,\n    onChange,\n    page,\n    showFirstLast,\n    siblingCount,\n    children,\n    ...consumerProps\n  } = props as PaginationRootProps<\"nav\">;\n\n  const {\n    items,\n    page: currentPage,\n    setPage,\n  } = usePagination({\n    count,\n    ...(boundaryCount !== undefined ? { boundaryCount } : {}),\n    ...(defaultPage !== undefined ? { defaultPage } : {}),\n    ...(disabled !== undefined ? { disabled } : {}),\n    ...(onChange !== undefined ? { onChange } : {}),\n    ...(page !== undefined ? { page } : {}),\n    ...(showFirstLast !== undefined ? { showFirstLast } : {}),\n    ...(siblingCount !== undefined ? { siblingCount } : {}),\n  });\n\n  const contextValue = useMemo(\n    () => ({ count, items, page: currentPage, setPage }),\n    [count, currentPage, items, setPage],\n  );\n\n  const element = useRenderElement({\n    as,\n    defaultTag: \"nav\",\n    props: {\n      ...consumerProps,\n      \"aria-label\": ariaLabel,\n      children: children ?? (\n        <ol>\n          <PaginationListItems />\n        </ol>\n      ),\n      \"data-uiify-pagination\": \"\",\n    },\n    render,\n    state: { page: currentPage },\n  });\n\n  return <PaginationProvider value={contextValue}>{element}</PaginationProvider>;\n}\nPaginationRoot.displayName = \"PaginationRoot\";\n\nfunction PaginationListItems(): ReactElement {\n  const { items } = usePaginationContext(\"List\");\n  return (\n    <>\n      {items.map((item, index) => (\n        <PaginationItemRenderer item={item} key={`${item.type}-${item.page ?? index}`} />\n      ))}\n    </>\n  );\n}\nPaginationListItems.displayName = \"PaginationListItems\";\n\nfunction PaginationItemRenderer({ item }: { readonly item: PaginationItem }): ReactElement {\n  switch (item.type) {\n    case \"ellipsis\":\n      return <PaginationEllipsisElement />;\n    case \"previous\":\n      return <PaginationPrevious disabled={item.disabled} />;\n    case \"next\":\n      return <PaginationNext disabled={item.disabled} />;\n    case \"first\":\n      return <PaginationFirst disabled={item.disabled} />;\n    case \"last\":\n      return <PaginationLast disabled={item.disabled} />;\n    default:\n      return (\n        <PaginationItemPart>\n          <PaginationLink disabled={item.disabled} page={item.page ?? 1} selected={item.selected} />\n        </PaginationItemPart>\n      );\n  }\n}\nPaginationItemRenderer.displayName = \"PaginationItemRenderer\";\n\nexport function PaginationList(): ReactElement | null {\n  const { items } = usePaginationContext(\"List\");\n\n  return (\n    <PaginationListElement>\n      {items.map((item, index) => (\n        <PaginationItemRenderer item={item} key={`${item.type}-${item.page ?? index}`} />\n      ))}\n    </PaginationListElement>\n  );\n}\nPaginationList.displayName = \"PaginationList\";\n\nexport function PaginationLink<TAs extends ElementType = \"button\">(\n  props: PaginationLinkProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    disabled = false,\n    page,\n    selected = false,\n    ...consumerProps\n  } = props as PaginationLinkProps<\"button\">;\n  const { setPage } = usePaginationContext(\"Link\");\n  const onClick = (consumerProps as { onClick?: (event: MouseEvent<HTMLButtonElement>) => void })\n    .onClick;\n\n  return useRenderElement({\n    as,\n    defaultTag: \"button\",\n    props: {\n      ...consumerProps,\n      \"aria-current\": selected ? \"page\" : undefined,\n      \"aria-label\": `Page ${page}`,\n      \"data-selected\": selected ? \"\" : undefined,\n      \"data-type\": \"page\",\n      disabled: disabled || undefined,\n      onClick: composeEventHandlers(onClick, () => setPage(page)),\n      type: \"button\",\n      children: page,\n    },\n    render,\n    state: { selected },\n  });\n}\n\nfunction PaginationPrevious({ disabled }: { readonly disabled: boolean }): ReactElement {\n  const { page, setPage } = usePaginationContext(\"Previous\");\n  return (\n    <PaginationItemPart>\n      <button\n        aria-label=\"Previous page\"\n        data-type=\"previous\"\n        disabled={disabled}\n        onClick={() => setPage(page - 1)}\n        type=\"button\"\n      >\n        Previous\n      </button>\n    </PaginationItemPart>\n  );\n}\nPaginationPrevious.displayName = \"PaginationPrevious\";\n\nfunction PaginationNext({ disabled }: { readonly disabled: boolean }): ReactElement {\n  const { page, setPage } = usePaginationContext(\"Next\");\n  return (\n    <PaginationItemPart>\n      <button\n        aria-label=\"Next page\"\n        data-type=\"next\"\n        disabled={disabled}\n        onClick={() => setPage(page + 1)}\n        type=\"button\"\n      >\n        Next\n      </button>\n    </PaginationItemPart>\n  );\n}\nPaginationNext.displayName = \"PaginationNext\";\n\nfunction PaginationFirst({ disabled }: { readonly disabled: boolean }): ReactElement {\n  const { setPage } = usePaginationContext(\"First\");\n  return (\n    <PaginationItemPart>\n      <button\n        aria-label=\"First page\"\n        data-type=\"first\"\n        disabled={disabled}\n        onClick={() => setPage(1)}\n        type=\"button\"\n      >\n        First\n      </button>\n    </PaginationItemPart>\n  );\n}\nPaginationFirst.displayName = \"PaginationFirst\";\n\nfunction PaginationLast({ disabled }: { readonly disabled: boolean }): ReactElement {\n  const { count, setPage } = usePaginationContext(\"Last\");\n  return (\n    <PaginationItemPart>\n      <button\n        aria-label=\"Last page\"\n        data-type=\"last\"\n        disabled={disabled}\n        onClick={() => setPage(count)}\n        type=\"button\"\n      >\n        Last\n      </button>\n    </PaginationItemPart>\n  );\n}\nPaginationLast.displayName = \"PaginationLast\";\n\nexport const Pagination = {\n  Ellipsis: PaginationEllipsisElement,\n  Item: PaginationItemPart,\n  Link: PaginationLink,\n  List: PaginationList,\n  Root: PaginationRoot,\n};\n"],"mappings":"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","names":["PaginationItemPart"]}

package/dist/components/pagination/PaginationShell.d.ts

@@ -0,0 +1,22 @@
+import type { ElementType, ReactElement } from "react";
+import type { PaginationRootProps, PaginationListProps, PaginationItemProps, PaginationLinkProps, PaginationEllipsisProps } from "./types.js";
+export { buildPaginationItems } from "./pagination-engine.js";
+export declare function PaginationRoot<TAs extends ElementType = "nav">(props: PaginationRootProps<TAs>): ReactElement | null;
+export declare namespace PaginationRoot {
+    var displayName: string;
+}
+export declare function PaginationList<TAs extends ElementType = "ol">(props: PaginationListProps<TAs>): ReactElement | null;
+export declare function PaginationItemPart<TAs extends ElementType = "li">(props: PaginationItemProps<TAs>): ReactElement | null;
+export declare function PaginationLink<TAs extends ElementType = "a">(props: PaginationLinkProps<TAs>): ReactElement | null;
+export declare function PaginationEllipsis<TAs extends ElementType = "span">(props: PaginationEllipsisProps<TAs>): ReactElement | null;
+export declare namespace PaginationEllipsis {
+    var displayName: string;
+}
+export declare const Pagination: {
+    Ellipsis: typeof PaginationEllipsis;
+    Item: typeof PaginationItemPart;
+    Link: typeof PaginationLink;
+    List: typeof PaginationList;
+    Root: typeof PaginationRoot;
+};
+//# sourceMappingURL=PaginationShell.d.ts.map

package/dist/components/pagination/PaginationShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationShell.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/PaginationShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,KAAK,EAEV,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC5D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CAoDrB;yBAtDe,cAAc;;;AAkI9B,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,IAAI,EAC3D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CAUrB;AAED,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,WAAW,GAAG,IAAI,EAC/D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CAUrB;AAED,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,GAAG,EAC1D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CA8BrB;AAyCD,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,WAAW,GAAG,MAAM,EACjE,KAAK,EAAE,uBAAuB,CAAC,GAAG,CAAC,GAClC,YAAY,GAAG,IAAI,CAgBrB;yBAlBe,kBAAkB;;;AAqBlC,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC"}