@epilot/spark-ui 0.10.0

package/dist/components/attachment.js

@@ -0,0 +1,108 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { Button } from "./button.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/attachment.tsx
+const attachmentVariants = cva("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-gray-2 text-gray-a12 transition-colors focus-within:ring-1 focus-within:ring-spark-a7/50 has-[>a,>button]:hover:bg-gray-a2 data-[state=error]:border-red-a6 data-[state=idle]:border-dashed", { variants: {
+	size: {
+		default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+		sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+		xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+	},
+	orientation: {
+		horizontal: "min-w-40 items-center",
+		vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+	}
+} });
+function Attachment({ className, state = "done", size = "default", orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment",
+		"data-state": state,
+		"data-size": size,
+		"data-orientation": orientation,
+		className: cn(attachmentVariants({
+			size,
+			orientation
+		}), className),
+		...props
+	});
+}
+const attachmentMediaVariants = cva("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-gray-a3 text-gray group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-red-a3 group-data-[state=error]/attachment:text-error group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
+	variants: { variant: {
+		icon: "",
+		image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+	} },
+	defaultVariants: { variant: "icon" }
+});
+function AttachmentMedia({ className, variant = "icon", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-media",
+		"data-variant": variant,
+		className: cn(attachmentMediaVariants({ variant }), className),
+		...props
+	});
+}
+function AttachmentContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-content",
+		className: cn("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", className),
+		...props
+	});
+}
+function AttachmentTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-title",
+		className: cn("block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer", className),
+		...props
+	});
+}
+function AttachmentDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-description",
+		className: cn("mt-0.5 block min-w-0 truncate text-xs text-gray-light group-data-[state=error]/attachment:text-error-light", "max-w-full", className),
+		...props
+	});
+}
+function AttachmentActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-actions",
+		className: cn("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1", className),
+		...props
+	});
+}
+function AttachmentAction({ className, styleVariant, color, size = "icon-small", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "attachment-action",
+		styleVariant: styleVariant ?? "ghost",
+		color: color ?? "neutral",
+		size,
+		className: cn(className),
+		...props
+	});
+}
+function AttachmentTrigger({ className, render, type, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			"data-slot": "attachment-trigger",
+			type: render ? void 0 : type ?? "button",
+			className: cn("absolute inset-0 z-10 outline-none", className)
+		}, props)
+	});
+}
+function AttachmentGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-group",
+		className: cn("no-scrollbar flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className),
+		...props
+	});
+}
+//#endregion
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };
+
+//# sourceMappingURL=attachment.js.map

