@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/message-scroller.js

@@ -0,0 +1,108 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { ArrowDownIcon } from "./internal/icons.js";
+const NEAR_END = 24;
+const reducedMotion = () => {
+  var _a;
+  return typeof window !== "undefined" && ((_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
+};
+function MessageScroller(_a) {
+  var _b = _a, {
+    children,
+    label = "Conversa",
+    scrollButtonLabel = "Ir para a mensagem mais nova",
+    className,
+    onScroll
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "label",
+    "scrollButtonLabel",
+    "className",
+    "onScroll"
+  ]);
+  const ref = useRef(null);
+  const atEnd = useRef(true);
+  const goingToEnd = useRef(false);
+  const [showButton, setShowButton] = useState(false);
+  const toEnd = (behavior = "auto") => {
+    const box = ref.current;
+    if (box) box.scrollTo({ top: box.scrollHeight, behavior });
+  };
+  useLayoutEffect(() => {
+    if (atEnd.current) toEnd();
+  }, [children]);
+  useEffect(() => toEnd(), []);
+  useEffect(() => {
+    const box = ref.current;
+    if (!box) return;
+    const isAtEnd = () => box.scrollHeight - box.scrollTop - box.clientHeight <= NEAR_END;
+    const settle = () => {
+      atEnd.current = isAtEnd();
+      if (goingToEnd.current && !atEnd.current) {
+        const top = box.scrollTop;
+        requestAnimationFrame(
+          () => requestAnimationFrame(() => {
+            if (!goingToEnd.current || box.scrollTop !== top) return;
+            goingToEnd.current = false;
+            setShowButton(!isAtEnd());
+          })
+        );
+        return;
+      }
+      goingToEnd.current = false;
+      setShowButton(!atEnd.current);
+    };
+    box.addEventListener("scrollend", settle);
+    return () => box.removeEventListener("scrollend", settle);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: ["rds-scroller", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "log",
+        "aria-label": label,
+        tabIndex: 0
+      }, rest), {
+        className: "rds-scroller__viewport",
+        onScroll: (event) => {
+          const box = event.currentTarget;
+          atEnd.current = box.scrollHeight - box.scrollTop - box.clientHeight <= NEAR_END;
+          if (atEnd.current) goingToEnd.current = false;
+          if (!goingToEnd.current) setShowButton(!atEnd.current);
+          onScroll == null ? void 0 : onScroll(event);
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "rds-scroller__content", children })
+      })
+    ),
+    showButton && /* @__PURE__ */ jsx(Tooltip, { text: scrollButtonLabel, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: "rds-scroller__to-end",
+        icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+        label: scrollButtonLabel,
+        tone: "neutral",
+        variant: "outline",
+        onClick: () => {
+          var _a2;
+          (_a2 = ref.current) == null ? void 0 : _a2.focus({ preventScroll: true });
+          atEnd.current = true;
+          goingToEnd.current = true;
+          setShowButton(false);
+          toEnd(reducedMotion() ? "auto" : "smooth");
+        }
+      }
+    ) })
+  ] });
+}
+export {
+  MessageScroller
+};

package/dist/components/message.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type MessageAlign = 'start' | 'end';
+interface MessageProps extends HTMLAttributes<HTMLElement> {
+    /** start: the one answering, avatar on the left; end: the person writing, on the right. */
+    align?: MessageAlign;
+    /**
+     * Who said it (Figma: `showHeader` + `name`). Leave it out, with `time`, in the upper messages of a sequence from
+     * the same person: the header goes away.
+     */
+    name?: ReactNode;
+    /** When, as shown, such as "14:32" (Figma: `time`). */
+    time?: ReactNode;
+    /** The machine-readable moment, for the `<time>` element (ISO 8601). */
+    dateTime?: string;
+    /** An Avatar (Figma: `showAvatar`). Leave it out in the upper messages of a sequence. */
+    avatar?: ReactNode;
+    /** The Bubble (the Figma exposes it: pick its variant there). */
+    children: ReactNode;
+    /**
+     * The actions (Figma: `showFooter` + slot `footer`): neutral ghost IconButtons — copy, try again, rate; edit on
+     * the person's own message.
+     */
+    footer?: ReactNode;
+}
+/**
+ * Message — Figma [RDS] Chat/Message. One message of the conversation: avatar, name and time, the Bubble and the
+ * actions. Goes in a MessageScroller. Styles: message.css.
+ */
+declare function Message({ align, name, time, dateTime, avatar, children, footer, className, ...rest }: MessageProps): react.JSX.Element;
+
+export { Message, type MessageAlign, type MessageProps };

