@zappie/foundations 0.1.0 → 0.1.2

package/dist/internal/ids.js

@@ -0,0 +1,10 @@
+// src/internal/ids.ts
+import { useId } from "react";
+function usePartId(provided) {
+  const id = useId();
+  return provided ?? `zappie-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+}
+export {
+  usePartId
+};
+//# sourceMappingURL=ids.js.map

package/dist/internal/ids.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/ids.ts"],
+  "sourcesContent": ["import { useId } from \"react\";\nexport function usePartId(provided?: string) {\n  const id = useId();\n  return provided ?? `zappie-${id.replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n}\n"],
+  "mappings": ";AAAA,SAAS,aAAa;AACf,SAAS,UAAU,UAAmB;AAC3C,QAAM,KAAK,MAAM;AACjB,SAAO,YAAY,UAAU,GAAG,QAAQ,mBAAmB,EAAE,CAAC;AAChE;",
+  "names": []
+}

package/dist/{chunk-D3J7S33L.js → internal/slot.js}

@@ -1,6 +1,10 @@
-import { Children, isValidElement, cloneElement, createElement } from 'react';
-
 // src/internal/slot.tsx
+import {
+  Children,
+  cloneElement,
+  createElement,
+  isValidElement
+} from "react";
 function composeRefs(...refs) {
   let cleanups = [];
   return (value) => {
@@ -75,7 +79,10 @@ function partId(props) {
   }
   return void 0;
 }
-
-export { composeRefs, part, partId };
-//# sourceMappingURL=chunk-D3J7S33L.js.map
-//# sourceMappingURL=chunk-D3J7S33L.js.map
+export {
+  composeRefs,
+  mergeProps,
+  part,
+  partId
+};
+//# sourceMappingURL=slot.js.map

package/dist/internal/slot.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/slot.tsx"],
+  "sourcesContent": ["import {\n  Children,\n  cloneElement,\n  createElement,\n  isValidElement,\n  type AllHTMLAttributes,\n  type ElementType,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n/**\n * HTML attributes shared by foundation parts, with optional render-function children.\n * Set asChild to merge the part props and ref into a single child element.\n */\nexport type PartProps<S = Record<string, never>> = Omit<\n  AllHTMLAttributes<HTMLElement>,\n  \"children\" | \"defaultValue\" | \"value\"\n> & {\n  asChild?: boolean;\n  children?: ReactNode | ((state: S) => ReactNode);\n};\nexport function composeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T> {\n  let cleanups: (() => void)[] = [];\n  return (value) => {\n    for (const cleanup of cleanups) {\n      cleanup();\n    }\n    cleanups = [];\n    if (value === null) {\n      return;\n    }\n    for (const ref of refs) {\n      if (typeof ref === \"function\") {\n        const cleanup = ref(value);\n        cleanups.push(\n          typeof cleanup === \"function\" ? cleanup : () => ref(null),\n        );\n      } else if (ref) {\n        ref.current = value;\n        cleanups.push(() => {\n          ref.current = null;\n        });\n      }\n    }\n  };\n}\n/** Consumer handlers run first and may cancel the primitive's action. */\nexport function mergeProps(\n  base: Record<string, unknown>,\n  consumer: Record<string, unknown>,\n) {\n  const result = { ...base, ...consumer };\n  if (\n    typeof base.className === \"string\" &&\n    typeof consumer.className === \"string\"\n  ) {\n    result.className = `${base.className} ${consumer.className}`;\n  }\n  if (\n    base.style &&\n    consumer.style &&\n    typeof base.style === \"object\" &&\n    typeof consumer.style === \"object\"\n  ) {\n    result.style = { ...base.style, ...consumer.style };\n  }\n  for (const key of Object.keys(base)) {\n    if (\n      /^on[A-Z]/.test(key) &&\n      typeof base[key] === \"function\" &&\n      typeof consumer[key] === \"function\"\n    ) {\n      result[key] = (event: { defaultPrevented?: boolean }) => {\n        (consumer[key] as (event: unknown) => void)(event);\n        if (!event.defaultPrevented) {\n          (base[key] as (event: unknown) => void)(event);\n        }\n      };\n    }\n  }\n  return result;\n}\nexport function part<S>(\n  tag: ElementType,\n  props: PartProps<S>,\n  state: S,\n  defaults: Record<string, unknown> = {},\n  ref?: Ref<HTMLElement>,\n) {\n  const { asChild, children, ...dom } = props;\n  const content = typeof children === \"function\" ? children(state) : children;\n  const merged = mergeProps(defaults, dom);\n  if (asChild || (tag === \"input\" && typeof children === \"function\")) {\n    const child = Children.only(content);\n    if (!isValidElement(child)) {\n      throw new Error(\"asChild requires one React element\");\n    }\n    const element = child as ReactElement<Record<string, unknown>>;\n    // React 18 stores ref on the element; React 19 stores it in props.\n    const descriptor = Object.getOwnPropertyDescriptor(element, \"ref\");\n    const childRef =\n      element.props.ref ??\n      (descriptor && \"value\" in descriptor ? descriptor.value : undefined);\n    return cloneElement(element, {\n      ...mergeProps(merged, element.props),\n      ref: composeRefs(ref, childRef as Ref<HTMLElement>),\n    });\n  }\n  return createElement(tag, { ...merged, ref }, content);\n}\n/** A part's caller-supplied id, whether passed as a prop or set on its `asChild` element. */\nexport function partId(props: {\n  id?: string | undefined;\n  asChild?: boolean | undefined;\n  children?: unknown;\n}): string | undefined {\n  if (props.id) {\n    return props.id;\n  }\n  if (props.asChild && isValidElement(props.children)) {\n    const id = (props.children.props as { id?: unknown }).id;\n    return typeof id === \"string\" ? id : undefined;\n  }\n  return undefined;\n}\n"],
+  "mappings": ";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AAYA,SAAS,eAAkB,MAAsC;AACtE,MAAI,WAA2B,CAAC;AAChC,SAAO,CAAC,UAAU;AAChB,eAAW,WAAW,UAAU;AAC9B,cAAQ;AAAA,IACV;AACA,eAAW,CAAC;AACZ,QAAI,UAAU,MAAM;AAClB;AAAA,IACF;AACA,eAAW,OAAO,MAAM;AACtB,UAAI,OAAO,QAAQ,YAAY;AAC7B,cAAM,UAAU,IAAI,KAAK;AACzB,iBAAS;AAAA,UACP,OAAO,YAAY,aAAa,UAAU,MAAM,IAAI,IAAI;AAAA,QAC1D;AAAA,MACF,WAAW,KAAK;AACd,YAAI,UAAU;AACd,iBAAS,KAAK,MAAM;AAClB,cAAI,UAAU;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,WACd,MACA,UACA;AACA,QAAM,SAAS,EAAE,GAAG,MAAM,GAAG,SAAS;AACtC,MACE,OAAO,KAAK,cAAc,YAC1B,OAAO,SAAS,cAAc,UAC9B;AACA,WAAO,YAAY,GAAG,KAAK,SAAS,IAAI,SAAS,SAAS;AAAA,EAC5D;AACA,MACE,KAAK,SACL,SAAS,SACT,OAAO,KAAK,UAAU,YACtB,OAAO,SAAS,UAAU,UAC1B;AACA,WAAO,QAAQ,EAAE,GAAG,KAAK,OAAO,GAAG,SAAS,MAAM;AAAA,EACpD;AACA,aAAW,OAAO,OAAO,KAAK,IAAI,GAAG;AACnC,QACE,WAAW,KAAK,GAAG,KACnB,OAAO,KAAK,GAAG,MAAM,cACrB,OAAO,SAAS,GAAG,MAAM,YACzB;AACA,aAAO,GAAG,IAAI,CAAC,UAA0C;AACvD,QAAC,SAAS,GAAG,EAA+B,KAAK;AACjD,YAAI,CAAC,MAAM,kBAAkB;AAC3B,UAAC,KAAK,GAAG,EAA+B,KAAK;AAAA,QAC/C;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AACO,SAAS,KACd,KACA,OACA,OACA,WAAoC,CAAC,GACrC,KACA;AACA,QAAM,EAAE,SAAS,UAAU,GAAG,IAAI,IAAI;AACtC,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;AACnE,QAAM,SAAS,WAAW,UAAU,GAAG;AACvC,MAAI,WAAY,QAAQ,WAAW,OAAO,aAAa,YAAa;AAClE,UAAM,QAAQ,SAAS,KAAK,OAAO;AACnC,QAAI,CAAC,eAAe,KAAK,GAAG;AAC1B,YAAM,IAAI,MAAM,oCAAoC;AAAA,IACtD;AACA,UAAM,UAAU;AAEhB,UAAM,aAAa,OAAO,yBAAyB,SAAS,KAAK;AACjE,UAAM,WACJ,QAAQ,MAAM,QACb,cAAc,WAAW,aAAa,WAAW,QAAQ;AAC5D,WAAO,aAAa,SAAS;AAAA,MAC3B,GAAG,WAAW,QAAQ,QAAQ,KAAK;AAAA,MACnC,KAAK,YAAY,KAAK,QAA4B;AAAA,IACpD,CAAC;AAAA,EACH;AACA,SAAO,cAAc,KAAK,EAAE,GAAG,QAAQ,IAAI,GAAG,OAAO;AACvD;AAEO,SAAS,OAAO,OAIA;AACrB,MAAI,MAAM,IAAI;AACZ,WAAO,MAAM;AAAA,EACf;AACA,MAAI,MAAM,WAAW,eAAe,MAAM,QAAQ,GAAG;AACnD,UAAM,KAAM,MAAM,SAAS,MAA2B;AACtD,WAAO,OAAO,OAAO,WAAW,KAAK;AAAA,EACvC;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/internal/use-controllable-state.js

@@ -0,0 +1,29 @@
+// src/internal/use-controllable-state.ts
+import { useCallback, useRef, useState } from "react";
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value === void 0 ? internal : value;
+  const latest = useRef({ current, onChange, controlled: value !== void 0 });
+  latest.current = { current, onChange, controlled: value !== void 0 };
+  const set = useCallback((next) => {
+    const snapshot = latest.current;
+    const resolved = typeof next === "function" ? next(snapshot.current) : next;
+    if (Object.is(resolved, snapshot.current)) {
+      return;
+    }
+    if (!snapshot.controlled) {
+      latest.current.current = resolved;
+      setInternal(resolved);
+    }
+    snapshot.onChange?.(resolved);
+  }, []);
+  return [current, set];
+}
+export {
+  useControllableState
+};
+//# sourceMappingURL=use-controllable-state.js.map

