@puzzle-ui/ui 0.4.0 → 0.5.1

package/dist/components/forms/token-input/index.js

@@ -0,0 +1,189 @@
+"use client";
+import { getNextActiveIndex, getPreviousActiveIndex, insertTokenCharacters, isTokenComplete, removeTokenCharacter, replaceTokenCharacter, sanitizeToken } from "./token-input.utils.js";
+import "./token-input.css";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/forms/token-input/index.tsx
+const TokenInput = ({ length = 6, value, defaultValue = "", onValueChange, onComplete, mode = "numeric", mask = false, disabled = false, readOnly = false, required = false, size = "md", label, id, name, form, inputMode, autoComplete = "one-time-code", className, style, ref, onFocus, onBlur, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rootProps }) => {
+	if (!Number.isInteger(length) || length < 1 || length > 32) throw new Error("TokenInput length must be an integer between 1 and 32.");
+	const generatedId = useId();
+	const inputId = id ?? `${generatedId}-input`;
+	const labelId = `${inputId}-label`;
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(() => sanitizeToken(defaultValue, length, mode));
+	const currentValue = sanitizeToken(isControlled ? value : internalValue, length, mode);
+	const [activeIndex, setActiveIndex] = useState(() => getNextActiveIndex(currentValue, length));
+	const inputRefs = useRef([]);
+	const completedValueRef = useRef(null);
+	const resolvedActiveIndex = Math.min(activeIndex, length - 1);
+	const isInvalid = ariaInvalid === true || ariaInvalid === "true";
+	const setFirstInputRef = useCallback((node) => {
+		inputRefs.current[0] = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [ref]);
+	const focusInput = useCallback((index) => {
+		const nextIndex = Math.max(0, Math.min(index, length - 1));
+		setActiveIndex(nextIndex);
+		const input = inputRefs.current[nextIndex];
+		input?.focus();
+		input?.select();
+	}, [length]);
+	const commitValue = useCallback((nextValue) => {
+		const normalized = sanitizeToken(nextValue, length, mode);
+		if (normalized === currentValue) return;
+		const wasComplete = isTokenComplete(currentValue, length);
+		const isComplete = isTokenComplete(normalized, length);
+		if (!isControlled) setInternalValue(normalized);
+		onValueChange?.(normalized);
+		if (!wasComplete && isComplete) {
+			if (completedValueRef.current !== normalized) onComplete?.(normalized);
+			completedValueRef.current = normalized;
+		} else if (!isComplete) completedValueRef.current = null;
+	}, [
+		currentValue,
+		isControlled,
+		length,
+		mode,
+		onComplete,
+		onValueChange
+	]);
+	const handleChange = (index, event) => {
+		if (disabled || readOnly) return;
+		const enteredValue = sanitizeToken(event.currentTarget.value, length, mode);
+		const nextValue = enteredValue.length > 1 ? insertTokenCharacters(currentValue, index, enteredValue, length, mode) : replaceTokenCharacter(currentValue, index, enteredValue, length, mode);
+		commitValue(nextValue);
+		if (enteredValue.length > 0) focusInput(Math.min(index + enteredValue.length, length - 1));
+		else focusInput(index);
+	};
+	const handlePaste = (index, event) => {
+		if (disabled || readOnly) {
+			event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		const pastedValue = sanitizeToken(event.clipboardData.getData("text"), length, mode);
+		if (!pastedValue) return;
+		const nextValue = insertTokenCharacters(currentValue, index, pastedValue, length, mode);
+		commitValue(nextValue);
+		focusInput(Math.min(index + pastedValue.length, length - 1));
+	};
+	const handleKeyDown = (index, event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled) return;
+		switch (event.key) {
+			case "ArrowLeft":
+				event.preventDefault();
+				focusInput(index - 1);
+				break;
+			case "ArrowRight":
+				event.preventDefault();
+				focusInput(index + 1);
+				break;
+			case "Home":
+				event.preventDefault();
+				focusInput(0);
+				break;
+			case "End":
+				event.preventDefault();
+				focusInput(length - 1);
+				break;
+			case "Backspace":
+				if (readOnly) return;
+				event.preventDefault();
+				if (currentValue[index]) {
+					commitValue(removeTokenCharacter(currentValue, index));
+					focusInput(index);
+				} else if (index > 0) {
+					const previousIndex = getPreviousActiveIndex(index);
+					commitValue(removeTokenCharacter(currentValue, previousIndex));
+					focusInput(previousIndex);
+				}
+				break;
+			case "Delete":
+				if (readOnly) return;
+				event.preventDefault();
+				if (currentValue[index]) commitValue(removeTokenCharacter(currentValue, index));
+				focusInput(index);
+		}
+	};
+	const handleFocus = (event) => {
+		const index = Number(event.currentTarget.dataset.tokenIndex);
+		setActiveIndex(index);
+		event.currentTarget.select();
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		onBlur?.(event);
+	};
+	const resolvedLabelledBy = ariaLabelledBy ?? (label != null ? labelId : void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		className: cn("puzzle-token-input", className),
+		style,
+		role: "group",
+		"aria-label": ariaLabel,
+		"aria-labelledby": resolvedLabelledBy,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid,
+		"aria-required": required || void 0,
+		"aria-disabled": disabled || void 0,
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"data-readonly": readOnly || void 0,
+		"data-invalid": isInvalid || void 0,
+		children: [
+			label != null && /* @__PURE__ */ jsx("label", {
+				id: labelId,
+				htmlFor: inputId,
+				className: "puzzle-token-input__label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "puzzle-token-input__slots",
+				children: Array.from({ length }, (_, index) => {
+					const character = currentValue[index] ?? "";
+					const slotLabel = ariaLabel ? `${ariaLabel}, character ${index + 1} of ${length}` : index === 0 && (id != null || label != null) ? void 0 : `Character ${index + 1} of ${length}`;
+					return /* @__PURE__ */ jsx("input", {
+						ref: index === 0 ? setFirstInputRef : (node) => {
+							inputRefs.current[index] = node;
+						},
+						id: index === 0 ? inputId : void 0,
+						"data-token-index": index,
+						className: "puzzle-token-input__slot",
+						type: mask ? "password" : "text",
+						inputMode: inputMode ?? (mode === "numeric" ? "numeric" : "text"),
+						autoComplete: index === 0 ? autoComplete : "off",
+						autoCapitalize: "off",
+						spellCheck: false,
+						maxLength: length,
+						value: character,
+						disabled,
+						readOnly,
+						required,
+						tabIndex: index === resolvedActiveIndex ? 0 : -1,
+						"aria-label": slotLabel,
+						"aria-describedby": ariaDescribedBy,
+						"aria-invalid": ariaInvalid,
+						onChange: (event) => handleChange(index, event),
+						onPaste: (event) => handlePaste(index, event),
+						onKeyDown: (event) => handleKeyDown(index, event),
+						onFocus: handleFocus,
+						onBlur: handleBlur
+					}, index);
+				})
+			}),
+			name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				form,
+				value: currentValue,
+				disabled
+			})
+		]
+	});
+};
+export { TokenInput };
+
+//# sourceMappingURL=index.js.map

