@ngrok/mantle 0.73.3 → 0.73.4

package/dist/otp-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","names":["AsChildSlot"],"sources":["../src/components/otp-input/otp-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { MinusIcon } from \"@phosphor-icons/react/Minus\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { $cssProperties } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { FieldControlContext } from \"../field/field-context.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { Validation, WithValidation } from \"../field/validation.js\";\nimport { Slot as AsChildSlot } from \"../slot/index.js\";\n\ntype OtpState = \"idle\" | \"caret\" | \"range\" | \"all\";\n\n/**\n * The color token name (`danger` / `success` / `warning`) that backs each\n * validation value. The `Validation` vocabulary (`\"error\"` / `\"success\"` /\n * `\"warning\"`) doesn't exactly match the color-token vocabulary — the\n * `error` validation maps to the `danger` color hue.\n */\ntype ValidationHue = \"danger\" | \"success\" | \"warning\";\n\nconst validationHues = {\n\terror: \"danger\",\n\tsuccess: \"success\",\n\twarning: \"warning\",\n} as const satisfies Record<Exclude<Validation, false>, ValidationHue>;\n\nconst validationBorderColor = <T extends ValidationHue = ValidationHue>(hue: T) =>\n\t`var(--color-${hue}-600)`;\n\nconst validationRingColor = <T extends ValidationHue = ValidationHue>(hue: T) =>\n\t`var(--ring-color-focus-${hue})`;\n\n/**\n * Map the count of active slots to a discrete `data-otp-state` value used by\n * descendant CSS selectors. Split out from the rendering component so the\n * decision tree reads as a flat `if`/`else` chain rather than a nested\n * ternary.\n */\nconst computeOtpState = ({\n\ttotalActive,\n\ttotal,\n}: {\n\ttotalActive: number;\n\ttotal: number;\n}): OtpState => {\n\tif (totalActive === 0) {\n\t\treturn \"idle\";\n\t}\n\tif (totalActive === 1) {\n\t\treturn \"caret\";\n\t}\n\tif (totalActive === total) {\n\t\treturn \"all\";\n\t}\n\treturn \"range\";\n};\n\n/**\n * Bridge component that lives inside `<OTPInput>` (so it can read\n * `OTPInputContext`) and exposes the current selection state as a DOM data\n * attribute. Descendant `OtpInput.Group` / `OtpInput.Slot` parts read this\n * via Tailwind's `group-data-*` selector, so all conditional styling lives\n * in CSS — no React context.\n *\n * `data-otp-state` is one of:\n * - `\"idle\"` — no slot active (input not focused)\n * - `\"caret\"` — exactly one slot active (typing caret)\n * - `\"range\"` — multiple but not all slots active (partial selection)\n * - `\"all\"` — every slot active (cmd+a / select-all)\n */\nconst MantleOtpBridge = ({\n\tchildren,\n\tvalidation,\n}: {\n\tchildren: ReactNode;\n\tvalidation?: Validation;\n}) => {\n\tconst inputOtpContext = useContext(OTPInputContext);\n\tconst total = inputOtpContext.slots.length;\n\tconst totalActive = inputOtpContext.slots.reduce(\n\t\t(count, slot) => count + (slot.isActive ? 1 : 0),\n\t\t0,\n\t);\n\tconst otpState = computeOtpState({ totalActive, total });\n\n\t// Map the validation hue to two CSS custom properties — descendant\n\t// slot/group classes reference these vars instead of having one\n\t// branch per validation value. When no validation is set, the vars\n\t// are left undefined and the validation utilities (gated on\n\t// `group-data-validation`) don't apply.\n\tconst hue = validation ? validationHues[validation] : undefined;\n\tconst validationStyle = hue\n\t\t? $cssProperties({\n\t\t\t\t\"--otp-validation-border\": validationBorderColor(hue),\n\t\t\t\t\"--otp-validation-ring\": validationRingColor(hue),\n\t\t\t})\n\t\t: undefined;\n\n\t// `display: contents` keeps this element in the DOM tree (so `group/`\n\t// ancestor selectors resolve) without producing a layout box.\n\treturn (\n\t\t<div\n\t\t\tclassName=\"group/otp contents\"\n\t\t\tdata-otp-state={otpState}\n\t\t\tdata-validation={validation || undefined}\n\t\t\tstyle={validationStyle}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\n// Drop the `render` / `children?: never` branch of input-otp's discriminated\n// union — `OtpInput.Root` always wraps its children in `MantleOtpBridge`,\n// so consumers compose with `OtpInput.Group` / `OtpInput.Slot` children\n// rather than a render prop.\ntype OtpInputRootProps = Omit<ComponentProps<typeof OTPInput>, \"render\" | \"children\"> &\n\tWithValidation & {\n\t\tchildren?: ReactNode;\n\t};\n\n/**\n * The root of the OTP input. Renders an accessible single hidden input that\n * captures keystrokes, paste events, and autofill, and exposes per-slot state\n * (active, char, fake caret) to descendant `OtpInput.Slot` parts via context.\n *\n * Wraps the `input-otp` library by Guilherme Rodz.\n *\n * Pass `validation=\"error\"` (or `\"success\"` / `\"warning\"`) to recolor each\n * group's outer borders and the active focus ring with the matching validation hue.\n * `validation=\"error\"` also sets `aria-invalid` on the underlying input so\n * assistive tech announces the failure state.\n *\n * When composing with `Field.Item`, wrap `OtpInput.Root` in `Field.Control`.\n * `Field.Control` flows the generated `id`, `aria-invalid`, `aria-describedby`,\n * and `aria-errormessage` through to the underlying focusable input via\n * `FieldControlContext`.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\n// `OtpInput.Root` does not support `asChild`: the underlying `OTPInput`\n// owns its hidden `<input>` and its render contract — swapping the element\n// would break input-otp's internal focus and selection management.\nconst Root = forwardRef<ComponentRef<typeof OTPInput>, OtpInputRootProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tcontainerClassName,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst fieldValidation = useFieldValidation();\n\t\tconst fieldControl = useContext(FieldControlContext);\n\t\tconst { ariaInvalid: resolvedAriaInvalid, validation } = parseValidation({\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\tdefaultAriaInvalid: false,\n\t\t\tvalidation: _validation ?? fieldValidation,\n\t\t});\n\n\t\treturn (\n\t\t\t<OTPInput\n\t\t\t\tref={ref}\n\t\t\t\taria-invalid={resolvedAriaInvalid}\n\t\t\t\tdata-slot=\"otp-input\"\n\t\t\t\tcontainerClassName={cx(\n\t\t\t\t\t\"flex items-center gap-2 has-disabled:opacity-50\",\n\t\t\t\t\tcontainerClassName,\n\t\t\t\t)}\n\t\t\t\tclassName={cx(\"disabled:cursor-not-allowed\", className)}\n\t\t\t\t{...props}\n\t\t\t\t{...(fieldControl\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t\"aria-describedby\": fieldControl[\"aria-describedby\"],\n\t\t\t\t\t\t\t\"aria-errormessage\": fieldControl[\"aria-errormessage\"],\n\t\t\t\t\t\t\tid: fieldControl.id,\n\t\t\t\t\t\t\tname: fieldControl.name,\n\t\t\t\t\t\t}\n\t\t\t\t\t: undefined)}\n\t\t\t>\n\t\t\t\t<MantleOtpBridge validation={validation}>{children}</MantleOtpBridge>\n\t\t\t</OTPInput>\n\t\t);\n\t},\n);\nRoot.displayName = \"OtpInput\";\n\ntype OtpInputGroupProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * Groups one or more `OtpInput.Slot` parts into a visually-connected segment.\n * Slots inside a group share rounded corners on the outer edges and join with\n * shared borders between adjacent slots.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst Group = forwardRef<HTMLDivElement, OtpInputGroupProps>(\n\t({ asChild, children, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? AsChildSlot : \"div\";\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-group\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative flex items-center rounded-md\",\n\t\t\t\t\t// A \"range\" selection within this group means two or more\n\t\t\t\t\t// slots are simultaneously active. CSS `:has()` with the\n\t\t\t\t\t// general sibling combinator catches that without us\n\t\t\t\t\t// having to count: if any active slot is preceded by\n\t\t\t\t\t// another active slot at the same nesting level, the\n\t\t\t\t\t// group has at least 2 actives → draw the ring.\n\t\t\t\t\t\"has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4\",\n\t\t\t\t\t// Validation override for the group-level range/all ring.\n\t\t\t\t\t// `--otp-validation-ring` is set on the bridge based on\n\t\t\t\t\t// the validation value, so a single class covers\n\t\t\t\t\t// error/success/warning instead of one per hue.\n\t\t\t\t\t\"group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t);\n\t},\n);\nGroup.displayName = \"OtpInputGroup\";\n\ntype OtpInputSlotProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The zero-based index of the character slot to render. Must be a valid\n\t * index within the parent `OtpInput.Root`'s `maxLength`.\n\t */\n\tindex: number;\n};\n\n/**\n * Renders a single character slot for the OTP input. Reads its display state\n * (the typed character, active/focused state, and fake caret position) from\n * the nearest `OtpInput.Root` via context — so this part must always be\n * rendered inside an `OtpInput.Root`.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\n// `OtpInput.Slot` does not support `asChild`: the slot reads context-driven\n// state (char, fake caret, active) from `OTPInputContext` and renders that\n// state into a fixed visual structure. Letting consumers swap the element\n// would lose the caret overlay and the active-ring focus styling.\nconst OtpInputSlotImpl = forwardRef<HTMLDivElement, OtpInputSlotProps>(\n\t({ className, index, ...props }, ref) => {\n\t\tconst context = useContext(OTPInputContext);\n\t\tconst slot = context.slots[index];\n\t\tconst char = slot?.char ?? null;\n\t\tconst hasFakeCaret = slot?.hasFakeCaret ?? false;\n\t\tconst isActive = slot?.isActive ?? false;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-slot\"\n\t\t\t\tdata-active={isActive ? \"\" : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out\",\n\t\t\t\t\t\"first:rounded-l-md first:border-l last:rounded-r-md\",\n\t\t\t\t\t// When this slot is immediately followed by the caret\n\t\t\t\t\t// slot, hide our `border-r` so the active slot's\n\t\t\t\t\t// `border-l` is the only line at the boundary — without\n\t\t\t\t\t// this, the two adjacent 1px borders read as a doubled\n\t\t\t\t\t// edge. We use an arbitrary `&:has(+ ...)` variant\n\t\t\t\t\t// because Tailwind's `has-[...]` shorthand doesn't\n\t\t\t\t\t// parse the nested bracketed attribute selector here.\n\t\t\t\t\t\"[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent\",\n\t\t\t\t\t// Per-slot ring renders only in `caret` state (single\n\t\t\t\t\t// active slot). When more than one slot is active, the\n\t\t\t\t\t// surrounding `OtpInput.Group` draws a single ring\n\t\t\t\t\t// around the whole group — see Group's `:has()` rule.\n\t\t\t\t\t// We also recolor the slot's own borders to accent and\n\t\t\t\t\t// fill in `border-l` (groups normally only render\n\t\t\t\t\t// `border-l` on `:first-child`), so the slot reads as\n\t\t\t\t\t// one cohesive highlighted box rather than a ring with\n\t\t\t\t\t// a gray box inside.\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:border-accent-600\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:border-l\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:ring-focus-accent\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:z-20\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:ring-4\",\n\t\t\t\t\t// Select-all: tint *every* border on the slot accent.\n\t\t\t\t\t// Tinting only the outside edges leaves the internal\n\t\t\t\t\t// vertical divider (gray `border-r`) meeting the\n\t\t\t\t\t// accent top/bottom borders at the corner, producing a\n\t\t\t\t\t// visible 1px miter spike. Coloring all borders the\n\t\t\t\t\t// same accent-600 hue makes the corner blend\n\t\t\t\t\t// seamlessly while still keeping the slot grid\n\t\t\t\t\t// readable at full opacity.\n\t\t\t\t\t\"group-data-[otp-state=all]/otp:border-accent-600\",\n\t\t\t\t\t// Validation overrides. Only the *outer* edges of the\n\t\t\t\t\t// group are tinted (top + bottom on every slot, left on\n\t\t\t\t\t// the first slot, right on the last slot) so adjacent\n\t\t\t\t\t// slots still join with a neutral divider — matching how\n\t\t\t\t\t// `Input` tints the container border, not the internal\n\t\t\t\t\t// elements. The all-state and caret-active overrides\n\t\t\t\t\t// still recolor every border so a fully-active slot or\n\t\t\t\t\t// select-all reads as a solid tinted box. The bridge\n\t\t\t\t\t// sets `--otp-validation-{border,ring}` per validation\n\t\t\t\t\t// value, so a single set of classes covers\n\t\t\t\t\t// error/success/warning.\n\t\t\t\t\t\"group-data-validation/otp:border-y-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:first:border-l-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:last:border-r-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)\",\n\t\t\t\t\t\"group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{char}\n\t\t\t\t{hasFakeCaret && (\n\t\t\t\t\t<div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n\t\t\t\t\t\t<div className=\"bg-strong h-4 w-px animate-pulse\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nOtpInputSlotImpl.displayName = \"OtpInputSlot\";\n\ntype OtpInputSeparatorProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * If `true`, the separator will be rendered with `role=\"separator\"` so\n\t\t * assistive tech announces it as a divider between OTP groups.\n\t\t * If `false`, the separator is purely decorative and is removed from\n\t\t * the accessibility tree — preferred inside an OTP control where the\n\t\t * minus icon is just visual chrome between slot groups.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsemantic?: boolean;\n\t};\n\n/**\n * A visual separator between two `OtpInput.Group` segments. Renders a minus\n * icon by default; pass `children` to override the visual.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst Separator = forwardRef<HTMLDivElement, OtpInputSeparatorProps>(\n\t({ asChild, children, className, semantic = false, ...props }, ref) => {\n\t\tconst Comp = asChild ? AsChildSlot : \"div\";\n\t\tconst semanticProps = semantic ? { role: \"separator\" } : { \"aria-hidden\": true, role: \"none\" };\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-separator\"\n\t\t\t\tclassName={cx(\"text-muted flex items-center\", className)}\n\t\t\t\t{...semanticProps}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children ?? <MinusIcon weight=\"bold\" />}\n\t\t\t</Comp>\n\t\t);\n\t},\n);\nSeparator.displayName = \"OtpInputSeparator\";\n\n/**\n * Compound component for capturing one-time passcodes (OTP). Combines a\n * single hidden input (handling paste, autofill, and IME) with a row of\n * styled character slots.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * Composition:\n * ```\n * OtpInput.Root\n * ├── OtpInput.Group\n * │   └── OtpInput.Slot\n * ├── OtpInput.Separator\n * └── OtpInput.Group\n *     └── OtpInput.Slot\n * ```\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst OtpInput = {\n\t/**\n\t * The root of the OTP input. Wraps the hidden input that captures\n\t * keystrokes, paste, and autofill, and provides per-slot state to\n\t * descendant `OtpInput.Slot` parts.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Groups one or more `OtpInput.Slot` parts into a visually-connected\n\t * segment with shared rounded corners and joined borders.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * A single character slot. Must be rendered inside an `OtpInput.Root`.\n\t * Reads its character, active state, and fake caret position from the\n\t * root via context.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tSlot: OtpInputSlotImpl,\n\t/**\n\t * A visual separator between two `OtpInput.Group` segments. Renders a\n\t * minus icon by default; pass `children` to override.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tSeparator,\n} as const;\n\nexport {\n\t//,\n\tOtpInput,\n};\n\nexport {\n\t//,\n\tREGEXP_ONLY_CHARS,\n\tREGEXP_ONLY_DIGITS,\n\tREGEXP_ONLY_DIGITS_AND_CHARS,\n} from \"input-otp\";\n"],"mappings":"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"}
+{"version":3,"file":"otp-input.js","names":["AsChildSlot"],"sources":["../src/components/otp-input/otp-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { MinusIcon } from \"@phosphor-icons/react/Minus\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { $cssProperties } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { FieldControlContext } from \"../field/field-context.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { Validation, WithValidation } from \"../field/validation.js\";\nimport { Slot as AsChildSlot } from \"../slot/index.js\";\n\ntype OtpState = \"idle\" | \"caret\" | \"range\" | \"all\";\n\n/**\n * The color token name (`danger` / `success` / `warning`) that backs each\n * validation value. The `Validation` vocabulary (`\"error\"` / `\"success\"` /\n * `\"warning\"`) doesn't exactly match the color-token vocabulary — the\n * `error` validation maps to the `danger` color hue.\n */\ntype ValidationHue = \"danger\" | \"success\" | \"warning\";\n\nconst validationHues = {\n\terror: \"danger\",\n\tsuccess: \"success\",\n\twarning: \"warning\",\n} as const satisfies Record<Exclude<Validation, false>, ValidationHue>;\n\nconst validationBorderColor = <T extends ValidationHue = ValidationHue>(hue: T) =>\n\t`var(--color-${hue}-600)`;\n\nconst validationRingColor = <T extends ValidationHue = ValidationHue>(hue: T) =>\n\t`var(--ring-color-focus-${hue})`;\n\n/**\n * Map the count of active slots to a discrete `data-otp-state` value used by\n * descendant CSS selectors. Split out from the rendering component so the\n * decision tree reads as a flat `if`/`else` chain rather than a nested\n * ternary.\n */\nconst computeOtpState = ({\n\ttotalActive,\n\ttotal,\n}: {\n\ttotalActive: number;\n\ttotal: number;\n}): OtpState => {\n\tif (totalActive === 0) {\n\t\treturn \"idle\";\n\t}\n\tif (totalActive === 1) {\n\t\treturn \"caret\";\n\t}\n\tif (totalActive === total) {\n\t\treturn \"all\";\n\t}\n\treturn \"range\";\n};\n\n/**\n * Bridge component that lives inside `<OTPInput>` (so it can read\n * `OTPInputContext`) and exposes the current selection state as a DOM data\n * attribute. Descendant `OtpInput.Group` / `OtpInput.Slot` parts read this\n * via Tailwind's `group-data-*` selector, so all conditional styling lives\n * in CSS — no React context.\n *\n * `data-otp-state` is one of:\n * - `\"idle\"` — no slot active (input not focused)\n * - `\"caret\"` — exactly one slot active (typing caret)\n * - `\"range\"` — multiple but not all slots active (partial selection)\n * - `\"all\"` — every slot active (cmd+a / select-all)\n */\nconst MantleOtpBridge = ({\n\tchildren,\n\tvalidation,\n}: {\n\tchildren: ReactNode;\n\tvalidation?: Validation;\n}) => {\n\tconst inputOtpContext = useContext(OTPInputContext);\n\tconst total = inputOtpContext.slots.length;\n\tconst totalActive = inputOtpContext.slots.reduce(\n\t\t(count, slot) => count + (slot.isActive ? 1 : 0),\n\t\t0,\n\t);\n\tconst otpState = computeOtpState({ totalActive, total });\n\n\t// Map the validation hue to two CSS custom properties — descendant\n\t// slot/group classes reference these vars instead of having one\n\t// branch per validation value. When no validation is set, the vars\n\t// are left undefined and the validation utilities (gated on\n\t// `group-data-validation`) don't apply.\n\tconst hue = validation ? validationHues[validation] : undefined;\n\tconst validationStyle = hue\n\t\t? $cssProperties({\n\t\t\t\t\"--otp-validation-border\": validationBorderColor(hue),\n\t\t\t\t\"--otp-validation-ring\": validationRingColor(hue),\n\t\t\t})\n\t\t: undefined;\n\n\t// `display: contents` keeps this element in the DOM tree (so `group/`\n\t// ancestor selectors resolve) without producing a layout box.\n\treturn (\n\t\t<div\n\t\t\tclassName=\"group/otp contents\"\n\t\t\tdata-otp-state={otpState}\n\t\t\tdata-validation={validation || undefined}\n\t\t\tstyle={validationStyle}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\n// Drop the `render` / `children?: never` branch of input-otp's discriminated\n// union — `OtpInput.Root` always wraps its children in `MantleOtpBridge`,\n// so consumers compose with `OtpInput.Group` / `OtpInput.Slot` children\n// rather than a render prop.\ntype OtpInputRootProps = Omit<ComponentProps<typeof OTPInput>, \"render\" | \"children\"> &\n\tWithValidation & {\n\t\tchildren?: ReactNode;\n\t};\n\n/**\n * The root of the OTP input. Renders an accessible single hidden input that\n * captures keystrokes, paste events, and autofill, and exposes per-slot state\n * (active, char, fake caret) to descendant `OtpInput.Slot` parts via context.\n *\n * Wraps the `input-otp` library by Guilherme Rodz.\n *\n * Pass `validation=\"error\"` (or `\"success\"` / `\"warning\"`) to recolor each\n * group's outer borders and the active focus ring with the matching validation hue.\n * `validation=\"error\"` also sets `aria-invalid` on the underlying input so\n * assistive tech announces the failure state.\n *\n * When composing with `Field.Item`, wrap `OtpInput.Root` in `Field.Control`.\n * `Field.Control` flows the generated `id`, `aria-invalid`, `aria-describedby`,\n * and `aria-errormessage` through to the underlying focusable input via\n * `FieldControlContext`.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\n// `OtpInput.Root` does not support `asChild`: the underlying `OTPInput`\n// owns its hidden `<input>` and its render contract — swapping the element\n// would break input-otp's internal focus and selection management.\nconst Root = forwardRef<ComponentRef<typeof OTPInput>, OtpInputRootProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tcontainerClassName,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst fieldValidation = useFieldValidation();\n\t\tconst fieldControl = useContext(FieldControlContext);\n\t\tconst { ariaInvalid: resolvedAriaInvalid, validation } = parseValidation({\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\tdefaultAriaInvalid: false,\n\t\t\tvalidation: _validation ?? fieldValidation,\n\t\t});\n\n\t\treturn (\n\t\t\t<OTPInput\n\t\t\t\tref={ref}\n\t\t\t\taria-invalid={resolvedAriaInvalid}\n\t\t\t\tdata-slot=\"otp-input\"\n\t\t\t\tcontainerClassName={cx(\n\t\t\t\t\t\"flex items-center gap-2 has-disabled:opacity-50\",\n\t\t\t\t\tcontainerClassName,\n\t\t\t\t)}\n\t\t\t\tclassName={cx(\"disabled:cursor-not-allowed\", className)}\n\t\t\t\t{...props}\n\t\t\t\t{...(fieldControl\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t\"aria-describedby\": fieldControl[\"aria-describedby\"],\n\t\t\t\t\t\t\t\"aria-errormessage\": fieldControl[\"aria-errormessage\"],\n\t\t\t\t\t\t\tid: fieldControl.id,\n\t\t\t\t\t\t\tname: fieldControl.name,\n\t\t\t\t\t\t}\n\t\t\t\t\t: undefined)}\n\t\t\t>\n\t\t\t\t<MantleOtpBridge validation={validation}>{children}</MantleOtpBridge>\n\t\t\t</OTPInput>\n\t\t);\n\t},\n);\nRoot.displayName = \"OtpInput\";\n\ntype OtpInputGroupProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * Groups one or more `OtpInput.Slot` parts into a visually-connected segment.\n * Slots inside a group share rounded corners on the outer edges and join with\n * shared borders between adjacent slots.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst Group = forwardRef<HTMLDivElement, OtpInputGroupProps>(\n\t({ asChild, children, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? AsChildSlot : \"div\";\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-group\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative flex items-center rounded-md\",\n\t\t\t\t\t// A \"range\" selection within this group means two or more\n\t\t\t\t\t// slots are simultaneously active. CSS `:has()` with the\n\t\t\t\t\t// general sibling combinator catches that without us\n\t\t\t\t\t// having to count: if any active slot is preceded by\n\t\t\t\t\t// another active slot at the same nesting level, the\n\t\t\t\t\t// group has at least 2 actives → draw the ring.\n\t\t\t\t\t\"has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4\",\n\t\t\t\t\t// Validation override for the group-level range/all ring.\n\t\t\t\t\t// `--otp-validation-ring` is set on the bridge based on\n\t\t\t\t\t// the validation value, so a single class covers\n\t\t\t\t\t// error/success/warning instead of one per hue.\n\t\t\t\t\t\"group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t);\n\t},\n);\nGroup.displayName = \"OtpInputGroup\";\n\ntype OtpInputSlotProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The zero-based index of the character slot to render. Must be a valid\n\t * index within the parent `OtpInput.Root`'s `maxLength`.\n\t */\n\tindex: number;\n};\n\n/**\n * Renders a single character slot for the OTP input. Reads its display state\n * (the typed character, active/focused state, and fake caret position) from\n * the nearest `OtpInput.Root` via context — so this part must always be\n * rendered inside an `OtpInput.Root`.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\n// `OtpInput.Slot` does not support `asChild`: the slot reads context-driven\n// state (char, fake caret, active) from `OTPInputContext` and renders that\n// state into a fixed visual structure. Letting consumers swap the element\n// would lose the caret overlay and the active-ring focus styling.\nconst OtpInputSlotImpl = forwardRef<HTMLDivElement, OtpInputSlotProps>(\n\t({ className, index, ...props }, ref) => {\n\t\tconst context = useContext(OTPInputContext);\n\t\tconst slot = context.slots[index];\n\t\tconst char = slot?.char ?? null;\n\t\tconst hasFakeCaret = slot?.hasFakeCaret ?? false;\n\t\tconst isActive = slot?.isActive ?? false;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-slot\"\n\t\t\t\tdata-active={isActive ? \"\" : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out\",\n\t\t\t\t\t\"first:rounded-l-md first:border-l last:rounded-r-md\",\n\t\t\t\t\t// When this slot is immediately followed by the caret\n\t\t\t\t\t// slot, hide our `border-r` so the active slot's\n\t\t\t\t\t// `border-l` is the only line at the boundary — without\n\t\t\t\t\t// this, the two adjacent 1px borders read as a doubled\n\t\t\t\t\t// edge. We use an arbitrary `&:has(+ ...)` variant\n\t\t\t\t\t// because Tailwind's `has-[...]` shorthand doesn't\n\t\t\t\t\t// parse the nested bracketed attribute selector here.\n\t\t\t\t\t\"[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent\",\n\t\t\t\t\t// Per-slot ring renders only in `caret` state (single\n\t\t\t\t\t// active slot). When more than one slot is active, the\n\t\t\t\t\t// surrounding `OtpInput.Group` draws a single ring\n\t\t\t\t\t// around the whole group — see Group's `:has()` rule.\n\t\t\t\t\t// We also recolor the slot's own borders to accent and\n\t\t\t\t\t// fill in `border-l` (groups normally only render\n\t\t\t\t\t// `border-l` on `:first-child`), so the slot reads as\n\t\t\t\t\t// one cohesive highlighted box rather than a ring with\n\t\t\t\t\t// a gray box inside.\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:border-accent-600\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:border-l\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:ring-focus-accent\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:z-20\",\n\t\t\t\t\t\"data-active:group-data-[otp-state=caret]/otp:ring-4\",\n\t\t\t\t\t// Select-all: tint *every* border on the slot accent.\n\t\t\t\t\t// Tinting only the outside edges leaves the internal\n\t\t\t\t\t// vertical divider (gray `border-r`) meeting the\n\t\t\t\t\t// accent top/bottom borders at the corner, producing a\n\t\t\t\t\t// visible 1px miter spike. Coloring all borders the\n\t\t\t\t\t// same accent-600 hue makes the corner blend\n\t\t\t\t\t// seamlessly while still keeping the slot grid\n\t\t\t\t\t// readable at full opacity.\n\t\t\t\t\t\"group-data-[otp-state=all]/otp:border-accent-600\",\n\t\t\t\t\t// Validation overrides. Only the *outer* edges of the\n\t\t\t\t\t// group are tinted (top + bottom on every slot, left on\n\t\t\t\t\t// the first slot, right on the last slot) so adjacent\n\t\t\t\t\t// slots still join with a neutral divider — matching how\n\t\t\t\t\t// `Input` tints the container border, not the internal\n\t\t\t\t\t// elements. The all-state and caret-active overrides\n\t\t\t\t\t// still recolor every border so a fully-active slot or\n\t\t\t\t\t// select-all reads as a solid tinted box. The bridge\n\t\t\t\t\t// sets `--otp-validation-{border,ring}` per validation\n\t\t\t\t\t// value, so a single set of classes covers\n\t\t\t\t\t// error/success/warning.\n\t\t\t\t\t\"group-data-validation/otp:border-y-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:first:border-l-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:last:border-r-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)\",\n\t\t\t\t\t\"group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)\",\n\t\t\t\t\t\"group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{char}\n\t\t\t\t{hasFakeCaret && (\n\t\t\t\t\t<div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n\t\t\t\t\t\t<div className=\"bg-strong h-4 w-px animate-pulse\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nOtpInputSlotImpl.displayName = \"OtpInputSlot\";\n\ntype OtpInputSeparatorProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * If `true`, the separator will be rendered with `role=\"separator\"` so\n\t\t * assistive tech announces it as a divider between OTP groups.\n\t\t * If `false`, the separator is purely decorative and is removed from\n\t\t * the accessibility tree — preferred inside an OTP control where the\n\t\t * minus icon is just visual chrome between slot groups.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsemantic?: boolean;\n\t};\n\n/**\n * A visual separator between two `OtpInput.Group` segments. Renders a minus\n * icon by default; pass `children` to override the visual.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst Separator = forwardRef<HTMLDivElement, OtpInputSeparatorProps>(\n\t({ asChild, children, className, semantic = false, ...props }, ref) => {\n\t\tconst Comp = asChild ? AsChildSlot : \"div\";\n\t\tconst semanticProps = semantic ? { role: \"separator\" } : { \"aria-hidden\": true, role: \"none\" };\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"otp-input-separator\"\n\t\t\t\tclassName={cx(\"text-muted flex items-center\", className)}\n\t\t\t\t{...semanticProps}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children ?? <MinusIcon weight=\"bold\" />}\n\t\t\t</Comp>\n\t\t);\n\t},\n);\nSeparator.displayName = \"OtpInputSeparator\";\n\n/**\n * Compound component for capturing one-time passcodes (OTP). Combines a\n * single hidden input (handling paste, autofill, and IME) with a row of\n * styled character slots.\n *\n * @see https://mantle.ngrok.com/components/otp-input\n *\n * @example\n * Composition:\n * ```\n * OtpInput.Root\n * ├── OtpInput.Group\n * │   └── OtpInput.Slot\n * ├── OtpInput.Separator\n * └── OtpInput.Group\n *     └── OtpInput.Slot\n * ```\n *\n * @example\n * ```tsx\n * <OtpInput.Root maxLength={6}>\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={0} />\n *     <OtpInput.Slot index={1} />\n *     <OtpInput.Slot index={2} />\n *   </OtpInput.Group>\n *   <OtpInput.Separator />\n *   <OtpInput.Group>\n *     <OtpInput.Slot index={3} />\n *     <OtpInput.Slot index={4} />\n *     <OtpInput.Slot index={5} />\n *   </OtpInput.Group>\n * </OtpInput.Root>\n * ```\n */\nconst OtpInput = {\n\t/**\n\t * The root of the OTP input. Wraps the hidden input that captures\n\t * keystrokes, paste, and autofill, and provides per-slot state to\n\t * descendant `OtpInput.Slot` parts.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Groups one or more `OtpInput.Slot` parts into a visually-connected\n\t * segment with shared rounded corners and joined borders.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * A single character slot. Must be rendered inside an `OtpInput.Root`.\n\t * Reads its character, active state, and fake caret position from the\n\t * root via context.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tSlot: OtpInputSlotImpl,\n\t/**\n\t * A visual separator between two `OtpInput.Group` segments. Renders a\n\t * minus icon by default; pass `children` to override.\n\t *\n\t * @see https://mantle.ngrok.com/components/otp-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <OtpInput.Root maxLength={6}>\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={0} />\n\t *     <OtpInput.Slot index={1} />\n\t *     <OtpInput.Slot index={2} />\n\t *   </OtpInput.Group>\n\t *   <OtpInput.Separator />\n\t *   <OtpInput.Group>\n\t *     <OtpInput.Slot index={3} />\n\t *     <OtpInput.Slot index={4} />\n\t *     <OtpInput.Slot index={5} />\n\t *   </OtpInput.Group>\n\t * </OtpInput.Root>\n\t * ```\n\t */\n\tSeparator,\n} as const;\n\nexport {\n\t//,\n\tOtpInput,\n};\n\nexport {\n\t//,\n\tREGEXP_ONLY_CHARS,\n\tREGEXP_ONLY_DIGITS,\n\tREGEXP_ONLY_DIGITS_AND_CHARS,\n} from \"input-otp\";\n"],"mappings":"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"}

