@avenue-ticketing/ui 0.11.0 → 0.12.0-beta.2

package/dist/react/pin-input.js

@@ -0,0 +1,229 @@
+import { createContext, useContext, useId } from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { Label as Label$1, Text, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow, Button } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var HintText = ({ isInvalid, className, size = "md", ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      slot: isInvalid ? "errorMessage" : "description",
+      className: cx(
+        "text-sm text-tertiary",
+        // Size
+        size === "sm" && "text-xs",
+        "in-data-[input-size=sm]:text-xs",
+        // Invalid state
+        isInvalid && "text-error-primary",
+        "group-invalid:text-error-primary",
+        className
+      )
+    }
+  );
+};
+HintText.displayName = "HintText";
+var Tooltip = ({
+  title,
+  description,
+  children,
+  arrow = false,
+  delay = 100,
+  closeDelay = 0,
+  trigger,
+  isDisabled,
+  isOpen,
+  defaultOpen,
+  offset = 6,
+  crossOffset,
+  placement = "top",
+  onOpenChange,
+  ...tooltipProps
+}) => {
+  const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+  const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+  return /* @__PURE__ */ jsxs(TooltipTrigger$1, { ...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        ...tooltipProps,
+        offset,
+        placement,
+        crossOffset: crossOffset ?? calculatedCrossOffset,
+        className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out"),
+        children: ({ isEntering, isExiting }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+              description ? "py-3" : "py-2",
+              isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+              isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: title }),
+              description && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tooltip-supporting-text", children: description }),
+              arrow && /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180",
+                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var TooltipTrigger = ({ children, className, ...buttonProps }) => {
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className), children });
+};
+var Label = ({ isInvalid, isRequired, tooltip, tooltipDescription, className, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    Label$1,
+    {
+      "data-label": "true",
+      ...props,
+      className: cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(
+              "hidden text-brand-tertiary",
+              isRequired && "block",
+              typeof isRequired === "undefined" && "group-required:block",
+              isInvalid && "text-error-primary",
+              typeof isInvalid === "undefined" && "group-invalid:text-error-primary"
+            ),
+            children: "*"
+          }
+        ),
+        tooltip && /* @__PURE__ */ jsx(Tooltip, { title: tooltip, description: tooltipDescription, placement: "top", children: /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            isDisabled: false,
+            className: "cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+            children: /* @__PURE__ */ jsx(QuestionIcon, { className: "size-4" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+Label.displayName = "Label";
+var focusRingShadow = "border-brand ring-1 ring-inset ring-brand";
+var focusRingErrorShadow = "border-error ring-1 ring-inset ring-error";
+var PinInputContext = createContext({
+  size: "sm",
+  id: "",
+  disabled: false,
+  invalid: false
+});
+var usePinInputContext = () => {
+  const context = useContext(PinInputContext);
+  if (!context) {
+    throw new Error("The 'usePinInputContext' hook must be used within a '<PinInput />'");
+  }
+  return context;
+};
+var Root = ({ className, size = "md", disabled = false, invalid = false, ...props }) => {
+  const id = useId();
+  return /* @__PURE__ */ jsx(PinInputContext.Provider, { value: { size, disabled, id, invalid }, children: /* @__PURE__ */ jsx("div", { role: "group", className: cx("flex h-max flex-col gap-1.5", className), ...props }) });
+};
+Root.displayName = "Root";
+var styles = {
+  xxxs: { group: "gap-1.5 h-9", slot: "size-9 px-3 py-2 text-sm rounded-lg font-medium text-placeholder/50", caret: "text-sm font-medium" },
+  xxs: { group: "gap-2 h-10", slot: "size-10 px-3 py-2 text-md rounded-lg font-medium text-placeholder/50", caret: "text-md font-medium" },
+  xs: { group: "gap-2 h-11", slot: "size-11 px-3.5 py-2.5 text-md rounded-lg font-medium text-placeholder/50", caret: "text-md font-medium" },
+  sm: { group: "gap-2 h-16.5", slot: "size-16 px-2 py-0.5 text-display-lg font-medium", caret: "text-display-lg font-medium" },
+  md: { group: "gap-3 h-20.5", slot: "size-20 px-2 py-2.5 text-display-lg font-medium", caret: "text-display-lg font-medium" },
+  lg: { group: "gap-3 h-24.5", slot: "size-24 px-2 py-3 text-display-xl font-medium", caret: "text-display-xl font-medium" }
+};
+var Group = ({ inputClassName, containerClassName, width, maxLength = 4, ...props }) => {
+  const { id, size, disabled } = usePinInputContext();
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      ...props,
+      size: width,
+      maxLength,
+      disabled,
+      id: "pin-input-" + id,
+      "aria-label": "Enter your pin",
+      "aria-labelledby": "pin-input-label-" + id,
+      "aria-describedby": "pin-input-description-" + id,
+      containerClassName: cx("flex flex-row", styles[size].group, containerClassName),
+      className: cx("disabled:cursor-not-allowed", inputClassName)
+    }
+  );
+};
+Group.displayName = "Group";
+var Slot = ({ index, className, ...props }) => {
+  const { size, disabled, invalid } = usePinInputContext();
+  const { slots, isFocused } = useContext(OTPInputContext);
+  const slot = slots[index];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "aria-invalid": invalid,
+      "aria-label": "Enter digit " + (index + 1) + " of " + slots.length,
+      className: cx(
+        "relative flex items-center justify-center rounded-xl border border-solid border-primary bg-primary text-center text-placeholder/40 shadow-xs transition-[border-color,box-shadow,background-color] duration-100 ease-linear",
+        styles[size].slot,
+        invalid && !isFocused && "border-error_subtle text-error-primary",
+        isFocused && slot?.isActive && !invalid && focusRingShadow,
+        slot?.char && "border-brand text-brand-tertiary_alt",
+        disabled && "opacity-50",
+        invalid && isFocused && slot?.isActive && focusRingErrorShadow,
+        className
+      ),
+      children: slot?.char ? slot.char : slot?.hasFakeCaret ? /* @__PURE__ */ jsx(FakeCaret, { size }) : 0
+    }
+  );
+};
+Slot.displayName = "Slot";
+var FakeCaret = ({ size = "md" }) => {
+  return /* @__PURE__ */ jsx("div", { className: cx("pointer-events-none h-[1em] w-0.5 animate-caret-blink bg-fg-brand-primary", styles[size].caret) });
+};
+var Separator = (props) => {
+  return /* @__PURE__ */ jsx("div", { role: "separator", ...props, className: cx("text-center text-display-xl font-medium text-utility-neutral-300", props.className), children: "-" });
+};
+Separator.displayName = "Separator";
+var Label2 = (props) => {
+  const { id } = usePinInputContext();
+  return /* @__PURE__ */ jsx(Label, { ...props, htmlFor: "pin-input-" + id, id: "pin-input-label-" + id });
+};
+Label2.displayName = "Label";
+var Description = (props) => {
+  const { id, size } = usePinInputContext();
+  return /* @__PURE__ */ jsx(HintText, { ...props, id: "pin-input-description-" + id, role: "description", className: cx(size === "xxxs" && "text-xs") });
+};
+Description.displayName = "Description";
+var PinInput = Root;
+PinInput.Slot = Slot;
+PinInput.Label = Label2;
+PinInput.Group = Group;
+PinInput.Separator = Separator;
+PinInput.Description = Description;
+
+export { PinInput, usePinInputContext };
+//# sourceMappingURL=pin-input.js.map
+//# sourceMappingURL=pin-input.js.map