package/dist/components/forms/token-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/token-input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ClipboardEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport {\n  getNextActiveIndex,\n  getPreviousActiveIndex,\n  insertTokenCharacters,\n  isTokenComplete,\n  removeTokenCharacter,\n  replaceTokenCharacter,\n  sanitizeToken,\n} from \"./token-input.utils\";\n\nimport type { TokenInputProps } from \"./token-input.types\";\n\nimport \"./token-input.css\";\n\nconst TokenInput = ({\n  length = 6,\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  onComplete,\n  mode = \"numeric\",\n  mask = false,\n  disabled = false,\n  readOnly = false,\n  required = false,\n  size = \"md\",\n  label,\n  id,\n  name,\n  form,\n  inputMode,\n  autoComplete = \"one-time-code\",\n  className,\n  style,\n  ref,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ...rootProps\n}: TokenInputProps) => {\n  if (!Number.isInteger(length) || length < 1 || length > 32) {\n    throw new Error(\"TokenInput length must be an integer between 1 and 32.\");\n  }\n\n  const generatedId = useId();\n\n  // The ID belongs to the first native input.\n  // This allows FormField's associated label to work.\n  const inputId = id ?? `${generatedId}-input`;\n  const labelId = `${inputId}-label`;\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    sanitizeToken(defaultValue, length, mode),\n  );\n\n  const currentValue = sanitizeToken(\n    isControlled ? value : internalValue,\n    length,\n    mode,\n  );\n\n  const [activeIndex, setActiveIndex] = useState(() =>\n    getNextActiveIndex(currentValue, length),\n  );\n\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const completedValueRef = useRef<string | null>(null);\n\n  const resolvedActiveIndex = Math.min(activeIndex, length - 1);\n\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n\n  const setFirstInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRefs.current[0] = node;\n\n      if (typeof ref === \"function\") {\n        return ref(node);\n      }\n\n      if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  const focusInput = useCallback(\n    (index: number) => {\n      const nextIndex = Math.max(0, Math.min(index, length - 1));\n\n      setActiveIndex(nextIndex);\n\n      const input = inputRefs.current[nextIndex];\n\n      input?.focus();\n      input?.select();\n    },\n    [length],\n  );\n\n  const commitValue = useCallback(\n    (nextValue: string) => {\n      const normalized = sanitizeToken(nextValue, length, mode);\n\n      if (normalized === currentValue) {\n        return;\n      }\n\n      const wasComplete = isTokenComplete(currentValue, length);\n\n      const isComplete = isTokenComplete(normalized, length);\n\n      if (!isControlled) {\n        setInternalValue(normalized);\n      }\n\n      onValueChange?.(normalized);\n\n      if (!wasComplete && isComplete) {\n        if (completedValueRef.current !== normalized) {\n          onComplete?.(normalized);\n        }\n\n        completedValueRef.current = normalized;\n      } else if (!isComplete) {\n        completedValueRef.current = null;\n      }\n    },\n    [currentValue, isControlled, length, mode, onComplete, onValueChange],\n  );\n\n  const handleChange = (\n    index: number,\n    event: ChangeEvent<HTMLInputElement>,\n  ) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    const enteredValue = sanitizeToken(event.currentTarget.value, length, mode);\n\n    const nextValue =\n      enteredValue.length > 1\n        ? insertTokenCharacters(currentValue, index, enteredValue, length, mode)\n        : replaceTokenCharacter(\n            currentValue,\n            index,\n            enteredValue,\n            length,\n            mode,\n          );\n\n    commitValue(nextValue);\n\n    if (enteredValue.length > 0) {\n      focusInput(Math.min(index + enteredValue.length, length - 1));\n    } else {\n      focusInput(index);\n    }\n  };\n\n  const handlePaste = (\n    index: number,\n    event: ClipboardEvent<HTMLInputElement>,\n  ) => {\n    if (disabled || readOnly) {\n      event.preventDefault();\n      return;\n    }\n\n    event.preventDefault();\n\n    const pastedValue = sanitizeToken(\n      event.clipboardData.getData(\"text\"),\n      length,\n      mode,\n    );\n\n    if (!pastedValue) {\n      return;\n    }\n\n    const nextValue = insertTokenCharacters(\n      currentValue,\n      index,\n      pastedValue,\n      length,\n      mode,\n    );\n\n    commitValue(nextValue);\n\n    focusInput(Math.min(index + pastedValue.length, length - 1));\n  };\n\n  const handleKeyDown = (\n    index: number,\n    event: KeyboardEvent<HTMLInputElement>,\n  ) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || disabled) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowLeft\": {\n        event.preventDefault();\n        focusInput(index - 1);\n        break;\n      }\n\n      case \"ArrowRight\": {\n        event.preventDefault();\n        focusInput(index + 1);\n        break;\n      }\n\n      case \"Home\": {\n        event.preventDefault();\n        focusInput(0);\n        break;\n      }\n\n      case \"End\": {\n        event.preventDefault();\n        focusInput(length - 1);\n        break;\n      }\n\n      case \"Backspace\": {\n        if (readOnly) {\n          return;\n        }\n\n        event.preventDefault();\n\n        if (currentValue[index]) {\n          commitValue(removeTokenCharacter(currentValue, index));\n\n          focusInput(index);\n        } else if (index > 0) {\n          const previousIndex = getPreviousActiveIndex(index);\n\n          commitValue(removeTokenCharacter(currentValue, previousIndex));\n\n          focusInput(previousIndex);\n        }\n\n        break;\n      }\n\n      case \"Delete\": {\n        if (readOnly) {\n          return;\n        }\n\n        event.preventDefault();\n\n        if (currentValue[index]) {\n          commitValue(removeTokenCharacter(currentValue, index));\n        }\n\n        focusInput(index);\n        break;\n      }\n\n      default:\n        break;\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    const index = Number(event.currentTarget.dataset.tokenIndex);\n\n    setActiveIndex(index);\n\n    // Selecting the current character makes replacement intuitive.\n    event.currentTarget.select();\n\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n  };\n\n  const resolvedLabelledBy =\n    ariaLabelledBy ?? (label != null ? labelId : undefined);\n\n  return (\n    <div\n      {...rootProps}\n      className={cn(\"puzzle-token-input\", className)}\n      style={style}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={resolvedLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={ariaInvalid}\n      aria-required={required || undefined}\n      aria-disabled={disabled || undefined}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      data-invalid={isInvalid || undefined}\n    >\n      {label != null && (\n        <label\n          id={labelId}\n          htmlFor={inputId}\n          className=\"puzzle-token-input__label\"\n        >\n          {label}\n        </label>\n      )}\n\n      <div className=\"puzzle-token-input__slots\">\n        {Array.from({ length }, (_, index) => {\n          const character = currentValue[index] ?? \"\";\n\n          const slotLabel = ariaLabel\n            ? `${ariaLabel}, character ${index + 1} of ${length}`\n            : index === 0 && (id != null || label != null)\n              ? undefined\n              : `Character ${index + 1} of ${length}`;\n\n          return (\n            <input\n              key={index}\n              ref={\n                index === 0\n                  ? setFirstInputRef\n                  : (node) => {\n                      inputRefs.current[index] = node;\n                    }\n              }\n              id={index === 0 ? inputId : undefined}\n              data-token-index={index}\n              className=\"puzzle-token-input__slot\"\n              type={mask ? \"password\" : \"text\"}\n              inputMode={inputMode ?? (mode === \"numeric\" ? \"numeric\" : \"text\")}\n              autoComplete={index === 0 ? autoComplete : \"off\"}\n              autoCapitalize=\"off\"\n              spellCheck={false}\n              maxLength={length}\n              value={character}\n              disabled={disabled}\n              readOnly={readOnly}\n              required={required}\n              tabIndex={index === resolvedActiveIndex ? 0 : -1}\n              aria-label={slotLabel}\n              aria-describedby={ariaDescribedBy}\n              aria-invalid={ariaInvalid}\n              onChange={(event) => handleChange(index, event)}\n              onPaste={(event) => handlePaste(index, event)}\n              onKeyDown={(event) => handleKeyDown(index, event)}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n            />\n          );\n        })}\n      </div>\n\n      {name && (\n        <input\n          type=\"hidden\"\n          name={name}\n          form={form}\n          value={currentValue}\n          disabled={disabled}\n        />\n      )}\n    </div>\n  );\n};\n\nexport { TokenInput };\n\nexport type {\n  TokenInputProps,\n  TokenInputMode,\n  TokenInputSize,\n} from \"./token-input.types\";\n"],"mappings":"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"}

