@langchain/macaw-components 1.0.0-beta.0

package/dist/components/Select/SelectPrimitive.js

@@ -0,0 +1,126 @@
+import { cn } from "../../utils/cn.js";
+import zIndices from "../../utils/zIndices.js";
+import { useZIndex } from "../../utils/useZIndex.js";
+import { ZIndexProvider } from "../../utils/ZIndexContext.js";
+import { CaretDownIcon, CaretUpIcon, CheckIcon } from "../../icons/PaddedPhosphorIcons.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region packages/components/src/components/Select/SelectPrimitive.tsx
+var SelectRoot = (props) => {
+	const [open = false, onOpenChange] = useControllableState({
+		prop: props.open,
+		defaultProp: props.defaultOpen ?? false,
+		onChange: props.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(RadixSelect.Root, {
+		...props,
+		open,
+		onOpenChange,
+		defaultOpen: void 0
+	});
+};
+var SelectTrigger = React$1.forwardRef(({ className, children, iconClassName, ...props }, ref) => {
+	if (props.asChild) return /* @__PURE__ */ jsx(RadixSelect.Trigger, {
+		ref,
+		className: cn("flex items-center justify-between gap-space-2 rounded-md border border-default bg-transparent p-1.5 px-2.5 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-secondary [&>span]:line-clamp-1", className),
+		...props,
+		children: props.asChild ? children : /* @__PURE__ */ jsx("span", { children })
+	});
+	return /* @__PURE__ */ jsxs(RadixSelect.Trigger, {
+		ref,
+		className: cn("flex items-center justify-between gap-space-2 rounded-md border border-default bg-transparent p-1.5 px-2.5 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-secondary [&>span]:line-clamp-1", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(RadixSelect.Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn("inline-flex h-4 w-4 text-icon-primary", iconClassName),
+				children: /* @__PURE__ */ jsx(CaretDownIcon, {
+					size: "100%",
+					weight: "regular"
+				})
+			})
+		})]
+	});
+});
+SelectTrigger.displayName = RadixSelect.Trigger.displayName;
+var SelectScrollUpButton = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixSelect.ScrollUpButton, {
+	ref,
+	className: cn("flex cursor-default items-center justify-center py-space-1", className),
+	...props,
+	children: /* @__PURE__ */ jsx(CaretUpIcon, {
+		"aria-hidden": true,
+		size: 16,
+		weight: "regular"
+	})
+}));
+SelectScrollUpButton.displayName = RadixSelect.ScrollUpButton.displayName;
+var SelectScrollDownButton = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixSelect.ScrollDownButton, {
+	ref,
+	className: cn("flex cursor-default items-center justify-center py-space-1", className),
+	...props,
+	children: /* @__PURE__ */ jsx(CaretDownIcon, {
+		"aria-hidden": true,
+		size: 16,
+		weight: "regular"
+	})
+}));
+SelectScrollDownButton.displayName = RadixSelect.ScrollDownButton.displayName;
+var SelectContent = React$1.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+	const zIndex = useZIndex(zIndices.popover);
+	return /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsx(RadixSelect.Content, {
+		ref,
+		className: cn("relative max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default bg-elevated shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+		position,
+		...props,
+		style: {
+			zIndex,
+			...props.style
+		},
+		children: /* @__PURE__ */ jsxs(ZIndexProvider, {
+			value: zIndex,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(RadixSelect.Viewport, {
+					className: cn("p-space-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+					children
+				}),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+});
+SelectContent.displayName = RadixSelect.Content.displayName;
+var SelectLabel = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixSelect.Label, {
+	ref,
+	className: cn("py-1.5 pl-space-6 pr-space-2 text-sm font-semibold", className),
+	...props
+}));
+SelectLabel.displayName = RadixSelect.Label.displayName;
+var SelectItem = React$1.forwardRef(({ className, children, checkmarkPosition = "left", selectedIndicator = "checkmark", ...props }, ref) => /* @__PURE__ */ jsxs(RadixSelect.Item, {
+	ref,
+	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-space-2 text-sm outline-none focus:bg-elevated-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50", selectedIndicator === "background" ? "pl-space-2 data-[state=checked]:bg-selected data-[state=checked]:focus:bg-selected-hover" : checkmarkPosition === "left" ? "pl-space-6" : "pl-space-2", className),
+	...props,
+	children: [selectedIndicator === "checkmark" && /* @__PURE__ */ jsx("span", {
+		className: cn("absolute flex h-3.5 w-3.5 items-center justify-center", checkmarkPosition === "left" ? "left-2" : "right-2"),
+		children: /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {
+			"aria-hidden": true,
+			size: 16,
+			weight: "regular"
+		}) })
+	}), /* @__PURE__ */ jsx(RadixSelect.ItemText, { children })]
+}));
+SelectItem.displayName = RadixSelect.Item.displayName;
+var SelectSeparator = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixSelect.Separator, {
+	ref,
+	className: cn("-mx-space-1 my-space-1 h-px border-b border-subtle", className),
+	...props
+}));
+SelectSeparator.displayName = RadixSelect.Separator.displayName;
+var SelectValue = RadixSelect.Value;
+//#endregion
+export { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue };
+
+//# sourceMappingURL=SelectPrimitive.js.map