package/dist/internal/use-controllable-state.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/use-controllable-state.ts"],
+  "sourcesContent": ["import { useCallback, useRef, useState } from \"react\";\n/**\n * Manage either a supplied value or internal state initialized from defaultValue.\n * The setter accepts a value or updater and calls onChange only when Object.is detects a change.\n *\n * @returns The current value and a stable setter. A defined value keeps state controlled by you.\n */\nexport function useControllableState<T>({\n  value,\n  defaultValue,\n  onChange,\n}: {\n  value?: T | undefined;\n  defaultValue: T;\n  onChange?: ((value: T) => void) | undefined;\n}) {\n  const [internal, setInternal] = useState(defaultValue);\n  const current = value === undefined ? internal : value;\n  const latest = useRef({ current, onChange, controlled: value !== undefined });\n  latest.current = { current, onChange, controlled: value !== undefined };\n  const set = useCallback((next: T | ((previous: T) => T)) => {\n    const snapshot = latest.current;\n    const resolved =\n      typeof next === \"function\"\n        ? (next as (previous: T) => T)(snapshot.current)\n        : next;\n    if (Object.is(resolved, snapshot.current)) {\n      return;\n    }\n    if (!snapshot.controlled) {\n      latest.current.current = resolved;\n      setInternal(resolved);\n    }\n    snapshot.onChange?.(resolved);\n  }, []);\n  return [current, set] as const;\n}\n"],
+  "mappings": ";AAAA,SAAS,aAAa,QAAQ,gBAAgB;AAOvC,SAAS,qBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,YAAY;AACrD,QAAM,UAAU,UAAU,SAAY,WAAW;AACjD,QAAM,SAAS,OAAO,EAAE,SAAS,UAAU,YAAY,UAAU,OAAU,CAAC;AAC5E,SAAO,UAAU,EAAE,SAAS,UAAU,YAAY,UAAU,OAAU;AACtE,QAAM,MAAM,YAAY,CAAC,SAAmC;AAC1D,UAAM,WAAW,OAAO;AACxB,UAAM,WACJ,OAAO,SAAS,aACX,KAA4B,SAAS,OAAO,IAC7C;AACN,QAAI,OAAO,GAAG,UAAU,SAAS,OAAO,GAAG;AACzC;AAAA,IACF;AACA,QAAI,CAAC,SAAS,YAAY;AACxB,aAAO,QAAQ,UAAU;AACzB,kBAAY,QAAQ;AAAA,IACtB;AACA,aAAS,WAAW,QAAQ;AAAA,EAC9B,GAAG,CAAC,CAAC;AACL,SAAO,CAAC,SAAS,GAAG;AACtB;",
+  "names": []
+}

