@epilot/spark-ui 0.23.2 → 0.24.0

package/dist/components/trace.d.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React$1 from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+
+//#region src/components/trace.d.ts
+type TraceStatus = 'running' | 'error' | 'pending';
+declare function Trace({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function TraceLine({
+  className,
+  status,
+  ...props
+}: React$1.ComponentProps<'span'> & {
+  status?: TraceStatus;
+}): import("react/jsx-runtime").JSX.Element;
+declare function TraceIcon({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function TraceTitle({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function TraceDescription({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+type CollapsibleRootProps = React$1.ComponentProps<typeof Collapsible.Root>;
+declare function TraceCollapsible({
+  className,
+  ...props
+}: Omit<CollapsibleRootProps, 'open'> & ({
+  open?: undefined;
+} | {
+  open: boolean;
+  onOpenChange: NonNullable<CollapsibleRootProps['onOpenChange']>;
+})): import("react/jsx-runtime").JSX.Element;
+declare function TraceCollapsibleTrigger({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Collapsible.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TraceCollapsibleContent({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Collapsible.Panel>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, type TraceStatus, TraceTitle };
+//# sourceMappingURL=trace.d.ts.map

package/dist/components/trace.js

@@ -0,0 +1,78 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { ChevronRight } from "@epilot/spark-icons";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/trace.tsx
+function Trace({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "trace",
+		className: cn("flex w-full min-w-0 flex-col gap-2 *:has-[>[data-slot=trace-line]]:touch-target *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:min-h-[1.5rem] *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:items-center *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:focus-visible:ring-2 *:has-[>[data-slot=trace-line]]:focus-visible:ring-offset-2 *:has-[>[data-slot=trace-line]]:focus-visible:outline-hidden", className),
+		...props
+	});
+}
+function TraceLine({ className, status, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-line",
+		"data-status": status,
+		className: cn("flex w-fit max-w-full min-w-0 items-center gap-2 text-sm text-gray-light transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-gray data-[status=error]:text-error data-[status=error]:in-[a:hover,button:hover]:text-error data-[status=pending]:*:data-[slot=trace-icon]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer motion-reduce:transition-none", className),
+		...props
+	});
+}
+function TraceIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-icon",
+		"aria-hidden": "true",
+		className: cn("flex size-4 shrink-0 items-center justify-center [--spark-icon-size:--spacing(4)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1", className),
+		...props
+	});
+}
+function TraceTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-title",
+		className: cn("min-w-0 truncate", className),
+		...props
+	});
+}
+function TraceDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-description",
+		className: cn("shrink-0 text-gray-light tabular-nums", className),
+		...props
+	});
+}
+function TraceCollapsible({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "trace-collapsible",
+		className: cn("flex w-full min-w-0 flex-col", className),
+		...props
+	});
+}
+function TraceCollapsibleTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		"data-slot": "trace-collapsible-trigger",
+		className: cn("group/trace-collapsible-trigger touch-target flex min-h-[1.5rem] w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md text-left text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden has-[[data-status=error]]:text-error motion-reduce:transition-none", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(TraceIcon, {
+			className: "transition-transform group-data-[panel-open]/trace-collapsible-trigger:rotate-90 motion-reduce:transition-none",
+			children: /* @__PURE__ */ jsx(ChevronRight, {})
+		})]
+	});
+}
+function TraceCollapsibleContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		"data-slot": "trace-collapsible-content",
+		className: "h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "trace-collapsible-content-inner",
+			className: cn("ms-[calc(--spacing(2)-1px)] mt-2 mb-1 min-w-0 border-s border-gray-a6 ps-4 pe-1 text-sm leading-relaxed wrap-break-word text-gray-light", className),
+			children
+		})
+	});
+}
+//#endregion
+export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle };
+
+//# sourceMappingURL=trace.js.map