package/dist/components/message.js

@@ -0,0 +1,23 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Message(_a) {
+  var _b = _a, { align = "start", name, time, dateTime, avatar, children, footer, className } = _b, rest = __objRest(_b, ["align", "name", "time", "dateTime", "avatar", "children", "footer", "className"]);
+  return /* @__PURE__ */ jsxs("article", __spreadProps(__spreadValues({}, rest), { className: ["rds-message", `rds-message--${align}`, className].filter(Boolean).join(" "), children: [
+    avatar && /* @__PURE__ */ jsx("div", { className: "rds-message__avatar", children: avatar }),
+    /* @__PURE__ */ jsxs("div", { className: "rds-message__content", children: [
+      (name || time) && /* @__PURE__ */ jsxs("p", { className: "rds-message__header", children: [
+        name && /* @__PURE__ */ jsx("span", { className: "rds-message__name", children: name }),
+        time && /* @__PURE__ */ jsx("time", { className: "rds-message__time", dateTime, children: time })
+      ] }),
+      children,
+      footer && /* @__PURE__ */ jsx("div", { className: "rds-message__footer", children: footer })
+    ] })
+  ] }));
+}
+export {
+  Message
+};

package/dist/components/navigation-menu.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { ComponentType, ReactNode } from 'react';
+
+interface NavigationMenuLink {
+    /** The link's name (Figma: .navmenu/link `title`). */
+    title: string;
+    /** One short phrase under the title (Figma: `showDescription` + `description`). */
+    description?: string;
+    href: string;
+}
+/** A section: a label that opens a panel of links (Figma: .navmenu/trigger), or a plain link. */
+type NavigationMenuEntry = {
+    label: string;
+    links: NavigationMenuLink[];
+} | {
+    label: string;
+    href: string;
+};
+/** A link component that spreads the props it gets onto its element (Next's `Link` does). */
+type NavigationMenuLinkComponent = ComponentType<{
+    href: string;
+    className?: string;
+    children: ReactNode;
+}>;
+interface NavigationMenuProps {
+    /** The sections, in order (Figma: the `items` slot). A panel holds up to eight links (Figma: the `links` slot). */
+    items: NavigationMenuEntry[];
+    /** The nav's name ("Principal"). */
+    'aria-label': string;
+    /** The link element (default `<a>`). Pass a framework Link (Next's `Link`) to navigate on the client. */
+    linkAs?: NavigationMenuLinkComponent;
+    className?: string;
+}
+/**
+ * NavigationMenu — Figma [RDS] Navigation/NavigationMenu. The site's top links that open a panel of sub-links, on
+ * desktop (Radix NavigationMenu). Click, Enter, Space and hover open a panel; Esc closes it and gives the focus back
+ * to its trigger; the arrows move between the items. Inside the signed-in product, the navigation is the Sidebar.
+ * Styles: navigation-menu.css.
+ */
+declare function NavigationMenu({ items, linkAs: Link, className, ...rest }: NavigationMenuProps): react.JSX.Element;
+
+export { NavigationMenu, type NavigationMenuEntry, type NavigationMenuLink, type NavigationMenuLinkComponent, type NavigationMenuProps };

package/dist/components/navigation-menu.js

