@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/button/Button.variants.d.ts

@@ -0,0 +1,251 @@
+import { VariantProps } from '@payfit/unity-themes';
+declare const buttonBase: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const buttonFilled: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+        inverted: string[];
+        'inverted.low': string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export declare const buttonOutlined: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, undefined, "uy:border uy:border-solid uy:bg-transparent", {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export declare const buttonGhost: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+        'neutral.lowest': string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export type ButtonBase = VariantProps<typeof buttonBase>;
+export type ButtonFilled = VariantProps<typeof buttonFilled>;
+export type ButtonOutlined = VariantProps<typeof buttonOutlined>;
+export type ButtonGhost = VariantProps<typeof buttonGhost>;
+export {};

package/dist/esm/components/button/Button.variants.js

@@ -0,0 +1,182 @@
+import { uyTv as e } from "@payfit/unity-themes";
+const t = e({
+  base: [
+    "uy:group",
+    "uy:cursor-pointer uy:rounded-100 uy:sm:rounded-75 uy:py-125 uy:sm:py-100 uy:sm:h-500 uy:inline-flex uy:items-center uy:justify-center uy:whitespace-nowrap uy:typography-action uy:transition-colors",
+    'uy:has-data-[unity-icon="prefix"]:pl-100 uy:has-data-[unity-icon="prefix"]:pr-200',
+    'uy:has-data-[unity-icon="suffix"]:pl-200 uy:has-data-[unity-icon="suffix"]:pr-100',
+    'uy:px-200 uy:has-data-[unity-icon="prefix"]:has-data-[unity-icon="suffix"]:px-100',
+    'uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-solid uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]:outline-utility-focus-ring'
+  ],
+  variants: {
+    isDisabled: {
+      true: "uy:disabled:cursor-not-allowed",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled",
+      false: ""
+    },
+    size: {
+      default: "uy:w-auto uy:grow-0 uy:basis-auto",
+      full: "uy:grow-1 uy:w-full uy:basis-full"
+    }
+  },
+  defaultVariants: {
+    isDisabled: !1,
+    isLoading: !1,
+    size: "default"
+  }
+}), r = e({
+  extend: t,
+  variants: {
+    color: {
+      primary: [
+        "uy:theme-legacy:bg-surface-primary-enabled uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:text-content-inverted-enabled",
+        'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-highest-hover uy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:theme-legacy:active:bg-surface-primary-active uy:theme-rebrand:active:bg-surface-neutral-highest-active uy:active:text-content-inverted-hover",
+        "uy:theme-legacy:data-[pressed]:bg-surface-primary-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-highest-pressed uy:theme-legacy:data-[pressed]:text-content-inverted-pressed uy:theme-rebrand:data-[pressed]:text-content-neutral-pressed"
+      ],
+      warning: [
+        "uy:bg-surface-warning-enabled uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-warning-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-warning-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-warning-pressed uy:data-[pressed]:text-content-neutral-pressed"
+      ],
+      danger: [
+        "uy:bg-surface-danger-enabled uy:theme-legacy:text-content-inverted-enabled uy:theme-rebrand:text-content-inverted",
+        'uy:data-[hovered="true"]:bg-surface-danger-hover uy:theme-legacy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:active:bg-surface-danger-active uy:theme-legacy:active:text-content-inverted",
+        "uy:data-[pressed]:bg-surface-danger-pressed uy:theme-legacy:data-[pressed]:text-content-inverted"
+      ],
+      neutral: [
+        "uy:bg-surface-neutral-low-enabled uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-low-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-low-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-neutral-low-pressed uy:data-[pressed]:text-content-neutral-pressed"
+      ],
+      inverted: [
+        "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-neutral-active uy:data-[pressed]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:text-content-neutral-focus uy:data-[focus-visible]:bg-surface-neutral-focus"
+      ],
+      "inverted.low": [
+        "uy:bg-surface-inverted-low-enabled uy:text-content-inverted-enabled",
+        'uy:data-[hovered="true"]:bg-surface-inverted-low-hover uy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:active:bg-surface-inverted-low-active uy:active:text-content-inverted-active",
+        'uy:data-[pressed="true"]:bg-surface-inverted-low-pressed uy:data-[pressed="true"]:text-content-inverted-pressed',
+        'uy:data-[focus-visible="true"]:outline-utility-inverted-focus-ring uy:data-[focus-visible="true"]:text-content-inverted-focus uy:data-[focus-visible="true"]:bg-surface-inverted-low-focus'
+      ]
+    },
+    isDisabled: {
+      true: "uy:disabled:bg-surface-neutral-disabled uy:disabled:text-content-neutral-disabled",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:bg-surface-neutral-disabled uy:data-[loading]:text-content-neutral-disabled",
+      false: ""
+    }
+  }
+}), u = e({
+  extend: t,
+  base: "uy:border uy:border-solid uy:bg-transparent",
+  variants: {
+    color: {
+      primary: [
+        "uy:text-content-neutral-enabled uy:border-border-neutral-high-enabled",
+        'uy:data-[hovered="true"]:text-content-neutral-hover uy:data-[hovered="true"]:border-border-neutral-high-hover',
+        'uy:theme-legacy:data-[pressed="true"]:text-content-neutral-high-pressed uy:theme-legacy:data-[pressed="true"]:border-border-neutral-high-pressed',
+        'uy:theme-rebrand:data-[pressed="true"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed="true"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed="true"]:border-surface-neutral-low-pressed',
+        'uy:data-[focus-visible="true"]:border-border-neutral-high-focus uy:data-[focus-visible="true"]:text-content-neutral-focus'
+      ],
+      inverted: [
+        "uy:text-content-inverted-enabled uy:border-border-inverted-enabled",
+        'uy:theme-legacy:data-[pressed="true"]:text-content-inverted-pressed uy:theme-legacy:data-[pressed="true"]:border-border-inverted-pressed',
+        'uy:theme-rebrand:data-[pressed="true"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed="true"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed="true"]:border-surface-neutral-low-pressed',
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring"
+      ]
+    },
+    isDisabled: {
+      true: "uy:disabled:text-content-neutral-disabled uy:disabled:border-border-neutral-disabled uy:data-[disabled]:border-border-neutral-disabled",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:border-border-neutral-disabled"
+    }
+  }
+}), n = e({
+  extend: t,
+  variants: {
+    color: {
+      primary: [
+        "uy:bg-transparent uy:theme-legacy:text-content-primary-enabled uy:theme-rebrand:text-content-neutral-enabled",
+        'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-lowest-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-hover uy:theme-legacy:data-[hovered="true"]:text-content-primary-hover uy:theme-rebrand:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:theme-legacy:active:bg-surface-primary-lowest-active uy:theme-rebrand:active:bg-surface-neutral-active uy:theme-legacy:active:text-content-primary-active uy:theme-rebrand:active:text-content-neutral-active",
+        "uy:theme-legacy:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:theme-rebrand:data-[pressed=true]:bg-surface-neutral-pressed uy:theme-legacy:data-[pressed=true]:text-content-primary-pressed uy:theme-rebrand:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent uy:theme-rebrand:data-[focus-visible]:text-content-neutral-focus"
+      ],
+      warning: [
+        "uy:bg-transparent uy:text-content-warning-enabled",
+        'uy:data-[hovered="true"]:bg-surface-warning-lowest-hover uy:data-[hovered="true"]:text-content-warning-hover',
+        "uy:active:bg-surface-warning-lowest-active uy:active:text-content-warning-active",
+        "uy:data-[pressed=true]:bg-surface-warning-lowest-pressed uy:data-[pressed=true]:text-content-warning-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      danger: [
+        "uy:bg-transparent uy:text-content-danger-enabled",
+        'uy:data-[hovered="true"]:bg-surface-danger-lowest-hover uy:data-[hovered="true"]:text-content-danger-hover',
+        "uy:active:bg-surface-danger-lowest-active uy:active:text-content-danger-active",
+        "uy:data-[pressed=true]:bg-surface-danger-lowest-pressed uy:data-[pressed=true]:text-content-danger-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      neutral: [
+        "uy:bg-transparent uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      "neutral.lowest": [
+        "uy:bg-transparent uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-lowest-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-lowest-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      inverted: [
+        "uy:bg-transparent uy:text-content-inverted-enabled",
+        'uy:data-[hovered="true"]:bg-surface-inverted-hover uy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:active:bg-surface-inverted-active uy:active:text-content-inverted-active",
+        "uy:data-[pressed=true]:bg-surface-inverted-pressed uy:data-[pressed=true]:text-content-inverted-pressed",
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:bg-transparent"
+      ]
+    },
+    isDisabled: {
+      true: "uy:disabled:text-content-neutral-disabled uy:disabled:bg-transparent",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:bg-transparent",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      isDisabled: !0,
+      color: "inverted",
+      className: ["uy:disabled:text-content-inverted-disabled"]
+    },
+    {
+      isLoading: !0,
+      color: "inverted",
+      className: ["uy:data-[loading]:text-content-inverted-disabled"]
+    }
+  ]
+});
+export {
+  r as buttonFilled,
+  n as buttonGhost,
+  u as buttonOutlined
+};

package/dist/esm/components/button/figma/Button.figma.d.ts

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/components/card/Card.context.d.ts

@@ -0,0 +1,5 @@
+export interface CardContextValue {
+    titleId: string;
+}
+export declare const CardContext: import('react').Context<CardContextValue | null>;
+export declare function useCardContext(): CardContextValue;

package/dist/esm/components/card/Card.context.js

@@ -0,0 +1,14 @@
+import { createContext as o, useContext as n } from "react";
+const e = o(null);
+function c() {
+  const t = n(e);
+  if (!t)
+    throw new Error(
+      "Card compound components must be used within a Card component"
+    );
+  return t;
+}
+export {
+  e as CardContext,
+  c as useCardContext
+};

package/dist/esm/components/card/Card.d.ts

@@ -0,0 +1,228 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ComponentProps, PropsWithChildren } from 'react';
+export declare const card: import('tailwind-variants').TVReturnType<{
+    shadow: {
+        none: {
+            base: string;
+        };
+        raising: {
+            base: string;
+        };
+        flying: {
+            base: string;
+        };
+        '100': {
+            base: string;
+        };
+        '300': {
+            base: string;
+        };
+    };
+    bgColor: {
+        'surface.neutral': {
+            base: string;
+        };
+        'surface.neutral.low': {
+            base: string;
+        };
+        'surface.neutral.lowest': {
+            base: string;
+        };
+        'surface.decorative-teal.lowest': {
+            base: string;
+        };
+        'surface.decorative-purple.lowest': {
+            base: string;
+        };
+        'surface.decorative-plum.lowest': {
+            base: string;
+        };
+        'surface.decorative-orange.lowest': {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    shadow: {
+        none: {
+            base: string;
+        };
+        raising: {
+            base: string;
+        };
+        flying: {
+            base: string;
+        };
+        '100': {
+            base: string;
+        };
+        '300': {
+            base: string;
+        };
+    };
+    bgColor: {
+        'surface.neutral': {
+            base: string;
+        };
+        'surface.neutral.low': {
+            base: string;
+        };
+        'surface.neutral.lowest': {
+            base: string;
+        };
+        'surface.decorative-teal.lowest': {
+            base: string;
+        };
+        'surface.decorative-purple.lowest': {
+            base: string;
+        };
+        'surface.decorative-plum.lowest': {
+            base: string;
+        };
+        'surface.decorative-orange.lowest': {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import('tailwind-variants').TVReturnType<{
+    shadow: {
+        none: {
+            base: string;
+        };
+        raising: {
+            base: string;
+        };
+        flying: {
+            base: string;
+        };
+        '100': {
+            base: string;
+        };
+        '300': {
+            base: string;
+        };
+    };
+    bgColor: {
+        'surface.neutral': {
+            base: string;
+        };
+        'surface.neutral.low': {
+            base: string;
+        };
+        'surface.neutral.lowest': {
+            base: string;
+        };
+        'surface.decorative-teal.lowest': {
+            base: string;
+        };
+        'surface.decorative-purple.lowest': {
+            base: string;
+        };
+        'surface.decorative-plum.lowest': {
+            base: string;
+        };
+        'surface.decorative-orange.lowest': {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface CardProps extends PropsWithChildren<VariantProps<typeof card>>, ComponentProps<'section'> {
+    /**
+     * The background color of the card.
+     * @default 'surface.neutral'
+     */
+    bgColor?: VariantProps<typeof card>['bgColor'];
+    /**
+     * The shadow of the card.
+     * @default 'none'
+     */
+    shadow?: VariantProps<typeof card>['shadow'];
+    /**
+     * The aria-label of the card. This is required if the Card does not contain a CardTitle.
+     * @example
+     * ```tsx
+     * <Card aria-label="User statistics">
+     *   <StatWidget />
+     * </Card>
+     * ```
+     */
+    'aria-label'?: string;
+    /**
+     * The element type of the card.
+     * @default 'section'
+     */
+    asElement?: 'section' | 'article';
+}
+/**
+ * The `Card` component is a container that groups related content and actions. It provides consistent
+ * styling, spacing, and visual hierarchy for content sections within your application.
+ *
+ * Use Card when you need to organize related information, display content in distinct sections,
+ * or create a visual grouping for UI elements.
+ *
+ * The Card uses a compound component pattern with `CardTitle` and optionally `CardContent`:
+ * - `CardTitle`: Provides the heading for the card (required for accessibility, or use aria-label)
+ * - `CardContent`: Optional wrapper for card body content
+ *
+ * Cards must be properly labeled for accessibility. You can either:
+ * - Include a `CardTitle` component as a child, OR
+ * - Provide an `aria-label` prop if the card doesn't need a visible title
+ * @param {CardProps} props - The props for the `Card` component
+ * @example
+ * ```tsx
+ * import { Card, CardTitle, CardContent } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card>
+ *       <CardTitle>Employee Information</CardTitle>
+ *       <CardContent>
+ *         <p>Content goes here</p>
+ *       </CardContent>
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Card with title after an image
+ * import { Card, CardTitle } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card>
+ *       <img src="banner.jpg" alt="Banner" />
+ *       <CardTitle>Featured Content</CardTitle>
+ *       <p>Content goes here</p>
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Card without visible title (using aria-label)
+ * import { Card } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card aria-label="User statistics">
+ *       <StatWidget />
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @see {@link CardProps} for all available props
+ * @see {@link CardTitle} for title configuration options
+ * @see {@link CardContent} for content wrapper
+ * @remarks
+ * - Cards require either a CardTitle child or an aria-label for accessibility
+ * - Use shadow variants only with the default 'surface.neutral' background
+ * - CardTitle can be placed anywhere within the Card children
+ * - CardContent is optional but recommended for better structure
+ */
+declare const Card: import('react').ForwardRefExoticComponent<Omit<CardProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export { Card };