@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-6D2VLITE.mjs

@@ -0,0 +1,431 @@
+import {
+  useChartInteraction
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
+import {
+  ChartTooltip
+} from "./chunk-IPI45RUK.mjs";
+import {
+  ChartCanvas
+} from "./chunk-OP77MPGN.mjs";
+import {
+  ChartLegend
+} from "./chunk-A4JRK5SM.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/PieChart.tsx
+import { useCallback, useId, useMemo } from "react";
+import {
+  classNames,
+  getStableChartGradientPrefix,
+  resolveChartPalette,
+  buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  resolveChartTooltipContent,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  getChartLabels,
+  mergeTigerLocale,
+  formatChartTemplate,
+  layoutPieSlices,
+  pieSliceDisplayLabel,
+  pieSliceTransitionClasses,
+  pieSliceLabelInsideClasses,
+  resolvePieRadii,
+  DEFAULT_PIE_START_ANGLE,
+  DONUT_ENTRANCE_CLASS,
+  PIE_BASE_SHADOW,
+  PIE_EMPHASIS_SHADOW,
+  getChartElementOpacity
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PieChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  responsive = false,
+  data,
+  innerRadius,
+  innerRadiusRatio,
+  outerRadius,
+  startAngle = DEFAULT_PIE_START_ANGLE,
+  endAngle = Math.PI * 2,
+  padAngle = 0,
+  colors,
+  showLabels = false,
+  labelFormatter,
+  labelPosition = "inside",
+  borderWidth = 2,
+  borderColor = "var(--tiger-surface,#ffffff)",
+  hoverOffset = 8,
+  shadow = false,
+  gradient = false,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  tooltipFormatter,
+  legendFormatter,
+  centerValue,
+  centerLabel,
+  animated = false,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSliceClick,
+  onSliceHover
+}) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
+  const interactive = hoverable || selectable || Boolean(onSliceClick);
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("pie", gradientId),
+    [gradientId]
+  );
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    resolvedSelectedIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave
+  } = useChartInteraction({
+    hoverable,
+    showTooltip,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onSliceHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    onClick: (index, datum) => {
+      if (datum !== void 0) onSliceClick?.(index, datum);
+    }
+  });
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
+  );
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const radii = useMemo(
+    () => resolvePieRadii({
+      innerWidth: innerRect.width,
+      innerHeight: innerRect.height,
+      innerRadius,
+      outerRadius,
+      innerRadiusRatio,
+      labelPosition,
+      hoverOffset
+    }),
+    [
+      innerRect.width,
+      innerRect.height,
+      innerRadius,
+      outerRadius,
+      innerRadiusRatio,
+      labelPosition,
+      hoverOffset
+    ]
+  );
+  const slices = useMemo(
+    () => layoutPieSlices(data, {
+      cx: radii.cx,
+      cy: radii.cy,
+      innerRadius: radii.innerRadius,
+      outerRadius: radii.outerRadius,
+      startAngle,
+      endAngle,
+      padAngle,
+      palette,
+      gradient,
+      gradientPrefix,
+      hoverOffset,
+      labelPosition
+    }),
+    [
+      data,
+      radii.cx,
+      radii.cy,
+      radii.innerRadius,
+      radii.outerRadius,
+      startAngle,
+      endAngle,
+      padAngle,
+      palette,
+      gradient,
+      gradientPrefix,
+      hoverOffset,
+      labelPosition
+    ]
+  );
+  const total = useMemo(() => slices.reduce((sum, slice) => sum + slice.value, 0), [slices]);
+  const sliceName = useCallback(
+    (datum, index) => pieSliceDisplayLabel(datum, index, labels.sliceName),
+    [labels.sliceName]
+  );
+  const legendItems = useMemo(
+    () => buildChartLegendItems({
+      data: slices.map((slice) => slice.datum),
+      palette,
+      activeIndex,
+      selectedIndex: resolvedSelectedIndex,
+      getLabel: (d, i) => legendFormatter ? legendFormatter(d, i) : sliceName(d, i),
+      getColor: (d, i) => d.color ?? palette[i % palette.length]
+    }),
+    [slices, legendFormatter, palette, activeIndex, resolvedSelectedIndex, sliceName]
+  );
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, data, tooltipFormatter, (datum, index) => {
+      const name = sliceName(datum, index);
+      const percentage = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
+      return `${name}: ${datum.value} (${percentage}%)`;
+    }),
+    [resolvedHoveredIndex, data, tooltipFormatter, total, sliceName]
+  );
+  const visualActive = slices.findIndex(
+    (slice) => slice.index === (activeIndex ?? resolvedHoveredIndex)
+  );
+  const centerParts = [centerValue, centerLabel].filter((part) => part !== void 0);
+  const resolvedDesc = [desc, ...centerParts.map((part) => String(part))].filter(Boolean).join(" ");
+  const handleSliceKeyDown = (event, visualIndex) => {
+    if (isChartNavigationKey(event.key)) {
+      event.preventDefault();
+      const nextVisual = nextChartRovingIndex(visualIndex, event.key, slices.length);
+      const next = slices[nextVisual];
+      const node = event.currentTarget.parentElement?.querySelector(
+        `[data-pie-slice][data-index="${next.index}"]`
+      );
+      if (node instanceof SVGElement) node.focus();
+      handleMouseEnter(next.index, event);
+      return;
+    }
+    handleKeyDown(event, slices[visualIndex].index);
+  };
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      responsive,
+      title,
+      desc: resolvedDesc || void 0,
+      className: animated ? DONUT_ENTRANCE_CLASS : void 0,
+      onResolvedSizeChange,
+      children: [
+        gradient && /* @__PURE__ */ jsx("defs", { children: slices.map((slice) => /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: `${gradientPrefix}-${slice.index}`,
+            gradientUnits: "userSpaceOnUse",
+            x1: radii.cx,
+            y1: radii.cy - radii.outerRadius,
+            x2: radii.cx,
+            y2: radii.cy + radii.outerRadius,
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: slice.color, stopOpacity: 1 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: slice.color, stopOpacity: 0.7 })
+            ]
+          },
+          `pie-grad-${slice.index}`
+        )) }),
+        radii.innerRadius > 0 && centerParts.length > 0 && /* @__PURE__ */ jsx("clipPath", { id: `${gradientPrefix}-center`, children: /* @__PURE__ */ jsx("circle", { cx: radii.cx, cy: radii.cy, r: radii.innerRadius }) }),
+        slices.map((slice, visualIndex) => {
+          const isEmphasized = activeIndex === slice.index;
+          const ariaLabel = formatChartTemplate(labels.sliceAriaLabel, {
+            label: sliceName(slice.datum, slice.index),
+            value: slice.value,
+            percent: slice.percent.toFixed(1)
+          });
+          return /* @__PURE__ */ jsx(
+            "g",
+            {
+              transform: interactive && isEmphasized ? `translate(${slice.hoverDx} ${slice.hoverDy})` : void 0,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: slice.path,
+                  fill: slice.fill,
+                  opacity: getChartElementOpacity(slice.index, activeIndex, {
+                    activeOpacity,
+                    inactiveOpacity
+                  }),
+                  stroke: borderColor,
+                  strokeWidth: borderWidth,
+                  strokeLinejoin: "round",
+                  "data-pie-slice": "true",
+                  "data-index": slice.index,
+                  tabIndex: interactive ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+                  role: interactive ? "button" : void 0,
+                  "aria-hidden": interactive ? void 0 : true,
+                  "aria-label": interactive ? ariaLabel : void 0,
+                  className: classNames(interactive && "cursor-pointer", pieSliceTransitionClasses),
+                  style: {
+                    filter: shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
+                  },
+                  onMouseEnter: (e) => handleMouseEnter(slice.index, e),
+                  onMouseMove: handleMouseMove,
+                  onMouseLeave: handleMouseLeave,
+                  onFocus: (e) => handleMouseEnter(slice.index, e),
+                  onClick: () => handleClick(slice.index),
+                  onKeyDown: (e) => handleSliceKeyDown(e, visualIndex)
+                }
+              )
+            },
+            `slice-${slice.index}`
+          );
+        }),
+        showLabels && labelPosition === "outside" && slices.map((slice) => {
+          const text = labelFormatter ? labelFormatter(slice.value, slice.datum, slice.index) : `${sliceName(slice.datum, slice.index)} ${slice.percent.toFixed(1)}%`;
+          return /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(
+              "polyline",
+              {
+                points: slice.outside?.points,
+                fill: "none",
+                stroke: slice.color,
+                strokeWidth: 1,
+                opacity: 0.5
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: slice.outside?.x,
+                y: slice.outside?.y,
+                textAnchor: slice.outside?.textAnchor,
+                dominantBaseline: "middle",
+                className: "fill-[color:var(--tiger-text,#1f2937)] text-xs",
+                children: text
+              }
+            )
+          ] }, `label-group-${slice.index}`);
+        }),
+        showLabels && labelPosition !== "outside" && slices.map((slice) => {
+          const text = labelFormatter ? labelFormatter(slice.value, slice.datum, slice.index) : sliceName(slice.datum, slice.index);
+          return /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: slice.labelX,
+              y: slice.labelY,
+              className: pieSliceLabelInsideClasses,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              "aria-hidden": "true",
+              children: text
+            },
+            `label-${slice.index}`
+          );
+        }),
+        centerParts.length > 0 && /* @__PURE__ */ jsxs(
+          "g",
+          {
+            "data-donut-center": "true",
+            clipPath: radii.innerRadius > 0 ? `url(#${gradientPrefix}-center)` : void 0,
+            "aria-hidden": "true",
+            children: [
+              centerValue !== void 0 && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: radii.cx,
+                  y: centerLabel !== void 0 ? radii.cy - 8 : radii.cy,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  className: "fill-[color:var(--tiger-text,#1f2937)] text-xl font-semibold",
+                  children: `${centerValue}`
+                }
+              ),
+              centerLabel !== void 0 && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: radii.cx,
+                  y: centerValue !== void 0 ? radii.cy + 12 : radii.cy,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  className: "fill-[color:var(--tiger-text-secondary,#6b7280)] text-xs",
+                  children: centerLabel
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      open: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getCartesianChartShellClasses({
+        showLegend,
+        legendPosition,
+        responsive,
+        className
+      }),
+      "data-pie-chart": "",
+      "data-donut-chart": radii.innerRadius > 0 ? "" : void 0,
+      children: [
+        chart,
+        showLegend ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: legendItems,
+            orientation: chartLegendOrientationFromPosition(legendPosition),
+            markerSize: legendMarkerSize,
+            gap: legendGap,
+            interactive: hoverable || selectable,
+            ariaLabel: labels.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }
+        ) : null,
+        tooltip
+      ]
+    }
+  );
+};
+var PieChart_default = PieChart;
+
+export {
+  PieChart,
+  PieChart_default
+};

