twenty-ui 2.48.0 → 2.49.0

package/README.md

@@ -133,13 +133,38 @@ Record formatting, routing, product illustrations, and feature-specific animatio
 
 ### Documentation
 
-Primitive guides belong in `packages/twenty-docs/ui/primitives`. Shared component guides belong in `packages/twenty-docs/ui/components`. For each stateful API that supports both modes, include separate **Uncontrolled state** and **Controlled state** examples with the same scenario, labels, and initial state. Keep each example complete, with public imports and one exported example component.
+Primitive guides belong in `packages/twenty-docs/ui/primitives`. Shared component guides belong in `packages/twenty-docs/ui/components`.
+
+Every component guide starts with its purpose and a `Display` story, followed by **Usage** with complete code matching that preview. Use realistic content and the public API. Compound components share one complete display across their parts; providers and accessibility helpers demonstrate their effect in context. Keep useful Storybook controls available on the display.
+
+Make previews look like usable UI. Align controls with their labels, separate actions from supporting text, and give panels and cards enough padding. Constrain long text to a readable width, use theme colors for secondary content, and check that examples fit the documentation frame in both light and dark themes. Keep these layout choices in the example and its matching code snippet.
+
+Preserve the component's existing appearance in its Display story. Improve the surrounding layout without changing the control's shape, size, variant, or focus styling for decoration. Show alternative appearances in named stories or catalogs.
+
+Use these story roles consistently:
+
+| Story               | Purpose                               | When to include it                                |
+| ------------------- | ------------------------------------- | ------------------------------------------------- |
+| `Display`           | One representative, usable example    | Every component guide                             |
+| `Catalog`           | Labeled comparisons of visual options | When seeing options together helps readers choose |
+| Named examples      | A specific behavior or composition    | When the component supports distinct workflows    |
+| Interaction stories | Verify behavior with `play` functions | Keep these separate from embedded previews        |
+
+After Usage, document visual options, anatomy where relevant, behavior and composition, accessibility, and the generated API reference. Omit sections that add no useful information. Put migration guidance before the API reference.
+
+Catalogs should group variants, sizes, colors, and states separately. Use a matrix only when two dimensions need to be compared together. Avoid multiplying every prop combination. Use `GroupedCatalog` from `twenty-ui/testing` for a consistent grouped layout. Simple components can use a focused alternative example; interactive components usually need working workflow examples. Use the preview's light and dark tabs for theme comparison.
+
+Keep comprehensive visual checks in separate `VisualRegression` stories using `CatalogDecorator`, including the existing dark-theme and variant matrices. Tag them with `!autodocs` and do not embed them in the guides. Simplifying a documentation catalog must preserve its existing visual regression coverage.
+
+Embed stories with a descriptive `title` and a height that closely fits their content, including the preview's padding. Check wrapping at narrow documentation widths. Reserve additional height only for dropdowns, popups, validation messages, resizing, or other expanding content, and verify those states fit. Embedded stories can respond to the reader, but must not define or inherit a `play` function. Share a presentational example with its interaction story instead of copying automated interactions into the documentation.
+
+For each stateful API that supports both modes, include separate **Uncontrolled state** and **Controlled state** examples with the same scenario, labels, and initial state. Keep each example complete, with public imports and one exported example component.
 
 Explain state ownership before advanced behavior such as indeterminate selection or manual tab activation. Document independent states, such as selection and popup visibility, separately. For components that delegate state to a parent or group, explain that ownership and link to the relevant examples.
 
 For compound components, include an anatomy tree and identify required parts, optional parts, and elements supplied internally. Show supported composition with complete examples, use Twenty UI components for supporting controls, and explain how custom wrappers preserve props and refs. Use `text` fences for structural diagrams and `tsx` fences for runnable examples so the documentation checker validates the examples.
 