package/dist/react/pin-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/input/hint-text.tsx","../../../../components/base/tooltip/tooltip.tsx","../../../../components/base/input/label.tsx","../../../../components/base/input/pin-input.tsx"],"names":["AriaText","AriaTooltipTrigger","jsx","AriaTooltip","AriaOverlayArrow","AriaButton","jsxs","AriaLabel","HelpCircle","Label"],"mappings":"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","file":"pin-input.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport type { ReactNode, Ref } from \"react\";\nimport type { TextProps as AriaTextProps } from \"react-aria-components\";\nimport { Text as AriaText } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\ninterface HintTextProps extends AriaTextProps {\n    /** Indicates that the hint text is an error message. */\n    isInvalid?: boolean;\n    ref?: Ref<HTMLElement>;\n    size?: \"sm\" | \"md\";\n    children: ReactNode;\n}\n\nexport const HintText = ({ isInvalid, className, size = \"md\", ...props }: HintTextProps) => {\n    return (\n        <AriaText\n            {...props}\n            slot={isInvalid ? \"errorMessage\" : \"description\"}\n            className={cx(\n                \"text-sm text-tertiary\",\n\n                // Size\n                size === \"sm\" && \"text-xs\",\n                \"in-data-[input-size=sm]:text-xs\",\n\n                // Invalid state\n                isInvalid && \"text-error-primary\",\n                \"group-invalid:text-error-primary\",\n\n                className,\n            )}\n        />\n    );\n};\n\nHintText.displayName = \"HintText\";\n","\"use client\";\n\n/** Figma: Tooltip (1052:485) */\n\nimport type { ReactNode } from \"react\";\nimport type {\n    ButtonProps as AriaButtonProps,\n    TooltipProps as AriaTooltipProps,\n    TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n} from \"react-aria-components\";\nimport { Button as AriaButton, OverlayArrow as AriaOverlayArrow, Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\ninterface TooltipProps extends AriaTooltipTriggerComponentProps, Omit<AriaTooltipProps, \"children\"> {\n    /**\n     * The title of the tooltip.\n     */\n    title: ReactNode;\n    /**\n     * The description of the tooltip.\n     */\n    description?: ReactNode;\n    /**\n     * Whether to show the arrow on the tooltip.\n     *\n     * @default false\n     */\n    arrow?: boolean;\n    /**\n     * Delay in milliseconds before the tooltip is shown on first hover.\n     *\n     * @default 100\n     */\n    delay?: number;\n}\n\nexport const Tooltip = ({\n    title,\n    description,\n    children,\n    arrow = false,\n    delay = 100,\n    closeDelay = 0,\n    trigger,\n    isDisabled,\n    isOpen,\n    defaultOpen,\n    offset = 6,\n    crossOffset,\n    placement = \"top\",\n    onOpenChange,\n    ...tooltipProps\n}: TooltipProps) => {\n    const isTopOrBottomLeft = [\"top left\", \"top end\", \"bottom left\", \"bottom end\"].includes(placement);\n    const isTopOrBottomRight = [\"top right\", \"top start\", \"bottom right\", \"bottom start\"].includes(placement);\n    // Set negative cross offset for left and right placement to visually balance the tooltip.\n    const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;\n\n    return (\n        <AriaTooltipTrigger {...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }}>\n            {children}\n\n            <AriaTooltip\n                {...tooltipProps}\n                offset={offset}\n                placement={placement}\n                crossOffset={crossOffset ?? calculatedCrossOffset}\n                className={({ isEntering, isExiting }) => cx(isEntering && \"ease-out animate-in\", isExiting && \"ease-in animate-out\")}\n            >\n                {({ isEntering, isExiting }) => (\n                    <div\n                        className={cx(\n                            \"z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform\",\n                            description ? \"py-3\" : \"py-2\",\n\n                            isEntering &&\n                                \"ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5\",\n                            isExiting &&\n                                \"ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5\",\n                        )}\n                    >\n                        <span className=\"text-xs font-semibold text-white\">{title}</span>\n\n                        {description && <span className=\"text-xs font-medium text-tooltip-supporting-text\">{description}</span>}\n\n                        {arrow && (\n                            <AriaOverlayArrow>\n                                <svg\n                                    viewBox=\"0 0 100 100\"\n                                    className=\"size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180\"\n                                >\n                                    <path d=\"M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z\" />\n                                </svg>\n                            </AriaOverlayArrow>\n                        )}\n                    </div>\n                )}\n            </AriaTooltip>\n        </AriaTooltipTrigger>\n    );\n};\n\ninterface TooltipTriggerProps extends AriaButtonProps {}\n\nexport const TooltipTrigger = ({ children, className, ...buttonProps }: TooltipTriggerProps) => {\n    return (\n        <AriaButton {...buttonProps} className={(values) => cx(\"h-max w-max outline-hidden\", typeof className === \"function\" ? className(values) : className)}>\n            {children}\n        </AriaButton>\n    );\n};\n","\"use client\";\n\nimport type { ReactNode, Ref } from \"react\";\nimport { QuestionIcon as HelpCircle } from \"@phosphor-icons/react/dist/csr/Question\";\nimport type { LabelProps as AriaLabelProps } from \"react-aria-components\";\nimport { Label as AriaLabel } from \"react-aria-components\";\nimport { Tooltip, TooltipTrigger } from \"@/components/base/tooltip/tooltip\";\nimport { cx } from \"@/utils/cx\";\n\ninterface LabelProps extends AriaLabelProps {\n    children: ReactNode;\n    isInvalid?: boolean;\n    isRequired?: boolean;\n    tooltip?: string;\n    tooltipDescription?: string;\n    ref?: Ref<HTMLLabelElement>;\n}\n\nexport const Label = ({ isInvalid, isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps) => {\n    return (\n        <AriaLabel\n            // Used for conditionally hiding/showing the label element via CSS:\n            // <Input label=\"Visible only on mobile\" className=\"lg:**:data-label:hidden\" />\n            // or\n            // <Input label=\"Visible only on mobile\" className=\"lg:label:hidden\" />\n            data-label=\"true\"\n            {...props}\n            className={cx(\"flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary\", className)}\n        >\n            {props.children}\n\n            <span\n                className={cx(\n                    \"hidden text-brand-tertiary\",\n                    isRequired && \"block\",\n                    typeof isRequired === \"undefined\" && \"group-required:block\",\n\n                    isInvalid && \"text-error-primary\",\n                    typeof isInvalid === \"undefined\" && \"group-invalid:text-error-primary\",\n                )}\n            >\n                *\n            </span>\n\n            {tooltip && (\n                <Tooltip title={tooltip} description={tooltipDescription} placement=\"top\">\n                    <TooltipTrigger\n                        // `TooltipTrigger` inherits the disabled state from the parent form field\n                        // but we don't that. We want the tooltip be enabled even if the parent\n                        // field is disabled.\n                        isDisabled={false}\n                        className=\"cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover\"\n                    >\n                        <HelpCircle className=\"size-4\" />\n                    </TooltipTrigger>\n                </Tooltip>\n            )}\n        </AriaLabel>\n    );\n};\n\nLabel.displayName = \"Label\";\n","\"use client\";\n\nimport type { ComponentPropsWithRef } from \"react\";\nimport { createContext, useContext, useId } from \"react\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { HintText } from \"@/components/base/input/hint-text\";\nimport { Label as LabelBase } from \"@/components/base/input/label\";\nimport { cx } from \"@/utils/cx\";\n\n/** Figma: Pin input — active slot: border-error/brand + inset ring (85:1269). */\nconst focusRingShadow = \"border-brand ring-1 ring-inset ring-brand\";\nconst focusRingErrorShadow = \"border-error ring-1 ring-inset ring-error\";\n\ntype PinInputSize = \"xxxs\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\";\n\ntype PinInputContextType = {\n    size: PinInputSize;\n    disabled: boolean;\n    id: string;\n    invalid: boolean;\n};\n\nconst PinInputContext = createContext<PinInputContextType>({\n    size: \"sm\",\n    id: \"\",\n    disabled: false,\n    invalid: false,\n});\n\nexport const usePinInputContext = () => {\n    const context = useContext(PinInputContext);\n\n    if (!context) {\n        throw new Error(\"The 'usePinInputContext' hook must be used within a '<PinInput />'\");\n    }\n\n    return context;\n};\n\ninterface RootProps extends ComponentPropsWithRef<\"div\"> {\n    size?: PinInputSize;\n    disabled?: boolean;\n    invalid?: boolean;\n}\n\nconst Root = ({ className, size = \"md\", disabled = false, invalid = false, ...props }: RootProps) => {\n    const id = useId();\n\n    return (\n        <PinInputContext.Provider value={{ size, disabled, id, invalid }}>\n            <div role=\"group\" className={cx(\"flex h-max flex-col gap-1.5\", className)} {...props} />\n        </PinInputContext.Provider>\n    );\n};\nRoot.displayName = \"Root\";\n\nconst styles = {\n    xxxs: { group: \"gap-1.5 h-9\", slot: \"size-9 px-3 py-2 text-sm rounded-lg font-medium text-placeholder/50\", caret: \"text-sm font-medium\" },\n    xxs: { group: \"gap-2 h-10\", slot: \"size-10 px-3 py-2 text-md rounded-lg font-medium text-placeholder/50\", caret: \"text-md font-medium\" },\n    xs: { group: \"gap-2 h-11\", slot: \"size-11 px-3.5 py-2.5 text-md rounded-lg font-medium text-placeholder/50\", caret: \"text-md font-medium\" },\n    sm: { group: \"gap-2 h-16.5\", slot: \"size-16 px-2 py-0.5 text-display-lg font-medium\", caret: \"text-display-lg font-medium\" },\n    md: { group: \"gap-3 h-20.5\", slot: \"size-20 px-2 py-2.5 text-display-lg font-medium\", caret: \"text-display-lg font-medium\" },\n    lg: { group: \"gap-3 h-24.5\", slot: \"size-24 px-2 py-3 text-display-xl font-medium\", caret: \"text-display-xl font-medium\" },\n};\n\ntype GroupProps = ComponentPropsWithRef<typeof OTPInput> & {\n    width?: number;\n    inputClassName?: string;\n};\n\nconst Group = ({ inputClassName, containerClassName, width, maxLength = 4, ...props }: GroupProps) => {\n    const { id, size, disabled } = usePinInputContext();\n\n    return (\n        <OTPInput\n            {...props}\n            size={width}\n            maxLength={maxLength}\n            disabled={disabled}\n            id={\"pin-input-\" + id}\n            aria-label=\"Enter your pin\"\n            aria-labelledby={\"pin-input-label-\" + id}\n            aria-describedby={\"pin-input-description-\" + id}\n            containerClassName={cx(\"flex flex-row\", styles[size].group, containerClassName)}\n            className={cx(\"disabled:cursor-not-allowed\", inputClassName)}\n        />\n    );\n};\nGroup.displayName = \"Group\";\n\nconst Slot = ({ index, className, ...props }: ComponentPropsWithRef<\"div\"> & { index: number }) => {\n    const { size, disabled, invalid } = usePinInputContext();\n    const { slots, isFocused } = useContext(OTPInputContext);\n\n    const slot = slots[index];\n\n    return (\n        <div\n            {...props}\n            aria-invalid={invalid}\n            aria-label={\"Enter digit \" + (index + 1) + \" of \" + slots.length}\n            className={cx(\n                \"relative flex items-center justify-center rounded-xl border border-solid border-primary bg-primary text-center text-placeholder/40 shadow-xs transition-[border-color,box-shadow,background-color] duration-100 ease-linear\",\n                styles[size].slot,\n                invalid && !isFocused && \"border-error_subtle text-error-primary\",\n                isFocused && slot?.isActive && !invalid && focusRingShadow,\n                slot?.char && \"border-brand text-brand-tertiary_alt\",\n                disabled && \"opacity-50\",\n                invalid && isFocused && slot?.isActive && focusRingErrorShadow,\n                className,\n            )}\n        >\n            {slot?.char ? slot.char : slot?.hasFakeCaret ? <FakeCaret size={size} /> : 0}\n        </div>\n    );\n};\nSlot.displayName = \"Slot\";\n\nconst FakeCaret = ({ size = \"md\" }: { size?: PinInputSize }) => {\n    return <div className={cx(\"pointer-events-none h-[1em] w-0.5 animate-caret-blink bg-fg-brand-primary\", styles[size].caret)} />;\n};\n\nconst Separator = (props: ComponentPropsWithRef<\"div\">) => {\n    return (\n        <div role=\"separator\" {...props} className={cx(\"text-center text-display-xl font-medium text-utility-neutral-300\", props.className)}>\n            -\n        </div>\n    );\n};\nSeparator.displayName = \"Separator\";\n\nconst Label = (props: ComponentPropsWithRef<typeof LabelBase>) => {\n    const { id } = usePinInputContext();\n\n    return <LabelBase {...props} htmlFor={\"pin-input-\" + id} id={\"pin-input-label-\" + id} />;\n};\nLabel.displayName = \"Label\";\n\nconst Description = (props: ComponentPropsWithRef<typeof HintText>) => {\n    const { id, size } = usePinInputContext();\n\n    return <HintText {...props} id={\"pin-input-description-\" + id} role=\"description\" className={cx(size === \"xxxs\" && \"text-xs\")} />;\n};\nDescription.displayName = \"Description\";\n\nconst PinInput = Root as typeof Root & {\n    Slot: typeof Slot;\n    Label: typeof Label;\n    Group: typeof Group;\n    Separator: typeof Separator;\n    Description: typeof Description;\n};\nPinInput.Slot = Slot;\nPinInput.Label = Label;\nPinInput.Group = Group;\nPinInput.Separator = Separator;\nPinInput.Description = Description;\n\nexport { PinInput };\n"]}

