@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.21

package/dist/ui/src/components/ui/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../../../../../../ui/src/components/ui/card/card.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Card = ({ className, size = 'default', ...props }: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) => {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        'group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const CardHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const CardTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn('text-base leading-6 font-medium group-data-[size=sm]/card:text-sm group-data-[size=sm]/card:leading-5', className)}\n      {...props}\n    />\n  );\n};\n\nexport const CardDescription = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n\nexport const CardAction = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-action\" className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)} {...props} />;\n};\n\nexport const CardContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-content\" className={cn('px-4 group-data-[size=sm]/card:px-3', className)} {...props} />;\n};\n\nexport const CardFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn('flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,QAAQ,EAAE,WAAW,OAAO,WAAW,GAAG,YAAuE;CAC5H,OACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,wVACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sSACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAyC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yGAAyG,SAAS;EAChI,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAyC;CACvF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,kEAAkE,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9I;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,uCAAuC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACpH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yFAAyF,SAAS;EAChH,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/carousel/carousel.js

@@ -0,0 +1,136 @@
+"use client";
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../button/button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import useEmblaCarousel from "embla-carousel-react";
+//#region ../ui/src/components/ui/carousel/carousel.tsx
+var CarouselContext = React.createContext(null);
+var useCarousel = () => {
+	const context = React.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+};
+var Carousel = ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) => {
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+	const onSelect = React.useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const handleKeyDown = React.useCallback((event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [scrollPrev, scrollNext]);
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	React.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+		return () => {
+			api.off("reInit", onSelect);
+			api.off("select", onSelect);
+		};
+	}, [api, onSelect]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			carouselRef,
+			api,
+			opts,
+			orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+			scrollPrev,
+			scrollNext,
+			canScrollPrev,
+			canScrollNext
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			onKeyDownCapture: handleKeyDown,
+			className: cn("relative", className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			"data-slot": "carousel",
+			...props,
+			children
+		})
+	});
+};
+var CarouselContent = ({ className, ...props }) => {
+	const { carouselRef, orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: "overflow-hidden",
+		"data-slot": "carousel-content",
+		"data-focus": "inset",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+			...props
+		})
+	});
+};
+var CarouselItem = ({ className, ...props }) => {
+	const { orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"data-slot": "carousel-item",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+		...props
+	});
+};
+var CarouselPrevious = ({ className, variant = "outline", size = "icon-sm", ...props }) => {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "carousel-previous",
+		variant,
+		size,
+		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "inset-y-0 -left-12 my-auto" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+};
+var CarouselNext = ({ className, variant = "outline", size = "icon-sm", ...props }) => {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "carousel-next",
+		variant,
+		size,
+		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "inset-y-0 -right-12 my-auto" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ jsx(IconChevronRight, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+};
+//#endregion
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
+
+//# sourceMappingURL=carousel.js.map

package/dist/ui/src/components/ui/carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","names":[],"sources":["../../../../../../../ui/src/components/ui/carousel/carousel.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';\nimport * as React from 'react';\nimport { Button } from '../button';\n\nexport type TCarouselApi = UseEmblaCarouselType[1];\ntype TUseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype TCarouselOptions = TUseCarouselParameters[0];\ntype TCarouselPlugin = TUseCarouselParameters[1];\n\ntype TCarouselProps = {\n  opts?: TCarouselOptions;\n  plugins?: TCarouselPlugin;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: TCarouselApi) => void;\n};\n\ntype TCarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & TCarouselProps;\n\nconst CarouselContext = React.createContext<TCarouselContextProps | null>(null);\n\nexport const useCarousel = () => {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error('useCarousel must be used within a <Carousel />');\n  }\n\n  return context;\n};\n\nexport const Carousel = ({\n  orientation = 'horizontal',\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & TCarouselProps) => {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    },\n    plugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const onSelect = React.useCallback((api: TCarouselApi) => {\n    if (!api) {\n      return;\n    }\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext],\n  );\n\n  React.useEffect(() => {\n    if (!api || !setApi) {\n      return;\n    }\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) {\n      return;\n    }\n    onSelect(api);\n    api.on('reInit', onSelect);\n    api.on('select', onSelect);\n\n    return () => {\n      api.off('reInit', onSelect);\n      api.off('select', onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      {/* The generated shadcn carousel deliberately uses ARIA carousel semantics on a div. */}\n      {/* biome-ignore lint/a11y/useSemanticElements: section would change the public root element. */}\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn('relative', className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n};\n\nexport const CarouselContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\" data-focus=\"inset\">\n      <div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />\n    </div>\n  );\n};\n\nexport const CarouselItem = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  const { orientation } = useCarousel();\n\n  return (\n    // The generated shadcn carousel deliberately uses the ARIA group role for each slide.\n    // biome-ignore lint/a11y/useSemanticElements: fieldset is not an equivalent carousel slide element.\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}\n      {...props}\n    />\n  );\n};\n\nexport const CarouselPrevious = ({ className, variant = 'outline', size = 'icon-sm', ...props }: React.ComponentProps<typeof Button>) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute touch-manipulation rounded-full',\n        orientation === 'horizontal' ? 'inset-y-0 -left-12 my-auto' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconChevronLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n};\n\nexport const CarouselNext = ({ className, variant = 'outline', size = 'icon-sm', ...props }: React.ComponentProps<typeof Button>) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute touch-manipulation rounded-full',\n        orientation === 'horizontal' ? 'inset-y-0 -right-12 my-auto' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconChevronRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/ui/chart/chart.js