package/dist/components/trace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trace.js","names":["CollapsiblePrimitive"],"sources":["../../src/components/trace.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'\nimport { ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype TraceStatus = 'running' | 'error' | 'pending'\n\nfunction Trace({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"trace\"\n      className={cn(\n        'flex w-full min-w-0 flex-col gap-2 *:has-[>[data-slot=trace-line]]:touch-target *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:min-h-[1.5rem] *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:items-center *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:focus-visible:ring-2 *:has-[>[data-slot=trace-line]]:focus-visible:ring-offset-2 *:has-[>[data-slot=trace-line]]:focus-visible:outline-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TraceLine({\n  className,\n  status,\n  ...props\n}: React.ComponentProps<'span'> & { status?: TraceStatus }) {\n  return (\n    <span\n      data-slot=\"trace-line\"\n      data-status={status}\n      className={cn(\n        'flex w-fit max-w-full min-w-0 items-center gap-2 text-sm text-gray-light transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-gray data-[status=error]:text-error data-[status=error]:in-[a:hover,button:hover]:text-error data-[status=pending]:*:data-[slot=trace-icon]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TraceIcon({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"trace-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-4 shrink-0 items-center justify-center [--spark-icon-size:--spacing(4)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TraceTitle({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"trace-title\"\n      className={cn('min-w-0 truncate', className)}\n      {...props}\n    />\n  )\n}\n\nfunction TraceDescription({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"trace-description\"\n      className={cn('shrink-0 text-gray-light tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\ntype CollapsibleRootProps = React.ComponentProps<\n  typeof CollapsiblePrimitive.Root\n>\n\nfunction TraceCollapsible({\n  className,\n  ...props\n}: Omit<CollapsibleRootProps, 'open'> &\n  (\n    | { open?: undefined }\n    | {\n        open: boolean\n        onOpenChange: NonNullable<CollapsibleRootProps['onOpenChange']>\n      }\n  )) {\n  return (\n    <CollapsiblePrimitive.Root\n      data-slot=\"trace-collapsible\"\n      className={cn('flex w-full min-w-0 flex-col', className)}\n      {...props}\n    />\n  )\n}\n\nfunction TraceCollapsibleTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      data-slot=\"trace-collapsible-trigger\"\n      className={cn(\n        'group/trace-collapsible-trigger touch-target flex min-h-[1.5rem] w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md text-left text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden has-[[data-status=error]]:text-error motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <TraceIcon className=\"transition-transform group-data-[panel-open]/trace-collapsible-trigger:rotate-90 motion-reduce:transition-none\">\n        <ChevronRight />\n      </TraceIcon>\n    </CollapsiblePrimitive.Trigger>\n  )\n}\n\nfunction TraceCollapsibleContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Panel>) {\n  return (\n    <CollapsiblePrimitive.Panel\n      data-slot=\"trace-collapsible-content\"\n      className=\"h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none\"\n      {...props}\n    >\n      <div\n        data-slot=\"trace-collapsible-content-inner\"\n        className={cn(\n          'ms-[calc(--spacing(2)-1px)] mt-2 mb-1 min-w-0 border-s border-gray-a6 ps-4 pe-1 text-sm leading-relaxed wrap-break-word text-gray-light',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </CollapsiblePrimitive.Panel>\n  )\n}\n\nexport {\n  Trace,\n  TraceCollapsible,\n  TraceCollapsibleContent,\n  TraceCollapsibleTrigger,\n  TraceDescription,\n  TraceIcon,\n  TraceLine,\n  TraceTitle,\n  type TraceStatus,\n}\n"],"mappings":";;;;;;;AAOA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAsC;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,glBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EACjB,WACA,QACA,GAAG,SACuD;CAC1D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GACT,uYACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAuC;CACxE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,wLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAuC;CACzE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,iBAAiB,EACxB,WACA,GAAG,SAQA;CACH,OACE,oBAACA,YAAqB,MAAtB;EACE,aAAU;EACV,WAAW,GAAG,gCAAgC,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,UACA,GAAG,SACyD;CAC5D,OACE,qBAACA,YAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GACT,uVACA,SACF;EACA,GAAI;YANN,CAQG,UACD,oBAAC,WAAD;GAAW,WAAU;aACnB,oBAAC,cAAD,CAAe,CAAA;EACN,CAAA,CACiB;;AAElC;AAEA,SAAS,wBAAwB,EAC/B,WACA,UACA,GAAG,SACuD;CAC1D,OACE,oBAACA,YAAqB,OAAtB;EACE,aAAU;EACV,WAAU;EACV,GAAI;YAEJ,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,2IACA,SACF;GAEC;EACE,CAAA;CACqB,CAAA;AAEhC"}

package/package.json

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