package/dist/item-form/index.js

@@ -0,0 +1,13 @@
+// src/item-form/index.ts
+import { Add, Options } from "./options.js";
+import { Root } from "./root.js";
+import { Choice, OptionGroup } from "./option-group.js";
+import { Quantity } from "./quantity.js";
+var ItemForm = { Root, Options, Add };
+export {
+  Choice,
+  ItemForm,
+  OptionGroup,
+  Quantity
+};
+//# sourceMappingURL=index.js.map

package/dist/item-form/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/item-form/index.ts"],
+  "sourcesContent": ["import { Add, Options } from \"./options\";\nimport { Root } from \"./root\";\n/**\n * Composable item configuration parts for selecting options, validating a line and adding it to the cart.\n * Use ItemForm.Root within your ZappieProvider and place Options and Add inside it.\n */\nexport const ItemForm = { Root, Options, Add };\nexport { Choice, OptionGroup } from \"./option-group\";\nexport { Quantity } from \"./quantity\";\nexport type { QuantityProps, QuantityState } from \"./quantity\";\nexport type { ActiveGroup, ItemFormContext, ItemFormProps } from \"./root\";\n"],
+  "mappings": ";AAAA,SAAS,KAAK,eAAe;AAC7B,SAAS,YAAY;AAMrB,SAAS,QAAQ,mBAAmB;AACpC,SAAS,gBAAgB;AAFlB,IAAM,WAAW,EAAE,MAAM,SAAS,IAAI;",
+  "names": []
+}

package/dist/item-form/option-group.js