@@ -0,0 +1,168 @@
+"use client";
+import { cn } from "../../../lib/utils.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as RechartsPrimitive from "recharts";
+//#region ../ui/src/components/ui/chart/chart.tsx
+var THEMES = {
+	light: "",
+	dark: ".dark"
+};
+var INITIAL_DIMENSION = {
+	width: 320,
+	height: 200
+};
+var ChartContext = React.createContext(null);
+var useChart = () => {
+	const context = React.useContext(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
+};
+var ChartContainer = ({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) => {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+	const refContainer = React.useRef(null);
+	const [hasSize, setHasSize] = React.useState(false);
+	React.useLayoutEffect(() => {
+		const element = refContainer.current;
+		if (!element) return;
+		const update = () => {
+			const { width, height } = element.getBoundingClientRect();
+			setHasSize(width > 0 && height > 0);
+		};
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: refContainer,
+			"data-slot": "chart",
+			id,
+			"data-chart": chartId,
+			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(ChartStyle, {
+				id: chartId,
+				config
+			}), hasSize && /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
+				initialDimension,
+				children
+			})]
+		})
+	});
+};
+var ChartStyle = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+	if (!colorConfig.length) return null;
+	const css = Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n");
+	return /* @__PURE__ */ jsx("style", { children: css });
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+var ChartTooltipContent = ({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) => {
+	const { config } = useChart();
+	const tooltipLabel = React.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: payload.filter((item) => item.type !== "none").map((item, index) => {
+				const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+				const itemConfig = getPayloadConfigFromPayload(config, item, key);
+				const indicatorColor = color ?? item.payload?.fill ?? item.color;
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
+						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"w-1": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: itemConfig?.label ?? item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ jsx("span", {
+							className: "font-mono font-medium text-foreground tabular-nums",
+							children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
+						})]
+					})] })
+				}, `${key}-${String(item.value ?? "")}`);
+			})
+		})]
+	});
+};
+var ChartLegend = RechartsPrimitive.Legend;
+var ChartLegendContent = ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }) => {
+	const { config } = useChart();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+		children: payload.filter((item) => item.type !== "none").map((item) => {
+			const key = `${nameKey ?? item.dataKey ?? "value"}`;
+			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
+					className: "h-2 w-2 shrink-0 rounded-[2px]",
+					style: { backgroundColor: item.color }
+				}), itemConfig?.label]
+			}, `${key}-${String(item.value ?? "")}`);
+		})
+	});
+};
+var getPayloadConfigFromPayload = (config, payload, key) => {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+};
+//#endregion
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
+
+//# sourceMappingURL=chart.js.map

