@avenue-ticketing/ui 0.10.0 → 0.12.0-beta.1

package/dist/react/input-number.js

@@ -0,0 +1,553 @@
+import { createContext, useContext, isValidElement } from 'react';
+import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown';
+import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp';
+import { MinusIcon } from '@phosphor-icons/react/dist/csr/Minus';
+import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus';
+import { Group, Input, Button as Button$1, NumberField, Link, Label as Label$1, Text, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import '@phosphor-icons/react/dist/csr/Eye';
+import '@phosphor-icons/react/dist/csr/EyeSlash';
+import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
+import '@phosphor-icons/react/dist/csr/Info';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+function sortCx(classes) {
+  return classes;
+}
+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$1, { ...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 inputFocusRingShellOverlay = "after:pointer-events-none after:absolute after:-inset-px after:z-10 after:rounded-lg after:border after:border-solid after:border-brand after:ring-1 after:ring-inset after:ring-brand after:content-['']";
+var inputErrorFocusRingShellOverlay = "after:pointer-events-none after:absolute after:-inset-px after:z-10 after:rounded-lg after:border after:border-solid after:border-error after:ring-1 after:ring-inset after:ring-error after:content-['']";
+var inputErrorFocusRingGroupInvalidShellOverlay = "group-invalid:focus-within:after:pointer-events-none group-invalid:focus-within:after:absolute group-invalid:focus-within:after:-inset-px group-invalid:focus-within:after:z-10 group-invalid:focus-within:after:rounded-lg group-invalid:focus-within:after:border group-invalid:focus-within:after:border-solid group-invalid:focus-within:after:border-error group-invalid:focus-within:after:ring-1 group-invalid:focus-within:after:ring-inset group-invalid:focus-within:after:ring-error group-invalid:focus-within:after:content-['']";
+createContext({});
+
+// ../../utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var focusShadowSkeuomorphic = "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var skeuomorphicGradientBorderClass = [
+  "ring-1 ring-inset ring-transparent",
+  "before:pointer-events-none before:absolute before:inset-px before:rounded-[inherit] before:border before:border-[#ffffff1f] before:content-['']",
+  "before:[mask-image:linear-gradient(to_bottom,#000,transparent)]"
+].join(" ");
+var skeuomorphicShadowClass = ["shadow-xs-skeuomorphic", focusShadowSkeuomorphic, "overflow-hidden"].join(" ");
+var focusShadowSecondary = "focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var secondaryInnerShadow = "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]";
+var secondaryShadowClass = ["relative overflow-hidden shadow-xs", secondaryInnerShadow, focusShadowSecondary].join(" ");
+var inputNumberButtonClass = [
+  "in-data-number-input:border-0 in-data-number-input:shadow-none in-data-number-input:!rounded-none in-data-number-input:!h-full in-data-number-input:!min-h-0 in-data-number-input:self-stretch in-data-number-input:overflow-hidden",
+  "in-data-number-input:before:hidden in-data-number-input:after:hidden",
+  "in-data-number-input:focus-visible:outline-none in-data-number-input:focus-visible:shadow-none in-data-number-input:focus-visible:ring-0 in-data-number-input:focus-visible:![box-shadow:none]"
+].join(" ");
+var inputAddonButtonClass = [
+  "in-data-input-wrapper:border-0 in-data-input-wrapper:shadow-none in-data-input-wrapper:!rounded-none in-data-input-wrapper:overflow-hidden",
+  "in-data-input-wrapper:in-data-trailing:border-l in-data-input-wrapper:in-data-trailing:border-solid in-data-input-wrapper:in-data-trailing:border-primary",
+  "in-data-input-wrapper:in-data-leading:border-r in-data-input-wrapper:in-data-leading:border-solid in-data-input-wrapper:in-data-leading:border-primary",
+  "in-data-input-wrapper:group-invalid:in-data-trailing:border-error_subtle in-data-input-wrapper:group-invalid:in-data-leading:border-error_subtle",
+  "in-data-input-wrapper:before:hidden in-data-input-wrapper:after:hidden",
+  "in-data-input-wrapper:focus-visible:outline-none in-data-input-wrapper:focus-visible:shadow-none in-data-input-wrapper:focus-visible:ring-0 in-data-input-wrapper:focus-visible:![box-shadow:none]"
+].join(" ");
+var styles = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-full font-body outline-none before:absolute",
+      "font-semibold transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out",
+      "pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100",
+      "disabled:pointer-events-none disabled:cursor-not-allowed in-data-input-wrapper:disabled:opacity-100",
+      inputAddonButtonClass,
+      inputNumberButtonClass,
+      // Stretch to InputGroup row height; padding/typography follow `data-input-size` on the field (Figma 85:1269).
+      "in-data-input-wrapper:!h-full in-data-input-wrapper:!min-h-0 in-data-input-wrapper:self-stretch",
+      "in-data-input-wrapper:in-data-[input-size=sm]:gap-1 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=md]:gap-1 in-data-input-wrapper:in-data-[input-size=md]:px-3.5 in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=lg]:gap-1.5 in-data-input-wrapper:in-data-[input-size=lg]:px-4 in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:text-md",
+      "*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    xs: {
+      root: [
+        "h-8 min-h-8 gap-1 px-[0.625rem] py-1.5 text-sm data-icon-only:size-8 data-icon-only:min-h-8 data-icon-only:min-w-8 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-4"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    sm: {
+      root: [
+        "h-9 min-h-9 gap-1 px-3 py-2 text-sm data-icon-only:size-9 data-icon-only:min-h-9 data-icon-only:min-w-9 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    md: {
+      root: [
+        "h-10 min-h-10 gap-1 px-3.5 py-2.5 text-sm data-icon-only:size-10 data-icon-only:min-h-10 data-icon-only:min-w-10 data-icon-only:p-2.5",
+        "in-data-input-wrapper:data-icon-only:p-3",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-4"
+    },
+    lg: {
+      root: "h-11 min-h-11 gap-1.5 px-4 py-2.5 text-md data-icon-only:size-11 data-icon-only:min-h-11 data-icon-only:min-w-11 data-icon-only:p-3 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    },
+    xl: {
+      root: "h-12 min-h-12 gap-1.5 px-[1.125rem] py-3 text-md data-icon-only:size-12 data-icon-only:min-h-12 data-icon-only:min-w-12 data-icon-only:p-3 data-icon-only:*:data-icon:size-6 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    }
+  },
+  colors: {
+    /** Figma Hierarchy=Primary — dark neutral solid; hover lightens to fg-tertiary_hover (#404040). */
+    primary: {
+      root: [
+        "bg-primary-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-fg-tertiary_hover dark:hover:bg-quaternary",
+        "disabled:opacity-30",
+        "data-loading:bg-fg-tertiary_hover dark:data-loading:bg-quaternary",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Brand — purple solid; hover darkens to bg-brand-solid_hover (#6d28d9). */
+    brand: {
+      root: [
+        "bg-brand-solid text-primary_on-brand",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-brand-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-brand-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-primary_on-brand"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Secondary — border-primary + shadow-xs + skeuomorphic inner rim overlay. */
+    secondary: {
+      root: [
+        "border border-solid border-primary bg-primary text-secondary",
+        secondaryShadowClass,
+        "hover:bg-primary_hover hover:text-secondary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-primary_hover",
+        "*:data-icon:text-fg-secondary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Tertiary */
+    tertiary: {
+      root: [
+        "border border-transparent bg-transparent text-tertiary",
+        focusShadowPlain,
+        "hover:bg-primary_hover hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-tertiary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */
+    "link-color": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-brand-secondary shadow-none",
+        focusShadowPlain,
+        "hover:text-brand-secondary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-brand-secondary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link gray — text + icons share tertiary; hover underlines with fg-quaternary. */
+    "link-gray": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-tertiary shadow-none",
+        focusShadowPlain,
+        "hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-quaternary"
+      ].join(" ")
+    },
+    "primary-destructive": {
+      root: [
+        "bg-error-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-error-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    "secondary-destructive": {
+      root: [
+        "border border-solid border-primary bg-primary text-error-primary",
+        secondaryShadowClass,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-primary",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    "tertiary-destructive": {
+      root: [
+        "border border-transparent bg-transparent text-error-primary",
+        focusShadowPlain,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link (destructive) — text + icons share error-primary; hover underlines. */
+    "link-destructive": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-error-primary shadow-none",
+        focusShadowPlain,
+        "hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-current"
+      ].join(" ")
+    }
+  }
+});
+var Button = ({
+  size = "md",
+  color = "primary",
+  children,
+  className,
+  noTextPadding,
+  iconLeading: IconLeading,
+  iconTrailing: IconTrailing,
+  isDisabled: disabled,
+  isLoading: loading,
+  showTextWhileLoading,
+  ...props
+}) => {
+  const href = "href" in props ? props.href : void 0;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  const commonChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isValidElement(IconLeading) && IconLeading,
+    isReactComponent(IconLeading) && /* @__PURE__ */ jsx(IconLeading, { "data-icon": "leading", className: styles.common.icon }),
+    loading && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        fill: "none",
+        "data-icon": "loading",
+        viewBox: "0 0 256 256",
+        "aria-hidden": true,
+        className: cx(
+          styles.common.icon,
+          "size-5 animate-spin",
+          !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60,61.46,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20-66.54-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"
+          }
+        )
+      }
+    ),
+    children && /* @__PURE__ */ jsx("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && !isLinkType && "px-0.5"), children }),
+    isValidElement(IconTrailing) && IconTrailing,
+    isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, { "data-icon": "trailing", className: styles.common.icon })
+  ] });
+  const commonProps = {
+    "data-icon-only": isIcon ? true : void 0,
+    "data-loading": loading ? true : void 0,
+    ...props,
+    isDisabled: disabled || loading,
+    className: cx(
+      styles.common.root,
+      styles.sizes[size].root,
+      styles.colors[color].root,
+      isLinkType && styles.sizes[size].linkRoot,
+      (loading || href && (disabled || loading)) && "pointer-events-none",
+      loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+      className
+    ),
+    children: commonChildren
+  };
+  if ("href" in commonProps) {
+    return /* @__PURE__ */ jsx(Link, { ...commonProps, href: disabled || loading ? void 0 : href });
+  }
+  return /* @__PURE__ */ jsx(Button$1, { ...commonProps, type: commonProps.type || "button", isPending: loading });
+};
+var NumberFieldContext = createContext({});
+var styles2 = {
+  sm: "px-3 py-2 text-sm",
+  md: "px-3 py-2 text-md",
+  lg: "px-3.5 py-2.5 text-md"
+};
+var InputNumberBase = ({
+  ref,
+  groupRef,
+  size = "md",
+  isInvalid,
+  isDisabled,
+  placeholder,
+  wrapperClassName,
+  inputClassName,
+  orientation = "vertical",
+  // Omit this prop to avoid invalid HTML attribute warning
+  isRequired: _isRequired,
+  ...inputProps
+}) => {
+  const context = useContext(NumberFieldContext);
+  const inputSize = context?.size || size;
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      ...{ isDisabled, isInvalid },
+      ref: groupRef,
+      "data-number-input": true,
+      "data-number-size": inputSize,
+      className: ({ isFocusWithin, isDisabled: isDisabled2, isInvalid: isInvalid2 }) => cx(
+        "relative flex w-full flex-row items-stretch overflow-clip rounded-lg border border-solid border-primary bg-primary shadow-xs transition-[border-color,box-shadow] duration-100 ease-linear",
+        isFocusWithin && !isDisabled2 && !isInvalid2 && inputFocusRingShellOverlay,
+        // Disabled state styles
+        isDisabled2 && "cursor-not-allowed opacity-50 in-data-input-wrapper:opacity-100",
+        "group-disabled:cursor-not-allowed group-disabled:opacity-50 in-data-input-wrapper:group-disabled:opacity-100",
+        // Invalid state styles
+        isInvalid2 && !isFocusWithin && "border-error_subtle",
+        "group-invalid:border-error_subtle",
+        inputErrorFocusRingGroupInvalidShellOverlay,
+        isInvalid2 && isFocusWithin && inputErrorFocusRingShellOverlay,
+        context?.wrapperClassName,
+        wrapperClassName
+      ),
+      children: [
+        orientation === "horizontal" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size,
+            iconLeading: MinusIcon,
+            slot: "decrement",
+            color: "tertiary",
+            "data-number-control": "decrement",
+            className: "static z-0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...inputProps,
+            ref,
+            placeholder,
+            className: cx(
+              "m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed",
+              styles2[inputSize],
+              context?.inputClassName,
+              inputClassName
+            )
+          }
+        ),
+        orientation === "horizontal" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size,
+            iconLeading: PlusIcon,
+            slot: "increment",
+            color: "tertiary",
+            "data-number-control": "increment",
+            className: "static z-0"
+          }
+        ),
+        orientation === "vertical" && /* @__PURE__ */ jsxs("div", { className: cx("relative z-0 flex w-7 shrink-0 flex-col overflow-hidden border-l border-primary", size === "lg" && "w-7.5"), children: [
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              slot: "increment",
+              className: "relative z-0 flex flex-1 cursor-pointer items-center justify-center text-fg-quaternary outline-none transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:cursor-not-allowed disabled:opacity-50",
+              children: /* @__PURE__ */ jsx(CaretUpIcon, { className: cx("size-3 stroke-3", size === "lg" && "size-3.5 stroke-[2.57px]") })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              slot: "decrement",
+              className: "relative z-0 flex flex-1 cursor-pointer items-center justify-center border-t border-primary text-fg-quaternary outline-none transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:cursor-not-allowed disabled:opacity-50",
+              children: /* @__PURE__ */ jsx(CaretDownIcon, { className: cx("size-3 stroke-3", size === "lg" && "size-3.5 stroke-[2.57px]") })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var InputNumber = ({
+  size = "md",
+  placeholder,
+  label,
+  hint,
+  hideRequiredIndicator,
+  className,
+  ref,
+  groupRef,
+  inputClassName,
+  wrapperClassName,
+  orientation = "vertical",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    NumberField,
+    {
+      ...props,
+      className: (state) => cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className),
+      children: ({ isInvalid, isRequired }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        label && /* @__PURE__ */ jsx(Label, { isRequired: hideRequiredIndicator ? !hideRequiredIndicator : isRequired, isInvalid, children: label }),
+        /* @__PURE__ */ jsx(
+          InputNumberBase,
+          {
+            ...{
+              ref,
+              groupRef,
+              size,
+              placeholder,
+              inputClassName,
+              wrapperClassName,
+              orientation
+            }
+          }
+        ),
+        hint && /* @__PURE__ */ jsx(HintText, { isInvalid, className: cx(size === "sm" && "text-xs"), children: hint })
+      ] })
+    }
+  );
+};
+
+export { InputNumber, InputNumberBase };
+//# sourceMappingURL=input-number.js.map
+//# sourceMappingURL=input-number.js.map