package/dist/components/forms/token-input/token-input.css

@@ -0,0 +1,145 @@
+.puzzle-token-input {
+  align-items: flex-start;
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  width: fit-content;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+}
+
+.puzzle-token-input__label {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+}
+
+.puzzle-token-input__slots {
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  direction: ltr;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  display: flex;
+}
+
+.puzzle-token-input__slot {
+  box-sizing: border-box;
+  border: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  background: var(--puzzle-color-surface);
+  width: 2.5rem;
+  min-width: 0;
+  height: 2.75rem;
+  color: var(--puzzle-color-text);
+  font: inherit;
+  font-size: 1.125rem;
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  caret-color: var(--puzzle-color-ring);
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: border-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        box-shadow var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        background-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  outline: none;
+  flex: none;
+  padding: 0;
+  line-height: 1;
+  display: block;
+}
+
+.puzzle-token-input__slot:hover:not(:disabled) {
+  border-color: var(--puzzle-color-text-muted);
+}
+
+.puzzle-token-input__slot:focus {
+  border-color: var(--puzzle-color-ring);
+}
+
+.puzzle-token-input__slot:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--puzzle-color-ring), transparent 82%);
+}
+
+.puzzle-token-input[data-invalid="true"] .puzzle-token-input__slot {
+  border-color: var(--puzzle-color-danger);
+}
+
+.puzzle-token-input[data-invalid="true"] .puzzle-token-input__slot:focus-visible {
+  outline-color: var(--puzzle-color-danger);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--puzzle-color-danger), transparent 82%);
+}
+
+.puzzle-token-input[data-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.puzzle-token-input[data-disabled="true"] .puzzle-token-input__slot {
+  opacity: .6;
+  cursor: not-allowed;
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-token-input[data-readonly="true"] .puzzle-token-input__slot {
+  cursor: default;
+}
+
+.puzzle-token-input[data-size="sm"] .puzzle-token-input__slot {
+  width: 2rem;
+  height: 2.25rem;
+  font-size: var(--puzzle-font-size-sm, .875rem);
+}
+
+.puzzle-token-input[data-size="md"] .puzzle-token-input__slot {
+  width: 2.5rem;
+  height: 2.75rem;
+}
+
+.puzzle-token-input[data-size="lg"] .puzzle-token-input__slot {
+  width: 3rem;
+  height: 3.25rem;
+  font-size: 1.375rem;
+}
+
+@media (width <= 360px) {
+  .puzzle-token-input__slots {
+    gap: var(--puzzle-space-1, .25rem);
+  }
+
+  .puzzle-token-input[data-size="md"] .puzzle-token-input__slot {
+    width: 2.25rem;
+  }
+}
+
+@media (forced-colors: active) {
+  .puzzle-token-input__slot {
+    color: fieldtext;
+    forced-color-adjust: auto;
+    background: field;
+    border-color: fieldtext;
+  }
+
+  .puzzle-token-input__slot:focus-visible {
+    outline-offset: 2px;
+    outline: 2px solid highlight;
+  }
+
+  .puzzle-token-input__slot:disabled {
+    color: graytext;
+    border-color: graytext;
+  }
+
+  .puzzle-token-input[data-invalid="true"] .puzzle-token-input__slot {
+    border-color: mark;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-token-input__slot {
+    transition: none;
+  }
+}

package/dist/components/forms/token-input/token-input.types.d.cts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, ReactNode, Ref } from "react";
+type TokenInputMode = "numeric" | "alphanumeric";
+type TokenInputSize = "sm" | "md" | "lg";
+type TokenInputProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "id" | "onChange" | "onFocus" | "onBlur" | "onKeyDown"> & {
+  /** Number of characters in the token. Defaults to 6. */
+  length?: number;
+  /** Controlled token value. */
+  value?: string;
+  /** Initial value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called whenever the token value changes. */
+  onValueChange?: (value: string) => void;
+  /** Called when the token transitions from incomplete to complete. */
+  onComplete?: (value: string) => void;
+  /** Allowed characters. Defaults to numeric. */
+  mode?: TokenInputMode;
+  /** Masks the entered characters. */
+  mask?: boolean;
+  /** Disables all inputs. */
+  disabled?: boolean;
+  /** Makes all inputs read-only. */
+  readOnly?: boolean;
+  /** Marks every character input as required. */
+  required?: boolean;
+  /** Visual size of the individual character slots. */
+  size?: TokenInputSize;
+  /** Visible label associated with the first input. */
+  label?: ReactNode;
+  /** ID applied to the first native input. */
+  id?: string;
+  /** Name used for native form submission. */
+  name?: string;
+  /** Associates the hidden form input with a form. */
+  form?: string;
+  /** Input mode for the native character inputs. */
+  inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
+  /** Autocomplete mode for the first character input. */
+  autoComplete?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+  /** Ref forwarded to the first native input. */
+  ref?: Ref<HTMLInputElement>;
+  /** Called when an individual character input receives focus. */
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  /** Called when an individual character input loses focus. */
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  /** Called when an individual character input receives a key event. */
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+};
+export type { TokenInputMode, TokenInputProps, TokenInputSize };

package/dist/components/forms/token-input/token-input.types.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, ReactNode, Ref } from "react";
+type TokenInputMode = "numeric" | "alphanumeric";
+type TokenInputSize = "sm" | "md" | "lg";
+type TokenInputProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "id" | "onChange" | "onFocus" | "onBlur" | "onKeyDown"> & {
+  /** Number of characters in the token. Defaults to 6. */
+  length?: number;
+  /** Controlled token value. */
+  value?: string;
+  /** Initial value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called whenever the token value changes. */
+  onValueChange?: (value: string) => void;
+  /** Called when the token transitions from incomplete to complete. */
+  onComplete?: (value: string) => void;
+  /** Allowed characters. Defaults to numeric. */
+  mode?: TokenInputMode;
+  /** Masks the entered characters. */
+  mask?: boolean;
+  /** Disables all inputs. */
+  disabled?: boolean;
+  /** Makes all inputs read-only. */
+  readOnly?: boolean;
+  /** Marks every character input as required. */
+  required?: boolean;
+  /** Visual size of the individual character slots. */
+  size?: TokenInputSize;
+  /** Visible label associated with the first input. */
+  label?: ReactNode;
+  /** ID applied to the first native input. */
+  id?: string;
+  /** Name used for native form submission. */
+  name?: string;
+  /** Associates the hidden form input with a form. */
+  form?: string;
+  /** Input mode for the native character inputs. */
+  inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
+  /** Autocomplete mode for the first character input. */
+  autoComplete?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+  /** Ref forwarded to the first native input. */
+  ref?: Ref<HTMLInputElement>;
+  /** Called when an individual character input receives focus. */
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  /** Called when an individual character input loses focus. */
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  /** Called when an individual character input receives a key event. */
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+};
+export type { TokenInputMode, TokenInputProps, TokenInputSize };

package/dist/components/forms/token-input/token-input.utils.cjs

@@ -0,0 +1,30 @@
+// src/components/forms/token-input/token-input.utils.ts
+const sanitizeToken = (value, length, mode = "numeric") => {
+	return (mode === "numeric" ? value.replace(/[^0-9]/g, "") : value.replace(/[^a-zA-Z0-9]/g, "")).slice(0, Math.max(0, length));
+};
+const getNextActiveIndex = (value, length) => Math.min(value.length, length - 1);
+const getPreviousActiveIndex = (index) => Math.max(0, index - 1);
+const isTokenComplete = (value, length) => value.length === length;
+const removeTokenCharacter = (value, index) => value.slice(0, index) + value.slice(index + 1);
+const replaceTokenCharacter = (value, index, character, length, mode) => {
+	const normalized = sanitizeToken(character, length, mode);
+	if (!normalized) return removeTokenCharacter(value, index);
+	return sanitizeToken(value.slice(0, index) + normalized[0] + value.slice(index + 1), length, mode);
+};
+const insertTokenCharacters = (value, index, insertedValue, length, mode) => {
+	const normalized = sanitizeToken(insertedValue, length, mode);
+	if (!normalized) return value;
+	if (normalized.length >= length) return normalized.slice(0, length);
+	if (normalized.length === 1) return replaceTokenCharacter(value, index, normalized, length, mode);
+	const start = Math.max(0, Math.min(index, length));
+	return sanitizeToken(value.slice(0, start) + normalized + value.slice(start + normalized.length), length, mode);
+};
+exports.getNextActiveIndex = getNextActiveIndex;
+exports.getPreviousActiveIndex = getPreviousActiveIndex;
+exports.insertTokenCharacters = insertTokenCharacters;
+exports.isTokenComplete = isTokenComplete;
+exports.removeTokenCharacter = removeTokenCharacter;
+exports.replaceTokenCharacter = replaceTokenCharacter;
+exports.sanitizeToken = sanitizeToken;
+
+//# sourceMappingURL=token-input.utils.cjs.map

package/dist/components/forms/token-input/token-input.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-input.utils.cjs","names":[],"sources":["../../../../src/components/forms/token-input/token-input.utils.ts"],"sourcesContent":["import type { TokenInputMode } from \"./token-input.types\";\n\nconst sanitizeToken = (\n  value: string,\n  length: number,\n  mode: TokenInputMode = \"numeric\",\n): string => {\n  const normalized =\n    mode === \"numeric\"\n      ? value.replace(/[^0-9]/g, \"\")\n      : value.replace(/[^a-zA-Z0-9]/g, \"\");\n\n  return normalized.slice(0, Math.max(0, length));\n};\n\nconst getNextActiveIndex = (value: string, length: number): number =>\n  Math.min(value.length, length - 1);\n\nconst getPreviousActiveIndex = (index: number): number =>\n  Math.max(0, index - 1);\n\nconst isTokenComplete = (value: string, length: number): boolean =>\n  value.length === length;\n\nconst removeTokenCharacter = (value: string, index: number): string =>\n  value.slice(0, index) + value.slice(index + 1);\n\nconst replaceTokenCharacter = (\n  value: string,\n  index: number,\n  character: string,\n  length: number,\n  mode: TokenInputMode,\n): string => {\n  const normalized = sanitizeToken(character, length, mode);\n\n  if (!normalized) {\n    return removeTokenCharacter(value, index);\n  }\n\n  return sanitizeToken(\n    value.slice(0, index) + normalized[0] + value.slice(index + 1),\n    length,\n    mode,\n  );\n};\n\nconst insertTokenCharacters = (\n  value: string,\n  index: number,\n  insertedValue: string,\n  length: number,\n  mode: TokenInputMode,\n): string => {\n  const normalized = sanitizeToken(insertedValue, length, mode);\n\n  if (!normalized) {\n    return value;\n  }\n\n  // A complete token always replaces the existing token.\n  if (normalized.length >= length) {\n    return normalized.slice(0, length);\n  }\n\n  // A single character replaces the current position.\n  if (normalized.length === 1) {\n    return replaceTokenCharacter(value, index, normalized, length, mode);\n  }\n\n  // Multiple characters are inserted at the current position.\n  const start = Math.max(0, Math.min(index, length));\n\n  return sanitizeToken(\n    value.slice(0, start) + normalized + value.slice(start + normalized.length),\n    length,\n    mode,\n  );\n};\n\nexport {\n  sanitizeToken,\n  getNextActiveIndex,\n  getPreviousActiveIndex,\n  isTokenComplete,\n  removeTokenCharacter,\n  replaceTokenCharacter,\n  insertTokenCharacters,\n};\n"],"mappings":";AAEA,MAAM,iBACJ,OACA,QACA,OAAuB,cACZ;CAMX,QAJE,SAAS,YACL,MAAM,QAAQ,WAAW,EAAE,IAC3B,MAAM,QAAQ,iBAAiB,EAAE,EAAA,CAErB,MAAM,GAAG,KAAK,IAAI,GAAG,MAAM,CAAC;AAChD;AAEA,MAAM,sBAAsB,OAAe,WACzC,KAAK,IAAI,MAAM,QAAQ,SAAS,CAAC;AAEnC,MAAM,0BAA0B,UAC9B,KAAK,IAAI,GAAG,QAAQ,CAAC;AAEvB,MAAM,mBAAmB,OAAe,WACtC,MAAM,WAAW;AAEnB,MAAM,wBAAwB,OAAe,UAC3C,MAAM,MAAM,GAAG,KAAK,IAAI,MAAM,MAAM,QAAQ,CAAC;AAE/C,MAAM,yBACJ,OACA,OACA,WACA,QACA,SACW;CACX,MAAM,aAAa,cAAc,WAAW,QAAQ,IAAI;CAExD,IAAI,CAAC,YACH,OAAO,qBAAqB,OAAO,KAAK;CAG1C,OAAO,cACL,MAAM,MAAM,GAAG,KAAK,IAAI,WAAW,KAAK,MAAM,MAAM,QAAQ,CAAC,GAC7D,QACA,IACF;AACF;AAEA,MAAM,yBACJ,OACA,OACA,eACA,QACA,SACW;CACX,MAAM,aAAa,cAAc,eAAe,QAAQ,IAAI;CAE5D,IAAI,CAAC,YACH,OAAO;CAIT,IAAI,WAAW,UAAU,QACvB,OAAO,WAAW,MAAM,GAAG,MAAM;CAInC,IAAI,WAAW,WAAW,GACxB,OAAO,sBAAsB,OAAO,OAAO,YAAY,QAAQ,IAAI;CAIrE,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,MAAM,CAAC;CAEjD,OAAO,cACL,MAAM,MAAM,GAAG,KAAK,IAAI,aAAa,MAAM,MAAM,QAAQ,WAAW,MAAM,GAC1E,QACA,IACF;AACF"}