package/dist/ui/src/components/ui/chart/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":[],"sources":["../../../../../../../ui/src/components/ui/chart/chart.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@edyn/ui/lib/utils';\nimport * as React from 'react';\nimport type { TooltipValueType } from 'recharts';\nimport * as RechartsPrimitive from 'recharts';\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: '', dark: '.dark' } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TTooltipName = number | string;\n\nexport type TChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })\n>;\n\ntype TChartContextProps = {\n  config: TChartConfig;\n};\n\nconst ChartContext = React.createContext<TChartContextProps | null>(null);\n\nconst useChart = () => {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error('useChart must be used within a <ChartContainer />');\n  }\n\n  return context;\n};\n\nexport const ChartContainer = ({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<'div'> & {\n  config: TChartConfig;\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n  initialDimension?: {\n    width: number;\n    height: number;\n  };\n}) => {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const [hasSize, setHasSize] = React.useState(false);\n\n  React.useLayoutEffect(() => {\n    const element = refContainer.current;\n    if (!element) {\n      return;\n    }\n\n    const update = () => {\n      const { width, height } = element.getBoundingClientRect();\n      setHasSize(width > 0 && height > 0);\n    };\n\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        ref={refContainer}\n        data-slot=\"chart\"\n        id={id}\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        {hasSize && <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>{children}</RechartsPrimitive.ResponsiveContainer>}\n      </div>\n    </ChartContext.Provider>\n  );\n};\n\nexport const ChartStyle = ({ id, config }: { id: string; config: TChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  const css = Object.entries(THEMES)\n    .map(\n      ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join('\\n')}\n}\n`,\n    )\n    .join('\\n');\n\n  return <style>{css}</style>;\n};\n\nexport const ChartTooltip = RechartsPrimitive.Tooltip;\n\nexport const ChartTooltipContent = ({\n  active,\n  payload,\n  className,\n  indicator = 'dot',\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<'div'> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: 'line' | 'dot' | 'dashed';\n    nameKey?: string;\n    labelKey?: string;\n  } & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TTooltipName>, 'accessibilityLayer'>) => {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value = !labelKey && typeof label === 'string' ? (config[label]?.label ?? label) : itemConfig?.label;\n\n    if (labelFormatter) {\n      return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>;\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn('font-medium', labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== 'dot';\n\n  return (\n    <div\n      className={cn('grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl', className)}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== 'none')\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n            return (\n              <div\n                key={`${key}-${String(item.value ?? '')}`}\n                className={cn(\n                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',\n                  indicator === 'dot' && 'items-center',\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {\n                            'h-2.5 w-2.5': indicator === 'dot',\n                            'w-1': indicator === 'line',\n                            'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',\n                            'my-0.5': nestLabel && indicator === 'dashed',\n                          })}\n                          style={\n                            {\n                              '--color-bg': indicatorColor,\n                              '--color-border': indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div className={cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}>\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">{itemConfig?.label ?? item.name}</span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {typeof item.value === 'number' ? item.value.toLocaleString() : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n};\n\nexport const ChartLegend = RechartsPrimitive.Legend;\n\nexport const ChartLegendContent = ({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = 'bottom',\n  nameKey,\n}: React.ComponentProps<'div'> & {\n  hideIcon?: boolean;\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) => {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>\n      {payload\n        .filter((item) => item.type !== 'none')\n        .map((item) => {\n          const key = `${nameKey ?? item.dataKey ?? 'value'}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              key={`${key}-${String(item.value ?? '')}`}\n              className={cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground')}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n};\n\nconst getPayloadConfigFromPayload = (config: TChartConfig, payload: unknown, key: string) => {\n  if (typeof payload !== 'object' || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null ? payload.payload : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key as keyof typeof payloadPayload] === 'string') {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n};\n"],"mappings":"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"}

package/dist/ui/src/components/ui/checkbox/checkbox.js

