@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/index.storybook-testing.d.ts

@@ -1,2 +1,5 @@
 export { getTestingUtilsDatePicker } from './components/date-picker-field/test-utils.js';
+export { getTestingUtilsMultiSelect } from './components/multi-select-field/test-utils.js';
 export { getTestingUtilsSelect } from './components/select-field/test-utils.js';
+export { getTestingUtilsToast } from './components/toast/test-utils.js';
+export { getTestingUtilsDialog } from './components/dialog/test-utils.js';

package/dist/esm/integrations/tanstack-router/components/form-contextual-link/FormContextualLink.d.ts

@@ -6,9 +6,12 @@ import { RawFormContextualLink } from '../../../../components/form-field/parts/R
  * @example
  * ```tsx
  * import { FormContextualLink } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
  *
  * function MyForm() {
- *   const { Form, FormField } = useUnityForm(schema)
+ *   const { Form, FormField } = useTanstackUnityForm({
+ *     defaultValues: { email: '' },
+ *   })
  *   return (
  *     <Form>
  *       <FormField name="email">
@@ -33,6 +36,8 @@ import { RawFormContextualLink } from '../../../../components/form-field/parts/R
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
  * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead (see `TanstackFormContextualLink`).
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const FormContextualLink: LinkComponent<typeof RawFormContextualLink> & {
     displayName: string;

package/dist/esm/integrations/tanstack-router/components/form-contextual-link/TanstackFormContextualLink.d.ts

@@ -0,0 +1,43 @@
+import { LinkComponent } from '@tanstack/react-router';
+import { TanstackRawFormContextualLink } from '../../../../components/form-field/parts/TanstackRawFormContextualLink.js';
+/**
+ * Unity's TanstackFormContextualLink that integrates with Tanstack Router for seamless client-side navigation within form fields.
+ * Enables declarative routing with type-safe route parameters, search params, and automatic preloading capabilities while maintaining form field context.
+ * @example
+ * ```tsx
+ * import { TanstackFormContextualLink } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function MyForm() {
+ *   const { Form, FormField } = useTanstackUnityForm({
+ *     defaultValues: { email: '' },
+ *   })
+ *   return (
+ *     <Form>
+ *       <FormField name="email">
+ *         <TanstackFormContextualLink to="/help">
+ *           Need help?
+ *         </TanstackFormContextualLink>
+ *       </FormField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be used inside a FormField component to maintain proper form context
+ * - Supports type-safe navigation with route parameters and search params
+ * - Provides automatic route preloading on hover or mount via the `preload` prop
+ * - Handles relative and absolute paths with `from` and `to` props for flexible routing
+ * - Integrates seamlessly with Tanstack Router's navigation system and loader functions
+ * - Maintains all accessibility features from the underlying TanstackRawFormContextualLink component
+ * - Automatically detects external URLs and applies appropriate security attributes (target="_blank", rel="noopener noreferrer")
+ * - Inherits the "small" size and "secondary" color styling appropriate for form contextual links
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/form-contextual-link GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare const TanstackFormContextualLink: LinkComponent<typeof TanstackRawFormContextualLink> & {
+    displayName: string;
+};
+export { TanstackFormContextualLink };

package/dist/esm/integrations/tanstack-router/components/list-view/ListView.d.ts

@@ -0,0 +1,34 @@
+import { ListViewProps } from '../../../../components/list-view/ListView.js';
+/**
+ * Unity's ListView that integrates with Tanstack Router for seamless client-side navigation.
+ * This component automatically configures the RouterProvider context needed for ListViewItem navigation.
+ * @example
+ * ```tsx
+ * import { ListView, ListViewItem } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function DocumentsList() {
+ *   return (
+ *     <ListView aria-label="Documents">
+ *       <ListViewItem to="/documents/$id" params={{ id: '123' }}>
+ *         <ListViewItemLabel>Document 123</ListViewItemLabel>
+ *       </ListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically provides the RouterProvider context needed for client-side navigation
+ * - Use this instead of the base ListView component when using ListViewItem with TanStack Router
+ * - All props from the base ListView component are supported
+ * - Items within this ListView will use client-side navigation instead of full page reloads
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/list-view GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-115&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview--docs unity-components.payfit.io}
+ */
+declare function ListView<T extends object>(props: ListViewProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace ListView {
+    var displayName: string;
+}
+export { ListView };

package/dist/esm/integrations/tanstack-router/components/list-view/ListView.js

@@ -0,0 +1,25 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useCallback as u } from "react";
+import { useRouter as a, useMatchRoute as m } from "@tanstack/react-router";
+import { ListView as n } from "../../../../components/list-view/ListView.js";
+import { RouterProvider as c } from "../../../../providers/router/RouterProvider.js";
+function f(i) {
+  const o = a(), e = m(), s = u(
+    (t) => e({ to: t, fuzzy: !0 }) !== !1,
+    [e]
+  );
+  return /* @__PURE__ */ r(
+    c,
+    {
+      navigate: (t) => {
+        o.navigate({ to: t });
+      },
+      isActive: s,
+      children: /* @__PURE__ */ r(n, { ...i })
+    }
+  );
+}
+f.displayName = "ListView";
+export {
+  f as ListView
+};

package/dist/esm/integrations/tanstack-router/components/list-view/parts/ListViewItem.d.ts

@@ -0,0 +1,51 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { RawListViewItemProps } from '../../../../../components/list-view/parts/RawListViewItem.js';
+type ListViewItemRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawListViewItemProps<object>, 'prefix' | 'suffix' | 'href'> & ValidateLinkOptions<TRouter, TOptions> & {
+    prefixElement?: RawListViewItemProps<object>['prefix'];
+    suffixElement?: RawListViewItemProps<object>['suffix'];
+};
+type ListViewItemHrefProps = Omit<RawListViewItemProps<object>, 'prefix' | 'suffix'> & {
+    prefixElement?: RawListViewItemProps<object>['prefix'];
+    suffixElement?: RawListViewItemProps<object>['suffix'];
+    href: string;
+};
+export type ListViewItemProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = ListViewItemRouterProps<TRouter, TOptions> | ListViewItemHrefProps;
+/**
+ * Unity's ListViewItem that integrates with Tanstack Router for seamless client-side navigation.
+ * Enables declarative routing with type-safe route parameters, search params, and automatic preloading capabilities.
+ * @param {ListViewItemProps} props - Either router-based props (with 'to') or direct link props (with 'href')
+ * @example
+ * ```tsx
+ * import { ListView } from '@payfit/unity-components'
+ * import { ListViewItem } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function DocumentsList() {
+ *   return (
+ *     <ListView aria-label="Documents">
+ *       <ListViewItem to="/documents/$id" params={{ id: '123' }}>
+ *         <ListViewItemLabel>Document 123</ListViewItemLabel>
+ *       </ListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a router link when 'to' prop is provided, or as a standard link when 'href' is provided
+ * - Supports type-safe route parameters, search params, and relative navigation with Tanstack Router
+ * - Provides automatic route preloading on hover or mount via the `preload` prop
+ * - Integrates seamlessly with ListView component for list-based navigation UI patterns
+ * - Supports icon prefixes and suffixes via prefixElement and suffixElement props
+ * - Maintains all accessibility features and styling options from the underlying RawListViewItem component
+ * - Use `hideDisclosureIndicator` to hide the default disclosure arrow for non-navigational items
+ * @see {@link ListViewItemProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/list-view-item GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-115&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview--docs unity-components.payfit.io}
+ */
+declare function ListViewItem<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>({ prefixElement, suffixElement, ...rest }: ListViewItemProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace ListViewItem {
+    var displayName: string;
+}
+export { ListViewItem };

package/dist/esm/integrations/tanstack-router/components/list-view/parts/ListViewItem.js

@@ -0,0 +1,32 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createLink as m } from "@tanstack/react-router";
+import { RawListViewItem as e } from "../../../../../components/list-view/parts/RawListViewItem.js";
+const f = m(e);
+function p({
+  prefixElement: o,
+  suffixElement: t,
+  ...i
+}) {
+  return "to" in i ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ r(
+      f,
+      {
+        ...i,
+        prefix: o,
+        suffix: t
+      }
+    )
+  ) : /* @__PURE__ */ r(
+    e,
+    {
+      ...i,
+      prefix: o,
+      suffix: t
+    }
+  );
+}
+p.displayName = "ListViewItem";
+export {
+  p as ListViewItem
+};

package/dist/esm/integrations/tanstack-router/components/navigation-card/NavigationCard.d.ts

@@ -0,0 +1,73 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { NavigationCardProps as RawNavigationCardProps } from '../../../../components/navigation-card/NavigationCard.js';
+type NavigationCardRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawNavigationCardProps, 'asElement' | 'prefix' | 'suffix'> & ValidateLinkOptions<TRouter, TOptions> & {
+    prefixElement?: RawNavigationCardProps['prefix'];
+    suffixElement?: RawNavigationCardProps['suffix'];
+};
+type NavigationCardButtonProps = Omit<RawNavigationCardProps, 'asElement' | 'prefix' | 'suffix' | 'href'> & {
+    prefixElement?: RawNavigationCardProps['prefix'];
+    suffixElement?: RawNavigationCardProps['suffix'];
+    onPress: NonNullable<RawNavigationCardProps['onPress']>;
+};
+export type NavigationCardProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = NavigationCardRouterProps<TRouter, TOptions> | NavigationCardButtonProps;
+/**
+ * Unity's NavigationCard that integrates with Tanstack Router for seamless client-side navigation.
+ * Enables declarative routing with type-safe route parameters, search params, and automatic preloading capabilities.
+ * @param {NavigationCardProps} props - Either router-based props (with 'to') or button-based props (with 'onPress')
+ * @example
+ * ```tsx
+ * import { NavigationCard } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { Icon } from '@payfit/unity-components'
+ * import { NavigationCardLabel } from '@payfit/unity-components'
+ * import { NavigationCardDescription } from '@payfit/unity-components'
+ *
+ * // Router mode - navigation card as a link
+ * function NavigationWithLink() {
+ *   return (
+ *     <NavigationCard
+ *       to="/dashboard"
+ *       prefixElement={<Icon src="LayoutDashboardOutlined" size={24} />}
+ *     >
+ *       <div>
+ *         <NavigationCardLabel>Dashboard</NavigationCardLabel>
+ *         <NavigationCardDescription>
+ *           View your analytics
+ *         </NavigationCardDescription>
+ *       </div>
+ *     </NavigationCard>
+ *   )
+ * }
+ *
+ * // Button mode - navigation card as a button
+ * function NavigationWithButton() {
+ *   return (
+ *     <NavigationCard
+ *       onPress={() => console.log('Clicked')}
+ *       prefixElement={<Icon src="PlusOutlined" size={24} />}
+ *     >
+ *       <Text variant="h4">Add New</Text>
+ *     </NavigationCard>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a link when 'to' prop is provided, or as a button when 'onPress' is provided
+ * - Supports type-safe navigation with route parameters and search params via `params` and `search` props
+ * - Provides automatic route preloading on hover or mount via the `preload` prop
+ * - Handles relative and absolute paths with `from` and `to` props for flexible routing
+ * - Integrates seamlessly with Tanstack Router's navigation system and loader functions
+ * - Maintains all accessibility features and styling options from the underlying RawNavigationCard component
+ * - Automatically detects external URLs and applies appropriate security attributes (target="_blank", rel="noopener noreferrer")
+ * - Supports both `compact` and `comfortable` variants for different layout needs
+ * - Use `prefixElement` and `suffixElement` props to add icons or other elements to the card
+ * @see {@link NavigationCardProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/navigation-card GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare function NavigationCard<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>({ prefixElement, suffixElement, ...rest }: NavigationCardProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace NavigationCard {
+    var displayName: string;
+}
+export { NavigationCard };

package/dist/esm/integrations/tanstack-router/components/navigation-card/NavigationCard.js

@@ -0,0 +1,37 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createLink as n } from "@tanstack/react-router";
+import { RawNavigationCard as t } from "../../../../components/navigation-card/NavigationCard.js";
+const d = n(t);
+function e({
+  prefixElement: i,
+  suffixElement: a,
+  ...o
+}) {
+  return "to" in o || "href" in o ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ r(
+      d,
+      {
+        ...o,
+        asElement: "a",
+        prefix: i,
+        suffix: a
+      }
+    )
+  ) : (
+    // @ts-expect-error - TypeScript cannot narrow union types at the type level. RawNavigationCardProps is a union of link and button props, and runtime check ensures only button props are passed here.
+    /* @__PURE__ */ r(
+      t,
+      {
+        ...o,
+        asElement: "button",
+        prefix: i,
+        suffix: a
+      }
+    )
+  );
+}
+e.displayName = "NavigationCard";
+export {
+  e as NavigationCard
+};

