@payfit/unity-illustrations 2.46.17 → 2.46.19

package/dist/esm/components/illustration/Illustration.d.ts

@@ -0,0 +1,90 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ImgHTMLAttributes } from 'react';
+import { UnityIllustrationAsset } from '../../generated/illustrationAssets.js';
+export declare const illustratedPicture: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:object-contain uy:aspect-auto", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:object-contain uy:aspect-auto", unknown, unknown, undefined>>;
+export declare const illustratedIcon: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "uy:object-contain uy:aspect-square", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "uy:object-contain uy:aspect-square", unknown, unknown, undefined>>;
+interface IllustrationPropsCore extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'children' | 'alt'> {
+    /**
+     * The illustration asset to render. Must be imported from @payfit/unity-illustrations
+     */
+    src: UnityIllustrationAsset;
+}
+interface NonDecorativeIllustrationProps extends IllustrationPropsCore {
+    /** Whether this is decorative (hidden from screen readers) */
+    isDecorative?: false | undefined;
+    /** Accessible name for the illustration - required when not decorative */
+    alt: string;
+    /** Optional description for complex illustrations */
+    description?: string;
+}
+interface DecorativeIllustrationProps extends IllustrationPropsCore {
+    /** Whether this is decorative (hidden from screen readers) */
+    isDecorative: true;
+    /** Accessible name for the illustration - optional when decorative */
+    alt?: string;
+}
+export type IllustrationPropsBase = NonDecorativeIllustrationProps | DecorativeIllustrationProps;
+export type IllustratedPictureProps = IllustrationPropsBase & VariantProps<typeof illustratedPicture> & {
+    /**
+     * The illustration variant. It can be a regular picture or an illustrated icon
+     */
+    variant: 'picture';
+};
+export type IllustratedIconProps = IllustrationPropsBase & VariantProps<typeof illustratedIcon> & {
+    /**
+     * The illustration variant. It can be a regular picture or an illustrated icon
+     */
+    variant: 'icon';
+    /**
+     * The size of the illustration. It only applies to illustrated icons
+     */
+    size: VariantProps<typeof illustratedIcon>['size'];
+};
+export type IllustrationProps = IllustratedPictureProps | IllustratedIconProps;
+/**
+ * Renders illustrations from the Unity design system with consistent styling and accessibility features.
+ *
+ * The Illustration component provides a standardized way to display SVG illustrations and images
+ * , ensuring consistent sizing, responsive behavior, and accessibility compliance.
+ * @param {IllustrationProps} props - Component props including variant, src, size, and standard HTML attributes
+ * @see {@link IllustrationProps} for all available props
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import FAQ from '@payfit/unity-illustrations/FAQ'
+ *
+ * function Example() {
+ *   return (
+ *     <Illustration
+ *       variant="picture"
+ *       src={FAQ}
+ *       className="uy:size-[150px]"
+ *       alt="FAQ illustration"
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * You must import illustration assets individually from `@payfit/unity-illustrations/[AssetName]` to use with this component.
+ * See the [usage documentation](https://unity-illustrations.payfit.io/?path=/docs/introduction-usage--docs) for complete examples and best practices.
+ */
+export declare const Illustration: import('react').ForwardRefExoticComponent<IllustrationProps & import('react').RefAttributes<HTMLImageElement>>;
+export {};

package/dist/esm/components/illustration/Illustration.js