package/dist/components/forms/token-input/token-input.utils.js

@@ -0,0 +1,24 @@
+// src/components/forms/token-input/token-input.utils.ts
+const sanitizeToken = (value, length, mode = "numeric") => {
+	return (mode === "numeric" ? value.replace(/[^0-9]/g, "") : value.replace(/[^a-zA-Z0-9]/g, "")).slice(0, Math.max(0, length));
+};
+const getNextActiveIndex = (value, length) => Math.min(value.length, length - 1);
+const getPreviousActiveIndex = (index) => Math.max(0, index - 1);
+const isTokenComplete = (value, length) => value.length === length;
+const removeTokenCharacter = (value, index) => value.slice(0, index) + value.slice(index + 1);
+const replaceTokenCharacter = (value, index, character, length, mode) => {
+	const normalized = sanitizeToken(character, length, mode);
+	if (!normalized) return removeTokenCharacter(value, index);
+	return sanitizeToken(value.slice(0, index) + normalized[0] + value.slice(index + 1), length, mode);
+};
+const insertTokenCharacters = (value, index, insertedValue, length, mode) => {
+	const normalized = sanitizeToken(insertedValue, length, mode);
+	if (!normalized) return value;
+	if (normalized.length >= length) return normalized.slice(0, length);
+	if (normalized.length === 1) return replaceTokenCharacter(value, index, normalized, length, mode);
+	const start = Math.max(0, Math.min(index, length));
+	return sanitizeToken(value.slice(0, start) + normalized + value.slice(start + normalized.length), length, mode);
+};
+export { getNextActiveIndex, getPreviousActiveIndex, insertTokenCharacters, isTokenComplete, removeTokenCharacter, replaceTokenCharacter, sanitizeToken };
+
+//# sourceMappingURL=token-input.utils.js.map