-Run `npx nx check:ui twenty-docs` to validate generated references and documentation examples.
+Run `npx nx check:ui twenty-docs` to validate generated references and documentation examples. Run `npx nx check:ui-stories twenty-docs` to validate preview titles, story references, the required first `Display`, and the absence of automated interactions in embedded stories.
 
 ### Testing
 

package/dist/Avatar-C6WxBgjS.cjs

@@ -0,0 +1 @@
+const I=require("./theme-1XkFz8Qu.cjs"),u=require("./isDefined-DS2Q42p5.cjs"),P=require("./doNotTranslate-CHE7WmRS.cjs"),q=require("./mergeClassNames-D4lshrT6.cjs"),h=require("./utilities-xZh8D2gd.cjs");let k=require("@sniptt/guards"),n=require("react/jsx-runtime"),A=require("@base-ui/react/avatar");var S="_root_14f7e_1",y="_avatarPulsing_14f7e_1",L="_image_14f7e_89",w="_fallback_14f7e_101",N={root:S,avatarPulsing:y,image:L,fallback:w},C=({className:a,...e})=>(0,n.jsx)(A.Avatar.Fallback,{...e,className:q.mergeClassNames(N.fallback,a)}),T=({className:a,...e})=>(0,n.jsx)(A.Avatar.Image,{...e,className:q.mergeClassNames(N.image,a)}),p=a=>a?.trim().charAt(0).toUpperCase(),x=({name:a,colorSeed:e=a,size:i="md",shape:g="square",variant:v="soft",color:m,backgroundColor:b,borderColor:_,pulsing:s=!1,ring:l=!1,className:o,style:c,...r})=>{const t=I.useTheme(),d=p(a),D=d?m??h.stringToThemeColorP3String({string:e??"",variant:12,theme:t}):m??t.font.color.tertiary,F=d?b??h.stringToThemeColorP3String({string:e??"",variant:v==="outline"?5:4,theme:t}):b??t.background.transparent.light,j=_??(d?h.stringToThemeColorP3String({string:e??"",variant:6,theme:t}):void 0);return(0,n.jsx)(A.Avatar.Root,{...r,"data-size":i,"data-shape":g,"data-pulsing":s||void 0,"data-ring":l||void 0,className:q.mergeClassNames(N.root,o),style:f=>({"--tw-avatar-color":D,"--tw-avatar-background":f.imageLoadingStatus==="loaded"?"none":F,"--tw-avatar-border":v==="outline"&&f.imageLoadingStatus!=="loaded"&&j?P.doNotTranslate(`1px solid ${j}`):"none",...(0,k.isFunction)(c)?c(f):c})})},B=({src:a,name:e,icon:i,imageProps:g,fallbackProps:v,backgroundColor:m,...b})=>{const _=p(e),s=u.isDefined(i)&&!(0,k.isBoolean)(i)&&i!=="",l=g?.alt??"",o=!s&&(0,k.isNonEmptyString)(l),{children:c=s?i:_||"-",...r}=v??{},t=u.isDefined(r.role)||u.isDefined(r["aria-label"])||u.isDefined(r["aria-labelledby"]),d=!o&&!t&&!u.isDefined(r.render);return(0,n.jsxs)(x,{...b,name:e,backgroundColor:s?"inherit":m,children:[!s&&(0,n.jsx)(T,{src:a??void 0,...g,alt:l}),(0,n.jsx)(C,{role:o?"img":void 0,"aria-label":o?l:void 0,"aria-hidden":d||void 0,...r,children:c})]})},R=Object.assign(B,{Root:x,Image:T,Fallback:C});Object.defineProperty(exports,"Avatar",{enumerable:!0,get:function(){return R}});

package/dist/{Avatar-D-QA0RE5.js → Avatar-ifVlxbx_.js}

@@ -1,31 +1,32 @@
 import { t as c } from "./isDefined-fMi6eQ4r.js";