@@ -0,0 +1,268 @@
+"use client";
+
+// src/item-form/option-group.tsx
+import {
+  createContext,
+  forwardRef,
+  memo,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+import { flag } from "../internal/data-attrs.js";
+import { usePartId } from "../internal/ids.js";
+import { composeRefs, part } from "../internal/slot.js";
+import { GroupRegistry, useItemForm } from "./root.js";
+import { jsx } from "react/jsx-runtime";
+var Context = createContext(null);
+function useGroup() {
+  const value = useContext(Context);
+  if (!value) {
+    throw new Error("Choice and OptionGroup.Input require OptionGroup");
+  }
+  return value;
+}
+var Group = forwardRef(function OptionGroup({ group: supplied, ...props }, ref) {
+  const ctx = useItemForm();
+  const registry = useContext(GroupRegistry);
+  const group = ctx.groups.find((candidate) => candidate.id === supplied.id) ?? supplied;
+  const mine = ctx.value.choices?.filter((choice) => choice.groupId === group.id) ?? [];
+  const selected = mine.map((choice) => choice.choiceId);
+  const quantities = Object.fromEntries(
+    mine.map((choice) => [choice.choiceId, choice.quantity ?? 1])
+  );
+  const invalid = ctx.issues.some((issue) => issue.groupId === group.id);
+  const input = ctx.value.inputs?.[group.id] ?? "";
+  const latest = useRef({ ctx, group });
+  latest.current = { ctx, group };
+  const actions = useMemo(
+    () => ({
+      toggle: (id) => {
+        const { ctx: ctx2, group: group2 } = latest.current;
+        const choice = group2.choices.find((candidate) => candidate.id === id);
+        if (!choice?.isAvailable) {
+          return;
+        }
+        const previous = ctx2.value.choices ?? [];
+        const chosen = previous.some(
+          (candidate) => candidate.groupId === group2.id && candidate.choiceId === id
+        );
+        let choices = previous.filter(
+          (candidate) => candidate.groupId !== group2.id || group2.selection.max !== 1 && candidate.choiceId !== id
+        );
+        if (!chosen || group2.selection.max === 1 && group2.required) {
+          choices = [
+            ...choices,
+            {
+              groupId: group2.id,
+              choiceId: id,
+              quantity: choice.quantity?.min ?? 1
+            }
+          ];
+        }
+        const inputs = { ...ctx2.value.inputs };
+        delete inputs[group2.id];
+        ctx2.setValue({ ...ctx2.value, choices, inputs });
+      },
+      setQuantity: (id, quantity) => {
+        const { ctx: ctx2, group: group2 } = latest.current;
+        const choice = group2.choices.find((candidate) => candidate.id === id);
+        if (!choice?.isAvailable || !Number.isInteger(quantity)) {
+          return;
+        }
+        const others = (ctx2.value.choices ?? []).filter(
+          (candidate) => candidate.groupId !== group2.id || group2.selection.max !== 1 && candidate.choiceId !== id
+        );
+        if (quantity <= 0) {
+          ctx2.setValue({
+            ...ctx2.value,
+            choices: (ctx2.value.choices ?? []).filter(
+              (candidate) => candidate.groupId !== group2.id || candidate.choiceId !== id
+            )
+          });
+          return;
+        }
+        const min = choice.quantity?.min ?? 1;
+        const max = choice.quantity?.max ?? 99;
+        ctx2.setValue({
+          ...ctx2.value,
+          choices: [
+            ...others,
+            {
+              groupId: group2.id,
+              choiceId: id,
+              quantity: Math.min(max, Math.max(min, quantity))
+            }
+          ]
+        });
+      },
+      setInput: (value) => {
+        const { ctx: ctx2, group: group2 } = latest.current;
+        ctx2.setValue({
+          ...ctx2.value,
+          choices: (ctx2.value.choices ?? []).filter(
+            (choice) => choice.groupId !== group2.id
+          ),
+          inputs: {
+            ...ctx2.value.inputs,
+            [group2.id]: value.slice(0, group2.input?.maxLength ?? 500)
+          }
+        });
+      }
+    }),
+    []
+  );
+  const selectionKey = JSON.stringify(quantities);
+  const state = useMemo(
+    () => ({ group, selected, quantities, invalid, input, ...actions }),
+    [group, selectionKey, invalid, input, actions]
+  );
+  const single = group.kind === "select" && group.selection.max === 1;
+  return /* @__PURE__ */ jsx(Context.Provider, { value: state, children: part(
+    "div",
+    props,
+    state,
+    {
+      role: single ? "radiogroup" : "group",
+      tabIndex: -1,
+      "aria-label": group.name,
+      "aria-required": single ? group.required : void 0,
+      "aria-invalid": invalid || void 0,
+      "data-invalid": flag(invalid),
+      "data-state": invalid ? "invalid" : "valid",
+      "data-zappie-option-group": group.id,
+      onKeyDown: (event) => {
+        if (!single || ![
+          "ArrowDown",
+          "ArrowRight",
+          "ArrowUp",
+          "ArrowLeft",
+          "Home",
+          "End"
+        ].includes(event.key)) {
+          return;
+        }
+        const choices = Array.from(
+          event.currentTarget.querySelectorAll(
+            '[role="radio"]:not([aria-disabled="true"])'
+          )
+        );
+        if (!choices.length) {
+          return;
+        }
+        const current = choices.indexOf(
+          document.activeElement
+        );
+        const index = event.key === "Home" ? 0 : event.key === "End" ? choices.length - 1 : (current + (event.key === "ArrowUp" || event.key === "ArrowLeft" ? -1 : 1) + choices.length) % choices.length;
+        event.preventDefault();
+        choices[index]?.focus();
+        choices[index]?.click();
+      }
+    },
+    composeRefs(ref, (node) => {
+      if (node) {
+        registry.set(group.id, node);
+      } else {
+        registry.delete(group.id);
+      }
+    })
+  ) });
+});
+var ChoiceView = memo(
+  forwardRef(function ChoiceView2({
+    choice,
+    selected,
+    single,
+    tabIndex,
+    quantity,
+    toggleChoice,
+    setChoiceQuantity,
+    ...props
+  }, ref) {
+    const toggle = () => toggleChoice(choice.id);
+    const state = {
+      choice,
+      selected,
+      disabled: !choice.isAvailable,
+      toggle,
+      quantity,
+      min: choice.quantity?.min ?? 1,
+      max: choice.quantity?.max ?? 99,
+      setQuantity: (next) => setChoiceQuantity(choice.id, next)
+    };
+    return part(
+      "button",
+      props,
+      state,
+      {
+        type: "button",
+        role: single ? "radio" : "checkbox",
+        tabIndex,
+        "aria-checked": selected,
+        "aria-disabled": !choice.isAvailable,
+        disabled: !choice.isAvailable,
+        "data-selected": flag(selected),
+        "data-sold-out": flag(!choice.isAvailable),
+        "data-disabled": flag(!choice.isAvailable),
+        "data-state": selected ? "checked" : "unchecked",
+        "data-zappie-option": choice.id,
+        onClick: toggle
+      },
+      ref
+    );
+  })
+);
+var Choice = forwardRef(function Choice2(props, ref) {
+  const ctx = useGroup();
+  const single = ctx.group.selection.max === 1;
+  const selected = ctx.selected.includes(props.choice.id);
+  const first = ctx.group.choices.find((choice) => choice.isAvailable);
+  const tabIndex = !single || selected || !ctx.selected.length && first?.id === props.choice.id ? 0 : -1;
+  return /* @__PURE__ */ jsx(
+    ChoiceView,
+    {
+      ...props,
+      ref,
+      selected,
+      single,
+      tabIndex,
+      quantity: ctx.quantities[props.choice.id] ?? 0,
+      toggleChoice: ctx.toggle,
+      setChoiceQuantity: ctx.setQuantity
+    }
+  );
+});
+var Input = forwardRef(
+  function Input2(props, ref) {
+    const ctx = useGroup();
+    const id = usePartId(props.id);
+    const toggle = ctx.group.kind === "toggle";
+    return part(
+      "input",
+      props,
+      ctx,
+      {
+        id,
+        type: toggle ? "checkbox" : ctx.group.kind === "select" ? "text" : ctx.group.kind,
+        value: toggle ? void 0 : ctx.input,
+        checked: toggle ? ctx.input === "true" : void 0,
+        required: ctx.group.required,
+        "aria-label": ctx.group.name,
+        "aria-invalid": ctx.invalid || void 0,
+        "data-invalid": flag(ctx.invalid),
+        maxLength: ctx.group.input?.maxLength ?? 500,
+        placeholder: ctx.group.input?.placeholder,
+        onChange: (event) => ctx.setInput(
+          toggle ? String(event.target.checked) : event.target.value
+        )
+      },
+      ref
+    );
+  }
+);
+var OptionGroup2 = Object.assign(Group, { Input });
+export {
+  Choice,
+  OptionGroup2 as OptionGroup
+};
+//# sourceMappingURL=option-group.js.map

package/dist/item-form/option-group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/item-form/option-group.tsx"],
+  "sourcesContent": ["\"use client\";\nimport type {\n  Choice as ChoiceModel,\n  OptionGroup as GroupModel,\n} from \"@zappie/sdk\";\nimport {\n  createContext,\n  forwardRef,\n  memo,\n  useContext,\n  useMemo,\n  useRef,\n  type ChangeEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport { flag } from \"../internal/data-attrs\";\nimport { usePartId } from \"../internal/ids\";\nimport { composeRefs, part, type PartProps } from \"../internal/slot\";\nimport { GroupRegistry, useItemForm } from \"./root\";\ntype GroupState = {\n  group: GroupModel;\n  selected: string[];\n  invalid: boolean;\n  input: string;\n  setInput: (value: string) => void;\n  toggle: (id: string) => void;\n  quantities: Readonly<Record<string, number>>;\n  /** Set a choice's quantity within its bounds. Zero deselects it. A positive value selects it. */\n  setQuantity: (id: string, quantity: number) => void;\n};\nconst Context = createContext<GroupState | null>(null);\nfunction useGroup() {\n  const value = useContext(Context);\n  if (!value) {\n    throw new Error(\"Choice and OptionGroup.Input require OptionGroup\");\n  }\n  return value;\n}\nconst Group = forwardRef<\n  HTMLElement,\n  PartProps<GroupState> & { group: GroupModel }\n>(function OptionGroup({ group: supplied, ...props }, ref) {\n  const ctx = useItemForm();\n  const registry = useContext(GroupRegistry)!;\n  const group =\n    ctx.groups.find((candidate) => candidate.id === supplied.id) ?? supplied;\n  const mine =\n    ctx.value.choices?.filter((choice) => choice.groupId === group.id) ?? [];\n  const selected = mine.map((choice) => choice.choiceId);\n  const quantities = Object.fromEntries(\n    mine.map((choice) => [choice.choiceId, choice.quantity ?? 1]),\n  );\n  const invalid = ctx.issues.some((issue) => issue.groupId === group.id);\n  const input = ctx.value.inputs?.[group.id] ?? \"\";\n  const latest = useRef({ ctx, group });\n  latest.current = { ctx, group };\n  const actions = useMemo(\n    () => ({\n      toggle: (id: string) => {\n        const { ctx, group } = latest.current;\n        const choice = group.choices.find((candidate) => candidate.id === id);\n        if (!choice?.isAvailable) {\n          return;\n        }\n        const previous = ctx.value.choices ?? [];\n        const chosen = previous.some(\n          (candidate) =>\n            candidate.groupId === group.id && candidate.choiceId === id,\n        );\n        let choices = previous.filter(\n          (candidate) =>\n            candidate.groupId !== group.id ||\n            (group.selection.max !== 1 && candidate.choiceId !== id),\n        );\n        if (!chosen || (group.selection.max === 1 && group.required)) {\n          choices = [\n            ...choices,\n            {\n              groupId: group.id,\n              choiceId: id,\n              quantity: choice.quantity?.min ?? 1,\n            },\n          ];\n        }\n        const inputs = { ...ctx.value.inputs };\n        delete inputs[group.id];\n        ctx.setValue({ ...ctx.value, choices, inputs });\n      },\n      setQuantity: (id: string, quantity: number) => {\n        const { ctx, group } = latest.current;\n        const choice = group.choices.find((candidate) => candidate.id === id);\n        if (!choice?.isAvailable || !Number.isInteger(quantity)) {\n          return;\n        }\n        const others = (ctx.value.choices ?? []).filter(\n          (candidate) =>\n            candidate.groupId !== group.id ||\n            (group.selection.max !== 1 && candidate.choiceId !== id),\n        );\n        if (quantity <= 0) {\n          ctx.setValue({\n            ...ctx.value,\n            choices: (ctx.value.choices ?? []).filter(\n              (candidate) =>\n                candidate.groupId !== group.id || candidate.choiceId !== id,\n            ),\n          });\n          return;\n        }\n        const min = choice.quantity?.min ?? 1;\n        const max = choice.quantity?.max ?? 99;\n        ctx.setValue({\n          ...ctx.value,\n          choices: [\n            ...others,\n            {\n              groupId: group.id,\n              choiceId: id,\n              quantity: Math.min(max, Math.max(min, quantity)),\n            },\n          ],\n        });\n      },\n      setInput: (value: string) => {\n        const { ctx, group } = latest.current;\n        ctx.setValue({\n          ...ctx.value,\n          choices: (ctx.value.choices ?? []).filter(\n            (choice) => choice.groupId !== group.id,\n          ),\n          inputs: {\n            ...ctx.value.inputs,\n            [group.id]: value.slice(0, group.input?.maxLength ?? 500),\n          },\n        });\n      },\n    }),\n    [],\n  );\n  const selectionKey = JSON.stringify(quantities);\n  const state = useMemo(\n    () => ({ group, selected, quantities, invalid, input, ...actions }),\n    [group, selectionKey, invalid, input, actions],\n  );\n  const single = group.kind === \"select\" && group.selection.max === 1;\n  return (\n    <Context.Provider value={state}>\n      {part(\n        \"div\",\n        props,\n        state,\n        {\n          role: single ? \"radiogroup\" : \"group\",\n          tabIndex: -1,\n          \"aria-label\": group.name,\n          \"aria-required\": single ? group.required : undefined,\n          \"aria-invalid\": invalid || undefined,\n          \"data-invalid\": flag(invalid),\n          \"data-state\": invalid ? \"invalid\" : \"valid\",\n          \"data-zappie-option-group\": group.id,\n          onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n            if (\n              !single ||\n              ![\n                \"ArrowDown\",\n                \"ArrowRight\",\n                \"ArrowUp\",\n                \"ArrowLeft\",\n                \"Home\",\n                \"End\",\n              ].includes(event.key)\n            ) {\n              return;\n            }\n            const choices = Array.from(\n              event.currentTarget.querySelectorAll<HTMLElement>(\n                '[role=\"radio\"]:not([aria-disabled=\"true\"])',\n              ),\n            );\n            if (!choices.length) {\n              return;\n            }\n            const current = choices.indexOf(\n              document.activeElement as HTMLElement,\n            );\n            const index =\n              event.key === \"Home\"\n                ? 0\n                : event.key === \"End\"\n                  ? choices.length - 1\n                  : (current +\n                      (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\"\n                        ? -1\n                        : 1) +\n                      choices.length) %\n                    choices.length;\n            event.preventDefault();\n            choices[index]?.focus();\n            choices[index]?.click();\n          },\n        },\n        composeRefs(ref, (node) => {\n          if (node) {\n            registry.set(group.id, node);\n          } else {\n            registry.delete(group.id);\n          }\n        }),\n      )}\n    </Context.Provider>\n  );\n});\ntype ChoiceState = {\n  choice: ChoiceModel;\n  selected: boolean;\n  disabled: boolean;\n  toggle: () => void;\n  /** Selected quantity (0 when unselected) and the choice's bounds. */\n  quantity: number;\n  min: number;\n  max: number;\n  setQuantity: (quantity: number) => void;\n};\nconst ChoiceView = memo(\n  forwardRef<\n    HTMLElement,\n    PartProps<ChoiceState> & {\n      choice: ChoiceModel;\n      selected: boolean;\n      single: boolean;\n      tabIndex: number;\n      quantity: number;\n      toggleChoice: (id: string) => void;\n      setChoiceQuantity: (id: string, quantity: number) => void;\n    }\n  >(function ChoiceView(\n    {\n      choice,\n      selected,\n      single,\n      tabIndex,\n      quantity,\n      toggleChoice,\n      setChoiceQuantity,\n      ...props\n    },\n    ref,\n  ) {\n    const toggle = () => toggleChoice(choice.id);\n    const state = {\n      choice,\n      selected,\n      disabled: !choice.isAvailable,\n      toggle,\n      quantity,\n      min: choice.quantity?.min ?? 1,\n      max: choice.quantity?.max ?? 99,\n      setQuantity: (next: number) => setChoiceQuantity(choice.id, next),\n    };\n    return part(\n      \"button\",\n      props,\n      state,\n      {\n        type: \"button\",\n        role: single ? \"radio\" : \"checkbox\",\n        tabIndex,\n        \"aria-checked\": selected,\n        \"aria-disabled\": !choice.isAvailable,\n        disabled: !choice.isAvailable,\n        \"data-selected\": flag(selected),\n        \"data-sold-out\": flag(!choice.isAvailable),\n        \"data-disabled\": flag(!choice.isAvailable),\n        \"data-state\": selected ? \"checked\" : \"unchecked\",\n        \"data-zappie-option\": choice.id,\n        onClick: toggle,\n      },\n      ref,\n    );\n  }),\n);\n/**\n * Render a selectable option within an OptionGroup, with radio or checkbox semantics.\n * Exposes selection and quantity controls and disables unavailable choices.\n */\nexport const Choice = forwardRef<\n  HTMLElement,\n  PartProps<ChoiceState> & { choice: ChoiceModel }\n>(function Choice(props, ref) {\n  const ctx = useGroup();\n  const single = ctx.group.selection.max === 1;\n  const selected = ctx.selected.includes(props.choice.id);\n  const first = ctx.group.choices.find((choice) => choice.isAvailable);\n  const tabIndex =\n    !single ||\n    selected ||\n    (!ctx.selected.length && first?.id === props.choice.id)\n      ? 0\n      : -1;\n  return (\n    <ChoiceView\n      {...props}\n      ref={ref}\n      selected={selected}\n      single={single}\n      tabIndex={tabIndex}\n      quantity={ctx.quantities[props.choice.id] ?? 0}\n      toggleChoice={ctx.toggle}\n      setChoiceQuantity={ctx.setQuantity}\n    />\n  );\n});\nconst Input = forwardRef<HTMLElement, PartProps<GroupState>>(\n  function Input(props, ref) {\n    const ctx = useGroup();\n    const id = usePartId(props.id);\n    const toggle = ctx.group.kind === \"toggle\";\n    return part(\n      \"input\",\n      props,\n      ctx,\n      {\n        id,\n        type: toggle\n          ? \"checkbox\"\n          : ctx.group.kind === \"select\"\n            ? \"text\"\n            : ctx.group.kind,\n        value: toggle ? undefined : ctx.input,\n        checked: toggle ? ctx.input === \"true\" : undefined,\n        required: ctx.group.required,\n        \"aria-label\": ctx.group.name,\n        \"aria-invalid\": ctx.invalid || undefined,\n        \"data-invalid\": flag(ctx.invalid),\n        maxLength: ctx.group.input?.maxLength ?? 500,\n        placeholder: ctx.group.input?.placeholder,\n        onChange: (event: ChangeEvent<HTMLInputElement>) =>\n          ctx.setInput(\n            toggle ? String(event.target.checked) : event.target.value,\n          ),\n      },\n      ref,\n    );\n  },\n);\n/**\n * Group item options with selection rules, validation state and an Input part for typed responses.\n * Use within ItemForm.Root. Use Choice for options and OptionGroup.Input for typed responses.\n */\nexport const OptionGroup = Object.assign(Group, { Input });\n"],
+  "mappings": "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",
+  "names": ["ctx", "group", "ChoiceView", "Choice", "Input", "OptionGroup"]
+}