@@ -0,0 +1,62 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as h, useMemo as x } from "react";
+import { uyTv as u } from "@payfit/unity-themes";
+const p = u({
+  base: "uy:object-contain uy:aspect-auto"
+}), f = u({
+  base: "uy:object-contain uy:aspect-square",
+  variants: {
+    size: {
+      sm: "uy:size-7",
+      md: "uy:size-9",
+      lg: "uy:size-12"
+    }
+  }
+}), g = h(
+  ({
+    src: i,
+    alt: s,
+    isDecorative: t = !1,
+    variant: l,
+    className: o,
+    style: a,
+    ...e
+  }, r) => {
+    const n = l === "picture" ? p({ className: o }) : f({
+      className: o,
+      size: e.size
+    }), m = t ? e.description : void 0, { enhancedStyle: d, enhancedClassName: y } = x(() => "category" in i && "dimensions" in i ? {
+      enhancedStyle: {
+        "--uy-illustration-max-width": `${i.dimensions.width}px`,
+        "--uy-illustration-max-height": `${i.dimensions.height}px`,
+        ...a
+      },
+      enhancedClassName: `${n} uy:max-w-[var(--uy-illustration-max-width)] uy:max-h-[var(--uy-illustration-max-height)] uy:w-full uy:h-auto`.trim()
+    } : {
+      enhancedStyle: a,
+      enhancedClassName: n
+    }, [i, a, n]);
+    return /* @__PURE__ */ c(
+      "img",
+      {
+        ref: r,
+        src: i.url,
+        alt: t ? "" : s,
+        title: t ? void 0 : s,
+        className: y,
+        style: d,
+        role: t ? "presentation" : "img",
+        "aria-hidden": t,
+        "aria-description": m,
+        loading: "lazy",
+        ...e
+      }
+    );
+  }
+);
+g.displayName = "Illustration";
+export {
+  g as Illustration,
+  f as illustratedIcon,
+  p as illustratedPicture
+};

package/dist/esm/components/illustration/figma/IllustratedIcon.figma.d.ts

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

package/dist/esm/components/illustration/figma/IllustratedPictureLarge.figma.d.ts

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

package/dist/esm/components/illustration/figma/IllustratedPictureMedium.figma.d.ts

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

package/dist/esm/components/illustration/figma/IllustratedPictureSmall.figma.d.ts

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

package/dist/esm/components/lazy-illustration/LazyIllustration.d.ts

@@ -0,0 +1,67 @@
+import { UnityIllustrationName } from '../../generated/illustrationAssets.js';
+import { IllustratedIconProps, IllustratedPictureProps } from '../illustration/Illustration.js';
+/**
+ * Props for the LazyIllustration component.
+ *
+ * This type is a union of two possible prop types:
+ * 1. Props for the picture variant (omitting 'src' and adding 'name')
+ * 2. Props for the icon variant (omitting 'src' and adding 'name')
+ * @property {UnityIllustrationName} name - The name of the illustration to load dynamically.
+ *   This must be one of the valid illustration names from the Unity illustration library.
+ * @property {'picture' | 'icon'} variant - The illustration variant. It can be a regular picture or an illustrated icon.
+ * @property {string} alt - Accessible name for the illustration (required when isDecorative is false or undefined).
+ * @property {string} [description] - Optional description for complex illustrations.
+ * @property {boolean} [isDecorative] - Whether this is decorative (hidden from screen readers).
+ * @property {'sm' | 'md' | 'lg'} [size] - The size of the illustration. Required when variant is 'icon'.
+ */
+export type LazyIllustrationProps = (Omit<IllustratedPictureProps, 'src'> & {
+    name: UnityIllustrationName;
+}) | (Omit<IllustratedIconProps, 'src'> & {
+    name: UnityIllustrationName;
+});
+/**
+ * A component that lazily loads illustrations by name and renders them using the Illustration component.
+ *
+ * The LazyIllustration component dynamically imports illustrations based on their name using the
+ * lazyIllustrationsMap from the generated illustrationAssets file. This allows for code-splitting
+ * and on-demand loading of illustrations, which can significantly improve initial load performance.
+ * @param {LazyIllustrationProps} props - Component props including name, variant, and standard HTML attributes
+ * @see {@link LazyIllustrationProps} for all available props
+ * @example
+ * ```tsx
+ * import { LazyIllustration } from '@payfit/unity-illustrations'
+ *
+ * function Example() {
+ *   return (
+ *     <LazyIllustration
+ *       variant="picture"
+ *       name="FAQ"
+ *       className="uy:size-[150px]"
+ *       alt="FAQ illustration"
+ *     />
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Using with icon variant
+ * import { LazyIllustration } from '@payfit/unity-illustrations'
+ *
+ * function IconExample() {
+ *   return (
+ *     <LazyIllustration
+ *       variant="icon"
+ *       size="md"
+ *       name="Binoculars"
+ *       alt="Binoculars icon"
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * Unlike the Illustration component, you don't need to import illustration assets individually.
+ * Simply provide the name of the illustration you want to use, and LazyIllustration will handle
+ * the dynamic import for you. The component returns null during loading, so you may want to
+ * provide your own loading state or placeholder.
+ */
+export declare const LazyIllustration: import('react').ForwardRefExoticComponent<LazyIllustrationProps & import('react').RefAttributes<HTMLImageElement>>;

