@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/grid/GridItem.d.cts

@@ -0,0 +1,60 @@
+import { VariantProps } from 'tailwind-variants';
+import { gridItem } from './Grid.variants.cjs';
+export type GridItemVariantProps = VariantProps<typeof gridItem>;
+type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
+/** Base properties shared across all grid item variants */
+interface GridItemBaseProps {
+    /** Render the grid item as a specific HTML element */
+    asElement?: ElementType;
+    /** Override the container's justify-items value for this item. Use 'start', 'center', 'end', or 'stretch' */
+    justify?: GridItemVariantProps['justify'];
+    /** Override the container's align-items value for this item. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
+    align?: GridItemVariantProps['align'];
+    /** Add custom classes to the grid item */
+    className?: string;
+    /** The content of the grid item */
+    children?: React.ReactNode;
+}
+/** Properties for grid items using named grid areas */
+interface GridItemAreaProps extends GridItemBaseProps {
+    /** The named grid area this item should occupy */
+    area: string;
+    colSpan?: never;
+    colStart?: never;
+    colEnd?: never;
+}
+/** Properties for grid items using column-based positioning */
+interface GridItemTracksProps extends GridItemBaseProps {
+    area?: never;
+    /** Set how many columns this item should span */
+    colSpan?: GridItemVariantProps['colSpan'];
+    /** Set which column this item should start from */
+    colStart?: GridItemVariantProps['colStart'];
+    /** Set which column this item should end at */
+    colEnd?: GridItemVariantProps['colEnd'];
+}
+/**
+ * Props for the GridItem component. This component accepts either:
+ * - Named grid area positioning using the `area` prop
+ * - Column- and row-based positioning using `colSpan`, `colStart`, and/or `colEnd`, and `rowSpan`, `rowStart`, and/or `rowEnd`
+ * These two positioning methods cannot be mixed.
+ */
+export type GridItemProps = GridItemAreaProps | GridItemTracksProps;
+type InternalGridItemProps = GridItemProps & Omit<React.HTMLAttributes<HTMLElement>, keyof GridItemProps>;
+/**
+ * Use GridItem to control how individual items behave within a Grid container.
+ * This component provides props to manage column spanning, positioning, and alignment of grid items.
+ * @example
+ * ```tsx
+ * <Grid cols={12}>
+ *   <GridItem colSpan={6}>
+ *     <div>Half width content</div>
+ *   </GridItem>
+ *   <GridItem colStart={7} colEnd={13}>
+ *     <div>Other half content</div>
+ *   </GridItem>
+ * </Grid>
+ * ```
+ */
+export declare const GridItem: import('react').ForwardRefExoticComponent<InternalGridItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/cjs/components/icon/Icon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@payfit/unity-icons"),d=require("tailwind-variants"),l=d.tv({variants:{size:{20:"uy-w-250 uy-h-250",24:"uy-w-300 uy-h-300"},color:{"content.primary":"uy-text-content-primary","content.primary.enabled":"uy-text-content-primary-enabled","content.primary.hover":"uy-text-content-primary-hover","content.primary.pressed":"uy-text-content-primary-pressed","content.primary.focus":"uy-text-content-primary-focus","content.primary.active":"uy-text-content-primary-active","content.primary.disabled":"uy-text-content-primary-disabled","content.neutral":"uy-text-content-neutral","content.neutral.enabled":"uy-text-content-neutral-enabled","content.neutral.hover":"uy-text-content-neutral-hover","content.neutral.pressed":"uy-text-content-neutral-pressed","content.neutral.focus":"uy-text-content-neutral-focus","content.neutral.active":"uy-text-content-neutral-active","content.neutral.disabled":"uy-text-content-neutral-disabled","content.neutral.low":"uy-text-content-neutral-low","content.neutral.lowest":"uy-text-content-neutral-lowest","content.neutral.lowest.enabled":"uy-text-content-neutral-lowest-enabled","content.neutral.lowest.hover":"uy-text-content-neutral-lowest-hover","content.neutral.lowest.pressed":"uy-text-content-neutral-lowest-pressed","content.neutral.lowest.focus":"uy-text-content-neutral-lowest-focus","content.neutral.lowest.active":"uy-text-content-neutral-lowest-active","content.neutral.lowest.disabled":"uy-text-content-neutral-lowest-disabled","content.danger":"uy-text-content-danger","content.danger.enabled":"uy-text-content-danger-enabled","content.danger.hover":"uy-text-content-danger-hover","content.danger.pressed":"uy-text-content-danger-pressed","content.danger.focus":"uy-text-content-danger-focus","content.danger.active":"uy-text-content-danger-active","content.danger.disabled":"uy-text-content-danger-disabled","content.warning":"uy-text-content-warning","content.warning.enabled":"uy-text-content-warning-enabled","content.warning.hover":"uy-text-content-warning-hover","content.warning.pressed":"uy-text-content-warning-pressed","content.warning.focus":"uy-text-content-warning-focus","content.warning.active":"uy-text-content-warning-active","content.warning.disabled":"uy-text-content-warning-disabled","content.success":"uy-text-content-success","content.success.enabled":"uy-text-content-success-enabled","content.success.hover":"uy-text-content-success-hover","content.success.pressed":"uy-text-content-success-pressed","content.success.focus":"uy-text-content-success-focus","content.success.active":"uy-text-content-success-active","content.success.disabled":"uy-text-content-success-disabled","content.info":"uy-text-content-info","content.info.enabled":"uy-text-content-info-enabled","content.info.hover":"uy-text-content-info-hover","content.info.pressed":"uy-text-content-info-pressed","content.info.focus":"uy-text-content-info-focus","content.info.active":"uy-text-content-info-active","content.info.disabled":"uy-text-content-info-disabled","content.promo":"uy-text-content-promo","content.form.enabled":"uy-text-content-form","content.form.hover":"uy-text-content-form-hover","content.form.pressed":"uy-text-content-form-pressed","content.form.focus":"uy-text-content-form-focus","content.form.active":"uy-text-content-form-active","content.form.disabled":"uy-text-content-form-disabled","content.form.read-only":"uy-text-content-form-read-only","content.form.invalid":"uy-text-content-form-invalid","content.inverted":"uy-text-content-inverted","content.inverted.enabled":"uy-text-content-inverted-enabled","content.inverted.hover":"uy-text-content-inverted-hover","content.inverted.pressed":"uy-text-content-inverted-pressed","content.inverted.focus":"uy-text-content-inverted-focus","content.inverted.active":"uy-text-content-inverted-active","content.inverted.disabled":"uy-text-content-inverted-disabled",inherit:"uy-text-inherit"},display:{block:"uy-block",inline:"uy-inline-block"}},defaultVariants:{size:20,color:"inherit",display:"block"}});function y({alt:n,color:o,size:c,src:r,role:a="img",display:s="block",...t}){const u=l({size:c,color:o,display:s});return e.jsx("span",{"data-dd-privacy":"allow",...t,role:a,"aria-label":t["aria-labelledby"]?void 0:n,children:e.jsx(i.IconSprite,{className:u,src:r})})}exports.Icon=y;

