@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/task-menu/parts/task.variants.js

@@ -0,0 +1,65 @@
+import { uyTv as t } from "@payfit/unity-themes";
+const a = t({
+  slots: {
+    base: [
+      "uy:group/base",
+      "uy:list-none uy:width-full uy:flex",
+      "uy:transition-all",
+      "uy:group-data-[task-status=uncompleted]/base:text-content-neutral-enabled",
+      "uy:group-data-[task-status=completed]/base:text-content-neutral-enabled"
+    ],
+    number: [
+      "uy:rounded-200 uy:w-300 uy:h-300 uy:place-content-center uy:text-center uy:self-center",
+      "uy:group-data-[task-status=uncompleted]/base:bg-surface-neutral-lowest",
+      "uy:group-data-[task-status=completed]/base:bg-surface-success",
+      "uy:group-data-[task-status=completed]/base:text-content-inverted",
+      "uy:group-data-[task-status=locked]/base:bg-surface-neutral-disabled",
+      "uy:group-data-[task-status=locked]/base:text-content-neutral-lowest",
+      "uy:group-data-[task-status=uncompleted]/base:group-hover/element:bg-surface-neutral-lowest-hover",
+      "uy:group-data-[task-status=uncompleted]/base:group-hover/element:text-content-neutral-hover",
+      "uy:group-data-[task-status=uncompleted]/base:group-data-[hovered=true]/element:bg-surface-neutral-lowest-hover",
+      "uy:group-data-[task-status=uncompleted]/base:group-data-[hovered=true]/element:text-content-neutral-hover",
+      "uy:group-data-[task-status=locked]/base:group-hover/element:text-content-neutral-hover",
+      "uy:group-data-[task-status=locked]/base:group-data-[hovered=true]/element:text-content-neutral-hover",
+      "uy:group-data-[task-status=uncompleted]/base:group-data-[pressed=true]/element:bg-surface-neutral-lowest",
+      "uy:group-data-[task-status=locked]/base:group-data-[pressed=true]/element:bg-surface-neutral-lowest",
+      "uy:theme-legacy:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-surface-primary-active",
+      "uy:theme-legacy:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:text-content-inverted-active",
+      "uy:theme-rebrand:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-surface-neutral-highest-active",
+      "uy:theme-rebrand:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:text-content-inverted-active"
+    ],
+    element: [
+      "uy:group/element",
+      "uy:gap-75 uy:flex uy:flex-1 uy:flex-row uy:items-stretch uy:outline-none uy:rounded-50",
+      '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',
+      "uy:group-data-[task-status=uncompleted]/base:data-[pressed]:text-content-neutral-pressed"
+    ],
+    text: [
+      "uy:px-150 uy:py-25 uy:rounded-75 uy:grow uy:text-left uy:min-h-400 uy:leading-[1] uy:content-center",
+      "uy:md:min-h-[28px]",
+      "uy:md:py-50",
+      "uy:group-data-[task-status=completed]/base:text-content-neutral-active",
+      "uy:group-data-[task-status=locked]/base:text-content-neutral-enabled",
+      "uy:group-data-[task-status=locked]/base:bg-[transparent]",
+      "uy:group-data-[task-status=uncompleted]/base:group-data-[hovered=true]/element:text-content-neutral-hover",
+      "uy:group-data-[task-status=locked]/base:group-data-[hovered=true]/element:text-content-neutral-hover",
+      "uy:theme-legacy:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:text-content-primary-active",
+      "uy:theme-rebrand:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:text-content-neutral-active",
+      "uy:theme-rebrand:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-surface-neutral-selected"
+    ],
+    lock: [
+      "uy:text-content-neutral-lowest uy:bg-surface-neutral-lowest uy:p-25 uy:rounded-75 uy:my-50 uy:self-center",
+      "uy:md:my-0"
+    ]
+  },
+  variants: {
+    taskStatus: {
+      uncompleted: "",
+      completed: "",
+      locked: ""
+    }
+  }
+});
+export {
+  a as commonTask
+};

package/dist/esm/components/text/Text.d.ts