package/dist/components/forms/token-input/token-input.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-input.utils.js","names":[],"sources":["../../../../src/components/forms/token-input/token-input.utils.ts"],"sourcesContent":["import type { TokenInputMode } from \"./token-input.types\";\n\nconst sanitizeToken = (\n  value: string,\n  length: number,\n  mode: TokenInputMode = \"numeric\",\n): string => {\n  const normalized =\n    mode === \"numeric\"\n      ? value.replace(/[^0-9]/g, \"\")\n      : value.replace(/[^a-zA-Z0-9]/g, \"\");\n\n  return normalized.slice(0, Math.max(0, length));\n};\n\nconst getNextActiveIndex = (value: string, length: number): number =>\n  Math.min(value.length, length - 1);\n\nconst getPreviousActiveIndex = (index: number): number =>\n  Math.max(0, index - 1);\n\nconst isTokenComplete = (value: string, length: number): boolean =>\n  value.length === length;\n\nconst removeTokenCharacter = (value: string, index: number): string =>\n  value.slice(0, index) + value.slice(index + 1);\n\nconst replaceTokenCharacter = (\n  value: string,\n  index: number,\n  character: string,\n  length: number,\n  mode: TokenInputMode,\n): string => {\n  const normalized = sanitizeToken(character, length, mode);\n\n  if (!normalized) {\n    return removeTokenCharacter(value, index);\n  }\n\n  return sanitizeToken(\n    value.slice(0, index) + normalized[0] + value.slice(index + 1),\n    length,\n    mode,\n  );\n};\n\nconst insertTokenCharacters = (\n  value: string,\n  index: number,\n  insertedValue: string,\n  length: number,\n  mode: TokenInputMode,\n): string => {\n  const normalized = sanitizeToken(insertedValue, length, mode);\n\n  if (!normalized) {\n    return value;\n  }\n\n  // A complete token always replaces the existing token.\n  if (normalized.length >= length) {\n    return normalized.slice(0, length);\n  }\n\n  // A single character replaces the current position.\n  if (normalized.length === 1) {\n    return replaceTokenCharacter(value, index, normalized, length, mode);\n  }\n\n  // Multiple characters are inserted at the current position.\n  const start = Math.max(0, Math.min(index, length));\n\n  return sanitizeToken(\n    value.slice(0, start) + normalized + value.slice(start + normalized.length),\n    length,\n    mode,\n  );\n};\n\nexport {\n  sanitizeToken,\n  getNextActiveIndex,\n  getPreviousActiveIndex,\n  isTokenComplete,\n  removeTokenCharacter,\n  replaceTokenCharacter,\n  insertTokenCharacters,\n};\n"],"mappings":";AAEA,MAAM,iBACJ,OACA,QACA,OAAuB,cACZ;CAMX,QAJE,SAAS,YACL,MAAM,QAAQ,WAAW,EAAE,IAC3B,MAAM,QAAQ,iBAAiB,EAAE,EAAA,CAErB,MAAM,GAAG,KAAK,IAAI,GAAG,MAAM,CAAC;AAChD;AAEA,MAAM,sBAAsB,OAAe,WACzC,KAAK,IAAI,MAAM,QAAQ,SAAS,CAAC;AAEnC,MAAM,0BAA0B,UAC9B,KAAK,IAAI,GAAG,QAAQ,CAAC;AAEvB,MAAM,mBAAmB,OAAe,WACtC,MAAM,WAAW;AAEnB,MAAM,wBAAwB,OAAe,UAC3C,MAAM,MAAM,GAAG,KAAK,IAAI,MAAM,MAAM,QAAQ,CAAC;AAE/C,MAAM,yBACJ,OACA,OACA,WACA,QACA,SACW;CACX,MAAM,aAAa,cAAc,WAAW,QAAQ,IAAI;CAExD,IAAI,CAAC,YACH,OAAO,qBAAqB,OAAO,KAAK;CAG1C,OAAO,cACL,MAAM,MAAM,GAAG,KAAK,IAAI,WAAW,KAAK,MAAM,MAAM,QAAQ,CAAC,GAC7D,QACA,IACF;AACF;AAEA,MAAM,yBACJ,OACA,OACA,eACA,QACA,SACW;CACX,MAAM,aAAa,cAAc,eAAe,QAAQ,IAAI;CAE5D,IAAI,CAAC,YACH,OAAO;CAIT,IAAI,WAAW,UAAU,QACvB,OAAO,WAAW,MAAM,GAAG,MAAM;CAInC,IAAI,WAAW,WAAW,GACxB,OAAO,sBAAsB,OAAO,OAAO,YAAY,QAAQ,IAAI;CAIrE,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,MAAM,CAAC;CAEjD,OAAO,cACL,MAAM,MAAM,GAAG,KAAK,IAAI,aAAa,MAAM,MAAM,QAAQ,WAAW,MAAM,GAC1E,QACA,IACF;AACF"}