package/dist/item-form/options.js

@@ -0,0 +1,30 @@
+// src/item-form/options.tsx
+import { forwardRef } from "react";
+import { part } from "../internal/slot.js";
+import { useItemForm } from "./root.js";
+var Options = forwardRef(
+  function Options2(props, ref) {
+    return part("div", props, useItemForm(), {}, ref);
+  }
+);
+var Add = forwardRef(
+  function Add2(props, ref) {
+    const context = useItemForm();
+    return part(
+      "button",
+      props,
+      context,
+      {
+        type: "button",
+        onClick: context.add,
+        "data-zappie-action": "add-to-cart"
+      },
+      ref
+    );
+  }
+);
+export {
+  Add,
+  Options
+};
+//# sourceMappingURL=options.js.map

package/dist/item-form/options.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/item-form/options.tsx"],
+  "sourcesContent": ["import { forwardRef } from \"react\";\nimport { part, type PartProps } from \"../internal/slot\";\nimport { useItemForm, type ItemFormContext } from \"./root\";\nexport const Options = forwardRef<HTMLElement, PartProps<ItemFormContext>>(\n  function Options(props, ref) {\n    return part(\"div\", props, useItemForm(), {}, ref);\n  },\n);\nexport const Add = forwardRef<HTMLElement, PartProps<ItemFormContext>>(\n  function Add(props, ref) {\n    const context = useItemForm();\n    // Keep invalid configurations actionable so add() can explain and focus errors.\n    return part(\n      \"button\",\n      props,\n      context,\n      {\n        type: \"button\",\n        onClick: context.add,\n        \"data-zappie-action\": \"add-to-cart\",\n      },\n      ref,\n    );\n  },\n);\n"],
+  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAA4B;AACrC,SAAS,mBAAyC;AAC3C,IAAM,UAAU;AAAA,EACrB,SAASA,SAAQ,OAAO,KAAK;AAC3B,WAAO,KAAK,OAAO,OAAO,YAAY,GAAG,CAAC,GAAG,GAAG;AAAA,EAClD;AACF;AACO,IAAM,MAAM;AAAA,EACjB,SAASC,KAAI,OAAO,KAAK;AACvB,UAAM,UAAU,YAAY;AAE5B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS,QAAQ;AAAA,QACjB,sBAAsB;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["Options", "Add"]
+}