@@ -0,0 +1,94 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { text } from './Text.variants.js';
+export type ValidTextElements = 'p' | 'span' | 'div' | 'abbr' | 'dfn' | 'displayHeading' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
+export type TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The HTML element to render the text as. Defaults to a recommended element based on the variant.
+     * @default 'span'
+     */
+    asElement?: ValidTextElements;
+    /**
+     * The language of the text content See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
+     */
+    lang?: HTMLSpanElement['lang'];
+    /**
+     * The typography variant to use.
+     * @default 'inherit'
+     */
+    variant?: VariantProps<typeof text>['variant'];
+    /**
+     * The text's color. This can be any token under the `content` colors namespace.
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof text>['color'];
+    /**
+     * Whether the text should be truncated to one line and have an ellipsis.
+     * @default false
+     */
+    isTruncated?: boolean;
+    /**
+     * The number of lines to clamp the text to.
+     * @default undefined
+     */
+    lineClamp?: number;
+    /**
+     * Additional class names to apply to the text.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Limits the visible width of the text to a given number of characters using the CSS `ch` unit.
+     * @default undefined
+     */
+    maxWidthCh?: number;
+}>;
+/**
+ * The `Text` component is used to render text with different variants and colors.
+ */
+declare const Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The HTML element to render the text as. Defaults to a recommended element based on the variant.
+     * @default 'span'
+     */
+    asElement?: ValidTextElements;
+    /**
+     * The language of the text content See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
+     */
+    lang?: HTMLSpanElement["lang"];
+    /**
+     * The typography variant to use.
+     * @default 'inherit'
+     */
+    variant?: VariantProps<typeof text>["variant"];
+    /**
+     * The text's color. This can be any token under the `content` colors namespace.
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof text>["color"];
+    /**
+     * Whether the text should be truncated to one line and have an ellipsis.
+     * @default false
+     */
+    isTruncated?: boolean;
+    /**
+     * The number of lines to clamp the text to.
+     * @default undefined
+     */
+    lineClamp?: number;
+    /**
+     * Additional class names to apply to the text.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Limits the visible width of the text to a given number of characters using the CSS `ch` unit.
+     * @default undefined
+     */
+    maxWidthCh?: number;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export { Text };

package/dist/esm/components/text/Text.js

@@ -0,0 +1,71 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as h, useMemo as g } from "react";
+import { text as b } from "./Text.variants.js";
+const N = {
+  inherit: "span",
+  displayHeading: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  overline: "h6",
+  subtitle: "h5",
+  displayTitle: "h1",
+  displayBody: "p",
+  body: "p",
+  bodyStrong: "strong",
+  bodySmall: "small",
+  bodySmallStrong: "strong",
+  bodyLarge: "p",
+  bodyLargeStrong: "strong",
+  action: "span",
+  actionLarge: "span",
+  actionSmall: "span",
+  actionInfo: "span"
+}, S = h(
+  ({
+    children: r,
+    variant: t,
+    color: s,
+    isTruncated: n,
+    lineClamp: e,
+    asElement: l,
+    className: a,
+    maxWidthCh: o,
+    ...d
+  }, m) => {
+    const i = e !== void 0, p = g(
+      () => b({
+        variant: t,
+        color: s,
+        isTruncated: n,
+        isLineClamped: i,
+        className: a,
+        hasCharLimit: o !== void 0
+      }),
+      [a, s, i, n, t, o]
+    ), y = N[t ?? "inherit"];
+    return /* @__PURE__ */ c(
+      l ?? y,
+      {
+        "data-dd-privacy": "mask",
+        ...d,
+        ref: m,
+        className: p,
+        style: {
+          ...e !== void 0 && {
+            "--uy-text-line-clamp": e
+          },
+          ...o !== void 0 && {
+            "--uy-text-max-width-ch": `${o}ch`
+          }
+        },
+        children: r
+      }
+    );
+  }
+);
+S.displayName = "Text";
+export {
+  S as Text
+};

package/dist/esm/components/text/Text.variants.d.ts

