@epilot/spark-ui 1.0.0-alpha.6 → 1.0.0-alpha.8

package/dist/components/tooltip.cjs

@@ -39,24 +39,34 @@ const TooltipContent = ({ className, hideArrow = false, variant = "default", chi
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_tooltip.Tooltip.Popup, {
 			"data-slot": "tooltip-content",
 			"data-variant": variant,
-			className: (0, cnfast.cn)("z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1", "data-ending-style:opacity-0 data-ending-style:duration-0", "data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1", "data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1", className),
+			className: (0, cnfast.cn)("z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1", "data-ending-style:opacity-0 data-ending-style:duration-0", "data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1", "data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1", className),
 			...props,
 			children: [children, !hideArrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Arrow, {
 				"data-variant": variant,
-				className: (0, cnfast.cn)("z-50 size-2.5 rotate-45 rounded-[2px]", "data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]", "data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12", "data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12")
+				className: (0, cnfast.cn)("z-50", "data-[side=bottom]:top-[-8px]", "data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180", "data-[side=left]:right-[-13px] data-[side=left]:rotate-90", "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90", "data-[variant=default]:text-gray-12", "data-[variant=destructive]:text-red-12"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					fill: "none",
+					height: "10",
+					viewBox: "0 0 20 10",
+					width: "20",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+						fill: "currentColor"
+					})
+				})
 			})]
 		})
 	}) });
 };
-const InfoTooltip = ({ content, label }) => {
+const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			"aria-label": `About ${label}`,
+			"aria-label": ariaLabel ?? label,
 			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-			className: "text-[14px]!",
+			className: "text-sm!",
 			name: "info"
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {

package/dist/components/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}
+{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,yCACD;cAED,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAE;MACF,MAAK;MACL,CAAA;KACE,CAAA;IACiB,CAAA,CAEJ;;EACG,CAAA,EACN,CAAA;;AAU9B,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;AACtB,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAW,MAAK;GAAS,CAAA;EACpC,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}

package/dist/components/tooltip.d.cts

@@ -37,10 +37,12 @@ declare const TooltipContent: ({
 interface InfoTooltipProps {
   content: string;
   label: string;
+  'aria-label'?: string;
 }
 declare const InfoTooltip: ({
   content,
-  label
+  label,
+  "aria-label": ariaLabel
 }: InfoTooltipProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { InfoTooltip, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip.d.ts

@@ -37,10 +37,12 @@ declare const TooltipContent: ({
 interface InfoTooltipProps {
   content: string;
   label: string;
+  'aria-label'?: string;
 }
 declare const InfoTooltip: ({
   content,
-  label
+  label,
+  "aria-label": ariaLabel
 }: InfoTooltipProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { InfoTooltip, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip.js

@@ -36,24 +36,34 @@ const TooltipContent = ({ className, hideArrow = false, variant = "default", chi
 		children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
 			"data-slot": "tooltip-content",
 			"data-variant": variant,
-			className: cn("z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1", "data-ending-style:opacity-0 data-ending-style:duration-0", "data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1", "data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1", className),
+			className: cn("z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1", "data-ending-style:opacity-0 data-ending-style:duration-0", "data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1", "data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1", className),
 			...props,
 			children: [children, !hideArrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
 				"data-variant": variant,
-				className: cn("z-50 size-2.5 rotate-45 rounded-[2px]", "data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]", "data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12", "data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12")
+				className: cn("z-50", "data-[side=bottom]:top-[-8px]", "data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180", "data-[side=left]:right-[-13px] data-[side=left]:rotate-90", "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90", "data-[variant=default]:text-gray-12", "data-[variant=destructive]:text-red-12"),
+				children: /* @__PURE__ */ jsx("svg", {
+					fill: "none",
+					height: "10",
+					viewBox: "0 0 20 10",
+					width: "20",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+						fill: "currentColor"
+					})
+				})
 			})]
 		})
 	}) });
 };
-const InfoTooltip = ({ content, label }) => {
+const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		render: /* @__PURE__ */ jsx("button", {
-			"aria-label": `About ${label}`,
+			"aria-label": ariaLabel ?? label,
 			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ jsx(MaterialSymbol, {
-			className: "text-[14px]!",
+			className: "text-sm!",
 			name: "info"
 		})
 	}), /* @__PURE__ */ jsx(TooltipContent, {

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,oBAAC,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}
+{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,yCACD;cAED,oBAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,oBAAC,QAAD;MACE,GAAE;MACF,MAAK;MACL,CAAA;KACE,CAAA;IACiB,CAAA,CAEJ;;EACG,CAAA,EACN,CAAA;;AAU9B,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;AACtB,QACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,oBAAC,gBAAD;GAAgB,WAAU;GAAW,MAAK;GAAS,CAAA;EACpC,CAAA,EACjB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}

package/dist/styles/spark-default.css

@@ -706,6 +706,7 @@
   [data-card-color='accent'],
   :where([data-card-color='accent'] .spark-theme) {
     --spark-card-c-soft: var(--spark-a3);
+    --spark-card-c-soft-hover: var(--spark-a4);
     --spark-card-c-surface: var(--spark-surface);
     --spark-card-c-border: var(--spark-a6);
     --spark-card-c-solid: var(--spark-9);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/spark-ui",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.8",
   "description": "React UI component library from Spark SDK",
   "license": "Apache-2.0",
   "author": "epilot",