package/dist/components/Select/SelectPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPrimitive.js","names":[],"sources":["../../../src/components/Select/SelectPrimitive.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as RadixSelect from '@radix-ui/react-select';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nimport {\n  CaretDownIcon,\n  CaretUpIcon,\n  CheckIcon,\n} from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { useZIndex } from '../../utils/useZIndex';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\n\nexport const SelectRoot: typeof RadixSelect.Root = (props) => {\n  const [open = false, onOpenChange] = useControllableState({\n    prop: props.open,\n    defaultProp: props.defaultOpen ?? false,\n    onChange: props.onOpenChange,\n  });\n\n  return (\n    <RadixSelect.Root\n      {...props}\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={undefined}\n    />\n  );\n};\n\nexport type SelectTriggerProps = React.ComponentPropsWithoutRef<\n  typeof RadixSelect.Trigger\n> & {\n  iconClassName?: string;\n};\n\nexport const SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Trigger>,\n  SelectTriggerProps\n>(({ className, children, iconClassName, ...props }, ref) => {\n  if (props.asChild) {\n    return (\n      <RadixSelect.Trigger\n        ref={ref}\n        className={cn(\n          'flex items-center justify-between gap-space-2 rounded-md border border-default bg-transparent p-1.5 px-2.5 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-secondary [&>span]:line-clamp-1',\n          className\n        )}\n        {...props}\n      >\n        {props.asChild ? children : <span>{children}</span>}\n      </RadixSelect.Trigger>\n    );\n  }\n\n  return (\n    <RadixSelect.Trigger\n      ref={ref}\n      className={cn(\n        'flex items-center justify-between gap-space-2 rounded-md border border-default bg-transparent p-1.5 px-2.5 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-secondary [&>span]:line-clamp-1',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <RadixSelect.Icon asChild>\n        <span\n          aria-hidden\n          className={cn('inline-flex h-4 w-4 text-icon-primary', iconClassName)}\n        >\n          <CaretDownIcon size=\"100%\" weight=\"regular\" />\n        </span>\n      </RadixSelect.Icon>\n    </RadixSelect.Trigger>\n  );\n});\nSelectTrigger.displayName = RadixSelect.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.ScrollUpButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-space-1',\n      className\n    )}\n    {...props}\n  >\n    <CaretUpIcon aria-hidden size={16} weight=\"regular\" />\n  </RadixSelect.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = RadixSelect.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.ScrollDownButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-space-1',\n      className\n    )}\n    {...props}\n  >\n    <CaretDownIcon aria-hidden size={16} weight=\"regular\" />\n  </RadixSelect.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = RadixSelect.ScrollDownButton.displayName;\n\nexport const SelectContent = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Content>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => {\n  const zIndex = useZIndex(zIndices.popover);\n\n  return (\n    <RadixSelect.Portal>\n      <RadixSelect.Content\n        ref={ref}\n        className={cn(\n          'relative max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default bg-elevated shadow-md',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className\n        )}\n        position={position}\n        {...props}\n        style={{ zIndex, ...props.style }}\n      >\n        <ZIndexProvider value={zIndex}>\n          <SelectScrollUpButton />\n          <RadixSelect.Viewport\n            className={cn(\n              'p-space-1',\n              position === 'popper' &&\n                'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n            )}\n          >\n            {children}\n          </RadixSelect.Viewport>\n          <SelectScrollDownButton />\n        </ZIndexProvider>\n      </RadixSelect.Content>\n    </RadixSelect.Portal>\n  );\n});\nSelectContent.displayName = RadixSelect.Content.displayName;\n\nexport const SelectLabel = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Label>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Label>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.Label\n    ref={ref}\n    className={cn(\n      'py-1.5 pl-space-6 pr-space-2 text-sm font-semibold',\n      className\n    )}\n    {...props}\n  />\n));\nSelectLabel.displayName = RadixSelect.Label.displayName;\n\nexport const SelectItem = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Item>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Item> & {\n    checkmarkPosition?: 'left' | 'right';\n    selectedIndicator?: 'checkmark' | 'background';\n  }\n>(\n  (\n    {\n      className,\n      children,\n      checkmarkPosition = 'left',\n      selectedIndicator = 'checkmark',\n      ...props\n    },\n    ref\n  ) => (\n    <RadixSelect.Item\n      ref={ref}\n      className={cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-space-2 text-sm outline-none focus:bg-elevated-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        selectedIndicator === 'background'\n          ? 'pl-space-2 data-[state=checked]:bg-selected data-[state=checked]:focus:bg-selected-hover'\n          : checkmarkPosition === 'left'\n            ? 'pl-space-6'\n            : 'pl-space-2',\n        className\n      )}\n      {...props}\n    >\n      {selectedIndicator === 'checkmark' && (\n        <span\n          className={cn(\n            'absolute flex h-3.5 w-3.5 items-center justify-center',\n            checkmarkPosition === 'left' ? 'left-2' : 'right-2'\n          )}\n        >\n          <RadixSelect.ItemIndicator>\n            <CheckIcon aria-hidden size={16} weight=\"regular\" />\n          </RadixSelect.ItemIndicator>\n        </span>\n      )}\n\n      <RadixSelect.ItemText>{children}</RadixSelect.ItemText>\n    </RadixSelect.Item>\n  )\n);\nSelectItem.displayName = RadixSelect.Item.displayName;\n\nexport const SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Separator>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Separator>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.Separator\n    ref={ref}\n    className={cn(\n      '-mx-space-1 my-space-1 h-px border-b border-subtle',\n      className\n    )}\n    {...props}\n  />\n));\nSelectSeparator.displayName = RadixSelect.Separator.displayName;\n\nexport const SelectValue = RadixSelect.Value;\n"],"mappings":";;;;;;;;;;AAeA,IAAa,cAAuC,UAAU;CAC5D,MAAM,CAAC,OAAO,OAAO,gBAAgB,qBAAqB;EACxD,MAAM,MAAM;EACZ,aAAa,MAAM,eAAe;EAClC,UAAU,MAAM;CAClB,CAAC;CAED,OACE,oBAAC,YAAY,MAAb;EACE,GAAI;EACE;EACQ;EACd,aAAa,KAAA;CACd,CAAA;AAEL;AAQA,IAAa,gBAAgB,QAAM,YAGhC,EAAE,WAAW,UAAU,eAAe,GAAG,SAAS,QAAQ;CAC3D,IAAI,MAAM,SACR,OACE,oBAAC,YAAY,SAAb;EACO;EACL,WAAW,GACT,iPACA,SACF;EACA,GAAI;EAEH,UAAA,MAAM,UAAU,WAAW,oBAAC,QAAD,EAAO,SAAe,CAAA;CAC/B,CAAA;CAIzB,OACE,qBAAC,YAAY,SAAb;EACO;EACL,WAAW,GACT,iPACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACD,oBAAC,YAAY,MAAb;GAAkB,SAAA;GAChB,UAAA,oBAAC,QAAD;IACE,eAAA;IACA,WAAW,GAAG,yCAAyC,aAAa;IAEpE,UAAA,oBAAC,eAAD;KAAe,MAAK;KAAO,QAAO;IAAW,CAAA;GACzC,CAAA;EACU,CAAA,CACC;;AAEzB,CAAC;AACD,cAAc,cAAc,YAAY,QAAQ;AAEhD,IAAM,uBAAuB,QAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,YAAY,gBAAb;CACO;CACL,WAAW,GACT,8DACA,SACF;CACA,GAAI;CAEJ,UAAA,oBAAC,aAAD;EAAa,eAAA;EAAY,MAAM;EAAI,QAAO;CAAW,CAAA;AAC3B,CAAA,CAC7B;AACD,qBAAqB,cAAc,YAAY,eAAe;AAE9D,IAAM,yBAAyB,QAAM,YAGlC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,YAAY,kBAAb;CACO;CACL,WAAW,GACT,8DACA,SACF;CACA,GAAI;CAEJ,UAAA,oBAAC,eAAD;EAAe,eAAA;EAAY,MAAM;EAAI,QAAO;CAAW,CAAA;AAC3B,CAAA,CAC/B;AACD,uBAAuB,cAAc,YAAY,iBAAiB;AAElE,IAAa,gBAAgB,QAAM,YAGhC,EAAE,WAAW,UAAU,WAAW,UAAU,GAAG,SAAS,QAAQ;CACjE,MAAM,SAAS,UAAU,SAAS,OAAO;CAEzC,OACE,oBAAC,YAAY,QAAb,EAAA,UACE,oBAAC,YAAY,SAAb;EACO;EACL,WAAW,GACT,yGACA,aAAa,YACX,mIACF,SACF;EACU;EACV,GAAI;EACJ,OAAO;GAAE;GAAQ,GAAG,MAAM;EAAM;EAEhC,UAAA,qBAAC,gBAAD;GAAgB,OAAO;GAAvB,UAAA;IACE,oBAAC,sBAAD,CAAuB,CAAA;IACvB,oBAAC,YAAY,UAAb;KACE,WAAW,GACT,aACA,aAAa,YACX,yFACJ;KAEC;IACmB,CAAA;IACtB,oBAAC,wBAAD,CAAyB,CAAA;GACX;;CACG,CAAA,EACH,CAAA;AAExB,CAAC;AACD,cAAc,cAAc,YAAY,QAAQ;AAEhD,IAAa,cAAc,QAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,YAAY,OAAb;CACO;CACL,WAAW,GACT,sDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,YAAY,cAAc,YAAY,MAAM;AAE5C,IAAa,aAAa,QAAM,YAQ5B,EACE,WACA,UACA,oBAAoB,QACpB,oBAAoB,aACpB,GAAG,SAEL,QAEA,qBAAC,YAAY,MAAb;CACO;CACL,WAAW,GACT,yMACA,sBAAsB,eAClB,6FACA,sBAAsB,SACpB,eACA,cACN,SACF;CACA,GAAI;CAXN,UAAA,CAaG,sBAAsB,eACrB,oBAAC,QAAD;EACE,WAAW,GACT,yDACA,sBAAsB,SAAS,WAAW,SAC5C;EAEA,UAAA,oBAAC,YAAY,eAAb,EAAA,UACE,oBAAC,WAAD;GAAW,eAAA;GAAY,MAAM;GAAI,QAAO;EAAW,CAAA,EAC1B,CAAA;CACvB,CAAA,GAGR,oBAAC,YAAY,UAAb,EAAuB,SAA+B,CAAA,CACtC;AAEtB,CAAA,CAAA;AACA,WAAW,cAAc,YAAY,KAAK;AAE1C,IAAa,kBAAkB,QAAM,YAGlC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,YAAY,WAAb;CACO;CACL,WAAW,GACT,sDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,gBAAgB,cAAc,YAAY,UAAU;AAEpD,IAAa,cAAc,YAAY"}

package/dist/components/Select/index.d.ts

@@ -0,0 +1,4 @@
+export { Select } from './Select.js';
+export type { SelectGroup, SelectOption, SelectProps, SelectSize, } from './Select.js';
+export { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, } from './SelectPrimitive.js';
+export type { SelectTriggerProps } from './SelectPrimitive.js';

package/dist/components/Select/index.js

@@ -0,0 +1,3 @@
+import { Select } from "./Select.js";
+import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from "./SelectPrimitive.js";
+export { Select, SelectContent, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,13 @@
+interface SkeletonProps {
+    className?: string;
+    as?: 'div' | 'span';
+    style?: React.CSSProperties;
+}
+export declare const Skeleton: React.FC<SkeletonProps>;
+export declare const SkeletonRows: ({ rows, className, skeletonClassName, }: {
+    rows: number;
+    className?: string;
+    skeletonClassName?: string;
+}) => import("react").JSX.Element;
+export declare const CircleSkeleton: ({ className, style }: SkeletonProps) => import("react").JSX.Element;
+export {};

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,25 @@
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/Skeleton/Skeleton.tsx
+var Skeleton = ({ className, style, as = "div" }) => {
+	return /* @__PURE__ */ jsx(as === "div" ? "div" : "span", {
+		className: cn("h-4 w-full animate-pulse rounded bg-surface-level-3", className),
+		style
+	});
+};
+var SkeletonRows = ({ rows, className, skeletonClassName }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-space-2", className),
+		children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: skeletonClassName }, index))
+	});
+};
+var CircleSkeleton = ({ className, style }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("h-5 w-5 animate-pulse rounded-full bg-surface-level-3", className),
+		style
+	});
+};
+//#endregion
+export { CircleSkeleton, Skeleton, SkeletonRows };
+
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\n\ninterface SkeletonProps {\n  className?: string;\n  as?: 'div' | 'span';\n  style?: React.CSSProperties;\n}\n\nexport const Skeleton: React.FC<SkeletonProps> = ({\n  className,\n  style,\n  as = 'div',\n}) => {\n  const Component = as === 'div' ? 'div' : 'span';\n  return (\n    <Component\n      className={cn(\n        'h-4 w-full animate-pulse rounded bg-surface-level-3',\n        className\n      )}\n      style={style}\n    />\n  );\n};\n\nexport const SkeletonRows = ({\n  rows,\n  className,\n  skeletonClassName,\n}: {\n  rows: number;\n  className?: string;\n  skeletonClassName?: string;\n}) => {\n  return (\n    <div className={cn('flex flex-col gap-space-2', className)}>\n      {Array.from({ length: rows }).map((_, index) => (\n        <Skeleton key={index} className={skeletonClassName} />\n      ))}\n    </div>\n  );\n};\n\nexport const CircleSkeleton = ({ className, style }: SkeletonProps) => {\n  return (\n    <div\n      className={cn(\n        'h-5 w-5 animate-pulse rounded-full bg-surface-level-3',\n        className\n      )}\n      style={style}\n    />\n  );\n};\n"],"mappings":";;;AAQA,IAAa,YAAqC,EAChD,WACA,OACA,KAAK,YACD;CAEJ,OACE,oBAFgB,OAAO,QAAQ,QAAQ,QAEvC;EACE,WAAW,GACT,uDACA,SACF;EACO;CACR,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAC3B,MACA,WACA,wBAKI;CACJ,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,6BAA6B,SAAS;EACtD,UAAA,MAAM,KAAK,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,UACpC,oBAAC,UAAD,EAAsB,WAAW,kBAAoB,GAAtC,KAAsC,CACtD;CACE,CAAA;AAET;AAEA,IAAa,kBAAkB,EAAE,WAAW,YAA2B;CACrE,OACE,oBAAC,OAAD;EACE,WAAW,GACT,yDACA,SACF;EACO;CACR,CAAA;AAEL"}

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { Skeleton, SkeletonRows, CircleSkeleton } from './Skeleton.js';