package/dist/cjs/components/icon/Icon.d.cts

@@ -0,0 +1,574 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { HTMLAttributes } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const icon: import('tailwind-variants').TVReturnType<{
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, {
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}>, {
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, {
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type IconProps = VariantProps<typeof icon> & Pick<HTMLAttributes<HTMLSpanElement>, 'className' | 'role' | 'aria-labelledby' | 'aria-hidden'> & {
+    /** The icon to render from the Unity icon set */
+    src: UnityIcon;
+    /**
+     * Alternative text for the icon, used for accessibility
+     * @default ''
+     */
+    alt?: string;
+    /**
+     * The icon's color. Use one of the allowed tokens or the `inherit` value for using the parent's foreground color
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof icon>['color'];
+    /**
+     * The icon's size.
+     * @default 20
+     */
+    size?: VariantProps<typeof icon>['size'];
+};
+/**
+ * The `Icon` component displays an icon from the Unity icon set.
+ */
+export declare function Icon({ alt, color, size, src, role, display, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/icon-button/CircularIconButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react-aria-components"),v=require("tailwind-variants"),I=require("../../hooks/use-id.cjs"),d=require("../icon/Icon.cjs"),y=require("../spinner/Spinner.cjs"),b=require("../tooltip/Tooltip.cjs"),f=v.tv({base:["uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors","active:uy-bg-surface-neutral-active","data-[pressed]:uy-bg-surface-neutral-pressed","focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring","aria-disabled:uy-cursor-not-allowed aria-disabled:uy-text-content-neutral-disabled","aria-busy:uy-text-content-neutral-disabled aria-busy:uy-cursor-progress"],variants:{size:{default:"uy-w-300 uy-h-300",large:"uy-w-400 uy-h-400"},color:{"content.neutral":"uy-text-content-neutral","content.neutral.low":"uy-text-content-neutral-low"},isDisabled:{false:"hover:uy-bg-surface-neutral-hover"}},defaultVariants:{size:"default",color:"content.neutral"}});function p(x){const h=I(),{onPress:n,icon:l,color:j,size:i,isLoading:t,title:r,isDisabled:s,asElement:g="default",className:m,...o}=x,a=`icon-button-label-${h}`,u=f({class:m,color:j,size:i,isDisabled:s});return g==="button"?e.jsx(b.Tooltip,{title:r,children:e.jsxs(c.Button,{"data-dd-privacy":"allow",...o,onPress:n,isDisabled:s||t,"aria-labelledby":a,"aria-busy":t,className:u,children:[t?e.jsx(y.Spinner,{size:"small",label:"Loading",color:"inherit"}):e.jsx(d.Icon,{src:l,size:i==="large"?24:20,color:"inherit",role:"presentation"}),e.jsx("span",{id:a,className:"uy-sr-only",children:r})]})}):e.jsx(b.Tooltip,{title:r,children:e.jsx(c.Pressable,{"data-dd-privacy":"allow",...o,onPress:n,isDisabled:s||t,"aria-labelledby":a,"aria-busy":t,children:e.jsxs("div",{role:"button","aria-disabled":s,className:u,children:[t?e.jsx(y.Spinner,{size:"small",label:"Loading",color:"inherit"}):e.jsx(d.Icon,{src:l,size:i==="large"?24:20,color:"inherit",role:"presentation"}),e.jsx("span",{id:a,className:"uy-sr-only",children:r})]})})})}p.displayName="CircularIconButton";exports.CircularIconButton=p;exports.circularIconButton=f;