package/dist/esm/integrations/tanstack-router/index.d.ts

@@ -3,7 +3,10 @@ export * from './components/breadcrumbs/BreadcrumbLink.js';
 export * from './components/breadcrumbs/Breadcrumbs.js';
 export * from './components/form-contextual-link/FormContextualLink.js';
 export * from './components/link/Link.js';
+export * from './components/list-view/ListView.js';
+export * from './components/list-view/parts/ListViewItem.js';
 export * from './components/menu-item/MenuItem.js';
+export * from './components/navigation-card/NavigationCard.js';
 export * from './components/nav-item/NavItem.js';
 export * from './components/pagination/PaginationLink.js';
 export * from './components/pagination/PaginationNext.js';

package/dist/esm/integrations/tanstack-router/utils/decorators.d.ts

@@ -16,7 +16,7 @@ export interface TanstackRouterDecoratorContext extends StoryContext {
             renderRootRoute?: (Story: Parameters<Decorator>[0]) => React.ReactNode;
             routes: RouteConfig[];
         };
-        tanstackRouterDevTools?: boolean;
+        enableTanstackRouterDevTools?: boolean;
     };
 }
 export declare const TanstackRouterDecorator: Decorator;

package/dist/esm/integrations/tanstack-router.js

@@ -1,34 +1,40 @@
 import { BreadcrumbLink as e } from "./tanstack-router/components/breadcrumbs/BreadcrumbLink.js";
 import { FormContextualLink as m } from "./tanstack-router/components/form-contextual-link/FormContextualLink.js";
 import { Link as x } from "./tanstack-router/components/link/Link.js";