package/dist/components/Skeleton/index.js

@@ -0,0 +1,2 @@
+import { CircleSkeleton, Skeleton, SkeletonRows } from "./Skeleton.js";
+export { CircleSkeleton, Skeleton, SkeletonRows };

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,33 @@
+export interface SliderStepLabel {
+    value: number;
+    label?: string;
+}
+export interface SliderProps {
+    /** Current value. Pass a number for a single thumb, number[] for a range slider. */
+    value?: number | number[];
+    /** Default value (uncontrolled). */
+    defaultValue?: number | number[];
+    /** Called continuously as the value changes. */
+    onChange?: (value: number | number[]) => void;
+    /** Called when the user finishes dragging (mouse/touch up or keyboard interaction ends). */
+    onChangeCommitted?: (value: number | number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    stepLabels?: SliderStepLabel[];
+    disabled?: boolean;
+    className?: string;
+    /** Track treatment; `thick` is the meter-weight bar. */
+    variant?: 'default' | 'thick';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'data-testid'?: string;
+}
+/**
+ * Slider built on the Radix UI Slider primitive. Supports single-thumb and
+ * range (multi-thumb) modes, optional labeled steps, and disabled state.
+ *
+ * When stepLabels are present, the Root's hit area extends to cover the label
+ * row — clicking a label moves the thumb to that X position.
+ */
+export declare const Slider: ({ value, defaultValue, onChange, onChangeCommitted, min, max, step, stepLabels, disabled, className, variant, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-testid": testId, }: SliderProps) => import("react").JSX.Element;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,64 @@
+import { cn } from "../../utils/cn.js";
+import { SELECTION_CONTROL_HIT_AREA_STYLES, SELECTION_CONTROL_SIZES } from "../../utils/componentSizes.js";
+import { Text } from "../Text/Text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+//#region packages/components/src/components/Slider/Slider.tsx
+function toArray(v) {
+	if (v === void 0) return void 0;
+	return Array.isArray(v) ? v : [v];
+}
+function fromArray(v, wasArray) {
+	return wasArray ? v : v[0];
+}
+/**
+* Slider built on the Radix UI Slider primitive. Supports single-thumb and
+* range (multi-thumb) modes, optional labeled steps, and disabled state.
+*
+* When stepLabels are present, the Root's hit area extends to cover the label
+* row — clicking a label moves the thumb to that X position.
+*/
+var Slider = ({ value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step = 1, stepLabels, disabled = false, className, variant = "default", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-testid": testId }) => {
+	const isRange = Array.isArray(value ?? defaultValue);
+	const labeledSteps = stepLabels?.filter((s) => s.label);
+	const hasLabels = !!labeledSteps && labeledSteps.length > 0;
+	return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
+		className: cn("relative flex w-full touch-none select-none items-center", hasLabels && "pb-7", className),
+		value: toArray(value),
+		defaultValue: toArray(defaultValue),
+		min,
+		max,
+		step,
+		disabled,
+		onValueChange: (v) => onChange?.(fromArray(v, isRange)),
+		onValueCommit: (v) => onChangeCommitted?.(fromArray(v, isRange)),
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		"data-testid": testId,
+		children: [
+			/* @__PURE__ */ jsx(SliderPrimitive.Track, {
+				className: cn("relative w-full grow overflow-hidden", variant === "thick" ? "mx-2 h-2 rounded-xs bg-surface-level-3" : "h-1.5 rounded-full bg-surface-level-4"),
+				children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: cn("absolute h-full", disabled ? "data-[disabled]:bg-brand-subtle" : "bg-control-active") })
+			}),
+			(toArray(value) ?? toArray(defaultValue) ?? [0]).map((_, i) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: cn("block rounded-full border-2 shadow transition", SELECTION_CONTROL_SIZES.sm.className, SELECTION_CONTROL_HIT_AREA_STYLES, "focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)] focus-visible:outline-none", disabled ? "border-muted bg-surface-level-3" : "cursor-pointer border-brand-300 bg-control-thumb hover:border-brand-400 dark:border-brand-500 dark:hover:border-brand-600") }, i)),
+			hasLabels && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "absolute bottom-2 w-full cursor-pointer",
+				children: labeledSteps.map((s) => /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "xs",
+					className: "absolute -translate-x-1/2 truncate text-secondary",
+					style: {
+						left: `${(s.value - min) / (max - min) * 100}%`,
+						maxWidth: `${100 / labeledSteps.length}%`
+					},
+					children: s.label
+				}, s.value))
+			})
+		]
+	});
+};
+//#endregion
+export { Slider };
+
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils/cn';\nimport {\n  SELECTION_CONTROL_HIT_AREA_STYLES,\n  SELECTION_CONTROL_SIZES,\n} from '../../utils/componentSizes';\nimport { Text } from '../Text';\n\nexport interface SliderStepLabel {\n  value: number;\n  label?: string;\n}\n\nexport interface SliderProps {\n  /** Current value. Pass a number for a single thumb, number[] for a range slider. */\n  value?: number | number[];\n  /** Default value (uncontrolled). */\n  defaultValue?: number | number[];\n  /** Called continuously as the value changes. */\n  onChange?: (value: number | number[]) => void;\n  /** Called when the user finishes dragging (mouse/touch up or keyboard interaction ends). */\n  onChangeCommitted?: (value: number | number[]) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  stepLabels?: SliderStepLabel[];\n  disabled?: boolean;\n  className?: string;\n  /** Track treatment; `thick` is the meter-weight bar. */\n  variant?: 'default' | 'thick';\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'data-testid'?: string;\n}\n\nfunction toArray(v: number | number[] | undefined): number[] | undefined {\n  if (v === undefined) return undefined;\n  return Array.isArray(v) ? v : [v];\n}\n\nfunction fromArray(v: number[], wasArray: boolean): number | number[] {\n  return wasArray ? v : v[0];\n}\n\n/**\n * Slider built on the Radix UI Slider primitive. Supports single-thumb and\n * range (multi-thumb) modes, optional labeled steps, and disabled state.\n *\n * When stepLabels are present, the Root's hit area extends to cover the label\n * row — clicking a label moves the thumb to that X position.\n */\nexport const Slider = ({\n  value,\n  defaultValue,\n  onChange,\n  onChangeCommitted,\n  min = 0,\n  max = 100,\n  step = 1,\n  stepLabels,\n  disabled = false,\n  className,\n  variant = 'default',\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  'data-testid': testId,\n}: SliderProps) => {\n  const isRange = Array.isArray(value ?? defaultValue);\n  const labeledSteps = stepLabels?.filter((s) => s.label);\n  const hasLabels = !!labeledSteps && labeledSteps.length > 0;\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        hasLabels && 'pb-7',\n        className\n      )}\n      value={toArray(value)}\n      defaultValue={toArray(defaultValue)}\n      min={min}\n      max={max}\n      step={step}\n      disabled={disabled}\n      onValueChange={(v) => onChange?.(fromArray(v, isRange))}\n      onValueCommit={(v) => onChangeCommitted?.(fromArray(v, isRange))}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      data-testid={testId}\n    >\n      <SliderPrimitive.Track\n        className={cn(\n          'relative w-full grow overflow-hidden',\n          variant === 'thick'\n            ? 'mx-2 h-2 rounded-xs bg-surface-level-3'\n            : 'h-1.5 rounded-full bg-surface-level-4'\n        )}\n      >\n        <SliderPrimitive.Range\n          className={cn(\n            'absolute h-full',\n            disabled ? 'data-[disabled]:bg-brand-subtle' : 'bg-control-active'\n          )}\n        />\n      </SliderPrimitive.Track>\n\n      {(toArray(value) ?? toArray(defaultValue) ?? [0]).map((_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          className={cn(\n            'block rounded-full border-2 shadow transition',\n            SELECTION_CONTROL_SIZES.sm.className,\n            SELECTION_CONTROL_HIT_AREA_STYLES,\n            'focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)] focus-visible:outline-none',\n            disabled\n              ? 'border-muted bg-surface-level-3'\n              : 'cursor-pointer border-brand-300 bg-control-thumb hover:border-brand-400 dark:border-brand-500 dark:hover:border-brand-600'\n          )}\n        />\n      ))}\n\n      {hasLabels && (\n        <div aria-hidden className=\"absolute bottom-2 w-full cursor-pointer\">\n          {labeledSteps.map((s) => (\n            <Text\n              key={s.value}\n              as=\"span\"\n              variant=\"xs\"\n              className=\"absolute -translate-x-1/2 truncate text-secondary\"\n              // Left as non-tailwind on purpose for better readability on label positioning\n              style={{\n                left: `${((s.value - min) / (max - min)) * 100}%`,\n                maxWidth: `${100 / labeledSteps.length}%`,\n              }}\n            >\n              {s.label}\n            </Text>\n          ))}\n        </div>\n      )}\n    </SliderPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;AAoCA,SAAS,QAAQ,GAAwD;CACvE,IAAI,MAAM,KAAA,GAAW,OAAO,KAAA;CAC5B,OAAO,MAAM,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC;AAClC;AAEA,SAAS,UAAU,GAAa,UAAsC;CACpE,OAAO,WAAW,IAAI,EAAE;AAC1B;;;;;;;;AASA,IAAa,UAAU,EACrB,OACA,cACA,UACA,mBACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,YACA,WAAW,OACX,WACA,UAAU,WACV,cAAc,WACd,mBAAmB,gBACnB,eAAe,aACE;CACjB,MAAM,UAAU,MAAM,QAAQ,SAAS,YAAY;CACnD,MAAM,eAAe,YAAY,QAAQ,MAAM,EAAE,KAAK;CACtD,MAAM,YAAY,CAAC,CAAC,gBAAgB,aAAa,SAAS;CAE1D,OACE,qBAAC,gBAAgB,MAAjB;EACE,WAAW,GACT,4DACA,aAAa,QACb,SACF;EACA,OAAO,QAAQ,KAAK;EACpB,cAAc,QAAQ,YAAY;EAC7B;EACA;EACC;EACI;EACV,gBAAgB,MAAM,WAAW,UAAU,GAAG,OAAO,CAAC;EACtD,gBAAgB,MAAM,oBAAoB,UAAU,GAAG,OAAO,CAAC;EAC/D,cAAY;EACZ,mBAAiB;EACjB,eAAa;EAhBf,UAAA;GAkBE,oBAAC,gBAAgB,OAAjB;IACE,WAAW,GACT,wCACA,YAAY,UACR,2CACA,uCACN;IAEA,UAAA,oBAAC,gBAAgB,OAAjB,EACE,WAAW,GACT,mBACA,WAAW,oCAAoC,mBACjD,EACD,CAAA;GACoB,CAAA;IAErB,QAAQ,KAAK,KAAK,QAAQ,YAAY,KAAK,CAAC,CAAC,EAAA,CAAG,KAAK,GAAG,MACxD,oBAAC,gBAAgB,OAAjB,EAEE,WAAW,GACT,iDACA,wBAAwB,GAAG,WAC3B,mCACA,sFACA,WACI,oCACA,2HACN,EACD,GAVM,CAUN,CACF;GAEA,aACC,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAU;IACxB,UAAA,aAAa,KAAK,MACjB,oBAAC,MAAD;KAEE,IAAG;KACH,SAAQ;KACR,WAAU;KAEV,OAAO;MACL,MAAM,IAAK,EAAE,QAAQ,QAAQ,MAAM,OAAQ,IAAI;MAC/C,UAAU,GAAG,MAAM,aAAa,OAAO;KACzC;KAEC,UAAA,EAAE;IACC,GAXC,EAAE,KAWH,CACP;GACE,CAAA;EAEa;;AAE1B"}

package/dist/components/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from './Slider.js';
+export type { SliderProps, SliderStepLabel } from './Slider.js';

package/dist/components/Slider/index.js

@@ -0,0 +1,2 @@
+import { Slider } from "./Slider.js";
+export { Slider };

package/dist/components/SparkLineChart/SparkLineChart.d.ts

@@ -0,0 +1,14 @@
+import { type SVGProps } from 'react';
+export interface SparkLinePoint {
+    x: number;
+    y: number;
+}
+export type SparkLineChartColor = 'brand' | 'neutral' | 'success' | 'warning' | 'error';
+export interface SparkLineChartProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'color'> {
+    data: readonly SparkLinePoint[];
+    color?: SparkLineChartColor;
+    /** Animates the chart unless reduced motion is preferred. Defaults to true. */
+    shouldAnimate?: boolean;
+    'aria-label'?: string;
+}
+export declare const SparkLineChart: ({ data, color, shouldAnimate, className, "aria-label": ariaLabel, ...props }: SparkLineChartProps) => import("react").JSX.Element;

package/dist/components/SparkLineChart/SparkLineChart.js

@@ -0,0 +1,112 @@
+import { cn } from "../../utils/cn.js";
+import { CHART_OTHER_COLOR, CHART_STATUS_COLORS, getCategoricalLineChartColor } from "../../utils/chartColors.js";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { animated, useReducedMotion, useSpring } from "@react-spring/web";
+//#region packages/components/src/components/SparkLineChart/SparkLineChart.tsx
+var VIEWBOX_WIDTH = 100;
+var VIEWBOX_HEIGHT = 100;
+var VERTICAL_PADDING = 2;
+var SPARKLINE_COLORS = {
+	brand: getCategoricalLineChartColor(0),
+	neutral: CHART_OTHER_COLOR,
+	success: CHART_STATUS_COLORS.positive,
+	warning: CHART_STATUS_COLORS.warning,
+	error: CHART_STATUS_COLORS.negative
+};
+var getPaths = (data) => {
+	const points = data.filter(({ x, y }) => Number.isFinite(x) && Number.isFinite(y));
+	if (points.length < 2) return null;
+	const xs = points.map(({ x }) => x);
+	const ys = points.map(({ y }) => y);
+	const xMin = Math.min(...xs);
+	const xMax = Math.max(...xs);
+	const yMin = Math.min(...ys);
+	const yMax = Math.max(...ys);
+	const xSpan = xMax - xMin;
+	const ySpan = yMax - yMin;
+	const usableHeight = 96;
+	const normalizedPoints = points.map(({ x, y }, index) => {
+		return {
+			x: xSpan === 0 ? index / (points.length - 1) * VIEWBOX_WIDTH : (x - xMin) / xSpan * VIEWBOX_WIDTH,
+			y: ySpan === 0 ? VIEWBOX_HEIGHT / 2 : VERTICAL_PADDING + (1 - (y - yMin) / ySpan) * usableHeight
+		};
+	});
+	const pathPoints = normalizedPoints.map(({ x, y }) => `${x},${y}`);
+	const firstX = normalizedPoints[0]?.x ?? 0;
+	const lastX = normalizedPoints.at(-1)?.x ?? VIEWBOX_WIDTH;
+	const line = `M${pathPoints.join(" L")}`;
+	return {
+		area: `M${firstX},${VIEWBOX_HEIGHT} L${pathPoints.join(" L")} L${lastX},${VIEWBOX_HEIGHT} Z`,
+		line
+	};
+};
+var SparkLineChart = ({ data, color = "brand", shouldAnimate = true, className, "aria-label": ariaLabel = "Trend sparkline", ...props }) => {
+	const paths = getPaths(data);
+	const gradientId = useId().replace(/:/g, "");
+	const revealClipId = `${gradientId}-reveal`;
+	const prefersReducedMotion = useReducedMotion();
+	const spring = useSpring({
+		from: { progress: 0 },
+		to: { progress: paths == null ? 0 : 1 },
+		config: {
+			tension: 60,
+			friction: 18
+		},
+		immediate: (prefersReducedMotion ?? false) || !shouldAnimate
+	});
+	return /* @__PURE__ */ jsx("svg", {
+		...props,
+		role: "img",
+		"aria-label": ariaLabel,
+		focusable: "false",
+		viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
+		preserveAspectRatio: "none",
+		className: cn("block h-full w-full", className),
+		children: paths != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
+				id: gradientId,
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "1",
+				children: [/* @__PURE__ */ jsx("stop", {
+					offset: "0%",
+					stopColor: SPARKLINE_COLORS[color],
+					stopOpacity: .18
+				}), /* @__PURE__ */ jsx("stop", {
+					offset: "100%",
+					stopColor: SPARKLINE_COLORS[color],
+					stopOpacity: .02
+				})]
+			}), /* @__PURE__ */ jsx("clipPath", {
+				id: revealClipId,
+				children: /* @__PURE__ */ jsx(animated.rect, {
+					x: 0,
+					y: 0,
+					width: spring.progress.to((progress) => progress * VIEWBOX_WIDTH),
+					height: VIEWBOX_HEIGHT
+				})
+			})] }),
+			/* @__PURE__ */ jsx(animated.path, {
+				d: paths.area,
+				fill: `url(#${gradientId})`,
+				opacity: spring.progress
+			}),
+			/* @__PURE__ */ jsx(animated.path, {
+				d: paths.line,
+				fill: "none",
+				stroke: SPARKLINE_COLORS[color],
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				vectorEffect: "non-scaling-stroke",
+				clipPath: `url(#${revealClipId})`
+			})
+		] })
+	});
+};
+//#endregion
+export { SparkLineChart };
+
+//# sourceMappingURL=SparkLineChart.js.map