package/dist/components/attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.js","names":[],"sources":["../../src/components/attachment.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst attachmentVariants = cva(\n  'group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-gray-2 text-gray-a12 transition-colors focus-within:ring-1 focus-within:ring-spark-a7/50 has-[>a,>button]:hover:bg-gray-a2 data-[state=error]:border-red-a6 data-[state=idle]:border-dashed',\n  {\n    variants: {\n      size: {\n        default:\n          'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',\n        sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',\n        xs: 'gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',\n      },\n      orientation: {\n        horizontal: 'min-w-40 items-center',\n        vertical: 'w-24 flex-col has-data-[slot=attachment-content]:w-30',\n      },\n    },\n  },\n)\n\nfunction Attachment({\n  className,\n  state = 'done',\n  size = 'default',\n  orientation = 'horizontal',\n  ...props\n}: React.ComponentProps<'div'> &\n  VariantProps<typeof attachmentVariants> & {\n    state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done'\n  }) {\n  return (\n    <div\n      data-slot=\"attachment\"\n      data-state={state}\n      data-size={size}\n      data-orientation={orientation}\n      className={cn(attachmentVariants({ size, orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nconst attachmentMediaVariants = cva(\n  \"relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-gray-a3 text-gray group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-red-a3 group-data-[state=error]/attachment:text-error group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        icon: '',\n        image:\n          'opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'icon',\n    },\n  },\n)\n\nfunction AttachmentMedia({\n  className,\n  variant = 'icon',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof attachmentMediaVariants>) {\n  return (\n    <div\n      data-slot=\"attachment-media\"\n      data-variant={variant}\n      className={cn(attachmentMediaVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentContent({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"attachment-content\"\n      className={cn(\n        'max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentTitle({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"attachment-title\"\n      className={cn(\n        'block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentDescription({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"attachment-description\"\n      className={cn(\n        'mt-0.5 block min-w-0 truncate text-xs text-gray-light group-data-[state=error]/attachment:text-error-light',\n        'max-w-full',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentActions({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"attachment-actions\"\n      className={cn(\n        'relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentAction({\n  className,\n  styleVariant,\n  color,\n  size = 'icon-small',\n  ...props\n}: ButtonProps) {\n  return (\n    <Button\n      data-slot=\"attachment-action\"\n      styleVariant={styleVariant ?? 'ghost'}\n      color={color ?? 'neutral'}\n      size={size}\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\n// Full-card trigger overlay: `render` (was radix `asChild`) lets consumers swap\n// in an <a> or a custom control while the action buttons keep their own\n// clickable z-layer above it.\nfunction AttachmentTrigger({\n  className,\n  render,\n  type,\n  ...props\n}: useRender.ComponentProps<'button'>) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      {\n        'data-slot': 'attachment-trigger',\n        type: render ? undefined : (type ?? 'button'),\n        className: cn('absolute inset-0 z-10 outline-none', className),\n      } as React.ComponentProps<'button'>,\n      props,\n    ),\n  })\n}\n\nfunction AttachmentGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"attachment-group\"\n      className={cn(\n        'no-scrollbar flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Attachment,\n  AttachmentAction,\n  AttachmentActions,\n  AttachmentContent,\n  AttachmentDescription,\n  AttachmentGroup,\n  AttachmentMedia,\n  AttachmentTitle,\n  AttachmentTrigger,\n}\n"],"mappings":";;;;;;;;;AAOA,MAAM,qBAAqB,IACzB,+RACA,EACE,UAAU;CACR,MAAM;EACJ,SACE;EACF,IAAI;EACJ,IAAI;CACN;CACA,aAAa;EACX,YAAY;EACZ,UAAU;CACZ;AACF,EACF,CACF;AAEA,SAAS,WAAW,EAClB,WACA,QAAQ,QACR,OAAO,WACP,cAAc,cACd,GAAG,SAIA;CACH,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,oBAAkB;EAClB,WAAW,GAAG,mBAAmB;GAAE;GAAM;EAAY,CAAC,GAAG,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,IAC9B,kqBACA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,WACA,UAAU,QACV,GAAG,SAC0E;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,wBAAwB,EAAE,QAAQ,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,kJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,8GACA,cACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6PACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,cACA,OACA,OAAO,cACP,GAAG,SACW;CACd,OACE,oBAAC,QAAD;EACE,aAAU;EACV,cAAc,gBAAgB;EAC9B,OAAO,SAAS;EACV;EACN,WAAW,GAAG,SAAS;EACvB,GAAI;CACL,CAAA;AAEL;AAKA,SAAS,kBAAkB,EACzB,WACA,QACA,MACA,GAAG,SACkC;CACrC,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,aAAa;GACb,MAAM,SAAS,KAAA,IAAa,QAAQ;GACpC,WAAW,GAAG,sCAAsC,SAAS;EAC/D,GACA,KACF;CACF,CAAC;AACH;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/avatar.cjs

@@ -0,0 +1,56 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_lib_accent_colors = require("../lib/accent-colors.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_avatar = require("@base-ui/react/avatar");
+let cnfast = require("cnfast");
+//#region src/components/avatar.tsx
+const sizeClasses = {
+	sm: "size-8 text-xs",
+	md: "size-10 text-sm",
+	lg: "size-14 text-lg",
+	xl: "size-20 text-2xl"
+};
+const squareRadiusClasses = {
+	sm: "rounded-md",
+	md: "rounded-lg",
+	lg: "rounded-xl",
+	xl: "rounded-2xl"
+};
+function avatarInitials(name) {
+	return name.split(" ").map((part) => part.at(0)).filter(Boolean).slice(0, 2).join("").toUpperCase();
+}
+const Avatar = react.forwardRef(({ name, src, initials, icon, size = "md", shape = "circle", styleVariant = "soft", color = "accent", imgProps, className, ...props }, ref) => {
+	const resolvedInitials = initials ?? avatarInitials(name);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_avatar.Avatar.Root, {
+		"data-slot": "avatar",
+		role: "img",
+		"aria-label": name,
+		"data-style": styleVariant,
+		"data-accent-color": require_lib_accent_colors.accentByColor[color],
+		className: (0, cnfast.cn)("inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none", sizeClasses[size], shape === "circle" ? "rounded-full" : squareRadiusClasses[size], "bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--spark-a12))", className),
+		ref,
+		...props,
+		children: [src ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Image, {
+			...imgProps,
+			"data-slot": "avatar-image",
+			src,
+			alt: "",
+			className: "size-full object-cover"
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Fallback, {
+			"data-slot": "avatar-fallback",
+			"aria-hidden": true,
+			className: "flex size-full items-center justify-center",
+			children: resolvedInitials || icon
+		})]
+	});
+});
+Avatar.displayName = "Avatar";
+//#endregion
+exports.Avatar = Avatar;
+exports.avatarInitials = avatarInitials;
+
+//# sourceMappingURL=avatar.cjs.map

package/dist/components/avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.cjs","names":["React","AvatarPrimitive","accentByColor"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype AvatarSize = 'sm' | 'md' | 'lg' | 'xl'\ntype AvatarShape = 'circle' | 'square'\n\ninterface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  name: string\n  src?: string\n  initials?: string\n  icon?: React.ReactNode\n  size?: AvatarSize\n  shape?: AvatarShape\n  styleVariant?: SparkStyle\n  color?: SparkAccentColor\n  imgProps?: Omit<AvatarPrimitive.Image.Props, 'src'>\n}\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  sm: 'size-8 text-xs',\n  md: 'size-10 text-sm',\n  lg: 'size-14 text-lg',\n  xl: 'size-20 text-2xl',\n}\n\n// One token lower than the spec's literal sm→lg/md→xl/lg→2xl/xl→2xl mapping:\n// at the default (medium) theme radius factor, rounded-2xl on a 56px `lg` box\n// is a 24px radius (0.86 of the half-width) — reads as a circle, not a square.\nconst squareRadiusClasses: Record<AvatarSize, string> = {\n  sm: 'rounded-md',\n  md: 'rounded-lg',\n  lg: 'rounded-xl',\n  xl: 'rounded-2xl',\n}\n\nfunction avatarInitials(name: string): string {\n  return name\n    .split(' ')\n    .map((part) => part.at(0))\n    .filter(Boolean)\n    .slice(0, 2)\n    .join('')\n    .toUpperCase()\n}\n\nconst Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  (\n    {\n      name,\n      src,\n      initials,\n      icon,\n      size = 'md',\n      shape = 'circle',\n      styleVariant = 'soft',\n      color = 'accent',\n      imgProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedInitials = initials ?? avatarInitials(name)\n\n    return (\n      <AvatarPrimitive.Root\n        data-slot=\"avatar\"\n        role=\"img\"\n        aria-label={name}\n        data-style={styleVariant}\n        data-accent-color={accentByColor[color]}\n        className={cn(\n          'inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none',\n          sizeClasses[size],\n          shape === 'circle' ? 'rounded-full' : squareRadiusClasses[size],\n          'bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--spark-a12))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {src ? (\n          <AvatarPrimitive.Image\n            {...imgProps}\n            data-slot=\"avatar-image\"\n            src={src}\n            alt=\"\"\n            className=\"size-full object-cover\"\n          />\n        ) : null}\n        <AvatarPrimitive.Fallback\n          data-slot=\"avatar-fallback\"\n          aria-hidden\n          className=\"flex size-full items-center justify-center\"\n        >\n          {resolvedInitials || icon}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    )\n  },\n)\n\nAvatar.displayName = 'Avatar'\n\nexport { Avatar, avatarInitials }\nexport type { AvatarProps, AvatarSize, AvatarShape }\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,cAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAKA,MAAM,sBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,eAAe,MAAsB;CAC5C,OAAO,KACJ,MAAM,GAAG,EACT,KAAK,SAAS,KAAK,GAAG,CAAC,CAAC,EACxB,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,EACP,YAAY;AACjB;AAEA,MAAM,SAASA,MAAM,YAEjB,EACE,MACA,KACA,UACA,MACA,OAAO,MACP,QAAQ,UACR,eAAe,QACf,QAAQ,UACR,UACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,mBAAmB,YAAY,eAAe,IAAI;CAExD,OACE,iBAAA,GAAA,kBAAA,MAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,cAAY;EACZ,qBAAmBC,0BAAAA,cAAc;EACjC,YAAA,GAAA,OAAA,IACE,2GACA,YAAY,OACZ,UAAU,WAAW,iBAAiB,oBAAoB,OAC1D,gGACA,SACF;EACK;EACL,GAAI;YAdN,CAgBG,MACC,iBAAA,GAAA,kBAAA,KAACD,sBAAAA,OAAgB,OAAjB;GACE,GAAI;GACJ,aAAU;GACL;GACL,KAAI;GACJ,WAAU;EACX,CAAA,IACC,MACJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,UAAjB;GACE,aAAU;GACV,eAAA;GACA,WAAU;aAET,oBAAoB;EACG,CAAA,CACN;;AAE1B,CACF;AAEA,OAAO,cAAc"}

package/dist/components/avatar.d.cts

@@ -0,0 +1,26 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import { SparkAccentColor } from "../lib/accent-colors.cjs";
+import * as React$1 from "react";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+
+//#region src/components/avatar.d.ts
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+type AvatarShape = 'circle' | 'square';
+interface AvatarProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+  name: string;
+  src?: string;
+  initials?: string;
+  icon?: React$1.ReactNode;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  styleVariant?: SparkStyle;
+  color?: SparkAccentColor;
+  imgProps?: Omit<Avatar$1.Image.Props, 'src'>;
+}
+declare function avatarInitials(name: string): string;
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Avatar, type AvatarProps, type AvatarShape, type AvatarSize, avatarInitials };
+//# sourceMappingURL=avatar.d.cts.map