-import { MenuItem as p } from "./tanstack-router/components/menu-item/MenuItem.js";
-import { NavItem as i } from "./tanstack-router/components/nav-item/NavItem.js";
-import { PaginationLink as u } from "./tanstack-router/components/pagination/PaginationLink.js";
-import { PaginationNext as s } from "./tanstack-router/components/pagination/PaginationNext.js";
-import { PaginationPrevious as L } from "./tanstack-router/components/pagination/PaginationPrevious.js";
-import { Tab as c } from "./tanstack-router/components/tabs/parts/Tab.js";
-import { TabPanel as g } from "./tanstack-router/components/tabs/parts/TabPanel.js";
-import { Tabs as l } from "./tanstack-router/components/tabs/Tabs.js";
-import { Task as I } from "./tanstack-router/components/task-menu/Task.js";
-import { SubTask as C } from "./tanstack-router/components/task-menu/SubTask.js";
-import { Breadcrumb as M } from "../components/breadcrumbs/parts/Breadcrumb.js";
-import { Breadcrumbs as h } from "../components/breadcrumbs/Breadcrumbs.js";
-import { TabList as q } from "../components/tabs/parts/TabList.js";
+import { ListView as p } from "./tanstack-router/components/list-view/ListView.js";
+import { ListViewItem as n } from "./tanstack-router/components/list-view/parts/ListViewItem.js";
+import { MenuItem as s } from "./tanstack-router/components/menu-item/MenuItem.js";
+import { NavigationCard as L } from "./tanstack-router/components/navigation-card/NavigationCard.js";
+import { NavItem as T } from "./tanstack-router/components/nav-item/NavItem.js";
+import { PaginationLink as d } from "./tanstack-router/components/pagination/PaginationLink.js";
+import { PaginationNext as c } from "./tanstack-router/components/pagination/PaginationNext.js";
+import { PaginationPrevious as B } from "./tanstack-router/components/pagination/PaginationPrevious.js";
+import { Tab as N } from "./tanstack-router/components/tabs/parts/Tab.js";
+import { TabPanel as w } from "./tanstack-router/components/tabs/parts/TabPanel.js";
+import { Tabs as V } from "./tanstack-router/components/tabs/Tabs.js";
+import { Task as M } from "./tanstack-router/components/task-menu/Task.js";
+import { SubTask as h } from "./tanstack-router/components/task-menu/SubTask.js";
+import { Breadcrumb as q } from "../components/breadcrumbs/parts/Breadcrumb.js";
+import { Breadcrumbs as z } from "../components/breadcrumbs/Breadcrumbs.js";
+import { TabList as D } from "../components/tabs/parts/TabList.js";
 export {
-  M as Breadcrumb,
+  q as Breadcrumb,
   e as BreadcrumbLink,
-  h as Breadcrumbs,
+  z as Breadcrumbs,
   m as FormContextualLink,
   x as Link,
-  p as MenuItem,
-  i as NavItem,
-  u as PaginationLink,
-  s as PaginationNext,
-  L as PaginationPrevious,
-  C as SubTask,
-  c as Tab,
-  q as TabList,
-  g as TabPanel,
-  l as Tabs,
-  I as Task
+  p as ListView,
+  n as ListViewItem,
+  s as MenuItem,
+  T as NavItem,
+  L as NavigationCard,
+  d as PaginationLink,
+  c as PaginationNext,
+  B as PaginationPrevious,
+  h as SubTask,
+  N as Tab,
+  D as TabList,
+  w as TabPanel,
+  V as Tabs,
+  M as Task
 };