package/dist/chunk-6IJFLGCN.mjs

@@ -0,0 +1,274 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useBodyScrollLock,
+  useEscapeKey,
+  useFocusTrap
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/NumberKeyboard.tsx
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  applyNumberKeyboardKey,
+  classNames,
+  getNumberKeyboardInteractiveIndexes,
+  getNumberKeyboardKeyClasses,
+  getNumberKeyboardKeys,
+  getNumberKeyboardLabels,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  moveNumberKeyboardIndex,
+  numberKeyboardEmptyKeyClasses,
+  numberKeyboardGridClasses,
+  numberKeyboardRootClasses,
+  numberKeyboardScrimClasses,
+  numberKeyboardSheetClasses,
+  postNumberKeyboardValue,
+  resolveAnchoredOverlayTarget,
+  resolveNumberKeyboardPhysicalKey
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var NumberKeyboard = forwardRef(
+  function NumberKeyboard2({
+    value,
+    defaultValue,
+    mode = "number",
+    maxLength,
+    precision,
+    decimalSeparator = ".",
+    disabled = false,
+    readonly = false,
+    confirmText,
+    deleteText,
+    ariaLabel,
+    showConfirm = true,
+    open,
+    defaultOpen,
+    name,
+    id,
+    status: statusProp,
+    locale,
+    labels: labelsOverride,
+    className,
+    style,
+    onChange,
+    onOpenChange,
+    onKeyPress,
+    onDelete,
+    onConfirm,
+    onBlur,
+    ...rest
+  }, ref) {
+    const config = useTigerConfig();
+    const formItemControl = useFormItemControlContext();
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(
+      () => getNumberKeyboardLabels(mergedLocale, {
+        ...labelsOverride,
+        ariaLabel: ariaLabel?.trim() || labelsOverride?.ariaLabel,
+        deleteText: deleteText?.trim() || labelsOverride?.deleteText,
+        confirmText: confirmText?.trim()
+      }),
+      [ariaLabel, confirmText, deleteText, labelsOverride, mergedLocale]
+    );
+    const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+    const status = statusProp ?? formItemControl?.status ?? "default";
+    const effectiveId = id ?? formItemControl?.id;
+    const effectiveName = name ?? formItemControl?.name;
+    const describedBy = mergeAriaDescribedBy(
+      typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+      formItemControl?.describedBy
+    );
+    const labelledby = typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim() ? rest["aria-labelledby"] : formItemControl?.labelId;
+    const parsedValue = value !== void 0 ? value : formItemControl?.value;
+    const overlayMode = open !== void 0 || defaultOpen !== void 0;
+    const [currentValue, setCurrentValue] = useControlledState({
+      value: value !== void 0 || formItemControl?.value !== void 0 ? parsedValue : void 0,
+      defaultValue: defaultValue ?? "",
+      onChange: (next, payload) => {
+        onChange?.(next, payload);
+        formItemControl?.onChange?.(next);
+      },
+      postState: (next) => postNumberKeyboardValue(next, mode)
+    });
+    const [isOpen, setOpen] = useControlledState({
+      value: open,
+      defaultValue: defaultOpen ?? false,
+      onChange: onOpenChange
+    });
+    const rootRef = useRef(null);
+    const sheetRef = useRef(null);
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const keys = useMemo(
+      () => getNumberKeyboardKeys({
+        mode,
+        decimalSeparator,
+        showConfirm,
+        labels
+      }),
+      [decimalSeparator, labels, mode, showConfirm]
+    );
+    const interactive = useMemo(() => getNumberKeyboardInteractiveIndexes(keys), [keys]);
+    const [activeIndex, setActiveIndex] = useState(() => interactive[0] ?? 0);
+    useEffect(() => {
+      if (!interactive.includes(activeIndex)) setActiveIndex(interactive[0] ?? 0);
+    }, [activeIndex, interactive]);
+    const overlayEnabled = overlayMode && isOpen && !effectiveDisabled;
+    useFocusTrap({ enabled: overlayEnabled, containerRef: sheetRef, inert: true });
+    useBodyScrollLock({ enabled: overlayEnabled });
+    useEscapeKey({
+      enabled: overlayEnabled,
+      onEscape: () => setOpen(false),
+      layerRef: sheetRef
+    });
+    const inputOptions = {
+      mode,
+      maxLength,
+      precision,
+      decimalSeparator
+    };
+    const closeSheet = useCallback(() => {
+      if (overlayMode) setOpen(false);
+    }, [overlayMode, setOpen]);
+    function applyKey(key) {
+      if (effectiveDisabled || readonly || key.type === "empty") return;
+      const result = applyNumberKeyboardKey(currentValue, key, inputOptions);
+      const payload = {
+        value: result.nextValue,
+        key: key.value,
+        action: result.action,
+        mode
+      };
+      onKeyPress?.(key, payload);
+      if (result.action === "confirm") {
+        onConfirm?.(currentValue, { ...payload, value: currentValue });
+        closeSheet();
+        return;
+      }
+      if (result.action === "delete") onDelete?.(result.nextValue, payload);
+      if (result.changed) setCurrentValue(result.nextValue, payload);
+    }
+    function handleGroupKeyDown(event) {
+      if (effectiveDisabled) return;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        setActiveIndex((index) => moveNumberKeyboardIndex(keys, index, event.key));
+        return;
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        const key = keys[activeIndex];
+        if (key) applyKey(key);
+        return;
+      }
+      const physical = resolveNumberKeyboardPhysicalKey(event.key, inputOptions);
+      if (!physical) return;
+      event.preventDefault();
+      const match = keys.find((key) => key.type === physical.type && key.value === physical.value) ?? {
+        type: physical.type,
+        value: physical.value,
+        label: physical.value,
+        ariaLabel: physical.value
+      };
+      applyKey(match);
+    }
+    function handleFocusOut(event) {
+      const next = event.relatedTarget;
+      const root = overlayMode ? sheetRef.current : rootRef.current;
+      if (root && next && root.contains(next)) return;
+      formItemControl?.onBlur?.();
+      onBlur?.(event);
+    }
+    const { "aria-describedby": _describedBy, "aria-labelledby": _labelledby, ...rootRest } = rest;
+    const group = (sheet) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: sheet ? sheetRef : setRootRef,
+        className: classNames(
+          sheet ? numberKeyboardSheetClasses : numberKeyboardRootClasses,
+          className
+        ),
+        style: sheet ? void 0 : style,
+        role: sheet ? "dialog" : "group",
+        "aria-modal": sheet || void 0,
+        id: effectiveId,
+        tabIndex: effectiveDisabled ? -1 : 0,
+        "aria-label": labelledby ? void 0 : labels.ariaLabel,
+        "aria-labelledby": labelledby,
+        "aria-describedby": describedBy,
+        "aria-disabled": effectiveDisabled || void 0,
+        "aria-readonly": readonly || void 0,
+        "aria-invalid": status === "error" ? true : void 0,
+        "aria-required": formItemControl?.required || void 0,
+        "data-tiger-number-keyboard": "",
+        onKeyDown: handleGroupKeyDown,
+        onBlur: handleFocusOut,
+        ...rootRest,
+        children: [
+          effectiveName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: effectiveName, value: currentValue }) : null,
+          /* @__PURE__ */ jsx("div", { className: numberKeyboardGridClasses, children: keys.map(
+            (key, index) => key.type === "empty" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: numberKeyboardEmptyKeyClasses,
+                "aria-hidden": "true"
+              },
+              `${key.type}-${index}`
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                className: getNumberKeyboardKeyClasses(key, effectiveDisabled),
+                disabled: effectiveDisabled,
+                "aria-label": key.ariaLabel,
+                "data-key": key.value,
+                "data-active": index === activeIndex ? "" : void 0,
+                onClick: () => {
+                  setActiveIndex(index);
+                  applyKey(key);
+                },
+                children: key.label
+              },
+              `${key.type}-${key.value}-${index}`
+            )
+          ) })
+        ]
+      }
+    );
+    if (!overlayMode) return group(false);
+    const portalTarget = resolveAnchoredOverlayTarget(rootRef.current);
+    return /* @__PURE__ */ jsxs("div", { ref: setRootRef, className: classNames("contents", className), style, children: [
+      effectiveName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: effectiveName, value: currentValue }) : null,
+      overlayEnabled ? renderOverlayPortal(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: numberKeyboardScrimClasses, onClick: closeSheet }),
+          group(true)
+        ] }),
+        portalTarget
+      ) : null
+    ] });
+  }
+);
+NumberKeyboard.displayName = "NumberKeyboard";
+var NumberKeyboard_default = NumberKeyboard;
+
+export {
+  NumberKeyboard,
+  NumberKeyboard_default
+};