package/dist/components/SparkLineChart/SparkLineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparkLineChart.js","names":[],"sources":["../../../src/components/SparkLineChart/SparkLineChart.tsx"],"sourcesContent":["import { useId, type SVGProps } from 'react';\n\nimport { animated, useReducedMotion, useSpring } from '@react-spring/web';\n\nimport {\n  CHART_OTHER_COLOR,\n  CHART_STATUS_COLORS,\n  getCategoricalLineChartColor,\n} from '../../utils/chartColors';\nimport { cn } from '../../utils/cn';\n\nexport interface SparkLinePoint {\n  x: number;\n  y: number;\n}\n\nexport type SparkLineChartColor =\n  | 'brand'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface SparkLineChartProps extends Omit<\n  SVGProps<SVGSVGElement>,\n  'children' | 'color'\n> {\n  data: readonly SparkLinePoint[];\n  color?: SparkLineChartColor;\n  /** Animates the chart unless reduced motion is preferred. Defaults to true. */\n  shouldAnimate?: boolean;\n  'aria-label'?: string;\n}\n\nconst VIEWBOX_WIDTH = 100;\nconst VIEWBOX_HEIGHT = 100;\nconst VERTICAL_PADDING = 2;\nconst SPARKLINE_COLORS: Record<SparkLineChartColor, string> = {\n  brand: getCategoricalLineChartColor(0),\n  neutral: CHART_OTHER_COLOR,\n  success: CHART_STATUS_COLORS.positive,\n  warning: CHART_STATUS_COLORS.warning,\n  error: CHART_STATUS_COLORS.negative,\n};\n\nconst getPaths = (data: readonly SparkLinePoint[]) => {\n  const points = data.filter(\n    ({ x, y }) => Number.isFinite(x) && Number.isFinite(y)\n  );\n  if (points.length < 2) return null;\n\n  const xs = points.map(({ x }) => x);\n  const ys = points.map(({ y }) => y);\n  const xMin = Math.min(...xs);\n  const xMax = Math.max(...xs);\n  const yMin = Math.min(...ys);\n  const yMax = Math.max(...ys);\n  const xSpan = xMax - xMin;\n  const ySpan = yMax - yMin;\n  const usableHeight = VIEWBOX_HEIGHT - VERTICAL_PADDING * 2;\n\n  const normalizedPoints = points.map(({ x, y }, index) => {\n    const normalizedX =\n      xSpan === 0\n        ? (index / (points.length - 1)) * VIEWBOX_WIDTH\n        : ((x - xMin) / xSpan) * VIEWBOX_WIDTH;\n    const normalizedY =\n      ySpan === 0\n        ? VIEWBOX_HEIGHT / 2\n        : VERTICAL_PADDING + (1 - (y - yMin) / ySpan) * usableHeight;\n    return { x: normalizedX, y: normalizedY };\n  });\n\n  const pathPoints = normalizedPoints.map(({ x, y }) => `${x},${y}`);\n  const firstX = normalizedPoints[0]?.x ?? 0;\n  const lastX = normalizedPoints.at(-1)?.x ?? VIEWBOX_WIDTH;\n  const line = `M${pathPoints.join(' L')}`;\n  const area = `M${firstX},${VIEWBOX_HEIGHT} L${pathPoints.join(\n    ' L'\n  )} L${lastX},${VIEWBOX_HEIGHT} Z`;\n\n  return { area, line };\n};\n\nexport const SparkLineChart = ({\n  data,\n  color = 'brand',\n  shouldAnimate = true,\n  className,\n  'aria-label': ariaLabel = 'Trend sparkline',\n  ...props\n}: SparkLineChartProps) => {\n  const paths = getPaths(data);\n  const gradientId = useId().replace(/:/g, '');\n  const revealClipId = `${gradientId}-reveal`;\n  const prefersReducedMotion = useReducedMotion();\n  const spring = useSpring({\n    from: { progress: 0 },\n    to: { progress: paths == null ? 0 : 1 },\n    config: { tension: 60, friction: 18 },\n    immediate: (prefersReducedMotion ?? false) || !shouldAnimate,\n  });\n\n  return (\n    <svg\n      {...props}\n      role=\"img\"\n      aria-label={ariaLabel}\n      focusable=\"false\"\n      viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}\n      preserveAspectRatio=\"none\"\n      className={cn('block h-full w-full', className)}\n    >\n      {paths != null && (\n        <>\n          <defs>\n            <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop\n                offset=\"0%\"\n                stopColor={SPARKLINE_COLORS[color]}\n                stopOpacity={0.18}\n              />\n              <stop\n                offset=\"100%\"\n                stopColor={SPARKLINE_COLORS[color]}\n                stopOpacity={0.02}\n              />\n            </linearGradient>\n            <clipPath id={revealClipId}>\n              <animated.rect\n                x={0}\n                y={0}\n                width={spring.progress.to(\n                  (progress) => progress * VIEWBOX_WIDTH\n                )}\n                height={VIEWBOX_HEIGHT}\n              />\n            </clipPath>\n          </defs>\n          <animated.path\n            d={paths.area}\n            fill={`url(#${gradientId})`}\n            opacity={spring.progress}\n          />\n          <animated.path\n            d={paths.line}\n            fill=\"none\"\n            stroke={SPARKLINE_COLORS[color]}\n            strokeWidth={1.5}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            vectorEffect=\"non-scaling-stroke\"\n            clipPath={`url(#${revealClipId})`}\n          />\n        </>\n      )}\n    </svg>\n  );\n};\n"],"mappings":"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"}