package/dist/esm/components/lazy-illustration/LazyIllustration.js

@@ -0,0 +1,31 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m, useState as e, useEffect as f } from "react";
+import { lazyIllustrationsMap as I } from "../../generated/illustrationAssets.js";
+import { illustratedPicture as y, illustratedIcon as N, Illustration as z } from "../illustration/Illustration.js";
+const L = m(({ name: a, ...t }, n) => {
+  const [s, c] = e(null), [u, o] = e(!0);
+  if (f(() => {
+    (async () => {
+      try {
+        o(!0);
+        const l = I[a], d = await l();
+        c(d.default);
+      } catch (l) {
+        console.error(`Failed to load illustration "${a}":`, l);
+      } finally {
+        o(!1);
+      }
+    })();
+  }, [a]), u || !s) {
+    const r = t.variant === "picture" ? y({ className: t.className }) : N({
+      className: t.className,
+      size: t.size
+    });
+    return /* @__PURE__ */ i("div", { className: r });
+  }
+  return /* @__PURE__ */ i(z, { ref: n, src: s, ...t });
+});
+L.displayName = "LazyIllustration";
+export {
+  L as LazyIllustration
+};

package/dist/esm/components/lazy-illustration/figma/LazyIllustratedIcon.figma.d.ts

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

package/dist/esm/components/lazy-illustration/figma/LazyIllustratedPictureLarge.figma.d.ts

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

package/dist/esm/components/lazy-illustration/figma/LazyIllustratedPictureMedium.figma.d.ts

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

package/dist/esm/components/lazy-illustration/figma/LazyIllustratedPictureSmall.figma.d.ts

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

package/dist/esm/docs/blocks/AnimationLibrary.d.ts

@@ -0,0 +1,2 @@
+declare const AnimationLibrary: () => import("react/jsx-runtime").JSX.Element;
+export default AnimationLibrary;

package/dist/esm/docs/blocks/Cards.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+type CardProps = React.PropsWithChildren;
+export declare const Card: React.FC<CardProps>;
+export declare const CardWithCover: React.FC<CardProps & {
+    coverSrc: string;
+    coverAlt: string;
+}>;
+export declare const CardHeader: React.FC<React.PropsWithChildren>;
+export declare const CardTitle: React.FC<React.PropsWithChildren>;
+export declare const CardContent: React.FC<React.PropsWithChildren>;
+export declare const CardActions: React.FC<React.PropsWithChildren>;
+export declare const Link: React.FC<React.ComponentProps<'a'>>;
+type CardGridProps = {
+    children: React.ReactNode;
+    cols?: number;
+};
+export declare const CardGrid: React.FC<CardGridProps>;
+export {};

package/dist/esm/docs/blocks/IllustrationLibrary.d.ts

@@ -0,0 +1,4 @@
+declare const IllustrationLibrary: ({ filter, }: {
+    filter?: "filled" | "outlined";
+}) => import("react/jsx-runtime").JSX.Element;
+export default IllustrationLibrary;

package/dist/esm/generated/Accounting.d.ts

