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

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

@@ -10,6 +10,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     icon: string[];
@@ -23,6 +28,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     hasIcon: {
         true: {
@@ -32,6 +42,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }>, {
     hasIcon: {
         true: {
@@ -41,6 +56,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     icon: string[];
@@ -54,6 +74,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     icon: string[];
@@ -67,6 +92,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     hasIcon: {
         true: {
@@ -76,6 +106,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }>, unknown, unknown, undefined>>;
 type IconName<T extends string> = T extends `${infer Base}${'Filled' | 'Outlined'}` ? Base : T;
 export interface SelectableButtonProps extends Omit<AriaToggleButtonProps, 'id' | 'className' | 'style'> {

package/dist/esm/components/selectable-button-group/parts/SelectableButton.js

@@ -1,11 +1,11 @@
-import { jsxs as i, jsx as o, Fragment as g } from "react/jsx-runtime";
-import { forwardRef as v, useRef as h, useContext as x } from "react";
-import { useToggleButtonGroupItem as w, mergeProps as B } from "react-aria";
-import { tv as I } from "tailwind-variants";
-import { Icon as S } from "../../icon/Icon.js";
-import { Spinner as N } from "../../spinner/Spinner.js";
-import { SelectableButtonGroupContext as G } from "../SelectableButtonGroup.context.js";
-const P = I({
+import { jsxs as n, jsx as o, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as x, useRef as I, useContext as w } from "react";
+import { useToggleButtonGroupItem as B, mergeProps as S } from "react-aria";
+import { tv as N } from "tailwind-variants";
+import { Icon as G } from "../../icon/Icon.js";
+import { Spinner as P } from "../../spinner/Spinner.js";
+import { SelectableButtonGroupContext as R } from "../SelectableButtonGroup.context.js";
+const j = N({
   // add the component styles
   slots: {
     base: [
@@ -37,63 +37,71 @@ const P = I({
       false: {
         base: "uy-px-200"
       }
+    },
+    isInvalid: {
+      true: {
+        base: "uy-bg-surface-form-error uy-border-border-form-error"
+      }
     }
   },
   defaultVariants: {
-    hasIcon: !1
+    hasIcon: !1,
+    isInvalid: !1
   }
-}), R = v(
-  (t, n) => {
-    const s = h(null), a = x(G);
+}), z = x(
+  (t, c) => {
+    const s = I(null), a = w(R);
     if (!a)
       throw new Error(
         "SelectableButton must be used within a ToggleButtonGroup component"
       );
-    const { buttonProps: d, isPressed: c, isSelected: u } = w(
+    const { state: b, isInvalid: d } = a, { buttonProps: u, isPressed: f, isSelected: l } = B(
       { id: t.value, ...t },
-      a,
+      b,
       s
-    ), { ref: b } = B({ ref: s }, { ref: n }), {
-      isDisabled: f = !1,
+    ), { ref: y } = S({ ref: s }, { ref: c }), {
+      isDisabled: m = !1,
       isLoading: e = !1,
       prefixIcon: r,
-      children: l
-    } = t, { base: y, icon: m, label: p } = P({
-      hasIcon: !!r && !e
+      children: i
+    } = t, { base: p, icon: g, label: v } = j({
+      hasIcon: !!r && !e,
+      isInvalid: !!d
     });
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ n(
       "button",
       {
         "data-dd-privacy": "allow",
-        ...d,
-        ref: b,
-        className: y(),
-        disabled: d.disabled || f || e,
+        ...u,
+        ref: y,
+        className: p(),
+        disabled: u.disabled || m || e,
         "data-loading": e ? !0 : void 0,
-        "data-pressed": c,
-        "data-selected": u,
+        "data-pressed": f,
+        "data-selected": l,
+        "data-invalid": d,
         "aria-busy": e,
         children: [
           r && !e && /* @__PURE__ */ o(
-            S,
+            G,
             {
-              src: u ? `${r}Filled` : `${r}Outlined`,
+              src: l ? `${r}Filled` : `${r}Outlined`,
               role: "presentation",
-              className: m(),
+              className: g(),
               size: 20
             }
           ),
-          e ? /* @__PURE__ */ i(g, { children: [
-            /* @__PURE__ */ o(N, { label: "Loading", size: "small", color: "inherit" }),
-            /* @__PURE__ */ o("span", { className: "uy-sr-only", children: l })
-          ] }) : /* @__PURE__ */ o("span", { className: p(), children: l })
+          e ? /* @__PURE__ */ n(h, { children: [
+            /* @__PURE__ */ o(P, { label: "Loading", size: "small", color: "inherit" }),
+            /* @__PURE__ */ o("span", { className: "uy-sr-only", children: i })
+          ] }) : /* @__PURE__ */ o("span", { className: v(), children: i })
         ]
       }
     );
   }
 );
-R.displayName = "SelectableButton";
+z.displayName = "SelectableButton";
 export {
-  R as SelectableButton,
-  P as selectableButton
+  z as SelectableButton,
+  j as selectableButton
 };

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

@@ -0,0 +1,59 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.js';
+import { SelectableButtonGroupProps } from '../selectable-button-group/SelectableButtonGroup.js';
+import { LabelProps } from '../label/Label.js';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the field. */
+    label: string;
+    /** The required variant for the label. */
+    requiredVariant?: LabelProps['requiredVariant'];
+    /** Helper text to display below the field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the field. */
+    contextualLink?: ReactNode;
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+}
+export type SelectableButtonGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName> & Omit<SelectableButtonGroupProps, 'isDisabled' | 'children'> & {
+    /** The options to render as SelectableButton children. */
+    children: ReactNode;
+};
+type SelectableButtonGroupFieldComponent = (<TSchema extends Schema>(props: SelectableButtonGroupFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `SelectableButtonGroupField` component integrates the SelectableButtonGroup with Unity's form system, providing validation, accessibility, and helper/feedback text.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   choice: z.string()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <SelectableButtonGroupField<typeof schema>
+ *         name="choice"
+ *         label="Choose an option"
+ *       >
+ *         <SelectableButton value="a">A</SelectableButton>
+ *         <SelectableButton value="b">B</SelectableButton>
+ *       </SelectableButtonGroupField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
+ */
+declare const SelectableButtonGroupField: SelectableButtonGroupFieldComponent;
+export { SelectableButtonGroupField };

package/dist/esm/components/selectable-button-group-field/SelectableButtonGroupField.js

@@ -0,0 +1,45 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { forwardRef as F } from "react";
+import { useFormContext as s } from "react-hook-form";
+import { FormField as b } from "../form-field/FormField.js";
+import { FormControl as x } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as B } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as G } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as S } from "../form-field/parts/FormLabel.js";
+import { SelectableButtonGroup as h } from "../selectable-button-group/SelectableButtonGroup.js";
+function y({
+  name: t,
+  label: e,
+  helperText: r,
+  contextualLink: m,
+  isDisabled: l,
+  requiredVariant: i,
+  children: n,
+  ...c
+}, p) {
+  const { control: u, watch: a } = s(), f = a(t);
+  return /* @__PURE__ */ d(b, { control: u, name: t, ref: p, children: [
+    /* @__PURE__ */ o(S, { requiredVariant: i, children: e }),
+    r && /* @__PURE__ */ o(G, { children: r }),
+    /* @__PURE__ */ o(x, { className: "uy-my-50", children: /* @__PURE__ */ o(
+      h,
+      {
+        value: f,
+        isDisabled: l,
+        ...c,
+        children: n
+      }
+    ) }),
+    /* @__PURE__ */ o(B, {}),
+    m
+  ] });
+}
+const j = F(
+  function(e, r) {
+    return y(e, r);
+  }
+);
+j.displayName = "SelectableButtonGroupField";
+export {
+  j as SelectableButtonGroupField
+};

package/dist/esm/components/side-panel/SidePanel.d.ts

@@ -80,6 +80,12 @@ export interface SidePanelProps extends PropsWithChildren<VariantProps<typeof si
      * Required when using controlled mode with `isOpen`.
      */
     onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * If true, scroll locking will be disabled, allowing background scrolling while the panel is open.
+     * **Requires** controlled mode with `isOpen`/`onOpenChange`.
+     * @default false
+     */
+    disableScrollLocking?: boolean;
 }
 /**
  * The SidePanel component provides contextual space for supplementary content without fully

package/dist/esm/components/side-panel/SidePanel.js

@@ -1,18 +1,18 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { ModalOverlay as c, Modal as g, Dialog as p } from "react-aria-components";
-import { tv as x } from "tailwind-variants";
-import { SidePanelDragIndicator as h } from "./parts/SidePanelDragIndicator.js";
-const v = x({
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as c, useEffect as g } from "react";
+import { ModalOverlay as x, Modal as h, Dialog as v } from "react-aria-components";
+import { tv as w } from "tailwind-variants";
+import { SidePanelDragIndicator as p } from "./parts/SidePanelDragIndicator.js";
+const N = w({
   slots: {
     overlay: [
       "md:uy-bg-gradient-to-r md:uy-from-grayscale-L12/0 md:uy-to-grayscale-L12/10 md:uy-from-70% md:uy-via-100%",
-      "uy-fixed uy-inset-0 uy-isolate",
+      "uy-fixed uy-inset-0 uy-isolate uy-z-10",
       "data-[entering]:uy-animate-fade-in data-[exiting]:uy-animate-fade-out"
     ],
     wrapper: [
       "uy-w-full md:uy-w-[400px]",
-      "uy-fixed uy-bottom-0 md:uy-inset-y-200 md:uy-right-200 uy-z-[100]",
+      "uy-fixed uy-bottom-0 md:uy-inset-y-200 md:uy-right-200",
       "uy-bg-surface-neutral uy-rounded-t-200 md:uy-rounded-200 uy-shadow-flying",
       "uy-flex uy-flex-col uy-h-[95svh] md:uy-max-h-[calc(100vh-2rem)]",
       "uy-overflow-hidden",
@@ -22,37 +22,40 @@ const v = x({
       "uy-flex uy-flex-col uy-h-full uy-overflow-hidden uy-outline-none"
     ]
   }
-}), w = f(
+}), P = c(
   ({
-    children: a,
-    isOpen: d,
-    onOpenChange: t,
-    defaultOpen: i,
-    isDismissable: u = !0,
-    isKeyboardDismissDisabled: n = !1,
-    ...r
-  }, o) => {
-    const { overlay: y, wrapper: l, content: m } = v();
-    return /* @__PURE__ */ e(
-      c,
+    children: o,
+    isOpen: e,
+    onOpenChange: u,
+    defaultOpen: a,
+    isDismissable: i = !0,
+    isKeyboardDismissDisabled: r = !1,
+    disableScrollLocking: d = !1,
+    ...y
+  }, n) => {
+    const { overlay: l, wrapper: m, content: f } = N();
+    return g(() => {
+      d && (e ?? a) && (document.documentElement.style.overflow = "", document.body.style.overflow = "");
+    }, [d, e, a]), /* @__PURE__ */ t(
+      x,
       {
-        className: y(),
-        isOpen: d,
-        onOpenChange: t,
-        defaultOpen: i,
-        isDismissable: u,
-        isKeyboardDismissDisabled: n,
+        className: l(),
+        isOpen: e,
+        onOpenChange: u,
+        defaultOpen: a,
+        isDismissable: i,
+        isKeyboardDismissDisabled: r,
         children: /* @__PURE__ */ s(
-          g,
+          h,
           {
             "data-dd-privacy": "allow",
-            ...r,
-            ref: o,
-            className: l(),
+            ...y,
+            ref: n,
+            className: m(),
             "data-unity-side-panel": !0,
             children: [
-              /* @__PURE__ */ e(h, {}),
-              /* @__PURE__ */ e(p, { className: m(), children: a })
+              /* @__PURE__ */ t(p, {}),
+              /* @__PURE__ */ t(v, { className: f(), children: o })
             ]
           }
         )
@@ -60,8 +63,8 @@ const v = x({
     );
   }
 );
-w.displayName = "SidePanel";
+P.displayName = "SidePanel";
 export {
-  w as SidePanel,
-  v as sidePanel
+  P as SidePanel,
+  N as sidePanel
 };

package/dist/esm/components/table/Table.d.ts

@@ -44,6 +44,10 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
      * ```
      */
     description?: string;
+    /**
+     * Enables horizontal scrolling if the table overflows its container. Enabled by default.
+     */
+    isHorizontalScrollEnabled?: boolean;
 }
 export interface TableImperativeHandler {
     /**

package/dist/esm/components/table/Table.js

@@ -1,9 +1,9 @@
-import { jsx as i, jsxs as T } from "react/jsx-runtime";
-import r, { forwardRef as R, useRef as k, useMemo as H, useImperativeHandle as V, useCallback as $ } from "react";
-import { tv as N } from "tailwind-variants";
-import { useResizeObserver as D } from "usehooks-ts";
-import { TableContextProvider as M, useTableContext as P } from "./Table.context.js";
-const j = N({
+import { jsx as i, jsxs as R } from "react/jsx-runtime";
+import r, { forwardRef as N, useRef as k, useMemo as z, useImperativeHandle as S, useCallback as V } from "react";
+import { tv as E } from "tailwind-variants";
+import { useResizeObserver as $ } from "usehooks-ts";
+import { TableContextProvider as D, useTableContext as M } from "./Table.context.js";
+const P = E({
   slots: {
     root: "uy-w-full uy-border uy-border-solid uy-border-border-neutral-enabled uy-rounded-100 uy-overflow-hidden",
     scroller: [
@@ -13,10 +13,10 @@ const j = N({
       // Ensure full width
     ]
   }
-}), A = R(
-  ({ minRows: u = 10, maxRows: c = 50, children: e }, o) => {
-    const { root: a, scroller: d } = j();
-    return /* @__PURE__ */ i("div", { ref: o, className: a(), "data-unity-slot": "table-root", children: /* @__PURE__ */ i(
+}), j = N(
+  ({ minRows: u = 10, maxRows: c = 50, children: e }, l) => {
+    const { root: t, scroller: d } = P();
+    return /* @__PURE__ */ i("div", { ref: l, className: t(), "data-unity-slot": "table-root", children: /* @__PURE__ */ i(
       "div",
       {
         className: d(),
@@ -30,107 +30,132 @@ const j = N({
     ) });
   }
 );
-A.displayName = "TableRoot";
-const K = N({
+j.displayName = "TableRoot";
+const A = E({
   slots: {
     wrapper: [
       "uy-flex-1 uy-h-full uy-bg-surface-neutral",
-      "uy-overflow-auto",
+      "uy-overflow-y-auto",
+      // Always enable vertical scrolling
       "uy-w-full"
     ],
     table: [
       "uy-min-w-full",
-      "uy-w-max",
       "uy-text-left uy-typography-body uy-text-content-neutral uy-border-collapse",
       "focus:uy-outline-2 focus:uy-outline-utility-focus-ring focus:uy-outline-offset-[-2px]"
     ]
+  },
+  variants: {
+    horizontalScroll: {
+      true: {
+        wrapper: "uy-overflow-x-auto",
+        table: "uy-w-max"
+      },
+      false: {
+        wrapper: "uy-overflow-x-hidden",
+        table: "uy-w-fit"
+      }
+    }
+  },
+  defaultVariants: {
+    horizontalScroll: !0
   }
-}), U = R((u, c) => {
-  const { children: e, label: o, description: a, ...d } = u, n = k(null), { height: h = 0 } = D({
-    ref: n,
+}), K = N((u, c) => {
+  const {
+    children: e,
+    label: l,
+    description: t,
+    isHorizontalScrollEnabled: d = !0,
+    ...p
+  } = u, a = k(null), { height: n = 0 } = $({
+    ref: a,
     box: "border-box"
-  }), { rowCount: l, columnCount: b } = H(() => {
-    let y = 0, f = 0;
-    return r.Children.forEach(e, (m) => {
-      if (!r.isValidElement(m)) return;
+  }), { rowCount: b, columnCount: f } = z(() => {
+    let y = 0, m = 0;
+    return r.Children.forEach(e, (h) => {
+      if (!r.isValidElement(h)) return;
       const s = r.Children.toArray(
-        m.props.children
-      ).filter((t) => r.isValidElement(t));
-      f += s.length, s.forEach((t) => {
-        if (!r.isValidElement(t)) return;
-        const p = r.Children.toArray(
-          t.props.children
-        ).filter((w) => r.isValidElement(w));
-        y = Math.max(y, p.length);
+        h.props.children
+      ).filter((o) => r.isValidElement(o));
+      m += s.length, s.forEach((o) => {
+        if (!r.isValidElement(o)) return;
+        const w = r.Children.toArray(
+          o.props.children
+        ).filter((v) => r.isValidElement(v));
+        y = Math.max(y, w.length);
       });
-    }), { rowCount: f, columnCount: y };
+    }), { rowCount: m, columnCount: y };
   }, [e]);
-  return V(c, () => ({
+  return S(c, () => ({
     scrollToTop: () => {
-      n.current && n.current.scrollTo({ top: 0, behavior: "smooth" });
+      a.current && a.current.scrollTo({ top: 0, behavior: "smooth" });
     }
-  })), /* @__PURE__ */ i(M, { rowCount: l, columnCount: b, children: /* @__PURE__ */ i(
-    E,
+  })), /* @__PURE__ */ i(D, { rowCount: b, columnCount: f, children: /* @__PURE__ */ i(
+    H,
     {
-      scrollContainerRef: n,
-      containerHeight: h,
-      rowCount: l,
-      columnCount: b,
-      label: o,
-      description: a,
-      ...d,
+      scrollContainerRef: a,
+      containerHeight: n,
+      rowCount: b,
+      columnCount: f,
+      label: l,
+      description: t,
+      isHorizontalScrollEnabled: d,
+      ...p,
       children: e
     }
   ) });
 });
-U.displayName = "Table";
-const E = (u) => {
-  var x, g, C;
+K.displayName = "Table";
+const H = (u) => {
+  var g, C, T;
   const {
     children: c,
     label: e,
-    description: o,
-    scrollContainerRef: a,
+    description: l,
+    scrollContainerRef: t,
     containerHeight: d,
-    rowCount: n,
-    columnCount: h,
-    onKeyDown: l,
-    ...b
-  } = u, { wrapper: y, table: f } = K(), { keyboardNavigation: m } = P(), { tableRef: s, handleTableKeyDown: t } = m, p = $(
-    (v) => {
-      v.key !== "Tab" && (t(v), l == null || l(v));
+    rowCount: p,
+    columnCount: a,
+    onKeyDown: n,
+    isHorizontalScrollEnabled: b = !0,
+    ...f
+  } = u, { wrapper: y, table: m } = A({
+    horizontalScroll: b
+  }), { keyboardNavigation: h } = M(), { tableRef: s, handleTableKeyDown: o } = h, w = V(
+    (x) => {
+      x.key !== "Tab" && (o(x), n == null || n(x));
     },
-    [t, l]
-  ), w = (((x = a.current) == null ? void 0 : x.scrollHeight) ?? 0) > Math.floor(d);
-  return /* @__PURE__ */ T(
+    [o, n]
+  ), v = (((g = t.current) == null ? void 0 : g.scrollHeight) ?? 0) > Math.floor(d);
+  return /* @__PURE__ */ R(
     "div",
     {
       className: y(),
-      ref: a,
+      ref: t,
       style: {
-        "--uy-table-is-scrollable": w ? "1" : "0"
+        "--uy-table-is-scrollable": v ? "1" : "0"
       },
       children: [
-        /* @__PURE__ */ T(
+        /* @__PURE__ */ R(
           "table",
           {
             ref: s,
-            className: f(),
+            className: m(),
             role: "grid",
-            "aria-rowcount": n,
-            "aria-colcount": h,
+            "aria-rowcount": p,
+            "aria-colcount": a,
             "aria-label": e,
-            "aria-describedby": o ? `table-desc-${(g = s.current) == null ? void 0 : g.id}` : void 0,
-            onKeyDown: p,
-            ...b,
+            "aria-describedby": l ? `table-desc-${(C = s.current) == null ? void 0 : C.id}` : void 0,
+            onKeyDown: w,
+            ...f,
             children: [
               c,
-              o && /* @__PURE__ */ i(
+              l && /* @__PURE__ */ i(
                 "caption",
                 {
-                  id: `table-desc-${(C = s.current) == null ? void 0 : C.id}`,
+                  id: `table-desc-${(T = s.current) == null ? void 0 : T.id}`,
                   className: "uy-sr-only",
-                  children: o
+                  children: l
                 }
               )
             ]
@@ -141,8 +166,8 @@ const E = (u) => {
     }
   );
 };
-E.displayName = "TableContent";
+H.displayName = "TableContent";
 export {
-  U as Table,
-  A as TableRoot
+  K as Table,
+  j as TableRoot
 };