package/dist/esm/mocks/employees.d.ts

@@ -8,10 +8,6 @@ export type Employee = {
     startWorkingDate: string;
     endWorkingDate: string;
     status: 'active' | 'onboarding' | 'offboarding' | 'inactive' | 'retired';
-    manager: {
-        name: string;
-        position: string;
-        team: string;
-    } | null;
+    manager: Pick<Employee, 'name' | 'position' | 'team'> | null;
 };
 export declare const mockEmployees: Employee[];

package/dist/esm/storybook-testing.js

@@ -1,6 +1,12 @@
 import { getTestingUtilsDatePicker as i } from "./components/date-picker-field/test-utils.js";
-import { getTestingUtilsSelect as g } from "./components/select-field/test-utils.js";
+import { getTestingUtilsMultiSelect as g } from "./components/multi-select-field/test-utils.js";
+import { getTestingUtilsSelect as s } from "./components/select-field/test-utils.js";
+import { getTestingUtilsToast as T } from "./components/toast/test-utils.js";
+import { getTestingUtilsDialog as m } from "./components/dialog/test-utils.js";
 export {
   i as getTestingUtilsDatePicker,
-  g as getTestingUtilsSelect
+  m as getTestingUtilsDialog,
+  g as getTestingUtilsMultiSelect,
+  s as getTestingUtilsSelect,
+  T as getTestingUtilsToast
 };

