@payfit/unity-components 1.1.1-beta.1 → 2.0.0

package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.js

@@ -1,59 +1,63 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as T, jsx as i } from "react/jsx-runtime";
 import { forwardRef as x, useMemo as G } from "react";
 import { useFormContext as R } from "react-hook-form";
-import { FormField as q } from "../form-field/FormField.js";
-import { FormControl as y } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as P } from "../form-field/parts/FormFeedbackText.js";
-import { isFieldRequired as j } from "../form-field/utils/isFieldRequired.js";
-import { useUnityFormProvider as v } from "../form/Form.context.js";
-import { ToggleSwitchGroup as C } from "../toggle-switch-group/ToggleSwitchGroup.js";
-function U({
+import { createSchemaAdapter as q } from "../../utils/createSchemaAdapter.js";
+import { FormField as y } from "../form-field/FormField.js";
+import { FormControl as P } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as j } from "../form-field/parts/FormFeedbackText.js";
+import { isFieldRequired as v } from "../form-field/utils/isFieldRequired.js";
+import { useUnityFormProvider as C } from "../form/Form.context.js";
+import { ToggleSwitchGroup as U } from "../toggle-switch-group/ToggleSwitchGroup.js";
+function b({
   name: o,
   label: r,
-  defaultValue: i,
+  defaultValue: e,
   helperText: m,
   contextualLink: c,
-  isRequired: s,
-  isInvalid: p,
+  isRequired: p,
+  isInvalid: s,
   isLoading: l,
   isDisabled: n,
-  isReadOnly: u,
-  requiredVariant: d,
+  isReadOnly: d,
+  requiredVariant: u,
   children: f,
   ...F
-}, g) {
-  const { control: h, watch: w } = R(), { schema: t } = v(), S = G(
-    () => j(t, o),
+}, h) {
+  const { control: g, watch: a } = R(), { schema: t } = C(), w = G(
+    () => v(q(t), o),
     [t, o]
-  ), T = w(o);
-  return /* @__PURE__ */ a(q, { control: h, name: o, ...{
-    isInvalid: p,
+  ), S = a(o);
+  return /* @__PURE__ */ T(y, { control: g, name: o, ...{
+    isInvalid: s,
     isLoading: l,
     isDisabled: n,
-    isReadOnly: u
+    isReadOnly: d
   }, children: [
-    /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
-      C,
+    /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(
+      U,
       {
-        ref: g,
+        ref: h,
         label: r,
-        defaultValue: i,
-        value: T,
+        defaultValue: e,
+        value: S,
         helperText: m,
-        requiredVariant: d,
+        requiredVariant: u,
         ...F,
-        isRequired: S ?? s,
+        isRequired: w ?? p,
         children: f
       }
     ) }),
-    /* @__PURE__ */ e(P, {}),
+    /* @__PURE__ */ i(j, {}),
     c
   ] });
 }
-const b = x(function(r, i) {
-  return U(r, i);
+const k = x(function(r, e) {
+  return b(
+    r,
+    e
+  );
 });
-b.displayName = "ToggleSwitchGroupField";
+k.displayName = "ToggleSwitchGroupField";
 export {
-  b as ToggleSwitchGroupField
+  k as ToggleSwitchGroupField
 };

package/dist/esm/hooks/use-container-query-level.d.ts

@@ -0,0 +1,42 @@
+export type ContainerQueryLevel = 'component' | 'section' | 'page' | 'app';
+interface UseContainerQueryLevelOptions {
+    /**
+     * The ref to the container element to observe
+     */
+    ref: React.RefObject<HTMLElement | null>;
+}
+interface UseContainerQueryLevelReturn {
+    /**
+     * The current container query level based on the container width
+     */
+    level: ContainerQueryLevel;
+    /**
+     * The current width of the observed container
+     */
+    width: number;
+}
+/**
+ * Hook that determines the current container query level based on container width.
+ *
+ * This hook uses ResizeObserver to monitor the width of a container element and
+ * determines which container query level it falls into based on Unity's container
+ * breakpoints from design tokens. Breakpoints are automatically synced with Unity's
+ * design system: component (< 703px), section (703-1062px), page (1063-1438px), app (≥ 1439px).
+ * @param options Configuration options containing the ref to observe
+ * @returns Object containing the current level and width
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const containerRef = useRef<HTMLDivElement>(null)
+ *   const { level, width } = useContainerQueryLevel({ ref: containerRef })
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       Current level: {level} (width: {width}px)
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useContainerQueryLevel(options: UseContainerQueryLevelOptions): UseContainerQueryLevelReturn;
+export {};

package/dist/esm/hooks/use-container-query-level.js

@@ -0,0 +1,33 @@
+import s from "@payfit/unity-themes/tokens/sizes.json";
+import { useResizeObserver as c } from "usehooks-ts";
+const i = () => {
+  const n = s.container, o = {
+    section: parseInt(n.section.$value.replace("px", ""), 10),
+    page: parseInt(n.page.$value.replace("px", ""), 10),
+    app: parseInt(n.app.$value.replace("px", ""), 10)
+  };
+  if (typeof window > "u")
+    return o;
+  const r = getComputedStyle(document.documentElement), e = (t) => {
+    const p = r.getPropertyValue(`--uy-container-${t}`), a = parseInt(p.replace("px", ""), 10);
+    return isNaN(a) ? o[t] : a;
+  };
+  return {
+    section: e("section"),
+    page: e("page"),
+    app: e("app")
+  };
+};
+function d(n) {
+  const { ref: o } = n, e = c({
+    ref: o,
+    box: "border-box"
+  }).width ?? 0, t = i();
+  return {
+    level: e >= t.app ? "app" : e >= t.page ? "page" : e >= t.section ? "section" : "component",
+    width: e
+  };
+}
+export {
+  d as useContainerQueryLevel
+};

package/dist/esm/hooks/use-form.d.ts

@@ -1,13 +1,13 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { JSX, PropsWithChildren } from 'react';
 import { UseFormProps as UseHookFormProps, UseFormReturn as UseHookFormReturn } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { FormFieldProps } from '../components/form-field/FormField.js';
 import { FormProps } from '../components/form/Form.js';
 import { Schema } from './use-form.types.js';
 export type UseUnityFormReturn<TSchema extends Schema> = {
-    methods: UseHookFormReturn<ZodInfer<TSchema>>;
-    Form: (props: Omit<FormProps<TSchema>, 'form' | 'schema'>) => JSX.Element;
-    FormField: (props: PropsWithChildren<Omit<FormFieldProps<ZodInfer<TSchema>>, 'control'>>) => JSX.Element;
+    methods: UseHookFormReturn<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>;
+    Form: (props: Omit<FormProps<TSchema, StandardSchemaV1.InferInput<TSchema>, StandardSchemaV1.InferOutput<TSchema>>, 'form' | 'schema'>) => JSX.Element;
+    FormField: (props: PropsWithChildren<Omit<FormFieldProps<StandardSchemaV1.InferOutput<TSchema>>, 'control'>>) => JSX.Element;
 };
 /**
  * A hook to create `Form` and `FormField` components that are bound to a specific schema definition and form controller. The resulting components will have full type-safety based on the provided schema type.
@@ -45,4 +45,4 @@ export type UseUnityFormReturn<TSchema extends Schema> = {
  * @remarks
  * [API]() • [Demo]()
  */
-export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<ZodInfer<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;
+export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;

package/dist/esm/hooks/use-form.types.d.ts

@@ -1,3 +1,3 @@
-import { ZodType, ZodTypeDef } from 'zod';
+import { StandardSchemaV1 } from '@standard-schema/spec';
 export type TFormValues = Record<string, unknown>;
-export type Schema = ZodType<TFormValues, ZodTypeDef, TFormValues>;
+export type Schema = StandardSchemaV1<TFormValues>;

package/dist/esm/hooks/use-resizable.js

@@ -10,35 +10,34 @@ function x({
     startY: 0,
     startWidth: 0,
     startHeight: 0
-  }), l = (r) => {
-    var s;
+  }), l = (s) => {
     if (c) return;
-    r.preventDefault();
-    const n = (s = e.current) == null ? void 0 : s.querySelector("textarea");
-    !e.current || !n || o({
+    s.preventDefault();
+    const r = e.current?.querySelector("textarea");
+    !e.current || !r || o({
       isResizing: !0,
-      startX: r.clientX,
-      startY: r.clientY,
+      startX: s.clientX,
+      startY: s.clientY,
       startWidth: e.current.offsetWidth,
-      startHeight: n.offsetHeight
+      startHeight: r.offsetHeight
     });
   };
   return g(() => {
     if (!t.isResizing) return;
-    const r = (s) => {
+    const s = (n) => {
       if (!e.current) return;
       const u = e.current.querySelector("textarea");
       if (!u) return;
-      const d = s.clientX - t.startX, f = s.clientY - t.startY, h = Math.max(t.startWidth + d, i ?? 0), m = Math.max(
+      const d = n.clientX - t.startX, f = n.clientY - t.startY, h = Math.max(t.startWidth + d, i ?? 0), m = Math.max(
         t.startHeight + f,
         a ?? 0
       );
       e.current.style.width = `${h}px`, u.style.height = `${m}px`;
-    }, n = () => {
-      o((s) => ({ ...s, isResizing: !1 }));
+    }, r = () => {
+      o((n) => ({ ...n, isResizing: !1 }));
     };
-    return document.addEventListener("mousemove", r), document.addEventListener("mouseup", n), () => {
-      document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", n);
+    return document.addEventListener("mousemove", s), document.addEventListener("mouseup", r), () => {
+      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r);
     };
   }, [t, i, a]), {
     containerRef: e,

package/dist/esm/index.d.ts

@@ -1,4 +1,7 @@
 export * from './components/actionable/Actionable.js';
+export * from './components/action-bar/ActionBar.js';
+export * from './components/action-bar/parts/ActionBarAction.js';
+export * from './components/action-bar/parts/ActionBarRoot.js';
 export * from './components/alert/Alert.js';
 export * from './components/alert/parts/AlertActions.js';
 export * from './components/alert/parts/AlertContent.js';
@@ -25,6 +28,7 @@ export * from './components/bottom-sheet/parts/BottomSheetFooter.js';
 export * from './components/bottom-sheet/parts/BottomSheetHeader.js';
 export * from './components/breadcrumbs/Breadcrumbs.js';
 export * from './components/breadcrumbs/parts/Breadcrumb.js';
+export * from './components/breadcrumbs/parts/RawBreadcrumbLink.js';
 export * from './components/button/Button.js';
 export * from './components/checkbox-field/CheckboxField.js';
 export * from './components/checkbox-group-field/CheckboxGroupField.js';
@@ -46,13 +50,14 @@ export * from './components/dialog/parts/DialogActions.js';
 export * from './components/dialog/parts/DialogActions/DialogButton.js';
 export * from './components/dialog/parts/DialogContent.js';
 export * from './components/dialog/parts/DialogTitle.js';
+export * from './components/error-state/ErrorState.js';
 export * from './components/fieldset/Fieldset.js';
 export * from './components/fieldset/parts/FieldGroup.js';
 export * from './components/flex/Flex.js';
 export * from './components/flex/Flex.variants.js';
 export * from './components/flex/FlexItem.js';
 export * from './components/form-field/FormField.js';
-export * from './components/form-field/parts/FormContextualLink.js';
+export * from './components/form-field/parts/RawFormContextualLink.js';
 export * from './components/form-field/parts/FormControl.js';
 export * from './components/form-field/parts/FormFeedbackText.js';
 export * from './components/form-field/parts/FormHelperText.js';
@@ -76,11 +81,11 @@ export * from './components/icon-button/IconButton.js';
 export * from './components/icon/Icon.js';
 export * from './components/input/Input.js';
 export * from './components/label/Label.js';
-export * from './components/link/Link.js';
+export * from './components/link/RawLink.js';
 export * from './components/menu/Menu.js';
 export * from './components/menu/parts/MenuContent.js';
 export * from './components/menu/parts/MenuHeader.js';
-export * from './components/menu/parts/MenuItem.js';
+export * from './components/menu/parts/RawMenuItem.js';
 export * from './components/menu/parts/MenuSeparator.js';
 export * from './components/menu/parts/MenuTrigger.js';
 export * from './components/multi-select-field/MultiSelectField.js';
@@ -89,13 +94,21 @@ export * from './components/multi-select/parts/MultiSelectOptGroup.js';
 export * from './components/multi-select/parts/MultiSelectOption.js';
 export * from './components/nav/Nav.js';
 export * from './components/nav/parts/NavGroup.js';
-export * from './components/nav/parts/NavItem.js';
+export * from './components/nav/parts/RawNavItem.js';
 export * from './components/number-field/NumberField.js';
 export * from './components/number-input/NumberInput.js';
 export * from './components/page/Page.js';
 export * from './components/page/parts/PageHeader.js';
 export * from './components/page/parts/PageHeading.js';
 export * from './components/pagination/Pagination.js';
+export * from './components/pagination/parts/PaginationContent.js';
+export * from './components/pagination/parts/PaginationItem.js';
+export * from './components/pagination/parts/RawPaginationLink.js';
+export * from './components/pagination/parts/RawPaginationPrevious.js';
+export * from './components/pagination/parts/RawPaginationNext.js';
+export * from './components/pagination/parts/PaginationEllipsis.js';
+export * from './components/pagination/hooks/use-pagination-window.js';
+export * from './components/pagination/hooks/use-pagination-state.js';
 export * from './components/payfit-brand/PayFitBrand.js';
 export * from './components/payfit-brand/PayFitPreprod.js';
 export * from './components/pill/Pill.js';
@@ -138,12 +151,12 @@ export * from './components/table/parts/TableHeader.js';
 export * from './components/table/parts/TablePagination.js';
 export * from './components/table/parts/TableRow.js';
 export * from './components/tabs/Tabs.js';
-export * from './components/tabs/parts/Tab.js';
+export * from './components/tabs/parts/RawTab.js';
 export * from './components/tabs/parts/TabList.js';
 export * from './components/tabs/parts/TabPanel.js';
 export * from './components/task-menu/TaskMenu.js';
-export * from './components/task-menu/parts/SubTask.js';
-export * from './components/task-menu/parts/Task.js';
+export * from './components/task-menu/parts/RawSubTask.js';
+export * from './components/task-menu/parts/RawTask.js';
 export * from './components/task-menu/parts/TaskGroup.js';
 export * from './components/text-area/TextArea.js';
 export * from './components/text-field/TextField.js';
@@ -158,9 +171,7 @@ export * from './components/toggle-switch/ToggleSwitch.js';
 export * from './components/tooltip/Tooltip.js';
 export * from './hooks/use-async-list.js';
 export * from './hooks/use-breakpoint-listener.js';
+export * from './hooks/use-container-query-level.js';
 export * from './hooks/use-form.js';
 export * from './hooks/use-media-query.js';
 export * from './providers/router/RouterProvider.js';
-export * from './components/action-bar/ActionBar.js';
-export * from './components/action-bar/parts/ActionBarAction.js';
-export * from './components/action-bar/parts/ActionBarRoot.js';