@@ -0,0 +1,304 @@
+export declare const text: import('tailwind-variants').TVReturnType<{
+    variant: {
+        inherit: string;
+        displayHeading: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        overline: string;
+        subtitle: string;
+        displayTitle: string;
+        displayBody: string;
+        body: string;
+        bodyStrong: string;
+        bodySmall: string;
+        bodySmallStrong: string;
+        bodyLarge: string;
+        bodyLargeStrong: string;
+        action: string;
+        actionLarge: string;
+        actionSmall: string;
+        actionInfo: string;
+    };
+    color: {
+        inherit: string;
+        '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;
+    };
+    isTruncated: {
+        true: string;
+    };
+    isLineClamped: {
+        true: string;
+    };
+    hasCharLimit: {
+        true: string;
+    };
+}, undefined, "", {
+    variant: {
+        inherit: string;
+        displayHeading: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        overline: string;
+        subtitle: string;
+        displayTitle: string;
+        displayBody: string;
+        body: string;
+        bodyStrong: string;
+        bodySmall: string;
+        bodySmallStrong: string;
+        bodyLarge: string;
+        bodyLargeStrong: string;
+        action: string;
+        actionLarge: string;
+        actionSmall: string;
+        actionInfo: string;
+    };
+    color: {
+        inherit: string;
+        '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;
+    };
+    isTruncated: {
+        true: string;
+    };
+    isLineClamped: {
+        true: string;
+    };
+    hasCharLimit: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        inherit: string;
+        displayHeading: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        overline: string;
+        subtitle: string;
+        displayTitle: string;
+        displayBody: string;
+        body: string;
+        bodyStrong: string;
+        bodySmall: string;
+        bodySmallStrong: string;
+        bodyLarge: string;
+        bodyLargeStrong: string;
+        action: string;
+        actionLarge: string;
+        actionSmall: string;
+        actionInfo: string;
+    };
+    color: {
+        inherit: string;
+        '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;
+    };
+    isTruncated: {
+        true: string;
+    };
+    isLineClamped: {
+        true: string;
+    };
+    hasCharLimit: {
+        true: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/esm/components/text/Text.variants.js

@@ -0,0 +1,113 @@
+import { uyTv as t } from "@payfit/unity-themes";
+const n = t({
+  base: "",
+  variants: {
+    variant: {
+      inherit: "",
+      displayHeading: "uy:typography-display-heading",
+      h1: "uy:typography-h1",
+      h2: "uy:typography-h2",
+      h3: "uy:typography-h3",
+      h4: "uy:typography-h4",
+      overline: "uy:typography-overline",
+      subtitle: "uy:typography-subtitle",
+      displayTitle: "uy:typography-display-title",
+      displayBody: "uy:typography-display-body",
+      body: "uy:typography-body",
+      bodyStrong: "uy:typography-body-strong",
+      bodySmall: "uy:typography-body-small",
+      bodySmallStrong: "uy:typography-body-small-strong",
+      bodyLarge: "uy:typography-body-large",
+      bodyLargeStrong: "uy:typography-body-large-strong",
+      action: "uy:typography-action",
+      actionLarge: "uy:typography-body-large",
+      actionSmall: "uy:typography-body-small",
+      actionInfo: "uy:typography-action uy:underline uy:decoration-dotted uy:decoration-[10%] uy:underline-offset-[25%]"
+    },
+    color: {
+      inherit: "uy:text-inherit",
+      "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"
+    },
+    isTruncated: {
+      true: "uy:block uy:truncate"
+    },
+    isLineClamped: {
+      true: "uy:line-clamp-[var(--uy-text-line-clamp)]"
+    },
+    hasCharLimit: {
+      true: "uy:inline-block uy:max-w-[var(--uy-text-max-width-ch)] uy:truncate"
+    }
+  },
+  defaultVariants: {
+    variant: "body",
+    isTruncated: !1
+  }
+});
+export {
+  n as text
+};

package/dist/esm/components/text-area/TanstackTextArea.d.ts

@@ -0,0 +1,21 @@
+import { TextAreaProps } from './TextArea.js';
+export type TanstackTextAreaProps = Omit<TextAreaProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackTextArea` is a controlled textarea wired to the TanStack Form field context.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ bio: string }>({ validators: {} })
+ *   return (
+ *     <form>
+ *       <form.AppField name="bio">
+ *         {() => <TanstackTextArea placeholder="Short bio" rows={4} />}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackTextArea: import('react').ForwardRefExoticComponent<TanstackTextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+export { TanstackTextArea };