@epilot/spark-ui 0.20.0 → 0.20.2

package/dist/components/marker.cjs

@@ -7,7 +7,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
 let _base_ui_react_use_render = require("@base-ui/react/use-render");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/marker.tsx
 const markerVariants = (0, class_variance_authority.cva)("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray", { variants: { variant: {
 	default: "[&:is(button,a)]:touch-target",
@@ -21,7 +21,7 @@ function Marker({ className, variant = "default", render, ...props }) {
 		props: (0, _base_ui_react_merge_props.mergeProps)({
 			"data-slot": "marker",
 			"data-variant": variant,
-			className: (0, cnfast.cn)(markerVariants({
+			className: (0, cn.cn)(markerVariants({
 				variant,
 				className
 			}))
@@ -32,14 +32,14 @@ function MarkerIcon({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-slot": "marker-icon",
 		"aria-hidden": "true",
-		className: (0, cnfast.cn)("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: (0, cn.cn)("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
 function MarkerContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-slot": "marker-content",
-		className: (0, cnfast.cn)("min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray", className),
+		className: (0, cn.cn)("min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray", className),
 		...props
 	});
 }

package/dist/components/marker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"marker.cjs","names":[],"sources":["../../src/components/marker.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray\",\n  {\n    variants: {\n      variant: {\n        // touch-target only where the marker is actually a control (a `render`\n        // of <button>/<a>) — and never on `separator`, whose flanking rules\n        // already own ::after, the same pseudo-element the utility uses.\n        default: '[&:is(button,a)]:touch-target',\n        separator:\n          'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6',\n        border: 'border-b border-gray pb-2 [&:is(button,a)]:touch-target',\n      },\n    },\n  },\n)\n\n// `render` replaces radix `asChild` — pass an element (e.g. a <button> for a\n// clickable \"jump to\" marker) and Base UI's useRender merges props onto it.\nfunction Marker({\n  className,\n  variant = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'marker',\n        'data-variant': variant,\n        className: cn(markerVariants({ variant, className })),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Marker, MarkerContent, MarkerIcon, markerVariants }\n"],"mappings":";;;;;;;;;;;AAMA,MAAM,kBAAA,GAAA,yBAAA,KACJ,gMACA,EACE,UAAU,EACR,SAAS;CAIP,SAAS;CACT,WACE;CACF,QAAQ;AACV,EACF,EACF,CACF;AAIA,SAAS,OAAO,EACd,WACA,UAAU,WACV,QACA,GAAG,SACqE;CACxE,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE;GACE,aAAa;GACb,gBAAgB;GAChB,YAAA,GAAA,OAAA,IAAc,eAAe;IAAE;IAAS;GAAU,CAAC,CAAC;EACtD,GACA,KACF;CACF,CAAC;AACH;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAuC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,YAAA,GAAA,OAAA,IACE,wDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAuC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"marker.cjs","names":[],"sources":["../../src/components/marker.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray\",\n  {\n    variants: {\n      variant: {\n        // touch-target only where the marker is actually a control (a `render`\n        // of <button>/<a>) — and never on `separator`, whose flanking rules\n        // already own ::after, the same pseudo-element the utility uses.\n        default: '[&:is(button,a)]:touch-target',\n        separator:\n          'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6',\n        border: 'border-b border-gray pb-2 [&:is(button,a)]:touch-target',\n      },\n    },\n  },\n)\n\n// `render` replaces radix `asChild` — pass an element (e.g. a <button> for a\n// clickable \"jump to\" marker) and Base UI's useRender merges props onto it.\nfunction Marker({\n  className,\n  variant = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'marker',\n        'data-variant': variant,\n        className: cn(markerVariants({ variant, className })),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Marker, MarkerContent, MarkerIcon, markerVariants }\n"],"mappings":";;;;;;;;;;;AAMA,MAAM,kBAAA,GAAA,yBAAA,KACJ,gMACA,EACE,UAAU,EACR,SAAS;CAIP,SAAS;CACT,WACE;CACF,QAAQ;AACV,EACF,EACF,CACF;AAIA,SAAS,OAAO,EACd,WACA,UAAU,WACV,QACA,GAAG,SACqE;CACxE,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE;GACE,aAAa;GACb,gBAAgB;GAChB,YAAA,GAAA,GAAA,IAAc,eAAe;IAAE;IAAS;GAAU,CAAC,CAAC;EACtD,GACA,KACF;CACF,CAAC;AACH;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAuC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,YAAA,GAAA,GAAA,IACE,wDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAuC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/marker.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "default" | "separator" | "border" | null | undefined;
+  variant?: "separator" | "default" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/marker.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "default" | "separator" | "border" | null | undefined;
+  variant?: "separator" | "default" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/message-scroller.cjs

@@ -1,17 +1,17 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_components_button = require("./button.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_lib_message_animations = require("../lib/message-animations.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
+const require_components_button = require("./button.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _shadcn_react_message_scroller = require("@shadcn/react/message-scroller");
 let motion_react = require("motion/react");
 let motion_react_m = require("motion/react-m");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/message-scroller.tsx
 const MessageScrollerAnimationReadyContext = react.createContext(false);
 const MotionDiv = (0, motion_react_m.create)("div");
@@ -32,21 +32,21 @@ function MessageScrollerProvider(props) {
 function MessageScroller({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Root, {
 		"data-slot": "message-scroller",
-		className: (0, cnfast.cn)("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className),
+		className: (0, cn.cn)("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className),
 		...props
 	});
 }
 function MessageScrollerViewport({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Viewport, {
 		"data-slot": "message-scroller-viewport",
-		className: (0, cnfast.cn)("size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar", className),
+		className: (0, cn.cn)("size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain [mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--scroll-fade-b)),transparent)] transition-[--scroll-fade-b] duration-200 contain-content [--scroll-fade-b:0px] [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-[scrollable~=end]:[--scroll-fade-b:min(12%,calc(var(--spacing)*10))] motion-reduce:transition-none", className),
 		...props
 	});
 }
 function MessageScrollerContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Content, {
 		"data-slot": "message-scroller-content",
-		className: (0, cnfast.cn)("flex h-max min-h-full flex-col gap-8", className),
+		className: (0, cn.cn)("flex h-max min-h-full flex-col gap-8", className),
 		...props
 	});
 }
@@ -58,7 +58,7 @@ function MessageScrollerItem({ className, scrollAnchor = false, children, ...pro
 		...props,
 		"data-slot": "message-scroller-item",
 		scrollAnchor,
-		className: (0, cnfast.cn)("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
+		className: (0, cn.cn)("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionDiv, {
 			className: "w-full min-w-0",
 			variants: require_lib_message_animations.MESSAGE_ANIMATIONS["slide-up"].variants,
@@ -74,7 +74,7 @@ function MessageScrollerButton({ direction = "end", className, children, render,
 		"data-slot": "message-scroller-button",
 		"data-direction": direction,
 		direction,
-		className: (0, cnfast.cn)("absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2", className),
+		className: (0, cn.cn)("absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2", className),
 		render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
 			styleVariant,
 			color,

package/dist/components/message-scroller.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"message-scroller.cjs","names":["React","LazyMotion","domAnimation","MessageScrollerPrimitive","useReducedMotion","MESSAGE_ANIMATIONS","Button","ArrowDownward","ArrowUpward"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import { ArrowDownward, ArrowUpward } from '@epilot/spark-icons'\nimport {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\nconst MotionDiv = create('div')\n\ntype MessageScrollerItemProps = Omit<\n  React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n  | 'animate'\n  | 'exit'\n  | 'initial'\n  | 'variants'\n  | 'onAnimationStart'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onDragTransitionEnd'\n>\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  const [ready, setReady] = React.useState(false)\n\n  React.useEffect(() => {\n    setReady(true)\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation} strict>\n      <MessageScrollerAnimationReadyContext.Provider value={ready}>\n        <MessageScrollerPrimitive.Provider {...props} />\n      </MessageScrollerAnimationReadyContext.Provider>\n    </LazyMotion>\n  )\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  children,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MessageScrollerPrimitive.Item\n      {...props}\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n    >\n      <MotionDiv\n        className=\"w-full min-w-0\"\n        variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n        initial={skipEntrance ? false : 'initial'}\n        animate=\"animate\"\n        exit={skipEntrance ? undefined : 'exit'}\n      >\n        {children}\n      </MotionDiv>\n    </MessageScrollerPrimitive.Item>\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a Spark icon, pointing\n// down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          {direction === 'end' ? <ArrowDownward /> : <ArrowUpward />}\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,uCAAuCA,MAAM,cAAc,KAAK;AACtE,MAAM,aAAA,GAAA,eAAA,QAAmB,KAAK;AAe9B,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYA,MAAM,SAAS,KAAK;CAE9C,MAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,YAAD;EAAY,UAAUC,aAAAA;EAAc,QAAA;YAClC,iBAAA,GAAA,kBAAA,KAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,gBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B;EACE,aAAU;EAIV,YAAA,GAAA,OAAA,IACE,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,SAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQH,MAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqBI,iCAAAA,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,iBAAA,GAAA,kBAAA,KAACD,+BAAAA,gBAAyB,MAA1B;EACE,GAAI;EACJ,aAAU;EACI;EACd,YAAA,GAAA,OAAA,IACE,kFACA,SACF;YAEA,iBAAA,GAAA,kBAAA,KAAC,WAAD;GACE,WAAU;GACV,UAAUE,+BAAAA,mBAAmB,YAAY;GACzC,SAAS,eAAe,QAAQ;GAChC,SAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAEhC;EACQ,CAAA;CACkB,CAAA;AAEnC;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACF,+BAAAA,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,YAAA,GAAA,OAAA,IACE,ypBACA,SACF;EACA,QACE,UACE,iBAAA,GAAA,kBAAA,KAACG,0BAAAA,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,cAAc,QAAQ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,eAAD,CAAgB,CAAA,IAAI,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,CAAc,CAAA,GACzD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}
+{"version":3,"file":"message-scroller.cjs","names":["React","LazyMotion","domAnimation","MessageScrollerPrimitive","useReducedMotion","MESSAGE_ANIMATIONS","Button","ArrowDownward","ArrowUpward"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import { ArrowDownward, ArrowUpward } from '@epilot/spark-icons'\nimport {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\nconst MotionDiv = create('div')\n\ntype MessageScrollerItemProps = Omit<\n  React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n  | 'animate'\n  | 'exit'\n  | 'initial'\n  | 'variants'\n  | 'onAnimationStart'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onDragTransitionEnd'\n>\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  const [ready, setReady] = React.useState(false)\n\n  React.useEffect(() => {\n    setReady(true)\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation} strict>\n      <MessageScrollerAnimationReadyContext.Provider value={ready}>\n        <MessageScrollerPrimitive.Provider {...props} />\n      </MessageScrollerAnimationReadyContext.Provider>\n    </LazyMotion>\n  )\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // The bottom fade follows the primitive's data-scrollable instead of a\n      // scroll timeline, which counts the anchor spacer and so faded the last\n      // message with nothing below it. Never hide the bar with no-scrollbar\n      // here: it drops the stable gutter, so content reflows and can retrigger\n      // autoscroll in a loop.\n      className={cn(\n        'size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain [mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--scroll-fade-b)),transparent)] transition-[--scroll-fade-b] duration-200 contain-content [--scroll-fade-b:0px] [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-[scrollable~=end]:[--scroll-fade-b:min(12%,calc(var(--spacing)*10))] motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  children,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MessageScrollerPrimitive.Item\n      {...props}\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n    >\n      <MotionDiv\n        className=\"w-full min-w-0\"\n        variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n        initial={skipEntrance ? false : 'initial'}\n        animate=\"animate\"\n        exit={skipEntrance ? undefined : 'exit'}\n      >\n        {children}\n      </MotionDiv>\n    </MessageScrollerPrimitive.Item>\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a Spark icon, pointing\n// down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          {direction === 'end' ? <ArrowDownward /> : <ArrowUpward />}\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,uCAAuCA,MAAM,cAAc,KAAK;AACtE,MAAM,aAAA,GAAA,eAAA,QAAmB,KAAK;AAe9B,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYA,MAAM,SAAS,KAAK;CAE9C,MAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,YAAD;EAAY,UAAUC,aAAAA;EAAc,QAAA;YAClC,iBAAA,GAAA,kBAAA,KAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,gBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B;EACE,aAAU;EAMV,YAAA,GAAA,GAAA,IACE,8eACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,SAA1B;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQH,MAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqBI,iCAAAA,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,iBAAA,GAAA,kBAAA,KAACD,+BAAAA,gBAAyB,MAA1B;EACE,GAAI;EACJ,aAAU;EACI;EACd,YAAA,GAAA,GAAA,IACE,kFACA,SACF;YAEA,iBAAA,GAAA,kBAAA,KAAC,WAAD;GACE,WAAU;GACV,UAAUE,+BAAAA,mBAAmB,YAAY;GACzC,SAAS,eAAe,QAAQ;GAChC,SAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAEhC;EACQ,CAAA;CACkB,CAAA;AAEnC;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACF,+BAAAA,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,YAAA,GAAA,GAAA,IACE,ypBACA,SACF;EACA,QACE,UACE,iBAAA,GAAA,kBAAA,KAACG,0BAAAA,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,cAAc,QAAQ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,eAAD,CAAgB,CAAA,IAAI,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,CAAc,CAAA,GACzD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/components/message-scroller.js

@@ -1,10 +1,10 @@
 "use client";
-import { cn } from "../utils/cn.js";
-import { Button } from "./button.js";
 import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import { MESSAGE_ANIMATIONS } from "../lib/message-animations.js";
-import { ArrowDownward, ArrowUpward } from "@epilot/spark-icons";
+import { Button } from "./button.js";
 import * as React$1 from "react";
+import { ArrowDownward, ArrowUpward } from "@epilot/spark-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
 import { LazyMotion, domAnimation } from "motion/react";
@@ -36,7 +36,7 @@ function MessageScroller({ className, ...props }) {
 function MessageScrollerViewport({ className, ...props }) {
 	return /* @__PURE__ */ jsx(MessageScroller$1.Viewport, {
 		"data-slot": "message-scroller-viewport",
-		className: cn("size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar", className),
+		className: cn("size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain [mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--scroll-fade-b)),transparent)] transition-[--scroll-fade-b] duration-200 contain-content [--scroll-fade-b:0px] [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-[scrollable~=end]:[--scroll-fade-b:min(12%,calc(var(--spacing)*10))] motion-reduce:transition-none", className),
 		...props
 	});
 }

package/dist/components/message-scroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-scroller.js","names":["React","MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import { ArrowDownward, ArrowUpward } from '@epilot/spark-icons'\nimport {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\nconst MotionDiv = create('div')\n\ntype MessageScrollerItemProps = Omit<\n  React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n  | 'animate'\n  | 'exit'\n  | 'initial'\n  | 'variants'\n  | 'onAnimationStart'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onDragTransitionEnd'\n>\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  const [ready, setReady] = React.useState(false)\n\n  React.useEffect(() => {\n    setReady(true)\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation} strict>\n      <MessageScrollerAnimationReadyContext.Provider value={ready}>\n        <MessageScrollerPrimitive.Provider {...props} />\n      </MessageScrollerAnimationReadyContext.Provider>\n    </LazyMotion>\n  )\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  children,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MessageScrollerPrimitive.Item\n      {...props}\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n    >\n      <MotionDiv\n        className=\"w-full min-w-0\"\n        variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n        initial={skipEntrance ? false : 'initial'}\n        animate=\"animate\"\n        exit={skipEntrance ? undefined : 'exit'}\n      >\n        {children}\n      </MotionDiv>\n    </MessageScrollerPrimitive.Item>\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a Spark icon, pointing\n// down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          {direction === 'end' ? <ArrowDownward /> : <ArrowUpward />}\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,uCAAuCA,QAAM,cAAc,KAAK;AACtE,MAAM,YAAY,OAAO,KAAK;AAe9B,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,KAAK;CAE9C,QAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,YAAD;EAAY,UAAU;EAAc,QAAA;YAClC,oBAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,oBAACC,kBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,kBAAyB,UAA1B;EACE,aAAU;EAIV,WAAW,GACT,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,kBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQD,QAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqB,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,oBAACC,kBAAyB,MAA1B;EACE,GAAI;EACJ,aAAU;EACI;EACd,WAAW,GACT,kFACA,SACF;YAEA,oBAAC,WAAD;GACE,WAAU;GACV,UAAU,mBAAmB,YAAY;GACzC,SAAS,eAAe,QAAQ;GAChC,SAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAEhC;EACQ,CAAA;CACkB,CAAA;AAEnC;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,oBAACA,kBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,WAAW,GACT,ypBACA,SACF;EACA,QACE,UACE,oBAAC,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,qBAAA,UAAA,EAAA,UAAA,CACG,cAAc,QAAQ,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,aAAD,CAAc,CAAA,GACzD,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}
+{"version":3,"file":"message-scroller.js","names":["React","MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import { ArrowDownward, ArrowUpward } from '@epilot/spark-icons'\nimport {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\nconst MotionDiv = create('div')\n\ntype MessageScrollerItemProps = Omit<\n  React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n  | 'animate'\n  | 'exit'\n  | 'initial'\n  | 'variants'\n  | 'onAnimationStart'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onDragTransitionEnd'\n>\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  const [ready, setReady] = React.useState(false)\n\n  React.useEffect(() => {\n    setReady(true)\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation} strict>\n      <MessageScrollerAnimationReadyContext.Provider value={ready}>\n        <MessageScrollerPrimitive.Provider {...props} />\n      </MessageScrollerAnimationReadyContext.Provider>\n    </LazyMotion>\n  )\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // The bottom fade follows the primitive's data-scrollable instead of a\n      // scroll timeline, which counts the anchor spacer and so faded the last\n      // message with nothing below it. Never hide the bar with no-scrollbar\n      // here: it drops the stable gutter, so content reflows and can retrigger\n      // autoscroll in a loop.\n      className={cn(\n        'size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain [mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--scroll-fade-b)),transparent)] transition-[--scroll-fade-b] duration-200 contain-content [--scroll-fade-b:0px] [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-[scrollable~=end]:[--scroll-fade-b:min(12%,calc(var(--spacing)*10))] motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  children,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MessageScrollerPrimitive.Item\n      {...props}\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n    >\n      <MotionDiv\n        className=\"w-full min-w-0\"\n        variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n        initial={skipEntrance ? false : 'initial'}\n        animate=\"animate\"\n        exit={skipEntrance ? undefined : 'exit'}\n      >\n        {children}\n      </MotionDiv>\n    </MessageScrollerPrimitive.Item>\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a Spark icon, pointing\n// down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          {direction === 'end' ? <ArrowDownward /> : <ArrowUpward />}\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,uCAAuCA,QAAM,cAAc,KAAK;AACtE,MAAM,YAAY,OAAO,KAAK;AAe9B,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,KAAK;CAE9C,QAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,YAAD;EAAY,UAAU;EAAc,QAAA;YAClC,oBAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,oBAACC,kBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,kBAAyB,UAA1B;EACE,aAAU;EAMV,WAAW,GACT,8eACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,kBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQD,QAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqB,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,oBAACC,kBAAyB,MAA1B;EACE,GAAI;EACJ,aAAU;EACI;EACd,WAAW,GACT,kFACA,SACF;YAEA,oBAAC,WAAD;GACE,WAAU;GACV,UAAU,mBAAmB,YAAY;GACzC,SAAS,eAAe,QAAQ;GAChC,SAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAEhC;EACQ,CAAA;CACkB,CAAA;AAEnC;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,oBAACA,kBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,WAAW,GACT,ypBACA,SACF;EACA,QACE,UACE,oBAAC,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,qBAAA,UAAA,EAAA,UAAA,CACG,cAAc,QAAQ,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,aAAD,CAAc,CAAA,GACzD,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/components/message.cjs

@@ -4,12 +4,12 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/message.tsx
 function MessageGroup({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "message-group",
-		className: (0, cnfast.cn)("flex min-w-0 flex-col gap-2", className),
+		className: (0, cn.cn)("flex min-w-0 flex-col gap-2", className),
 		...props
 	});
 }
@@ -17,35 +17,35 @@ function Message({ className, align = "start", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "message",
 		"data-align": align,
-		className: (0, cnfast.cn)("group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse", className),
+		className: (0, cn.cn)("group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse", className),
 		...props
 	});
 }
 function MessageAvatar({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "message-avatar",
-		className: (0, cnfast.cn)("flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-gray-a3 group-has-data-[slot=message-footer]/message:-translate-y-8", className),
+		className: (0, cn.cn)("flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-gray-a3 group-has-data-[slot=message-footer]/message:-translate-y-8", className),
 		...props
 	});
 }
 function MessageContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "message-content",
-		className: (0, cnfast.cn)("flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end", className),
+		className: (0, cn.cn)("flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end", className),
 		...props
 	});
 }
 function MessageHeader({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "message-header",
-		className: (0, cnfast.cn)("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0", className),
+		className: (0, cn.cn)("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0", className),
 		...props
 	});
 }
 function MessageFooter({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "message-footer",
-		className: (0, cnfast.cn)("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end", className),
+		className: (0, cn.cn)("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end", className),
 		...props
 	});
 }

package/dist/components/message.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"message.cjs","names":[],"sources":["../../src/components/message.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction MessageGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-group\"\n      className={cn('flex min-w-0 flex-col gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Message({\n  className,\n  align = 'start',\n  ...props\n}: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) {\n  return (\n    <div\n      data-slot=\"message\"\n      data-align={align}\n      className={cn(\n        'group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageAvatar({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-avatar\"\n      className={cn(\n        'flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-gray-a3 group-has-data-[slot=message-footer]/message:-translate-y-8',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-content\"\n      className={cn(\n        'flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-header\"\n      className={cn(\n        'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\n        'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Message,\n  MessageAvatar,\n  MessageContent,\n  MessageFooter,\n  MessageGroup,\n  MessageHeader,\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,QAAQ,EACf,WACA,QAAQ,SACR,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,wKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,wKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"message.cjs","names":[],"sources":["../../src/components/message.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction MessageGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-group\"\n      className={cn('flex min-w-0 flex-col gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Message({\n  className,\n  align = 'start',\n  ...props\n}: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) {\n  return (\n    <div\n      data-slot=\"message\"\n      data-align={align}\n      className={cn(\n        'group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageAvatar({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-avatar\"\n      className={cn(\n        'flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-gray-a3 group-has-data-[slot=message-footer]/message:-translate-y-8',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-content\"\n      className={cn(\n        'flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-header\"\n      className={cn(\n        'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\n        'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-gray-light group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Message,\n  MessageAvatar,\n  MessageContent,\n  MessageFooter,\n  MessageGroup,\n  MessageHeader,\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,QAAQ,EACf,WACA,QAAQ,SACR,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,YAAA,GAAA,GAAA,IACE,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,wKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,wKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/number-flow.d.cts

@@ -1,14 +1,4 @@
 "use client";
 
-import { Format, NumberFlowProps, NumberFlowProps as NumberFlowProps$1 } from "@number-flow/react";
-
-//#region src/components/number-flow.d.ts
-declare function NumberFlow({
-  locales,
-  prefix,
-  suffix,
-  ...props
-}: NumberFlowProps$1): import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { type Format, type NumberFlowProps, NumberFlow as default };
-//# sourceMappingURL=number-flow.d.cts.map
+import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-Bch81ixZ.cjs";
+export { type Format, type NumberFlowProps, NumberFlow as default };

package/dist/components/number-flow.d.ts

@@ -1,14 +1,4 @@
 "use client";
 
-import { Format, NumberFlowProps, NumberFlowProps as NumberFlowProps$1 } from "@number-flow/react";
-
-//#region src/components/number-flow.d.ts
-declare function NumberFlow({
-  locales,
-  prefix,
-  suffix,
-  ...props
-}: NumberFlowProps$1): import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { type Format, type NumberFlowProps, NumberFlow as default };
-//# sourceMappingURL=number-flow.d.ts.map
+import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-Bch81ixZ.js";
+export { type Format, type NumberFlowProps, NumberFlow as default };

package/dist/components/page-header.cjs

@@ -3,17 +3,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
 const require_components_typography = require("./typography.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
 let _base_ui_react_use_render = require("@base-ui/react/use-render");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/page-header.tsx
 const PageHeader = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 	ref,
-	className: (0, cnfast.cn)("grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3", className),
+	className: (0, cn.cn)("grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3", className),
 	...props
 }));
 PageHeader.displayName = "PageHeader";
@@ -24,20 +24,20 @@ const PageHeaderBackButton = react.forwardRef(({ children, className, "aria-labe
 	color: "neutral",
 	type: "button",
 	"aria-label": ariaLabel,
-	className: (0, cnfast.cn)("col-start-1 justify-self-start", className),
+	className: (0, cn.cn)("col-start-1 justify-self-start", className),
 	...props,
 	children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.ChevronLeft, {})
 }));
 PageHeaderBackButton.displayName = "PageHeaderBackButton";
 const PageHeaderTitle = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.PageTitle, {
-	className: (0, cnfast.cn)("col-start-2 justify-self-center text-center", className),
+	className: (0, cn.cn)("col-start-2 justify-self-center text-center", className),
 	...props
 });
 const PageHeaderActions = ({ className, render, ...props }) => {
 	return (0, _base_ui_react_use_render.useRender)({
 		defaultTagName: "div",
 		render,
-		props: (0, _base_ui_react_merge_props.mergeProps)({ className: (0, cnfast.cn)("col-start-3 flex size-10 shrink-0 items-center justify-self-end", className) }, props)
+		props: (0, _base_ui_react_merge_props.mergeProps)({ className: (0, cn.cn)("col-start-3 flex size-10 shrink-0 items-center justify-self-end", className) }, props)
 	});
 };
 PageHeaderActions.displayName = "PageHeaderActions";

package/dist/components/page-header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.cjs","names":["React","Button","ChevronLeft","PageTitle"],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { ChevronLeft } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\nimport { PageTitle } from './typography'\n\nconst PageHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    className={cn(\n      'grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3',\n      className,\n    )}\n    {...props}\n  />\n))\nPageHeader.displayName = 'PageHeader'\n\nconst PageHeaderBackButton = React.forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, 'size' | 'styleVariant' | 'color'>\n>(\n  (\n    { children, className, 'aria-label': ariaLabel = 'Back', ...props },\n    ref,\n  ) => (\n    <Button\n      ref={ref}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      type=\"button\"\n      aria-label={ariaLabel}\n      className={cn('col-start-1 justify-self-start', className)}\n      {...props}\n    >\n      {children ?? <ChevronLeft />}\n    </Button>\n  ),\n)\nPageHeaderBackButton.displayName = 'PageHeaderBackButton'\n\nconst PageHeaderTitle = ({\n  className,\n  ...props\n}: React.ComponentProps<'h2'>) => (\n  <PageTitle\n    className={cn('col-start-2 justify-self-center text-center', className)}\n    {...props}\n  />\n)\n\ntype PageHeaderActionsProps = useRender.ComponentProps<'div'>\n\nconst PageHeaderActions = ({\n  className,\n  render,\n  ...props\n}: PageHeaderActionsProps) => {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          'col-start-3 flex size-10 shrink-0 items-center justify-self-end',\n          className,\n        ),\n      },\n      props,\n    ),\n  })\n}\nPageHeaderActions.displayName = 'PageHeaderActions'\n\nexport { PageHeader, PageHeaderActions, PageHeaderBackButton, PageHeaderTitle }\nexport type { PageHeaderActionsProps }\n"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,aAAaA,MAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,wEACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,WAAW,cAAc;AAEzB,MAAM,uBAAuBA,MAAM,YAK/B,EAAE,UAAU,WAAW,cAAc,YAAY,QAAQ,GAAG,SAC5D,QAEA,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,QAAD;CACO;CACL,MAAK;CACL,cAAa;CACb,OAAM;CACN,MAAK;CACL,cAAY;CACZ,YAAA,GAAA,OAAA,IAAc,kCAAkC,SAAS;CACzD,GAAI;WAEH,YAAY,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,CAAc,CAAA;AACrB,CAAA,CAEZ;AACA,qBAAqB,cAAc;AAEnC,MAAM,mBAAmB,EACvB,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,WAAD;CACE,YAAA,GAAA,OAAA,IAAc,+CAA+C,SAAS;CACtE,GAAI;AACL,CAAA;AAKH,MAAM,qBAAqB,EACzB,WACA,QACA,GAAG,YACyB;CAC5B,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE,EACE,YAAA,GAAA,OAAA,IACE,mEACA,SACF,EACF,GACA,KACF;CACF,CAAC;AACH;AACA,kBAAkB,cAAc"}
+{"version":3,"file":"page-header.cjs","names":["React","Button","ChevronLeft","PageTitle"],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { ChevronLeft } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\nimport { PageTitle } from './typography'\n\nconst PageHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    className={cn(\n      'grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3',\n      className,\n    )}\n    {...props}\n  />\n))\nPageHeader.displayName = 'PageHeader'\n\nconst PageHeaderBackButton = React.forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, 'size' | 'styleVariant' | 'color'>\n>(\n  (\n    { children, className, 'aria-label': ariaLabel = 'Back', ...props },\n    ref,\n  ) => (\n    <Button\n      ref={ref}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      type=\"button\"\n      aria-label={ariaLabel}\n      className={cn('col-start-1 justify-self-start', className)}\n      {...props}\n    >\n      {children ?? <ChevronLeft />}\n    </Button>\n  ),\n)\nPageHeaderBackButton.displayName = 'PageHeaderBackButton'\n\nconst PageHeaderTitle = ({\n  className,\n  ...props\n}: React.ComponentProps<'h2'>) => (\n  <PageTitle\n    className={cn('col-start-2 justify-self-center text-center', className)}\n    {...props}\n  />\n)\n\ntype PageHeaderActionsProps = useRender.ComponentProps<'div'>\n\nconst PageHeaderActions = ({\n  className,\n  render,\n  ...props\n}: PageHeaderActionsProps) => {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          'col-start-3 flex size-10 shrink-0 items-center justify-self-end',\n          className,\n        ),\n      },\n      props,\n    ),\n  })\n}\nPageHeaderActions.displayName = 'PageHeaderActions'\n\nexport { PageHeader, PageHeaderActions, PageHeaderBackButton, PageHeaderTitle }\nexport type { PageHeaderActionsProps }\n"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,aAAaA,MAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,GAAA,IACE,wEACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,WAAW,cAAc;AAEzB,MAAM,uBAAuBA,MAAM,YAK/B,EAAE,UAAU,WAAW,cAAc,YAAY,QAAQ,GAAG,SAC5D,QAEA,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,QAAD;CACO;CACL,MAAK;CACL,cAAa;CACb,OAAM;CACN,MAAK;CACL,cAAY;CACZ,YAAA,GAAA,GAAA,IAAc,kCAAkC,SAAS;CACzD,GAAI;WAEH,YAAY,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,CAAc,CAAA;AACrB,CAAA,CAEZ;AACA,qBAAqB,cAAc;AAEnC,MAAM,mBAAmB,EACvB,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,WAAD;CACE,YAAA,GAAA,GAAA,IAAc,+CAA+C,SAAS;CACtE,GAAI;AACL,CAAA;AAKH,MAAM,qBAAqB,EACzB,WACA,QACA,GAAG,YACyB;CAC5B,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE,EACE,YAAA,GAAA,GAAA,IACE,mEACA,SACF,EACF,GACA,KACF;CACF,CAAC;AACH;AACA,kBAAkB,cAAc"}

package/dist/components/page-header.js

@@ -2,8 +2,8 @@
 import { cn } from "../utils/cn.js";
 import { Button } from "./button.js";
 import { PageTitle } from "./typography.js";
-import { ChevronLeft } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { ChevronLeft } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";

package/dist/components/period-tabs.cjs

@@ -3,30 +3,30 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_components_button = require("./button.cjs");
 let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/period-tabs.tsx
 const PeriodTabs = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, cnfast.cn)("flex flex-col items-center gap-2", className),
+		className: (0, cn.cn)("flex flex-col items-center gap-2", className),
 		...rest
 	});
 };
 const PeriodStepper = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, cnfast.cn)("flex items-center gap-2 text-gray-light", className),
+		className: (0, cn.cn)("flex items-center gap-2 text-gray-light", className),
 		...rest
 	});
 };
 const PeriodStepperLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, cnfast.cn)("min-w-40 text-center text-sm font-medium text-gray", className),
+		className: (0, cn.cn)("min-w-40 text-center text-sm font-medium text-gray", className),
 		...rest
 	});
 };
 const PeriodStepperButtonPrev = ({ className, "aria-label": ariaLabel, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
 		"aria-label": ariaLabel,
-		className: (0, cnfast.cn)("disabled:text-gray-light/60 disabled:opacity-40", className),
+		className: (0, cn.cn)("disabled:text-gray-light/60 disabled:opacity-40", className),
 		size: "icon-small",
 		styleVariant: "ghost",
 		color: "neutral",
@@ -37,7 +37,7 @@ const PeriodStepperButtonPrev = ({ className, "aria-label": ariaLabel, ...rest }
 const PeriodStepperButtonNext = ({ className, "aria-label": ariaLabel, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
 		"aria-label": ariaLabel,
-		className: (0, cnfast.cn)("disabled:text-gray-light/60 disabled:opacity-40", className),
+		className: (0, cn.cn)("disabled:text-gray-light/60 disabled:opacity-40", className),
 		size: "icon-small",
 		styleVariant: "ghost",
 		color: "neutral",

package/dist/components/period-tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"period-tabs.cjs","names":["Button","ChevronLeft","ChevronRight"],"sources":["../../src/components/period-tabs.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype PeriodStepperButtonProps = Omit<\n  ButtonProps,\n  'styleVariant' | 'color' | 'size' | 'children' | 'aria-label'\n> & {\n  'aria-label': string\n}\n\nconst PeriodTabs = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex flex-col items-center gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepper = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center gap-2 text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepperLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'min-w-40 text-center text-sm font-medium text-gray',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepperButtonPrev = ({\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: PeriodStepperButtonProps) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronLeft />\n    </Button>\n  )\n}\n\nconst PeriodStepperButtonNext = ({\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: PeriodStepperButtonProps) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronRight />\n    </Button>\n  )\n}\n\nexport {\n  PeriodTabs,\n  PeriodStepper,\n  PeriodStepperLabel,\n  PeriodStepperButtonPrev,\n  PeriodStepperButtonNext,\n}\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,sDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAA2B,EAC/B,WACA,cAAc,WACd,GAAG,WAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAACA,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,CAAc,CAAA;CACR,CAAA;AAEZ;AAEA,MAAM,2BAA2B,EAC/B,WACA,cAAc,WACd,GAAG,WAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAACD,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,cAAD,CAAe,CAAA;CACT,CAAA;AAEZ"}
+{"version":3,"file":"period-tabs.cjs","names":["Button","ChevronLeft","ChevronRight"],"sources":["../../src/components/period-tabs.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype PeriodStepperButtonProps = Omit<\n  ButtonProps,\n  'styleVariant' | 'color' | 'size' | 'children' | 'aria-label'\n> & {\n  'aria-label': string\n}\n\nconst PeriodTabs = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex flex-col items-center gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepper = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center gap-2 text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepperLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'min-w-40 text-center text-sm font-medium text-gray',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepperButtonPrev = ({\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: PeriodStepperButtonProps) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronLeft />\n    </Button>\n  )\n}\n\nconst PeriodStepperButtonNext = ({\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: PeriodStepperButtonProps) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronRight />\n    </Button>\n  )\n}\n\nexport {\n  PeriodTabs,\n  PeriodStepper,\n  PeriodStepperLabel,\n  PeriodStepperButtonPrev,\n  PeriodStepperButtonNext,\n}\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IAAc,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IAAc,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,GAAA,IACE,sDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAA2B,EAC/B,WACA,cAAc,WACd,GAAG,WAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAACA,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,GAAA,IACE,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,CAAc,CAAA;CACR,CAAA;AAEZ;AAEA,MAAM,2BAA2B,EAC/B,WACA,cAAc,WACd,GAAG,WAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAACD,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,GAAA,IACE,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,cAAD,CAAe,CAAA;CACT,CAAA;AAEZ"}

package/dist/components/pill.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_lib_accent_colors = require("../lib/accent-colors.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/pill.tsx
 /**
 * Like Badge, but interactive: `onClick` makes the whole pill a button
@@ -42,7 +42,7 @@ const Pill = react.forwardRef(function Pill({ className, children, styleVariant,
 		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
 		...interaction,
 		ref,
-		className: (0, cnfast.cn)("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--color-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))", "shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover,var(--color-gray-a4))", disabled && "pointer-events-none opacity-50", className),
+		className: (0, cn.cn)("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", "shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover,var(--neutral-a4))", disabled && "pointer-events-none opacity-50", className),
 		...props,
 		children: [children, removable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
@@ -54,7 +54,7 @@ const Pill = react.forwardRef(function Pill({ className, children, styleVariant,
 				event.stopPropagation();
 				onRemove?.(event);
 			},
-			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--color-gray-a4)) motion-reduce:transition-none",
+			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--neutral-a4)) motion-reduce:transition-none",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Close, { className: "[--spark-icon-size:14px]" })
 		})] }) : null]
 	});

package/dist/components/pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pill.cjs","names":["React","accentByColor","Close"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      {...interaction}\n      ref={ref}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--color-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))',\n        'shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable &&\n          'cursor-pointer hover:bg-(--spark-style-bg-hover,var(--color-gray-a4))',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--color-gray-a4)) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,OAAOA,MAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,YAAA,GAAA,OAAA,IACE,0FACA,mIACA,kGACA,aACE,iIACF,aACE,yEACF,YAAY,kCACZ,SACF;EACA,GAAI;YAnBN,CAqBG,UACA,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"pill.cjs","names":["React","accentByColor","Close"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      {...interaction}\n      ref={ref}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n        'shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable &&\n          'cursor-pointer hover:bg-(--spark-style-bg-hover,var(--neutral-a4))',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--neutral-a4)) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,OAAOA,MAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,YAAA,GAAA,GAAA,IACE,0FACA,4GACA,kGACA,aACE,iIACF,aACE,sEACF,YAAY,kCACZ,SACF;EACA,GAAI;YAnBN,CAqBG,UACA,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}