@payfit/unity-components 0.0.0-alpha.12 → 0.0.0-alpha.13

package/dist/esm/components/number-input/NumberInput.js

@@ -0,0 +1,214 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as G } from "react";
+import { NumberField as W, Group as q, Input as A } from "react-aria-components";
+import { tv as C } from "tailwind-variants";
+import { Icon as H } from "../icon/Icon.js";
+import "@payfit/unity-icons";
+import { useIntl as J } from "react-intl";
+import { CircularIconButton as s } from "../icon-button/CircularIconButton.js";
+import { Spinner as K } from "../spinner/Spinner.js";
+const Q = C({
+  slots: {
+    base: [
+      "uy-group uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100",
+      "focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2",
+      "active:uy-border-border-form-active"
+    ],
+    wrapper: [
+      "uy-flex uy-gap-50 uy-flex-grow uy-flex-nowrap uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-max-w-full uy-justify-between uy-items-center"
+    ],
+    input: [
+      "uy-w-full uy-flex-1 uy-outline-none uy-typography-body uy-min-w-0 uy-max-w-full",
+      "placeholder:uy-text-content-neutral-lowest"
+    ],
+    prefix: [
+      "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-r uy-border-solid uy-rounded-l-100",
+      "active:uy-border-border-form-active"
+    ],
+    suffix: [
+      "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100",
+      "active:uy-border-border-form-active"
+    ],
+    state: [
+      "uy-flex uy-gap-50 uy-items-center uy-shrink-0 uy-text-content-neutral-disabled"
+    ],
+    controls: ["uy-flex uy-gap-50"]
+  },
+  variants: {
+    isReadOnly: {
+      true: {
+        base: ["uy-border-border-form-disabled uy-bg-surface-form-disabled"],
+        prefix: [
+          "uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-read-only"
+        ],
+        wrapper: [
+          "uy-bg-surface-form-disabled uy-text-content-form-disabled",
+          "group-data-[invalid=true]:uy-bg-surface-form-error"
+        ],
+        input: ["uy-bg-surface-form-disabled uy-text-content-form-read-only"],
+        suffix: [
+          "uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-read-only"
+        ]
+      },
+      false: {
+        base: [
+          "uy-border-border-form-enabled uy-bg-surface-form-enabled",
+          "data-[invalid=true]:uy-border-border-form-error data-[invalid=true]:uy-bg-surface-form-error",
+          "data-[disabled=true]:uy-border-border-form-disabled data-[disabled=true]:uy-bg-surface-form-disabled data-[disabled=true]:uy-cursor-not-allowed"
+        ],
+        prefix: [
+          "uy-bg-surface-neutral-low uy-border-border-form-enabled uy-text-content-form-enabled",
+          "group-data-[invalid=true]:uy-bg-surface-form-error group-data-[invalid=true]:uy-border-border-form-error",
+          "group-data-[disabled=true]:uy-bg-surface-form-disabled group-data-[disabled=true]:uy-border-border-form-disabled group-data-[disabled=true]:uy-text-content-form-disabled data-[disabled=true]:uy-cursor-not-allowed"
+        ],
+        suffix: [
+          "uy-bg-surface-neutral-low uy-border-border-form-enabled uy-text-content-form-enabled",
+          "group-data-[invalid=true]:uy-bg-surface-form-error group-data-[invalid=true]:uy-border-border-form-error",
+          "group-data-[disabled=true]:uy-bg-surface-form-disabled group-data-[disabled=true]:uy-border-border-form-disabled group-data-[disabled=true]:uy-text-content-form-disabled data-[disabled=true]:uy-cursor-not-allowed"
+        ],
+        wrapper: [
+          "uy-border-border-form-enabled uy-bg-surface-form-enabled",
+          "group-data-[invalid=true]:uy-bg-surface-form-error group-data-[invalid=true]:uy-border-border-form-error",
+          "group-data-[disabled=true]:uy-bg-surface-form-disabled group-data-[disabled=true]:uy-text-content-form-disabled data-[disabled=true]:uy-cursor-not-allowed"
+        ],
+        input: [
+          "uy-text-content-form-enabled uy-bg-surface-form-enabled",
+          "group-data-[invalid=true]:uy-bg-surface-form-error",
+          "group-data-[disabled=true]:uy-bg-surface-form-disabled group-data-[disabled=true]:uy-text-content-form-disabled data-[disabled=true]:uy-cursor-not-allowed"
+        ],
+        state: ["group-data-[invalid=true]:uy-text-content-form-error"],
+        button: "data-[disabled=true]:uy-cursor-not-allowed"
+      }
+    }
+  }
+}), R = G(
+  ({
+    withControls: b = !1,
+    defaultValue: u,
+    formatOptions: p,
+    isDisabled: f,
+    isInvalid: y,
+    isLoading: a,
+    isReadOnly: d,
+    isRequired: g,
+    maxValue: n,
+    minValue: i,
+    prefix: m,
+    onBlur: x,
+    onChange: w,
+    onClearButtonPress: l,
+    step: v,
+    suffix: c,
+    value: r,
+    ...h
+  }, N) => {
+    const {
+      base: M,
+      wrapper: I,
+      input: j,
+      prefix: E,
+      suffix: O,
+      state: S,
+      controls: D
+    } = Q({ isReadOnly: d }), t = J(), k = r !== void 0 && !isNaN(r), z = u !== void 0 && !isNaN(u), F = (k || z) && !b && !a && !d && !f;
+    return /* @__PURE__ */ o(
+      W,
+      {
+        ref: N,
+        className: M(),
+        value: r,
+        defaultValue: u,
+        minValue: i,
+        maxValue: n,
+        step: v,
+        isDisabled: f,
+        isReadOnly: d,
+        isInvalid: y,
+        isRequired: g,
+        "aria-busy": a,
+        onChange: w,
+        formatOptions: p,
+        onBlur: x,
+        ...h,
+        children: [
+          m ? /* @__PURE__ */ e("span", { className: E(), children: m }) : null,
+          /* @__PURE__ */ o(q, { className: I(), children: [
+            /* @__PURE__ */ e(A, { className: j() }),
+            /* @__PURE__ */ o("div", { className: S(), children: [
+              a && /* @__PURE__ */ e(
+                K,
+                {
+                  color: "inherit",
+                  size: "small",
+                  label: t.formatMessage({
+                    id: "unity:component:common:loading:label",
+                    defaultMessage: "Loading..."
+                  })
+                }
+              ),
+              y && /* @__PURE__ */ e(
+                H,
+                {
+                  src: "WarningCircleOutlined",
+                  color: "content.form.invalid",
+                  alt: t.formatMessage({
+                    id: "unity:component:form-field:form-input:error:alt",
+                    defaultMessage: "Error"
+                  })
+                }
+              ),
+              F && /* @__PURE__ */ e(
+                s,
+                {
+                  title: t.formatMessage({
+                    id: "unity:component:common:clear:title",
+                    defaultMessage: "Clear"
+                  }),
+                  className: "uy-text-content-neutral-enabled",
+                  icon: "CloseOutlined",
+                  onPress: () => {
+                    l == null || l();
+                  }
+                }
+              )
+            ] }),
+            b && /* @__PURE__ */ o("div", { className: D(), children: [
+              /* @__PURE__ */ e(
+                s,
+                {
+                  asElement: "button",
+                  icon: "MinusOutlined",
+                  slot: "decrement",
+                  isDisabled: i !== void 0 && r === i,
+                  title: t.formatMessage({
+                    id: "unity:component:form-field:number-input:decrement:title",
+                    defaultMessage: "decrement"
+                  })
+                }
+              ),
+              /* @__PURE__ */ e(
+                s,
+                {
+                  asElement: "button",
+                  icon: "PlusOutlined",
+                  slot: "increment",
+                  isDisabled: n !== void 0 && r === n,
+                  title: t.formatMessage({
+                    id: "unity:component:form-field:number-input:increment:title",
+                    defaultMessage: "increment"
+                  })
+                }
+              )
+            ] })
+          ] }),
+          c ? /* @__PURE__ */ e("span", { className: O(), children: c }) : null
+        ]
+      }
+    );
+  }
+);
+R.displayName = "NumberInput";
+export {
+  R as NumberInput,
+  Q as numberInput
+};