@@ -0,0 +1,30 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Nav from "@radix-ui/react-navigation-menu";
+import { ChevronDownIcon } from "./internal/icons.js";
+function Anchor(props) {
+  return /* @__PURE__ */ jsx("a", __spreadValues({}, props));
+}
+function NavigationMenu(_a) {
+  var _b = _a, { items, linkAs: Link = Anchor, className } = _b, rest = __objRest(_b, ["items", "linkAs", "className"]);
+  return /* @__PURE__ */ jsx(Nav.Root, __spreadProps(__spreadValues({}, rest), { className: ["rds-navmenu", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx(Nav.List, { className: "rds-navmenu__items", children: items.map(
+    (item) => "links" in item ? /* @__PURE__ */ jsxs(Nav.Item, { className: "rds-navmenu__item", children: [
+      /* @__PURE__ */ jsxs(Nav.Trigger, { className: "rds-navmenu__trigger", children: [
+        item.label,
+        /* @__PURE__ */ jsx("span", { className: "rds-navmenu__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+      ] }),
+      /* @__PURE__ */ jsx(Nav.Content, { className: "rds-navmenu__panel", children: /* @__PURE__ */ jsx("ul", { className: "rds-navmenu__links", children: item.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Nav.Link, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: link.href, className: "rds-navmenu__link", children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-navmenu__link-title", children: link.title }),
+        link.description && /* @__PURE__ */ jsx("span", { className: "rds-navmenu__link-description", children: link.description })
+      ] }) }) }, link.href)) }) })
+    ] }, item.label) : /* @__PURE__ */ jsx(Nav.Item, { className: "rds-navmenu__item", children: /* @__PURE__ */ jsx(Nav.Link, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: item.href, className: "rds-navmenu__trigger", children: item.label }) }) }, item.label)
+  ) }) }));
+}
+export {
+  NavigationMenu
+};

package/dist/components/newsletter.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, FormEvent } from 'react';
+
+interface NewsletterProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'onSubmit'> {
+    /** The block's title, an h2 that names the section and the form (Figma: `title`). */
+    title: ReactNode;
+    description?: ReactNode;
+    /** A line under the form: what the person gets, how to cancel (Figma: `note`). */
+    note?: ReactNode;
+    /** The field's name, off screen but read (the Figma shows only the placeholder). */
+    inputLabel?: string;
+    placeholder?: string;
+    /** The button's verb. */
+    submitLabel?: string;
+    /** The message when the e-mail does not look valid. */
+    invalidMessage?: string;
+    /** Runs with the e-mail when it looks valid; otherwise the field shows `invalidMessage`. */
+    onSubscribe: (email: string, event: FormEvent<HTMLFormElement>) => void;
+}
+/**
+ * Newsletter — Figma [RDS] Blocks/Newsletter. A call to subscribe by e-mail, centred on the page: title, sentence,
+ * the field with the button and a note. Below 640 of container width the field and the button stack (Figma:
+ * `screen`). Styles: newsletter.css.
+ */
+declare function Newsletter({ title, description, note, inputLabel, placeholder, submitLabel, invalidMessage, onSubscribe, className, ...rest }: NewsletterProps): react.JSX.Element;
+
+export { Newsletter, type NewsletterProps };

package/dist/components/newsletter.js