package/dist/esm/storybook-utilities/previewTransform.d.ts

@@ -1 +1,2 @@
 export declare const previewTransform: (code: string) => Promise<string>;
+export declare const extractRenderProperty: (code: string) => string;

package/dist/esm/utils/scroll-detection.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Strategy for detecting scrollable content
+ */
+export type ScrollDetectionStrategy = 'size' | 'style' | 'both';
+/**
+ * Detailed detection results for both size and style methods
+ */
+export interface DetectionMethod {
+    size: {
+        vertical: boolean;
+        horizontal: boolean;
+    };
+    style: {
+        vertical: boolean;
+        horizontal: boolean;
+    };
+}
+/**
+ * Result of scroll detection
+ */
+export interface ScrollDetectionResult {
+    hasVerticalScroll: boolean;
+    hasHorizontalScroll: boolean;
+    hasAnyScroll: boolean;
+    detectionMethod: DetectionMethod;
+}
+/**
+ * Detects if an element has scrollable content using the specified strategy.
+ * This is a pure function with no side effects, making it easy to test
+ * and reuse in different contexts (React hooks, vanilla JS, etc.)
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {ScrollDetectionResult} Detailed scroll detection result
+ * @example
+ * ```ts
+ * const element = document.getElementById('container');
+ * const result = detectScroll(element, 'size');
+ * if (result.hasVerticalScroll) {
+ *   console.log('Element has vertical scroll');
+ * }
+ * ```
+ * @example
+ * ```ts
+ * // Check both strategies for debugging
+ * const result = detectScroll(element, 'both');
+ * console.log('Size detection:', result.detectionMethod.size);
+ * console.log('Style detection:', result.detectionMethod.style);
+ * ```
+ */
+export declare function detectScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): ScrollDetectionResult;
+/**
+ * Simplified helper to check if element has any scrollable content
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {boolean} True if element has any scrollable content
+ * @example
+ * ```ts
+ * if (hasScroll(document.getElementById('container'))) {
+ *   console.log('Has scroll');
+ * }
+ * ```
+ */
+export declare function hasScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): boolean;
+/**
+ * Check if element has vertical scrollable content
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {boolean} True if element has vertical scrollable content
+ */
+export declare function hasVerticalScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): boolean;
+/**
+ * Check if element has horizontal scrollable content
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {boolean} True if element has horizontal scrollable content
+ */
+export declare function hasHorizontalScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): boolean;