package/dist/components/avatar.d.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import { SparkAccentColor } from "../lib/accent-colors.js";
+import * as React$1 from "react";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+
+//#region src/components/avatar.d.ts
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+type AvatarShape = 'circle' | 'square';
+interface AvatarProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+  name: string;
+  src?: string;
+  initials?: string;
+  icon?: React$1.ReactNode;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  styleVariant?: SparkStyle;
+  color?: SparkAccentColor;
+  imgProps?: Omit<Avatar$1.Image.Props, 'src'>;
+}
+declare function avatarInitials(name: string): string;
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Avatar, type AvatarProps, type AvatarShape, type AvatarSize, avatarInitials };
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar.js

@@ -0,0 +1,52 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/components/avatar.tsx
+const sizeClasses = {
+	sm: "size-8 text-xs",
+	md: "size-10 text-sm",
+	lg: "size-14 text-lg",
+	xl: "size-20 text-2xl"
+};
+const squareRadiusClasses = {
+	sm: "rounded-md",
+	md: "rounded-lg",
+	lg: "rounded-xl",
+	xl: "rounded-2xl"
+};
+function avatarInitials(name) {
+	return name.split(" ").map((part) => part.at(0)).filter(Boolean).slice(0, 2).join("").toUpperCase();
+}
+const Avatar = React$1.forwardRef(({ name, src, initials, icon, size = "md", shape = "circle", styleVariant = "soft", color = "accent", imgProps, className, ...props }, ref) => {
+	const resolvedInitials = initials ?? avatarInitials(name);
+	return /* @__PURE__ */ jsxs(Avatar$1.Root, {
+		"data-slot": "avatar",
+		role: "img",
+		"aria-label": name,
+		"data-style": styleVariant,
+		"data-accent-color": accentByColor[color],
+		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none", sizeClasses[size], shape === "circle" ? "rounded-full" : squareRadiusClasses[size], "bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--spark-a12))", className),
+		ref,
+		...props,
+		children: [src ? /* @__PURE__ */ jsx(Avatar$1.Image, {
+			...imgProps,
+			"data-slot": "avatar-image",
+			src,
+			alt: "",
+			className: "size-full object-cover"
+		}) : null, /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+			"data-slot": "avatar-fallback",
+			"aria-hidden": true,
+			className: "flex size-full items-center justify-center",
+			children: resolvedInitials || icon
+		})]
+	});
+});
+Avatar.displayName = "Avatar";
+//#endregion
+export { Avatar, avatarInitials };
+
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":["React","AvatarPrimitive"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype AvatarSize = 'sm' | 'md' | 'lg' | 'xl'\ntype AvatarShape = 'circle' | 'square'\n\ninterface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  name: string\n  src?: string\n  initials?: string\n  icon?: React.ReactNode\n  size?: AvatarSize\n  shape?: AvatarShape\n  styleVariant?: SparkStyle\n  color?: SparkAccentColor\n  imgProps?: Omit<AvatarPrimitive.Image.Props, 'src'>\n}\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  sm: 'size-8 text-xs',\n  md: 'size-10 text-sm',\n  lg: 'size-14 text-lg',\n  xl: 'size-20 text-2xl',\n}\n\n// One token lower than the spec's literal sm→lg/md→xl/lg→2xl/xl→2xl mapping:\n// at the default (medium) theme radius factor, rounded-2xl on a 56px `lg` box\n// is a 24px radius (0.86 of the half-width) — reads as a circle, not a square.\nconst squareRadiusClasses: Record<AvatarSize, string> = {\n  sm: 'rounded-md',\n  md: 'rounded-lg',\n  lg: 'rounded-xl',\n  xl: 'rounded-2xl',\n}\n\nfunction avatarInitials(name: string): string {\n  return name\n    .split(' ')\n    .map((part) => part.at(0))\n    .filter(Boolean)\n    .slice(0, 2)\n    .join('')\n    .toUpperCase()\n}\n\nconst Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  (\n    {\n      name,\n      src,\n      initials,\n      icon,\n      size = 'md',\n      shape = 'circle',\n      styleVariant = 'soft',\n      color = 'accent',\n      imgProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedInitials = initials ?? avatarInitials(name)\n\n    return (\n      <AvatarPrimitive.Root\n        data-slot=\"avatar\"\n        role=\"img\"\n        aria-label={name}\n        data-style={styleVariant}\n        data-accent-color={accentByColor[color]}\n        className={cn(\n          'inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none',\n          sizeClasses[size],\n          shape === 'circle' ? 'rounded-full' : squareRadiusClasses[size],\n          'bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--spark-a12))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {src ? (\n          <AvatarPrimitive.Image\n            {...imgProps}\n            data-slot=\"avatar-image\"\n            src={src}\n            alt=\"\"\n            className=\"size-full object-cover\"\n          />\n        ) : null}\n        <AvatarPrimitive.Fallback\n          data-slot=\"avatar-fallback\"\n          aria-hidden\n          className=\"flex size-full items-center justify-center\"\n        >\n          {resolvedInitials || icon}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    )\n  },\n)\n\nAvatar.displayName = 'Avatar'\n\nexport { Avatar, avatarInitials }\nexport type { AvatarProps, AvatarSize, AvatarShape }\n"],"mappings":";;;;;;;AAsBA,MAAM,cAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAKA,MAAM,sBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,eAAe,MAAsB;CAC5C,OAAO,KACJ,MAAM,GAAG,EACT,KAAK,SAAS,KAAK,GAAG,CAAC,CAAC,EACxB,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,EACP,YAAY;AACjB;AAEA,MAAM,SAASA,QAAM,YAEjB,EACE,MACA,KACA,UACA,MACA,OAAO,MACP,QAAQ,UACR,eAAe,QACf,QAAQ,UACR,UACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,mBAAmB,YAAY,eAAe,IAAI;CAExD,OACE,qBAACC,SAAgB,MAAjB;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,cAAY;EACZ,qBAAmB,cAAc;EACjC,WAAW,GACT,2GACA,YAAY,OACZ,UAAU,WAAW,iBAAiB,oBAAoB,OAC1D,gGACA,SACF;EACK;EACL,GAAI;YAdN,CAgBG,MACC,oBAACA,SAAgB,OAAjB;GACE,GAAI;GACJ,aAAU;GACL;GACL,KAAI;GACJ,WAAU;EACX,CAAA,IACC,MACJ,oBAACA,SAAgB,UAAjB;GACE,aAAU;GACV,eAAA;GACA,WAAU;aAET,oBAAoB;EACG,CAAA,CACN;;AAE1B,CACF;AAEA,OAAO,cAAc"}