@@ -0,0 +1,75 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { BlockHeading } from "./internal/block.js";
+const LOOKS_LIKE_EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function Newsletter(_a) {
+  var _b = _a, {
+    title,
+    description,
+    note,
+    inputLabel = "E-mail",
+    placeholder = "nome@empresa.com.br",
+    submitLabel = "Assinar",
+    invalidMessage = "Falta o @ ou o dom\xEDnio. Exemplo: nome@empresa.com.br",
+    onSubscribe,
+    className
+  } = _b, rest = __objRest(_b, [
+    "title",
+    "description",
+    "note",
+    "inputLabel",
+    "placeholder",
+    "submitLabel",
+    "invalidMessage",
+    "onSubscribe",
+    "className"
+  ]);
+  const titleId = useId();
+  const [error, setError] = useState(false);
+  return /* @__PURE__ */ jsx("section", __spreadProps(__spreadValues({ "aria-labelledby": titleId }, rest), { className: ["rds-block", "rds-newsletter", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "rds-block__inner", children: [
+    /* @__PURE__ */ jsx(BlockHeading, { title, description, titleId }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "rds-newsletter__form",
+        "aria-labelledby": titleId,
+        noValidate: true,
+        onSubmit: (event) => {
+          var _a2;
+          event.preventDefault();
+          const email = String((_a2 = new FormData(event.currentTarget).get("email")) != null ? _a2 : "").trim();
+          const valid = LOOKS_LIKE_EMAIL.test(email);
+          setError(!valid);
+          if (valid) onSubscribe(email, event);
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "rds-newsletter__field", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              name: "email",
+              type: "email",
+              autoComplete: "email",
+              "aria-label": inputLabel,
+              placeholder,
+              errorMessage: error ? invalidMessage : void 0,
+              onChange: () => error && setError(false)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", children: submitLabel })
+        ]
+      }
+    ),
+    note && /* @__PURE__ */ jsx("p", { className: "rds-newsletter__note", children: note })
+  ] }) }));
+}
+export {
+  Newsletter
+};