package/dist/components/layout/aspect-ratio/aspect-ratio.css

@@ -0,0 +1,14 @@
+.puzzle-aspect-ratio {
+  box-sizing: border-box;
+  aspect-ratio: 1;
+  width: 100%;
+  display: block;
+  position: relative;
+}
+
+.puzzle-aspect-ratio > * {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+}

package/dist/components/layout/aspect-ratio/aspect-ratio.utils.cjs

@@ -0,0 +1,11 @@
+// src/components/layout/aspect-ratio/aspect-ratio.utils.ts
+const getAspectRatioStyle = (ratio, style) => {
+	if (!Number.isFinite(ratio) || ratio <= 0) throw new RangeError("AspectRatio: ratio must be a positive finite number.");
+	return {
+		...style,
+		aspectRatio: ratio
+	};
+};
+exports.getAspectRatioStyle = getAspectRatioStyle;
+
+//# sourceMappingURL=aspect-ratio.utils.cjs.map

package/dist/components/layout/aspect-ratio/aspect-ratio.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.utils.cjs","names":[],"sources":["../../../../src/components/layout/aspect-ratio/aspect-ratio.utils.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nconst getAspectRatioStyle = (\n  ratio: number,\n  style?: CSSProperties,\n): CSSProperties => {\n  if (!Number.isFinite(ratio) || ratio <= 0) {\n    throw new RangeError(\n      \"AspectRatio: ratio must be a positive finite number.\",\n    );\n  }\n\n  return {\n    ...style,\n    aspectRatio: ratio,\n  };\n};\n\nexport { getAspectRatioStyle };\n"],"mappings":";AAEA,MAAM,uBACJ,OACA,UACkB;CAClB,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,SAAS,GACtC,MAAM,IAAI,WACR,sDACF;CAGF,OAAO;EACL,GAAG;EACH,aAAa;CACf;AACF"}

package/dist/components/layout/aspect-ratio/aspect-ratio.utils.js

@@ -0,0 +1,11 @@
+// src/components/layout/aspect-ratio/aspect-ratio.utils.ts
+const getAspectRatioStyle = (ratio, style) => {
+	if (!Number.isFinite(ratio) || ratio <= 0) throw new RangeError("AspectRatio: ratio must be a positive finite number.");
+	return {
+		...style,
+		aspectRatio: ratio
+	};
+};
+export { getAspectRatioStyle };
+
+//# sourceMappingURL=aspect-ratio.utils.js.map

package/dist/components/layout/aspect-ratio/aspect-ratio.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.utils.js","names":[],"sources":["../../../../src/components/layout/aspect-ratio/aspect-ratio.utils.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nconst getAspectRatioStyle = (\n  ratio: number,\n  style?: CSSProperties,\n): CSSProperties => {\n  if (!Number.isFinite(ratio) || ratio <= 0) {\n    throw new RangeError(\n      \"AspectRatio: ratio must be a positive finite number.\",\n    );\n  }\n\n  return {\n    ...style,\n    aspectRatio: ratio,\n  };\n};\n\nexport { getAspectRatioStyle };\n"],"mappings":";AAEA,MAAM,uBACJ,OACA,UACkB;CAClB,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,SAAS,GACtC,MAAM,IAAI,WACR,sDACF;CAGF,OAAO;EACL,GAAG;EACH,aAAa;CACf;AACF"}

package/dist/components/layout/aspect-ratio/index.cjs

@@ -0,0 +1,16 @@
+const require_aspect_ratio_utils = require("./aspect-ratio.utils.cjs");
+;/* empty css                   */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/aspect-ratio/index.tsx
+const AspectRatio = ({ as, ratio = 1, className, style, children, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as ?? "div", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-aspect-ratio", className),
+		style: require_aspect_ratio_utils.getAspectRatioStyle(ratio, style),
+		...rest,
+		children
+	});
+};
+exports.AspectRatio = AspectRatio;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/layout/aspect-ratio/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","getAspectRatioStyle"],"sources":["../../../../src/components/layout/aspect-ratio/index.tsx"],"sourcesContent":["import type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { getAspectRatioStyle } from \"./aspect-ratio.utils\";\nimport \"./aspect-ratio.css\";\n\ntype AspectRatioOwnProps<C extends ElementType> = {\n  as?: C;\n  ratio?: number;\n  className?: string;\n  style?: CSSProperties;\n  children?: ReactNode;\n};\n\ntype AspectRatioProps<C extends ElementType = \"div\"> = AspectRatioOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof AspectRatioOwnProps<C> | \"as\">;\n\nconst AspectRatio = <C extends ElementType = \"div\">({\n  as,\n  ratio = 1,\n  className,\n  style,\n  children,\n  ...rest\n}: AspectRatioProps<C>) => {\n  const Component = (as ?? \"div\") as ElementType;\n\n  return (\n    <Component\n      className={cn(\"puzzle-aspect-ratio\", className)}\n      style={getAspectRatioStyle(ratio, style)}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport { AspectRatio, type AspectRatioProps };\n"],"mappings":";;;;;AAqBA,MAAM,eAA8C,EAClD,IACA,QAAQ,GACR,WACA,OACA,UACA,GAAG,WACsB;CAGzB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAHiB,MAAM,OAGvB;EACE,YAAA,GAAWA,gBAAAA,GAAAA,CAAG,uBAAuB,SAAS;EAC9C,OAAOC,2BAAAA,oBAAoB,OAAO,KAAK;EACvC,GAAI;EAEH;CACQ,CAAA;AAEf"}