package/dist/components/SparkLineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { SparkLineChart } from './SparkLineChart.js';
+export type { SparkLineChartColor, SparkLineChartProps, SparkLinePoint, } from './SparkLineChart.js';

package/dist/components/SparkLineChart/index.js

@@ -0,0 +1,2 @@
+import { SparkLineChart } from "./SparkLineChart.js";
+export { SparkLineChart };

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+import { type VisualElementSize } from '../../utils/componentSizes.js';
+import type { IconWeight } from '../../utils/icon-types.js';
+type SpinnerSize = VisualElementSize | 'lg';
+declare const SpinnerIcon: ({ weight, ...props }: SVGProps<SVGSVGElement> & {
+    weight?: IconWeight;
+}) => import("react").JSX.Element;
+declare const Spinner: ({ size, className, }: {
+    size?: SpinnerSize;
+    className?: string;
+}) => import("react").JSX.Element;
+export { Spinner, SpinnerIcon };

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,33 @@
+import { cn } from "../../utils/cn.js";
+import { VISUAL_ELEMENT_SIZES } from "../../utils/componentSizes.js";
+import { jsx } from "react/jsx-runtime";
+import { SpinnerGapIcon } from "@phosphor-icons/react/dist/ssr/SpinnerGap";
+//#region packages/components/src/components/Spinner/Spinner.tsx
+var SPINNER_SIZE = {
+	xxs: VISUAL_ELEMENT_SIZES.xxs.className,
+	xs: VISUAL_ELEMENT_SIZES.xs.className,
+	sm: VISUAL_ELEMENT_SIZES.sm.className,
+	md: VISUAL_ELEMENT_SIZES.md.className,
+	lg: "size-8"
+};
+var SpinnerIcon = ({ weight = "regular", ...props }) => {
+	const spinnerProps = {
+		...props,
+		"aria-hidden": true,
+		className: cn("animate-spin", props.className)
+	};
+	return /* @__PURE__ */ jsx(SpinnerGapIcon, {
+		...spinnerProps,
+		weight
+	});
+};
+var Spinner = ({ size = "sm", className }) => {
+	return /* @__PURE__ */ jsx(SpinnerIcon, {
+		weight: size === "xxs" || size === "xs" ? "bold" : "regular",
+		className: cn(SPINNER_SIZE[size], className)
+	});
+};
+//#endregion
+export { Spinner, SpinnerIcon };
+
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":[],"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\n\nimport { SpinnerGapIcon } from '@phosphor-icons/react/dist/ssr/SpinnerGap';\n\nimport { cn } from '../../utils/cn';\nimport {\n  VISUAL_ELEMENT_SIZES,\n  type VisualElementSize,\n} from '../../utils/componentSizes';\nimport type { IconWeight } from '../../utils/icon-types';\n\ntype SpinnerSize = VisualElementSize | 'lg';\n\nconst SPINNER_SIZE: Record<SpinnerSize, string> = {\n  xxs: VISUAL_ELEMENT_SIZES.xxs.className,\n  xs: VISUAL_ELEMENT_SIZES.xs.className,\n  sm: VISUAL_ELEMENT_SIZES.sm.className,\n  md: VISUAL_ELEMENT_SIZES.md.className,\n  lg: 'size-8',\n};\n\nconst SpinnerIcon = ({\n  weight = 'regular',\n  ...props\n}: SVGProps<SVGSVGElement> & { weight?: IconWeight }) => {\n  const spinnerProps = {\n    ...props,\n    'aria-hidden': true,\n    className: cn('animate-spin', props.className),\n  };\n  return <SpinnerGapIcon {...spinnerProps} weight={weight} />;\n};\n\nconst Spinner = ({\n  size = 'sm',\n  className,\n}: {\n  size?: SpinnerSize;\n  className?: string;\n}) => {\n  return (\n    <SpinnerIcon\n      weight={size === 'xxs' || size === 'xs' ? 'bold' : 'regular'}\n      className={cn(SPINNER_SIZE[size], className)}\n    />\n  );\n};\n\nexport { Spinner, SpinnerIcon };\n"],"mappings":";;;;;AAaA,IAAM,eAA4C;CAChD,KAAK,qBAAqB,IAAI;CAC9B,IAAI,qBAAqB,GAAG;CAC5B,IAAI,qBAAqB,GAAG;CAC5B,IAAI,qBAAqB,GAAG;CAC5B,IAAI;AACN;AAEA,IAAM,eAAe,EACnB,SAAS,WACT,GAAG,YACoD;CACvD,MAAM,eAAe;EACnB,GAAG;EACH,eAAe;EACf,WAAW,GAAG,gBAAgB,MAAM,SAAS;CAC/C;CACA,OAAO,oBAAC,gBAAD;EAAgB,GAAI;EAAsB;CAAS,CAAA;AAC5D;AAEA,IAAM,WAAW,EACf,OAAO,MACP,gBAII;CACJ,OACE,oBAAC,aAAD;EACE,QAAQ,SAAS,SAAS,SAAS,OAAO,SAAS;EACnD,WAAW,GAAG,aAAa,OAAO,SAAS;CAC5C,CAAA;AAEL"}

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner, SpinnerIcon } from './Spinner.js';

