@puzzle-ui/ui 0.3.0 → 0.5.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"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,oBAHiB,MAAM,OAGvB;EACE,WAAW,GAAG,uBAAuB,SAAS;EAC9C,OAAO,oBAAoB,OAAO,KAAK;EACvC,GAAI;EAEH;CACQ,CAAA;AAEf"}

package/dist/components/layout/container/container.css

@@ -2,6 +2,7 @@
   --_container-gutter: var(--puzzle-container-gutter, clamp(1rem, 3vw, 3rem));
   box-sizing: border-box;
   width: 100%;
+  max-width: var(--puzzle-container-width, 80rem);
   padding-inline: var(--_container-gutter);
   min-width: 0;
   margin-inline: auto;

package/dist/components/layout/page-layout/page-layout.css

@@ -32,6 +32,7 @@
   order: 0;
   flex: var(--puzzle-page-main-flex);
   box-sizing: border-box;
+  background-color: var(--puzzle-color-background);
   min-width: 0;
 }
 

package/dist/components/layout/resizable-panels/index.cjs

@@ -115,7 +115,7 @@ const ResizablePanelsRoot = ({ children, orientation = "horizontal", sizes, defa
 	const pointerDragRef = (0, react.useRef)(null);
 	const updateSizes = (nextSizes) => {
 		const normalized = require_resizable_panels_utils.normalizePanelSizes(nextSizes, panelConstraints);
-		if (!normalized.some((size, index) => Math.abs(size - currentSizes[index]) > 1e-6)) return;
+		if (!normalized.some((size, index) => Math.abs(size - (currentSizes[index] ?? 0)) > 1e-6)) return;
 		if (sizes === void 0) setUncontrolledSizes(normalized);
 		onSizesChange?.(normalized);
 	};

package/dist/components/layout/resizable-panels/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["isValidElement","cn","useId","Children","useState","normalizePanelSizes","useRef","resizePanelPair","getPanelPairBounds","cloneElement"],"sources":["../../../../src/components/layout/resizable-panels/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  getPanelPairBounds,\n  normalizePanelSizes,\n  resizePanelPair,\n  type PanelSizeConstraint,\n} from \"./resizable-panels.utils\";\n\nimport \"./resizable-panels.css\";\n\ntype ResizablePanelsOrientation = \"horizontal\" | \"vertical\";\n\ntype ResizablePanelsProps = Omit<ComponentPropsWithRef<\"div\">, \"children\"> & {\n  /** Layout direction. Defaults to horizontal. */\n  orientation?: ResizablePanelsOrientation;\n\n  /** Controlled panel sizes, expressed as percentages. */\n  sizes?: readonly number[];\n\n  /** Initial panel sizes for uncontrolled usage. */\n  defaultSizes?: readonly number[];\n\n  /** Called whenever the panel layout changes. */\n  onSizesChange?: (sizes: number[]) => void;\n\n  /** Disables all resizing interactions. */\n  disabled?: boolean;\n\n  /** Percentage change per keyboard interaction. Defaults to 1. */\n  keyboardStep?: number;\n\n  /** Panels and handles that make up the group. */\n  children: ReactNode;\n};\n\ntype ResizablePanelProps = ComponentPropsWithRef<\"div\"> & {\n  /** Minimum panel size in percentages. Defaults to 0. */\n  minSize?: number;\n\n  /** Maximum panel size in percentages. Defaults to 100. */\n  maxSize?: number;\n};\n\ntype ResizableHandleProps = ComponentPropsWithRef<\"div\"> & {\n  /** Renders a visible grip inside the resize handle. */\n  withGrip?: boolean;\n\n  /** Disables resizing through this handle. */\n  disabled?: boolean;\n};\n\ntype ResizePointerHandler = (\n  event: ReactPointerEvent<HTMLDivElement>,\n  handleIndex: number,\n) => void;\n\ntype ResizeKeyboardHandler = (\n  event: ReactKeyboardEvent<HTMLDivElement>,\n  handleIndex: number,\n) => void;\n\ntype InternalResizablePanelProps = {\n  panelIndex?: number;\n  panelSize?: number;\n  panelId?: string;\n};\n\ntype InternalResizableHandleProps = {\n  handleIndex?: number;\n  orientation?: ResizablePanelsOrientation;\n  value?: number;\n  minValue?: number;\n  maxValue?: number;\n  panelIds?: [string, string];\n  inheritedDisabled?: boolean;\n\n  onResizeStart?: ResizePointerHandler;\n  onResizeMove?: ResizePointerHandler;\n  onResizeEnd?: ResizePointerHandler;\n  onResizeKeyDown?: ResizeKeyboardHandler;\n};\n\ntype PointerDragState = {\n  handleIndex: number;\n  pointerId: number;\n  startCoordinate: number;\n  availableSize: number;\n  direction: number;\n  sizes: number[];\n};\n\nconst isResizablePanelElement = (\n  child: ReactNode,\n): child is ReactElement<ResizablePanelProps> =>\n  isValidElement(child) && child.type === ResizablePanel;\n\nconst isResizableHandleElement = (\n  child: ReactNode,\n): child is ReactElement<ResizableHandleProps> =>\n  isValidElement(child) && child.type === ResizableHandle;\n\nconst parsePixels = (value: string | undefined) =>\n  Number.parseFloat(value ?? \"\") || 0;\n\nconst getAvailableSize = (\n  group: HTMLDivElement,\n  orientation: ResizablePanelsOrientation,\n) => {\n  const computedStyle =\n    group.ownerDocument.defaultView?.getComputedStyle(group);\n\n  const isHorizontal = orientation === \"horizontal\";\n\n  const totalSize = isHorizontal ? group.clientWidth : group.clientHeight;\n\n  const paddingSize = computedStyle\n    ? isHorizontal\n      ? parsePixels(computedStyle.paddingLeft) +\n        parsePixels(computedStyle.paddingRight)\n      : parsePixels(computedStyle.paddingTop) +\n        parsePixels(computedStyle.paddingBottom)\n    : 0;\n\n  const handleSize = Array.from(group.children).reduce((total, child) => {\n    const element = child as HTMLElement;\n\n    if (!element.hasAttribute(\"data-puzzle-resizable-handle\")) {\n      return total;\n    }\n\n    const rect = element.getBoundingClientRect();\n\n    return total + (isHorizontal ? rect.width : rect.height);\n  }, 0);\n\n  return Math.max(0, totalSize - paddingSize - handleSize);\n};\n\nconst getResizeDirection = (\n  element: HTMLElement,\n  orientation: ResizablePanelsOrientation,\n) => {\n  if (orientation !== \"horizontal\") {\n    return 1;\n  }\n\n  const direction =\n    element.ownerDocument.defaultView?.getComputedStyle(element).direction;\n\n  return direction === \"rtl\" ? -1 : 1;\n};\n\nconst getPointerCoordinate = (\n  event: ReactPointerEvent<HTMLDivElement>,\n  orientation: ResizablePanelsOrientation,\n) => (orientation === \"horizontal\" ? event.clientX : event.clientY);\n\nconst ResizablePanel = ({\n  id,\n  minSize = 0,\n  maxSize = 100,\n  panelIndex = 0,\n  panelSize = 1,\n  panelId,\n  className,\n  style,\n  ...props\n}: ResizablePanelProps & InternalResizablePanelProps) => (\n  <div\n    {...props}\n    id={panelId ?? id}\n    className={cn(\"puzzle-resizable-panels__panel\", className)}\n    style={{\n      ...style,\n      flex: `${panelSize} 1 0%`,\n    }}\n    data-panel-index={panelIndex}\n    data-panel-size={panelSize}\n    data-panel-min-size={minSize}\n    data-panel-max-size={maxSize}\n  />\n);\n\nconst ResizableHandle = ({\n  withGrip = false,\n  disabled = false,\n  handleIndex = -1,\n  orientation = \"horizontal\",\n  value,\n  minValue,\n  maxValue,\n  panelIds,\n  inheritedDisabled = false,\n  onResizeStart,\n  onResizeMove,\n  onResizeEnd,\n  onResizeKeyDown,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  onPointerCancel,\n  onLostPointerCapture,\n  onKeyDown,\n  className,\n  children,\n  tabIndex,\n  \"aria-label\": ariaLabel,\n  ...props\n}: ResizableHandleProps & InternalResizableHandleProps) => {\n  const isDisabled = disabled || inheritedDisabled;\n\n  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onPointerDown?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeStart?.(event, handleIndex);\n    }\n  };\n\n  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onPointerMove?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeMove?.(event, handleIndex);\n    }\n  };\n\n  const handlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onResizeEnd?.(event, handleIndex);\n    onPointerUp?.(event);\n  };\n\n  const handlePointerCancel = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onResizeEnd?.(event, handleIndex);\n    onPointerCancel?.(event);\n  };\n\n  const handleLostPointerCapture = (\n    event: ReactPointerEvent<HTMLDivElement>,\n  ) => {\n    onResizeEnd?.(event, handleIndex);\n    onLostPointerCapture?.(event);\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeKeyDown?.(event, handleIndex);\n    }\n  };\n\n  return (\n    <div\n      {...props}\n      className={cn(\"puzzle-resizable-panels__handle\", className)}\n      role=\"separator\"\n      tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}\n      aria-label={ariaLabel ?? \"Resize panels\"}\n      aria-orientation={\n        orientation === \"horizontal\" ? \"vertical\" : \"horizontal\"\n      }\n      aria-controls={panelIds?.join(\" \")}\n      aria-valuenow={value}\n      aria-valuemin={minValue}\n      aria-valuemax={maxValue}\n      aria-valuetext={\n        value === undefined ? undefined : `${Math.round(value * 100) / 100}%`\n      }\n      aria-disabled={isDisabled || undefined}\n      data-puzzle-resizable-handle=\"\"\n      data-orientation={orientation}\n      data-disabled={isDisabled ? \"true\" : undefined}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerCancel}\n      onLostPointerCapture={handleLostPointerCapture}\n      onKeyDown={handleKeyDown}\n    >\n      {withGrip ? (\n        <span\n          className=\"puzzle-resizable-panels__handle-grip\"\n          aria-hidden=\"true\"\n        />\n      ) : (\n        children\n      )}\n    </div>\n  );\n};\n\nconst ResizablePanelsRoot = ({\n  children,\n  orientation = \"horizontal\",\n  sizes,\n  defaultSizes,\n  onSizesChange,\n  disabled = false,\n  keyboardStep = 1,\n  id,\n  role,\n  className,\n  style,\n  ref: forwardedRef,\n  ...rootProps\n}: ResizablePanelsProps) => {\n  const generatedId = useId();\n\n  const groupId = id ?? `puzzle-resizable-panels-${generatedId}`;\n\n  if (!Number.isFinite(keyboardStep) || keyboardStep <= 0) {\n    throw new RangeError(\"keyboardStep must be a positive finite number.\");\n  }\n\n  const childrenArray = Children.toArray(children);\n\n  const validChildren =\n    childrenArray.length >= 3 &&\n    childrenArray.length % 2 === 1 &&\n    childrenArray.every((child, index) =>\n      index % 2 === 0\n        ? isResizablePanelElement(child)\n        : isResizableHandleElement(child),\n    );\n\n  if (!validChildren) {\n    throw new Error(\n      \"ResizablePanels requires alternating Panel and Handle children, starting and ending with a Panel. At least two panels are required.\",\n    );\n  }\n\n  const panelElements = childrenArray.filter(isResizablePanelElement);\n\n  const panelCount = panelElements.length;\n\n  const panelConstraints: PanelSizeConstraint[] = panelElements.map(\n    (panel) => ({\n      minSize: panel.props.minSize,\n      maxSize: panel.props.maxSize,\n    }),\n  );\n\n  const panelIds = panelElements.map(\n    (panel, index) => panel.props.id ?? `${groupId}-panel-${index}`,\n  );\n\n  if (new Set(panelIds).size !== panelIds.length) {\n    throw new Error(\"ResizablePanels requires unique panel IDs.\");\n  }\n\n  const [uncontrolledSizes, setUncontrolledSizes] = useState<number[]>(() =>\n    normalizePanelSizes(\n      sizes === undefined ? defaultSizes : undefined,\n      panelConstraints,\n    ),\n  );\n\n  const layoutInput =\n    sizes ??\n    (uncontrolledSizes.length === panelCount ? uncontrolledSizes : undefined);\n\n  const currentSizes = normalizePanelSizes(layoutInput, panelConstraints);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const groupRef = useRef<HTMLDivElement | null>(null);\n\n  const pointerDragRef = useRef<PointerDragState | null>(null);\n\n  const updateSizes = (nextSizes: readonly number[]) => {\n    const normalized = normalizePanelSizes(nextSizes, panelConstraints);\n\n    const hasChanged = normalized.some(\n      (size, index) => Math.abs(size - currentSizes[index]) > 0.000001,\n    );\n\n    if (!hasChanged) {\n      return;\n    }\n\n    if (sizes === undefined) {\n      setUncontrolledSizes(normalized);\n    }\n\n    onSizesChange?.(normalized);\n  };\n\n  const handlePointerDown: ResizePointerHandler = (event, handleIndex) => {\n    const group = groupRef.current;\n\n    if (!group || disabled) {\n      return;\n    }\n\n    if (\n      event.button !== 0 &&\n      event.pointerType !== \"touch\" &&\n      event.pointerType !== \"pen\"\n    ) {\n      return;\n    }\n\n    const availableSize = getAvailableSize(group, orientation);\n\n    if (availableSize <= 0) {\n      return;\n    }\n\n    pointerDragRef.current = {\n      handleIndex,\n      pointerId: event.pointerId,\n      startCoordinate: getPointerCoordinate(event, orientation),\n      availableSize,\n      direction: getResizeDirection(group, orientation),\n      sizes: [...currentSizes],\n    };\n\n    try {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    } catch {\n      // Synthetic pointer events and detached elements may not\n      // support pointer capture.\n    }\n\n    event.preventDefault();\n    setIsResizing(true);\n  };\n\n  const handlePointerMove: ResizePointerHandler = (event, handleIndex) => {\n    const drag = pointerDragRef.current;\n\n    if (\n      !drag ||\n      drag.pointerId !== event.pointerId ||\n      drag.handleIndex !== handleIndex\n    ) {\n      return;\n    }\n\n    const currentCoordinate = getPointerCoordinate(event, orientation);\n\n    const delta =\n      ((currentCoordinate - drag.startCoordinate) / drag.availableSize) *\n      100 *\n      drag.direction;\n\n    const nextSizes = resizePanelPair(\n      drag.sizes,\n      panelConstraints,\n      handleIndex,\n      delta,\n    );\n\n    event.preventDefault();\n    updateSizes(nextSizes);\n  };\n\n  const handlePointerEnd: ResizePointerHandler = (event, handleIndex) => {\n    const drag = pointerDragRef.current;\n\n    if (\n      !drag ||\n      drag.pointerId !== event.pointerId ||\n      drag.handleIndex !== handleIndex\n    ) {\n      return;\n    }\n\n    pointerDragRef.current = null;\n    setIsResizing(false);\n  };\n\n  const handleKeyDown: ResizeKeyboardHandler = (event, handleIndex) => {\n    if (disabled) {\n      return;\n    }\n\n    const currentSize = currentSizes[handleIndex];\n\n    const bounds = getPanelPairBounds(\n      currentSizes,\n      panelConstraints,\n      handleIndex,\n    );\n\n    const group = groupRef.current;\n\n    const direction = group ? getResizeDirection(group, orientation) : 1;\n\n    const step = keyboardStep * (event.shiftKey ? 10 : 1);\n\n    let nextSize: number | undefined;\n\n    if (event.key === \"Home\") {\n      nextSize = bounds.minSize;\n    } else if (event.key === \"End\") {\n      nextSize = bounds.maxSize;\n    } else if (orientation === \"horizontal\") {\n      if (event.key === \"ArrowRight\") {\n        nextSize = currentSize + step * direction;\n      } else if (event.key === \"ArrowLeft\") {\n        nextSize = currentSize - step * direction;\n      }\n    } else {\n      if (event.key === \"ArrowDown\") {\n        nextSize = currentSize + step;\n      } else if (event.key === \"ArrowUp\") {\n        nextSize = currentSize - step;\n      }\n    }\n\n    if (nextSize === undefined) {\n      return;\n    }\n\n    event.preventDefault();\n\n    updateSizes(\n      resizePanelPair(\n        currentSizes,\n        panelConstraints,\n        handleIndex,\n        nextSize - currentSize,\n      ),\n    );\n  };\n\n  let panelIndex = 0;\n\n  const enhancedChildren = childrenArray.map((child) => {\n    if (isResizablePanelElement(child)) {\n      const index = panelIndex++;\n\n      return cloneElement(\n        child as ReactElement<\n          ResizablePanelProps & InternalResizablePanelProps\n        >,\n        {\n          panelIndex: index,\n          panelSize: currentSizes[index],\n          panelId: panelIds[index],\n        },\n      );\n    }\n\n    const handleIndex = panelIndex - 1;\n\n    const bounds = getPanelPairBounds(\n      currentSizes,\n      panelConstraints,\n      handleIndex,\n    );\n\n    return cloneElement(\n      child as ReactElement<\n        ResizableHandleProps & InternalResizableHandleProps\n      >,\n      {\n        handleIndex,\n        orientation,\n        value: currentSizes[handleIndex],\n        minValue: bounds.minSize,\n        maxValue: bounds.maxSize,\n        panelIds: [panelIds[handleIndex], panelIds[handleIndex + 1]],\n        inheritedDisabled: disabled,\n        onResizeStart: handlePointerDown,\n        onResizeMove: handlePointerMove,\n        onResizeEnd: handlePointerEnd,\n        onResizeKeyDown: handleKeyDown,\n      },\n    );\n  });\n\n  return (\n    <div\n      {...rootProps}\n      ref={(node) => {\n        groupRef.current = node;\n\n        if (typeof forwardedRef === \"function\") {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      }}\n      id={groupId}\n      role={role ?? \"group\"}\n      className={cn(\"puzzle-resizable-panels\", className)}\n      style={style}\n      data-orientation={orientation}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-resizing={isResizing ? \"true\" : undefined}\n    >\n      {enhancedChildren}\n    </div>\n  );\n};\n\ntype ResizablePanelsComponent = typeof ResizablePanelsRoot & {\n  Panel: typeof ResizablePanel;\n  Handle: typeof ResizableHandle;\n};\n\nconst ResizablePanels = Object.assign(ResizablePanelsRoot, {\n  Panel: ResizablePanel,\n  Handle: ResizableHandle,\n}) as ResizablePanelsComponent;\n\nexport {\n  ResizablePanels,\n  ResizablePanel,\n  ResizableHandle,\n  type ResizablePanelsProps,\n  type ResizablePanelProps,\n  type ResizableHandleProps,\n  type ResizablePanelsOrientation,\n};\n"],"mappings":";;;;;;;AA4GA,MAAM,2BACJ,WAAA,GAEAA,MAAAA,eAAAA,CAAe,KAAK,KAAK,MAAM,SAAS;AAE1C,MAAM,4BACJ,WAAA,GAEAA,MAAAA,eAAAA,CAAe,KAAK,KAAK,MAAM,SAAS;AAE1C,MAAM,eAAe,UACnB,OAAO,WAAW,SAAS,EAAE,KAAK;AAEpC,MAAM,oBACJ,OACA,gBACG;CACH,MAAM,gBACJ,MAAM,cAAc,aAAa,iBAAiB,KAAK;CAEzD,MAAM,eAAe,gBAAgB;CAErC,MAAM,YAAY,eAAe,MAAM,cAAc,MAAM;CAE3D,MAAM,cAAc,gBAChB,eACE,YAAY,cAAc,WAAW,IACrC,YAAY,cAAc,YAAY,IACtC,YAAY,cAAc,UAAU,IACpC,YAAY,cAAc,aAAa,IACzC;CAEJ,MAAM,aAAa,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,QAAQ,OAAO,UAAU;EACrE,MAAM,UAAU;EAEhB,IAAI,CAAC,QAAQ,aAAa,8BAA8B,GACtD,OAAO;EAGT,MAAM,OAAO,QAAQ,sBAAsB;EAE3C,OAAO,SAAS,eAAe,KAAK,QAAQ,KAAK;CACnD,GAAG,CAAC;CAEJ,OAAO,KAAK,IAAI,GAAG,YAAY,cAAc,UAAU;AACzD;AAEA,MAAM,sBACJ,SACA,gBACG;CACH,IAAI,gBAAgB,cAClB,OAAO;CAMT,OAFE,QAAQ,cAAc,aAAa,iBAAiB,OAAO,CAAC,CAAC,cAE1C,QAAQ,KAAK;AACpC;AAEA,MAAM,wBACJ,OACA,gBACI,gBAAgB,eAAe,MAAM,UAAU,MAAM;AAE3D,MAAM,kBAAkB,EACtB,IACA,UAAU,GACV,UAAU,KACV,aAAa,GACb,YAAY,GACZ,SACA,WACA,OACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CACE,GAAI;CACJ,IAAI,WAAW;CACf,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,kCAAkC,SAAS;CACzD,OAAO;EACL,GAAG;EACH,MAAM,GAAG,UAAU;CACrB;CACA,oBAAkB;CAClB,mBAAiB;CACjB,uBAAqB;CACrB,uBAAqB;AACtB,CAAA;AAGH,MAAM,mBAAmB,EACvB,WAAW,OACX,WAAW,OACX,cAAc,IACd,cAAc,cACd,OACA,UACA,UACA,UACA,oBAAoB,OACpB,eACA,cACA,aACA,iBACA,eACA,eACA,aACA,iBACA,sBACA,WACA,WACA,UACA,UACA,cAAc,WACd,GAAG,YACsD;CACzD,MAAM,aAAa,YAAY;CAE/B,MAAM,qBAAqB,UAA6C;EACtE,gBAAgB,KAAK;EAErB,IAAI,CAAC,MAAM,oBAAoB,CAAC,YAC9B,gBAAgB,OAAO,WAAW;CAEtC;CAEA,MAAM,qBAAqB,UAA6C;EACtE,gBAAgB,KAAK;EAErB,IAAI,CAAC,MAAM,oBAAoB,CAAC,YAC9B,eAAe,OAAO,WAAW;CAErC;CAEA,MAAM,mBAAmB,UAA6C;EACpE,cAAc,OAAO,WAAW;EAChC,cAAc,KAAK;CACrB;CAEA,MAAM,uBAAuB,UAA6C;EACxE,cAAc,OAAO,WAAW;EAChC,kBAAkB,KAAK;CACzB;CAEA,MAAM,4BACJ,UACG;EACH,cAAc,OAAO,WAAW;EAChC,uBAAuB,KAAK;CAC9B;CAEA,MAAM,iBAAiB,UAA8C;EACnE,YAAY,KAAK;EAEjB,IAAI,CAAC,MAAM,oBAAoB,CAAC,YAC9B,kBAAkB,OAAO,WAAW;CAExC;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACJ,YAAA,GAAWA,gBAAAA,GAAAA,CAAG,mCAAmC,SAAS;EAC1D,MAAK;EACL,UAAU,aAAa,KAAM,YAAY;EACzC,cAAY,aAAa;EACzB,oBACE,gBAAgB,eAAe,aAAa;EAE9C,iBAAe,UAAU,KAAK,GAAG;EACjC,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBACE,UAAU,KAAA,IAAY,KAAA,IAAY,GAAG,KAAK,MAAM,QAAQ,GAAG,IAAI,IAAI;EAErE,iBAAe,cAAc,KAAA;EAC7B,gCAA6B;EAC7B,oBAAkB;EAClB,iBAAe,aAAa,SAAS,KAAA;EACrC,eAAe;EACf,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,sBAAsB;EACtB,WAAW;EAEV,UAAA,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,WAAU;GACV,eAAY;EACb,CAAA,IAED;CAEC,CAAA;AAET;AAEA,MAAM,uBAAuB,EAC3B,UACA,cAAc,cACd,OACA,cACA,eACA,WAAW,OACX,eAAe,GACf,IACA,MACA,WACA,OACA,KAAK,cACL,GAAG,gBACuB;CAC1B,MAAM,eAAA,GAAcC,MAAAA,MAAAA,CAAM;CAE1B,MAAM,UAAU,MAAM,2BAA2B;CAEjD,IAAI,CAAC,OAAO,SAAS,YAAY,KAAK,gBAAgB,GACpD,MAAM,IAAI,WAAW,gDAAgD;CAGvE,MAAM,gBAAgBC,MAAAA,SAAS,QAAQ,QAAQ;CAW/C,IAAI,EARF,cAAc,UAAU,KACxB,cAAc,SAAS,MAAM,KAC7B,cAAc,OAAO,OAAO,UAC1B,QAAQ,MAAM,IACV,wBAAwB,KAAK,IAC7B,yBAAyB,KAAK,CACpC,IAGA,MAAM,IAAI,MACR,qIACF;CAGF,MAAM,gBAAgB,cAAc,OAAO,uBAAuB;CAElE,MAAM,aAAa,cAAc;CAEjC,MAAM,mBAA0C,cAAc,KAC3D,WAAW;EACV,SAAS,MAAM,MAAM;EACrB,SAAS,MAAM,MAAM;CACvB,EACF;CAEA,MAAM,WAAW,cAAc,KAC5B,OAAO,UAAU,MAAM,MAAM,MAAM,GAAG,QAAQ,SAAS,OAC1D;CAEA,IAAI,IAAI,IAAI,QAAQ,CAAC,CAAC,SAAS,SAAS,QACtC,MAAM,IAAI,MAAM,4CAA4C;CAG9D,MAAM,CAAC,mBAAmB,yBAAA,GAAwBC,MAAAA,SAAAA,OAChDC,+BAAAA,oBACE,UAAU,KAAA,IAAY,eAAe,KAAA,GACrC,gBACF,CACF;CAEA,MAAM,cACJ,UACC,kBAAkB,WAAW,aAAa,oBAAoB,KAAA;CAEjE,MAAM,eAAeA,+BAAAA,oBAAoB,aAAa,gBAAgB;CAEtE,MAAM,CAAC,YAAY,kBAAA,GAAiBD,MAAAA,SAAAA,CAAS,KAAK;CAElD,MAAM,YAAA,GAAWE,MAAAA,OAAAA,CAA8B,IAAI;CAEnD,MAAM,kBAAA,GAAiBA,MAAAA,OAAAA,CAAgC,IAAI;CAE3D,MAAM,eAAe,cAAiC;EACpD,MAAM,aAAaD,+BAAAA,oBAAoB,WAAW,gBAAgB;EAMlE,IAAI,CAJe,WAAW,MAC3B,MAAM,UAAU,KAAK,IAAI,OAAO,aAAa,MAAM,IAAI,IAG5C,GACZ;EAGF,IAAI,UAAU,KAAA,GACZ,qBAAqB,UAAU;EAGjC,gBAAgB,UAAU;CAC5B;CAEA,MAAM,qBAA2C,OAAO,gBAAgB;EACtE,MAAM,QAAQ,SAAS;EAEvB,IAAI,CAAC,SAAS,UACZ;EAGF,IACE,MAAM,WAAW,KACjB,MAAM,gBAAgB,WACtB,MAAM,gBAAgB,OAEtB;EAGF,MAAM,gBAAgB,iBAAiB,OAAO,WAAW;EAEzD,IAAI,iBAAiB,GACnB;EAGF,eAAe,UAAU;GACvB;GACA,WAAW,MAAM;GACjB,iBAAiB,qBAAqB,OAAO,WAAW;GACxD;GACA,WAAW,mBAAmB,OAAO,WAAW;GAChD,OAAO,CAAC,GAAG,YAAY;EACzB;EAEA,IAAI;GACF,MAAM,cAAc,kBAAkB,MAAM,SAAS;EACvD,QAAQ,CAGR;EAEA,MAAM,eAAe;EACrB,cAAc,IAAI;CACpB;CAEA,MAAM,qBAA2C,OAAO,gBAAgB;EACtE,MAAM,OAAO,eAAe;EAE5B,IACE,CAAC,QACD,KAAK,cAAc,MAAM,aACzB,KAAK,gBAAgB,aAErB;EAKF,MAAM,SAFoB,qBAAqB,OAAO,WAGlC,IAAI,KAAK,mBAAmB,KAAK,gBACnD,MACA,KAAK;EAEP,MAAM,YAAYE,+BAAAA,gBAChB,KAAK,OACL,kBACA,aACA,KACF;EAEA,MAAM,eAAe;EACrB,YAAY,SAAS;CACvB;CAEA,MAAM,oBAA0C,OAAO,gBAAgB;EACrE,MAAM,OAAO,eAAe;EAE5B,IACE,CAAC,QACD,KAAK,cAAc,MAAM,aACzB,KAAK,gBAAgB,aAErB;EAGF,eAAe,UAAU;EACzB,cAAc,KAAK;CACrB;CAEA,MAAM,iBAAwC,OAAO,gBAAgB;EACnE,IAAI,UACF;EAGF,MAAM,cAAc,aAAa;EAEjC,MAAM,SAASC,+BAAAA,mBACb,cACA,kBACA,WACF;EAEA,MAAM,QAAQ,SAAS;EAEvB,MAAM,YAAY,QAAQ,mBAAmB,OAAO,WAAW,IAAI;EAEnE,MAAM,OAAO,gBAAgB,MAAM,WAAW,KAAK;EAEnD,IAAI;EAEJ,IAAI,MAAM,QAAQ,QAChB,WAAW,OAAO;OACb,IAAI,MAAM,QAAQ,OACvB,WAAW,OAAO;OACb,IAAI,gBAAgB,cAAc;GACvC,IAAI,MAAM,QAAQ,cAChB,WAAW,cAAc,OAAO;QAC3B,IAAI,MAAM,QAAQ,aACvB,WAAW,cAAc,OAAO;EAEpC,OACE,IAAI,MAAM,QAAQ,aAChB,WAAW,cAAc;OACpB,IAAI,MAAM,QAAQ,WACvB,WAAW,cAAc;EAI7B,IAAI,aAAa,KAAA,GACf;EAGF,MAAM,eAAe;EAErB,YACED,+BAAAA,gBACE,cACA,kBACA,aACA,WAAW,WACb,CACF;CACF;CAEA,IAAI,aAAa;CAEjB,MAAM,mBAAmB,cAAc,KAAK,UAAU;EACpD,IAAI,wBAAwB,KAAK,GAAG;GAClC,MAAM,QAAQ;GAEd,QAAA,GAAOE,MAAAA,aAAAA,CACL,OAGA;IACE,YAAY;IACZ,WAAW,aAAa;IACxB,SAAS,SAAS;GACpB,CACF;EACF;EAEA,MAAM,cAAc,aAAa;EAEjC,MAAM,SAASD,+BAAAA,mBACb,cACA,kBACA,WACF;EAEA,QAAA,GAAOC,MAAAA,aAAAA,CACL,OAGA;GACE;GACA;GACA,OAAO,aAAa;GACpB,UAAU,OAAO;GACjB,UAAU,OAAO;GACjB,UAAU,CAAC,SAAS,cAAc,SAAS,cAAc,EAAE;GAC3D,mBAAmB;GACnB,eAAe;GACf,cAAc;GACd,aAAa;GACb,iBAAiB;EACnB,CACF;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACJ,MAAM,SAAS;GACb,SAAS,UAAU;GAEnB,IAAI,OAAO,iBAAiB,YAC1B,aAAa,IAAI;QACZ,IAAI,cACT,aAAa,UAAU;EAE3B;EACA,IAAI;EACJ,MAAM,QAAQ;EACd,YAAA,GAAWR,gBAAAA,GAAAA,CAAG,2BAA2B,SAAS;EAC3C;EACP,oBAAkB;EAClB,iBAAe,WAAW,SAAS,KAAA;EACnC,iBAAe,aAAa,SAAS,KAAA;EAEpC,UAAA;CACE,CAAA;AAET;AAOA,MAAM,kBAAkB,OAAO,OAAO,qBAAqB;CACzD,OAAO;CACP,QAAQ;AACV,CAAC"}
+{"version":3,"file":"index.cjs","names":["isValidElement","cn","useId","Children","useState","normalizePanelSizes","useRef","resizePanelPair","getPanelPairBounds","cloneElement"],"sources":["../../../../src/components/layout/resizable-panels/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  getPanelPairBounds,\n  normalizePanelSizes,\n  resizePanelPair,\n  type PanelSizeConstraint,\n} from \"./resizable-panels.utils\";\n\nimport \"./resizable-panels.css\";\n\ntype ResizablePanelsOrientation = \"horizontal\" | \"vertical\";\n\ntype ResizablePanelsProps = Omit<ComponentPropsWithRef<\"div\">, \"children\"> & {\n  /** Layout direction. Defaults to horizontal. */\n  orientation?: ResizablePanelsOrientation;\n\n  /** Controlled panel sizes, expressed as percentages. */\n  sizes?: readonly number[];\n\n  /** Initial panel sizes for uncontrolled usage. */\n  defaultSizes?: readonly number[];\n\n  /** Called whenever the panel layout changes. */\n  onSizesChange?: (sizes: number[]) => void;\n\n  /** Disables all resizing interactions. */\n  disabled?: boolean;\n\n  /** Percentage change per keyboard interaction. Defaults to 1. */\n  keyboardStep?: number;\n\n  /** Panels and handles that make up the group. */\n  children: ReactNode;\n};\n\ntype ResizablePanelProps = ComponentPropsWithRef<\"div\"> & {\n  /** Minimum panel size in percentages. Defaults to 0. */\n  minSize?: number;\n\n  /** Maximum panel size in percentages. Defaults to 100. */\n  maxSize?: number;\n};\n\ntype ResizableHandleProps = ComponentPropsWithRef<\"div\"> & {\n  /** Renders a visible grip inside the resize handle. */\n  withGrip?: boolean;\n\n  /** Disables resizing through this handle. */\n  disabled?: boolean;\n};\n\ntype ResizePointerHandler = (\n  event: ReactPointerEvent<HTMLDivElement>,\n  handleIndex: number,\n) => void;\n\ntype ResizeKeyboardHandler = (\n  event: ReactKeyboardEvent<HTMLDivElement>,\n  handleIndex: number,\n) => void;\n\ntype InternalResizablePanelProps = {\n  panelIndex?: number;\n  panelSize?: number;\n  panelId?: string;\n};\n\ntype InternalResizableHandleProps = {\n  handleIndex?: number;\n  orientation?: ResizablePanelsOrientation;\n  value?: number;\n  minValue?: number;\n  maxValue?: number;\n  panelIds?: [string, string];\n  inheritedDisabled?: boolean;\n\n  onResizeStart?: ResizePointerHandler;\n  onResizeMove?: ResizePointerHandler;\n  onResizeEnd?: ResizePointerHandler;\n  onResizeKeyDown?: ResizeKeyboardHandler;\n};\n\ntype PointerDragState = {\n  handleIndex: number;\n  pointerId: number;\n  startCoordinate: number;\n  availableSize: number;\n  direction: number;\n  sizes: number[];\n};\n\nconst isResizablePanelElement = (\n  child: ReactNode,\n): child is ReactElement<ResizablePanelProps> =>\n  isValidElement(child) && child.type === ResizablePanel;\n\nconst isResizableHandleElement = (\n  child: ReactNode,\n): child is ReactElement<ResizableHandleProps> =>\n  isValidElement(child) && child.type === ResizableHandle;\n\nconst parsePixels = (value: string | undefined) =>\n  Number.parseFloat(value ?? \"\") || 0;\n\nconst getAvailableSize = (\n  group: HTMLDivElement,\n  orientation: ResizablePanelsOrientation,\n) => {\n  const computedStyle =\n    group.ownerDocument.defaultView?.getComputedStyle(group);\n\n  const isHorizontal = orientation === \"horizontal\";\n\n  const totalSize = isHorizontal ? group.clientWidth : group.clientHeight;\n\n  const paddingSize = computedStyle\n    ? isHorizontal\n      ? parsePixels(computedStyle.paddingLeft) +\n        parsePixels(computedStyle.paddingRight)\n      : parsePixels(computedStyle.paddingTop) +\n        parsePixels(computedStyle.paddingBottom)\n    : 0;\n\n  const handleSize = Array.from(group.children).reduce((total, child) => {\n    const element = child as HTMLElement;\n\n    if (!element.hasAttribute(\"data-puzzle-resizable-handle\")) {\n      return total;\n    }\n\n    const rect = element.getBoundingClientRect();\n\n    return total + (isHorizontal ? rect.width : rect.height);\n  }, 0);\n\n  return Math.max(0, totalSize - paddingSize - handleSize);\n};\n\nconst getResizeDirection = (\n  element: HTMLElement,\n  orientation: ResizablePanelsOrientation,\n) => {\n  if (orientation !== \"horizontal\") {\n    return 1;\n  }\n\n  const direction =\n    element.ownerDocument.defaultView?.getComputedStyle(element).direction;\n\n  return direction === \"rtl\" ? -1 : 1;\n};\n\nconst getPointerCoordinate = (\n  event: ReactPointerEvent<HTMLDivElement>,\n  orientation: ResizablePanelsOrientation,\n) => (orientation === \"horizontal\" ? event.clientX : event.clientY);\n\nconst ResizablePanel = ({\n  id,\n  minSize = 0,\n  maxSize = 100,\n  panelIndex = 0,\n  panelSize = 1,\n  panelId,\n  className,\n  style,\n  ...props\n}: ResizablePanelProps & InternalResizablePanelProps) => (\n  <div\n    {...props}\n    id={panelId ?? id}\n    className={cn(\"puzzle-resizable-panels__panel\", className)}\n    style={{\n      ...style,\n      flex: `${panelSize} 1 0%`,\n    }}\n    data-panel-index={panelIndex}\n    data-panel-size={panelSize}\n    data-panel-min-size={minSize}\n    data-panel-max-size={maxSize}\n  />\n);\n\nconst ResizableHandle = ({\n  withGrip = false,\n  disabled = false,\n  handleIndex = -1,\n  orientation = \"horizontal\",\n  value,\n  minValue,\n  maxValue,\n  panelIds,\n  inheritedDisabled = false,\n  onResizeStart,\n  onResizeMove,\n  onResizeEnd,\n  onResizeKeyDown,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  onPointerCancel,\n  onLostPointerCapture,\n  onKeyDown,\n  className,\n  children,\n  tabIndex,\n  \"aria-label\": ariaLabel,\n  ...props\n}: ResizableHandleProps & InternalResizableHandleProps) => {\n  const isDisabled = disabled || inheritedDisabled;\n\n  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onPointerDown?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeStart?.(event, handleIndex);\n    }\n  };\n\n  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onPointerMove?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeMove?.(event, handleIndex);\n    }\n  };\n\n  const handlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onResizeEnd?.(event, handleIndex);\n    onPointerUp?.(event);\n  };\n\n  const handlePointerCancel = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onResizeEnd?.(event, handleIndex);\n    onPointerCancel?.(event);\n  };\n\n  const handleLostPointerCapture = (\n    event: ReactPointerEvent<HTMLDivElement>,\n  ) => {\n    onResizeEnd?.(event, handleIndex);\n    onLostPointerCapture?.(event);\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeKeyDown?.(event, handleIndex);\n    }\n  };\n\n  return (\n    <div\n      {...props}\n      className={cn(\"puzzle-resizable-panels__handle\", className)}\n      role=\"separator\"\n      tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}\n      aria-label={ariaLabel ?? \"Resize panels\"}\n      aria-orientation={\n        orientation === \"horizontal\" ? \"vertical\" : \"horizontal\"\n      }\n      aria-controls={panelIds?.join(\" \")}\n      aria-valuenow={value}\n      aria-valuemin={minValue}\n      aria-valuemax={maxValue}\n      aria-valuetext={\n        value === undefined ? undefined : `${Math.round(value * 100) / 100}%`\n      }\n      aria-disabled={isDisabled || undefined}\n      data-puzzle-resizable-handle=\"\"\n      data-orientation={orientation}\n      data-disabled={isDisabled ? \"true\" : undefined}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerCancel}\n      onLostPointerCapture={handleLostPointerCapture}\n      onKeyDown={handleKeyDown}\n    >\n      {withGrip ? (\n        <span\n          className=\"puzzle-resizable-panels__handle-grip\"\n          aria-hidden=\"true\"\n        />\n      ) : (\n        children\n      )}\n    </div>\n  );\n};\n\nconst ResizablePanelsRoot = ({\n  children,\n  orientation = \"horizontal\",\n  sizes,\n  defaultSizes,\n  onSizesChange,\n  disabled = false,\n  keyboardStep = 1,\n  id,\n  role,\n  className,\n  style,\n  ref: forwardedRef,\n  ...rootProps\n}: ResizablePanelsProps) => {\n  const generatedId = useId();\n\n  const groupId = id ?? `puzzle-resizable-panels-${generatedId}`;\n\n  if (!Number.isFinite(keyboardStep) || keyboardStep <= 0) {\n    throw new RangeError(\"keyboardStep must be a positive finite number.\");\n  }\n\n  const childrenArray = Children.toArray(children);\n\n  const validChildren =\n    childrenArray.length >= 3 &&\n    childrenArray.length % 2 === 1 &&\n    childrenArray.every((child, index) =>\n      index % 2 === 0\n        ? isResizablePanelElement(child)\n        : isResizableHandleElement(child),\n    );\n\n  if (!validChildren) {\n    throw new Error(\n      \"ResizablePanels requires alternating Panel and Handle children, starting and ending with a Panel. At least two panels are required.\",\n    );\n  }\n\n  const panelElements = childrenArray.filter(isResizablePanelElement);\n\n  const panelCount = panelElements.length;\n\n  const panelConstraints: PanelSizeConstraint[] = panelElements.map(\n    (panel) => ({\n      minSize: panel.props.minSize,\n      maxSize: panel.props.maxSize,\n    }),\n  );\n\n  const panelIds = panelElements.map(\n    (panel, index) => panel.props.id ?? `${groupId}-panel-${index}`,\n  );\n\n  if (new Set(panelIds).size !== panelIds.length) {\n    throw new Error(\"ResizablePanels requires unique panel IDs.\");\n  }\n\n  const [uncontrolledSizes, setUncontrolledSizes] = useState<number[]>(() =>\n    normalizePanelSizes(\n      sizes === undefined ? defaultSizes : undefined,\n      panelConstraints,\n    ),\n  );\n\n  const layoutInput =\n    sizes ??\n    (uncontrolledSizes.length === panelCount ? uncontrolledSizes : undefined);\n\n  const currentSizes = normalizePanelSizes(layoutInput, panelConstraints);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const groupRef = useRef<HTMLDivElement | null>(null);\n\n  const pointerDragRef = useRef<PointerDragState | null>(null);\n\n  const updateSizes = (nextSizes: readonly number[]) => {\n    const normalized = normalizePanelSizes(nextSizes, panelConstraints);\n\n    const hasChanged = normalized.some(\n      (size, index) => Math.abs(size - (currentSizes[index] ?? 0)) > 0.000001,\n    );\n\n    if (!hasChanged) {\n      return;\n    }\n\n    if (sizes === undefined) {\n      setUncontrolledSizes(normalized);\n    }\n\n    onSizesChange?.(normalized);\n  };\n\n  const handlePointerDown: ResizePointerHandler = (event, handleIndex) => {\n    const group = groupRef.current;\n\n    if (!group || disabled) {\n      return;\n    }\n\n    if (\n      event.button !== 0 &&\n      event.pointerType !== \"touch\" &&\n      event.pointerType !== \"pen\"\n    ) {\n      return;\n    }\n\n    const availableSize = getAvailableSize(group, orientation);\n\n    if (availableSize <= 0) {\n      return;\n    }\n\n    pointerDragRef.current = {\n      handleIndex,\n      pointerId: event.pointerId,\n      startCoordinate: getPointerCoordinate(event, orientation),\n      availableSize,\n      direction: getResizeDirection(group, orientation),\n      sizes: [...currentSizes],\n    };\n\n    try {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    } catch {\n      // Synthetic pointer events and detached elements may not\n      // support pointer capture.\n    }\n\n    event.preventDefault();\n    setIsResizing(true);\n  };\n\n  const handlePointerMove: ResizePointerHandler = (event, handleIndex) => {\n    const drag = pointerDragRef.current;\n\n    if (\n      !drag ||\n      drag.pointerId !== event.pointerId ||\n      drag.handleIndex !== handleIndex\n    ) {\n      return;\n    }\n\n    const currentCoordinate = getPointerCoordinate(event, orientation);\n\n    const delta =\n      ((currentCoordinate - drag.startCoordinate) / drag.availableSize) *\n      100 *\n      drag.direction;\n\n    const nextSizes = resizePanelPair(\n      drag.sizes,\n      panelConstraints,\n      handleIndex,\n      delta,\n    );\n\n    event.preventDefault();\n    updateSizes(nextSizes);\n  };\n\n  const handlePointerEnd: ResizePointerHandler = (event, handleIndex) => {\n    const drag = pointerDragRef.current;\n\n    if (\n      !drag ||\n      drag.pointerId !== event.pointerId ||\n      drag.handleIndex !== handleIndex\n    ) {\n      return;\n    }\n\n    pointerDragRef.current = null;\n    setIsResizing(false);\n  };\n\n  const handleKeyDown: ResizeKeyboardHandler = (event, handleIndex) => {\n    if (disabled) {\n      return;\n    }\n\n    const currentSize = currentSizes[handleIndex]!;\n\n    const bounds = getPanelPairBounds(\n      currentSizes,\n      panelConstraints,\n      handleIndex,\n    );\n\n    const group = groupRef.current;\n\n    const direction = group ? getResizeDirection(group, orientation) : 1;\n\n    const step = keyboardStep * (event.shiftKey ? 10 : 1);\n\n    let nextSize: number | undefined;\n\n    if (event.key === \"Home\") {\n      nextSize = bounds.minSize;\n    } else if (event.key === \"End\") {\n      nextSize = bounds.maxSize;\n    } else if (orientation === \"horizontal\") {\n      if (event.key === \"ArrowRight\") {\n        nextSize = currentSize + step * direction;\n      } else if (event.key === \"ArrowLeft\") {\n        nextSize = currentSize - step * direction;\n      }\n    } else {\n      if (event.key === \"ArrowDown\") {\n        nextSize = currentSize + step;\n      } else if (event.key === \"ArrowUp\") {\n        nextSize = currentSize - step;\n      }\n    }\n\n    if (nextSize === undefined) {\n      return;\n    }\n\n    event.preventDefault();\n\n    updateSizes(\n      resizePanelPair(\n        currentSizes,\n        panelConstraints,\n        handleIndex,\n        nextSize - currentSize,\n      ),\n    );\n  };\n\n  let panelIndex = 0;\n\n  const enhancedChildren = childrenArray.map((child) => {\n    if (isResizablePanelElement(child)) {\n      const index = panelIndex++;\n\n      return cloneElement(\n        child as ReactElement<\n          ResizablePanelProps & InternalResizablePanelProps\n        >,\n        {\n          panelIndex: index,\n          panelSize: currentSizes[index],\n          panelId: panelIds[index],\n        },\n      );\n    }\n\n    const handleIndex = panelIndex - 1;\n\n    const bounds = getPanelPairBounds(\n      currentSizes,\n      panelConstraints,\n      handleIndex,\n    );\n\n    return cloneElement(\n      child as ReactElement<\n        ResizableHandleProps & InternalResizableHandleProps\n      >,\n      {\n        handleIndex,\n        orientation,\n        value: currentSizes[handleIndex],\n        minValue: bounds.minSize,\n        maxValue: bounds.maxSize,\n        panelIds: [panelIds[handleIndex]!, panelIds[handleIndex + 1]!],\n        inheritedDisabled: disabled,\n        onResizeStart: handlePointerDown,\n        onResizeMove: handlePointerMove,\n        onResizeEnd: handlePointerEnd,\n        onResizeKeyDown: handleKeyDown,\n      },\n    );\n  });\n\n  return (\n    <div\n      {...rootProps}\n      ref={(node) => {\n        groupRef.current = node;\n\n        if (typeof forwardedRef === \"function\") {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      }}\n      id={groupId}\n      role={role ?? \"group\"}\n      className={cn(\"puzzle-resizable-panels\", className)}\n      style={style}\n      data-orientation={orientation}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-resizing={isResizing ? \"true\" : undefined}\n    >\n      {enhancedChildren}\n    </div>\n  );\n};\n\ntype ResizablePanelsComponent = typeof ResizablePanelsRoot & {\n  Panel: typeof ResizablePanel;\n  Handle: typeof ResizableHandle;\n};\n\nconst ResizablePanels = Object.assign(ResizablePanelsRoot, {\n  Panel: ResizablePanel,\n  Handle: ResizableHandle,\n}) as ResizablePanelsComponent;\n\nexport {\n  ResizablePanels,\n  ResizablePanel,\n  ResizableHandle,\n  type ResizablePanelsProps,\n  type ResizablePanelProps,\n  type ResizableHandleProps,\n  type ResizablePanelsOrientation,\n};\n"],"mappings":"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"}

package/dist/components/layout/resizable-panels/index.js

@@ -115,7 +115,7 @@ const ResizablePanelsRoot = ({ children, orientation = "horizontal", sizes, defa
 	const pointerDragRef = useRef(null);
 	const updateSizes = (nextSizes) => {
 		const normalized = normalizePanelSizes(nextSizes, panelConstraints);
-		if (!normalized.some((size, index) => Math.abs(size - currentSizes[index]) > 1e-6)) return;
+		if (!normalized.some((size, index) => Math.abs(size - (currentSizes[index] ?? 0)) > 1e-6)) return;
 		if (sizes === void 0) setUncontrolledSizes(normalized);
 		onSizesChange?.(normalized);
 	};