@nebula-demo/ui 0.1.3

package/dist/components/Tag/Tag.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),B=require("../../utils/cn.cjs"),N=require("../../utils/focusRing.cjs"),v=require("./Tag.variants.cjs"),l=require("../Icon/Icon.cjs");function w(r){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(i,a,n.get?n:{enumerable:!0,get:()=>r[a]})}}return i.default=r,Object.freeze(i)}const u=w(b),O={sm:{avatar:12,trailIcon:9,trailBox:12,errIcon:10,errBox:16},md:{avatar:16,trailIcon:12,trailBox:16,errIcon:15,errBox:20},lg:{avatar:20,trailIcon:15,trailBox:20,errIcon:18,errBox:24}},f=u.forwardRef(({className:r,variant:i="primary",size:a="sm",selected:n=!1,children:c,isClose:h,isPin:g,onClose:p,onPin:y,avatar:o,icon:x,labelClose:d="Remove",labelPin:m="Pin",...j},I)=>{const e=O[a??"sm"],s=i==="error";return t.jsxs("span",{ref:I,className:B.cn(v.tagVariants({variant:i,size:a,selected:n}),N.FOCUS_WITHIN_RING,r),"data-state":n&&!s?"selected":void 0,...j,children:[s&&t.jsx("span",{className:"cai-flex cai-items-center cai-justify-center cai-shrink-0 cai-text-icon-error-alt",style:{width:e.errBox,height:e.errBox},children:t.jsx(l.Icon,{name:"alert-circle",size:e.errIcon,"aria-hidden":"true"})}),o&&!s&&u.cloneElement(o,{style:{width:e.avatar,height:e.avatar,...o.props.style}}),x&&!s&&!o&&u.cloneElement(x,{width:e.avatar,height:e.avatar,"aria-hidden":!0}),t.jsx("span",{className:"cai-truncate",children:c}),g&&t.jsx("button",{type:"button",onClick:y,"aria-label":typeof c=="string"?`${m} ${c}`:m,className:"cai-flex cai-items-center cai-justify-center cai-shrink-0 cai-rounded-xs cai-text-current cai-cursor-pointer focus:cai-outline-none",style:{width:e.trailBox,height:e.trailBox},children:t.jsx(l.Icon,{name:"pin-01",size:e.trailIcon,"aria-hidden":"true"})}),h&&t.jsx("button",{type:"button",onClick:p,"aria-label":typeof c=="string"?`${d} ${c}`:d,className:"cai-flex cai-items-center cai-justify-center cai-shrink-0 cai-rounded-xs cai-text-current cai-cursor-pointer focus:cai-outline-none",style:{width:e.trailBox,height:e.trailBox},children:t.jsx(l.Icon,{name:"x-close",size:e.trailIcon,"aria-hidden":"true"})})]})});f.displayName="Tag";exports.Tag=f;

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,25 @@
+import { TagVariantsProps } from './Tag.variants';
+import * as React from 'react';
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>, TagVariantsProps {
+    /** Tag label text */
+    children: React.ReactNode;
+    /** Show close button */
+    isClose?: boolean;
+    /** Show pin toggle button */
+    isPin?: boolean;
+    /** Close handler */
+    onClose?: () => void;
+    /** Pin toggle handler */
+    onPin?: () => void;
+    /** Optional avatar element */
+    avatar?: React.ReactElement;
+    /** Optional icon element */
+    icon?: React.ReactElement;
+    /** Close button accessible label */
+    labelClose?: string;
+    /** Pin button accessible label */
+    labelPin?: string;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+export { Tag };
+//# sourceMappingURL=Tag.d.ts.map

package/dist/components/Tag/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAWnE,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,EAAE,gBAAgB;IACjF,qBAAqB;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;IAClB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAC3B,4BAA4B;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IACzB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,GAAG,kFAwFR,CAAA;AAID,OAAO,EAAE,GAAG,EAAE,CAAA"}

package/dist/components/Tag/Tag.js

@@ -0,0 +1,84 @@
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as N } from "../../utils/cn.js";
+import { FOCUS_WITHIN_RING as w } from "../../utils/focusRing.js";
+import { tagVariants as j } from "./Tag.variants.js";
+import { Icon as c } from "../Icon/Icon.js";
+const k = {
+  sm: { avatar: 12, trailIcon: 9, trailBox: 12, errIcon: 10, errBox: 16 },
+  md: { avatar: 16, trailIcon: 12, trailBox: 16, errIcon: 15, errBox: 20 },
+  lg: { avatar: 20, trailIcon: 15, trailBox: 20, errIcon: 18, errBox: 24 }
+}, v = o.forwardRef(
+  ({
+    className: d,
+    variant: n = "primary",
+    size: s = "sm",
+    selected: l = !1,
+    children: e,
+    isClose: h,
+    isPin: p,
+    onClose: f,
+    onPin: y,
+    avatar: a,
+    icon: m,
+    labelClose: x = "Remove",
+    labelPin: u = "Pin",
+    ...I
+  }, B) => {
+    const r = k[s ?? "sm"], i = n === "error";
+    return /* @__PURE__ */ g(
+      "span",
+      {
+        ref: B,
+        className: N(j({ variant: n, size: s, selected: l }), w, d),
+        "data-state": l && !i ? "selected" : void 0,
+        ...I,
+        children: [
+          i && /* @__PURE__ */ t(
+            "span",
+            {
+              className: "cai-flex cai-items-center cai-justify-center cai-shrink-0 cai-text-icon-error-alt",
+              style: { width: r.errBox, height: r.errBox },
+              children: /* @__PURE__ */ t(c, { name: "alert-circle", size: r.errIcon, "aria-hidden": "true" })
+            }
+          ),
+          a && !i && o.cloneElement(a, {
+            style: { width: r.avatar, height: r.avatar, ...a.props.style }
+          }),
+          m && !i && !a && o.cloneElement(m, {
+            width: r.avatar,
+            height: r.avatar,
+            "aria-hidden": !0
+          }),
+          /* @__PURE__ */ t("span", { className: "cai-truncate", children: e }),
+          p && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: y,
+              "aria-label": typeof e == "string" ? `${u} ${e}` : u,
+              className: "cai-flex cai-items-center cai-justify-center cai-shrink-0 cai-rounded-xs cai-text-current cai-cursor-pointer focus:cai-outline-none",
+              style: { width: r.trailBox, height: r.trailBox },
+              children: /* @__PURE__ */ t(c, { name: "pin-01", size: r.trailIcon, "aria-hidden": "true" })
+            }
+          ),
+          h && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: f,
+              "aria-label": typeof e == "string" ? `${x} ${e}` : x,
+              className: "cai-flex cai-items-center cai-justify-center cai-shrink-0 cai-rounded-xs cai-text-current cai-cursor-pointer focus:cai-outline-none",
+              style: { width: r.trailBox, height: r.trailBox },
+              children: /* @__PURE__ */ t(c, { name: "x-close", size: r.trailIcon, "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+v.displayName = "Tag";
+export {
+  v as Tag
+};

package/dist/components/Tag/Tag.variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("class-variance-authority"),r=a.cva("cai-inline-flex cai-items-center cai-font-medium cai-border cai-max-w-full",{variants:{variant:{primary:"cai-border-septenary cai-bg-primary-invert cai-text-tertiary",error:"cai-border-error-alt cai-bg-error cai-text-primary-alt"},size:{sm:"cai-h-5 cai-px-sm cai-py-xxs cai-text-micro1 cai-rounded-xs cai-gap-sm",md:"cai-h-6 cai-px-md cai-py-xxs cai-text-subbody cai-rounded-xs cai-gap-sm",lg:"cai-h-8 cai-px-lg cai-py-xs cai-text-body2 cai-rounded-xs cai-gap-sm"},selected:{true:"",false:""}},compoundVariants:[{variant:"primary",selected:!1,class:"hover:cai-border-octonary hover:cai-text-secondary active:cai-border-nonary active:cai-text-primary"},{variant:"primary",selected:!0,class:"cai-border-nonary cai-text-primary"}],defaultVariants:{variant:"primary",size:"sm",selected:!1}});exports.tagVariants=r;

package/dist/components/Tag/Tag.variants.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const tagVariants: (props?: ({
+    variant?: "error" | "primary" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    selected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TagVariantsProps = VariantProps<typeof tagVariants>;
+//# sourceMappingURL=Tag.variants.d.ts.map

package/dist/components/Tag/Tag.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.variants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,eAAO,MAAM,WAAW;;;;8EAqCvB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/dist/components/Tag/Tag.variants.js

@@ -0,0 +1,41 @@
+import { cva as a } from "class-variance-authority";
+const i = a(
+  "cai-inline-flex cai-items-center cai-font-medium cai-border cai-max-w-full",
+  {
+    variants: {
+      variant: {
+        primary: "cai-border-septenary cai-bg-primary-invert cai-text-tertiary",
+        error: "cai-border-error-alt cai-bg-error cai-text-primary-alt"
+      },
+      size: {
+        sm: "cai-h-5 cai-px-sm cai-py-xxs cai-text-micro1 cai-rounded-xs cai-gap-sm",
+        md: "cai-h-6 cai-px-md cai-py-xxs cai-text-subbody cai-rounded-xs cai-gap-sm",
+        lg: "cai-h-8 cai-px-lg cai-py-xs cai-text-body2 cai-rounded-xs cai-gap-sm"
+      },
+      selected: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "primary",
+        selected: !1,
+        class: "hover:cai-border-octonary hover:cai-text-secondary active:cai-border-nonary active:cai-text-primary"
+      },
+      {
+        variant: "primary",
+        selected: !0,
+        class: "cai-border-nonary cai-text-primary"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "sm",
+      selected: !1
+    }
+  }
+);
+export {
+  i as tagVariants
+};

package/dist/components/Tag/TagGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("react"),s=require("../../utils/cn.cjs"),i=require("./TagGroup.variants.cjs");function l(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const p=l(u),a=p.forwardRef(({className:e,size:r="sm",children:t,...o},n)=>c.jsx("div",{ref:n,role:"group",className:s.cn(i.tagGroupVariants({size:r}),e),...o,children:t}));a.displayName="TagGroup";exports.TagGroup=a;

package/dist/components/Tag/TagGroup.d.ts

@@ -0,0 +1,8 @@
+import { TagGroupVariantsProps } from './TagGroup.variants';
+import * as React from 'react';
+export interface TagGroupProps extends React.HTMLAttributes<HTMLDivElement>, TagGroupVariantsProps {
+    children: React.ReactNode;
+}
+declare const TagGroup: React.ForwardRefExoticComponent<TagGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { TagGroup };
+//# sourceMappingURL=TagGroup.d.ts.map

package/dist/components/Tag/TagGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/TagGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAElF,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,qBAAqB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,QAAQ,sFAWb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Tag/TagGroup.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as i } from "../../utils/cn.js";
+import { tagGroupVariants as e } from "./TagGroup.variants.js";
+const f = s.forwardRef(
+  ({ className: r, size: o = "sm", children: a, ...m }, p) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: p,
+      role: "group",
+      className: i(e({ size: o }), r),
+      ...m,
+      children: a
+    }
+  )
+);
+f.displayName = "TagGroup";
+export {
+  f as TagGroup
+};

package/dist/components/Tag/TagGroup.variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("class-variance-authority"),i=a.cva("cai-flex cai-flex-wrap cai-items-center",{variants:{size:{sm:"cai-gap-2",md:"cai-gap-2",lg:"cai-gap-3"}},defaultVariants:{size:"sm"}});exports.tagGroupVariants=i;

package/dist/components/Tag/TagGroup.variants.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const tagGroupVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TagGroupVariantsProps = VariantProps<typeof tagGroupVariants>;
+//# sourceMappingURL=TagGroup.variants.d.ts.map

package/dist/components/Tag/TagGroup.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.variants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/TagGroup.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,eAAO,MAAM,gBAAgB;;8EAW3B,CAAA;AAEF,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAA"}

package/dist/components/Tag/TagGroup.variants.js

@@ -0,0 +1,16 @@
+import { cva as a } from "class-variance-authority";
+const t = a("cai-flex cai-flex-wrap cai-items-center", {
+  variants: {
+    size: {
+      sm: "cai-gap-2",
+      md: "cai-gap-2",
+      lg: "cai-gap-3"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+export {
+  t as tagGroupVariants
+};

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,9 @@
+export { Tag } from './Tag';
+export type { TagProps } from './Tag';
+export { tagVariants } from './Tag.variants';
+export type { TagVariantsProps } from './Tag.variants';
+export { TagGroup } from './TagGroup';
+export type { TagGroupProps } from './TagGroup';
+export { tagGroupVariants } from './TagGroup.variants';
+export type { TagGroupVariantsProps } from './TagGroup.variants';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/components/Textarea/Textarea.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),W=require("react"),R=require("../../utils/cn.cjs"),i=require("./Textarea.variants.cjs"),J=require("../Avatar/Avatar.cjs"),Q=require("../Tag/Tag.cjs"),V=require("../Icon/Icon.cjs");function X(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const u=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(l,o,u.get?u:{enumerable:!0,get:()=>n[o]})}}return l.default=n,Object.freeze(l)}const c=X(W),S=["grey","brand","teal-light","teal-dark","lavender","lime","pink","orange"];function Y(n){const l=n.trim().split(/\s+/),o=l[0]?.charAt(0)??"",u=l.length>1?l[l.length-1].charAt(0):"";return(o+u).toUpperCase()}const Z=new Set(["Enter",",",";"]),T=c.forwardRef(({label:n,required:l=!1,placeholder:o,hint:u,error:d=!1,counter:m=!1,maxLength:y=1e4,resize:C=!0,tagsMode:a=!1,tagsList:r,tagStyle:q="default",onTagsChange:f,addTag:v,removeTag:h,disabled:I=!1,value:p,defaultValue:b,id:E,className:_,rows:D,onChange:N,...O},z)=>{const P=c.useId(),j=E??P,[$,A]=c.useState(()=>typeof p=="string"?p.length:typeof b=="string"?b.length:0);c.useEffect(()=>{typeof p=="string"&&A(p.length)},[p]);const B=c.useCallback(e=>{A(e.target.value.length),N?.(e)},[N]),[x,k]=c.useState(""),F=c.useCallback(e=>{if(a){if(Z.has(e.key)){if(e.preventDefault(),v){v(e);return}const s=x.trim();s&&r&&f&&(f([...r,{label:s}]),k(""))}e.key==="Backspace"&&x===""&&(h&&r&&r.length>0?h(r.length-1):r&&r.length>0&&f&&f(r.slice(0,-1)))}},[a,v,h,x,r,f]),G=c.useCallback(e=>{k(e.target.value)},[]),K=c.useCallback(e=>{if(h){h(e);return}if(r&&f){const s=[...r];s.splice(e,1),f(s)}},[h,r,f]),w=u?`${j}-hint`:void 0,H=w||void 0;return t.jsxs("div",{className:i.textareaWrapper({disabled:I}),children:[(n||m)&&t.jsxs("span",{className:i.labelRow(),children:[n?t.jsxs("label",{htmlFor:j,className:R.cn(i.labelText(),"cai-flex-1"),children:[n,l&&t.jsx("span",{className:"cai-text-primary cai-ml-0.5","aria-hidden":"true",children:"*"})]}):t.jsx("span",{className:"cai-flex-1"}),m&&t.jsxs("span",{className:i.labelText(),"aria-live":"polite","aria-atomic":"true",children:[$,"/",y]})]}),t.jsxs("div",{className:i.textareaContainer({error:d,tagsMode:a}),children:[a&&r&&r.length>0&&t.jsx("div",{className:i.tagsContainer(),role:"list",children:r.map((e,s)=>{const U=q==="avatar"&&e.avatar!==!1&&!e.error?t.jsx(J.Avatar,{variant:"initials",size:"xxs",colorTheme:S[s%S.length],initials:Y(e.label)}):void 0;return t.jsx(Q.Tag,{role:"listitem",variant:e.error?"error":"primary",size:"sm",isClose:!0,onClose:()=>K(s),avatar:U,labelClose:"Remove",children:e.label},`${e.label}-${s}`)})}),t.jsx("textarea",{ref:z,id:j,placeholder:o,disabled:I,rows:a?1:D,maxLength:m?y:void 0,"aria-invalid":d||void 0,"aria-describedby":H,"aria-required":l||void 0,value:a?x:p,defaultValue:a?void 0:b,onChange:a?G:B,onKeyDown:a?F:void 0,className:R.cn(i.textareaField({error:a?!1:d,resize:a?!1:C,tagsMode:a}),_),...O})]}),u&&t.jsxs("span",{className:i.hintRow(),id:w,role:d?"alert":void 0,children:[d&&t.jsx("span",{className:i.hintIcon({variant:"error"}),children:t.jsx(V.Icon,{name:"alert-circle",size:14,"aria-hidden":"true"})}),t.jsx("span",{className:d?i.errorText():i.hintText(),children:u})]})]})});T.displayName="Textarea";exports.Textarea=T;

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+export interface TagType {
+    /** Display label for the tag. */
+    label: string;
+    /** Optional avatar URL or truthy value to show initials. */
+    avatar?: string | boolean;
+    /** Marks this specific tag as having an error. */
+    error?: boolean;
+}
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+    /** Label text above the textarea. */
+    label?: string;
+    /** Shows an asterisk after the label to indicate a required field. */
+    required?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Hint or error message below the textarea. */
+    hint?: string;
+    /** Enables the error visual state. */
+    error?: boolean;
+    /** Shows a character counter in the label-right position. */
+    counter?: boolean;
+    /** Maximum character count. Defaults to 10000. */
+    maxLength?: number;
+    /** Enables the vertical resize handle. Defaults to true. */
+    resize?: boolean;
+    /** Switches to tag entry mode. */
+    tagsMode?: boolean;
+    /** Array of tag objects. Used when tagsMode is true. */
+    tagsList?: TagType[];
+    /** Visual style for tags: "default" shows label only, "avatar" includes initials. */
+    tagStyle?: 'default' | 'avatar';
+    /** Callback fired when the tags array changes. */
+    onTagsChange?: (tags: TagType[]) => void;
+    /** Custom handler called when a new tag should be added. */
+    addTag?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    /** Custom handler called when a tag should be removed by index. */
+    removeTag?: (index: number) => void;
+    /** Disables the textarea. */
+    disabled?: boolean;
+    /** Controlled text value. */
+    value?: string;
+    /** Textarea id. Auto-generated if omitted. */
+    id?: string;
+    /** Additional class names applied to the `<textarea>` element. */
+    className?: string;
+    /** Number of visible text rows. */
+    rows?: number;
+    /** Standard onChange, adapted for textarea. */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/Textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,MAAM,WAAW,OAAO;IACtB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACzB,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IAC3E,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC/B,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAA;IACxC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IAClE,mEAAmE;IACnE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8CAA8C;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,CAAA;CACzD;AAkCD,QAAA,MAAM,QAAQ,2FAwMb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,162 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as R } from "../../utils/cn.js";
+import { labelText as E, labelRow as O, tagsContainer as P, textareaField as Q, textareaContainer as V, hintIcon as X, errorText as Y, hintText as Z, hintRow as M, textareaWrapper as L } from "./Textarea.variants.js";
+import { Avatar as g } from "../Avatar/Avatar.js";
+import { Tag as ee } from "../Tag/Tag.js";
+import { Icon as re } from "../Icon/Icon.js";
+const S = [
+  "grey",
+  "brand",
+  "teal-light",
+  "teal-dark",
+  "lavender",
+  "lime",
+  "pink",
+  "orange"
+];
+function ae(h) {
+  const c = h.trim().split(/\s+/), u = c[0]?.charAt(0) ?? "", p = c.length > 1 ? c[c.length - 1].charAt(0) : "";
+  return (u + p).toUpperCase();
+}
+const le = /* @__PURE__ */ new Set(["Enter", ",", ";"]), te = n.forwardRef(
+  ({
+    label: h,
+    required: c = !1,
+    placeholder: u,
+    hint: p,
+    error: s = !1,
+    counter: v = !1,
+    maxLength: I = 1e4,
+    resize: z = !0,
+    tagsMode: a = !1,
+    tagsList: r,
+    tagStyle: D = "default",
+    onTagsChange: i,
+    addTag: x,
+    removeTag: o,
+    disabled: N = !1,
+    value: f,
+    defaultValue: b,
+    id: T,
+    className: _,
+    rows: $,
+    onChange: A,
+    ...j
+  }, B) => {
+    const F = n.useId(), y = T ?? F, [G, k] = n.useState(() => typeof f == "string" ? f.length : typeof b == "string" ? b.length : 0);
+    n.useEffect(() => {
+      typeof f == "string" && k(f.length);
+    }, [f]);
+    const K = n.useCallback(
+      (e) => {
+        k(e.target.value.length), A?.(e);
+      },
+      [A]
+    ), [d, w] = n.useState(""), H = n.useCallback(
+      (e) => {
+        if (a) {
+          if (le.has(e.key)) {
+            if (e.preventDefault(), x) {
+              x(e);
+              return;
+            }
+            const l = d.trim();
+            l && r && i && (i([...r, { label: l }]), w(""));
+          }
+          e.key === "Backspace" && d === "" && (o && r && r.length > 0 ? o(r.length - 1) : r && r.length > 0 && i && i(r.slice(0, -1)));
+        }
+      },
+      [a, x, o, d, r, i]
+    ), U = n.useCallback((e) => {
+      w(e.target.value);
+    }, []), W = n.useCallback(
+      (e) => {
+        if (o) {
+          o(e);
+          return;
+        }
+        if (r && i) {
+          const l = [...r];
+          l.splice(e, 1), i(l);
+        }
+      },
+      [o, r, i]
+    ), C = p ? `${y}-hint` : void 0, q = C || void 0;
+    return /* @__PURE__ */ m("div", { className: L({ disabled: N }), children: [
+      (h || v) && /* @__PURE__ */ m("span", { className: O(), children: [
+        h ? /* @__PURE__ */ m("label", { htmlFor: y, className: R(E(), "cai-flex-1"), children: [
+          h,
+          c && /* @__PURE__ */ t("span", { className: "cai-text-primary cai-ml-0.5", "aria-hidden": "true", children: "*" })
+        ] }) : /* @__PURE__ */ t("span", { className: "cai-flex-1" }),
+        v && /* @__PURE__ */ m("span", { className: E(), "aria-live": "polite", "aria-atomic": "true", children: [
+          G,
+          "/",
+          I
+        ] })
+      ] }),
+      /* @__PURE__ */ m("div", { className: V({ error: s, tagsMode: a }), children: [
+        a && r && r.length > 0 && /* @__PURE__ */ t("div", { className: P(), role: "list", children: r.map((e, l) => {
+          const J = D === "avatar" && e.avatar !== !1 && !e.error ? /* @__PURE__ */ t(
+            g,
+            {
+              variant: "initials",
+              size: "xxs",
+              colorTheme: S[l % S.length],
+              initials: ae(e.label)
+            }
+          ) : void 0;
+          return /* @__PURE__ */ t(
+            ee,
+            {
+              role: "listitem",
+              variant: e.error ? "error" : "primary",
+              size: "sm",
+              isClose: !0,
+              onClose: () => W(l),
+              avatar: J,
+              labelClose: "Remove",
+              children: e.label
+            },
+            `${e.label}-${l}`
+          );
+        }) }),
+        /* @__PURE__ */ t(
+          "textarea",
+          {
+            ref: B,
+            id: y,
+            placeholder: u,
+            disabled: N,
+            rows: a ? 1 : $,
+            maxLength: v ? I : void 0,
+            "aria-invalid": s || void 0,
+            "aria-describedby": q,
+            "aria-required": c || void 0,
+            value: a ? d : f,
+            defaultValue: a ? void 0 : b,
+            onChange: a ? U : K,
+            onKeyDown: a ? H : void 0,
+            className: R(
+              Q({
+                error: a ? !1 : s,
+                resize: a ? !1 : z,
+                tagsMode: a
+              }),
+              _
+            ),
+            ...j
+          }
+        )
+      ] }),
+      p && /* @__PURE__ */ m("span", { className: M(), id: C, role: s ? "alert" : void 0, children: [
+        s && /* @__PURE__ */ t("span", { className: X({ variant: "error" }), children: /* @__PURE__ */ t(re, { name: "alert-circle", size: 14, "aria-hidden": "true" }) }),
+        /* @__PURE__ */ t("span", { className: s ? Y() : Z(), children: p })
+      ] })
+    ] });
+  }
+);
+te.displayName = "Textarea";
+export {
+  te as Textarea
+};

package/dist/components/Textarea/Textarea.variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("class-variance-authority"),e=require("../../utils/focusRing.cjs"),r=a.cva("cai-flex cai-flex-col cai-w-full",{variants:{disabled:{true:"cai-opacity-40 cai-pointer-events-none cai-cursor-not-allowed",false:"aria-disabled:cai-opacity-40 aria-disabled:cai-pointer-events-none aria-disabled:cai-cursor-not-allowed"}},defaultVariants:{disabled:!1}}),t=a.cva("cai-flex cai-items-baseline cai-gap-x-2 cai-mb-1.5 cai-order-1"),i=a.cva("cai-font-sans cai-text-micro1 cai-font-medium cai-text-primary"),c=a.cva(["cai-relative cai-rounded-md cai-overflow-hidden cai-order-2","cai-border cai-transition-colors cai-bg-transparent",e.FOCUS_WITHIN_RING],{variants:{error:{true:"",false:["cai-border-septenary","hover:cai-border-nonary hover:cai-bg-secondary","focus-within:cai-border-brand-primary focus-within:cai-bg-transparent"]},tagsMode:{true:"",false:""}},compoundVariants:[{error:!0,tagsMode:!1,className:"cai-border-error-alt cai-bg-error"},{error:!0,tagsMode:!0,className:"cai-border-error-alt"}],defaultVariants:{error:!1,tagsMode:!1}}),o=a.cva(["cai-block cai-w-full cai-min-h-[140px]","cai-px-3 cai-py-2","cai-font-sans cai-text-subbody cai-font-medium","cai-bg-transparent cai-border-none cai-outline-none"],{variants:{error:{true:"cai-text-primary-alt placeholder:cai-text-primary-alt placeholder:cai-opacity-60",false:"cai-text-primary placeholder:cai-text-tertiary"},resize:{true:"cai-resize-y",false:"cai-resize-none"},tagsMode:{true:"cai-min-h-[40px]",false:""}},compoundVariants:[{error:!0,tagsMode:!0,className:"cai-text-primary placeholder:cai-text-tertiary"}],defaultVariants:{error:!1,resize:!0,tagsMode:!1}}),n=a.cva("cai-flex cai-flex-wrap cai-gap-1.5 cai-px-2.5 cai-pt-2 cai-pb-1"),s=a.cva("cai-flex cai-items-center cai-gap-1 cai-mt-1.5 cai-order-3"),l=a.cva("cai-font-sans cai-text-micro1 cai-font-medium cai-text-primary"),d=a.cva("cai-font-sans cai-text-xs cai-font-medium cai-text-error"),b=a.cva("cai-flex cai-items-center",{variants:{variant:{error:"cai-text-icon-error",hint:"cai-text-icon-tertiary"}},defaultVariants:{variant:"hint"}});a.cva(["[scrollbar-width:thin]","[scrollbar-color:var(--bg-scroll-alt)_var(--bg-scroll)]","[&::-webkit-scrollbar]:cai-w-2","[&::-webkit-scrollbar-track]:cai-bg-scroll","[&::-webkit-scrollbar-thumb]:cai-rounded-full","[&::-webkit-scrollbar-thumb]:cai-bg-scroll-alt"]);exports.errorText=d;exports.hintIcon=b;exports.hintRow=s;exports.hintText=l;exports.labelRow=t;exports.labelText=i;exports.tagsContainer=n;exports.textareaContainer=c;exports.textareaField=o;exports.textareaWrapper=r;

package/dist/components/Textarea/Textarea.variants.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Outer wrapper — flex-col that orders children:
+ *   order-1 → label row
+ *   order-2 → textarea container (with border / focus ring)
+ *   order-3 → hint / error row
+ */
+export declare const textareaWrapper: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Label row — sits above the textarea container (order-1).
+ */
+export declare const labelRow: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Label text — shared between left label and counter.
+ */
+export declare const labelText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Textarea container — the bordered box that holds the textarea
+ * (and optionally tags). Carries the focus ring via FOCUS_WITHIN_RING.
+ */
+export declare const textareaContainer: (props?: ({
+    error?: boolean | null | undefined;
+    tagsMode?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The `<textarea>` element itself.
+ */
+export declare const textareaField: (props?: ({
+    error?: boolean | null | undefined;
+    resize?: boolean | null | undefined;
+    tagsMode?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Tags container — wraps all Tag atoms inside the textarea border.
+ */
+export declare const tagsContainer: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Hint / error row — sits below the textarea container (order-3).
+ */
+export declare const hintRow: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Hint text.
+ */
+export declare const hintText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Error message text.
+ */
+export declare const errorText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Error icon and hint icon.
+ */
+export declare const hintIcon: (props?: ({
+    variant?: "error" | "hint" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Scrollbar styling utility classes (applied to textarea).
+ */
+export declare const scrollbar: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+//# sourceMappingURL=Textarea.variants.d.ts.map

package/dist/components/Textarea/Textarea.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.variants.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.variants.ts"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;8EAW1B,CAAA;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,oFAAwE,CAAA;AAE7F;;GAEG;AACH,eAAO,MAAM,SAAS,oFAAwE,CAAA;AAE9F;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;8EAsC7B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa;;;;8EAmCzB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,oFAAyE,CAAA;AAEnG;;GAEG;AACH,eAAO,MAAM,OAAO,oFAAoE,CAAA;AAExF;;GAEG;AACH,eAAO,MAAM,QAAQ,oFAAwE,CAAA;AAE7F;;GAEG;AACH,eAAO,MAAM,SAAS,oFAAkE,CAAA;AAExF;;GAEG;AACH,eAAO,MAAM,QAAQ;;8EAUnB,CAAA;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,oFAOpB,CAAA"}