package/dist/components/Spinner/index.js

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerIcon } from "./Spinner.js";
+export { Spinner, SpinnerIcon };

package/dist/components/SplitViewPane/SplitViewPane.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+export { HeaderTitleActionSlot } from './SplitViewPaneHeader.js';
+export declare const CustomHeaderSlot: {
+    Fill: (props: {
+        children?: ReactNode;
+    }) => import("react").ReactPortal | null;
+    Slot: (props: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    Context: (props: {
+        children?: ReactNode;
+    }) => import("react").JSX.Element;
+    useCanFillSlot: () => boolean;
+};
+export type SplitViewPaneProps = {
+    open: boolean;
+    children: ReactNode;
+    className?: string;
+    sidePaneId?: string;
+    hideArrows?: boolean;
+    customHeader?: ReactNode;
+    defaultWidthPx?: number;
+    overrideWidthPx?: number;
+    minWidthPx?: number;
+    useCustomHeaderSlot?: boolean;
+    requireConfirmationOnClose?: boolean;
+    dismissOnOutsideClick?: boolean;
+    scrollContainer?: 'outer' | 'inner';
+    headerClassName?: string;
+} & ({
+    title?: undefined;
+    onClose?: undefined;
+    onExpand?: undefined;
+    onNext?: undefined;
+    onPrevious?: undefined;
+} | {
+    title?: ReactNode;
+    onClose: () => void;
+    onExpand?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onNext?: () => void;
+    onPrevious?: () => void;
+});
+export declare function SplitViewPane({ open, onClose, onExpand, onNext, onPrevious, children, title, className, sidePaneId, hideArrows, customHeader, useCustomHeaderSlot, defaultWidthPx, overrideWidthPx, minWidthPx, requireConfirmationOnClose, dismissOnOutsideClick, scrollContainer, headerClassName, }: SplitViewPaneProps): import("react").JSX.Element;