@epilot/spark-ui 0.12.1 → 0.12.2

package/dist/components/accordion.cjs

@@ -4,8 +4,8 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_accordion = require("@base-ui/react/accordion");
+let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {

package/dist/components/accordion.js

@@ -2,8 +2,8 @@
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {

package/dist/components/attachment.d.cts

@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/attachment.d.ts
 declare const attachmentVariants: (props?: ({
-  size?: "sm" | "default" | "xs" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Attachment({

package/dist/components/attachment.d.ts

@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/attachment.d.ts
 declare const attachmentVariants: (props?: ({
-  size?: "sm" | "default" | "xs" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Attachment({

package/dist/components/bubble.d.cts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "outline" | "default" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
+  variant?: "default" | "ghost" | "outline" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/bubble.d.ts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "outline" | "default" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
+  variant?: "default" | "ghost" | "outline" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/button.d.cts

@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
-  color?: "accent" | "neutral" | "danger" | null | undefined;
+  color?: "neutral" | "accent" | "danger" | null | undefined;
   size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';

package/dist/components/button.d.ts

@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
-  color?: "accent" | "neutral" | "danger" | null | undefined;
+  color?: "neutral" | "accent" | "danger" | null | undefined;
   size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';

package/dist/components/callout.cjs

@@ -14,7 +14,8 @@ const calloutVariants = (0, class_variance_authority.cva)("group/callout flex w-
 		error: "bg-base-error-soft text-error",
 		success: "bg-base-success-soft text-success",
 		warning: "bg-base-warning-soft text-warning",
-		info: "bg-base-info-soft text-info"
+		info: "bg-base-info-soft text-info",
+		neutral: "bg-base-gray-soft text-gray"
 	} },
 	defaultVariants: { variant: "info" }
 });
@@ -34,6 +35,10 @@ const CALLOUT_ICONS = {
 	info: {
 		name: "info",
 		className: "text-info-light"
+	},
+	neutral: {
+		name: "info",
+		className: "text-gray-light"
 	}
 };
 const CalloutTitle = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -51,7 +56,8 @@ const CALLOUT_ACTION_COLORS = {
 	error: "bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4",
 	success: "bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4",
 	warning: "bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4",
-	info: "bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4"
+	info: "bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4",
+	neutral: "bg-base-gray-soft text-gray hover:bg-gray-a4 focus-visible:bg-gray-a4"
 };
 const CalloutAction = ({ className, align = "start", ...props }) => {
 	const calloutVariant = react.useContext(CalloutVariantContext);

package/dist/components/callout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"callout.cjs","names":["React","Button","MaterialSymbol"],"sources":["../../src/components/callout.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype CalloutVariant = 'error' | 'info' | 'success' | 'warning'\n\nconst calloutVariants = cva(\n  'group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-[color,background-color,opacity,scale] duration-150 ease-out motion-reduce:transition-none starting:scale-95 starting:opacity-0',\n  {\n    variants: {\n      variant: {\n        error: 'bg-base-error-soft text-error',\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        info: 'bg-base-info-soft text-info',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n)\n\nconst CALLOUT_ICONS: Record<\n  CalloutVariant,\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  error: { name: 'cancel', className: 'text-error-light' },\n  success: { name: 'check_circle', className: 'text-success-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  info: { name: 'info', className: 'text-info-light' },\n}\n\ninterface CalloutProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof calloutVariants> {\n  /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */\n  icon?: MaterialSymbolIconName | false\n}\n\nconst CalloutTitle = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    data-slot=\"callout-title\"\n    className={cn('text-base leading-5 font-semibold', className)}\n    {...props}\n  />\n)\n\nconst CalloutDescription = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) => (\n  <p\n    data-slot=\"callout-description\"\n    className={cn('text-sm', className)}\n    {...props}\n  />\n)\n\nconst CalloutVariantContext = React.createContext<CalloutVariant>('info')\n\nconst CALLOUT_ACTION_COLORS: Record<CalloutVariant, string> = {\n  error:\n    'bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4',\n  success:\n    'bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4',\n  warning:\n    'bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4',\n  info: 'bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4',\n}\n\ntype CalloutActionType = Omit<ButtonProps, 'styleVariant' | 'color'> & {\n  align?: 'start' | 'end'\n}\n\nconst CalloutAction = ({\n  className,\n  align = 'start',\n  ...props\n}: CalloutActionType) => {\n  const calloutVariant = React.useContext(CalloutVariantContext)\n\n  return (\n    <Button\n      data-slot=\"callout-action\"\n      size=\"small\"\n      styleVariant=\"surface\"\n      color=\"neutral\"\n      className={cn(\n        'mt-2 w-fit',\n        { 'self-start': align === 'start', 'self-end': align === 'end' },\n        CALLOUT_ACTION_COLORS[calloutVariant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst Callout = ({\n  variant = 'info',\n  icon,\n  className,\n  children,\n  ...props\n}: CalloutProps) => {\n  const variantIcon = CALLOUT_ICONS[variant ?? 'info']\n\n  return (\n    <CalloutVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        data-slot=\"callout\"\n        className={cn(calloutVariants({ variant }), className)}\n        {...props}\n      >\n        {icon !== false && (\n          <MaterialSymbol\n            className={cn(\n              'inline-flex shrink-0 items-center [--spark-icon-size:calc(20px*var(--spark-scaling,1))]',\n              variantIcon?.className,\n            )}\n            name={icon ?? variantIcon.name}\n          />\n        )}\n        <div className=\"flex w-full min-w-0 flex-col gap-1\">{children}</div>\n      </div>\n    </CalloutVariantContext.Provider>\n  )\n}\n\nexport {\n  Callout,\n  CalloutAction,\n  CalloutDescription,\n  CalloutTitle,\n  calloutVariants,\n}\nexport type { CalloutProps, CalloutVariant }\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAAA,GAAA,yBAAA,KACJ,uNACA;CACE,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,MAAM,gBAGF;CACF,OAAO;EAAE,MAAM;EAAU,WAAW;CAAmB;CACvD,SAAS;EAAE,MAAM;EAAgB,WAAW;CAAqB;CACjE,SAAS;EAAE,MAAM;EAAW,WAAW;CAAqB;CAC5D,MAAM;EAAE,MAAM;EAAQ,WAAW;CAAkB;AACrD;AAUA,MAAM,gBAAgB,EACpB,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;CACE,aAAU;CACV,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACE,aAAU;CACV,YAAA,GAAA,OAAA,IAAc,WAAW,SAAS;CAClC,GAAI;AACL,CAAA;AAGH,MAAM,wBAAwBA,MAAM,cAA8B,MAAM;AAExE,MAAM,wBAAwD;CAC5D,OACE;CACF,SACE;CACF,SACE;CACF,MAAM;AACR;AAMA,MAAM,iBAAiB,EACrB,WACA,QAAQ,SACR,GAAG,YACoB;CACvB,MAAM,iBAAiBA,MAAM,WAAW,qBAAqB;CAE7D,OACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAa;EACb,OAAM;EACN,YAAA,GAAA,OAAA,IACE,cACA;GAAE,cAAc,UAAU;GAAS,YAAY,UAAU;EAAM,GAC/D,sBAAsB,iBACtB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,WAAW,EACf,UAAU,QACV,MACA,WACA,UACA,GAAG,YACe;CAClB,MAAM,cAAc,cAAc,WAAW;CAE7C,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAsB,UAAvB;EAAgC,OAAO,WAAW;YAChD,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IAAc,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;GACrD,GAAI;aAHN,CAKG,SAAS,SACR,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IACE,YAAA,GAAA,OAAA,IACE,2FACA,aAAa,SACf;IACA,MAAM,QAAQ,YAAY;GAC3B,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA,CAChE;;CACyB,CAAA;AAEpC"}
+{"version":3,"file":"callout.cjs","names":["React","Button","MaterialSymbol"],"sources":["../../src/components/callout.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning'\n\nconst calloutVariants = cva(\n  'group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-[color,background-color,opacity,scale] duration-150 ease-out motion-reduce:transition-none starting:scale-95 starting:opacity-0',\n  {\n    variants: {\n      variant: {\n        error: 'bg-base-error-soft text-error',\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        info: 'bg-base-info-soft text-info',\n        neutral: 'bg-base-gray-soft text-gray',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n)\n\nconst CALLOUT_ICONS: Record<\n  CalloutVariant,\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  error: { name: 'cancel', className: 'text-error-light' },\n  success: { name: 'check_circle', className: 'text-success-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  info: { name: 'info', className: 'text-info-light' },\n  // no severity to signal, so it borrows info's glyph — pass `icon` to change it\n  // or `icon={false}` for a bare panel.\n  neutral: { name: 'info', className: 'text-gray-light' },\n}\n\ninterface CalloutProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof calloutVariants> {\n  /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */\n  icon?: MaterialSymbolIconName | false\n}\n\nconst CalloutTitle = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    data-slot=\"callout-title\"\n    className={cn('text-base leading-5 font-semibold', className)}\n    {...props}\n  />\n)\n\nconst CalloutDescription = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) => (\n  <p\n    data-slot=\"callout-description\"\n    className={cn('text-sm', className)}\n    {...props}\n  />\n)\n\nconst CalloutVariantContext = React.createContext<CalloutVariant>('info')\n\nconst CALLOUT_ACTION_COLORS: Record<CalloutVariant, string> = {\n  error:\n    'bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4',\n  success:\n    'bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4',\n  warning:\n    'bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4',\n  info: 'bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4',\n  neutral:\n    'bg-base-gray-soft text-gray hover:bg-gray-a4 focus-visible:bg-gray-a4',\n}\n\ntype CalloutActionType = Omit<ButtonProps, 'styleVariant' | 'color'> & {\n  align?: 'start' | 'end'\n}\n\nconst CalloutAction = ({\n  className,\n  align = 'start',\n  ...props\n}: CalloutActionType) => {\n  const calloutVariant = React.useContext(CalloutVariantContext)\n\n  return (\n    <Button\n      data-slot=\"callout-action\"\n      size=\"small\"\n      styleVariant=\"surface\"\n      color=\"neutral\"\n      className={cn(\n        'mt-2 w-fit',\n        { 'self-start': align === 'start', 'self-end': align === 'end' },\n        CALLOUT_ACTION_COLORS[calloutVariant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst Callout = ({\n  variant = 'info',\n  icon,\n  className,\n  children,\n  ...props\n}: CalloutProps) => {\n  const variantIcon = CALLOUT_ICONS[variant ?? 'info']\n\n  return (\n    <CalloutVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        data-slot=\"callout\"\n        className={cn(calloutVariants({ variant }), className)}\n        {...props}\n      >\n        {icon !== false && (\n          <MaterialSymbol\n            className={cn(\n              'inline-flex shrink-0 items-center [--spark-icon-size:calc(20px*var(--spark-scaling,1))]',\n              variantIcon?.className,\n            )}\n            name={icon ?? variantIcon.name}\n          />\n        )}\n        <div className=\"flex w-full min-w-0 flex-col gap-1\">{children}</div>\n      </div>\n    </CalloutVariantContext.Provider>\n  )\n}\n\nexport {\n  Callout,\n  CalloutAction,\n  CalloutDescription,\n  CalloutTitle,\n  calloutVariants,\n}\nexport type { CalloutProps, CalloutVariant }\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAAA,GAAA,yBAAA,KACJ,uNACA;CACE,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,SAAS;EACT,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,MAAM,gBAGF;CACF,OAAO;EAAE,MAAM;EAAU,WAAW;CAAmB;CACvD,SAAS;EAAE,MAAM;EAAgB,WAAW;CAAqB;CACjE,SAAS;EAAE,MAAM;EAAW,WAAW;CAAqB;CAC5D,MAAM;EAAE,MAAM;EAAQ,WAAW;CAAkB;CAGnD,SAAS;EAAE,MAAM;EAAQ,WAAW;CAAkB;AACxD;AAUA,MAAM,gBAAgB,EACpB,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;CACE,aAAU;CACV,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACE,aAAU;CACV,YAAA,GAAA,OAAA,IAAc,WAAW,SAAS;CAClC,GAAI;AACL,CAAA;AAGH,MAAM,wBAAwBA,MAAM,cAA8B,MAAM;AAExE,MAAM,wBAAwD;CAC5D,OACE;CACF,SACE;CACF,SACE;CACF,MAAM;CACN,SACE;AACJ;AAMA,MAAM,iBAAiB,EACrB,WACA,QAAQ,SACR,GAAG,YACoB;CACvB,MAAM,iBAAiBA,MAAM,WAAW,qBAAqB;CAE7D,OACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAa;EACb,OAAM;EACN,YAAA,GAAA,OAAA,IACE,cACA;GAAE,cAAc,UAAU;GAAS,YAAY,UAAU;EAAM,GAC/D,sBAAsB,iBACtB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,WAAW,EACf,UAAU,QACV,MACA,WACA,UACA,GAAG,YACe;CAClB,MAAM,cAAc,cAAc,WAAW;CAE7C,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAsB,UAAvB;EAAgC,OAAO,WAAW;YAChD,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IAAc,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;GACrD,GAAI;aAHN,CAKG,SAAS,SACR,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IACE,YAAA,GAAA,OAAA,IACE,2FACA,aAAa,SACf;IACA,MAAM,QAAQ,YAAY;GAC3B,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA,CAChE;;CACyB,CAAA;AAEpC"}

package/dist/components/callout.d.cts

@@ -6,9 +6,9 @@ import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/callout.d.ts
-type CalloutVariant = 'error' | 'info' | 'success' | 'warning';
+type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "info" | "warning" | "success" | "error" | "neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/callout.d.ts

@@ -6,9 +6,9 @@ import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/callout.d.ts
-type CalloutVariant = 'error' | 'info' | 'success' | 'warning';
+type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "error" | "success" | "warning" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/callout.js

@@ -11,7 +11,8 @@ const calloutVariants = cva("group/callout flex w-full items-start gap-2 rounded
 		error: "bg-base-error-soft text-error",
 		success: "bg-base-success-soft text-success",
 		warning: "bg-base-warning-soft text-warning",
-		info: "bg-base-info-soft text-info"
+		info: "bg-base-info-soft text-info",
+		neutral: "bg-base-gray-soft text-gray"
 	} },
 	defaultVariants: { variant: "info" }
 });
@@ -31,6 +32,10 @@ const CALLOUT_ICONS = {
 	info: {
 		name: "info",
 		className: "text-info-light"
+	},
+	neutral: {
+		name: "info",
+		className: "text-gray-light"
 	}
 };
 const CalloutTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
@@ -48,7 +53,8 @@ const CALLOUT_ACTION_COLORS = {
 	error: "bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4",
 	success: "bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4",
 	warning: "bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4",
-	info: "bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4"
+	info: "bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4",
+	neutral: "bg-base-gray-soft text-gray hover:bg-gray-a4 focus-visible:bg-gray-a4"
 };
 const CalloutAction = ({ className, align = "start", ...props }) => {
 	const calloutVariant = React$1.useContext(CalloutVariantContext);

package/dist/components/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","names":["React"],"sources":["../../src/components/callout.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype CalloutVariant = 'error' | 'info' | 'success' | 'warning'\n\nconst calloutVariants = cva(\n  'group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-[color,background-color,opacity,scale] duration-150 ease-out motion-reduce:transition-none starting:scale-95 starting:opacity-0',\n  {\n    variants: {\n      variant: {\n        error: 'bg-base-error-soft text-error',\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        info: 'bg-base-info-soft text-info',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n)\n\nconst CALLOUT_ICONS: Record<\n  CalloutVariant,\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  error: { name: 'cancel', className: 'text-error-light' },\n  success: { name: 'check_circle', className: 'text-success-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  info: { name: 'info', className: 'text-info-light' },\n}\n\ninterface CalloutProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof calloutVariants> {\n  /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */\n  icon?: MaterialSymbolIconName | false\n}\n\nconst CalloutTitle = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    data-slot=\"callout-title\"\n    className={cn('text-base leading-5 font-semibold', className)}\n    {...props}\n  />\n)\n\nconst CalloutDescription = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) => (\n  <p\n    data-slot=\"callout-description\"\n    className={cn('text-sm', className)}\n    {...props}\n  />\n)\n\nconst CalloutVariantContext = React.createContext<CalloutVariant>('info')\n\nconst CALLOUT_ACTION_COLORS: Record<CalloutVariant, string> = {\n  error:\n    'bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4',\n  success:\n    'bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4',\n  warning:\n    'bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4',\n  info: 'bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4',\n}\n\ntype CalloutActionType = Omit<ButtonProps, 'styleVariant' | 'color'> & {\n  align?: 'start' | 'end'\n}\n\nconst CalloutAction = ({\n  className,\n  align = 'start',\n  ...props\n}: CalloutActionType) => {\n  const calloutVariant = React.useContext(CalloutVariantContext)\n\n  return (\n    <Button\n      data-slot=\"callout-action\"\n      size=\"small\"\n      styleVariant=\"surface\"\n      color=\"neutral\"\n      className={cn(\n        'mt-2 w-fit',\n        { 'self-start': align === 'start', 'self-end': align === 'end' },\n        CALLOUT_ACTION_COLORS[calloutVariant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst Callout = ({\n  variant = 'info',\n  icon,\n  className,\n  children,\n  ...props\n}: CalloutProps) => {\n  const variantIcon = CALLOUT_ICONS[variant ?? 'info']\n\n  return (\n    <CalloutVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        data-slot=\"callout\"\n        className={cn(calloutVariants({ variant }), className)}\n        {...props}\n      >\n        {icon !== false && (\n          <MaterialSymbol\n            className={cn(\n              'inline-flex shrink-0 items-center [--spark-icon-size:calc(20px*var(--spark-scaling,1))]',\n              variantIcon?.className,\n            )}\n            name={icon ?? variantIcon.name}\n          />\n        )}\n        <div className=\"flex w-full min-w-0 flex-col gap-1\">{children}</div>\n      </div>\n    </CalloutVariantContext.Provider>\n  )\n}\n\nexport {\n  Callout,\n  CalloutAction,\n  CalloutDescription,\n  CalloutTitle,\n  calloutVariants,\n}\nexport type { CalloutProps, CalloutVariant }\n"],"mappings":";;;;;;;;AAWA,MAAM,kBAAkB,IACtB,uNACA;CACE,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,MAAM,gBAGF;CACF,OAAO;EAAE,MAAM;EAAU,WAAW;CAAmB;CACvD,SAAS;EAAE,MAAM;EAAgB,WAAW;CAAqB;CACjE,SAAS;EAAE,MAAM;EAAW,WAAW;CAAqB;CAC5D,MAAM;EAAE,MAAM;EAAQ,WAAW;CAAkB;AACrD;AAUA,MAAM,gBAAgB,EACpB,WACA,GAAG,YAEH,oBAAC,QAAD;CACE,aAAU;CACV,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,oBAAC,KAAD;CACE,aAAU;CACV,WAAW,GAAG,WAAW,SAAS;CAClC,GAAI;AACL,CAAA;AAGH,MAAM,wBAAwBA,QAAM,cAA8B,MAAM;AAExE,MAAM,wBAAwD;CAC5D,OACE;CACF,SACE;CACF,SACE;CACF,MAAM;AACR;AAMA,MAAM,iBAAiB,EACrB,WACA,QAAQ,SACR,GAAG,YACoB;CACvB,MAAM,iBAAiBA,QAAM,WAAW,qBAAqB;CAE7D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAa;EACb,OAAM;EACN,WAAW,GACT,cACA;GAAE,cAAc,UAAU;GAAS,YAAY,UAAU;EAAM,GAC/D,sBAAsB,iBACtB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,WAAW,EACf,UAAU,QACV,MACA,WACA,UACA,GAAG,YACe;CAClB,MAAM,cAAc,cAAc,WAAW;CAE7C,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO,WAAW;YAChD,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;GACrD,GAAI;aAHN,CAKG,SAAS,SACR,oBAAC,gBAAD;IACE,WAAW,GACT,2FACA,aAAa,SACf;IACA,MAAM,QAAQ,YAAY;GAC3B,CAAA,GAEH,oBAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA,CAChE;;CACyB,CAAA;AAEpC"}
+{"version":3,"file":"callout.js","names":["React"],"sources":["../../src/components/callout.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning'\n\nconst calloutVariants = cva(\n  'group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-[color,background-color,opacity,scale] duration-150 ease-out motion-reduce:transition-none starting:scale-95 starting:opacity-0',\n  {\n    variants: {\n      variant: {\n        error: 'bg-base-error-soft text-error',\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        info: 'bg-base-info-soft text-info',\n        neutral: 'bg-base-gray-soft text-gray',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n)\n\nconst CALLOUT_ICONS: Record<\n  CalloutVariant,\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  error: { name: 'cancel', className: 'text-error-light' },\n  success: { name: 'check_circle', className: 'text-success-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  info: { name: 'info', className: 'text-info-light' },\n  // no severity to signal, so it borrows info's glyph — pass `icon` to change it\n  // or `icon={false}` for a bare panel.\n  neutral: { name: 'info', className: 'text-gray-light' },\n}\n\ninterface CalloutProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof calloutVariants> {\n  /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */\n  icon?: MaterialSymbolIconName | false\n}\n\nconst CalloutTitle = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    data-slot=\"callout-title\"\n    className={cn('text-base leading-5 font-semibold', className)}\n    {...props}\n  />\n)\n\nconst CalloutDescription = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) => (\n  <p\n    data-slot=\"callout-description\"\n    className={cn('text-sm', className)}\n    {...props}\n  />\n)\n\nconst CalloutVariantContext = React.createContext<CalloutVariant>('info')\n\nconst CALLOUT_ACTION_COLORS: Record<CalloutVariant, string> = {\n  error:\n    'bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4',\n  success:\n    'bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4',\n  warning:\n    'bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4',\n  info: 'bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4',\n  neutral:\n    'bg-base-gray-soft text-gray hover:bg-gray-a4 focus-visible:bg-gray-a4',\n}\n\ntype CalloutActionType = Omit<ButtonProps, 'styleVariant' | 'color'> & {\n  align?: 'start' | 'end'\n}\n\nconst CalloutAction = ({\n  className,\n  align = 'start',\n  ...props\n}: CalloutActionType) => {\n  const calloutVariant = React.useContext(CalloutVariantContext)\n\n  return (\n    <Button\n      data-slot=\"callout-action\"\n      size=\"small\"\n      styleVariant=\"surface\"\n      color=\"neutral\"\n      className={cn(\n        'mt-2 w-fit',\n        { 'self-start': align === 'start', 'self-end': align === 'end' },\n        CALLOUT_ACTION_COLORS[calloutVariant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst Callout = ({\n  variant = 'info',\n  icon,\n  className,\n  children,\n  ...props\n}: CalloutProps) => {\n  const variantIcon = CALLOUT_ICONS[variant ?? 'info']\n\n  return (\n    <CalloutVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        data-slot=\"callout\"\n        className={cn(calloutVariants({ variant }), className)}\n        {...props}\n      >\n        {icon !== false && (\n          <MaterialSymbol\n            className={cn(\n              'inline-flex shrink-0 items-center [--spark-icon-size:calc(20px*var(--spark-scaling,1))]',\n              variantIcon?.className,\n            )}\n            name={icon ?? variantIcon.name}\n          />\n        )}\n        <div className=\"flex w-full min-w-0 flex-col gap-1\">{children}</div>\n      </div>\n    </CalloutVariantContext.Provider>\n  )\n}\n\nexport {\n  Callout,\n  CalloutAction,\n  CalloutDescription,\n  CalloutTitle,\n  calloutVariants,\n}\nexport type { CalloutProps, CalloutVariant }\n"],"mappings":";;;;;;;;AAWA,MAAM,kBAAkB,IACtB,uNACA;CACE,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,SAAS;EACT,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,MAAM,gBAGF;CACF,OAAO;EAAE,MAAM;EAAU,WAAW;CAAmB;CACvD,SAAS;EAAE,MAAM;EAAgB,WAAW;CAAqB;CACjE,SAAS;EAAE,MAAM;EAAW,WAAW;CAAqB;CAC5D,MAAM;EAAE,MAAM;EAAQ,WAAW;CAAkB;CAGnD,SAAS;EAAE,MAAM;EAAQ,WAAW;CAAkB;AACxD;AAUA,MAAM,gBAAgB,EACpB,WACA,GAAG,YAEH,oBAAC,QAAD;CACE,aAAU;CACV,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,oBAAC,KAAD;CACE,aAAU;CACV,WAAW,GAAG,WAAW,SAAS;CAClC,GAAI;AACL,CAAA;AAGH,MAAM,wBAAwBA,QAAM,cAA8B,MAAM;AAExE,MAAM,wBAAwD;CAC5D,OACE;CACF,SACE;CACF,SACE;CACF,MAAM;CACN,SACE;AACJ;AAMA,MAAM,iBAAiB,EACrB,WACA,QAAQ,SACR,GAAG,YACoB;CACvB,MAAM,iBAAiBA,QAAM,WAAW,qBAAqB;CAE7D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAa;EACb,OAAM;EACN,WAAW,GACT,cACA;GAAE,cAAc,UAAU;GAAS,YAAY,UAAU;EAAM,GAC/D,sBAAsB,iBACtB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,WAAW,EACf,UAAU,QACV,MACA,WACA,UACA,GAAG,YACe;CAClB,MAAM,cAAc,cAAc,WAAW;CAE7C,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO,WAAW;YAChD,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;GACrD,GAAI;aAHN,CAKG,SAAS,SACR,oBAAC,gBAAD;IACE,WAAW,GACT,2FACA,aAAa,SACf;IACA,MAAM,QAAQ,YAAY;GAC3B,CAAA,GAEH,oBAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA,CAChE;;CACyB,CAAA;AAEpC"}

package/dist/components/input-otp.cjs

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let _base_ui_react_otp_field = require("@base-ui/react/otp-field");

package/dist/components/input-otp.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { OTPField } from "@base-ui/react/otp-field";

package/dist/components/input.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/input.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/components/select.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/select.js

@@ -2,8 +2,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
-import { boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { boxChrome } from "../lib/input-box-variants.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/textarea.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/textarea.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/spark-ui",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "React UI component library from Spark SDK",
   "homepage": "https://spark-ui.epilot.io/docs/ui",
   "license": "Apache-2.0",