@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/nav/parts/NavItem.d.ts

@@ -0,0 +1,281 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { DataAttributes } from '../../../types/DataAttributes.js';
+export declare const navItemBase: import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}>, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const navItem: import('tailwind-variants').TVReturnType<{
+    isActive: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            label: string;
+        };
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isActive: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            label: string;
+        };
+    };
+}, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}>, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}>, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export type NavItemProps = Pick<VariantProps<typeof navItem>, 'level'> & PropsWithChildren<{
+    /** The prefix element to be displayed before the label. */
+    prefix?: ({ isCurrent }: {
+        isCurrent: boolean;
+    }) => ReactNode;
+    /** The suffix element to be displayed after the label. */
+    suffix?: ReactNode;
+    /** The click event handler for the nav item. Use it when the item executes an action that  does not redirect to another page */
+    onPress?: AriaButtonProps['onPress'];
+    /** The URL to navigate to when the nav item is clicked. Use it when the item should trigger a navigation to another page */
+    href?: string;
+    /** Whether the nav item is currently active. */
+    isCurrent?: boolean;
+    /** Whether the nav item is disabled. */
+    isDisabled?: boolean;
+    /** Whether the nav item should exactly match the route's path. */
+    isExact?: boolean;
+}> & DataAttributes;
+/**
+ * The `NavItem` component represents a single, fully accessible navigation item in a `Nav` component, with support for custom elements at the start or the end of the element. It can render a link or a button depending on the provided properties.
+ */
+export declare function NavItem({ children, level, prefix, suffix, onPress, href, isCurrent, isDisabled, isExact, ...dataAttributes }: NavItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavItem {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/nav/parts/NavItem.js

@@ -0,0 +1,88 @@
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { Link as N, Button as I } from "react-aria-components";
+import { twMerge as j } from "tailwind-merge";
+import { tv as o } from "tailwind-variants";
+import { useRouter as w } from "../../../providers/router/RouterProvider.js";
+const A = o({
+  slots: {
+    base: "uy-grid uy-w-full uy-grid-cols-[auto_1fr_auto] uy-items-center uy-py-100 uy-px-150 uy-gap-100 uy-rounded-75 uy-outline-0 hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed uy-transition-all focus:uy-outline-0 data-[focus-visible]:uy-outline-none data-[focus-visible]:uy-ring-2 data-[focus-visible]:uy-ring-utility-focus-ring data-[focus-visible]:uy-ring-offset-2",
+    prefix: "uy-p-25 empty:uy-hidden",
+    suffix: "uy-flex uy-gap-100 uy-items-center uy-justify-self-end uy-text-right empty:uy-hidden",
+    label: "uy-flex-1 uy-basis-full uy-text-left uy-truncate uy-overflow-hidden uy-whitespace-break-spaces uy-typography-body"
+  },
+  variants: {
+    level: {
+      0: "uy-pl-150",
+      1: "uy-pl-600"
+    },
+    isDisabled: {
+      true: {
+        base: "uy-pointer-events-none",
+        label: "uy-text-content-neutral-disabled"
+      },
+      false: ""
+    }
+  }
+}), S = o({
+  extend: A,
+  variants: {
+    isActive: {
+      true: {
+        base: "uy-bg-surface-neutral-active",
+        label: "uy-typography-body-strong"
+      },
+      false: {
+        base: "",
+        label: "uy-typography-body"
+      }
+    }
+  }
+});
+function k({
+  children: y,
+  level: u = 0,
+  prefix: i,
+  suffix: r,
+  onPress: c,
+  href: e,
+  isCurrent: d,
+  isDisabled: s = !1,
+  isExact: f = !1,
+  ...p
+}) {
+  const n = w(), b = e ? N : I, t = n && e ? n.isActive(e.toString(), f) : d, {
+    base: v,
+    label: l,
+    prefix: m,
+    suffix: g
+  } = S({ level: u, isActive: t, isDisabled: s }), x = Object.assign(
+    {},
+    t !== void 0 && {
+      "data-current": t,
+      "aria-current": t ? "page" : void 0
+    },
+    !e && { tabIndex: s ? -1 : void 0 }
+  );
+  return /* @__PURE__ */ a("li", { children: /* @__PURE__ */ h(
+    b,
+    {
+      className: j(v(), l()),
+      href: e,
+      onPress: c,
+      isDisabled: s,
+      "data-level": u,
+      ...x,
+      ...p,
+      children: [
+        i && /* @__PURE__ */ a("span", { className: m(), children: i({ isCurrent: t ?? !1 }) }),
+        /* @__PURE__ */ a("span", { className: l(), children: y }),
+        r && /* @__PURE__ */ a("span", { className: g(), children: r })
+      ]
+    }
+  ) });
+}
+k.displayName = "NavItem";
+export {
+  k as NavItem,
+  A as navItemBase
+};

package/dist/esm/components/page/Page.d.ts

@@ -0,0 +1,75 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const page: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, undefined, "uy-min-h-dvh uy-flex uy-flex-col uy-gap-400", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, {
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}>, {
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, undefined, "uy-min-h-dvh uy-flex uy-flex-col uy-gap-400", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, {
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}>, unknown, unknown, undefined>>;
+export interface PageProps extends PropsWithChildren {
+    /**
+     * The variant of the page.
+     * @default 'default'
+     * @remarks
+     * - `default` - The default variant is a standard page with a left-aligned header and a right-aligned footer.
+     * - `legacy__midnight` - The legacy__midnight variant is a page with a left-aligned header and a right-aligned footer.
+     */
+    variant: VariantProps<typeof page>['variant'];
+}
+/**
+ * The Page component provides a consistent layout container for page content with predefined spacing and styling.
+ *
+ * Use this component as the main container for your content to ensure a consistent look and feel across the application.
+ * It works seamlessly with PageHeader for structured page layouts and adapts to different screen sizes.
+ * @param {PageProps} props - Standard props from HTMLDivElement with additional variant option
+ * @see {@link PageProps} for all available props
+ * @example
+ * ```tsx
+ * import { Page, PageHeader, PageHeading } from '@payfit/unity-components'
+ *
+ * function MyPage() {
+ *   return (
+ *     <Page variant="default">
+ *       <PageHeader>
+ *         <PageHeading variant="title">My Page</PageHeading>
+ *       </PageHeader>
+ *       <div>Content goes here</div>
+ *     </Page>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/layout-page--docs) • [Design docs](https://www.payfit.design/24f360409/p/99b0ae-app-body)
+ */
+declare const Page: import('react').ForwardRefExoticComponent<PageProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Page };

package/dist/esm/components/page/Page.js

@@ -0,0 +1,44 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { tv as t } from "tailwind-variants";
+const o = t({
+  base: "uy-min-h-dvh uy-flex uy-flex-col uy-gap-400",
+  variants: {
+    variant: {
+      default: [
+        "uy-px-200 uy-py-300 md:uy-p-300 lg:uy-p-400",
+        // a tiny margin left so the shadow is visible
+        "md:uy-ml-100",
+        "uy-bg-surface-neutral md:uy-border md:uy-border-solid md:uy-border-border-neutral uy-border-r-0 md:uy-rounded-tl-400 md:uy-rounded-bl-400 md:uy-shadow-raising"
+      ],
+      legacy__midnight: [
+        "uy-bg-transparent",
+        "md:uy-mt-250 md:uy-mr-300",
+        "md:uy-ml-100"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), l = y(
+  ({ children: r, variant: a, ...d }, u) => {
+    const e = o({ variant: a });
+    return /* @__PURE__ */ m(
+      "main",
+      {
+        ...d,
+        ref: u,
+        className: e,
+        "data-dd-privacy": "allow",
+        "data-unity-page": a,
+        children: r
+      }
+    );
+  }
+);
+l.displayName = "Page";
+export {
+  l as Page,
+  o as page
+};

package/dist/esm/components/page/parts/PageHeader.d.ts

@@ -0,0 +1,100 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { BreadcrumbProps } from '../../breadcrumbs/parts/Breadcrumb.js';
+export declare const pageHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    headingActionsWrapper: string;
+    titles: string;
+    actions: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    headingActionsWrapper: string;
+    titles: string;
+    actions: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    headingActionsWrapper: string;
+    titles: string;
+    actions: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface PageHeaderProps extends PropsWithChildren<VariantProps<typeof pageHeader>> {
+    pagePath?: BreadcrumbProps[];
+    actions?: ReactNode;
+}
+/**
+ * The PageHeader component provides a consistent layout for page headers with title, subtitle, and actions support.
+ *
+ * It creates a structured header for pages with support for breadcrumbs navigation, title/subtitle content, and action buttons.
+ * The component adapts to different screen sizes, reorganizing elements for optimal display on mobile and desktop views.
+ * @param {PageHeaderProps} props - Props for the PageHeader component
+ * @example
+ * ```tsx
+ * import { PageHeader, PageHeading, Button } from '@payfit/unity-components'
+ *
+ * <PageHeader
+ *   pagePath={[
+ *     { href: '/dashboard', label: 'Dashboard' },
+ *     { href: '/employees', label: 'Employees' }
+ *   ]}
+ *   actions={
+ *     <>
+ *       <Button variant="secondary">Cancel</Button>
+ *       <Button variant="primary">Save</Button>
+ *     </>
+ *   }
+ * >
+ *   <PageHeading variant="title">Employee List</PageHeading>
+ *   <PageHeading variant="subtitle">View and manage your employees</PageHeading>
+ * </PageHeader>
+ * ```
+ * @see {@link PageHeaderProps} for all available props
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/layout-page-pageheader--docs) • [Design docs](https://www.payfit.design/24f360409/p/202477-page-header)
+ */
+declare const PageHeader: import('react').ForwardRefExoticComponent<PageHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { PageHeader };

package/dist/esm/components/page/parts/PageHeader.js

@@ -0,0 +1,34 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { tv as n } from "tailwind-variants";
+import { Breadcrumbs as u } from "../../breadcrumbs/Breadcrumbs.js";
+import { Breadcrumb as y } from "../../breadcrumbs/parts/Breadcrumb.js";
+const x = n({
+  slots: {
+    base: "uy-flex uy-flex-col uy-gap-400",
+    headingActionsWrapper: "uy-flex uy-flex-col uy-gap-400 md:uy-flex-row",
+    titles: "uy-flex uy-flex-col uy-gap-100 uy-flex-1",
+    actions: "uy-flex uy-flex-row uy-gap-100"
+  }
+}), g = p(
+  ({ children: s, actions: a, pagePath: r, ...i }, c) => {
+    const {
+      base: d,
+      titles: t,
+      headingActionsWrapper: f,
+      actions: m
+    } = x();
+    return /* @__PURE__ */ o("header", { "data-dd-privacy": "allow", ...i, ref: c, className: d(), children: [
+      r && /* @__PURE__ */ e(u, { items: r, wrap: "nowrap", children: (l) => /* @__PURE__ */ e(y, { href: l.href, label: l.label }) }),
+      /* @__PURE__ */ o("div", { className: f(), children: [
+        /* @__PURE__ */ e("div", { className: t(), children: s }),
+        a && /* @__PURE__ */ e("div", { className: m(), children: a })
+      ] })
+    ] });
+  }
+);
+g.displayName = "PageHeader";
+export {
+  g as PageHeader,
+  x as pageHeader
+};

package/dist/esm/components/page/parts/PageHeading.d.ts

@@ -0,0 +1,30 @@
+import { TextProps } from '../../text/Text.js';
+export interface PageHeadingProps extends Omit<TextProps, 'variant' | 'color'> {
+    /**
+     * The variant of the page heading.
+     * @default 'title'
+     */
+    variant: 'title' | 'subtitle';
+}
+/**
+ * The PageHeading component provides typography for page titles and subtitles with consistent styling.
+ *
+ * You can create properly styled page titles and subtitles using this component, which ensures correct
+ * font sizes, weights and colors according to the design system.
+ * @param {PageHeadingProps} props - Props for the PageHeading component
+ * @example
+ * ```tsx
+ * import { PageHeading } from '@payfit/unity-components'
+ *
+ * // For main page title
+ * <PageHeading variant="title">Employee Management</PageHeading>
+ *
+ * // For page subtitle
+ * <PageHeading variant="subtitle">View and manage employee information</PageHeading>
+ * ```
+ * @see {@link PageHeadingProps} for all available props
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/layout-page-pageheading--docs) • [Design docs](https://www.payfit.design/24f360409/p/202477-page-header)
+ */
+declare const PageHeading: import('react').ForwardRefExoticComponent<PageHeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export { PageHeading };

package/dist/esm/components/page/parts/PageHeading.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { Text as n } from "../../text/Text.js";
+const i = a(
+  ({ variant: t, ...e }, o) => /* @__PURE__ */ r(
+    n,
+    {
+      "data-dd-privacy": "mask",
+      ...e,
+      ref: o,
+      variant: t === "title" ? "h1" : "subtitle",
+      color: t === "title" ? "content.neutral" : "content.neutral.low"
+    }
+  )
+);
+i.displayName = "PageHeading";
+export {
+  i as PageHeading
+};