package/dist/react/popover.d.ts

@@ -1,76 +1,19 @@
-import React__default from 'react';
+import * as react from 'react';
+import { RefAttributes } from 'react';
+import { PopoverProps as PopoverProps$1 } from 'react-aria-components';
+import { S as SelectMobileOptions } from '../select-mobile-sheet-CB2ptDTJ.js';
 
-declare const Popover: React__default.FC<{
-    children: React__default.ReactNode;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}>;
-declare const PopoverTrigger: React__default.FC<{
-    children: React__default.ReactNode;
-    asChild?: boolean;
-}>;
-declare const PopoverClose: React__default.FC<{
-    children: React__default.ReactNode;
-    asChild?: boolean;
-}>;
-/**
- * Narrow-viewport (≤1024px) bottom-sheet options for {@link PopoverContent}.
- * `className` merges onto the sheet panel root (after base sheet styles).
- */
-interface PopoverMobileSheetOptions {
-    /** When `true`, use a bottom sheet on narrow viewports. Default `false`. */
-    sheet?: boolean;
-    title?: string;
-    className?: string;
-    contentClassName?: string;
-}
-interface PopoverMobileCloseProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
-}
-/**
- * Dismiss control for the mobile bottom-sheet popover. Styling matches
- * {@link DialogCloseButton} (circular hit target, X icon).
- */
-declare const PopoverMobileClose: React__default.ForwardRefExoticComponent<PopoverMobileCloseProps & React__default.RefAttributes<HTMLButtonElement>>;
-type Side = "top" | "right" | "bottom" | "left";
-type Align = "start" | "center" | "end";
-interface PopoverContentProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    /** Which side of the trigger to render on */
-    side?: Side;
-    /** Alignment along the cross-axis */
-    align?: Align;
-    /** Gap between trigger and popover in px */
-    offset?: number;
-    /** Show a small arrow pointing to the trigger */
-    showArrow?: boolean;
-    /** Close when clicking outside */
-    closeOnClickOutside?: boolean;
-    /** Close when Escape key is pressed */
-    closeOnEscape?: boolean;
-    /** Animation duration in ms */
-    duration?: number;
-    /** Minimum distance from the viewport edge in px */
-    viewportPadding?: number;
-    /** Portal container – defaults to document.body */
-    container?: HTMLElement | null;
-    /** Width of the popover. 'trigger' matches the trigger width. */
-    width?: "auto" | "trigger" | number;
-    /**
-     * Narrow-viewport (≤1024px) bottom sheet — same options as dropdown
-     * `mobileOptions`, except `sheet` defaults to `false`.
-     */
-    mobileOptions?: PopoverMobileSheetOptions;
+interface PopoverProps extends PopoverProps$1, RefAttributes<HTMLElement> {
+    size: "sm" | "md" | "lg";
+    /** Narrow-viewport (≤1024px) bottom-sheet options. */
+    mobileOptions?: SelectMobileOptions;
     /**
-     * Mobile bottom sheet only. When `true` (default), panel motion matches Dialog
-     * `slideEntrance`; when `false`, uses full `translateY(100%)`.
+     * When `true`, the popover shell does not scroll and has no max-height;
+     * inner content manages its own regions (e.g. multi-select search + list + footer).
+     * @default false
      */
-    slideEntrance?: boolean;
-    /** Mobile sheet only; defaults to 120px (same as dropdown / dialog full sheet). */
-    slideEntranceOffsetPx?: number;
+    compoundContent?: boolean;
 }
-declare const PopoverContent: React__default.FC<PopoverContentProps>;
-declare const PopoverHeader: React__default.FC<React__default.HTMLAttributes<HTMLDivElement>>;
-declare const PopoverFooter: React__default.FC<React__default.HTMLAttributes<HTMLDivElement>>;
-declare const PopoverTitle: React__default.FC<React__default.HTMLAttributes<HTMLHeadingElement>>;
-declare const PopoverDescription: React__default.FC<React__default.HTMLAttributes<HTMLParagraphElement>>;
+declare const Popover: ({ mobileOptions, children, size, className, style, compoundContent, ...props }: PopoverProps) => react.JSX.Element;
 
-export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverMobileClose, type PopoverMobileCloseProps, type PopoverMobileSheetOptions, PopoverTitle, PopoverTrigger };
+export { Popover };