@cossistant/react 0.0.28 → 0.0.30

package/packages/types/src/realtime-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-events.d.ts","names":[],"sources":["../../../../../types/src/realtime-events.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;cAqBa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8VD,iBAAA,gBAAiC;KAEjC,+BAA+B,qBAAqB,eACvD,gBAAgB;KAGb,wBAAwB;QAC7B;WACG,qBAAqB;;KAGnB,gBAAA,WACL,oBAAoB,cAAc,KACvC;KAEU,4BAA4B,qBACvC,qBAAqB"}

package/{schemas3.d.ts → packages/types/src/schemas.d.ts}

@@ -1,6 +1,6 @@
-import { $strip } from "./schemas.js";
-import { output } from "./core.js";
-import { ZodArray, ZodDefault, ZodEnum, ZodLiteral, ZodNullable, ZodNumber, ZodObject, ZodOptional, ZodString, ZodUnion } from "./schemas2.js";
+import { $loose, $strip } from "../../../node_modules/.bun/zod@4.3.6/node_modules/zod/v4/core/schemas.js";
+import { output } from "../../../node_modules/.bun/zod@4.3.6/node_modules/zod/v4/core/core.js";
+import { ZodArray, ZodDefault, ZodEnum, ZodLiteral, ZodNullable, ZodNumber, ZodObject, ZodOptional, ZodRecord, ZodString, ZodUnion, ZodUnknown } from "../../../node_modules/.bun/zod@4.3.6/node_modules/zod/v4/classic/schemas.js";
 
 //#region ../types/src/schemas.d.ts
 