package/dist/esm/components/pagination/Pagination.js

@@ -8,7 +8,7 @@ import { usePagination as J } from "./hooks/use-pagination.js";
 import { PaginationEllipsis as K } from "./parts/PaginationEllipsis.js";
 import { PaginationJumpDialog as O } from "./parts/PaginationJumpDialog.js";
 import { PaginationLink as S } from "./parts/PaginationLink.js";
-import { PaginationNavButton as w } from "./parts/PaginationNavButton.js";
+import { PaginationNavButton as D } from "./parts/PaginationNavButton.js";
 import { generatePaginationWithWindow as x } from "./utils/pagination-window.js";
 const _ = j({
   slots: {
@@ -24,12 +24,13 @@ const _ = j({
     onPageChange: g,
     onNextPress: m,
     onPreviousPress: c,
-    ...D
-  }, A) => {
-    const v = R(), u = W(), L = d !== void 0 && g !== void 0 && p === void 0, { currentPage: s, goToPage: n } = J({
+    ...A
+  }, L) => {
+    const v = R(), u = W(), y = d !== void 0 && g !== void 0 && p === void 0, { currentPage: s, goToPage: n } = J({
       pageCount: i,
-      initialPage: L ? d : p,
-      onPageChange: g
+      initialPage: y ? d : p,
+      onPageChange: g,
+      isControlled: y
     }), f = $({}), r = E(/* @__PURE__ */ new Map()), h = N(
       () => x(
         i,
@@ -44,7 +45,7 @@ const _ = j({
         const e = r.current.get(a);
         e && e.focus();
       });
-    }, y = (a, e) => {
+    }, b = (a, e) => {
       switch (a.key) {
         case "ArrowLeft":
         case "ArrowUp":
@@ -73,7 +74,7 @@ const _ = j({
           });
           break;
       }
-    }, b = {
+    }, w = {
       paginationLabel: u.formatMessage({
         id: "unity:component:pagination:label",
         defaultMessage: "Pagination"
@@ -93,10 +94,10 @@ const _ = j({
       "nav",
       {
         "data-dd-privacy": "allow",
-        ...D,
-        ref: A,
+        ...A,
+        ref: L,
         className: I(),
-        "aria-labelledby": b.paginationLabel,
+        "aria-labelledby": w.paginationLabel,
         children: [
           /* @__PURE__ */ o(
             O,
@@ -107,7 +108,7 @@ const _ = j({
             }
           ),
           /* @__PURE__ */ o(
-            w,
+            D,
             {
               variant: "previous",
               isDisabled: s === 1,
@@ -116,7 +117,7 @@ const _ = j({
               }
             }
           ),
-          /* @__PURE__ */ o("ul", { className: M(), "aria-label": b.pageListLabel, children: h.map(
+          /* @__PURE__ */ o("ul", { className: M(), "aria-label": w.pageListLabel, children: h.map(
             (a, e) => a.type === "page" ? /* @__PURE__ */ o(
               "li",
               {
@@ -135,7 +136,7 @@ const _ = j({
                       t && (l == null || l(a.value));
                     },
                     onKeyDown: (t) => {
-                      y(t, a.value);
+                      b(t, a.value);
                     },
                     isActive: a.value === s,
                     value: a.value,
@@ -149,7 +150,7 @@ const _ = j({
               {
                 value: a.value,
                 onKeyDown: (t) => {
-                  y(t, -1);
+                  b(t, -1);
                 },
                 onPress: () => {
                   f.open();
@@ -158,7 +159,7 @@ const _ = j({
             ) }, `uy-pagination-${v}-item-${e}`)
           ) }),
           /* @__PURE__ */ o(
-            w,
+            D,
             {
               variant: "next",
               isDisabled: s === i,

package/dist/esm/components/pagination/hooks/use-pagination.d.ts

@@ -1,9 +1,10 @@
 export interface PaginationOptions {
     pageCount: number;
     initialPage?: number;
+    isControlled?: boolean;
     onPageChange?: (page: number, previous: number, direction: -1 | 1) => void;
 }
-export declare function usePagination({ pageCount, initialPage, onPageChange, }: PaginationOptions): {
+export declare function usePagination({ isControlled, pageCount, initialPage, onPageChange, }: PaginationOptions): {
     currentPage: number;
     previousPage: number;
     nextPage: number;

package/dist/esm/components/pagination/hooks/use-pagination.js

@@ -1,15 +1,16 @@
-import { useState as l, useCallback as o } from "react";
-function m({
-  pageCount: i,
+import { useState as m, useCallback as a } from "react";
+function h({
+  isControlled: c = !1,
+  pageCount: o,
   initialPage: r = 1,
   onPageChange: n
 }) {
-  const [t, a] = l(r), c = t - 1, u = t + 1, s = o(
+  const [i, u] = m(r), t = c ? r : i, f = t - 1, l = t + 1, s = a(
     (e) => {
-      n && n(e, t, Math.sign(e - t)), a(Math.max(1, Math.min(i, e)));
+      n && n(e, t, Math.sign(e - t)), u(Math.max(1, Math.min(o, e)));
     },
-    [t, i, n]
-  ), f = o(
+    [t, o, n]
+  ), P = a(
     (e) => {
       s(e === "previous" ? t - 1 : e === "next" ? t + 1 : e);
     },
@@ -17,11 +18,11 @@ function m({
   );
   return {
     currentPage: t,
-    previousPage: c,
-    nextPage: u,
-    goToPage: f
+    previousPage: f,
+    nextPage: l,
+    goToPage: P
   };
 }
 export {
-  m as usePagination
+  h as usePagination
 };

package/dist/esm/components/popover/Popover.js

@@ -1,37 +1,41 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { Popover as m, Dialog as n, DialogTrigger as y } from "react-aria-components";
-import { DialogTrigger as B } from "react-aria-components";
-import { tv as g } from "tailwind-variants";
-import { PopoverContent as c } from "./parts/PopoverContent.js";
-import { PopoverHeader as v } from "./parts/PopoverHeader.js";
-const x = g({
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { Popover as p, Dialog as g, DialogTrigger as m } from "react-aria-components";
+import { DialogTrigger as j } from "react-aria-components";
+import { tv as c } from "tailwind-variants";
+import { PopoverHeader as f } from "./parts/PopoverHeader.js";
+const x = c({
   slots: {
     base: [
-      "uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-200 uy-p-200 uy-shadow-floating uy-min-w-[320px] uy-max-w-[800px]"
+      "uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-200 uy-p-200 uy-shadow-floating uy-min-w-[320px] uy-max-w-[800px] uy-overflow-auto",
+      "uy-transition-all uy-duration-200 uy-linear data-[entering]:uy-opacity-100 data-[exiting]:uy-opacity-0",
+      'data-[entering]:data-[placement="bottom"]:-uy-translate-y-100 data-[entering]:data-[placement="bottom"]:uy-translate-x-0 data-[exiting]:data-[placement="bottom"]:uy-translate-y-0',
+      'data-[entering]:data-[placement="top"]:uy-translate-y-100 data-[entering]:data-[placement="top"]:uy-translate-x-0 data-[exiting]:data-[placement="top"]:uy-translate-y-0',
+      'data-[entering]:data-[placement="left"]:uy-translate-x-100 data-[entering]:data-[placement="left"]:uy-translate-y-0 data-[exiting]:data-[placement="bottom"]:uy-translate-x-0',
+      'data-[entering]:data-[placement="right"]:-uy-translate-x-100 data-[entering]:data-[placement="right"]:uy-translate-y-0 data-[exiting]:data-[placement="right"]:uy-translate-y-0'
     ],
     dialog: [
       "uy-flex uy-flex-col",
       "focus:uy-outline-2 focus:uy-outline-offset-2"
     ]
   }
-}), P = f((r, e) => {
-  const { children: i, title: s, isTitleSrOnly: t, displayCloseButton: l, ...a } = r, { base: p, dialog: u } = x();
-  return /* @__PURE__ */ o(m, { ref: e, className: p(), offset: 8, ...a, children: /* @__PURE__ */ d(n, { className: u(), role: "dialog", children: [
-    /* @__PURE__ */ o(
-      v,
+}), b = u((a, e) => {
+  const { children: r, title: o, isTitleSrOnly: n, displayCloseButton: l, ...i } = a, { base: d, dialog: y } = x();
+  return /* @__PURE__ */ t(p, { ref: e, className: d(), offset: 8, ...i, children: /* @__PURE__ */ s(g, { className: y(), role: "dialog", children: [
+    /* @__PURE__ */ t(
+      f,
       {
-        title: s,
-        isTitleSrOnly: t,
+        title: o,
+        isTitleSrOnly: n,
         displayCloseButton: l
       }
     ),
-    /* @__PURE__ */ o(c, { children: i })
+    r
   ] }) });
 });
-P.displayName = "Popover";
-y.displayName = "PopoverTrigger";
+b.displayName = "Popover";
+m.displayName = "PopoverTrigger";
 export {
-  P as Popover,
-  B as PopoverTrigger
+  b as Popover,
+  j as PopoverTrigger
 };

package/dist/esm/components/popover/parts/PopoverHeader.js

@@ -1,13 +1,14 @@
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { forwardRef as c, useContext as d } from "react";
-import { OverlayTriggerStateContext as u, Heading as y } from "react-aria-components";
-import { useIntl as p } from "react-intl";
-import { tv as f } from "tailwind-variants";
-import { IconButton as g } from "../../icon-button/IconButton.js";
-const h = f({
+import { forwardRef as u, useContext as d } from "react";
+import { OverlayTriggerStateContext as y, Heading as p } from "react-aria-components";
+import { useIntl as f } from "react-intl";
+import { tv as g } from "tailwind-variants";
+import { IconButton as h } from "../../icon-button/IconButton.js";
+const v = g({
   slots: {
     base: "uy-flex uy-justify-between",
-    heading: "uy-content-center"
+    heading: "uy-content-center",
+    iconButton: "uy-ml-200"
   },
   variants: {
     isTitleSrOnly: {
@@ -20,14 +21,14 @@ const h = f({
       }
     }
   }
-}), v = c(
-  ({ title: t, isTitleSrOnly: r, displayCloseButton: a }, n) => {
-    const e = d(u), s = p(), { base: l, heading: i } = h({ isTitleSrOnly: r });
+}), b = u(
+  ({ title: t, isTitleSrOnly: n, displayCloseButton: a }, r) => {
+    const e = d(y), s = f(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: n });
     return /* @__PURE__ */ m("div", { className: l(), children: [
       /* @__PURE__ */ o(
-        y,
+        p,
         {
-          ref: n,
+          ref: r,
           slot: "title",
           className: i(),
           "data-dd-privacy": "allow",
@@ -35,10 +36,11 @@ const h = f({
         }
       ),
       a && /* @__PURE__ */ o(
-        g,
+        h,
         {
           variant: "ghost",
           color: "neutral",
+          className: c(),
           label: s.formatMessage({
             id: "unity:component:common:close:label",
             defaultMessage: "Close"
@@ -50,7 +52,7 @@ const h = f({
     ] });
   }
 );
-v.displayName = "PopoverTitle";
+b.displayName = "PopoverTitle";
 export {
-  v as PopoverHeader
+  b as PopoverHeader
 };

package/dist/esm/components/radio-button-group/parts/RadioButton.js

@@ -10,7 +10,7 @@ import { RadioButtonHelper as w } from "./RadioButtonHelper.js";
 const F = x({
   slots: {
     base: [
-      "uy-group uy-flex uy-gap-100 uy-rounded-50 uy-items-center",
+      "uy-group uy-flex uy-gap-100 uy-rounded-50 uy-items-center uy-cursor-pointer",
       "data-[disabled]:uy-cursor-not-allowed",
       "data-[readonly]:uy-cursor-not-allowed"
     ],

package/dist/esm/components/select-field/test-utils.js

@@ -0,0 +1,25 @@
+import { within as i, userEvent as t, screen as o } from "storybook/test";
+const r = (n) => ({ selectOption: async ({
+  labelText: e,
+  optionName: a
+}) => {
+  await n.step(
+    `Select option "${a}" in "${e}"`,
+    async () => {
+      const c = i(n.canvasElement).getByLabelText(e, {
+        exact: !1
+      });
+      if (!c)
+        throw new Error(`Select not found for label ${e}`);
+      await t.click(c, { delay: 100 }), await t.click(
+        o.getByRole("option", { name: a }),
+        {
+          delay: 100
+        }
+      ), await t.tab({ delay: 100 });
+    }
+  );
+} });
+export {
+  r as getTestingUtilsSelect
+};

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.context.d.ts

@@ -1,2 +1,6 @@
 import { ToggleGroupState } from 'react-stately';
-export declare const SelectableButtonGroupContext: import('react').Context<ToggleGroupState | null>;
+export interface SelectableButtonGroupContextValue {
+    state: ToggleGroupState;
+    isInvalid?: boolean;
+}
+export declare const SelectableButtonGroupContext: import('react').Context<SelectableButtonGroupContextValue | null>;

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.d.ts

@@ -2,7 +2,7 @@ import { AriaToggleButtonGroupProps } from 'react-aria';
 import { Key } from 'react-stately';
 import { VariantProps } from 'tailwind-variants';
 export declare const selectableButtonGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface SelectableButtonGroupProps extends VariantProps<typeof selectableButtonGroup>, Omit<AriaToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'className' | 'style'> {
+export interface SelectableButtonGroupProps extends VariantProps<typeof selectableButtonGroup>, Omit<AriaToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'style'> {
     /**
      * The SelectableButton components to render within the group.
      * Each child must be a SelectableButton component with a unique value prop.
@@ -26,6 +26,12 @@ export interface SelectableButtonGroupProps extends VariantProps<typeof selectab
      * Required when using the component in controlled mode.
      */
     onChange?: (keys: Key[]) => void;
+    /**
+     * Marks the group and all contained buttons as invalid, applying error styles.
+     * Use this to indicate a validation error for the group.
+     */
+    isInvalid?: boolean;
+    className?: string;
 }
 /**
  * A group component that manages the selection state of multiple SelectableButton components.

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.js

@@ -1,29 +1,36 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as m, useRef as d } from "react";
-import { useToggleButtonGroup as i, mergeProps as s } from "react-aria";
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as d, useRef as m } from "react";
+import { useToggleButtonGroup as f, mergeProps as s } from "react-aria";
 import { useToggleGroupState as g } from "react-stately";
-import { tv as y } from "tailwind-variants";
-import { SelectableButtonGroupContext as v } from "./SelectableButtonGroup.context.js";
-const G = y({
+import { tv as v } from "tailwind-variants";
+import { SelectableButtonGroupContext as y } from "./SelectableButtonGroup.context.js";
+const G = v({
   base: "uy-flex uy-gap-100"
-}), S = m((e, a) => {
-  const t = d(null), o = g({
+}), S = d((e, r) => {
+  const t = m(null), a = g({
     ...e,
     selectedKeys: e.value,
     defaultSelectedKeys: e.defaultValue,
-    onSelectionChange: (f) => {
-      var r;
-      (r = e.onChange) == null || r.call(e, Array.from(f));
+    onSelectionChange: (c) => {
+      var l;
+      (l = e.onChange) == null || l.call(e, Array.from(c));
     }
-  }), { groupProps: n } = i(e, o, t), u = G(), { ref: c } = s({ ref: t }, { ref: a });
-  return /* @__PURE__ */ l(
+  }), { groupProps: n } = f(e, a, t), i = G({ className: e.className }), { ref: u } = s({ ref: t }, { ref: r });
+  return /* @__PURE__ */ o(
     "div",
     {
       ...n,
-      className: u,
-      ref: c,
+      className: i,
+      ref: u,
       "data-dd-privacy": "allow",
-      children: /* @__PURE__ */ l(v.Provider, { value: o, children: e.children })
+      "aria-invalid": e.isInvalid,
+      children: /* @__PURE__ */ o(
+        y.Provider,
+        {
+          value: { state: a, isInvalid: e.isInvalid },
+          children: e.children
+        }
+      )
     }
   );
 });