@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-EJY3Y2XU.mjs

@@ -0,0 +1,550 @@
+import {
+  Calendar
+} from "./chunk-IR45LOEZ.mjs";
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay,
+  useFocusTrap
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/DatePicker.tsx
+import { forwardRef, useEffect as useEffect2, useImperativeHandle } from "react";
+import {
+  calendarSolidIcon20PathD,
+  classNames,
+  closeSolidIcon20PathD,
+  datePickerFooterButtonClasses,
+  datePickerFooterClasses,
+  datePickerPanelClasses,
+  datePickerSheetScrimClasses,
+  datePickerShortcutButtonClasses,
+  datePickerShortcutListClasses,
+  getInputClearButtonClasses,
+  getInputPasswordToggleClasses,
+  icon20ViewBox
+} from "@expcat/tigercat-core";
+
+// src/components/DatePicker/state.ts
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  coerceDatePickerRange,
+  coerceDatePickerSingle,
+  commitDatePickerDay,
+  commitDatePickerToday,
+  emptyDatePickerValue,
+  formatDatePickerDisplay,
+  formDatePickerValue,
+  getDatePickerLabels,
+  getDatePickerLocaleCode,
+  getInputFieldClasses,
+  getInputWrapperClasses,
+  getLocaleDirection,
+  getWeekStartsOn,
+  isDatePickerValueEmpty,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  parseDatePickerShortcut,
+  parseTypedDatePickerValue,
+  resolveDatePickerDisabled,
+  resolveInputTrailingLayout,
+  resolveReadOnlyFlag,
+  runShakeAnimation,
+  toCalendarDate
+} from "@expcat/tigercat-core";
+
+// src/components/DatePicker/types.ts
+var isRangeDatePicker = (props) => props.range === true;
+
+// src/components/DatePicker/state.ts
+function useDatePickerController(props) {
+  const isRangeMode = isRangeDatePicker(props);
+  const {
+    size = "md",
+    disabled = false,
+    readonly: readonlyProp,
+    required = false,
+    clearable = true,
+    format = "yyyy-MM-dd",
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    status: statusProp,
+    name,
+    id,
+    locale,
+    labels: labelsOverride,
+    className,
+    onClear,
+    onBlur
+  } = props;
+  const isReadOnly = resolveReadOnlyFlag(readonlyProp, props.readOnly);
+  const config = useTigerConfig();
+  const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
+  const inGroup = inputGroup != null;
+  const effectiveSize = size ?? inputGroup?.size ?? "md";
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const shakeTrigger = formItemControl?.shakeTrigger;
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const describedBy = mergeAriaDescribedBy(
+    typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const labelledby = typeof props["aria-labelledby"] === "string" && props["aria-labelledby"].trim() ? props["aria-labelledby"] : formItemControl?.labelId;
+  const ariaLabel = typeof props["aria-label"] === "string" && props["aria-label"].trim() ? props["aria-label"] : void 0;
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const localeCode = getDatePickerLocaleCode(mergedLocale);
+  const labels = useMemo(
+    () => getDatePickerLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const weekStartsOn = props.weekStartsOn ?? getWeekStartsOn(localeCode);
+  const dir = getLocaleDirection(mergedLocale);
+  const parsedValue = useMemo(() => {
+    if (isRangeMode) {
+      if (props.value === void 0) {
+        return coerceDatePickerRange(formItemControl?.value);
+      }
+      return coerceDatePickerRange(props.value);
+    }
+    if (props.value === void 0) {
+      return coerceDatePickerSingle(formItemControl?.value);
+    }
+    return coerceDatePickerSingle(props.value);
+  }, [formItemControl?.value, isRangeMode, props.value]);
+  const parsedDefault = useMemo(
+    () => isRangeMode ? coerceDatePickerRange(props.defaultValue) : coerceDatePickerSingle(props.defaultValue),
+    [isRangeMode, props.defaultValue]
+  );
+  const [committed, setCommitted] = useControlledState({
+    value: props.value !== void 0 || formItemControl?.value !== void 0 ? parsedValue : void 0,
+    defaultValue: parsedDefault ?? emptyDatePickerValue(isRangeMode),
+    onChange: (next) => {
+      if (isRangeMode) {
+        ;
+        props.onChange?.(
+          next
+        );
+      } else {
+        ;
+        props.onChange?.(next);
+      }
+      formItemControl?.onChange?.(formDatePickerValue(isRangeMode, next, null));
+    }
+  });
+  const [isOpen, setOpen] = useControlledState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [previewRange, setPreviewRange] = useState(null);
+  const [draftText, setDraftText] = useState(null);
+  const displaySource = isRangeMode ? previewRange ?? committed : committed;
+  const displayValue = draftText ?? formatDatePickerDisplay(isRangeMode, displaySource, format, localeCode);
+  const placeholder = props.placeholder ?? (isRangeMode ? labels.rangePlaceholder : labels.placeholder);
+  const minDate = useMemo(() => toCalendarDate(props.minDate ?? null), [props.minDate]);
+  const maxDate = useMemo(() => toCalendarDate(props.maxDate ?? null), [props.maxDate]);
+  const now = props.now;
+  const calendarValue = isRangeMode ? previewRange?.[0] ?? committed[0] ?? null : committed;
+  const rangeHighlight = isRangeMode ? previewRange ?? committed : void 0;
+  const rangeSelectingEnd = Boolean(
+    isRangeMode && previewRange && previewRange[0] && !previewRange[1]
+  );
+  const isDateDisabled = useCallback(
+    (date) => resolveDatePickerDisabled(date, {
+      minDate,
+      maxDate,
+      disabledDate: props.disabledDate,
+      rangeStart: previewRange?.[0] ?? null,
+      rangeSelectingEnd
+    }),
+    [minDate, maxDate, previewRange, props.disabledDate, rangeSelectingEnd]
+  );
+  const showClear = Boolean(
+    clearable && !effectiveDisabled && !isReadOnly && !isDatePickerValueEmpty(isRangeMode, committed)
+  );
+  const trailing = resolveInputTrailingLayout({
+    clearable,
+    disabled: effectiveDisabled,
+    readOnly: isReadOnly,
+    valueLength: showClear ? 1 : 0,
+    hasCustomSuffix: true
+  });
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const panelRef = useRef(null);
+  const inputWrapperRef = useRef(null);
+  const instanceId = useId();
+  const panelId = `tiger-datepicker-panel-${instanceId}`;
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    if (status === "error") runShakeAnimation(rootRef.current);
+  }, [status, shakeTrigger]);
+  const setOpenSafe = useCallback(
+    (next) => {
+      if (effectiveDisabled || isReadOnly) return;
+      setOpen(next);
+      if (!next) setPreviewRange(null);
+    },
+    [effectiveDisabled, isReadOnly, setOpen]
+  );
+  const commit = useCallback(
+    (next, preview) => {
+      setCommitted(next);
+      setPreviewRange(preview);
+      setDraftText(null);
+    },
+    [setCommitted]
+  );
+  const selectDay = useCallback(
+    (date) => {
+      const result = commitDatePickerDay({
+        range: isRangeMode,
+        picked: date,
+        committed,
+        preview: previewRange
+      });
+      commit(result.nextCommitted, result.nextPreview);
+      if (result.close) setOpenSafe(false);
+    },
+    [commit, committed, isRangeMode, previewRange, setOpenSafe]
+  );
+  const selectToday = useCallback(() => {
+    const today = now ?? /* @__PURE__ */ new Date();
+    if (isDateDisabled(today)) return;
+    const result = commitDatePickerToday(isRangeMode, today);
+    commit(result.nextCommitted, null);
+    if (result.close) setOpenSafe(false);
+  }, [commit, isDateDisabled, isRangeMode, now, setOpenSafe]);
+  const applyShortcut = useCallback(
+    (shortcut) => {
+      const parsed = parseDatePickerShortcut(shortcut, isRangeMode);
+      if (parsed == null) return;
+      commit(parsed, null);
+      if (!isRangeMode) setOpenSafe(false);
+    },
+    [commit, isRangeMode, setOpenSafe]
+  );
+  const clearValue = useCallback(() => {
+    commit(emptyDatePickerValue(isRangeMode), null);
+    onClear?.();
+    inputRef.current?.focus();
+  }, [commit, isRangeMode, onClear]);
+  const confirmOpen = useCallback(() => {
+    setOpenSafe(false);
+  }, [setOpenSafe]);
+  const parseDraft = useCallback(() => {
+    if (draftText == null) return;
+    const parsed = parseTypedDatePickerValue(draftText, format, isRangeMode);
+    if (isRangeMode) {
+      const tuple = parsed ?? [null, null];
+      commit(tuple, null);
+    } else {
+      commit(parsed ?? null, null);
+    }
+  }, [commit, draftText, format, isRangeMode]);
+  const handleFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (rootRef.current && next && rootRef.current.contains(next) || panelRef.current && next && panelRef.current.contains(next)) {
+      return;
+    }
+    parseDraft();
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  };
+  const handleInputKeyDown = (event) => {
+    if (effectiveDisabled || isReadOnly) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setOpenSafe(true);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (isOpen) {
+        parseDraft();
+        return;
+      }
+      if (draftText != null) parseDraft();
+      else setOpenSafe(true);
+    }
+  };
+  const inputClasses = getInputFieldClasses({
+    size: effectiveSize,
+    status,
+    hasSuffix: trailing.hasSuffix,
+    hasDualSuffix: trailing.hasDualSuffix
+  });
+  const wrapperClasses = getInputWrapperClasses(status, { inGroup });
+  return {
+    rootRef,
+    inputRef,
+    panelRef,
+    inputWrapperRef,
+    isOpen,
+    setOpenSafe,
+    isRangeMode,
+    labels,
+    mergedLocale,
+    localeCode,
+    weekStartsOn,
+    dir,
+    format,
+    displayValue,
+    placeholder,
+    effectiveDisabled,
+    isReadOnly,
+    required: required || Boolean(formItemControl?.required),
+    effectiveId,
+    effectiveName,
+    describedBy,
+    labelledby,
+    ariaLabel,
+    status,
+    panelId,
+    calendarValue,
+    rangeHighlight,
+    isDateDisabled,
+    now,
+    showClear,
+    trailing,
+    inputClasses,
+    wrapperClasses,
+    chromeAttr: TIGER_CHROME_ATTR,
+    shakeClass: SHAKE_CLASS,
+    className,
+    size: effectiveSize,
+    shortcuts: props.shortcuts,
+    selectDay,
+    selectToday,
+    applyShortcut,
+    clearValue,
+    confirmOpen,
+    handleFocusOut,
+    handleInputKeyDown,
+    onDraftChange: (text) => setDraftText(text),
+    parseDraft,
+    placement: props.placement ?? "bottom-start",
+    offset: props.offset ?? 4,
+    dropdownClassName: props.dropdownClassName,
+    getPopupContainer: props.getPopupContainer
+  };
+}
+
+// src/components/DatePicker.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ChromeIcon({ path, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
+    }
+  );
+}
+var DatePicker = forwardRef(
+  function DatePicker2(props, ref) {
+    const ctx = useDatePickerController(props);
+    const overlay = useAnchoredOverlay({
+      enabled: ctx.isOpen,
+      referenceRef: ctx.inputWrapperRef,
+      floatingRef: ctx.panelRef,
+      placement: ctx.placement,
+      offset: ctx.offset,
+      layout: "bottom-sheet-sm",
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: ctx.getPopupContainer,
+      onDismiss: () => ctx.setOpenSafe(false)
+    });
+    useFocusTrap({ enabled: ctx.isOpen, containerRef: ctx.panelRef, inert: true });
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => ctx.inputRef.current?.focus(),
+        open: () => ctx.setOpenSafe(true),
+        close: () => ctx.setOpenSafe(false)
+      }),
+      [ctx]
+    );
+    useEffect2(() => {
+      if (!ctx.isOpen) return;
+      ctx.panelRef.current?.querySelector('[role="gridcell"][tabindex="0"]')?.focus();
+    }, [ctx.isOpen, ctx.panelRef]);
+    const panel = ctx.isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: datePickerSheetScrimClasses,
+          tabIndex: -1,
+          "aria-hidden": "true",
+          onClick: () => ctx.setOpenSafe(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: ctx.panelRef,
+          id: ctx.panelId,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": ctx.labels.calendar,
+          className: classNames(
+            datePickerPanelClasses,
+            overlay.floatingClasses,
+            ctx.dropdownClassName
+          ),
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          "data-tiger": "datepicker-panel",
+          onBlur: ctx.handleFocusOut,
+          children: [
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                value: ctx.calendarValue,
+                now: ctx.now,
+                locale: ctx.mergedLocale,
+                weekStartsOn: ctx.weekStartsOn,
+                disabledDate: ctx.isDateDisabled,
+                rangeValue: ctx.rangeHighlight,
+                onChange: ctx.selectDay
+              }
+            ),
+            ctx.shortcuts && ctx.shortcuts.length > 0 ? /* @__PURE__ */ jsx("div", { className: datePickerShortcutListClasses, children: ctx.shortcuts.map((shortcut) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: datePickerShortcutButtonClasses,
+                onClick: () => ctx.applyShortcut(shortcut),
+                children: shortcut.label
+              },
+              shortcut.label
+            )) }) : null,
+            /* @__PURE__ */ jsxs("div", { className: datePickerFooterClasses, children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: datePickerFooterButtonClasses,
+                  onClick: ctx.selectToday,
+                  children: ctx.labels.today
+                }
+              ),
+              ctx.isRangeMode ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: datePickerFooterButtonClasses,
+                  onClick: ctx.confirmOpen,
+                  children: ctx.labels.ok
+                }
+              ) : null
+            ] })
+          ]
+        }
+      )
+    ] }) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: ctx.rootRef,
+        className: classNames("relative inline-block w-full", props.className),
+        ...{ [ctx.chromeAttr]: "" },
+        onAnimationEnd: () => ctx.rootRef.current?.classList.remove(ctx.shakeClass),
+        onBlur: ctx.handleFocusOut,
+        children: [
+          /* @__PURE__ */ jsxs("div", { ref: ctx.inputWrapperRef, className: ctx.wrapperClasses, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: ctx.inputRef,
+                type: "text",
+                className: ctx.inputClasses,
+                value: ctx.displayValue,
+                placeholder: ctx.placeholder,
+                disabled: ctx.effectiveDisabled,
+                readOnly: ctx.isReadOnly,
+                required: ctx.required,
+                name: ctx.effectiveName,
+                id: ctx.effectiveId,
+                autoComplete: "off",
+                "aria-label": ctx.ariaLabel ?? (ctx.labelledby ? void 0 : ctx.placeholder),
+                "aria-labelledby": ctx.labelledby,
+                "aria-describedby": ctx.describedBy,
+                "aria-invalid": ctx.status === "error" ? true : void 0,
+                "aria-required": ctx.required ? true : void 0,
+                "aria-controls": ctx.isOpen ? ctx.panelId : void 0,
+                onChange: (event) => ctx.onDraftChange(event.target.value),
+                onClick: () => ctx.setOpenSafe(true),
+                onKeyDown: ctx.handleInputKeyDown,
+                onBlur: ctx.parseDraft
+              }
+            ),
+            ctx.showClear ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: getInputClearButtonClasses(ctx.size, {
+                  offsetSlots: ctx.trailing.clearOffsetSlots
+                }),
+                "aria-label": ctx.labels.clearDate,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: ctx.clearValue,
+                children: /* @__PURE__ */ jsx(ChromeIcon, { path: closeSolidIcon20PathD, className: "w-4 h-4" })
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: getInputPasswordToggleClasses(ctx.size, { offsetSlots: 0 }),
+                disabled: ctx.effectiveDisabled || ctx.isReadOnly,
+                "aria-label": ctx.labels.toggleCalendar,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => ctx.setOpenSafe(!ctx.isOpen),
+                children: /* @__PURE__ */ jsx(ChromeIcon, { path: calendarSolidIcon20PathD, className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          renderOverlayPortal(panel, overlay.target)
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+export {
+  DatePicker
+};

package/dist/{chunk-7EXOY7GD.mjs → chunk-FVA5VKN2.mjs}

@@ -1,9 +1,9 @@
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/Tag.tsx
-import { useMemo, useState } from "react";
+import { forwardRef, useMemo } from "react";
 import {
   classNames,
   getTagVariantClasses,
@@ -14,9 +14,10 @@ import {
   icon24ViewBox,
   tagBaseClasses,
   tagSizeClasses,
+  tagPillClasses,
   tagCloseButtonBaseClasses,
   tagCloseIconPath,
-  warnUnsupportedColorProp,
+  omitUnsupportedColorProp,
   getStatusLabels,
   mergeTigerLocale
 } from "@expcat/tigercat-core";
@@ -42,27 +43,36 @@ var CloseIcon = () => /* @__PURE__ */ jsx(
     )
   }
 );
-var Tag = ({
+var Tag = forwardRef(function Tag2({
   locale,
   variant = "default",
   size = "md",
   closable = false,
   closeAriaLabel,
+  closeTabIndex,
+  open,
+  onOpenChange,
+  pill = false,
   onClose,
   children,
   className,
   ...props
-}) => {
+}, ref) {
   const config = useTigerConfig();
   const labels = useMemo(
     () => getStatusLabels(mergeTigerLocale(config.locale, locale)),
     [config.locale, locale]
   );
-  warnUnsupportedColorProp("Tag", props);
-  const [isVisible, setIsVisible] = useState(true);
+  const rest = omitUnsupportedColorProp("Tag", props);
   const tagClasses = useMemo(
-    () => classNames(tagBaseClasses, getTagVariantClasses(variant), tagSizeClasses[size], className),
-    [variant, size, className]
+    () => classNames(
+      tagBaseClasses,
+      getTagVariantClasses(variant),
+      tagSizeClasses[size],
+      pill && tagPillClasses,
+      className
+    ),
+    [variant, size, pill, className]
   );
   const closeButtonClasses = useMemo(() => {
     const scheme = defaultTagThemeColors[variant];
@@ -71,14 +81,12 @@ var Tag = ({
   const handleClose = (event) => {
     event.stopPropagation();
     onClose?.(event);
-    if (!event.defaultPrevented) {
-      setIsVisible(false);
-    }
+    onOpenChange?.(false);
   };
-  if (!isVisible) {
+  if (open === false) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("span", { className: tagClasses, role: "status", ...props, children: [
+  return /* @__PURE__ */ jsxs("span", { ref, className: tagClasses, ...rest, children: [
     children != null && /* @__PURE__ */ jsx("span", { children }),
     closable && /* @__PURE__ */ jsx(
       "button",
@@ -86,12 +94,14 @@ var Tag = ({
         className: closeButtonClasses,
         onClick: handleClose,
         "aria-label": closeAriaLabel ?? labels.tagCloseAriaLabel,
+        tabIndex: closeTabIndex,
         type: "button",
         children: /* @__PURE__ */ jsx(CloseIcon, {})
       }
     )
   ] });
-};
+});
+Tag.displayName = "Tag";
 
 export {
   Tag

package/dist/{chunk-ZJWUBR2X.mjs → chunk-G5NPND2T.mjs}

@@ -1,6 +1,9 @@
 // src/components/ButtonGroup.tsx
 import { createContext, useContext, useMemo } from "react";
-import { getButtonGroupClasses } from "@expcat/tigercat-core";
+import {
+  getButtonGroupClasses,
+  warnMissingAccessibleName
+} from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
 var ButtonGroupContext = createContext(null);
 function useButtonGroupContext() {
@@ -11,14 +14,27 @@ var ButtonGroup = ({
   vertical = false,
   className,
   children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
   ...rest
 }) => {
+  warnMissingAccessibleName("ButtonGroup", { ariaLabel, ariaLabelledby });
   const contextValue = useMemo(() => ({ size }), [size]);
   const groupClasses = useMemo(
     () => getButtonGroupClasses(vertical, className),
     [vertical, className]
   );
-  return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ...rest, className: groupClasses, role: "group", children }) });
+  return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: groupClasses,
+      role: "group",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      children
+    }
+  ) });
 };
 
 export {