@@ -12,8 +12,8 @@ declare const conversationSchema: ZodObject<{
   visitorId: ZodString;
   websiteId: ZodString;
   status: ZodDefault<ZodEnum<{
-    resolved: "resolved";
     open: "open";
+    resolved: "resolved";
     spam: "spam";
   }>>;
   deletedAt: ZodDefault<ZodNullable<ZodString>>;
@@ -36,6 +36,96 @@ declare const conversationSchema: ZodObject<{
     parts: ZodArray<ZodUnion<readonly [ZodObject<{
       type: ZodLiteral<"text">;
       text: ZodString;
+      state: ZodOptional<ZodEnum<{
+        done: "done";
+        streaming: "streaming";
+      }>>;
+    }, $strip>, ZodObject<{
+      type: ZodLiteral<"reasoning">;
+      text: ZodString;
+      state: ZodOptional<ZodEnum<{
+        done: "done";
+        streaming: "streaming";
+      }>>;
+      providerMetadata: ZodOptional<ZodObject<{
+        cossistant: ZodOptional<ZodObject<{
+          visibility: ZodOptional<ZodEnum<{
+            public: "public";
+            private: "private";
+          }>>;
+          progressMessage: ZodOptional<ZodString>;
+          knowledgeId: ZodOptional<ZodString>;
+        }, $strip>>;
+      }, $loose>>;
+    }, $strip>, ZodObject<{
+      type: ZodString;
+      toolCallId: ZodString;
+      toolName: ZodString;
+      input: ZodRecord<ZodString, ZodUnknown>;
+      output: ZodOptional<ZodUnknown>;
+      state: ZodEnum<{
+        error: "error";
+        result: "result";
+        partial: "partial";
+      }>;
+      errorText: ZodOptional<ZodString>;
+      providerMetadata: ZodOptional<ZodObject<{
+        cossistant: ZodOptional<ZodObject<{
+          visibility: ZodOptional<ZodEnum<{
+            public: "public";
+            private: "private";
+          }>>;
+          progressMessage: ZodOptional<ZodString>;
+          knowledgeId: ZodOptional<ZodString>;
+        }, $strip>>;
+      }, $loose>>;
+    }, $strip>, ZodObject<{
+      type: ZodLiteral<"source-url">;
+      sourceId: ZodString;
+      url: ZodString;
+      title: ZodOptional<ZodString>;
+      providerMetadata: ZodOptional<ZodObject<{
+        cossistant: ZodOptional<ZodObject<{
+          visibility: ZodOptional<ZodEnum<{
+            public: "public";
+            private: "private";
+          }>>;
+          progressMessage: ZodOptional<ZodString>;
+          knowledgeId: ZodOptional<ZodString>;
+        }, $strip>>;
+      }, $loose>>;
+    }, $strip>, ZodObject<{
+      type: ZodLiteral<"source-document">;
+      sourceId: ZodString;
+      mediaType: ZodString;
+      title: ZodString;
+      filename: ZodOptional<ZodString>;
+      providerMetadata: ZodOptional<ZodObject<{
+        cossistant: ZodOptional<ZodObject<{
+          visibility: ZodOptional<ZodEnum<{
+            public: "public";
+            private: "private";
+          }>>;
+          progressMessage: ZodOptional<ZodString>;
+          knowledgeId: ZodOptional<ZodString>;
+        }, $strip>>;
+      }, $loose>>;
+    }, $strip>, ZodObject<{
+      type: ZodLiteral<"step-start">;
+    }, $strip>, ZodObject<{
+      type: ZodLiteral<"file">;
+      url: ZodString;
+      mediaType: ZodString;
+      filename: ZodOptional<ZodString>;
+      size: ZodOptional<ZodNumber>;
+    }, $strip>, ZodObject<{
+      type: ZodLiteral<"image">;
+      url: ZodString;
+      mediaType: ZodString;
+      filename: ZodOptional<ZodString>;
+      size: ZodOptional<ZodNumber>;
+      width: ZodOptional<ZodNumber>;
+      height: ZodOptional<ZodNumber>;
     }, $strip>, ZodObject<{
       type: ZodLiteral<"event">;
       eventType: ZodEnum<{
@@ -59,20 +149,6 @@ declare const conversationSchema: ZodObject<{
       targetUserId: ZodNullable<ZodString>;
       targetAiAgentId: ZodNullable<ZodString>;
       message: ZodOptional<ZodNullable<ZodString>>;
-    }, $strip>, ZodObject<{
-      type: ZodLiteral<"image">;
-      url: ZodString;
-      mediaType: ZodString;
-      fileName: ZodOptional<ZodString>;
-      size: ZodOptional<ZodNumber>;
-      width: ZodOptional<ZodNumber>;
-      height: ZodOptional<ZodNumber>;
-    }, $strip>, ZodObject<{
-      type: ZodLiteral<"file">;
-      url: ZodString;
-      mediaType: ZodString;
-      fileName: ZodOptional<ZodString>;
-      size: ZodOptional<ZodNumber>;
     }, $strip>, ZodObject<{
       type: ZodLiteral<"metadata">;
       source: ZodEnum<{
@@ -103,4 +179,4 @@ declare const conversationSeenSchema: ZodObject<{
 type ConversationSeen = output<typeof conversationSeenSchema>;
 //#endregion
 export { Conversation, ConversationSeen };
-//# sourceMappingURL=schemas3.d.ts.map
+//# sourceMappingURL=schemas.d.ts.map

package/packages/types/src/schemas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schemas.d.ts","names":[],"sources":["../../../../../types/src/schemas.ts"],"sourcesContent":[],"mappings":";;;;;;cAkBa,oBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmBnB,YAAA,GAAe,cAAe;cAE7B,wBAAsB;;;;;;EArBJ,UAAA,WAAA;EAAA,SAAA,WAAA;EAmBnB,SAAA,WAAY;EAEX,SAAA,aAAA,UAUX,CAAA;;KAEU,gBAAA,GAAmB,cAAe"}

package/primitives/avatar/avatar.js

@@ -18,7 +18,7 @@ const useAvatarContext = () => {
 * children so consumers can compose initials, images and status rings.
 */
 const Avatar = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => {
 		const [imageLoadingStatus, setImageLoadingStatus] = React$1.useState("idle");
 		const contextValue = React$1.useMemo(() => ({
 			imageLoadingStatus,

package/primitives/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["React","contextValue: AvatarContextValue","state: AvatarState"],"sources":["../../../src/primitives/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\n\ntype AvatarState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n};\n\nexport type AvatarProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\nexport interface AvatarContextValue extends AvatarState {\n\tonImageLoadingStatusChange: (\n\t\tstatus: AvatarState[\"imageLoadingStatus\"]\n\t) => void;\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue | null>(null);\n\n/**\n * Consumer hook for the `Avatar` compound components. Throws when components are\n * rendered outside of the `Avatar` tree to surface integration errors early.\n */\nexport const useAvatarContext = () => {\n\tconst context = React.useContext(AvatarContext);\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"Avatar compound components cannot be rendered outside the Avatar component\"\n\t\t);\n\t}\n\treturn context;\n};\n\n/**\n * Root avatar wrapper that coordinates image loading state with fallback\n * children so consumers can compose initials, images and status rings.\n */\nexport const Avatar = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, AvatarProps>(\n\t\t({ children, className, asChild = false, ...props }, ref) => {\n\t\t\tconst [imageLoadingStatus, setImageLoadingStatus] =\n\t\t\t\tReact.useState<AvatarState[\"imageLoadingStatus\"]>(\"idle\");\n\n\t\t\tconst contextValue: AvatarContextValue = React.useMemo(\n\t\t\t\t() => ({\n\t\t\t\t\timageLoadingStatus,\n\t\t\t\t\tonImageLoadingStatusChange: setImageLoadingStatus,\n\t\t\t\t}),\n\t\t\t\t[imageLoadingStatus]\n\t\t\t);\n\n\t\t\tconst state: AvatarState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<AvatarContext.Provider value={contextValue}>\n\t\t\t\t\t{useRenderElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tasChild,\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tref,\n\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t...props,\n\t\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}\n\t\t\t\t\t)}\n\t\t\t\t</AvatarContext.Provider>\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"Avatar\";\n\treturn Component;\n})();\n"],"mappings":";;;;;AAsBA,MAAM,gBAAgBA,QAAM,cAAyC,KAAK;;;;;AAM1E,MAAa,yBAAyB;CACrC,MAAM,UAAUA,QAAM,WAAW,cAAc;AAC/C,KAAI,CAAC,QACJ,OAAM,IAAI,MACT,6EACA;AAEF,QAAO;;;;;;AAOR,MAAa,gBAAgB;CAC5B,MAAM,YAAYA,QAAM,YACtB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QAAQ;EAC5D,MAAM,CAAC,oBAAoB,yBAC1BA,QAAM,SAA4C,OAAO;EAE1D,MAAMC,eAAmCD,QAAM,eACvC;GACN;GACA,4BAA4B;GAC5B,GACD,CAAC,mBAAmB,CACpB;EAED,MAAME,QAAqB,EAC1B,oBACA;AAED,SACC,oBAAC,cAAc;GAAS,OAAO;aAC7B,iBACA,OACA;IACC;IACA;IACA,EACD;IACC;IACA;IACA,OAAO;KACN,GAAG;KACH;KACA;IACD,CACD;IACuB;GAG3B;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
+{"version":3,"file":"avatar.js","names":["React","contextValue: AvatarContextValue","state: AvatarState"],"sources":["../../../src/primitives/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\n\ntype AvatarState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n};\n\nexport type AvatarProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\nexport interface AvatarContextValue extends AvatarState {\n\tonImageLoadingStatusChange: (\n\t\tstatus: AvatarState[\"imageLoadingStatus\"]\n\t) => void;\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue | null>(null);\n\n/**\n * Consumer hook for the `Avatar` compound components. Throws when components are\n * rendered outside of the `Avatar` tree to surface integration errors early.\n */\nexport const useAvatarContext = () => {\n\tconst context = React.useContext(AvatarContext);\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"Avatar compound components cannot be rendered outside the Avatar component\"\n\t\t);\n\t}\n\treturn context;\n};\n\n/**\n * Root avatar wrapper that coordinates image loading state with fallback\n * children so consumers can compose initials, images and status rings.\n */\nexport const Avatar = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, AvatarProps>(\n\t\t({ children, className, asChild = false, ...props }, ref) => {\n\t\t\tconst [imageLoadingStatus, setImageLoadingStatus] =\n\t\t\t\tReact.useState<AvatarState[\"imageLoadingStatus\"]>(\"idle\");\n\n\t\t\tconst contextValue: AvatarContextValue = React.useMemo(\n\t\t\t\t() => ({\n\t\t\t\t\timageLoadingStatus,\n\t\t\t\t\tonImageLoadingStatusChange: setImageLoadingStatus,\n\t\t\t\t}),\n\t\t\t\t[imageLoadingStatus]\n\t\t\t);\n\n\t\t\tconst state: AvatarState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<AvatarContext.Provider value={contextValue}>\n\t\t\t\t\t{useRenderElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tasChild,\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tref,\n\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t...props,\n\t\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}\n\t\t\t\t\t)}\n\t\t\t\t</AvatarContext.Provider>\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"Avatar\";\n\treturn Component;\n})();\n"],"mappings":";;;;;AAsBA,MAAM,gBAAgBA,QAAM,cAAyC,KAAK;;;;;AAM1E,MAAa,yBAAyB;CACrC,MAAM,UAAUA,QAAM,WAAW,cAAc;AAC/C,KAAI,CAAC,QACJ,OAAM,IAAI,MACT,6EACA;AAEF,QAAO;;;;;;AAOR,MAAa,gBAAgB;CAC5B,MAAM,YAAYA,QAAM,YACtB,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,SAAS,QAAQ;EAC5D,MAAM,CAAC,oBAAoB,yBAC1BA,QAAM,SAA4C,OAAO;EAE1D,MAAMC,eAAmCD,QAAM,eACvC;GACN;GACA,4BAA4B;GAC5B,GACD,CAAC,mBAAmB,CACpB;EAED,MAAME,QAAqB,EAC1B,oBACA;AAED,SACC,oBAAC,cAAc;GAAS,OAAO;aAC7B,iBACA,OACA;IACC;IACA;IACA,EACD;IACC;IACA;IACA,OAAO;KACN,GAAG;KACH;KACA;IACD,CACD;IACuB;GAG3B;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/avatar/fallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fallback.d.ts","names":[],"sources":["../../../src/primitives/avatar/fallback.tsx"],"sourcesContent":[],"mappings":";;;KASY,mBAAA,GAAsB,KACjC,OAAA,CAAM,eAAe;aAGV,OAAA,CAAM;EAJN,IAAA,CAAA,EAAA,MAAA;EACU,OAAA,CAAA,EAAA,MAAA;EAArB,OAAM,CAAA,EAAA,OAAA;EAD2B,SAAA,CAAA,EAAA,MAAA;CAItB;;AA4BZ;;;AAA2B,cAAd,cAAc,EAAA,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,OAAA,CAAA,cAAA,CAAA,eAAA,CAAA,EAAA,UAAA,CAAA,GAAA;EA5Bf,QAAM,CAAA,EAAN,OAAA,CAAM,SAAA;;;EA4BS,OAAA,CAAA,EAAA,OAAA;EAAA,SAAA,CAAA,EAAA,MAAA"}
+{"version":3,"file":"fallback.d.ts","names":[],"sources":["../../../src/primitives/avatar/fallback.tsx"],"sourcesContent":[],"mappings":";;;KASY,mBAAA,GAAsB,KACjC,OAAA,CAAM,eAAe;aAGV,OAAA,CAAM;EAJN,IAAA,CAAA,EAAA,MAAA;EACU,OAAA,CAAA,EAAA,MAAA;EAArB,OAAM,CAAA,EAAA,OAAA;EAD2B,SAAA,CAAA,EAAA,MAAA;CAItB;;AA2BZ;;;AAA2B,cAAd,cAAc,EAAA,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,OAAA,CAAA,cAAA,CAAA,eAAA,CAAA,EAAA,UAAA,CAAA,GAAA;EA3Bf,QAAM,CAAA,EAAN,OAAA,CAAM,SAAA;;;EA2BS,OAAA,CAAA,EAAA,OAAA;EAAA,SAAA,CAAA,EAAA,MAAA"}

package/primitives/avatar/fallback.js

@@ -7,14 +7,14 @@ const getInitials = (name) => {
 	const names = name.trim().split(" ");
 	if (names.length === 0) return "";
 	if (names.length === 1) return names[0]?.charAt(0).toUpperCase() || "";
-	return ((names[0]?.charAt(0) || "") + (names[names.length - 1]?.charAt(0) || "")).toUpperCase();
+	return ((names[0]?.charAt(0) || "") + (names.at(-1)?.charAt(0) || "")).toUpperCase();
 };
 /**
 * Displays initials or custom content while the avatar image loads or fails.
 * Optional delay avoids flashes when images load instantly.
 */
 const AvatarFallback = (() => {
-	const Component = React$1.forwardRef(({ children, name = "", delayMs = 0, className, asChild = false,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, name = "", delayMs = 0, className, asChild = false, ...props }, ref) => {
 		const { imageLoadingStatus } = useAvatarContext();
 		const [canRender, setCanRender] = React$1.useState(delayMs === 0);
 		React$1.useEffect(() => {

package/primitives/avatar/fallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"fallback.js","names":["React","state: FallbackState"],"sources":["../../../src/primitives/avatar/fallback.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { useAvatarContext } from \"./avatar\";\n\ntype FallbackState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\tinitials?: string;\n};\n\nexport type AvatarFallbackProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tname?: string;\n\tdelayMs?: number;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\nconst getInitials = (name: string): string => {\n\tconst names = name.trim().split(\" \");\n\tif (names.length === 0) {\n\t\treturn \"\";\n\t}\n\n\tif (names.length === 1) {\n\t\treturn names[0]?.charAt(0).toUpperCase() || \"\";\n\t}\n\n\tconst firstInitial = names[0]?.charAt(0) || \"\";\n\t// biome-ignore lint/style/useAtIndex: ok here\n\tconst lastInitial = names[names.length - 1]?.charAt(0) || \"\";\n\n\treturn (firstInitial + lastInitial).toUpperCase();\n};\n\n/**\n * Displays initials or custom content while the avatar image loads or fails.\n * Optional delay avoids flashes when images load instantly.\n */\nexport const AvatarFallback = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tname = \"\",\n\t\t\t\tdelayMs = 0,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { imageLoadingStatus } = useAvatarContext();\n\t\t\tconst [canRender, setCanRender] = React.useState(delayMs === 0);\n\n\t\t\tReact.useEffect(() => {\n\t\t\t\tif (delayMs > 0) {\n\t\t\t\t\tconst timerId = window.setTimeout(() => setCanRender(true), delayMs);\n\t\t\t\t\treturn () => window.clearTimeout(timerId);\n\t\t\t\t}\n\t\t\t}, [delayMs]);\n\n\t\t\tconst initials = React.useMemo(() => {\n\t\t\t\tif (name) {\n\t\t\t\t\treturn getInitials(name);\n\t\t\t\t}\n\t\t\t\treturn \"\";\n\t\t\t}, [name]);\n\n\t\t\tconst state: FallbackState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t\tinitials,\n\t\t\t};\n\n\t\t\tconst shouldRender =\n\t\t\t\tcanRender &&\n\t\t\t\timageLoadingStatus !== \"loaded\" &&\n\t\t\t\timageLoadingStatus !== \"loading\";\n\n\t\t\tconst content = children || initials;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tasChild,\n\t\t\t\t\tclassName,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate,\n\t\t\t\t\tenabled: shouldRender,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"AvatarFallback\";\n\treturn Component;\n})();\n"],"mappings":";;;;;AAoBA,MAAM,eAAe,SAAyB;CAC7C,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,IAAI;AACpC,KAAI,MAAM,WAAW,EACpB,QAAO;AAGR,KAAI,MAAM,WAAW,EACpB,QAAO,MAAM,IAAI,OAAO,EAAE,CAAC,aAAa,IAAI;AAO7C,UAJqB,MAAM,IAAI,OAAO,EAAE,IAAI,OAExB,MAAM,MAAM,SAAS,IAAI,OAAO,EAAE,IAAI,KAEtB,aAAa;;;;;;AAOlD,MAAa,wBAAwB;CACpC,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,OAAO,IACP,UAAU,GACV,WACA,UAAU,MACV,GAAG,SAEJ,QACI;EACJ,MAAM,EAAE,uBAAuB,kBAAkB;EACjD,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,YAAY,EAAE;AAE/D,UAAM,gBAAgB;AACrB,OAAI,UAAU,GAAG;IAChB,MAAM,UAAU,OAAO,iBAAiB,aAAa,KAAK,EAAE,QAAQ;AACpE,iBAAa,OAAO,aAAa,QAAQ;;KAExC,CAAC,QAAQ,CAAC;EAEb,MAAM,WAAWA,QAAM,cAAc;AACpC,OAAI,KACH,QAAO,YAAY,KAAK;AAEzB,UAAO;KACL,CAAC,KAAK,CAAC;EAEV,MAAMC,QAAuB;GAC5B;GACA;GACA;EAED,MAAM,eACL,aACA,uBAAuB,YACvB,uBAAuB;EAExB,MAAM,UAAU,YAAY;AAE5B,SAAO,iBACN,QACA;GACC;GACA;GACA,EACD;GACC;GACA;GACA,SAAS;GACT,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
+{"version":3,"file":"fallback.js","names":["React","state: FallbackState"],"sources":["../../../src/primitives/avatar/fallback.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { useAvatarContext } from \"./avatar\";\n\ntype FallbackState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\tinitials?: string;\n};\n\nexport type AvatarFallbackProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tname?: string;\n\tdelayMs?: number;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\nconst getInitials = (name: string): string => {\n\tconst names = name.trim().split(\" \");\n\tif (names.length === 0) {\n\t\treturn \"\";\n\t}\n\n\tif (names.length === 1) {\n\t\treturn names[0]?.charAt(0).toUpperCase() || \"\";\n\t}\n\n\tconst firstInitial = names[0]?.charAt(0) || \"\";\n\tconst lastInitial = names.at(-1)?.charAt(0) || \"\";\n\n\treturn (firstInitial + lastInitial).toUpperCase();\n};\n\n/**\n * Displays initials or custom content while the avatar image loads or fails.\n * Optional delay avoids flashes when images load instantly.\n */\nexport const AvatarFallback = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tname = \"\",\n\t\t\t\tdelayMs = 0,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { imageLoadingStatus } = useAvatarContext();\n\t\t\tconst [canRender, setCanRender] = React.useState(delayMs === 0);\n\n\t\t\tReact.useEffect(() => {\n\t\t\t\tif (delayMs > 0) {\n\t\t\t\t\tconst timerId = window.setTimeout(() => setCanRender(true), delayMs);\n\t\t\t\t\treturn () => window.clearTimeout(timerId);\n\t\t\t\t}\n\t\t\t}, [delayMs]);\n\n\t\t\tconst initials = React.useMemo(() => {\n\t\t\t\tif (name) {\n\t\t\t\t\treturn getInitials(name);\n\t\t\t\t}\n\t\t\t\treturn \"\";\n\t\t\t}, [name]);\n\n\t\t\tconst state: FallbackState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t\tinitials,\n\t\t\t};\n\n\t\t\tconst shouldRender =\n\t\t\t\tcanRender &&\n\t\t\t\timageLoadingStatus !== \"loaded\" &&\n\t\t\t\timageLoadingStatus !== \"loading\";\n\n\t\t\tconst content = children || initials;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tasChild,\n\t\t\t\t\tclassName,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate,\n\t\t\t\t\tenabled: shouldRender,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"AvatarFallback\";\n\treturn Component;\n})();\n"],"mappings":";;;;;AAoBA,MAAM,eAAe,SAAyB;CAC7C,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,IAAI;AACpC,KAAI,MAAM,WAAW,EACpB,QAAO;AAGR,KAAI,MAAM,WAAW,EACpB,QAAO,MAAM,IAAI,OAAO,EAAE,CAAC,aAAa,IAAI;AAM7C,UAHqB,MAAM,IAAI,OAAO,EAAE,IAAI,OACxB,MAAM,GAAG,GAAG,EAAE,OAAO,EAAE,IAAI,KAEX,aAAa;;;;;;AAOlD,MAAa,wBAAwB;CACpC,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,OAAO,IACP,UAAU,GACV,WACA,UAAU,OACV,GAAG,SAEJ,QACI;EACJ,MAAM,EAAE,uBAAuB,kBAAkB;EACjD,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,YAAY,EAAE;AAE/D,UAAM,gBAAgB;AACrB,OAAI,UAAU,GAAG;IAChB,MAAM,UAAU,OAAO,iBAAiB,aAAa,KAAK,EAAE,QAAQ;AACpE,iBAAa,OAAO,aAAa,QAAQ;;KAExC,CAAC,QAAQ,CAAC;EAEb,MAAM,WAAWA,QAAM,cAAc;AACpC,OAAI,KACH,QAAO,YAAY,KAAK;AAEzB,UAAO;KACL,CAAC,KAAK,CAAC;EAEV,MAAMC,QAAuB;GAC5B;GACA;GACA;EAED,MAAM,eACL,aACA,uBAAuB,YACvB,uBAAuB;EAExB,MAAM,UAAU,YAAY;AAE5B,SAAO,iBACN,QACA;GACC;GACA;GACA,EACD;GACC;GACA;GACA,SAAS;GACT,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/avatar/image.d.ts

@@ -15,7 +15,7 @@ type AvatarImageProps = Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, "src"
  * Controlled `<img>` that syncs its loading status back to the avatar context
  * so fallbacks know when to display.
  */
-declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt"> & {
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, "alt" | "src"> & {
   src: string;
   alt?: string;
   asChild?: boolean;

package/primitives/avatar/image.js

@@ -8,7 +8,7 @@ import * as React$1 from "react";
 * so fallbacks know when to display.
 */
 const AvatarImage = (() => {
-	const Component = React$1.forwardRef(({ src, alt = "", className, asChild = false, onLoadingStatusChange,...props }, ref) => {
+	const Component = React$1.forwardRef(({ src, alt = "", className, asChild = false, onLoadingStatusChange, ...props }, ref) => {
 		const { imageLoadingStatus, onImageLoadingStatusChange } = useAvatarContext();
 		const imageRef = React$1.useRef(null);
 		React$1.useImperativeHandle(ref, () => imageRef.current);

package/primitives/avatar/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","names":["React"],"sources":["../../../src/primitives/avatar/image.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { useAvatarContext } from \"./avatar\";\n\ntype ImageState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n};\n\nexport type AvatarImageProps = Omit<\n\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\"src\" | \"alt\"\n> & {\n\tsrc: string;\n\talt?: string;\n\tasChild?: boolean;\n\tclassName?: string;\n\tonLoadingStatusChange?: (status: ImageState[\"imageLoadingStatus\"]) => void;\n};\n\n/**\n * Controlled `<img>` that syncs its loading status back to the avatar context\n * so fallbacks know when to display.\n */\nexport const AvatarImage = (() => {\n\tconst Component = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tsrc,\n\t\t\t\talt = \"\",\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tonLoadingStatusChange,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { imageLoadingStatus, onImageLoadingStatusChange } =\n\t\t\t\tuseAvatarContext();\n\n\t\t\tconst imageRef = React.useRef<HTMLImageElement>(null);\n\t\t\t// biome-ignore lint/style/noNonNullAssertion: ok\n\t\t\tReact.useImperativeHandle(ref, () => imageRef.current!);\n\n\t\t\tconst updateImageLoadingStatus = React.useCallback(\n\t\t\t\t(status: ImageState[\"imageLoadingStatus\"]) => {\n\t\t\t\t\tonImageLoadingStatusChange(status);\n\t\t\t\t\tonLoadingStatusChange?.(status);\n\t\t\t\t},\n\t\t\t\t[onImageLoadingStatusChange, onLoadingStatusChange]\n\t\t\t);\n\n\t\t\tReact.useLayoutEffect(() => {\n\t\t\t\tif (!src) {\n\t\t\t\t\tupdateImageLoadingStatus(\"error\");\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet isMounted = true;\n\t\t\t\tconst image = new Image();\n\n\t\t\t\tconst updateStatus = (status: ImageState[\"imageLoadingStatus\"]) => {\n\t\t\t\t\tif (!isMounted) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tupdateImageLoadingStatus(status);\n\t\t\t\t};\n\n\t\t\t\tupdateStatus(\"loading\");\n\n\t\t\t\timage.onload = () => updateStatus(\"loaded\");\n\t\t\t\timage.onerror = () => updateStatus(\"error\");\n\t\t\t\timage.src = src;\n\n\t\t\t\treturn () => {\n\t\t\t\t\tisMounted = false;\n\t\t\t\t};\n\t\t\t}, [src, updateImageLoadingStatus]);\n\n\t\t\tconst state: ImageState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t};\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"img\",\n\t\t\t\t{\n\t\t\t\t\tasChild,\n\t\t\t\t\tclassName,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: imageRef,\n\t\t\t\t\tstate,\n\t\t\t\t\tenabled: imageLoadingStatus === \"loaded\",\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tsrc,\n\t\t\t\t\t\talt,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"AvatarImage\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;AAuBA,MAAa,qBAAqB;CACjC,MAAM,YAAYA,QAAM,YAEtB,EACC,KACA,MAAM,IACN,WACA,UAAU,OACV,sBACA,GAAG,SAEJ,QACI;EACJ,MAAM,EAAE,oBAAoB,+BAC3B,kBAAkB;EAEnB,MAAM,WAAWA,QAAM,OAAyB,KAAK;AAErD,UAAM,oBAAoB,WAAW,SAAS,QAAS;EAEvD,MAAM,2BAA2BA,QAAM,aACrC,WAA6C;AAC7C,8BAA2B,OAAO;AAClC,2BAAwB,OAAO;KAEhC,CAAC,4BAA4B,sBAAsB,CACnD;AAED,UAAM,sBAAsB;AAC3B,OAAI,CAAC,KAAK;AACT,6BAAyB,QAAQ;AACjC;;GAGD,IAAI,YAAY;GAChB,MAAM,QAAQ,IAAI,OAAO;GAEzB,MAAM,gBAAgB,WAA6C;AAClE,QAAI,CAAC,UACJ;AAED,6BAAyB,OAAO;;AAGjC,gBAAa,UAAU;AAEvB,SAAM,eAAe,aAAa,SAAS;AAC3C,SAAM,gBAAgB,aAAa,QAAQ;AAC3C,SAAM,MAAM;AAEZ,gBAAa;AACZ,gBAAY;;KAEX,CAAC,KAAK,yBAAyB,CAAC;AAMnC,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC,KAAK;GACL,OAZwB,EACzB,oBACA;GAWC,SAAS,uBAAuB;GAChC,OAAO;IACN,GAAG;IACH;IACA;IACA;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
+{"version":3,"file":"image.js","names":["React"],"sources":["../../../src/primitives/avatar/image.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { useAvatarContext } from \"./avatar\";\n\ntype ImageState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n};\n\nexport type AvatarImageProps = Omit<\n\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\"src\" | \"alt\"\n> & {\n\tsrc: string;\n\talt?: string;\n\tasChild?: boolean;\n\tclassName?: string;\n\tonLoadingStatusChange?: (status: ImageState[\"imageLoadingStatus\"]) => void;\n};\n\n/**\n * Controlled `<img>` that syncs its loading status back to the avatar context\n * so fallbacks know when to display.\n */\nexport const AvatarImage = (() => {\n\tconst Component = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tsrc,\n\t\t\t\talt = \"\",\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tonLoadingStatusChange,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { imageLoadingStatus, onImageLoadingStatusChange } =\n\t\t\t\tuseAvatarContext();\n\n\t\t\tconst imageRef = React.useRef<HTMLImageElement>(null);\n\t\t\t// biome-ignore lint/style/noNonNullAssertion: ok\n\t\t\tReact.useImperativeHandle(ref, () => imageRef.current!);\n\n\t\t\tconst updateImageLoadingStatus = React.useCallback(\n\t\t\t\t(status: ImageState[\"imageLoadingStatus\"]) => {\n\t\t\t\t\tonImageLoadingStatusChange(status);\n\t\t\t\t\tonLoadingStatusChange?.(status);\n\t\t\t\t},\n\t\t\t\t[onImageLoadingStatusChange, onLoadingStatusChange]\n\t\t\t);\n\n\t\t\tReact.useLayoutEffect(() => {\n\t\t\t\tif (!src) {\n\t\t\t\t\tupdateImageLoadingStatus(\"error\");\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet isMounted = true;\n\t\t\t\tconst image = new Image();\n\n\t\t\t\tconst updateStatus = (status: ImageState[\"imageLoadingStatus\"]) => {\n\t\t\t\t\tif (!isMounted) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tupdateImageLoadingStatus(status);\n\t\t\t\t};\n\n\t\t\t\tupdateStatus(\"loading\");\n\n\t\t\t\timage.onload = () => updateStatus(\"loaded\");\n\t\t\t\timage.onerror = () => updateStatus(\"error\");\n\t\t\t\timage.src = src;\n\n\t\t\t\treturn () => {\n\t\t\t\t\tisMounted = false;\n\t\t\t\t};\n\t\t\t}, [src, updateImageLoadingStatus]);\n\n\t\t\tconst state: ImageState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t};\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"img\",\n\t\t\t\t{\n\t\t\t\t\tasChild,\n\t\t\t\t\tclassName,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: imageRef,\n\t\t\t\t\tstate,\n\t\t\t\t\tenabled: imageLoadingStatus === \"loaded\",\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tsrc,\n\t\t\t\t\t\talt,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"AvatarImage\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;AAuBA,MAAa,qBAAqB;CACjC,MAAM,YAAYA,QAAM,YAEtB,EACC,KACA,MAAM,IACN,WACA,UAAU,OACV,uBACA,GAAG,SAEJ,QACI;EACJ,MAAM,EAAE,oBAAoB,+BAC3B,kBAAkB;EAEnB,MAAM,WAAWA,QAAM,OAAyB,KAAK;AAErD,UAAM,oBAAoB,WAAW,SAAS,QAAS;EAEvD,MAAM,2BAA2BA,QAAM,aACrC,WAA6C;AAC7C,8BAA2B,OAAO;AAClC,2BAAwB,OAAO;KAEhC,CAAC,4BAA4B,sBAAsB,CACnD;AAED,UAAM,sBAAsB;AAC3B,OAAI,CAAC,KAAK;AACT,6BAAyB,QAAQ;AACjC;;GAGD,IAAI,YAAY;GAChB,MAAM,QAAQ,IAAI,OAAO;GAEzB,MAAM,gBAAgB,WAA6C;AAClE,QAAI,CAAC,UACJ;AAED,6BAAyB,OAAO;;AAGjC,gBAAa,UAAU;AAEvB,SAAM,eAAe,aAAa,SAAS;AAC3C,SAAM,gBAAgB,aAAa,QAAQ;AAC3C,SAAM,MAAM;AAEZ,gBAAa;AACZ,gBAAY;;KAEX,CAAC,KAAK,yBAAyB,CAAC;AAMnC,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC,KAAK;GACL,OAZwB,EACzB,oBACA;GAWC,SAAS,uBAAuB;GAChC,OAAO;IACN,GAAG;IACH;IACA;IACA;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/button.js

@@ -8,7 +8,7 @@ import * as React$1 from "react";
 * semantics.
 */
 const Button = (() => {
-	const Component = React$1.forwardRef(({ className, asChild = false,...props }, ref) => useRenderElement("button", {
+	const Component = React$1.forwardRef(({ className, asChild = false, ...props }, ref) => useRenderElement("button", {
 		className,
 		asChild
 	}, {

package/primitives/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["React"],"sources":["../../src/primitives/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Thin wrapper over a `<button>` that supports `asChild` composition so the\n * primitives can be slotted into external design systems without losing\n * semantics.\n */\nexport const Button = (() => {\n\tconst Component = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t\t({ className, asChild = false, ...props }, ref) =>\n\t\t\tuseRenderElement(\n\t\t\t\t\"button\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\ttype: \"button\",\n\t\t\t\t\t\t...props,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t)\n\t);\n\n\tComponent.displayName = \"Button\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;AAaA,MAAa,gBAAgB;CAC5B,MAAM,YAAYA,QAAM,YACtB,EAAE,WAAW,UAAU,MAAO,GAAG,SAAS,QAC1C,iBACC,UACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,GAAG;GACH;EACD,CACD,CACF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
+{"version":3,"file":"button.js","names":["React"],"sources":["../../src/primitives/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Thin wrapper over a `<button>` that supports `asChild` composition so the\n * primitives can be slotted into external design systems without losing\n * semantics.\n */\nexport const Button = (() => {\n\tconst Component = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t\t({ className, asChild = false, ...props }, ref) =>\n\t\t\tuseRenderElement(\n\t\t\t\t\"button\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\ttype: \"button\",\n\t\t\t\t\t\t...props,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t)\n\t);\n\n\tComponent.displayName = \"Button\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;AAaA,MAAa,gBAAgB;CAC5B,MAAM,YAAYA,QAAM,YACtB,EAAE,WAAW,UAAU,OAAO,GAAG,SAAS,QAC1C,iBACC,UACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,GAAG;GACH;EACD,CACD,CACF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/conversation-timeline.d.ts

@@ -1,4 +1,4 @@
-import { TimelineItem } from "../timeline-item.js";
+import { TimelineItem } from "../packages/types/src/api/timeline-item.js";
 import * as React$1 from "react";
 
 //#region src/primitives/conversation-timeline.d.ts

package/primitives/conversation-timeline.js

@@ -18,7 +18,7 @@ function getLastItemKey(items) {
 * pagination callbacks for displaying timeline items (messages, events, etc.).
 */
 const ConversationTimeline = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, items = [], isLoading = false, hasMore = false, autoScroll = true, onScrollEnd, onScrollStart,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, items = [], isLoading = false, hasMore = false, autoScroll = true, onScrollEnd, onScrollStart, ...props }, ref) => {
 		const internalRef = React$1.useRef(null);
 		const { ref: scrollMaskRef, style: scrollMaskStyle } = useScrollMask({
 			maskHeight: "54px",
@@ -108,7 +108,7 @@ const ConversationTimeline = (() => {
 * padding, backgrounds or transitions without touching the core timeline logic.
 */
 const ConversationTimelineContainer = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => useRenderElement("div", {
 		className,
 		asChild
 	}, {
@@ -126,7 +126,7 @@ const ConversationTimelineContainer = (() => {
 * skeletons or shimmer states without reimplementing ARIA wiring.
 */
 const ConversationTimelineLoading = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => useRenderElement("div", {
 		className,
 		asChild
 	}, {
@@ -146,7 +146,7 @@ const ConversationTimelineLoading = (() => {
 * region so screen readers announce the empty state.
 */
 const ConversationTimelineEmpty = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => useRenderElement("div", {
 		className,
 		asChild
 	}, {

package/primitives/conversation-timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-timeline.js","names":["React","renderProps: ConversationTimelineRenderProps"],"sources":["../../src/primitives/conversation-timeline.tsx"],"sourcesContent":["import type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useScrollMask } from \"../hooks/use-scroll-mask\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * High-level state of the timeline handed to render-prop children so they can show\n * skeletons, empty states or pagination affordances.\n */\nexport type ConversationTimelineRenderProps = {\n\titemCount: number;\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tisEmpty: boolean;\n};\n\nexport type ConversationTimelineProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: ConversationTimelineRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems?: TimelineItemType[];\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tautoScroll?: boolean;\n\tonScrollEnd?: () => void;\n\tonScrollStart?: () => void;\n};\n\nconst BOTTOM_THRESHOLD_PX = 12;\nconst TOP_THRESHOLD_PX = 2;\n/** Grace period after mount where all scrolls are instant (avoids animation on first render) */\nconst INITIAL_SCROLL_GRACE_MS = 300;\n\nfunction getLastItemKey(items: TimelineItemType[]): string | number | null {\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst lastItem = items.at(-1);\n\n\tif (lastItem?.id) {\n\t\treturn lastItem.id;\n\t}\n\n\treturn lastItem?.createdAt ?? null;\n}\n\n/**\n * Scrollable conversation timeline that wires auto-scroll behaviour, live-region semantics and\n * pagination callbacks for displaying timeline items (messages, events, etc.).\n */\nexport const ConversationTimeline = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, ConversationTimelineProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tisLoading = false,\n\t\t\t\thasMore = false,\n\t\t\t\tautoScroll = true,\n\t\t\t\tonScrollEnd,\n\t\t\t\tonScrollStart,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst internalRef = React.useRef<HTMLDivElement>(null);\n\t\t\tconst { ref: scrollMaskRef, style: scrollMaskStyle } = useScrollMask({\n\t\t\t\tmaskHeight: \"54px\",\n\t\t\t\tscrollbarWidth: \"8px\",\n\t\t\t\ttopThreshold: TOP_THRESHOLD_PX,\n\t\t\t\tbottomThreshold: BOTTOM_THRESHOLD_PX,\n\t\t\t});\n\n\t\t\tconst setRefs = React.useCallback(\n\t\t\t\t(node: HTMLDivElement | null) => {\n\t\t\t\t\tinternalRef.current = node;\n\t\t\t\t\t(\n\t\t\t\t\t\tscrollMaskRef as React.MutableRefObject<HTMLDivElement | null>\n\t\t\t\t\t).current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\t(ref as React.MutableRefObject<HTMLDivElement | null>).current =\n\t\t\t\t\t\t\tnode;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t[ref, scrollMaskRef]\n\t\t\t);\n\n\t\t\t// Track mount time for grace period (instant scroll during initial load)\n\t\t\tconst mountTimeRef = React.useRef(Date.now());\n\t\t\tconst previousItemCount = React.useRef(items.length);\n\t\t\tconst previousLastItemKey = React.useRef<string | number | null>(\n\t\t\t\tgetLastItemKey(items)\n\t\t\t);\n\t\t\tconst isPinnedToBottom = React.useRef(true);\n\t\t\tconst isAtTop = React.useRef(true);\n\n\t\t\tconst renderProps: ConversationTimelineRenderProps = {\n\t\t\t\titemCount: items.length,\n\t\t\t\tisLoading,\n\t\t\t\thasMore,\n\t\t\t\tisEmpty: items.length === 0,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\tconst lastItemKey = getLastItemKey(items);\n\n\t\t\t// Auto-scroll to bottom when new timeline items are added\n\t\t\tReact.useEffect(() => {\n\t\t\t\tconst element = internalRef.current;\n\n\t\t\t\tif (!(element && autoScroll)) {\n\t\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\t\tpreviousLastItemKey.current = lastItemKey;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst hasNewItems = items.length > previousItemCount.current;\n\t\t\t\tconst itemsRemoved = items.length < previousItemCount.current;\n\t\t\t\tconst appendedNewItem =\n\t\t\t\t\thasNewItems &&\n\t\t\t\t\tlastItemKey !== null &&\n\t\t\t\t\tlastItemKey !== previousLastItemKey.current;\n\t\t\t\tconst replacedLastItem =\n\t\t\t\t\t!hasNewItems &&\n\t\t\t\t\tlastItemKey !== null &&\n\t\t\t\t\tlastItemKey !== previousLastItemKey.current;\n\n\t\t\t\tconst isWithinGracePeriod =\n\t\t\t\t\tDate.now() - mountTimeRef.current < INITIAL_SCROLL_GRACE_MS;\n\n\t\t\t\tconst shouldSnapToBottom =\n\t\t\t\t\tisWithinGracePeriod ||\n\t\t\t\t\t(itemsRemoved && isPinnedToBottom.current) ||\n\t\t\t\t\t(appendedNewItem && isPinnedToBottom.current) ||\n\t\t\t\t\t(replacedLastItem && isPinnedToBottom.current);\n\n\t\t\t\tif (shouldSnapToBottom) {\n\t\t\t\t\t// Instant scroll during grace period, smooth scroll after\n\t\t\t\t\tif (isWithinGracePeriod) {\n\t\t\t\t\t\telement.scrollTop = element.scrollHeight;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.scrollTo({ top: element.scrollHeight, behavior: \"smooth\" });\n\t\t\t\t\t}\n\t\t\t\t\tisPinnedToBottom.current = true;\n\t\t\t\t\tisAtTop.current = false;\n\t\t\t\t}\n\n\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\tpreviousLastItemKey.current = lastItemKey;\n\t\t\t}, [autoScroll, items.length, lastItemKey]);\n\n\t\t\t// Handle scroll events for infinite scrolling\n\t\t\tconst handleScroll = React.useCallback(\n\t\t\t\t(e: React.UIEvent<HTMLDivElement>) => {\n\t\t\t\t\tconst element = e.currentTarget;\n\t\t\t\t\tconst { scrollTop, scrollHeight, clientHeight } = element;\n\n\t\t\t\t\tconst distanceFromBottom = scrollHeight - scrollTop - clientHeight;\n\t\t\t\t\tconst pinnedNow = distanceFromBottom <= BOTTOM_THRESHOLD_PX;\n\t\t\t\t\tif (pinnedNow && !isPinnedToBottom.current) {\n\t\t\t\t\t\tonScrollEnd?.();\n\t\t\t\t\t}\n\t\t\t\t\tisPinnedToBottom.current = pinnedNow;\n\n\t\t\t\t\tconst atTop = scrollTop <= TOP_THRESHOLD_PX;\n\t\t\t\t\tif (atTop && !isAtTop.current) {\n\t\t\t\t\t\tonScrollStart?.();\n\t\t\t\t\t}\n\t\t\t\t\tisAtTop.current = atTop;\n\t\t\t\t},\n\t\t\t\t[onScrollStart, onScrollEnd]\n\t\t\t);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: setRefs,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"log\",\n\t\t\t\t\t\t\"aria-label\": \"Conversation timeline\",\n\t\t\t\t\t\t\"aria-live\": \"polite\",\n\t\t\t\t\t\t\"aria-relevant\": \"additions\",\n\t\t\t\t\t\tonScroll: handleScroll,\n\t\t\t\t\t\tstyle: scrollMaskStyle,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"ConversationTimeline\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineContainerProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Wrapper around the scrollable timeline giving consumers an easy hook to add\n * padding, backgrounds or transitions without touching the core timeline logic.\n */\nexport const ConversationTimelineContainer = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineContainerProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineContainer\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineLoadingProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Accessible status region for loading more timeline items. Lets host apps render\n * skeletons or shimmer states without reimplementing ARIA wiring.\n */\nexport const ConversationTimelineLoading = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineLoadingProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"Loading timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineLoading\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineEmptyProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Placeholder state rendered when no timeline items are present. Uses a polite status\n * region so screen readers announce the empty state.\n */\nexport const ConversationTimelineEmpty = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineEmptyProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"No timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineEmpty\";\n\treturn Component;\n})();\n"],"mappings":"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"}
+{"version":3,"file":"conversation-timeline.js","names":["React","renderProps: ConversationTimelineRenderProps"],"sources":["../../src/primitives/conversation-timeline.tsx"],"sourcesContent":["import type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useScrollMask } from \"../hooks/use-scroll-mask\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * High-level state of the timeline handed to render-prop children so they can show\n * skeletons, empty states or pagination affordances.\n */\nexport type ConversationTimelineRenderProps = {\n\titemCount: number;\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tisEmpty: boolean;\n};\n\nexport type ConversationTimelineProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: ConversationTimelineRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems?: TimelineItemType[];\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tautoScroll?: boolean;\n\tonScrollEnd?: () => void;\n\tonScrollStart?: () => void;\n};\n\nconst BOTTOM_THRESHOLD_PX = 12;\nconst TOP_THRESHOLD_PX = 2;\n/** Grace period after mount where all scrolls are instant (avoids animation on first render) */\nconst INITIAL_SCROLL_GRACE_MS = 300;\n\nfunction getLastItemKey(items: TimelineItemType[]): string | number | null {\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst lastItem = items.at(-1);\n\n\tif (lastItem?.id) {\n\t\treturn lastItem.id;\n\t}\n\n\treturn lastItem?.createdAt ?? null;\n}\n\n/**\n * Scrollable conversation timeline that wires auto-scroll behaviour, live-region semantics and\n * pagination callbacks for displaying timeline items (messages, events, etc.).\n */\nexport const ConversationTimeline = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, ConversationTimelineProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tisLoading = false,\n\t\t\t\thasMore = false,\n\t\t\t\tautoScroll = true,\n\t\t\t\tonScrollEnd,\n\t\t\t\tonScrollStart,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst internalRef = React.useRef<HTMLDivElement>(null);\n\t\t\tconst { ref: scrollMaskRef, style: scrollMaskStyle } = useScrollMask({\n\t\t\t\tmaskHeight: \"54px\",\n\t\t\t\tscrollbarWidth: \"8px\",\n\t\t\t\ttopThreshold: TOP_THRESHOLD_PX,\n\t\t\t\tbottomThreshold: BOTTOM_THRESHOLD_PX,\n\t\t\t});\n\n\t\t\tconst setRefs = React.useCallback(\n\t\t\t\t(node: HTMLDivElement | null) => {\n\t\t\t\t\tinternalRef.current = node;\n\t\t\t\t\t(\n\t\t\t\t\t\tscrollMaskRef as React.MutableRefObject<HTMLDivElement | null>\n\t\t\t\t\t).current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\t(ref as React.MutableRefObject<HTMLDivElement | null>).current =\n\t\t\t\t\t\t\tnode;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t[ref, scrollMaskRef]\n\t\t\t);\n\n\t\t\t// Track mount time for grace period (instant scroll during initial load)\n\t\t\tconst mountTimeRef = React.useRef(Date.now());\n\t\t\tconst previousItemCount = React.useRef(items.length);\n\t\t\tconst previousLastItemKey = React.useRef<string | number | null>(\n\t\t\t\tgetLastItemKey(items)\n\t\t\t);\n\t\t\tconst isPinnedToBottom = React.useRef(true);\n\t\t\tconst isAtTop = React.useRef(true);\n\n\t\t\tconst renderProps: ConversationTimelineRenderProps = {\n\t\t\t\titemCount: items.length,\n\t\t\t\tisLoading,\n\t\t\t\thasMore,\n\t\t\t\tisEmpty: items.length === 0,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\tconst lastItemKey = getLastItemKey(items);\n\n\t\t\t// Auto-scroll to bottom when new timeline items are added\n\t\t\tReact.useEffect(() => {\n\t\t\t\tconst element = internalRef.current;\n\n\t\t\t\tif (!(element && autoScroll)) {\n\t\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\t\tpreviousLastItemKey.current = lastItemKey;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst hasNewItems = items.length > previousItemCount.current;\n\t\t\t\tconst itemsRemoved = items.length < previousItemCount.current;\n\t\t\t\tconst appendedNewItem =\n\t\t\t\t\thasNewItems &&\n\t\t\t\t\tlastItemKey !== null &&\n\t\t\t\t\tlastItemKey !== previousLastItemKey.current;\n\t\t\t\tconst replacedLastItem =\n\t\t\t\t\t!hasNewItems &&\n\t\t\t\t\tlastItemKey !== null &&\n\t\t\t\t\tlastItemKey !== previousLastItemKey.current;\n\n\t\t\t\tconst isWithinGracePeriod =\n\t\t\t\t\tDate.now() - mountTimeRef.current < INITIAL_SCROLL_GRACE_MS;\n\n\t\t\t\tconst shouldSnapToBottom =\n\t\t\t\t\tisWithinGracePeriod ||\n\t\t\t\t\t(itemsRemoved && isPinnedToBottom.current) ||\n\t\t\t\t\t(appendedNewItem && isPinnedToBottom.current) ||\n\t\t\t\t\t(replacedLastItem && isPinnedToBottom.current);\n\n\t\t\t\tif (shouldSnapToBottom) {\n\t\t\t\t\t// Instant scroll during grace period, smooth scroll after\n\t\t\t\t\tif (isWithinGracePeriod) {\n\t\t\t\t\t\telement.scrollTop = element.scrollHeight;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.scrollTo({ top: element.scrollHeight, behavior: \"smooth\" });\n\t\t\t\t\t}\n\t\t\t\t\tisPinnedToBottom.current = true;\n\t\t\t\t\tisAtTop.current = false;\n\t\t\t\t}\n\n\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\tpreviousLastItemKey.current = lastItemKey;\n\t\t\t}, [autoScroll, items.length, lastItemKey]);\n\n\t\t\t// Handle scroll events for infinite scrolling\n\t\t\tconst handleScroll = React.useCallback(\n\t\t\t\t(e: React.UIEvent<HTMLDivElement>) => {\n\t\t\t\t\tconst element = e.currentTarget;\n\t\t\t\t\tconst { scrollTop, scrollHeight, clientHeight } = element;\n\n\t\t\t\t\tconst distanceFromBottom = scrollHeight - scrollTop - clientHeight;\n\t\t\t\t\tconst pinnedNow = distanceFromBottom <= BOTTOM_THRESHOLD_PX;\n\t\t\t\t\tif (pinnedNow && !isPinnedToBottom.current) {\n\t\t\t\t\t\tonScrollEnd?.();\n\t\t\t\t\t}\n\t\t\t\t\tisPinnedToBottom.current = pinnedNow;\n\n\t\t\t\t\tconst atTop = scrollTop <= TOP_THRESHOLD_PX;\n\t\t\t\t\tif (atTop && !isAtTop.current) {\n\t\t\t\t\t\tonScrollStart?.();\n\t\t\t\t\t}\n\t\t\t\t\tisAtTop.current = atTop;\n\t\t\t\t},\n\t\t\t\t[onScrollStart, onScrollEnd]\n\t\t\t);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: setRefs,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"log\",\n\t\t\t\t\t\t\"aria-label\": \"Conversation timeline\",\n\t\t\t\t\t\t\"aria-live\": \"polite\",\n\t\t\t\t\t\t\"aria-relevant\": \"additions\",\n\t\t\t\t\t\tonScroll: handleScroll,\n\t\t\t\t\t\tstyle: scrollMaskStyle,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"ConversationTimeline\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineContainerProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Wrapper around the scrollable timeline giving consumers an easy hook to add\n * padding, backgrounds or transitions without touching the core timeline logic.\n */\nexport const ConversationTimelineContainer = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineContainerProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineContainer\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineLoadingProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Accessible status region for loading more timeline items. Lets host apps render\n * skeletons or shimmer states without reimplementing ARIA wiring.\n */\nexport const ConversationTimelineLoading = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineLoadingProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"Loading timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineLoading\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineEmptyProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Placeholder state rendered when no timeline items are present. Uses a polite status\n * region so screen readers announce the empty state.\n */\nexport const ConversationTimelineEmpty = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineEmptyProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"No timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineEmpty\";\n\treturn Component;\n})();\n"],"mappings":"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"}

package/primitives/day-separator.d.ts

@@ -0,0 +1,76 @@
+import * as React$1 from "react";
+
+//#region src/primitives/day-separator.d.ts
+
+/**
+ * Default date formatter that returns "Today", "Yesterday", or a full date string
+ */
+declare const defaultFormatDate: (date: Date) => string;
+/**
+ * Shape returned to render-prop children describing the day separator state
+ */
+type DaySeparatorRenderProps = {
+  date: Date;
+  dateString: string;
+  formattedDate: string;
+  isToday: boolean;
+  isYesterday: boolean;
+};
+type DaySeparatorProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: DaySeparatorRenderProps) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  date: Date;
+  dateString: string;
+  formatDate?: (date: Date) => string;
+};
+/**
+ * Headless day separator component that marks the boundary between different days
+ * in a conversation timeline. Consumers can either render their own layout via
+ * a render prop or rely on slotted children.
+ */
+declare const DaySeparator: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: DaySeparatorRenderProps) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  date: Date;
+  dateString: string;
+  formatDate?: (date: Date) => string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type DaySeparatorLineProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+};
+/**
+ * Decorative line element for the day separator.
+ * Typically rendered on either side of the label.
+ */
+declare const DaySeparatorLine: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type DaySeparatorLabelProps = Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: {
+    formattedDate: string;
+  }) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  formattedDate?: string;
+};
+/**
+ * Text label element for the day separator.
+ * Displays the formatted date string.
+ */
+declare const DaySeparatorLabel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: {
+    formattedDate: string;
+  }) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  formattedDate?: string;
+} & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { DaySeparator, DaySeparatorLabel, DaySeparatorLabelProps, DaySeparatorLine, DaySeparatorLineProps, DaySeparatorProps, DaySeparatorRenderProps, defaultFormatDate };
+//# sourceMappingURL=day-separator.d.ts.map

package/primitives/day-separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-separator.d.ts","names":[],"sources":["../../src/primitives/day-separator.tsx"],"sourcesContent":[],"mappings":";;;;;;AA4BA;AAoBY,cApBC,iBAoBsB,EAAA,CAAA,IAC5B,EArBiC,IAqB7B,EAAA,GAAA,MAAA;AAOX;;;AAAgC,KARpB,uBAAA,GAQoB;EAK5B,IAAA,EAZG,IAYG;EACG,UAAA,EAAA,MAAA;EAA4B,aAAM,EAAA,MAAA;EAGxC,OAAA,EAAA,OAAA;EAEc,WAAA,EAAA,OAAA;CAAI;AAQZ,KAnBD,iBAAA,GAAoB,IAsE5B,CArEH,OAAA,CAAM,cAqEH,CArEkB,cAqElB,CAAA,EAAA,UAAA,CAAA,GAAA;EAnDqB,QAAA,CAAA,EAdrB,OAAA,CAAM,SAce,GAAA,CAAA,CAAA,KAAA,EAbZ,uBAaY,EAAA,GAbgB,OAAA,CAAM,SAatB,CAAA;EAAA,OAAA,CAAA,EAAA,OAAA;EAAA,SAAA,CAAA,EAAA,MAAA;EAdrB,IAAA,EAIG,IAJG;EACG,UAAA,EAAA,MAAA;EAA4B,UAAM,CAAA,EAAA,CAAA,IAAA,EAK1B,IAL0B,EAAA,GAAA,MAAA;CAGxC;;;;;;AA+DK,cArDC,YAqDoB,EArDR,OAAA,CAAA,yBAqDQ,CArDR,IAqDQ,CArDR,OAAA,CAAA,cAqDQ,CArDR,cAqDQ,CAAA,EAAA,UAAA,CAAA,GAAA;EACX,QAAA,CAAA,EApElB,OAAA,CAAM,SAoEY,GAAA,CAAA,CAAA,KAAA,EAnET,uBAmES,EAAA,GAnEmB,OAAA,CAAM,SAmEzB,CAAA;EAArB,OAAM,CAAA,EAAA,OAAA;EAD6B,SAAA,CAAA,EAAA,MAAA;EAIxB,IAAA,EAnEL,IAmEW;EAAS,UAAA,EAAA,MAAA;EASd,UAAA,CAAA,EAAA,CAAA,IAAA,EA1EQ,IAgGjB,EAAA,GAAA,MAAA;CAtByB,wBAAA,eAAA,CAAA,CAAA;AAAA,KAbjB,qBAAA,GAAwB,IAaP,CAZ5B,OAAA,CAAM,cAYsB,CAZP,cAYO,CAAA,EAAA,UAAA,CAAA,GAAA;EAAA,QAAA,CAAA,EATjB,OAAA,CAAM,SASW;EATjB,OAAM,CAAA,EAAA,OAAA;;;;;AAiClB;;AACC,cAzBY,gBAyBN,EAzBsB,OAAA,CAAA,yBAyBtB,CAzBsB,IAyBtB,CAzBsB,OAAA,CAAA,cAyBtB,CAzBsB,cAyBtB,CAAA,EAAA,UAAA,CAAA,GAAA;EAD8B,QAAA,CAAA,EAjCzB,OAAA,CAAM,SAiCmB;EAKjC,OAAM,CAAA,EAAA,OAAA;EACiC,SAAM,CAAA,EAAA,MAAA;CAAS,wBAAA,eAAA,CAAA,CAAA;AAU7C,KAhBD,sBAAA,GAAyB,IA8CjC,CA7CH,OAAA,CAAM,cA6CH,CA7CkB,eA6ClB,CAAA,EAAA,UAAA,CAAA,GAAA;EA9B0B,QAAA,CAAA,EAX1B,OAAA,CAAM,SAWoB,GAAA,CAAA,CAAA,KAAA,EAAA;IAAA,aAAA,EAAA,MAAA;EAAA,CAAA,EAAA,GAVa,OAAA,CAAM,SAUnB,CAAA;EAX1B,OAAM,CAAA,EAAA,OAAA;EACiC,SAAM,CAAA,EAAA,MAAA;;;;;;;cAUpC,mBAAiB,OAAA,CAAA,0BAAA,KAAA,OAAA,CAAA,eAAA;aAX1B,OAAA,CAAM;;QACiC,OAAA,CAAM"}

package/primitives/day-separator.js

@@ -0,0 +1,111 @@
+import { useRenderElement } from "../utils/use-render-element.js";
+import * as React$1 from "react";
+
+//#region src/primitives/day-separator.tsx
+/**
+* Helper to check if a date is today
+*/
+const isToday = (date) => {
+	const now = /* @__PURE__ */ new Date();
+	const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() === today.getTime();
+};
+/**
+* Helper to check if a date is yesterday
+*/
+const isYesterday = (date) => {
+	const now = /* @__PURE__ */ new Date();
+	const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+	const yesterday = new Date(today);
+	yesterday.setDate(yesterday.getDate() - 1);
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() === yesterday.getTime();
+};
+/**
+* Default date formatter that returns "Today", "Yesterday", or a full date string
+*/
+const defaultFormatDate = (date) => {
+	if (isToday(date)) return "Today";
+	if (isYesterday(date)) return "Yesterday";
+	return date.toLocaleDateString(void 0, {
+		year: "numeric",
+		month: "long",
+		day: "numeric"
+	});
+};
+/**
+* Headless day separator component that marks the boundary between different days
+* in a conversation timeline. Consumers can either render their own layout via
+* a render prop or rely on slotted children.
+*/
+const DaySeparator = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, date, dateString, formatDate = defaultFormatDate, ...restProps }, ref) => {
+		const formattedDate = formatDate(date);
+		const renderProps = {
+			date,
+			dateString,
+			formattedDate,
+			isToday: isToday(date),
+			isYesterday: isYesterday(date)
+		};
+		const content = typeof children === "function" ? children(renderProps) : children;
+		return useRenderElement("div", {
+			className,
+			asChild
+		}, {
+			ref,
+			state: renderProps,
+			props: {
+				role: "separator",
+				"aria-label": `Day separator: ${formattedDate}`,
+				...restProps,
+				children: content
+			}
+		});
+	});
+	Component.displayName = "DaySeparator";
+	return Component;
+})();
+/**
+* Decorative line element for the day separator.
+* Typically rendered on either side of the label.
+*/
+const DaySeparatorLine = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => useRenderElement("div", {
+		className,
+		asChild
+	}, {
+		ref,
+		props: {
+			"aria-hidden": true,
+			...props,
+			children
+		}
+	}));
+	Component.displayName = "DaySeparatorLine";
+	return Component;
+})();
+/**
+* Text label element for the day separator.
+* Displays the formatted date string.
+*/
+const DaySeparatorLabel = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, formattedDate = "", ...props }, ref) => {
+		const content = typeof children === "function" ? children({ formattedDate }) : children ?? formattedDate;
+		return useRenderElement("span", {
+			className,
+			asChild
+		}, {
+			ref,
+			props: {
+				...props,
+				children: content
+			}
+		});
+	});
+	Component.displayName = "DaySeparatorLabel";
+	return Component;
+})();
+
+//#endregion
+export { DaySeparator, DaySeparatorLabel, DaySeparatorLine, defaultFormatDate };
+//# sourceMappingURL=day-separator.js.map

package/primitives/day-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-separator.js","names":["React","renderProps: DaySeparatorRenderProps"],"sources":["../../src/primitives/day-separator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Helper to check if a date is today\n */\nconst isToday = (date: Date): boolean => {\n\tconst now = new Date();\n\tconst today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n\tconst itemDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n\treturn itemDay.getTime() === today.getTime();\n};\n\n/**\n * Helper to check if a date is yesterday\n */\nconst isYesterday = (date: Date): boolean => {\n\tconst now = new Date();\n\tconst today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n\tconst yesterday = new Date(today);\n\tyesterday.setDate(yesterday.getDate() - 1);\n\tconst itemDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n\treturn itemDay.getTime() === yesterday.getTime();\n};\n\n/**\n * Default date formatter that returns \"Today\", \"Yesterday\", or a full date string\n */\nexport const defaultFormatDate = (date: Date): string => {\n\tif (isToday(date)) {\n\t\treturn \"Today\";\n\t}\n\n\tif (isYesterday(date)) {\n\t\treturn \"Yesterday\";\n\t}\n\n\t// Format as \"January 15, 2024\"\n\treturn date.toLocaleDateString(undefined, {\n\t\tyear: \"numeric\",\n\t\tmonth: \"long\",\n\t\tday: \"numeric\",\n\t});\n};\n\n/**\n * Shape returned to render-prop children describing the day separator state\n */\nexport type DaySeparatorRenderProps = {\n\tdate: Date;\n\tdateString: string;\n\tformattedDate: string;\n\tisToday: boolean;\n\tisYesterday: boolean;\n};\n\nexport type DaySeparatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: DaySeparatorRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tdate: Date;\n\tdateString: string;\n\tformatDate?: (date: Date) => string;\n};\n\n/**\n * Headless day separator component that marks the boundary between different days\n * in a conversation timeline. Consumers can either render their own layout via\n * a render prop or rely on slotted children.\n */\nexport const DaySeparator = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, DaySeparatorProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tdate,\n\t\t\t\tdateString,\n\t\t\t\tformatDate = defaultFormatDate,\n\t\t\t\t...restProps\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst formattedDate = formatDate(date);\n\t\t\tconst isTodayValue = isToday(date);\n\t\t\tconst isYesterdayValue = isYesterday(date);\n\n\t\t\tconst renderProps: DaySeparatorRenderProps = {\n\t\t\t\tdate,\n\t\t\t\tdateString,\n\t\t\t\tformattedDate,\n\t\t\t\tisToday: isTodayValue,\n\t\t\t\tisYesterday: isYesterdayValue,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"separator\",\n\t\t\t\t\t\t\"aria-label\": `Day separator: ${formattedDate}`,\n\t\t\t\t\t\t...restProps,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"DaySeparator\";\n\treturn Component;\n})();\n\nexport type DaySeparatorLineProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Decorative line element for the day separator.\n * Typically rendered on either side of the label.\n */\nexport const DaySeparatorLine = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, DaySeparatorLineProps>(\n\t\t({ children, className, asChild = false, ...props }, ref) =>\n\t\t\tuseRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t\"aria-hidden\": true,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t)\n\t);\n\n\tComponent.displayName = \"DaySeparatorLine\";\n\treturn Component;\n})();\n\nexport type DaySeparatorLabelProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: { formattedDate: string }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tformattedDate?: string;\n};\n\n/**\n * Text label element for the day separator.\n * Displays the formatted date string.\n */\nexport const DaySeparatorLabel = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, DaySeparatorLabelProps>(\n\t\t(\n\t\t\t{ children, className, asChild = false, formattedDate = \"\", ...props },\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ formattedDate })\n\t\t\t\t\t: (children ?? formattedDate);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"DaySeparatorLabel\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;AAMA,MAAM,WAAW,SAAwB;CACxC,MAAM,sBAAM,IAAI,MAAM;CACtB,MAAM,QAAQ,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,IAAI,SAAS,CAAC;AAExE,QADgB,IAAI,KAAK,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,CAAC,CAC9D,SAAS,KAAK,MAAM,SAAS;;;;;AAM7C,MAAM,eAAe,SAAwB;CAC5C,MAAM,sBAAM,IAAI,MAAM;CACtB,MAAM,QAAQ,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,IAAI,SAAS,CAAC;CACxE,MAAM,YAAY,IAAI,KAAK,MAAM;AACjC,WAAU,QAAQ,UAAU,SAAS,GAAG,EAAE;AAE1C,QADgB,IAAI,KAAK,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,CAAC,CAC9D,SAAS,KAAK,UAAU,SAAS;;;;;AAMjD,MAAa,qBAAqB,SAAuB;AACxD,KAAI,QAAQ,KAAK,CAChB,QAAO;AAGR,KAAI,YAAY,KAAK,CACpB,QAAO;AAIR,QAAO,KAAK,mBAAmB,QAAW;EACzC,MAAM;EACN,OAAO;EACP,KAAK;EACL,CAAC;;;;;;;AAiCH,MAAa,sBAAsB;CAClC,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,WACA,UAAU,OACV,MACA,YACA,aAAa,mBACb,GAAG,aAEJ,QACI;EACJ,MAAM,gBAAgB,WAAW,KAAK;EAItC,MAAMC,cAAuC;GAC5C;GACA;GACA;GACA,SAPoB,QAAQ,KAAK;GAQjC,aAPwB,YAAY,KAAK;GAQzC;EAED,MAAM,UACL,OAAO,aAAa,aAAa,SAAS,YAAY,GAAG;AAE1D,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;GACP,OAAO;IACN,MAAM;IACN,cAAc,kBAAkB;IAChC,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,0BAA0B;CACtC,MAAM,YAAYD,QAAM,YACtB,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,SAAS,QACpD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,eAAe;GACf,GAAG;GACH;GACA;EACD,CACD,CACF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAkBJ,MAAa,2BAA2B;CACvC,MAAM,YAAYA,QAAM,YAEtB,EAAE,UAAU,WAAW,UAAU,OAAO,gBAAgB,IAAI,GAAG,SAC/D,QACI;EACJ,MAAM,UACL,OAAO,aAAa,aACjB,SAAS,EAAE,eAAe,CAAC,GAC1B,YAAY;AAEjB,SAAO,iBACN,QACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}