@@ -0,0 +1,20 @@
+import { IllustrationAsset, BaseSvgAsset } from './types.js';
+export type AccountingAsset = IllustrationAsset<BaseSvgAsset & {
+    readonly name: 'Accounting';
+}>;
+/**
+ * Accounting illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import Accounting from '@payfit/unity-illustrations/assets/Accounting'
+ *
+ * <Illustration
+ *   illustration={Accounting}
+ *   alt="Accounting illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+declare const Accounting: AccountingAsset;
+export default Accounting;

package/dist/esm/generated/Accounting.js

@@ -0,0 +1,10 @@
+import t from "./assets/Accounting.svg.js";
+const a = {
+  type: "svg",
+  url: t,
+  animated: !1,
+  name: "Accounting"
+};
+export {
+  a as default
+};

package/dist/esm/generated/AccountingAnimation.d.ts

@@ -0,0 +1,20 @@
+import { IllustrationAsset, BaseAnimatedImageAsset } from './types.js';
+export type AccountingAnimationAsset = IllustrationAsset<BaseAnimatedImageAsset & {
+    readonly name: 'AccountingAnimation';
+}>;
+/**
+ * AccountingAnimation animated illustration asset (969x852)
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AccountingAnimation from '@payfit/unity-illustrations/assets/AccountingAnimation'
+ *
+ * <Illustration
+ *   variant="picture"
+ *   src={AccountingAnimation}
+ *   alt="Accounting animation"
+ * />
+ * ```
+ */
+declare const AccountingAnimation: AccountingAnimationAsset;
+export default AccountingAnimation;

package/dist/esm/generated/AccountingAnimation.js

@@ -0,0 +1,12 @@
+import t from "./assets/AccountingAnimation.webp.js";
+const n = {
+  type: "image",
+  url: t,
+  animated: !0,
+  dimensions: { width: 969, height: 852 },
+  category: "animation",
+  name: "AccountingAnimation"
+};
+export {
+  n as default
+};

package/dist/esm/generated/AddEmployee.d.ts