package/dist/item-form/quantity.js

@@ -0,0 +1,131 @@
+"use client";
+
+// src/item-form/quantity.tsx
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo
+} from "react";
+import { flag } from "../internal/data-attrs.js";
+import { part } from "../internal/slot.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { jsx } from "react/jsx-runtime";
+var Context = createContext(null);
+function useQuantity() {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("Quantity parts require Quantity.Root");
+  }
+  return context;
+}
+function Root({
+  value,
+  defaultValue,
+  onValueChange,
+  min = 1,
+  max = 99,
+  step = 1,
+  disabled = false,
+  ...props
+}) {
+  if (!Number.isFinite(min) || !Number.isFinite(max) || !Number.isFinite(step) || step <= 0 || min > max) {
+    throw new RangeError(
+      "Quantity requires finite ordered bounds and a positive step"
+    );
+  }
+  const [current, set] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? min,
+    onChange: onValueChange
+  });
+  const setValue = useCallback(
+    (next) => {
+      if (!disabled && Number.isFinite(next)) {
+        const last = min + Math.floor((max - min) / step) * step;
+        set(
+          Math.max(
+            min,
+            Math.min(last, min + Math.round((next - min) / step) * step)
+          )
+        );
+      }
+    },
+    [min, max, step, disabled, set]
+  );
+  const state = useMemo(
+    () => ({ value: current, setValue, min, max, step, disabled }),
+    [current, setValue, min, max, step, disabled]
+  );
+  return /* @__PURE__ */ jsx(Context.Provider, { value: state, children: part("div", props, state, { "data-disabled": flag(disabled) }) });
+}
+function button(direction) {
+  return forwardRef(
+    function QuantityButton(props, ref) {
+      const ctx = useQuantity();
+      const disabled = ctx.disabled || (direction < 0 ? ctx.value <= ctx.min : ctx.value + ctx.step > ctx.max);
+      return part(
+        "button",
+        props,
+        ctx,
+        {
+          type: "button",
+          disabled,
+          "aria-disabled": disabled,
+          "data-disabled": flag(disabled),
+          onClick: () => ctx.setValue(ctx.value + direction * ctx.step)
+        },
+        ref
+      );
+    }
+  );
+}
+var Value = forwardRef(
+  function Value2(props, ref) {
+    const ctx = useQuantity();
+    return part(
+      "input",
+      props,
+      ctx,
+      {
+        type: "text",
+        inputMode: "numeric",
+        role: "spinbutton",
+        value: String(ctx.value),
+        disabled: ctx.disabled,
+        "aria-valuenow": ctx.value,
+        "aria-valuemin": ctx.min,
+        "aria-valuemax": ctx.max,
+        onChange: (event) => {
+          if (event.target.value.trim()) {
+            ctx.setValue(Number(event.target.value));
+          }
+        },
+        onKeyDown: (event) => {
+          const next = {
+            ArrowUp: ctx.value + ctx.step,
+            ArrowDown: ctx.value - ctx.step,
+            Home: ctx.min,
+            End: ctx.max
+          }[event.key];
+          if (next !== void 0) {
+            event.preventDefault();
+            ctx.setValue(next);
+          }
+        }
+      },
+      ref
+    );
+  }
+);
+var Quantity = {
+  Root,
+  Value,
+  Increment: button(1),
+  Decrement: button(-1)
+};
+export {
+  Quantity
+};
+//# sourceMappingURL=quantity.js.map

