@epilot/spark-ui 0.26.0 → 0.27.0

package/dist/components/message-scroller.cjs

@@ -46,7 +46,7 @@ function MessageScrollerViewport({ 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, cn.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-[calc(var(--spark-layout-gap)*8)]", className),
 		...props
 	});
 }

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      // 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"}
+{"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(\n        'flex h-max min-h-full flex-col gap-[calc(var(--spark-layout-gap)*8)]',\n        className,\n      )}\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,IACE,wEACA,SACF;EACA,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

@@ -43,7 +43,7 @@ function MessageScrollerViewport({ className, ...props }) {
 function MessageScrollerContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(MessageScroller$1.Content, {
 		"data-slot": "message-scroller-content",
-		className: cn("flex h-max min-h-full flex-col gap-8", className),
+		className: cn("flex h-max min-h-full flex-col gap-[calc(var(--spark-layout-gap)*8)]", 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      // 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"}
+{"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(\n        'flex h-max min-h-full flex-col gap-[calc(var(--spark-layout-gap)*8)]',\n        className,\n      )}\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,GACT,wEACA,SACF;EACA,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/page-header.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "styleVariant" | "color"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/page-header.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "styleVariant" | "color"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/pill.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { f as SparkStyle } from "../theme-types-Bn5E15-P.cjs";
+import { g as SparkStyle } from "../theme-types-CKZzOmSa.cjs";
 import { SparkAccentColor } from "../lib/accent-colors.cjs";
 import * as React$1 from "react";
 

package/dist/components/pill.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { f as SparkStyle } from "../theme-types-Bn5E15-P.js";
+import { g as SparkStyle } from "../theme-types-CKZzOmSa.js";
 import { SparkAccentColor } from "../lib/accent-colors.js";
 import * as React$1 from "react";
 

package/dist/components/radio.cjs

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_lib_accent_colors = require("../lib/accent-colors.cjs");
+const require_components_field = require("./field.cjs");
+const require_lib_selection_list = require("../lib/selection-list.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -9,12 +11,14 @@ let _base_ui_react_radio = require("@base-ui/react/radio");
 let _base_ui_react_radio_group = require("@base-ui/react/radio-group");
 let cn = require("cn");
 //#region src/components/radio.tsx
-function RadioGroup({ className, styleVariant, color, gap = 3, style, ...props }) {
+function RadioGroup({ className, styleVariant, color, gap = 3, listStyle, style, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio_group.RadioGroup, {
 		"data-slot": "radio-group",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0,
 		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
-		className: (0, cn.cn)("grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]", className),
+		"data-list-style": listStyle,
+		"data-invalid": require_components_field.useFieldSetInvalid(),
+		className: (0, cn.cn)("grid", listStyle ? require_lib_selection_list.selectionListClasses[listStyle] : "gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]", className),
 		style: {
 			"--radio-group-gap-steps": gap,
 			...style

package/dist/components/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs","names":["RadioGroupPrimitive","accentByColor","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;;;;AAsBA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,OACA,GAAG,SACe;CAKlB,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,YAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAOnD,YAAA,GAAA,GAAA,IACE,2EACA,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,MAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,GAAA,IAGE,iNAGA,qIACA,iFACA,6DACA,+IACA,2DACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,MAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}
+{"version":3,"file":"radio.cjs","names":["RadioGroupPrimitive","accentByColor","useFieldSetInvalid","selectionListClasses","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport { selectionListClasses } from '../lib/selection-list'\nimport type { SparkInputStyle, SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldSetInvalid } from './field'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  /** Shows the options as a styled list of `SelectionItem` rows; ignores `gap`. */\n  listStyle?: SparkInputStyle\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  listStyle,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  const invalid = useFieldSetInvalid()\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      data-list-style={listStyle}\n      data-invalid={invalid}\n      className={cn(\n        'grid',\n        listStyle\n          ? selectionListClasses[listStyle]\n          : 'gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;;;;;;AA0BA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,WACA,OACA,GAAG,SACe;CAMlB,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,YAAD;EACE,aAAU;EACV,cARY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAQpD,qBAPoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAQnD,mBAAiB;EACjB,gBARYC,yBAAAA,mBAQQ;EACpB,YAAA,GAAA,GAAA,IACE,QACA,YACIC,2BAAAA,qBAAqB,aACrB,sEACJ,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQF,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACG,qBAAAA,MAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,GAAA,IAGE,iNAGA,qIACA,iFACA,6DACA,+IACA,2DACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,MAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}

package/dist/components/radio.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { f as SparkStyle } from "../theme-types-Bn5E15-P.cjs";
+import { g as SparkStyle, l as SparkInputStyle } from "../theme-types-CKZzOmSa.cjs";
 import * as React$1 from "react";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
@@ -10,7 +10,8 @@ type SparkRadioColor = 'accent' | 'neutral' | 'danger';
 type RadioGroupProps = Omit<React$1.ComponentProps<typeof RadioGroup$1>, 'style'> & {
   styleVariant?: SparkStyle;
   color?: SparkRadioColor; /** How many `--spark-layout-gap` units apart each radio sits. */
-  gap?: number;
+  gap?: number; /** Shows the options as a styled list of `SelectionItem` rows; ignores `gap`. */
+  listStyle?: SparkInputStyle;
   style?: React$1.CSSProperties;
 };
 declare function RadioGroup({
@@ -18,6 +19,7 @@ declare function RadioGroup({
   styleVariant,
   color,
   gap,
+  listStyle,
   style,
   ...props
 }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/radio.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { f as SparkStyle } from "../theme-types-Bn5E15-P.js";
+import { g as SparkStyle, l as SparkInputStyle } from "../theme-types-CKZzOmSa.js";
 import * as React$1 from "react";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
@@ -10,7 +10,8 @@ type SparkRadioColor = 'accent' | 'neutral' | 'danger';
 type RadioGroupProps = Omit<React$1.ComponentProps<typeof RadioGroup$1>, 'style'> & {
   styleVariant?: SparkStyle;
   color?: SparkRadioColor; /** How many `--spark-layout-gap` units apart each radio sits. */
-  gap?: number;
+  gap?: number; /** Shows the options as a styled list of `SelectionItem` rows; ignores `gap`. */
+  listStyle?: SparkInputStyle;
   style?: React$1.CSSProperties;
 };
 declare function RadioGroup({
@@ -18,6 +19,7 @@ declare function RadioGroup({
   styleVariant,
   color,
   gap,
+  listStyle,
   style,
   ...props
 }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/radio.js

@@ -1,17 +1,21 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { useFieldSetInvalid } from "./field.js";
+import { selectionListClasses } from "../lib/selection-list.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 //#region src/components/radio.tsx
-function RadioGroup({ className, styleVariant, color, gap = 3, style, ...props }) {
+function RadioGroup({ className, styleVariant, color, gap = 3, listStyle, style, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		"data-slot": "radio-group",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0,
 		"data-accent-color": color ? accentByColor[color] : void 0,
-		className: cn("grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]", className),
+		"data-list-style": listStyle,
+		"data-invalid": useFieldSetInvalid(),
+		className: cn("grid", listStyle ? selectionListClasses[listStyle] : "gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]", className),
 		style: {
 			"--radio-group-gap-steps": gap,
 			...style

package/dist/components/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":["RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;AAsBA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,OACA,GAAG,SACe;CAKlB,OACE,oBAACA,cAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQ,cAAc,SAAS,KAAA;EAOnD,WAAW,GACT,2EACA,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CAEvD,OACE,oBAACC,QAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GAGT,iNAGA,qIACA,iFACA,6DACA,+IACA,2DACA,SACF;EACA,GAAI;YAEJ,oBAACA,QAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}
+{"version":3,"file":"radio.js","names":["RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport { selectionListClasses } from '../lib/selection-list'\nimport type { SparkInputStyle, SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldSetInvalid } from './field'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  /** Shows the options as a styled list of `SelectionItem` rows; ignores `gap`. */\n  listStyle?: SparkInputStyle\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  listStyle,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  const invalid = useFieldSetInvalid()\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      data-list-style={listStyle}\n      data-invalid={invalid}\n      className={cn(\n        'grid',\n        listStyle\n          ? selectionListClasses[listStyle]\n          : 'gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;;;AA0BA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,WACA,OACA,GAAG,SACe;CAMlB,OACE,oBAACA,cAAD;EACE,aAAU;EACV,cARY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAQpD,qBAPoB,QAAQ,cAAc,SAAS,KAAA;EAQnD,mBAAiB;EACjB,gBARY,mBAQQ;EACpB,WAAW,GACT,QACA,YACI,qBAAqB,aACrB,sEACJ,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CAEvD,OACE,oBAACC,QAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GAGT,iNAGA,qIACA,iFACA,6DACA,+IACA,2DACA,SACF;EACA,GAAI;YAEJ,oBAACA,QAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}

package/dist/components/rating.cjs

@@ -0,0 +1,167 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_components_field = require("./field.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_radio = require("@base-ui/react/radio");
+let _base_ui_react_radio_group = require("@base-ui/react/radio-group");
+let cn = require("cn");
+//#region src/components/rating.tsx
+const RatingContext = react.createContext(null);
+function useRating() {
+	const context = react.useContext(RatingContext);
+	if (!context) throw new Error("RatingStars and RatingCaption need a Rating");
+	return context;
+}
+function Rating({ value: valueProp, defaultValue = null, onValueChange, max = 5, labels, size = "medium", readOnly = false, disabled = false, name, className, children, ...props }) {
+	const [uncontrolled, setUncontrolled] = react.useState(defaultValue);
+	const [hovered, setHovered] = react.useState(null);
+	const value = valueProp === void 0 ? uncontrolled : valueProp;
+	const setValue = react.useCallback((next) => {
+		setUncontrolled(next);
+		onValueChange?.(next);
+	}, [onValueChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingContext.Provider, {
+		value: {
+			value,
+			setValue,
+			hovered: readOnly || disabled ? null : hovered,
+			setHovered,
+			max,
+			labels,
+			size,
+			readOnly,
+			disabled,
+			name
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "rating",
+			className: (0, cn.cn)("flex flex-col items-start gap-[calc(var(--spark-layout-gap)*1)]", className),
+			...props,
+			children
+		})
+	});
+}
+const sizeClasses = {
+	small: {
+		star: "size-4",
+		button: "size-6"
+	},
+	medium: {
+		star: "size-6",
+		button: "size-8"
+	},
+	large: {
+		star: "size-8",
+		button: "size-11"
+	}
+};
+const compactSizeClasses = {
+	small: {
+		star: "size-3.5",
+		button: "size-6"
+	},
+	medium: {
+		star: "size-4.5",
+		button: "size-6"
+	},
+	large: {
+		star: "size-5",
+		button: "size-6"
+	}
+};
+function starTone(fill, disabled) {
+	if (disabled) return fill === "off" ? "fill-none stroke-gray-a6" : "fill-gray-a7 stroke-gray-a7";
+	if (fill === "on") return "fill-spark-9 stroke-spark-9";
+	if (fill === "preview") return "fill-spark-a4 stroke-spark-9";
+	return "fill-none stroke-gray-a9";
+}
+function captionTone(hasLabel, hovered, disabled) {
+	if (disabled) return "text-gray-a9";
+	if (!hasLabel) return "text-gray-11";
+	return hovered ? "text-spark-11" : "text-gray-12";
+}
+function Star({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		strokeWidth: 1.5,
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: (0, cn.cn)("transition-colors motion-reduce:transition-none", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12.60 3.17 L14.72 8.03 Q15.00 8.67 15.69 8.74 L20.97 9.26 Q22.46 9.40 21.34 10.40 L17.37 13.91 Q16.85 14.38 17.00 15.06 L18.14 20.23 Q18.47 21.70 17.17 20.94 L12.60 18.25 Q12.00 17.90 11.40 18.25 L6.83 20.94 Q5.53 21.70 5.86 20.23 L7.00 15.06 Q7.15 14.38 6.63 13.91 L2.66 10.40 Q1.54 9.40 3.03 9.26 L8.31 8.74 Q9.00 8.67 9.28 8.03 L11.40 3.17 Q12.00 1.80 12.60 3.17Z" })
+	});
+}
+function RatingStars({ className, onPointerLeave, onKeyDown, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedByProp, ...props }) {
+	const rating = useRating();
+	const { field, ariaDescribedBy, ariaInvalid } = require_components_field.useFieldControl({ ariaDescribedBy: ariaDescribedByProp });
+	const invalid = require_components_field.useFieldSetInvalid();
+	const { star: starSize, button: buttonSize } = (rating.max > 5 ? compactSizeClasses : sizeClasses)[rating.size];
+	const interactive = !rating.readOnly && !rating.disabled;
+	const low = Math.min(rating.value ?? 0, rating.hovered ?? rating.value ?? 0);
+	const high = Math.max(rating.value ?? 0, rating.hovered ?? 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio_group.RadioGroup, {
+		"data-slot": "rating-stars",
+		"data-invalid": invalid,
+		"aria-labelledby": ariaLabelledBy ?? (field?.readOnly ? field.labelId : void 0),
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid,
+		value: rating.value,
+		onValueChange: (next) => next !== null && rating.setValue(next),
+		readOnly: rating.readOnly,
+		disabled: rating.disabled,
+		name: rating.name,
+		className: (0, cn.cn)("flex", className),
+		onPointerLeave: (event) => {
+			rating.setHovered(null);
+			onPointerLeave?.(event);
+		},
+		onKeyDown: (event) => {
+			rating.setHovered(null);
+			onKeyDown?.(event);
+		},
+		...props,
+		children: Array.from({ length: rating.max }, (_, index) => {
+			const star = index + 1;
+			const fill = star <= low ? "on" : star <= high ? "preview" : "off";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio.Radio.Root, {
+				value: star,
+				"aria-label": rating.labels?.[index] ?? String(star),
+				"data-slot": "rating-star",
+				"data-fill": fill,
+				"aria-readonly": void 0,
+				nativeButton: true,
+				render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
+				onPointerEnter: interactive ? () => rating.setHovered(star) : void 0,
+				className: (0, cn.cn)("inline-flex min-h-[24px] min-w-[24px] shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 touch-target-row any-pointer-coarse:min-w-11", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-readonly:cursor-default", buttonSize),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Star, { className: (0, cn.cn)(starSize, starTone(fill, rating.disabled)) })
+			}, star);
+		})
+	});
+}
+const captionTextSize = {
+	small: "text-[0.8125rem]",
+	medium: "text-sm",
+	large: "text-base"
+};
+function RatingCaption({ className, children, ...props }) {
+	const rating = useRating();
+	const shown = rating.hovered ?? rating.value;
+	const label = shown ? rating.labels?.[shown - 1] : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		"data-slot": "rating-caption",
+		"aria-hidden": "true",
+		"aria-disabled": rating.disabled || void 0,
+		className: (0, cn.cn)("leading-5", captionTextSize[rating.size], label !== void 0 && "font-medium", captionTone(label !== void 0, !!rating.hovered, rating.disabled), className),
+		...props,
+		children: label ?? children
+	});
+}
+//#endregion
+exports.Rating = Rating;
+exports.RatingCaption = RatingCaption;
+exports.RatingStars = RatingStars;
+
+//# sourceMappingURL=rating.cjs.map

package/dist/components/rating.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.cjs","names":["React","useFieldControl","useFieldSetInvalid","RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/rating.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldControl, useFieldSetInvalid } from './field'\n\ntype RatingSize = 'small' | 'medium' | 'large'\n\ntype RatingContextValue = {\n  value: number | null\n  setValue: (value: number) => void\n  hovered: number | null\n  setHovered: (value: number | null) => void\n  max: number\n  labels?: string[]\n  size: RatingSize\n  readOnly: boolean\n  disabled: boolean\n  name?: string\n}\n\nconst RatingContext = React.createContext<RatingContextValue | null>(null)\n\nfunction useRating() {\n  const context = React.useContext(RatingContext)\n  if (!context) throw new Error('RatingStars and RatingCaption need a Rating')\n  return context\n}\n\ninterface RatingProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /** The chosen star, 1-based. `null` means nothing is chosen yet. */\n  value?: number | null\n  defaultValue?: number | null\n  onValueChange?: (value: number) => void\n  max?: number\n  /** One label per star: the star's accessible name and the caption text. */\n  labels?: string[]\n  size?: RatingSize\n  readOnly?: boolean\n  disabled?: boolean\n  name?: string\n}\n\nfunction Rating({\n  value: valueProp,\n  defaultValue = null,\n  onValueChange,\n  max = 5,\n  labels,\n  size = 'medium',\n  readOnly = false,\n  disabled = false,\n  name,\n  className,\n  children,\n  ...props\n}: RatingProps) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n  const [hovered, setHovered] = React.useState<number | null>(null)\n  const value = valueProp === undefined ? uncontrolled : valueProp\n\n  const setValue = React.useCallback(\n    (next: number) => {\n      setUncontrolled(next)\n      onValueChange?.(next)\n    },\n    [onValueChange],\n  )\n\n  return (\n    <RatingContext.Provider\n      value={{\n        value,\n        setValue,\n        hovered: readOnly || disabled ? null : hovered,\n        setHovered,\n        max,\n        labels,\n        size,\n        readOnly,\n        disabled,\n        name,\n      }}\n    >\n      <div\n        data-slot=\"rating\"\n        className={cn(\n          'flex flex-col items-start gap-[calc(var(--spark-layout-gap)*1)]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </RatingContext.Provider>\n  )\n}\n\ntype SizeClasses = { star: string; button: string }\n\nconst sizeClasses: Record<RatingSize, SizeClasses> = {\n  small: { star: 'size-4', button: 'size-6' },\n  medium: { star: 'size-6', button: 'size-8' },\n  large: { star: 'size-8', button: 'size-11' },\n}\n\n// above five stars the row would outgrow narrow panels\nconst compactSizeClasses: Record<RatingSize, SizeClasses> = {\n  small: { star: 'size-3.5', button: 'size-6' },\n  medium: { star: 'size-4.5', button: 'size-6' },\n  large: { star: 'size-5', button: 'size-6' },\n}\n\ntype StarFill = 'on' | 'preview' | 'off'\n\nfunction starTone(fill: StarFill, disabled: boolean) {\n  if (disabled) {\n    return fill === 'off'\n      ? 'fill-none stroke-gray-a6'\n      : 'fill-gray-a7 stroke-gray-a7'\n  }\n  if (fill === 'on') return 'fill-spark-9 stroke-spark-9'\n  if (fill === 'preview') return 'fill-spark-a4 stroke-spark-9'\n  return 'fill-none stroke-gray-a9'\n}\n\nfunction captionTone(hasLabel: boolean, hovered: boolean, disabled: boolean) {\n  if (disabled) return 'text-gray-a9'\n  if (!hasLabel) return 'text-gray-11'\n  return hovered ? 'text-spark-11' : 'text-gray-12'\n}\n\nfunction Star({ className }: { className: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      strokeWidth={1.5}\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className={cn(\n        'transition-colors motion-reduce:transition-none',\n        className,\n      )}\n    >\n      <path d=\"M12.60 3.17 L14.72 8.03 Q15.00 8.67 15.69 8.74 L20.97 9.26 Q22.46 9.40 21.34 10.40 L17.37 13.91 Q16.85 14.38 17.00 15.06 L18.14 20.23 Q18.47 21.70 17.17 20.94 L12.60 18.25 Q12.00 17.90 11.40 18.25 L6.83 20.94 Q5.53 21.70 5.86 20.23 L7.00 15.06 Q7.15 14.38 6.63 13.91 L2.66 10.40 Q1.54 9.40 3.03 9.26 L8.31 8.74 Q9.00 8.67 9.28 8.03 L11.40 3.17 Q12.00 1.80 12.60 3.17Z\" />\n    </svg>\n  )\n}\n\ntype RatingStarsProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n>\n\nfunction RatingStars({\n  className,\n  onPointerLeave,\n  onKeyDown,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: RatingStarsProps) {\n  const rating = useRating()\n  const { field, ariaDescribedBy, ariaInvalid } = useFieldControl({\n    ariaDescribedBy: ariaDescribedByProp,\n  })\n  const invalid = useFieldSetInvalid()\n  const { star: starSize, button: buttonSize } = (\n    rating.max > 5 ? compactSizeClasses : sizeClasses\n  )[rating.size]\n  const interactive = !rating.readOnly && !rating.disabled\n  const low = Math.min(rating.value ?? 0, rating.hovered ?? rating.value ?? 0)\n  const high = Math.max(rating.value ?? 0, rating.hovered ?? 0)\n\n  return (\n    <RadioGroupPrimitive<number | null>\n      data-slot=\"rating-stars\"\n      data-invalid={invalid}\n      // a read-only FieldLabel renders the Field's labelId and drops a caller id\n      aria-labelledby={\n        ariaLabelledBy ?? (field?.readOnly ? field.labelId : undefined)\n      }\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={ariaInvalid}\n      value={rating.value}\n      onValueChange={(next) => next !== null && rating.setValue(next)}\n      readOnly={rating.readOnly}\n      disabled={rating.disabled}\n      name={rating.name}\n      className={cn('flex', className)}\n      onPointerLeave={(event) => {\n        rating.setHovered(null)\n        onPointerLeave?.(event)\n      }}\n      onKeyDown={(event) => {\n        rating.setHovered(null)\n        onKeyDown?.(event)\n      }}\n      {...props}\n    >\n      {Array.from({ length: rating.max }, (_, index) => {\n        const star = index + 1\n        const fill: StarFill =\n          star <= low ? 'on' : star <= high ? 'preview' : 'off'\n        return (\n          <RadioPrimitive.Root\n            key={star}\n            value={star}\n            aria-label={rating.labels?.[index] ?? String(star)}\n            data-slot=\"rating-star\"\n            data-fill={fill}\n            // ARIA allows aria-readonly on the radiogroup, which Base UI also sets, not on a radio\n            aria-readonly={undefined}\n            nativeButton\n            render={<button />}\n            onPointerEnter={\n              interactive ? () => rating.setHovered(star) : undefined\n            }\n            className={cn(\n              // p-0 keeps the box against the UA button padding without preflight;\n              // the px floor keeps axe's 24px target size when [data-scaling] shrinks rems\n              'inline-flex min-h-[24px] min-w-[24px] shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 touch-target-row any-pointer-coarse:min-w-11',\n              'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              'data-disabled:cursor-not-allowed data-readonly:cursor-default',\n              buttonSize,\n            )}\n          >\n            <Star className={cn(starSize, starTone(fill, rating.disabled))} />\n          </RadioPrimitive.Root>\n        )\n      })}\n    </RadioGroupPrimitive>\n  )\n}\n\nconst captionTextSize: Record<RatingSize, string> = {\n  small: 'text-[0.8125rem]',\n  medium: 'text-sm',\n  large: 'text-base',\n}\n\nfunction RatingCaption({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) {\n  const rating = useRating()\n  const shown = rating.hovered ?? rating.value\n  const label = shown ? rating.labels?.[shown - 1] : undefined\n\n  return (\n    <p\n      data-slot=\"rating-caption\"\n      // the stars already carry each label as their accessible name\n      aria-hidden=\"true\"\n      // axe skips contrast on inactive text, and the dim tone is the disabled cue\n      aria-disabled={rating.disabled || undefined}\n      className={cn(\n        'leading-5',\n        captionTextSize[rating.size],\n        label !== undefined && 'font-medium',\n        captionTone(label !== undefined, !!rating.hovered, rating.disabled),\n        className,\n      )}\n      {...props}\n    >\n      {label ?? children}\n    </p>\n  )\n}\n\nexport { Rating, RatingCaption, RatingStars }\nexport type { RatingProps, RatingStarsProps }\n"],"mappings":";;;;;;;;;;;AAqBA,MAAM,gBAAgBA,MAAM,cAAyC,IAAI;AAEzE,SAAS,YAAY;CACnB,MAAM,UAAUA,MAAM,WAAW,aAAa;CAC9C,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,6CAA6C;CAC3E,OAAO;AACT;AAmBA,SAAS,OAAO,EACd,OAAO,WACP,eAAe,MACf,eACA,MAAM,GACN,QACA,OAAO,UACP,WAAW,OACX,WAAW,OACX,MACA,WACA,UACA,GAAG,SACW;CACd,MAAM,CAAC,cAAc,mBAAmBA,MAAM,SAAS,YAAY;CACnE,MAAM,CAAC,SAAS,cAAcA,MAAM,SAAwB,IAAI;CAChE,MAAM,QAAQ,cAAc,KAAA,IAAY,eAAe;CAEvD,MAAM,WAAWA,MAAM,aACpB,SAAiB;EAChB,gBAAgB,IAAI;EACpB,gBAAgB,IAAI;CACtB,GACA,CAAC,aAAa,CAChB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,cAAc,UAAf;EACE,OAAO;GACL;GACA;GACA,SAAS,YAAY,WAAW,OAAO;GACvC;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,aAAU;GACV,YAAA,GAAA,GAAA,IACE,mEACA,SACF;GACA,GAAI;GAEH;EACE,CAAA;CACiB,CAAA;AAE5B;AAIA,MAAM,cAA+C;CACnD,OAAO;EAAE,MAAM;EAAU,QAAQ;CAAS;CAC1C,QAAQ;EAAE,MAAM;EAAU,QAAQ;CAAS;CAC3C,OAAO;EAAE,MAAM;EAAU,QAAQ;CAAU;AAC7C;AAGA,MAAM,qBAAsD;CAC1D,OAAO;EAAE,MAAM;EAAY,QAAQ;CAAS;CAC5C,QAAQ;EAAE,MAAM;EAAY,QAAQ;CAAS;CAC7C,OAAO;EAAE,MAAM;EAAU,QAAQ;CAAS;AAC5C;AAIA,SAAS,SAAS,MAAgB,UAAmB;CACnD,IAAI,UACF,OAAO,SAAS,QACZ,6BACA;CAEN,IAAI,SAAS,MAAM,OAAO;CAC1B,IAAI,SAAS,WAAW,OAAO;CAC/B,OAAO;AACT;AAEA,SAAS,YAAY,UAAmB,SAAkB,UAAmB;CAC3E,IAAI,UAAU,OAAO;CACrB,IAAI,CAAC,UAAU,OAAO;CACtB,OAAO,UAAU,kBAAkB;AACrC;AAEA,SAAS,KAAK,EAAE,aAAoC;CAClD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,OAAM;EACN,SAAQ;EACR,aAAa;EACb,gBAAe;EACf,eAAY;EACZ,YAAA,GAAA,GAAA,IACE,mDACA,SACF;YAEA,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,GAAE,kXAAmX,CAAA;CACxX,CAAA;AAET;AAOA,SAAS,YAAY,EACnB,WACA,gBACA,WACA,mBAAmB,gBACnB,oBAAoB,qBACpB,GAAG,SACgB;CACnB,MAAM,SAAS,UAAU;CACzB,MAAM,EAAE,OAAO,iBAAiB,gBAAgBC,yBAAAA,gBAAgB,EAC9D,iBAAiB,oBACnB,CAAC;CACD,MAAM,UAAUC,yBAAAA,mBAAmB;CACnC,MAAM,EAAE,MAAM,UAAU,QAAQ,gBAC9B,OAAO,MAAM,IAAI,qBAAqB,aACtC,OAAO;CACT,MAAM,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO;CAChD,MAAM,MAAM,KAAK,IAAI,OAAO,SAAS,GAAG,OAAO,WAAW,OAAO,SAAS,CAAC;CAC3E,MAAM,OAAO,KAAK,IAAI,OAAO,SAAS,GAAG,OAAO,WAAW,CAAC;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAACC,2BAAAA,YAAD;EACE,aAAU;EACV,gBAAc;EAEd,mBACE,mBAAmB,OAAO,WAAW,MAAM,UAAU,KAAA;EAEvD,oBAAkB;EAClB,gBAAc;EACd,OAAO,OAAO;EACd,gBAAgB,SAAS,SAAS,QAAQ,OAAO,SAAS,IAAI;EAC9D,UAAU,OAAO;EACjB,UAAU,OAAO;EACjB,MAAM,OAAO;EACb,YAAA,GAAA,GAAA,IAAc,QAAQ,SAAS;EAC/B,iBAAiB,UAAU;GACzB,OAAO,WAAW,IAAI;GACtB,iBAAiB,KAAK;EACxB;EACA,YAAY,UAAU;GACpB,OAAO,WAAW,IAAI;GACtB,YAAY,KAAK;EACnB;EACA,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,OAAO,IAAI,IAAI,GAAG,UAAU;GAChD,MAAM,OAAO,QAAQ;GACrB,MAAM,OACJ,QAAQ,MAAM,OAAO,QAAQ,OAAO,YAAY;GAClD,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,MAAe,MAAhB;IAEE,OAAO;IACP,cAAY,OAAO,SAAS,UAAU,OAAO,IAAI;IACjD,aAAU;IACV,aAAW;IAEX,iBAAe,KAAA;IACf,cAAA;IACA,QAAQ,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;IACjB,gBACE,oBAAoB,OAAO,WAAW,IAAI,IAAI,KAAA;IAEhD,YAAA,GAAA,GAAA,IAGE,iLACA,iFACA,iEACA,UACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAM,YAAA,GAAA,GAAA,IAAc,UAAU,SAAS,MAAM,OAAO,QAAQ,CAAC,EAAI,CAAA;GAC9C,GAtBd,IAsBc;EAEzB,CAAC;CACkB,CAAA;AAEzB;AAEA,MAAM,kBAA8C;CAClD,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,SAAS,cAAc,EACrB,WACA,UACA,GAAG,SAC0C;CAC7C,MAAM,SAAS,UAAU;CACzB,MAAM,QAAQ,OAAO,WAAW,OAAO;CACvC,MAAM,QAAQ,QAAQ,OAAO,SAAS,QAAQ,KAAK,KAAA;CAEnD,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,aAAU;EAEV,eAAY;EAEZ,iBAAe,OAAO,YAAY,KAAA;EAClC,YAAA,GAAA,GAAA,IACE,aACA,gBAAgB,OAAO,OACvB,UAAU,KAAA,KAAa,eACvB,YAAY,UAAU,KAAA,GAAW,CAAC,CAAC,OAAO,SAAS,OAAO,QAAQ,GAClE,SACF;EACA,GAAI;YAEH,SAAS;CACT,CAAA;AAEP"}

package/dist/components/rating.d.cts

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/rating.d.ts
+type RatingSize = 'small' | 'medium' | 'large';
+interface RatingProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+  /** The chosen star, 1-based. `null` means nothing is chosen yet. */
+  value?: number | null;
+  defaultValue?: number | null;
+  onValueChange?: (value: number) => void;
+  max?: number;
+  /** One label per star: the star's accessible name and the caption text. */
+  labels?: string[];
+  size?: RatingSize;
+  readOnly?: boolean;
+  disabled?: boolean;
+  name?: string;
+}
+declare function Rating({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  max,
+  labels,
+  size,
+  readOnly,
+  disabled,
+  name,
+  className,
+  children,
+  ...props
+}: RatingProps): import("react/jsx-runtime").JSX.Element;
+type RatingStarsProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'>;
+declare function RatingStars({
+  className,
+  onPointerLeave,
+  onKeyDown,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedByProp,
+  ...props
+}: RatingStarsProps): import("react/jsx-runtime").JSX.Element;
+declare function RatingCaption({
+  className,
+  children,
+  ...props
+}: React$1.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Rating, RatingCaption, type RatingProps, RatingStars, type RatingStarsProps };
+//# sourceMappingURL=rating.d.cts.map

package/dist/components/rating.d.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/rating.d.ts
+type RatingSize = 'small' | 'medium' | 'large';
+interface RatingProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+  /** The chosen star, 1-based. `null` means nothing is chosen yet. */
+  value?: number | null;
+  defaultValue?: number | null;
+  onValueChange?: (value: number) => void;
+  max?: number;
+  /** One label per star: the star's accessible name and the caption text. */
+  labels?: string[];
+  size?: RatingSize;
+  readOnly?: boolean;
+  disabled?: boolean;
+  name?: string;
+}
+declare function Rating({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  max,
+  labels,
+  size,
+  readOnly,
+  disabled,
+  name,
+  className,
+  children,
+  ...props
+}: RatingProps): import("react/jsx-runtime").JSX.Element;
+type RatingStarsProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'>;
+declare function RatingStars({
+  className,
+  onPointerLeave,
+  onKeyDown,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedByProp,
+  ...props
+}: RatingStarsProps): import("react/jsx-runtime").JSX.Element;
+declare function RatingCaption({
+  className,
+  children,
+  ...props
+}: React$1.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Rating, RatingCaption, type RatingProps, RatingStars, type RatingStarsProps };
+//# sourceMappingURL=rating.d.ts.map