package/dist/components/number-input.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { FieldTextProps } from './internal/field.js';
+
+interface NumberInputStep {
+    /** The value the chip sets. */
+    value: number;
+    /** What the chip says. By default the value with the unit ("500 un"). */
+    label?: ReactNode;
+}
+interface NumberInputProps extends Omit<FieldTextProps, 'labelPosition'> {
+    /** Controlled: the number (Figma: `value`), or null for none. */
+    value?: number | null;
+    /** Uncontrolled: the number at first. */
+    defaultValue?: number | null;
+    /**
+     * Called with the new number, after `debounce` ms without another change (a run of + presses sends one value).
+     * null when the field is emptied.
+     */
+    onChange?: (value: number | null) => void;
+    /** The smallest value: at it the − turns off (Figma: limit=min). Also the base of the steps. */
+    min?: number;
+    /** The largest value: at it the + turns off (Figma: limit=max). */
+    max?: number;
+    /** How much − and + move, and the multiples the value snaps to, counted from `min`. */
+    step?: number;
+    /** After the number (Figma: `showUnit` + `unit`): un, kg, cx. Read with the value when it is text. */
+    unit?: ReactNode;
+    /** Named steps under the field (Figma: `showPresets`), as FilterChips: the lots of the domain (500 un, 1000 un). */
+    steps?: (number | NumberInputStep)[];
+    /** The name of the steps' group. */
+    stepsLabel?: string;
+    /** Milliseconds without a change before `onChange` fires. 0 sends every change at once. */
+    debounce?: number;
+    /** The − button's name. */
+    decrementLabel?: string;
+    /** The + button's name. */
+    incrementLabel?: string;
+    /** The form field name: a hidden input carries the number. */
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** The name when there is no visible label. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * NumberInput — Figma [RDS] Forms/NumberInput (rojaostudio/ds#9). A number with − and + in the same frame, segments
+ * split by an inner border: for small whole quantities moved a little at a time (items in a cart, people in a
+ * booking, instalments). The number in the middle is typed; the field is a spinbutton, so the arrows move it (Page
+ * Up/Down by ten steps, Home/End to the limits) and − and + stay out of the Tab order. At a limit its button turns
+ * off. A price, a CPF or a CEP is the Input; a continuous range, the Slider; the steps of a flow, the
+ * FloatingStepper. Styles: number-input.css and internal/field.css.
+ */
+declare function NumberInput({ label, hint, error, errorMessage, required, value, defaultValue, onChange, min, max, step, unit, steps, stepsLabel, debounce, decrementLabel, incrementLabel, name, placeholder, disabled, id, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: NumberInputProps): react.JSX.Element;
+
+export { NumberInput, type NumberInputProps, type NumberInputStep };

package/dist/components/number-input.js

@@ -0,0 +1,234 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { FilterChip, FilterChipGroup } from "./filter-chip.js";
+import { FieldAction, FieldShell, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+import { MinusIcon, PlusIcon } from "./internal/icons.js";
+const decimals = (n) => {
+  var _a, _b;
+  return Number.isInteger(n) ? 0 : (_b = (_a = String(n).split(".")[1]) == null ? void 0 : _a.length) != null ? _b : 0;
+};
+const parse = (text) => {
+  const clean = text.trim().replace(/\s/g, "").replace(",", ".");
+  if (clean === "" || clean === "-") return null;
+  const n = Number(clean);
+  return Number.isFinite(n) ? n : NaN;
+};
+function NumberInput({
+  label,
+  hint,
+  error,
+  errorMessage,
+  required,
+  value,
+  defaultValue = null,
+  onChange,
+  min,
+  max,
+  step = 1,
+  unit,
+  steps,
+  stepsLabel = "Valores sugeridos",
+  debounce = 300,
+  decrementLabel = "Diminuir",
+  incrementLabel = "Aumentar",
+  name,
+  placeholder,
+  disabled,
+  id,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  var _a;
+  warnIfUnlabelled("NumberInput", label, ariaLabel, ariaLabelledBy);
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, hint, error, errorMessage);
+  const places = Math.max(decimals(step), decimals(min != null ? min : 0));
+  const format = (n) => n === null ? "" : n.toLocaleString("pt-BR", { minimumFractionDigits: 0, maximumFractionDigits: places, useGrouping: false });
+  const [current, setCurrent] = useState(value !== void 0 ? value : defaultValue);
+  const [text, setText] = useState(() => format(current));
+  const [editing, setEditing] = useState(false);
+  const timer = useRef(void 0);
+  const pending = useRef(false);
+  const input = useRef(null);
+  const latest = useRef(current);
+  latest.current = current;
+  useEffect(() => {
+    if (value === void 0 || pending.current) return;
+    setCurrent(value);
+  }, [value]);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const clamp = (n) => Math.min(max != null ? max : Infinity, Math.max(min != null ? min : -Infinity, n));
+  const round = (n) => Number(n.toFixed(places));
+  function emit(next) {
+    latest.current = next;
+    setCurrent(next);
+    clearTimeout(timer.current);
+    if (debounce <= 0) {
+      onChange == null ? void 0 : onChange(next);
+      return;
+    }
+    pending.current = true;
+    timer.current = setTimeout(() => {
+      pending.current = false;
+      onChange == null ? void 0 : onChange(next);
+    }, debounce);
+  }
+  function nudge(direction, times = 1, start = latest.current) {
+    const base = min != null ? min : 0;
+    const from = start != null ? start : direction > 0 ? (min != null ? min : 0) - step : (max != null ? max : 0) + step;
+    const k = (from - base) / step;
+    const epsilon = 1e-9;
+    const target = direction > 0 ? Math.floor(k + epsilon) + times : Math.ceil(k - epsilon) - times;
+    const next = clamp(round(base + target * step));
+    setEditing(false);
+    if (next !== latest.current) emit(next);
+  }
+  function commitText() {
+    setEditing(false);
+    const parsed = parse(text);
+    if (parsed === null) {
+      if (current !== null) emit(null);
+      return;
+    }
+    if (Number.isNaN(parsed)) return;
+    const next = clamp(round(parsed));
+    if (next !== current) emit(next);
+  }
+  function keyDown(event) {
+    const typed = editing ? parse(text) : current;
+    const start = typed === null || Number.isNaN(typed) ? current : clamp(round(typed));
+    const moves = {
+      ArrowUp: () => nudge(1, 1, start),
+      ArrowDown: () => nudge(-1, 1, start),
+      PageUp: () => nudge(1, 10, start),
+      PageDown: () => nudge(-1, 10, start),
+      Home: () => min !== void 0 && emit(min),
+      End: () => max !== void 0 && emit(max)
+    };
+    const move = moves[event.key];
+    if (move) {
+      event.preventDefault();
+      setEditing(false);
+      move();
+    } else if (event.key === "Enter") {
+      commitText();
+    }
+  }
+  const atMin = min !== void 0 && current !== null && current <= min;
+  const atMax = max !== void 0 && current !== null && current >= max;
+  const shown = editing ? text : format(current);
+  const unitText = typeof unit === "string" || typeof unit === "number" ? String(unit) : void 0;
+  const presets = (steps != null ? steps : []).map((s) => typeof s === "number" ? { value: s } : s);
+  const button = (direction) => /* @__PURE__ */ jsx(
+    FieldAction,
+    {
+      label: direction > 0 ? incrementLabel : decrementLabel,
+      icon: direction > 0 ? /* @__PURE__ */ jsx(PlusIcon, {}) : /* @__PURE__ */ jsx(MinusIcon, {}),
+      tabIndex: -1,
+      disabled: disabled || (direction > 0 ? atMax : atMin),
+      onMouseDown: (event) => {
+        var _a2;
+        event.preventDefault();
+        (_a2 = input.current) == null ? void 0 : _a2.focus();
+      },
+      onClick: () => nudge(direction)
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
+    {
+      kind: "rds-number-input",
+      controlId,
+      hintId,
+      errorId,
+      label,
+      hint,
+      errorMessage,
+      invalid,
+      required,
+      disabled,
+      boxClassName: "rds-number-input__box",
+      className,
+      style,
+      afterBox: presets.length > 0 && /* @__PURE__ */ jsx(FilterChipGroup, { "aria-label": stepsLabel, className: "rds-number-input__steps", children: presets.map((preset) => {
+        var _a2;
+        return /* @__PURE__ */ jsx(
+          FilterChip,
+          {
+            active: current === preset.value,
+            disabled,
+            onActiveChange: () => {
+              setEditing(false);
+              if (current !== preset.value) emit(clamp(preset.value));
+            },
+            children: (_a2 = preset.label) != null ? _a2 : unitText ? `${format(preset.value)} ${unitText}` : format(preset.value)
+          },
+          preset.value
+        );
+      }) }),
+      children: [
+        button(-1),
+        /* @__PURE__ */ jsx("span", { className: "rds-number-input__divider", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "rds-number-input__value",
+            onMouseDown: (event) => {
+              var _a2;
+              if (event.target !== input.current) {
+                event.preventDefault();
+                (_a2 = input.current) == null ? void 0 : _a2.focus();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: input,
+                  id: controlId,
+                  className: "rds-field__control",
+                  type: "text",
+                  role: "spinbutton",
+                  inputMode: places > 0 || (min != null ? min : 0) < 0 ? "decimal" : "numeric",
+                  autoComplete: "off",
+                  size: Math.max(1, shown.length || ((_a = placeholder == null ? void 0 : placeholder.length) != null ? _a : 1)),
+                  "aria-valuenow": current != null ? current : void 0,
+                  "aria-valuemin": min,
+                  "aria-valuemax": max,
+                  "aria-valuetext": current !== null && unitText ? `${format(current)} ${unitText}` : void 0,
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": ariaLabelledBy,
+                  "aria-invalid": invalid || void 0,
+                  "aria-describedby": describedBy,
+                  "aria-required": required || void 0,
+                  required,
+                  disabled,
+                  placeholder,
+                  value: shown,
+                  onChange: (event) => {
+                    setText(event.target.value.replace(/[^\d,.\-\s]/g, ""));
+                    setEditing(true);
+                  },
+                  onKeyDown: keyDown,
+                  onBlur: () => {
+                    if (editing) commitText();
+                  }
+                }
+              ),
+              unit !== void 0 && unit !== null && unit !== "" && /* @__PURE__ */ jsx("span", { className: "rds-number-input__unit", "aria-hidden": "true", children: unit })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "rds-number-input__divider", "aria-hidden": "true" }),
+        button(1),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current != null ? current : "" })
+      ]
+    }
+  );
+}
+export {
+  NumberInput
+};