@@ -0,0 +1,20 @@
+import { IllustrationAsset, BaseSvgAsset } from './types.js';
+export type AddEmployeeAsset = IllustrationAsset<BaseSvgAsset & {
+    readonly name: 'AddEmployee';
+}>;
+/**
+ * AddEmployee illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AddEmployee from '@payfit/unity-illustrations/assets/AddEmployee'
+ *
+ * <Illustration
+ *   illustration={AddEmployee}
+ *   alt="AddEmployee illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+declare const AddEmployee: AddEmployeeAsset;
+export default AddEmployee;

package/dist/esm/generated/AddEmployee.js

@@ -0,0 +1,10 @@
+import e from "./assets/AddEmployee.svg.js";
+const d = {
+  type: "svg",
+  url: e,
+  animated: !1,
+  name: "AddEmployee"
+};
+export {
+  d as default
+};

package/dist/esm/generated/AdministrativeDocument.d.ts

@@ -0,0 +1,20 @@
+import { IllustrationAsset, BaseSvgAsset } from './types.js';
+export type AdministrativeDocumentAsset = IllustrationAsset<BaseSvgAsset & {
+    readonly name: 'AdministrativeDocument';
+}>;
+/**
+ * AdministrativeDocument illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AdministrativeDocument from '@payfit/unity-illustrations/assets/AdministrativeDocument'
+ *
+ * <Illustration
+ *   illustration={AdministrativeDocument}
+ *   alt="AdministrativeDocument illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+declare const AdministrativeDocument: AdministrativeDocumentAsset;
+export default AdministrativeDocument;

package/dist/esm/generated/AdministrativeDocument.js

@@ -0,0 +1,10 @@
+import t from "./assets/AdministrativeDocument.svg.js";
+const a = {
+  type: "svg",
+  url: t,
+  animated: !1,
+  name: "AdministrativeDocument"
+};
+export {
+  a as default
+};

package/dist/esm/generated/AdministrativeDocumentWithBackground.d.ts

@@ -0,0 +1,20 @@
+import { IllustrationAsset, BaseSvgAsset } from './types.js';
+export type AdministrativeDocumentWithBackgroundAsset = IllustrationAsset<BaseSvgAsset & {
+    readonly name: 'AdministrativeDocumentWithBackground';
+}>;
+/**
+ * AdministrativeDocumentWithBackground illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AdministrativeDocumentWithBackground from '@payfit/unity-illustrations/assets/AdministrativeDocumentWithBackground'
+ *
+ * <Illustration
+ *   illustration={AdministrativeDocumentWithBackground}
+ *   alt="AdministrativeDocumentWithBackground illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+declare const AdministrativeDocumentWithBackground: AdministrativeDocumentWithBackgroundAsset;
+export default AdministrativeDocumentWithBackground;

package/dist/esm/generated/AdministrativeDocumentWithBackground.js

@@ -0,0 +1,10 @@
+import t from "./assets/AdministrativeDocumentWithBackground.svg.js";
+const e = {
+  type: "svg",
+  url: t,
+  animated: !1,
+  name: "AdministrativeDocumentWithBackground"
+};
+export {
+  e as default
+};

package/dist/esm/generated/AlphabetCube.d.ts

@@ -0,0 +1,20 @@
+import { IllustrationAsset, BaseSvgAsset } from './types.js';
+export type AlphabetCubeAsset = IllustrationAsset<BaseSvgAsset & {
+    readonly name: 'AlphabetCube';
+}>;
+/**
+ * AlphabetCube illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AlphabetCube from '@payfit/unity-illustrations/assets/AlphabetCube'
+ *
+ * <Illustration
+ *   illustration={AlphabetCube}
+ *   alt="AlphabetCube illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+declare const AlphabetCube: AlphabetCubeAsset;
+export default AlphabetCube;

package/dist/esm/generated/AlphabetCube.js

@@ -0,0 +1,10 @@
+import e from "./assets/AlphabetCube.svg.js";
+const t = {
+  type: "svg",
+  url: e,
+  animated: !1,
+  name: "AlphabetCube"
+};
+export {
+  t as default
+};

package/dist/esm/generated/Analysis.d.ts

@@ -0,0 +1,20 @@
+import { IllustrationAsset, BaseSvgAsset } from './types.js';
+export type AnalysisAsset = IllustrationAsset<BaseSvgAsset & {
+    readonly name: 'Analysis';
+}>;
+/**
+ * Analysis illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import Analysis from '@payfit/unity-illustrations/assets/Analysis'
+ *
+ * <Illustration
+ *   illustration={Analysis}
+ *   alt="Analysis illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+declare const Analysis: AnalysisAsset;
+export default Analysis;

package/dist/esm/generated/Analysis.js

@@ -0,0 +1,10 @@
+import s from "./assets/Analysis.svg.js";
+const e = {
+  type: "svg",
+  url: s,
+  animated: !1,
+  name: "Analysis"
+};
+export {
+  e as default
+};

package/dist/esm/generated/AnnualTaxes.d.ts

@@ -0,0 +1,20 @@
+import { IllustrationAsset, BaseSvgAsset } from './types.js';
+export type AnnualTaxesAsset = IllustrationAsset<BaseSvgAsset & {
+    readonly name: 'AnnualTaxes';
+}>;
+/**
+ * AnnualTaxes illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AnnualTaxes from '@payfit/unity-illustrations/assets/AnnualTaxes'
+ *
+ * <Illustration
+ *   illustration={AnnualTaxes}
+ *   alt="AnnualTaxes illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+declare const AnnualTaxes: AnnualTaxesAsset;
+export default AnnualTaxes;

package/dist/esm/generated/AnnualTaxes.js

@@ -0,0 +1,10 @@
+import a from "./assets/AnnualTaxes.svg.js";
+const n = {
+  type: "svg",
+  url: a,
+  animated: !1,
+  name: "AnnualTaxes"
+};
+export {
+  n as default
+};

package/dist/esm/generated/AutomationInProgress.d.ts

@@ -0,0 +1,20 @@
+import { IllustrationAsset, BaseSvgAsset } from './types.js';
+export type AutomationInProgressAsset = IllustrationAsset<BaseSvgAsset & {
+    readonly name: 'AutomationInProgress';
+}>;
+/**
+ * AutomationInProgress illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AutomationInProgress from '@payfit/unity-illustrations/assets/AutomationInProgress'
+ *
+ * <Illustration
+ *   illustration={AutomationInProgress}
+ *   alt="AutomationInProgress illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+declare const AutomationInProgress: AutomationInProgressAsset;
+export default AutomationInProgress;

package/dist/esm/generated/AutomationInProgress.js

@@ -0,0 +1,10 @@
+import o from "./assets/AutomationInProgress.svg.js";
+const r = {
+  type: "svg",
+  url: o,
+  animated: !1,
+  name: "AutomationInProgress"
+};
+export {
+  r as default
+};