+import { t as j } from "./doNotTranslate-BSVT8Xyd.js";
 import { r as w } from "./theme-B2EaXhye.js";
 import { t as _ } from "./mergeClassNames-ClFMR1v0.js";
-import { o as p } from "./utilities-CEi9I09B.js";
+import { o as p } from "./utilities-BKCMZyqZ.js";
 import { isBoolean as y, isFunction as B, isNonEmptyString as R } from "@sniptt/guards";
 import { jsx as v, jsxs as S } from "react/jsx-runtime";
 import { Avatar as h } from "@base-ui/react/avatar";
-var T = "_root_14f7e_1", D = "_avatarPulsing_14f7e_1", P = "_image_14f7e_89", $ = "_fallback_14f7e_101", A = {
-  root: T,
-  avatarPulsing: D,
-  image: P,
-  fallback: $
+var D = "_root_14f7e_1", P = "_avatarPulsing_14f7e_1", $ = "_image_14f7e_89", q = "_fallback_14f7e_101", A = {
+  root: D,
+  avatarPulsing: P,
+  image: $,
+  fallback: q
 }, I = ({ className: a, ...t }) => /* @__PURE__ */ v(h.Fallback, {
   ...t,
   className: _(A.fallback, a)
 }), N = ({ className: a, ...t }) => /* @__PURE__ */ v(h.Image, {
   ...t,
   className: _(A.image, a)
-}), x = (a) => a?.trim().charAt(0).toUpperCase(), C = ({ name: a, colorSeed: t = a, size: i = "md", shape: d = "square", variant: g = "soft", color: b, backgroundColor: f, borderColor: u, pulsing: e = !1, ring: l = !1, className: s, style: n, ...r }) => {
-  const o = w(), m = x(a), L = m ? b ?? p({
+}), x = (a) => a?.trim().charAt(0).toUpperCase(), C = ({ name: a, colorSeed: t = a, size: i = "md", shape: d = "square", variant: g = "soft", color: f, backgroundColor: b, borderColor: u, pulsing: e = !1, ring: l = !1, className: s, style: n, ...r }) => {
+  const o = w(), m = x(a), L = m ? f ?? p({
     string: t ?? "",
     variant: 12,
     theme: o
-  }) : b ?? o.font.color.tertiary, j = m ? f ?? p({
+  }) : f ?? o.font.color.tertiary, T = m ? b ?? p({
     string: t ?? "",
     variant: g === "outline" ? 5 : 4,
     theme: o
-  }) : f ?? o.background.transparent.light, F = u ?? (m ? p({
+  }) : b ?? o.background.transparent.light, F = u ?? (m ? p({
     string: t ?? "",
     variant: 6,
     theme: o
@@ -39,17 +40,17 @@ var T = "_root_14f7e_1", D = "_avatarPulsing_14f7e_1", P = "_image_14f7e_89", $
     className: _(A.root, s),
     style: (k) => ({
       "--tw-avatar-color": L,
-      "--tw-avatar-background": k.imageLoadingStatus === "loaded" ? "none" : j,
-      "--tw-avatar-border": g === "outline" && k.imageLoadingStatus !== "loaded" && F ? `1px solid ${F}` : "none",
+      "--tw-avatar-background": k.imageLoadingStatus === "loaded" ? "none" : T,
+      "--tw-avatar-border": g === "outline" && k.imageLoadingStatus !== "loaded" && F ? j(`1px solid ${F}`) : "none",
       ...B(n) ? n(k) : n
     })
   });
-}, q = ({ src: a, name: t, icon: i, imageProps: d, fallbackProps: g, backgroundColor: b, ...f }) => {
+}, z = ({ src: a, name: t, icon: i, imageProps: d, fallbackProps: g, backgroundColor: f, ...b }) => {
   const u = x(t), e = c(i) && !y(i) && i !== "", l = d?.alt ?? "", s = !e && R(l), { children: n = e ? i : u || "-", ...r } = g ?? {}, o = c(r.role) || c(r["aria-label"]) || c(r["aria-labelledby"]), m = !s && !o && !c(r.render);
   return /* @__PURE__ */ S(C, {
-    ...f,
+    ...b,
     name: t,
-    backgroundColor: e ? "inherit" : b,
+    backgroundColor: e ? "inherit" : f,
     children: [!e && /* @__PURE__ */ v(N, {
       src: a ?? void 0,
       ...d,
@@ -62,11 +63,11 @@ var T = "_root_14f7e_1", D = "_avatarPulsing_14f7e_1", P = "_image_14f7e_89", $
       children: n
     })]
   });
-}, K = Object.assign(q, {
+}, Q = Object.assign(z, {
   Root: C,
   Image: N,
   Fallback: I
 });
 export {
-  K as t
+  Q as t
 };

package/dist/{Button-D5enZ0Qz.js → Button-DIw804CX.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./isDefined-fMi6eQ4r.js";
 import { t as D } from "./mergeClassNames-ClFMR1v0.js";
 import { t as l } from "./Loader-DtHWQH8w.js";
-import { t as E } from "./Shortcut-BvWUZ3pb.js";
+import { t as E } from "./Shortcut-Bp9iDdQg.js";
 import { clsx as J } from "clsx";
 import { createContext as R, useContext as V } from "react";
 import { jsx as t, jsxs as h } from "react/jsx-runtime";

package/dist/{Button-Dbi5P05r.cjs → Button-DTm1WDzp.cjs}

@@ -1 +1 @@
-const t=require("./isDefined-DS2Q42p5.cjs"),w=require("./mergeClassNames-D4lshrT6.cjs"),d=require("./Loader-Bb72CUQ9.cjs"),A=require("./Shortcut-CgrdLv_L.cjs");let E=require("clsx"),x=require("react"),e=require("react/jsx-runtime"),J=require("@base-ui/react/button");var q=(0,x.createContext)(null),R="_button_vtbjg_1",V="_content_vtbjg_181",F="_label_vtbjg_190",H="_icon_vtbjg_196",K="_hidden_vtbjg_206",M="_loader_vtbjg_210",r={button:R,content:V,label:F,icon:H,hidden:K,loader:M},Q=({variant:p,color:h,size:D,fullWidth:C=!1,loading:n=!1,loadingPosition:s="center",elevated:N=!1,startIcon:B,endIcon:L,shortcut:l,shortcutJoinLabel:g,disabled:y=!1,href:a,render:c,nativeButton:v,role:k,className:S,children:o,..._})=>{const i=(0,x.useContext)(q),z=p??i?.variant??"outline",G=h??i?.color??"neutral",O=D??i?.size??"md",u=t.isDefined(a)&&!t.isDefined(c)&&v!==!0,P=t.isDefined(a)?{href:a}:void 0,b=k??(u?"link":void 0),I=t.isDefined(b)?{role:b}:void 0,j=n&&s==="center",f=n&&s==="start"?(0,e.jsx)(d.Loader,{}):B,m=n&&s==="end"?(0,e.jsx)(d.Loader,{}):L;return(0,e.jsxs)(J.Button,{..._,...P,className:w.mergeClassNames(r.button,S),"data-variant":z,"data-color":G,"data-size":O,"data-full-width":C||void 0,"data-loading":n||void 0,"data-elevated":N||void 0,"aria-busy":n?"true":_["aria-busy"],disabled:y||n,...I,nativeButton:v??!u,render:c??(u?(0,e.jsx)("a",{href:a,children:o}):void 0),children:[(0,e.jsxs)("span",{className:(0,E.clsx)(r.content,j&&r.hidden),children:[t.isDefined(f)&&(0,e.jsx)("span",{className:r.icon,"aria-hidden":!0,children:f}),t.isDefined(o)&&(0,e.jsx)("span",{className:r.label,children:o}),t.isDefined(m)&&(0,e.jsx)("span",{className:r.icon,"aria-hidden":!0,children:m}),t.isDefined(l)&&(0,e.jsx)(A.Shortcut,{shortcut:l,sequenceJoinLabel:g,variant:"button",visibility:"desktop","aria-hidden":!0})]}),j&&(0,e.jsx)("span",{className:r.loader,"aria-hidden":!0,children:(0,e.jsx)(d.Loader,{})})]})};Object.defineProperty(exports,"Button",{enumerable:!0,get:function(){return Q}});Object.defineProperty(exports,"ButtonGroupContext",{enumerable:!0,get:function(){return q}});Object.defineProperty(exports,"Button_module_default",{enumerable:!0,get:function(){return r}});
+const t=require("./isDefined-DS2Q42p5.cjs"),w=require("./mergeClassNames-D4lshrT6.cjs"),d=require("./Loader-Bb72CUQ9.cjs"),A=require("./Shortcut-N8TELGPI.cjs");let E=require("clsx"),x=require("react"),e=require("react/jsx-runtime"),J=require("@base-ui/react/button");var q=(0,x.createContext)(null),R="_button_vtbjg_1",V="_content_vtbjg_181",F="_label_vtbjg_190",H="_icon_vtbjg_196",K="_hidden_vtbjg_206",M="_loader_vtbjg_210",r={button:R,content:V,label:F,icon:H,hidden:K,loader:M},Q=({variant:p,color:h,size:D,fullWidth:C=!1,loading:n=!1,loadingPosition:s="center",elevated:N=!1,startIcon:B,endIcon:L,shortcut:l,shortcutJoinLabel:g,disabled:y=!1,href:a,render:c,nativeButton:v,role:k,className:S,children:o,..._})=>{const i=(0,x.useContext)(q),z=p??i?.variant??"outline",G=h??i?.color??"neutral",O=D??i?.size??"md",u=t.isDefined(a)&&!t.isDefined(c)&&v!==!0,P=t.isDefined(a)?{href:a}:void 0,b=k??(u?"link":void 0),I=t.isDefined(b)?{role:b}:void 0,j=n&&s==="center",f=n&&s==="start"?(0,e.jsx)(d.Loader,{}):B,m=n&&s==="end"?(0,e.jsx)(d.Loader,{}):L;return(0,e.jsxs)(J.Button,{..._,...P,className:w.mergeClassNames(r.button,S),"data-variant":z,"data-color":G,"data-size":O,"data-full-width":C||void 0,"data-loading":n||void 0,"data-elevated":N||void 0,"aria-busy":n?"true":_["aria-busy"],disabled:y||n,...I,nativeButton:v??!u,render:c??(u?(0,e.jsx)("a",{href:a,children:o}):void 0),children:[(0,e.jsxs)("span",{className:(0,E.clsx)(r.content,j&&r.hidden),children:[t.isDefined(f)&&(0,e.jsx)("span",{className:r.icon,"aria-hidden":!0,children:f}),t.isDefined(o)&&(0,e.jsx)("span",{className:r.label,children:o}),t.isDefined(m)&&(0,e.jsx)("span",{className:r.icon,"aria-hidden":!0,children:m}),t.isDefined(l)&&(0,e.jsx)(A.Shortcut,{shortcut:l,sequenceJoinLabel:g,variant:"button",visibility:"desktop","aria-hidden":!0})]}),j&&(0,e.jsx)("span",{className:r.loader,"aria-hidden":!0,children:(0,e.jsx)(d.Loader,{})})]})};Object.defineProperty(exports,"Button",{enumerable:!0,get:function(){return Q}});Object.defineProperty(exports,"ButtonGroupContext",{enumerable:!0,get:function(){return q}});Object.defineProperty(exports,"Button_module_default",{enumerable:!0,get:function(){return r}});