package/dist/esm/utils/scroll-detection.js

@@ -0,0 +1,33 @@
+function S(o, z = "size") {
+  const r = o.scrollHeight > o.clientHeight, e = o.scrollWidth > o.clientWidth, s = window.getComputedStyle(o), h = s.overflowY, n = s.overflowX, c = s.overflow, a = h === "scroll" || h === "auto" || c === "scroll" || c === "auto", i = n === "scroll" || n === "auto" || c === "scroll" || c === "auto";
+  let t, l;
+  switch (z) {
+    case "size":
+      t = r, l = e;
+      break;
+    case "style":
+      t = a, l = i;
+      break;
+    case "both":
+      t = r && a, l = e && i;
+      break;
+  }
+  return {
+    hasVerticalScroll: t,
+    hasHorizontalScroll: l,
+    hasAnyScroll: t || l,
+    detectionMethod: {
+      size: {
+        vertical: r,
+        horizontal: e
+      },
+      style: {
+        vertical: a,
+        horizontal: i
+      }
+    }
+  };
+}
+export {
+  S as detectScroll
+};

package/dist/esm/utils/spacing.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Spacing token utilities for Unity components.
+ * Internal utilities for processing spacing tokens for use with tailwind-variants.
+ */
+/**
+ * Unity spacing token with dollar sign prefix.
+ * Matches the Unity themes spacing scale.
+ */
+export type SpacingToken = '$0' | '$25' | '$50' | '$75' | '$100' | '$125' | '$150' | '$200' | '$250' | '$300' | '$400' | '$500' | '$600' | '$800' | '$1000';
+/**
+ * Individual padding configuration for each side.
+ * All properties are optional, allowing partial specification.
+ */
+export type PaddingObject = {
+    top?: SpacingToken;
+    right?: SpacingToken;
+    bottom?: SpacingToken;
+    left?: SpacingToken;
+};
+/**
+ * Processed padding variants ready for tailwind-variants.
+ * Used to pass values to the tv() function.
+ */
+export type PaddingVariants = {
+    padding?: SpacingToken;
+    paddingBlock?: SpacingToken;
+    paddingInline?: SpacingToken;
+    paddingTop?: SpacingToken;
+    paddingRight?: SpacingToken;
+    paddingBottom?: SpacingToken;
+    paddingLeft?: SpacingToken;
+};
+/**
+ * Processes padding props to determine which variant values to apply.
+ * Handles three input types:
+ * 1. Simple token string - applies to all sides
+ * 2. Block/Inline tokens - applies to vertical/horizontal directions
+ * 3. Object with individual sides - applies to specific sides
+ *
+ * Priority order (highest to lowest):
+ * - Individual padding properties (top, right, bottom, left)
+ * - paddingBlock and paddingInline
+ * - padding (all sides)
+ * @param padding - Padding for all directions or object with individual sides
+ * @param paddingBlock - Padding for block direction (top & bottom)
+ * @param paddingInline - Padding for inline direction (left & right)
+ * @returns Padding variant values for use with tv() function
+ * @example
+ * ```ts
+ * // All sides
+ * processPaddingProp('$200')
+ * // { padding: '$200' }
+ *
+ * // Block/Inline
+ * processPaddingProp(undefined, '$300', '$200')
+ * // { paddingBlock: '$300', paddingInline: '$200' }
+ *
+ * // Individual sides
+ * processPaddingProp({ top: '$300', right: '$200', bottom: '$300', left: '$200' })
+ * // { paddingTop: '$300', paddingRight: '$200', paddingBottom: '$300', paddingLeft: '$200' }
+ * ```
+ */
+export declare function processPaddingProp(padding?: SpacingToken | PaddingObject, paddingBlock?: SpacingToken, paddingInline?: SpacingToken): PaddingVariants;

package/dist/esm/utils/spacing.js

@@ -0,0 +1,15 @@
+function r(t, o, e) {
+  return typeof t == "object" && t !== null ? {
+    paddingTop: t.top,
+    paddingRight: t.right,
+    paddingBottom: t.bottom,
+    paddingLeft: t.left
+  } : {
+    padding: t,
+    paddingBlock: o,
+    paddingInline: e
+  };
+}
+export {
+  r as processPaddingProp
+};