@payfit/unity-components 1.2.0 → 2.0.0

package/dist/esm/components/text/Text.js

@@ -1,7 +1,7 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { text as h } from "./Text.variants.js";
-const y = {
+import { jsx as h } from "react/jsx-runtime";
+import { forwardRef as y, useMemo as c } from "react";
+import { text as g } from "./Text.variants.js";
+const b = {
   inherit: "span",
   h1: "h1",
   h2: "h2",
@@ -21,38 +21,41 @@ const y = {
   actionLarge: "span",
   actionSmall: "span",
   actionInfo: "span"
-}, g = c(
+}, x = y(
   ({
-    children: e,
+    children: l,
     variant: o,
-    color: n,
-    isTruncated: a,
-    lineClamp: t,
-    asElement: s,
-    className: r,
-    ...l
+    color: t,
+    isTruncated: e,
+    lineClamp: s,
+    asElement: m,
+    className: n,
+    ...r
   }, i) => {
-    const m = h({
-      variant: o,
-      color: n,
-      isTruncated: a,
-      isLineClamped: t !== void 0,
-      className: r
-    }), p = y[o ?? "inherit"];
-    return /* @__PURE__ */ d(
-      s ?? p,
+    const a = s !== void 0, p = c(
+      () => g({
+        variant: o,
+        color: t,
+        isTruncated: e,
+        isLineClamped: a,
+        className: n
+      }),
+      [n, t, a, e, o]
+    ), d = b[o ?? "inherit"];
+    return /* @__PURE__ */ h(
+      m ?? d,
       {
         "data-dd-privacy": "mask",
-        ...l,
+        ...r,
         ref: i,
-        className: m,
-        style: { "--uy-text-line-clamp": t },
-        children: e
+        className: p,
+        style: { "--uy-text-line-clamp": s },
+        children: l
       }
     );
   }
 );
-g.displayName = "Text";
+x.displayName = "Text";
 export {
-  g as Text
+  x as Text
 };

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/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,10 +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';
-export * from './components/error-state/ErrorState.js';