@@ -0,0 +1,21 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconMinus } from "@tabler/icons-react";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region ../ui/src/components/ui/checkbox/checkbox.tsx
+var Checkbox$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-control transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "group/checkbox-indicator grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: [/* @__PURE__ */ jsx(IconCheck, { className: "group-data-indeterminate/checkbox-indicator:hidden" }), /* @__PURE__ */ jsx(IconMinus, { className: "hidden group-data-indeterminate/checkbox-indicator:block" })]
+		})
+	});
+};
+//#endregion
+export { Checkbox$1 as Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/ui/src/components/ui/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../../../../ui/src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\n\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\n\nexport const Checkbox = ({ className, ...props }: CheckboxPrimitive.Root.Props) => {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-control transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group/checkbox-indicator grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconCheck className=\"group-data-indeterminate/checkbox-indicator:hidden\" />\n        <IconMinus className=\"hidden group-data-indeterminate/checkbox-indicator:block\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,cAAY,EAAE,WAAW,GAAG,YAA0C;CACjF,OACE,oBAAC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,gkBACA,SACF;EACA,GAAI;EAEJ,UAAA,qBAAC,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,WAAD,EAAW,WAAU,qDAAsD,CAAA,GAC3E,oBAAC,WAAD,EAAW,WAAU,2DAA4D,CAAA,CACtD;;CACP,CAAA;AAE5B"}

package/dist/ui/src/components/ui/collapsible/collapsible.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region ../ui/src/components/ui/collapsible/collapsible.tsx
+var Collapsible$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "collapsible",
+		...props
+	});
+};
+var CollapsibleTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+};
+var CollapsibleContent = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		"data-slot": "collapsible-content",
+		"data-focus": "inset",
+		...props
+	});
+};
+//#endregion
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger };
+
+//# sourceMappingURL=collapsible.js.map

package/dist/ui/src/components/ui/collapsible/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","names":[],"sources":["../../../../../../../ui/src/components/ui/collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\n\nexport const Collapsible = ({ ...props }: CollapsiblePrimitive.Root.Props) => {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n};\n\nexport const CollapsibleTrigger = ({ ...props }: CollapsiblePrimitive.Trigger.Props) => {\n  return <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />;\n};\n\nexport const CollapsibleContent = ({ ...props }: CollapsiblePrimitive.Panel.Props) => {\n  return <CollapsiblePrimitive.Panel data-slot=\"collapsible-content\" data-focus=\"inset\" {...props} />;\n};\n"],"mappings":";;;AAEA,IAAa,iBAAe,EAAE,GAAG,YAA6C;CAC5E,OAAO,oBAAC,YAAqB,MAAtB;EAA2B,aAAU;EAAc,GAAI;CAAQ,CAAA;AACxE;AAEA,IAAa,sBAAsB,EAAE,GAAG,YAAgD;CACtF,OAAO,oBAAC,YAAqB,SAAtB;EAA8B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AACnF;AAEA,IAAa,sBAAsB,EAAE,GAAG,YAA8C;CACpF,OAAO,oBAAC,YAAqB,OAAtB;EAA4B,aAAU;EAAsB,cAAW;EAAQ,GAAI;CAAQ,CAAA;AACpG"}

package/dist/ui/src/components/ui/combobox/combobox.d.ts

@@ -1,7 +1,11 @@
 import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
 import { ReactNode } from 'react';
 export declare const Combobox: <TValue>({ ...props }: ComboboxPrimitive.Root.Props<TValue>) => import('react').JSX.Element;