package/dist/pagination.d.ts

@@ -1,9 +1,7 @@
-import { t as WithAsChild } from "./as-child-CpZKMqTE.js";
-import { t as ButtonGroup } from "./index-CWXKBva-.js";
-import { t as Select } from "./select-SZFFzYs0.js";
-import * as _$react from "react";
+import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as ButtonGroup } from "./index-DBZ3eRsl.js";
+import { t as Select } from "./select-C15-XvRT.js";
 import { ComponentProps } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/pagination/cursor-pagination.d.ts
 type CursorPaginationProps = ComponentProps<"div"> & {
@@ -59,7 +57,7 @@ declare function PageSizeValue({
   asChild,
   className,
   ...props
-}: CursorPageSizeValueProps): _$react_jsx_runtime0.JSX.Element;
+}: CursorPageSizeValueProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageSizeValue {
   var displayName: string;
 }
@@ -115,7 +113,7 @@ declare const CursorPagination: {
    * </CursorPagination.Root>
    * ```
    */
-  readonly Root: _$react.ForwardRefExoticComponent<Omit<CursorPaginationProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Root: import("react").ForwardRefExoticComponent<Omit<CursorPaginationProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * A pair of buttons for navigating between pages of data when using cursor-based pagination.
    *
@@ -131,7 +129,7 @@ declare const CursorPagination: {
    * />
    * ```
    */
-  readonly Buttons: _$react.ForwardRefExoticComponent<Omit<CursorButtonsProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Buttons: import("react").ForwardRefExoticComponent<Omit<CursorButtonsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * A select input for changing the number of items per page when using cursor-based pagination.
    *
@@ -145,7 +143,7 @@ declare const CursorPagination: {
    * />
    * ```
    */
-  readonly PageSizeSelect: _$react.ForwardRefExoticComponent<Omit<CursorPageSizeSelectProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+  readonly PageSizeSelect: import("react").ForwardRefExoticComponent<Omit<CursorPageSizeSelectProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   /**
    * Displays the current page size when using cursor-based pagination as a read-only value.
    *

package/dist/pagination.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{t as n}from"./icon-button-ZKN0sRIJ.js";import{t as r}from"./button-POMJ-20y.js";import{n as i}from"./separator-awchG4LI.js";import{t as a}from"./select-B7orOUPj.js";import{createContext as o,forwardRef as s,useContext as c,useEffect as l,useState as u}from"react";import d from"tiny-invariant";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{CaretLeftIcon as m}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as h}from"@phosphor-icons/react/CaretRight";const g=o(void 0),_=s(({className:t,children:n,defaultPageSize:r,...i},a)=>{let[o,s]=u(r);return f(g.Provider,{value:{defaultPageSize:r,pageSize:o,setPageSize:s},children:f(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:a,...i,children:n})})});_.displayName=`CursorPagination`;const v=s(({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,...s},c)=>p(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:c,...s,children:[f(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:f(m,{}),label:`Previous page`,onClick:o,size:`sm`,type:`button`}),f(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),f(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:f(h,{}),label:`Next page`,onClick:a,size:`sm`,type:`button`})]}));v.displayName=`CursorButtons`;const y=[5,10,20,50,100],b=s(({className:t,pageSizes:n=y,onChangePageSize:r,...i},o)=>{let s=c(g);return d(s,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),d(n.includes(s.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),d(n.includes(s.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),p(a.Root,{defaultValue:`${s.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=s.defaultPageSize),s.setPageSize(t),r?.(t)},children:[f(a.Trigger,{ref:o,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:s.pageSize,...i,children:f(a.Value,{})}),f(a.Content,{width:`trigger`,children:n.map(e=>p(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})});b.displayName=`CursorPageSizeSelect`;function x({asChild:n=!1,className:r,...i}){let a=c(g);return d(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),p(n?t:`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,r),...i,children:[a.pageSize,` per page`]})}x.displayName=`CursorPageSizeValue`;const S={Root:_,Buttons:v,PageSizeSelect:b,PageSizeValue:x};function C({listSize:e,pageSize:t}){let[n,r]=u(1),[i,a]=u(t);l(()=>{a(t),r(1)},[t]),l(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,c=n>1,d=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){d&&r(e=>Math.min(e+1,o))}function m(){c&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:d,hasPreviousPage:c,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function w(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{S as CursorPagination,w as getOffsetPaginatedSlice,C as useOffsetPagination};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./slot-CV5fmqFr.js";import{t as n}from"./icon-button-C_Ht_g1C.js";import{t as r}from"./button-BAxneEMu.js";import{n as i}from"./separator-Bqjy77rG.js";import{t as a}from"./select-Cxc9VmP8.js";import{createContext as o,forwardRef as s,useContext as c,useEffect as l,useMemo as u,useState as d}from"react";import f from"tiny-invariant";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{CaretLeftIcon as h}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as g}from"@phosphor-icons/react/CaretRight";const _=o(void 0),v=s(({className:t,children:n,defaultPageSize:r,...i},a)=>{let[o,s]=d(r),c=u(()=>({defaultPageSize:r,pageSize:o,setPageSize:s}),[r,o]);return p(_.Provider,{value:c,children:p(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:a,...i,children:n})})});v.displayName=`CursorPagination`;const y=s(({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,...s},c)=>m(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:c,...s,children:[p(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:p(h,{}),label:`Previous page`,onClick:o,size:`sm`,type:`button`}),p(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),p(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:p(g,{}),label:`Next page`,onClick:a,size:`sm`,type:`button`})]}));y.displayName=`CursorButtons`;const b=[5,10,20,50,100],x=s(({className:t,pageSizes:n=b,onChangePageSize:r,...i},o)=>{let s=c(_);return f(s,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),f(n.includes(s.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),f(n.includes(s.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),m(a.Root,{defaultValue:`${s.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=s.defaultPageSize),s.setPageSize(t),r?.(t)},children:[p(a.Trigger,{ref:o,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:s.pageSize,...i,children:p(a.Value,{})}),p(a.Content,{width:`trigger`,children:n.map(e=>m(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})});x.displayName=`CursorPageSizeSelect`;function S({asChild:n=!1,className:r,...i}){let a=c(_);return f(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),m(n?t:`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,r),...i,children:[a.pageSize,` per page`]})}S.displayName=`CursorPageSizeValue`;const C={Root:v,Buttons:y,PageSizeSelect:x,PageSizeValue:S};function w({listSize:e,pageSize:t}){let[n,r]=d(1),[i,a]=d(t);l(()=>{a(t),r(1)},[t]),l(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,c=n>1,u=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){u&&r(e=>Math.min(e+1,o))}function m(){c&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:u,hasPreviousPage:c,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function T(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{C as CursorPagination,T as getOffsetPaginatedSlice,w as useOffsetPagination};
 //# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":[],"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { ButtonGroup, IconButton } from \"../button/index.js\";\nimport { Select } from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<CursorPaginationContextValue | undefined>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst Root = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider value={{ defaultPageSize, pageSize, setPageSize }}>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"cursor-pagination\"\n\t\t\t\t\tclassName={cx(\"inline-flex items-center justify-between gap-2\", className)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, \"appearance\"> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons\n *\n * @example\n * ```tsx\n * <CursorPagination.Buttons\n *   hasNextPage={hasNext}\n *   hasPreviousPage={hasPrevious}\n *   onNextPage={() => loadNextPage()}\n *   onPreviousPage={() => loadPreviousPage()}\n * />\n * ```\n */\nconst Buttons = forwardRef<ComponentRef<typeof ButtonGroup>, CursorButtonsProps>(\n\t({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props }, ref) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup data-slot=\"cursor-pagination-buttons\" appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-slot=\"cursor-pagination-previous\"\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeftIcon />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator\n\t\t\t\t\tdata-slot=\"cursor-pagination-separator\"\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\tclassName=\"min-h-5\"\n\t\t\t\t/>\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-slot=\"cursor-pagination-next\"\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRightIcon />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, \"children\"> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect\n *\n * @example\n * ```tsx\n * <CursorPagination.PageSizeSelect\n *   pageSizes={[10, 20, 50, 100]}\n *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n * />\n * ```\n */\nconst PageSizeSelect = forwardRef<ComponentRef<typeof Select.Trigger>, CursorPageSizeSelectProps>(\n\t({ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest }, ref) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(ctx, \"CursorPageSizeSelect must be used as a child of a CursorPagination component\");\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select.Root\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Select.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-slot=\"cursor-pagination-page-size-select\"\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<Select.Value />\n\t\t\t\t</Select.Trigger>\n\t\t\t\t<Select.Content width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<Select.Item key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</Select.Item>\n\t\t\t\t\t))}\n\t\t\t\t</Select.Content>\n\t\t\t</Select.Root>\n\t\t);\n\t},\n);\nPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> & WithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue\n *\n * @example\n * ```tsx\n * <div className=\"flex items-center gap-2\">\n *   <span>Items per page:</span>\n *   <CursorPagination.PageSizeValue />\n * </div>\n * ```\n */\nfunction PageSizeValue({ asChild = false, className, ...props }: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(ctx, \"CursorPageSizeValue must be used as a child of a CursorPagination component\");\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tdata-slot=\"cursor-pagination-page-size-value\"\n\t\t\tclassName={cx(\"text-muted text-sm font-normal\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{ctx.pageSize} per page\n\t\t</Component>\n\t);\n}\nPageSizeValue.displayName = \"CursorPageSizeValue\";\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/pagination\n *\n * @example\n * Composition:\n * ```\n * CursorPagination.Root\n * ├── CursorPagination.PageSizeSelect\n * ├── CursorPagination.PageSizeValue\n * └── CursorPagination.Buttons\n * ```\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst CursorPagination = {\n\t/**\n\t * The root container of the cursor pagination component.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Root defaultPageSize={10}>\n\t *   <CursorPagination.Buttons\n\t *     hasNextPage={hasNext}\n\t *     hasPreviousPage={hasPrevious}\n\t *     onNextPage={handleNext}\n\t *     onPreviousPage={handlePrevious}\n\t *   />\n\t *   <CursorPagination.PageSizeSelect />\n\t * </CursorPagination.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Buttons\n\t *   hasNextPage={hasNext}\n\t *   hasPreviousPage={hasPrevious}\n\t *   onNextPage={() => loadNextPage()}\n\t *   onPreviousPage={() => loadPreviousPage()}\n\t * />\n\t * ```\n\t */\n\tButtons,\n\t/**\n\t * A select input for changing the number of items per page when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.PageSizeSelect\n\t *   pageSizes={[10, 20, 50, 100]}\n\t *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n\t * />\n\t * ```\n\t */\n\tPageSizeSelect,\n\t/**\n\t * Displays the current page size when using cursor-based pagination as a read-only value.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <div className=\"flex items-center gap-2\">\n\t *   <span>Items per page:</span>\n\t *   <CursorPagination.PageSizeValue />\n\t * </div>\n\t * ```\n\t */\n\tPageSizeValue,\n} as const;\n\nexport {\n\t//,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n *\n * @example\n * ```tsx\n * const pagination = useOffsetPagination({\n *   listSize: 150,\n *   pageSize: 10\n * });\n *\n * return (\n *   <div>\n *     <p>Page {pagination.currentPage} of {pagination.totalPages}</p>\n *     <button onClick={pagination.previousPage} disabled={!pagination.hasPreviousPage}>\n *       Previous\n *     </button>\n *     <button onClick={pagination.nextPage} disabled={!pagination.hasNextPage}>\n *       Next\n *     </button>\n *   </div>\n * );\n * ```\n */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst clampedPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(clampedPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n *\n * @example\n * ```tsx\n * const data = ['a', 'b', 'c', 'd', 'e', 'f'];\n * const pagination = useOffsetPagination({ listSize: data.length, pageSize: 2 });\n * const currentPageData = getOffsetPaginatedSlice(data, pagination);\n * // Returns: ['a', 'b'] for page 1, ['c', 'd'] for page 2, etc.\n * ```\n */\nfunction getOffsetPaginatedSlice<T>(list: readonly T[], pagination: OffsetPaginationState): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { ButtonGroup, IconButton } from \"../button/index.js\";\nimport { Select } from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<CursorPaginationContextValue | undefined>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst Root = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\t\tconst contextValue = useMemo(\n\t\t\t() => ({ defaultPageSize, pageSize, setPageSize }),\n\t\t\t[defaultPageSize, pageSize],\n\t\t);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider value={contextValue}>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"cursor-pagination\"\n\t\t\t\t\tclassName={cx(\"inline-flex items-center justify-between gap-2\", className)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, \"appearance\"> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons\n *\n * @example\n * ```tsx\n * <CursorPagination.Buttons\n *   hasNextPage={hasNext}\n *   hasPreviousPage={hasPrevious}\n *   onNextPage={() => loadNextPage()}\n *   onPreviousPage={() => loadPreviousPage()}\n * />\n * ```\n */\nconst Buttons = forwardRef<ComponentRef<typeof ButtonGroup>, CursorButtonsProps>(\n\t({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props }, ref) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup data-slot=\"cursor-pagination-buttons\" appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-slot=\"cursor-pagination-previous\"\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeftIcon />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator\n\t\t\t\t\tdata-slot=\"cursor-pagination-separator\"\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\tclassName=\"min-h-5\"\n\t\t\t\t/>\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-slot=\"cursor-pagination-next\"\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRightIcon />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, \"children\"> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect\n *\n * @example\n * ```tsx\n * <CursorPagination.PageSizeSelect\n *   pageSizes={[10, 20, 50, 100]}\n *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n * />\n * ```\n */\nconst PageSizeSelect = forwardRef<ComponentRef<typeof Select.Trigger>, CursorPageSizeSelectProps>(\n\t({ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest }, ref) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(ctx, \"CursorPageSizeSelect must be used as a child of a CursorPagination component\");\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select.Root\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Select.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-slot=\"cursor-pagination-page-size-select\"\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<Select.Value />\n\t\t\t\t</Select.Trigger>\n\t\t\t\t<Select.Content width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<Select.Item key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</Select.Item>\n\t\t\t\t\t))}\n\t\t\t\t</Select.Content>\n\t\t\t</Select.Root>\n\t\t);\n\t},\n);\nPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> & WithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue\n *\n * @example\n * ```tsx\n * <div className=\"flex items-center gap-2\">\n *   <span>Items per page:</span>\n *   <CursorPagination.PageSizeValue />\n * </div>\n * ```\n */\nfunction PageSizeValue({ asChild = false, className, ...props }: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(ctx, \"CursorPageSizeValue must be used as a child of a CursorPagination component\");\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tdata-slot=\"cursor-pagination-page-size-value\"\n\t\t\tclassName={cx(\"text-muted text-sm font-normal\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{ctx.pageSize} per page\n\t\t</Component>\n\t);\n}\nPageSizeValue.displayName = \"CursorPageSizeValue\";\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/pagination\n *\n * @example\n * Composition:\n * ```\n * CursorPagination.Root\n * ├── CursorPagination.PageSizeSelect\n * ├── CursorPagination.PageSizeValue\n * └── CursorPagination.Buttons\n * ```\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst CursorPagination = {\n\t/**\n\t * The root container of the cursor pagination component.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Root defaultPageSize={10}>\n\t *   <CursorPagination.Buttons\n\t *     hasNextPage={hasNext}\n\t *     hasPreviousPage={hasPrevious}\n\t *     onNextPage={handleNext}\n\t *     onPreviousPage={handlePrevious}\n\t *   />\n\t *   <CursorPagination.PageSizeSelect />\n\t * </CursorPagination.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Buttons\n\t *   hasNextPage={hasNext}\n\t *   hasPreviousPage={hasPrevious}\n\t *   onNextPage={() => loadNextPage()}\n\t *   onPreviousPage={() => loadPreviousPage()}\n\t * />\n\t * ```\n\t */\n\tButtons,\n\t/**\n\t * A select input for changing the number of items per page when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.PageSizeSelect\n\t *   pageSizes={[10, 20, 50, 100]}\n\t *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n\t * />\n\t * ```\n\t */\n\tPageSizeSelect,\n\t/**\n\t * Displays the current page size when using cursor-based pagination as a read-only value.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <div className=\"flex items-center gap-2\">\n\t *   <span>Items per page:</span>\n\t *   <CursorPagination.PageSizeValue />\n\t * </div>\n\t * ```\n\t */\n\tPageSizeValue,\n} as const;\n\nexport {\n\t//,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n *\n * @example\n * ```tsx\n * const pagination = useOffsetPagination({\n *   listSize: 150,\n *   pageSize: 10\n * });\n *\n * return (\n *   <div>\n *     <p>Page {pagination.currentPage} of {pagination.totalPages}</p>\n *     <button onClick={pagination.previousPage} disabled={!pagination.hasPreviousPage}>\n *       Previous\n *     </button>\n *     <button onClick={pagination.nextPage} disabled={!pagination.hasNextPage}>\n *       Next\n *     </button>\n *   </div>\n * );\n * ```\n */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst clampedPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(clampedPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n *\n * @example\n * ```tsx\n * const data = ['a', 'b', 'c', 'd', 'e', 'f'];\n * const pagination = useOffsetPagination({ listSize: data.length, pageSize: 2 });\n * const currentPageData = getOffsetPaginatedSlice(data, pagination);\n * // Returns: ['a', 'b'] for page 1, ['c', 'd'] for page 2, etc.\n * ```\n */\nfunction getOffsetPaginatedSlice<T>(list: readonly T[], pagination: OffsetPaginationState): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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"}

package/dist/{popover-CoZxokw_.js → popover-DponNBot.js}

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-popover";const i=r.Root;i.displayName=`Popover`;const a=r.Trigger;a.displayName=`PopoverTrigger`;const o=r.Anchor;o.displayName=`PopoverAnchor`;const s=r.Close;s.displayName=`PopoverClose`;const c=t(({align:t=`center`,className:i,onClick:a,preferredWidth:o=`max-w-72`,sideOffset:s=4,...c},l)=>n(r.Portal,{children:n(r.Content,{align:t,"data-slot":`popover-content`,className:e(`text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden`,o,i),onClick:e=>{e.stopPropagation(),a?.(e)},ref:l,sideOffset:s,...c})}));c.displayName=`PopoverContent`;const l={Root:i,Anchor:o,Close:s,Content:c,Trigger:a};export{l as t};
-//# sourceMappingURL=popover-CoZxokw_.js.map
+import{t as e}from"./cx-CBSnSC36.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-popover";const i=r.Root;i.displayName=`Popover`;const a=r.Trigger;a.displayName=`PopoverTrigger`;const o=r.Anchor;o.displayName=`PopoverAnchor`;const s=r.Close;s.displayName=`PopoverClose`;const c=t(({align:t=`center`,className:i,onClick:a,preferredWidth:o=`max-w-72`,sideOffset:s=4,...c},l)=>n(r.Portal,{children:n(r.Content,{align:t,"data-slot":`popover-content`,className:e(`text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden`,o,i),onClick:e=>{e.stopPropagation(),a?.(e)},ref:l,sideOffset:s,...c})}));c.displayName=`PopoverContent`;const l={Root:i,Anchor:o,Close:s,Content:c,Trigger:a};export{l as t};
+//# sourceMappingURL=popover-DponNBot.js.map

package/dist/{popover-CoZxokw_.js.map → popover-DponNBot.js.map}

@@ -1 +1 @@
-{"version":3,"file":"popover-CoZxokw_.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverroot\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovertrigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#popoveranchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Anchor asChild>\n *     <div>Anchor element</div>\n *   </Popover.Anchor>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverclose\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *     <Popover.Close asChild>\n *       <Button type=\"button\">Close</Button>\n *     </Popover.Close>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovercontent\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tdata-slot=\"popover-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nContent.displayName = \"PopoverContent\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n *\n * Use `Popover` for INTERACTIVE overlay content — small forms, settings\n * menus, color pickers, action lists. The user opens it deliberately\n * (click/tap or focus + space). For short, non-interactive label hints\n * triggered by hover, use `Tooltip` instead. For non-essential preview\n * content shown on hover, use `HoverCard`.\n *\n * `Popover` is a non-modal dialog by default: focus moves into the content\n * when it opens, `Escape` closes and returns focus to the trigger, clicking\n * outside dismisses, and the page (body and any scroll containers) continues\n * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside\n * the content, block interaction with the rest of the page, and lock body\n * scroll while the popover is open.\n *\n * @see https://mantle.ngrok.com/components/popover\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @example\n * Composition:\n * ```\n * Popover.Root\n * ├── Popover.Trigger\n * ├── Popover.Anchor\n * └── Popover.Content\n *     └── Popover.Close\n * ```\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button>Open popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This is the popover content.</p>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoveranchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Anchor asChild>\n\t *     <div>Position relative to this element</div>\n\t *   </Popover.Anchor>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This popover is positioned relative to the anchor.</p>\n\t *     <Popover.Close asChild>\n\t *       <Button type=\"button\">Close</Button>\n\t *     </Popover.Close>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Settings</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"flex items-center justify-between\">\n\t *       <Text>Settings Panel</Text>\n\t *       <Popover.Close asChild>\n\t *         <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t *       </Popover.Close>\n\t *     </div>\n\t *     <Text>Configure your preferences here.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovercontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Show Info</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content side=\"top\" align=\"center\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">Additional Information</Text>\n\t *       <Text>This is the content inside the popover.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Action</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovertrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Options\n\t *     </Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"space-y-2\">\n\t *       <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t *       <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"0JAyBA,MAAM,EAAO,EAAiB,KAC9B,EAAK,YAAc,UAqBnB,MAAM,EAAU,EAAiB,QACjC,EAAQ,YAAc,iBAwBtB,MAAM,EAAS,EAAiB,OAChC,EAAO,YAAc,gBAwBrB,MAAM,EAAQ,EAAiB,MAC/B,EAAM,YAAc,eAiCpB,MAAM,EAAU,GAEd,CAEC,QAAQ,SACR,YACA,UACA,iBAAiB,WACjB,aAAa,EACb,GAAG,GAEJ,IAEA,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACQ,QACP,YAAU,kBACV,UAAW,EACV,qaACA,EACA,EACA,CACD,QAAU,GAAU,CAKnB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEZ,MACO,aACZ,GAAI,EACH,CAAA,CACuB,CAAA,CAE3B,CACD,EAAQ,YAAc,iBA6CtB,MAAM,EAAU,CAkBf,OAwBA,SAwBA,QAsBA,UAuBA,UACA"}
+{"version":3,"file":"popover-DponNBot.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverroot\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovertrigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#popoveranchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Anchor asChild>\n *     <div>Anchor element</div>\n *   </Popover.Anchor>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverclose\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *     <Popover.Close asChild>\n *       <Button type=\"button\">Close</Button>\n *     </Popover.Close>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovercontent\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tdata-slot=\"popover-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nContent.displayName = \"PopoverContent\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n *\n * Use `Popover` for INTERACTIVE overlay content — small forms, settings\n * menus, color pickers, action lists. The user opens it deliberately\n * (click/tap or focus + space). For short, non-interactive label hints\n * triggered by hover, use `Tooltip` instead. For non-essential preview\n * content shown on hover, use `HoverCard`.\n *\n * `Popover` is a non-modal dialog by default: focus moves into the content\n * when it opens, `Escape` closes and returns focus to the trigger, clicking\n * outside dismisses, and the page (body and any scroll containers) continues\n * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside\n * the content, block interaction with the rest of the page, and lock body\n * scroll while the popover is open.\n *\n * @see https://mantle.ngrok.com/components/popover\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @example\n * Composition:\n * ```\n * Popover.Root\n * ├── Popover.Trigger\n * ├── Popover.Anchor\n * └── Popover.Content\n *     └── Popover.Close\n * ```\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button>Open popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This is the popover content.</p>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoveranchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Anchor asChild>\n\t *     <div>Position relative to this element</div>\n\t *   </Popover.Anchor>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This popover is positioned relative to the anchor.</p>\n\t *     <Popover.Close asChild>\n\t *       <Button type=\"button\">Close</Button>\n\t *     </Popover.Close>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Settings</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"flex items-center justify-between\">\n\t *       <Text>Settings Panel</Text>\n\t *       <Popover.Close asChild>\n\t *         <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t *       </Popover.Close>\n\t *     </div>\n\t *     <Text>Configure your preferences here.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovercontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Show Info</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content side=\"top\" align=\"center\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">Additional Information</Text>\n\t *       <Text>This is the content inside the popover.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Action</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovertrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Options\n\t *     </Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"space-y-2\">\n\t *       <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t *       <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"0JAyBA,MAAM,EAAO,EAAiB,KAC9B,EAAK,YAAc,UAqBnB,MAAM,EAAU,EAAiB,QACjC,EAAQ,YAAc,iBAwBtB,MAAM,EAAS,EAAiB,OAChC,EAAO,YAAc,gBAwBrB,MAAM,EAAQ,EAAiB,MAC/B,EAAM,YAAc,eAiCpB,MAAM,EAAU,GAEd,CAEC,QAAQ,SACR,YACA,UACA,iBAAiB,WACjB,aAAa,EACb,GAAG,GAEJ,IAEA,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACQ,QACP,YAAU,kBACV,UAAW,EACV,qaACA,EACA,CACD,EACA,QAAU,GAAU,CAKnB,EAAM,gBAAgB,EACtB,IAAU,CAAK,CAChB,EACK,MACO,aACZ,GAAI,CACJ,CAAA,CACuB,CAAA,CAE3B,EACA,EAAQ,YAAc,iBA6CtB,MAAM,EAAU,CAkBf,OAwBA,SAwBA,QAsBA,UAuBA,SACD"}

package/dist/popover.d.ts

@@ -1,4 +1,3 @@
-import * as _$react from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 //#region src/components/popover/popover.d.ts
@@ -63,7 +62,7 @@ declare const Popover: {
    * </Popover.Root>
    * ```
    */
-  readonly Root: _$react.FC<PopoverPrimitive.PopoverProps>;
+  readonly Root: import("react").FC<PopoverPrimitive.PopoverProps>;
   /**
    * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.
    *
@@ -87,7 +86,7 @@ declare const Popover: {
    * </Popover.Root>
    * ```
    */
-  readonly Anchor: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Anchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * A button that closes an open popover. Can be placed anywhere within the popover content.
    *
@@ -111,7 +110,7 @@ declare const Popover: {
    * </Popover.Root>
    * ```
    */
-  readonly Close: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & _$react.RefAttributes<HTMLButtonElement>>;
+  readonly Close: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
   /**
    * The content to render inside the popover. Appears in a portal with rich styling and animations.
    *
@@ -133,7 +132,7 @@ declare const Popover: {
    * </Popover.Root>
    * ```
    */
-  readonly Content: _$react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & {
+  readonly Content: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     /**
      * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.
      *
@@ -143,7 +142,7 @@ declare const Popover: {
      * @default `max-w-72`
      */
     preferredWidth?: `max-w-${string}`;
-  } & _$react.RefAttributes<HTMLDivElement>>;
+  } & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The trigger button that opens the popover when clicked or focused.
    *
@@ -166,7 +165,7 @@ declare const Popover: {
    * </Popover.Root>
    * ```
    */
-  readonly Trigger: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+  readonly Trigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion
 export { Popover };

package/dist/popover.js

@@ -1 +1 @@
-import{t as e}from"./popover-CoZxokw_.js";export{e as Popover};
+import{t as e}from"./popover-DponNBot.js";export{e as Popover};

package/dist/primitive-Cn3h4DJg.js

@@ -0,0 +1,2 @@
+import{t as e}from"./booleanish-BfvnW6vy.js";import{t}from"./slot-CV5fmqFr.js";import{i as n}from"./toast-CR3MVChj.js";import{createContext as r,forwardRef as i,useContext as a,useEffect as o,useMemo as s,useState as c}from"react";import{jsx as l}from"react/jsx-runtime";import*as u from"@radix-ui/react-dialog";const d=r({hasDescription:!1,setHasDescription:()=>{}});function f(e){let[t,n]=c(!1),r=s(()=>({hasDescription:t,setHasDescription:n}),[t]);return l(d.Provider,{value:r,children:l(u.Root,{...e})})}f.displayName=`DialogPrimitiveRoot`;const p=u.Trigger;p.displayName=`DialogPrimitiveTrigger`;const m=u.Portal;m.displayName=`DialogPrimitivePortal`;const h=u.Close;h.displayName=`DialogPrimitiveClose`;const g=i((e,t)=>l(u.Overlay,{"data-overlay":!0,ref:t,...e}));g.displayName=`DialogPrimitiveOverlay`;const _=i(({onEscapeKeyDown:e,onInteractOutside:t,onPointerDownOutside:r,...i},o)=>{let s=a(d);return l(u.Content,{ref:o,onEscapeKeyDown:t=>{x(t),e?.(t)},onInteractOutside:e=>{n(e),t?.(e)},onPointerDownOutside:e=>{n(e),r?.(e)},...s.hasDescription?{}:{"aria-describedby":void 0},...i})});_.displayName=`DialogPrimitiveContent`;const v=u.Title,y=i(({asChild:e,children:n,...r},i)=>{let s=a(d);o(()=>(s.setHasDescription(!0),()=>s.setHasDescription(!1)),[s]);let c=e?t:`div`;return l(u.Description,{ref:i,asChild:!0,children:l(c,{...r,children:n})})});y.displayName=`DialogPrimitiveDescription`;function b(e){return e instanceof HTMLElement?e.hasAttribute(`data-overlay`):!1}function x(t){if(!T(t.currentTarget))return;let n=t.currentTarget,r=n instanceof Document?n.activeElement:n.ownerDocument?.activeElement??null,i=S(t.target)??S(r),a=i?C(i):null;i!=null&&e(i.getAttribute(`aria-expanded`))&&a!=null&&n.contains(i)&&n.contains(a)&&(a.getAttribute(`data-open`)===`true`||a.getAttribute(`data-state`)===`open`)&&t.preventDefault()}function S(e){return w(e)?e.closest(`[aria-expanded='true'][aria-controls]`):null}function C(e){let t=e.getAttribute(`aria-controls`);if(!t)return null;let n=e.ownerDocument.getElementById(t);return n instanceof HTMLElement?n:null}function w(e){return e instanceof HTMLElement}function T(e){return e instanceof Node&&`querySelector`in e}export{m as a,p as c,g as i,b as l,_ as n,f as o,y as r,v as s,h as t};
+//# sourceMappingURL=primitive-Cn3h4DJg.js.map

package/dist/primitive-Cn3h4DJg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitive-Cn3h4DJg.js","names":[],"sources":["../src/components/dialog/primitive.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n} from \"react\";\nimport { Slot } from \"../slot/index.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\n\ntype DialogPrimitiveContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\n\ntype InternalDialogContextValue = {\n\thasDescription: boolean;\n\tsetHasDescription: (value: boolean) => void;\n};\n\nconst InternalDialogContext = createContext<InternalDialogContextValue>({\n\thasDescription: false,\n\tsetHasDescription: () => {},\n});\n\nfunction Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n\tconst [hasDescription, setHasDescription] = useState(false);\n\tconst contextValue = useMemo(() => ({ hasDescription, setHasDescription }), [hasDescription]);\n\n\treturn (\n\t\t<InternalDialogContext.Provider value={contextValue}>\n\t\t\t<DialogPrimitive.Root {...props} />\n\t\t</InternalDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"DialogPrimitiveRoot\";\n\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogPrimitiveTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPrimitivePortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogPrimitiveClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>((props, ref) => (\n\t<DialogPrimitive.Overlay\n\t\t/**\n\t\t * Mark the overlay with a data attribute so we can target it, e.g. in\n\t\t * event handlers\n\t\t */\n\t\tdata-overlay\n\t\tref={ref}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogPrimitiveOverlay\";\n\nconst Content = forwardRef<ComponentRef<\"div\">, DialogPrimitiveContentProps>(\n\t({ onEscapeKeyDown, onInteractOutside, onPointerDownOutside, ...props }, ref) => {\n\t\tconst ctx = useContext(InternalDialogContext);\n\n\t\treturn (\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tonEscapeKeyDown={(event) => {\n\t\t\t\t\tpreventCloseOnNestedPopupEscape(event);\n\t\t\t\t\tonEscapeKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t// If there's no description, we remove the default applied aria-describedby attribute from radix dialog\n\t\t\t\t{...(!ctx.hasDescription ? { \"aria-describedby\": undefined } : {})}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nContent.displayName = \"DialogPrimitiveContent\";\n\nconst Title = DialogPrimitive.Title;\n\n/**\n * An accessible description for the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n * Renders as a `div` by default, but can be changed to any other element using the `asChild` prop.\n */\nconst Description = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ asChild, children, ...props }, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\tuseEffect(() => {\n\t\tctx.setHasDescription(true);\n\t\treturn () => ctx.setHasDescription(false);\n\t}, [ctx]);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<DialogPrimitive.Description ref={ref} asChild>\n\t\t\t<Component {...props}>{children}</Component>\n\t\t</DialogPrimitive.Description>\n\t);\n});\nDescription.displayName = \"DialogPrimitiveDescription\";\n\n/**\n * Type guard to check if the event target is the overlay component\n */\nfunction isDialogOverlayTarget(target: EventTarget | null): boolean {\n\tif (target instanceof HTMLElement) {\n\t\treturn target.hasAttribute(\"data-overlay\");\n\t}\n\treturn false;\n}\n\nexport {\n\t//,\n\tRoot,\n\tTrigger,\n\tPortal,\n\tClose,\n\tOverlay,\n\tContent,\n\tDescription,\n\tTitle,\n\tisDialogOverlayTarget,\n};\n\n/**\n * Prevents the parent dialog/sheet/alert-dialog from closing on Escape when a\n * nested popup owner inside the same modal content is currently expanded.\n *\n * Flow:\n * - If focus is outside the nested popup owner, Escape closes the parent modal.\n * - If focus is inside the nested popup owner and its controlled popup is open,\n *   the first Escape closes only the nested popup and keeps the parent modal open.\n * - Once the nested popup has closed, a subsequent Escape closes the parent modal.\n */\nfunction preventCloseOnNestedPopupEscape(\n\tevent: Parameters<NonNullable<DialogPrimitiveContentProps[\"onEscapeKeyDown\"]>>[0],\n): void {\n\tif (!isParentNode(event.currentTarget)) {\n\t\treturn;\n\t}\n\n\tconst currentTarget = event.currentTarget;\n\tconst activeElement =\n\t\tcurrentTarget instanceof Document\n\t\t\t? currentTarget.activeElement\n\t\t\t: (currentTarget.ownerDocument?.activeElement ?? null);\n\n\tconst owner = getExpandedPopupOwner(event.target) ?? getExpandedPopupOwner(activeElement);\n\n\tconst popup = owner ? getControlledPopup(owner) : null;\n\n\tif (\n\t\towner != null &&\n\t\tparseBooleanish(owner.getAttribute(\"aria-expanded\")) &&\n\t\tpopup != null &&\n\t\tcurrentTarget.contains(owner) &&\n\t\tcurrentTarget.contains(popup) &&\n\t\t// Only block closing if the popup is actively open. Always-visible lists\n\t\t// without open/close state (e.g. cmdk) carry neither attribute and should\n\t\t// never block the dialog from closing.\n\t\t// - Ariakit sets `data-open=\"true\"` when its popover is open.\n\t\t// - Radix sets `data-state=\"open\"` when its popup is open.\n\t\t(popup.getAttribute(\"data-open\") === \"true\" || popup.getAttribute(\"data-state\") === \"open\")\n\t) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Finds the nearest expanded popup owner for a node using ARIA relationships.\n *\n * A matching owner must expose `aria-expanded=\"true\"` and `aria-controls`, which\n * lets nested controls like comboboxes and input-attached popovers signal that an\n * inner surface is currently open.\n */\nfunction getExpandedPopupOwner(node: EventTarget | null): HTMLElement | null {\n\tif (!isHTMLElement(node)) {\n\t\treturn null;\n\t}\n\n\tconst owner = node.closest<HTMLElement>(\"[aria-expanded='true'][aria-controls]\");\n\treturn owner;\n}\n\n/**\n * Resolves the popup element controlled by an expanded owner via `aria-controls`.\n */\nfunction getControlledPopup(owner: HTMLElement): HTMLElement | null {\n\tconst popupId = owner.getAttribute(\"aria-controls\");\n\tif (!popupId) {\n\t\treturn null;\n\t}\n\n\tconst popup = owner.ownerDocument.getElementById(popupId);\n\treturn popup instanceof HTMLElement ? popup : null;\n}\n\n/**\n * Narrows an event target to an HTMLElement so DOM traversal helpers can be used safely.\n */\nfunction isHTMLElement(value: EventTarget | null): value is HTMLElement {\n\treturn value instanceof HTMLElement;\n}\n\n/**\n * Narrows an event target to a queryable DOM parent node, such as an Element or Document.\n */\nfunction isParentNode(value: EventTarget | null): value is ParentNode & Node {\n\treturn value instanceof Node && \"querySelector\" in value;\n}\n"],"mappings":"wTAwBA,MAAM,EAAwB,EAA0C,CACvE,eAAgB,GAChB,sBAAyB,CAAC,CAC3B,CAAC,EAED,SAAS,EAAK,EAA8D,CAC3E,GAAM,CAAC,EAAgB,GAAqB,EAAS,EAAK,EACpD,EAAe,OAAe,CAAE,iBAAgB,mBAAkB,GAAI,CAAC,CAAc,CAAC,EAE5F,OACC,EAAC,EAAsB,SAAvB,CAAgC,MAAO,WACtC,EAAC,EAAgB,KAAjB,CAAsB,GAAI,CAAQ,CAAA,CACH,CAAA,CAElC,CACA,EAAK,YAAc,sBAEnB,MAAM,EAAU,EAAgB,QAChC,EAAQ,YAAc,yBAEtB,MAAM,EAAS,EAAgB,OAC/B,EAAO,YAAc,wBAErB,MAAM,EAAQ,EAAgB,MAC9B,EAAM,YAAc,uBAEpB,MAAM,EAAU,GAGb,EAAO,IACT,EAAC,EAAgB,QAAjB,CAKC,eAAA,GACK,MACL,GAAI,CACJ,CAAA,CACD,EACD,EAAQ,YAAc,yBAEtB,MAAM,EAAU,GACd,CAAE,kBAAiB,oBAAmB,uBAAsB,GAAG,GAAS,IAAQ,CAChF,IAAM,EAAM,EAAW,CAAqB,EAE5C,OACC,EAAC,EAAgB,QAAjB,CACM,MACL,gBAAkB,GAAU,CAC3B,EAAgC,CAAK,EACrC,IAAkB,CAAK,CACxB,EACA,kBAAoB,GAAU,CAC7B,EAAgC,CAAK,EACrC,IAAoB,CAAK,CAC1B,EACA,qBAAuB,GAAU,CAChC,EAAgC,CAAK,EACrC,IAAuB,CAAK,CAC7B,EAEA,GAAM,EAAI,eAAqD,CAAC,EAArC,CAAE,mBAAoB,IAAA,EAAU,EAC3D,GAAI,CACJ,CAAA,CAEH,CACD,EACA,EAAQ,YAAc,yBAEtB,MAAM,EAAQ,EAAgB,MAOxB,EAAc,GAGjB,CAAE,UAAS,WAAU,GAAG,GAAS,IAAQ,CAC3C,IAAM,EAAM,EAAW,CAAqB,EAE5C,OACC,EAAI,kBAAkB,EAAI,MACb,EAAI,kBAAkB,EAAK,GACtC,CAAC,CAAG,CAAC,EAER,IAAM,EAAY,EAAU,EAAO,MAEnC,OACC,EAAC,EAAgB,YAAjB,CAAkC,MAAK,QAAA,YACtC,EAAC,EAAD,CAAW,GAAI,EAAQ,UAAoB,CAAA,CACf,CAAA,CAE/B,CAAC,EACD,EAAY,YAAc,6BAK1B,SAAS,EAAsB,EAAqC,CAInE,OAHI,aAAkB,YACd,EAAO,aAAa,cAAc,EAEnC,EACR,CAyBA,SAAS,EACR,EACO,CACP,GAAI,CAAC,EAAa,EAAM,aAAa,EACpC,OAGD,IAAM,EAAgB,EAAM,cACtB,EACL,aAAyB,SACtB,EAAc,cACb,EAAc,eAAe,eAAiB,KAE7C,EAAQ,EAAsB,EAAM,MAAM,GAAK,EAAsB,CAAa,EAElF,EAAQ,EAAQ,EAAmB,CAAK,EAAI,KAGjD,GAAS,MACT,EAAgB,EAAM,aAAa,eAAe,CAAC,GACnD,GAAS,MACT,EAAc,SAAS,CAAK,GAC5B,EAAc,SAAS,CAAK,IAM3B,EAAM,aAAa,WAAW,IAAM,QAAU,EAAM,aAAa,YAAY,IAAM,SAEpF,EAAM,eAAe,CAEvB,CASA,SAAS,EAAsB,EAA8C,CAM5E,OALK,EAAc,CAAI,EAIT,EAAK,QAAqB,uCAC7B,EAJH,IAKT,CAKA,SAAS,EAAmB,EAAwC,CACnE,IAAM,EAAU,EAAM,aAAa,eAAe,EAClD,GAAI,CAAC,EACJ,OAAO,KAGR,IAAM,EAAQ,EAAM,cAAc,eAAe,CAAO,EACxD,OAAO,aAAiB,YAAc,EAAQ,IAC/C,CAKA,SAAS,EAAc,EAAiD,CACvE,OAAO,aAAiB,WACzB,CAKA,SAAS,EAAa,EAAuD,CAC5E,OAAO,aAAiB,MAAQ,kBAAmB,CACpD"}

package/dist/{primitive-qkxTYBUY.d.ts → primitive-D_-h74Kt.d.ts}

@@ -1,9 +1,8 @@
 import { ComponentPropsWithoutRef } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 //#region src/components/dialog/primitive.d.ts
-declare function Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
+declare function Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
   var displayName: string;
 }
@@ -13,4 +12,4 @@ declare namespace Root {
 declare function isDialogOverlayTarget(target: EventTarget | null): boolean;
 //#endregion
 export { isDialogOverlayTarget as n, Root as t };
-//# sourceMappingURL=primitive-qkxTYBUY.d.ts.map
+//# sourceMappingURL=primitive-D_-h74Kt.d.ts.map

package/dist/progress.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps, HTMLAttributes } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 
 //#region src/components/progress/types.d.ts
@@ -101,7 +100,7 @@ declare const ProgressDonut: {
       value: _value,
       indeterminateRotationSpeed,
       ...props
-    }: Props): _$react_jsx_runtime0.JSX.Element;
+    }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
   };
   /**
@@ -124,7 +123,7 @@ declare const ProgressDonut: {
     ({
       className,
       ...props
-    }: ProgressDonutIndicatorProps): _$react_jsx_runtime0.JSX.Element;
+    }: ProgressDonutIndicatorProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
   };
 };
@@ -179,7 +178,7 @@ declare function Root({
   max: _max,
   value: _value,
   ...props
-}: RootProps): _$react_jsx_runtime0.JSX.Element;
+}: RootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
   var displayName: string;
 }
@@ -208,7 +207,7 @@ declare function Indicator({
   className,
   style,
   ...props
-}: IndicatorProps): _$react_jsx_runtime0.JSX.Element;
+}: IndicatorProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Indicator {
   var displayName: string;
 }

package/dist/progress.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./types-884RJJqm.js";import{createContext as n,useContext as r,useId as i,useMemo as a}from"react";import o from"clsx";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-progress";function u(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function d(e){return typeof e==`number`}function f(e,t){return d(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function p(e){return d(e)&&!Number.isNaN(e)&&e>0}const m={max:100,strokeWidth:`0.25rem`,value:0},h=n(m),g=({children:n,className:r,max:i=100,strokeWidth:o=4,value:l,indeterminateRotationSpeed:u,...g})=>{let _=p(i)?i:100,v=f(l,_)?l:l==null?0:`indeterminate`,x=y(o??m.strokeWidth),S=d(v)?v:void 0,C=b(x),w=a(()=>({max:_,strokeWidth:x,value:v}),[_,x,v]);return s(h.Provider,{value:w,children:c(`svg`,{"data-slot":`progress-donut`,"aria-valuemax":_,"aria-valuemin":0,"aria-valuenow":S,className:e(`size-6 text-gray-200 dark:text-gray-300`,v===`indeterminate`&&[`animate-spin`,u??`animation-duration-[15s]`],r),"data-max":_,"data-min":0,"data-value":S,height:`100%`,role:`progressbar`,width:`100%`,...g,children:[s(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:x,style:t({"--radius":C})}),n]})})};g.displayName=`ProgressDonut`;const _=({className:n,...a})=>{let l=i(),u=r(h)??m,d=(u.value===`indeterminate`?.6:u.value/u.max)*100,f=y(u.strokeWidth),p=b(f);return c(`g`,{"data-slot":`progress-donut-indicator`,className:e(`text-accent-600`,n),...a,children:[u.value===`indeterminate`&&s(`defs`,{children:c(`linearGradient`,{id:l,children:[s(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),s(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),s(`circle`,{className:o(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:u.value===`indeterminate`?`url(#${l})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-d,strokeLinecap:`round`,strokeWidth:f,style:t({"--radius":p}),transform:`rotate(-90)`})]})};_.displayName=`ProgressDonutIndicator`;const v={Root:g,Indicator:_};function y(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),u(Number.isNaN(t)?4:t,{min:1,max:12}))}function b(e){return`calc(50% - ${e/2}px)`}const x=n({max:100,value:0});function S({className:t,children:n,max:r=100,value:i,...o}){let c=p(r)?r:100,u=f(i,c)?i:i==null?0:`indeterminate`,m=d(u)?u:void 0,h=a(()=>({max:c,value:u}),[c,u]);return s(x.Provider,{value:h,children:s(l.Root,{"data-slot":`progress-bar`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:c,...o,children:n})})}S.displayName=`Root`;function C({className:t,style:n,...i}){let a=r(x),{max:o}=a,c=(o-(a.value===`indeterminate`?0:a.value))/o*100;return s(l.Indicator,{"data-slot":`progress-bar-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...n,transform:`translateX(-${c}%)`},...i})}C.displayName=`Indicator`;const w={Root:S,Indicator:C};export{w as ProgressBar,v as ProgressDonut};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./types-D85fCNV3.js";import{createContext as n,useContext as r,useId as i,useMemo as a}from"react";import o from"clsx";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-progress";function u(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function d(e){return typeof e==`number`}function f(e,t){return d(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function p(e){return d(e)&&!Number.isNaN(e)&&e>0}const m={max:100,strokeWidth:`0.25rem`,value:0},h=n(m),g=({children:n,className:r,max:i=100,strokeWidth:o=4,value:l,indeterminateRotationSpeed:u,...g})=>{let _=p(i)?i:100,v=f(l,_)?l:l==null?0:`indeterminate`,x=y(o??m.strokeWidth),S=d(v)?v:void 0,C=b(x),w=a(()=>({max:_,strokeWidth:x,value:v}),[_,x,v]);return s(h.Provider,{value:w,children:c(`svg`,{"data-slot":`progress-donut`,"aria-valuemax":_,"aria-valuemin":0,"aria-valuenow":S,className:e(`size-6 text-gray-200 dark:text-gray-300`,v===`indeterminate`&&[`animate-spin`,u??`animation-duration-[15s]`],r),"data-max":_,"data-min":0,"data-value":S,height:`100%`,role:`progressbar`,width:`100%`,...g,children:[s(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:x,style:t({"--radius":C})}),n]})})};g.displayName=`ProgressDonut`;const _=({className:n,...a})=>{let l=i(),u=r(h)??m,d=(u.value===`indeterminate`?.6:u.value/u.max)*100,f=y(u.strokeWidth),p=b(f);return c(`g`,{"data-slot":`progress-donut-indicator`,className:e(`text-accent-600`,n),...a,children:[u.value===`indeterminate`&&s(`defs`,{children:c(`linearGradient`,{id:l,children:[s(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),s(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),s(`circle`,{className:o(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:u.value===`indeterminate`?`url(#${l})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-d,strokeLinecap:`round`,strokeWidth:f,style:t({"--radius":p}),transform:`rotate(-90)`})]})};_.displayName=`ProgressDonutIndicator`;const v={Root:g,Indicator:_};function y(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),u(Number.isNaN(t)?4:t,{min:1,max:12}))}function b(e){return`calc(50% - ${e/2}px)`}const x=n({max:100,value:0});function S({className:t,children:n,max:r=100,value:i,...o}){let c=p(r)?r:100,u=f(i,c)?i:i==null?0:`indeterminate`,m=d(u)?u:void 0,h=a(()=>({max:c,value:u}),[c,u]);return s(x.Provider,{value:h,children:s(l.Root,{"data-slot":`progress-bar`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:c,...o,children:n})})}S.displayName=`Root`;function C({className:t,style:n,...i}){let a=r(x),{max:o}=a,c=(o-(a.value===`indeterminate`?0:a.value))/o*100;return s(l.Indicator,{"data-slot":`progress-bar-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...n,transform:`translateX(-${c}%)`},...i})}C.displayName=`Indicator`;const w={Root:S,Indicator:C};export{w as ProgressBar,v as ProgressDonut};
 //# sourceMappingURL=progress.js.map