package/dist/components/badge.cjs

@@ -0,0 +1,25 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_lib_accent_colors = require("../lib/accent-colors.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/badge.tsx
+const Badge = react.forwardRef(({ className, children, styleVariant, color, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "badge",
+		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
+		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
+		className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))", className),
+		ref,
+		...props,
+		children
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
+exports.Badge = Badge;
+
+//# sourceMappingURL=badge.cjs.map

package/dist/components/badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.cjs","names":["React","accentByColor"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * 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 SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;;AAkBA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,YAAA,GAAA,OAAA,IACE,sHACA,4FACA,kHACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}

package/dist/components/badge.d.cts

@@ -0,0 +1,16 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import * as React$1 from "react";
+
+//#region src/components/badge.d.ts
+type SparkBadgeColor = 'accent' | 'neutral' | 'success' | 'warning' | 'danger';
+interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+  styleVariant?: SparkStyle;
+  color?: SparkBadgeColor;
+  children?: React$1.ReactNode;
+}
+declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Badge, type BadgeProps, SparkBadgeColor };
+//# sourceMappingURL=badge.d.cts.map

package/dist/components/badge.d.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import * as React$1 from "react";
+
+//#region src/components/badge.d.ts
+type SparkBadgeColor = 'accent' | 'neutral' | 'success' | 'warning' | 'danger';
+interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+  styleVariant?: SparkStyle;
+  color?: SparkBadgeColor;
+  children?: React$1.ReactNode;
+}
+declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Badge, type BadgeProps, SparkBadgeColor };
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge.js

@@ -0,0 +1,22 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/badge.tsx
+const Badge = React$1.forwardRef(({ className, children, styleVariant, color, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "badge",
+		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
+		"data-accent-color": color ? accentByColor[color] : void 0,
+		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))", className),
+		ref,
+		...props,
+		children
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * 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 SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;AAkBA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,WAAW,GACT,sHACA,4FACA,kHACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}