package/dist/components/layout/aspect-ratio/index.d.cts

@@ -0,0 +1,11 @@
+import { CSSProperties, ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type AspectRatioOwnProps<C extends ElementType> = {
+  as?: C;
+  ratio?: number;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+};
+type AspectRatioProps<C extends ElementType = "div"> = AspectRatioOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof AspectRatioOwnProps<C> | "as">;
+declare const AspectRatio: <C extends ElementType = "div">({ as, ratio, className, style, children, ...rest }: AspectRatioProps<C>) => import("react").JSX.Element;
+export { AspectRatio, type AspectRatioProps };

package/dist/components/layout/aspect-ratio/index.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type AspectRatioOwnProps<C extends ElementType> = {
+  as?: C;
+  ratio?: number;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+};
+type AspectRatioProps<C extends ElementType = "div"> = AspectRatioOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof AspectRatioOwnProps<C> | "as">;
+declare const AspectRatio: <C extends ElementType = "div">({ as, ratio, className, style, children, ...rest }: AspectRatioProps<C>) => import("react").JSX.Element;
+export { AspectRatio, type AspectRatioProps };

package/dist/components/layout/aspect-ratio/index.js

@@ -0,0 +1,16 @@
+import { getAspectRatioStyle } from "./aspect-ratio.utils.js";
+import "./aspect-ratio.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/aspect-ratio/index.tsx
+const AspectRatio = ({ as, ratio = 1, className, style, children, ...rest }) => {
+	return /* @__PURE__ */ jsx(as ?? "div", {
+		className: cn("puzzle-aspect-ratio", className),
+		style: getAspectRatioStyle(ratio, style),
+		...rest,
+		children
+	});
+};
+export { AspectRatio };
+
+//# sourceMappingURL=index.js.map