package/dist/item-form/quantity.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/item-form/quantity.tsx"],
+  "sourcesContent": ["\"use client\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  type ChangeEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport { flag } from \"../internal/data-attrs\";\nimport { part, type PartProps } from \"../internal/slot\";\nimport { useControllableState } from \"../internal/use-controllable-state\";\n/**\n * The current quantity, bounds, step, disabled state and value setter exposed by a quantity control.\n */\nexport type QuantityState = {\n  value: number;\n  setValue: (value: number) => void;\n  min: number;\n  max: number;\n  step: number;\n  disabled: boolean;\n};\nconst Context = createContext<QuantityState | null>(null);\nfunction useQuantity() {\n  const context = useContext(Context);\n  if (!context) {\n    throw new Error(\"Quantity parts require Quantity.Root\");\n  }\n  return context;\n}\n/**\n * Controlled or default quantity, bounds and change callback for Quantity.Root.\n */\nexport type QuantityProps = PartProps<QuantityState> & {\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n};\nfunction Root({\n  value,\n  defaultValue,\n  onValueChange,\n  min = 1,\n  max = 99,\n  step = 1,\n  disabled = false,\n  ...props\n}: QuantityProps) {\n  if (\n    !Number.isFinite(min) ||\n    !Number.isFinite(max) ||\n    !Number.isFinite(step) ||\n    step <= 0 ||\n    min > max\n  ) {\n    throw new RangeError(\n      \"Quantity requires finite ordered bounds and a positive step\",\n    );\n  }\n  const [current, set] = useControllableState({\n    value,\n    defaultValue: defaultValue ?? min,\n    onChange: onValueChange,\n  });\n  const setValue = useCallback(\n    (next: number) => {\n      if (!disabled && Number.isFinite(next)) {\n        const last = min + Math.floor((max - min) / step) * step;\n        set(\n          Math.max(\n            min,\n            Math.min(last, min + Math.round((next - min) / step) * step),\n          ),\n        );\n      }\n    },\n    [min, max, step, disabled, set],\n  );\n  const state = useMemo(\n    () => ({ value: current, setValue, min, max, step, disabled }),\n    [current, setValue, min, max, step, disabled],\n  );\n  return (\n    <Context.Provider value={state}>\n      {part(\"div\", props, state, { \"data-disabled\": flag(disabled) })}\n    </Context.Provider>\n  );\n}\nfunction button(direction: -1 | 1) {\n  return forwardRef<HTMLElement, PartProps<QuantityState>>(\n    function QuantityButton(props, ref) {\n      const ctx = useQuantity();\n      const disabled =\n        ctx.disabled ||\n        (direction < 0 ? ctx.value <= ctx.min : ctx.value + ctx.step > ctx.max);\n      return part(\n        \"button\",\n        props,\n        ctx,\n        {\n          type: \"button\",\n          disabled,\n          \"aria-disabled\": disabled,\n          \"data-disabled\": flag(disabled),\n          onClick: () => ctx.setValue(ctx.value + direction * ctx.step),\n        },\n        ref,\n      );\n    },\n  );\n}\nconst Value = forwardRef<HTMLElement, PartProps<QuantityState>>(\n  function Value(props, ref) {\n    const ctx = useQuantity();\n    return part(\n      \"input\",\n      props,\n      ctx,\n      {\n        type: \"text\",\n        inputMode: \"numeric\",\n        role: \"spinbutton\",\n        value: String(ctx.value),\n        disabled: ctx.disabled,\n        \"aria-valuenow\": ctx.value,\n        \"aria-valuemin\": ctx.min,\n        \"aria-valuemax\": ctx.max,\n        onChange: (event: ChangeEvent<HTMLInputElement>) => {\n          if (event.target.value.trim()) {\n            ctx.setValue(Number(event.target.value));\n          }\n        },\n        onKeyDown: (event: KeyboardEvent) => {\n          const next = {\n            ArrowUp: ctx.value + ctx.step,\n            ArrowDown: ctx.value - ctx.step,\n            Home: ctx.min,\n            End: ctx.max,\n          }[event.key];\n          if (next !== undefined) {\n            event.preventDefault();\n            ctx.setValue(next);\n          }\n        },\n      },\n      ref,\n    );\n  },\n);\n/**\n * Composable quantity controls with bounded step changes and keyboard support.\n * Wrap Value, Increment and Decrement in Quantity.Root.\n *\n * @example\n * ```tsx\n * <Quantity.Root min={1} max={10} defaultValue={1}>\n *   <Quantity.Decrement>Less</Quantity.Decrement>\n *   <Quantity.Value aria-label=\"Quantity\" />\n *   <Quantity.Increment>More</Quantity.Increment>\n * </Quantity.Root>\n * ```\n */\nexport const Quantity = {\n  Root,\n  Value,\n  Increment: button(1),\n  Decrement: button(-1),\n};\n"],
+  "mappings": ";;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,YAAY;AACrB,SAAS,YAA4B;AACrC,SAAS,4BAA4B;AA6EjC;AAjEJ,IAAM,UAAU,cAAoC,IAAI;AACxD,SAAS,cAAc;AACrB,QAAM,UAAU,WAAW,OAAO;AAClC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,sCAAsC;AAAA,EACxD;AACA,SAAO;AACT;AAaA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,GAAG;AACL,GAAkB;AAChB,MACE,CAAC,OAAO,SAAS,GAAG,KACpB,CAAC,OAAO,SAAS,GAAG,KACpB,CAAC,OAAO,SAAS,IAAI,KACrB,QAAQ,KACR,MAAM,KACN;AACA,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,CAAC,SAAS,GAAG,IAAI,qBAAqB;AAAA,IAC1C;AAAA,IACA,cAAc,gBAAgB;AAAA,IAC9B,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,WAAW;AAAA,IACf,CAAC,SAAiB;AAChB,UAAI,CAAC,YAAY,OAAO,SAAS,IAAI,GAAG;AACtC,cAAM,OAAO,MAAM,KAAK,OAAO,MAAM,OAAO,IAAI,IAAI;AACpD;AAAA,UACE,KAAK;AAAA,YACH;AAAA,YACA,KAAK,IAAI,MAAM,MAAM,KAAK,OAAO,OAAO,OAAO,IAAI,IAAI,IAAI;AAAA,UAC7D;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,KAAK,KAAK,MAAM,UAAU,GAAG;AAAA,EAChC;AACA,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,OAAO,SAAS,UAAU,KAAK,KAAK,MAAM,SAAS;AAAA,IAC5D,CAAC,SAAS,UAAU,KAAK,KAAK,MAAM,QAAQ;AAAA,EAC9C;AACA,SACE,oBAAC,QAAQ,UAAR,EAAiB,OAAO,OACtB,eAAK,OAAO,OAAO,OAAO,EAAE,iBAAiB,KAAK,QAAQ,EAAE,CAAC,GAChE;AAEJ;AACA,SAAS,OAAO,WAAmB;AACjC,SAAO;AAAA,IACL,SAAS,eAAe,OAAO,KAAK;AAClC,YAAM,MAAM,YAAY;AACxB,YAAM,WACJ,IAAI,aACH,YAAY,IAAI,IAAI,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,OAAO,IAAI;AACrE,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACE,MAAM;AAAA,UACN;AAAA,UACA,iBAAiB;AAAA,UACjB,iBAAiB,KAAK,QAAQ;AAAA,UAC9B,SAAS,MAAM,IAAI,SAAS,IAAI,QAAQ,YAAY,IAAI,IAAI;AAAA,QAC9D;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AACA,IAAM,QAAQ;AAAA,EACZ,SAASA,OAAM,OAAO,KAAK;AACzB,UAAM,MAAM,YAAY;AACxB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,WAAW;AAAA,QACX,MAAM;AAAA,QACN,OAAO,OAAO,IAAI,KAAK;AAAA,QACvB,UAAU,IAAI;AAAA,QACd,iBAAiB,IAAI;AAAA,QACrB,iBAAiB,IAAI;AAAA,QACrB,iBAAiB,IAAI;AAAA,QACrB,UAAU,CAAC,UAAyC;AAClD,cAAI,MAAM,OAAO,MAAM,KAAK,GAAG;AAC7B,gBAAI,SAAS,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA,UACzC;AAAA,QACF;AAAA,QACA,WAAW,CAAC,UAAyB;AACnC,gBAAM,OAAO;AAAA,YACX,SAAS,IAAI,QAAQ,IAAI;AAAA,YACzB,WAAW,IAAI,QAAQ,IAAI;AAAA,YAC3B,MAAM,IAAI;AAAA,YACV,KAAK,IAAI;AAAA,UACX,EAAE,MAAM,GAAG;AACX,cAAI,SAAS,QAAW;AACtB,kBAAM,eAAe;AACrB,gBAAI,SAAS,IAAI;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAcO,IAAM,WAAW;AAAA,EACtB;AAAA,EACA;AAAA,EACA,WAAW,OAAO,CAAC;AAAA,EACnB,WAAW,OAAO,EAAE;AACtB;",
+  "names": ["Value"]
+}