@payfit/unity-illustrations 0.0.0-alpha.8 → 1.0.0

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

@@ -0,0 +1,80 @@
+import { ImgHTMLAttributes } from 'react';
+import { VariantProps } from 'tailwind-variants';
+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>>;
+export interface IllustrationPropsBase extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'children'> {
+    /**
+     * The illustration asset to render. Must be imported from @payfit/unity-illustrations
+     */
+    src: UnityIllustrationAsset;
+    /** Accessible name for the illustration */
+    alt: string;
+    /** Optional description for complex illustrations */
+    description?: string;
+    /** Whether this is decorative (hidden from screen readers) */
+    isDecorative?: boolean;
+}
+export interface IllustratedPictureProps extends IllustrationPropsBase, VariantProps<typeof illustratedPicture> {
+    /**
+     * The illustration variant. It can be a regular picture or an illustrated icon
+     */
+    variant: 'picture';
+}
+export interface IllustratedIconProps extends 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>>;

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

@@ -0,0 +1,51 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { tv as a } from "tailwind-variants";
+const y = a({
+  base: "uy:object-contain uy:aspect-auto"
+}), p = a({
+  base: "uy:object-contain uy:aspect-square",
+  variants: {
+    size: {
+      sm: "uy:size-7",
+      md: "uy:size-9",
+      lg: "uy:size-12"
+    }
+  }
+}), d = m(
+  ({
+    src: r,
+    alt: i,
+    description: o,
+    isDecorative: t = !1,
+    variant: n,
+    className: s,
+    ...e
+  }, l) => {
+    const u = n === "picture" ? y({ className: s }) : p({
+      className: s,
+      size: e.size
+    });
+    return /* @__PURE__ */ c(
+      "img",
+      {
+        ref: l,
+        src: r.url,
+        alt: t ? "" : i,
+        title: t ? void 0 : i,
+        className: u,
+        role: t ? "presentation" : "img",
+        "aria-hidden": t,
+        "aria-description": o,
+        loading: "lazy",
+        ...e
+      }
+    );
+  }
+);
+d.displayName = "Illustration";
+export {
+  d as Illustration,
+  p as illustratedIcon,
+  y as illustratedPicture
+};

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.
+ * @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/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/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/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/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/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/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/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/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
+};

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

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

package/dist/esm/generated/BabyBottle.js

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

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

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

package/dist/esm/generated/BabyBottleWithBackground.js

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

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

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

package/dist/esm/generated/Bell.js

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

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

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

package/dist/esm/generated/BellWithBackground.js

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

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

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

package/dist/esm/generated/Bicycle.js

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

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

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

package/dist/esm/generated/BicycleWithBackground.js

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