@vela-ui/react/dist/chunk-S5B34AW2.mjs

Vela UI React components

import {
  Input
} from "./chunk-NHADI6X2.mjs";
import {
  Description,
  FieldError,
  Label
} from "./chunk-FFLNGARZ.mjs";
import {
  ChevronUpIcon
} from "./chunk-S76YU4SO.mjs";
import {
  ChevronDownIcon
} from "./chunk-H772AAAW.mjs";

// src/components/number-field.tsx
import {
  Button as AriaButton,
  Group as AriaGroup,
  NumberField as AriaNumberField,
  composeRenderProps
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { jsx, jsxs } from "react/jsx-runtime";
var buttonVariants = tv({
  base: "text-muted-foreground hover:bg-accent flex flex-1 cursor-pointer items-center justify-center leading-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
});
var numberFieldVariants = tv({
  slots: {
    root: "group flex flex-col gap-2",
    group: "relative isolate z-0",
    control: "absolute end-0 top-0 z-10 m-px flex h-[calc(100%-2px)] flex-col border-s-1"
  },
  variants: {
    size: {
      xs: { control: "w-4 text-xs" },
      sm: { control: "w-5 text-xs" },
      md: { control: "w-6 text-sm" },
      lg: { control: "w-7 text-base" },
      xl: { control: "w-8 text-base" }
    }
  },
  defaultVariants: {
    size: "md"
  }
});
var { root, group, control } = numberFieldVariants();
function NumberField({
  label,
  description,
  errorMessage,
  size,
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxs(
    AriaNumberField,
    {
      ...props,
      className: composeRenderProps(className, (className2) => root({ className: className2 })),
      children: [
        label && /* @__PURE__ */ jsx(Label, { children: label }),
        /* @__PURE__ */ jsxs(AriaGroup, { className: group(), children: [
          /* @__PURE__ */ jsx(Input, { size }),
          /* @__PURE__ */ jsxs("div", { className: control({ size }), children: [
            /* @__PURE__ */ jsx(AriaButton, { className: buttonVariants({ className: "rounded-se-md" }), slot: "increment", children: /* @__PURE__ */ jsx(ChevronUpIcon, {}) }),
            /* @__PURE__ */ jsx(
              AriaButton,
              {
                className: buttonVariants({ className: "rounded-ee-md border-t-1" }),
                slot: "decrement",
                children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
              }
            )
          ] })
        ] }),
        description && /* @__PURE__ */ jsx(Description, { children: description }),
        /* @__PURE__ */ jsx(FieldError, { children: errorMessage })
      ]
    }
  );
}

export {
  NumberField
};