-export declare const ComboboxInput: ({ className, ...props }: ComboboxPrimitive.Input.Props) => import('react').JSX.Element;
+export interface IComboboxInputProps extends ComboboxPrimitive.Input.Props {
+    /** The name of the chevron button that opens the list, for a screen reader and a voice command. Translate it with the rest of the page. */
+    triggerLabel?: string;
+}
+export declare const ComboboxInput: ({ className, triggerLabel, ...props }: IComboboxInputProps) => import('react').JSX.Element;
 export interface IComboboxContentProps extends Omit<ComboboxPrimitive.Popup.Props, 'children'> {
     /** Item nodes, or the Base UI function form `(item, index) => node` (requires `items` on the root). */
     children?: ComboboxPrimitive.List.Props['children'];
@@ -13,3 +17,13 @@ export interface IComboboxContentProps extends Omit<ComboboxPrimitive.Popup.Prop
 export declare const ComboboxContent: ({ className, children, empty, portalContainer, ...props }: IComboboxContentProps) => import('react').JSX.Element;
 export declare const ComboboxItem: ({ className, children, ...props }: ComboboxPrimitive.Item.Props) => import('react').JSX.Element;
 export declare const ComboboxEmpty: ({ className, children, ...props }: ComboboxPrimitive.Empty.Props) => import('react').JSX.Element;
+/**
+ * A titled run of items. Put a `ComboboxLabel` first in it; with grouped `items` on the root, render the group's own items
+ * through `ComboboxCollection` (Base UI's grouped-items pattern), so a filter hides a group whose items all drop out.
+ */
+export declare const ComboboxGroup: ({ ...props }: ComboboxPrimitive.Group.Props) => import('react').JSX.Element;
+/** A group's heading, the same one Select and the menus draw. */
+export declare const ComboboxLabel: ({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) => import('react').JSX.Element;
+/** The items of one group, for grouped `items` on the root. */
+export declare const ComboboxCollection: ({ ...props }: ComboboxPrimitive.Collection.Props) => import('react').JSX.Element;
+export declare const ComboboxSeparator: ({ className, ...props }: ComboboxPrimitive.Separator.Props) => import('react').JSX.Element;

package/dist/ui/src/components/ui/combobox/combobox.js

@@ -0,0 +1,111 @@
+import { cn } from "../../../lib/utils.js";
+import { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { PopupListScroll } from "../scroll-area/popup-list-scroll.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region ../ui/src/components/ui/combobox/combobox.tsx
+var Combobox$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Root, {
+		"data-slot": "combobox",
+		...props
+	});
+};
+var ComboboxInput = ({ className, triggerLabel = "Show options", ...props }) => {
+	return /* @__PURE__ */ jsxs(Combobox.InputGroup, {
+		"data-slot": "combobox-input-group",
+		className: "relative flex w-full items-center",
+		children: [/* @__PURE__ */ jsx(Combobox.Input, {
+			"data-slot": "combobox-input",
+			className: cn("h-8 w-full min-w-0 rounded-lg border border-control bg-transparent px-2.5 py-1 pr-8 text-base transition-colors outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+			...props
+		}), /* @__PURE__ */ jsx(Combobox.Trigger, {
+			"data-slot": "combobox-trigger",
+			className: "absolute right-1.75 flex size-6 items-center justify-center text-muted-foreground disabled:pointer-events-none disabled:opacity-50",
+			tabIndex: -1,
+			"aria-label": triggerLabel,
+			children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-4" })
+		})]
+	});
+};
+var ComboboxContent = ({ className, children, empty, portalContainer, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Portal, {
+		"data-slot": "combobox-portal",
+		container: portalContainer,
+		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			"data-slot": "combobox-positioner",
+			sideOffset: 4,
+			align: "start",
+			className: POPUP_LAYER_CLASS,
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				"data-slot": "combobox-content",
+				className: cn("flex max-h-(--available-height) flex-col overflow-hidden", POPUP_FRAME_CLASS, POPUP_LIST_WIDTH_CLASS, "motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+				...props,
+				children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: empty }), /* @__PURE__ */ jsx(PopupListScroll, { children: /* @__PURE__ */ jsx(Combobox.List, {
+					"data-slot": "combobox-list",
+					className: "px-1",
+					children
+				}) })]
+			})
+		})
+	});
+};
+var ComboboxItem = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: cn(popupItemClass("base-ui", true), className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1",
+			children
+		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			"data-slot": "combobox-item-indicator",
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			children: /* @__PURE__ */ jsx(IconCheck, { className: "size-3.5" })
+		})]
+	});
+};
+var ComboboxEmpty = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("py-4 text-center text-sm text-muted-foreground empty:py-0", className),
+		...props,
+		children: children ?? "No results found."
+	});
+};
+/**
+* A titled run of items. Put a `ComboboxLabel` first in it; with grouped `items` on the root, render the group's own items
+* through `ComboboxCollection` (Base UI's grouped-items pattern), so a filter hides a group whose items all drop out.
+*/
+var ComboboxGroup = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		"data-slot": "combobox-group",
+		...props
+	});
+};
+/** A group's heading, the same one Select and the menus draw. */
+var ComboboxLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: cn(POPUP_GROUP_LABEL_CLASS, className),
+		...props
+	});
+};
+/** The items of one group, for grouped `items` on the root. */
+var ComboboxCollection = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+};
+var ComboboxSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Separator, {
+		"data-slot": "combobox-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+};
+//#endregion
+export { Combobox$1 as Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxSeparator };
+
+//# sourceMappingURL=combobox.js.map

package/dist/ui/src/components/ui/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":[],"sources":["../../../../../../../ui/src/components/ui/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport {\n  POPUP_FRAME_CLASS,\n  POPUP_GROUP_LABEL_CLASS,\n  POPUP_ITEM_INDICATOR_CLASS,\n  POPUP_LAYER_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  popupItemClass,\n} from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown } from '@tabler/icons-react';\nimport type { ReactNode } from 'react';\nimport { PopupListScroll } from '../scroll-area';\n\nexport const Combobox = <TValue,>({ ...props }: ComboboxPrimitive.Root.Props<TValue>) => {\n  return <ComboboxPrimitive.Root data-slot=\"combobox\" {...props} />;\n};\n\nexport interface IComboboxInputProps extends ComboboxPrimitive.Input.Props {\n  /** The name of the chevron button that opens the list, for a screen reader and a voice command. Translate it with the rest of the page. */\n  triggerLabel?: string;\n}\n\nexport const ComboboxInput = ({ className, triggerLabel = 'Show options', ...props }: IComboboxInputProps) => {\n  return (\n    <ComboboxPrimitive.InputGroup data-slot=\"combobox-input-group\" className=\"relative flex w-full items-center\">\n      <ComboboxPrimitive.Input\n        data-slot=\"combobox-input\"\n        className={cn(\n          'h-8 w-full min-w-0 rounded-lg border border-control bg-transparent px-2.5 py-1 pr-8 text-base transition-colors outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n          className,\n        )}\n        {...props}\n      />\n      <ComboboxPrimitive.Trigger\n        data-slot=\"combobox-trigger\"\n        // A 24px target (WCAG 2.5.8) around the 16px chevron, which stays 11px from the end of the field: 7px and the 4px each side.\n        className=\"absolute right-1.75 flex size-6 items-center justify-center text-muted-foreground disabled:pointer-events-none disabled:opacity-50\"\n        tabIndex={-1}\n        aria-label={triggerLabel}\n      >\n        <IconChevronDown className=\"size-4\" />\n      </ComboboxPrimitive.Trigger>\n    </ComboboxPrimitive.InputGroup>\n  );\n};\n\nexport interface IComboboxContentProps extends Omit<ComboboxPrimitive.Popup.Props, 'children'> {\n  /** Item nodes, or the Base UI function form `(item, index) => node` (requires `items` on the root). */\n  children?: ComboboxPrimitive.List.Props['children'];\n  /** Empty-state content; rendered (with the default text) only when the filtered list is empty. */\n  empty?: ReactNode;\n  /** Optional portal destination, used by shadow-DOM element wrappers. */\n  portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nexport const ComboboxContent = ({ className, children, empty, portalContainer, ...props }: IComboboxContentProps) => {\n  return (\n    <ComboboxPrimitive.Portal data-slot=\"combobox-portal\" container={portalContainer}>\n      <ComboboxPrimitive.Positioner data-slot=\"combobox-positioner\" sideOffset={4} align=\"start\" className={POPUP_LAYER_CLASS}>\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          className={cn(\n            'flex max-h-(--available-height) flex-col overflow-hidden',\n            POPUP_FRAME_CLASS,\n            POPUP_LIST_WIDTH_CLASS,\n            'motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        >\n          <ComboboxEmpty>{empty}</ComboboxEmpty>\n          {/* The ScrollArea, not the List, is the scroll container: a filtered list\n              that runs past the fold needs a bar and a fade to say so. Base UI\n              keeps the highlighted item in view through the nearest scrollable\n              ancestor, which is now the viewport. POPUP_LIST_HEIGHT_CLASS ends\n              the list on a whole row. */}\n          <PopupListScroll>\n            <ComboboxPrimitive.List data-slot=\"combobox-list\" className=\"px-1\">\n              {children}\n            </ComboboxPrimitive.List>\n          </PopupListScroll>\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n};\n\nexport const ComboboxItem = ({ className, children, ...props }: ComboboxPrimitive.Item.Props) => {\n  return (\n    <ComboboxPrimitive.Item data-slot=\"combobox-item\" className={cn(popupItemClass('base-ui', true), className)} {...props}>\n      <span className=\"flex-1\">{children}</span>\n      <ComboboxPrimitive.ItemIndicator data-slot=\"combobox-item-indicator\" className={POPUP_ITEM_INDICATOR_CLASS}>\n        <IconCheck className=\"size-3.5\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  );\n};\n\nexport const ComboboxEmpty = ({ className, children, ...props }: ComboboxPrimitive.Empty.Props) => {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      // empty:py-0 collapses the padding while the list has results: Base UI\n      // keeps this status element mounted and only fills it when the list is\n      // empty (and only when the root has `items` to derive emptiness from).\n      className={cn('py-4 text-center text-sm text-muted-foreground empty:py-0', className)}\n      {...props}\n    >\n      {children ?? 'No results found.'}\n    </ComboboxPrimitive.Empty>\n  );\n};\n\n/**\n * A titled run of items. Put a `ComboboxLabel` first in it; with grouped `items` on the root, render the group's own items\n * through `ComboboxCollection` (Base UI's grouped-items pattern), so a filter hides a group whose items all drop out.\n */\nexport const ComboboxGroup = ({ ...props }: ComboboxPrimitive.Group.Props) => {\n  return <ComboboxPrimitive.Group data-slot=\"combobox-group\" {...props} />;\n};\n\n/** A group's heading, the same one Select and the menus draw. */\nexport const ComboboxLabel = ({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) => {\n  return <ComboboxPrimitive.GroupLabel data-slot=\"combobox-label\" className={cn(POPUP_GROUP_LABEL_CLASS, className)} {...props} />;\n};\n\n/** The items of one group, for grouped `items` on the root. */\nexport const ComboboxCollection = ({ ...props }: ComboboxPrimitive.Collection.Props) => {\n  return <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />;\n};\n\nexport const ComboboxSeparator = ({ className, ...props }: ComboboxPrimitive.Separator.Props) => {\n  return <ComboboxPrimitive.Separator data-slot=\"combobox-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAcA,IAAa,cAAqB,EAAE,GAAG,YAAkD;CACvF,OAAO,oBAAC,SAAkB,MAAnB;EAAwB,aAAU;EAAW,GAAI;CAAQ,CAAA;AAClE;AAOA,IAAa,iBAAiB,EAAE,WAAW,eAAe,gBAAgB,GAAG,YAAiC;CAC5G,OACE,qBAAC,SAAkB,YAAnB;EAA8B,aAAU;EAAuB,WAAU;EAAzE,UAAA,CACE,oBAAC,SAAkB,OAAnB;GACE,aAAU;GACV,WAAW,GACT,6dACA,SACF;GACA,GAAI;EACL,CAAA,GACD,oBAAC,SAAkB,SAAnB;GACE,aAAU;GAEV,WAAU;GACV,UAAU;GACV,cAAY;GAEZ,UAAA,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;EACZ,CAAA,CACC;;AAElC;AAWA,IAAa,mBAAmB,EAAE,WAAW,UAAU,OAAO,iBAAiB,GAAG,YAAmC;CACnH,OACE,oBAAC,SAAkB,QAAnB;EAA0B,aAAU;EAAkB,WAAW;EAC/D,UAAA,oBAAC,SAAkB,YAAnB;GAA8B,aAAU;GAAsB,YAAY;GAAG,OAAM;GAAQ,WAAW;GACpG,UAAA,qBAAC,SAAkB,OAAnB;IACE,aAAU;IACV,WAAW,GACT,4DACA,mBACA,wBACA,mKACA,SACF;IACA,GAAI;IATN,UAAA,CAWE,oBAAC,eAAD,EAAA,UAAgB,MAAqB,CAAA,GAMrC,oBAAC,iBAAD,EAAA,UACE,oBAAC,SAAkB,MAAnB;KAAwB,aAAU;KAAgB,WAAU;KACzD;IACqB,CAAA,EACT,CAAA,CACM;;EACG,CAAA;CACN,CAAA;AAE9B;AAEA,IAAa,gBAAgB,EAAE,WAAW,UAAU,GAAG,YAA0C;CAC/F,OACE,qBAAC,SAAkB,MAAnB;EAAwB,aAAU;EAAgB,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,SAAS;EAAG,GAAI;EAAjH,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAAU;EAAe,CAAA,GACzC,oBAAC,SAAkB,eAAnB;GAAiC,aAAU;GAA0B,WAAW;GAC9E,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACF,CAAA,CACX;;AAE5B;AAEA,IAAa,iBAAiB,EAAE,WAAW,UAAU,GAAG,YAA2C;CACjG,OACE,oBAAC,SAAkB,OAAnB;EACE,aAAU;EAIV,WAAW,GAAG,6DAA6D,SAAS;EACpF,GAAI;EAEH,UAAA,YAAY;CACU,CAAA;AAE7B;;;;;AAMA,IAAa,iBAAiB,EAAE,GAAG,YAA2C;CAC5E,OAAO,oBAAC,SAAkB,OAAnB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;AAGA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAgD;CAC5F,OAAO,oBAAC,SAAkB,YAAnB;EAA8B,aAAU;EAAiB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjI;;AAGA,IAAa,sBAAsB,EAAE,GAAG,YAAgD;CACtF,OAAO,oBAAC,SAAkB,YAAnB;EAA8B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AACnF;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAA+C;CAC/F,OAAO,oBAAC,SAAkB,WAAnB;EAA6B,aAAU;EAAqB,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxI"}

package/dist/ui/src/components/ui/command/command.d.ts

@@ -10,7 +10,23 @@ export declare const CommandDialog: ({ title, description, children, className,
     children: React.ReactNode;
 }) => React.JSX.Element;
 export declare const CommandInput: ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) => React.JSX.Element;
-export declare const CommandList: ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) => React.JSX.Element;
+/**
+ * The palette's results list. The scroll container is the DS ScrollArea rather
+ * than the primitive's own `overflow-y-auto`, because a list of results that
+ * continues past the fold with no bar and no fade reads as a complete list. The
+ * cap stays overridable: `cn` lets a caller's own `max-h-*` replace the default.
+ *
+ * The ScrollArea wraps the list from OUTSIDE rather than lining it: cmdk's list
+ * carries `role="listbox"`, and a listbox may not contain presentation wrappers
+ * (axe flags that as a critical aria-required-children violation). The options
+ * have to stay direct children of the element that holds the role.
+ *
+ * cmdk keeps the active item in view with `scrollIntoView({ block: 'nearest' })`
+ * on the item, which acts on the nearest scrollable ancestor, so that keeps
+ * working now that the viewport is the one that scrolls. `scroll-py-1` goes on
+ * the viewport for the same reason: it is what pads that scroll.
+ */
+export declare const CommandList: ({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) => React.JSX.Element;
 export declare const CommandEmpty: ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) => React.JSX.Element;
 export declare const CommandGroup: ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) => React.JSX.Element;
 export declare const CommandSeparator: ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) => React.JSX.Element;