@alexgorbatchev/shadcn 0.0.0-stage → 0.0.12

package/dist/components/carousel/index.js

@@ -0,0 +1,207 @@
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "../../chunk-tnktkgvp.js";
+
+// src/components/carousel/Carousel.tsx
+import { useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { useDirection } from "@base-ui/react/direction-provider";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "lucide-react";
+
+// src/components/carousel/CarouselContext.ts
+import { createContext } from "react";
+var CarouselContext = createContext(null);
+
+// src/components/carousel/hooks/useCarousel.ts
+import { useContext } from "react";
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context)
+    throw new Error("useCarousel must be used within Carousel.");
+  return context;
+}
+
+// src/components/carousel/Carousel.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function Carousel({
+  density,
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  onKeyDown,
+  ...props
+}) {
+  const inheritedDirection = useDirection();
+  const direction = opts?.direction ?? inheritedDirection;
+  const [carouselRef, api] = useEmblaCarousel({
+    ...opts,
+    direction,
+    axis: orientation === "horizontal" ? "x" : "y",
+    breakpoints: {
+      ...opts?.breakpoints,
+      "(prefers-reduced-motion: reduce)": {
+        ...opts?.breakpoints?.["(prefers-reduced-motion: reduce)"],
+        duration: 0
+      }
+    }
+  }, plugins);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const scrollPrev = useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = useCallback(() => api?.scrollNext(), [api]);
+  useEffect(() => {
+    if (!api)
+      return;
+    const update = () => {
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+    update();
+    api.on("reInit", update);
+    api.on("select", update);
+    return () => {
+      api.off("reInit", update);
+      api.off("select", update);
+    };
+  }, [api]);
+  useEffect(() => {
+    if (api)
+      setApi?.(api);
+  }, [api, setApi]);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.target !== event.currentTarget)
+      return;
+    const previousKey = orientation === "vertical" ? "ArrowUp" : direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+    const nextKey = orientation === "vertical" ? "ArrowDown" : direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+    if (event.key === previousKey) {
+      event.preventDefault();
+      scrollPrev();
+    }
+    if (event.key === nextKey) {
+      event.preventDefault();
+      scrollNext();
+    }
+  };
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+    value: { carouselRef, api, orientation, direction, scrollPrev, scrollNext, canScrollPrev, canScrollNext },
+    children: /* @__PURE__ */ jsx("div", {
+      "data-slot": "carousel",
+      "data-density": density,
+      dir: direction,
+      role: "region",
+      "aria-roledescription": "carousel",
+      tabIndex: 0,
+      className: cn2("relative outline-none focus-visible:ring-1 focus-visible:ring-ring", className),
+      ...props,
+      onKeyDown: handleKeyDown,
+      children
+    })
+  });
+}
+function CarouselContent({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx("div", {
+    ref: carouselRef,
+    "data-slot": "carousel-content",
+    className: "overflow-hidden",
+    children: /* @__PURE__ */ jsx("div", {
+      className: cn2("flex", orientation === "horizontal" ? "-ms-panel touch-pan-y touch-pinch-zoom" : "-mt-panel flex-col touch-pan-x touch-pinch-zoom", className),
+      ...props
+    })
+  });
+}
+function CarouselItem({ className, ...props }) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx("div", {
+    role: "group",
+    "aria-roledescription": "slide",
+    "data-slot": "carousel-item",
+    className: cn2("min-h-0 min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "ps-panel" : "pt-panel", className),
+    ...props
+  });
+}
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  disabled,
+  onClick,
+  children,
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsx(Button2, {
+    "data-slot": "carousel-previous",
+    variant,
+    size,
+    className: (state) => cn2("absolute touch-manipulation", orientation === "horizontal" ? "inset-y-0 -start-10 my-auto" : "-top-10 left-1/2 -translate-x-1/2", typeof className === "function" ? className(state) : className),
+    disabled: disabled || !canScrollPrev,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented)
+        scrollPrev();
+    },
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronLeftIcon, {
+          className: "rtl:rotate-180"
+        }) : /* @__PURE__ */ jsx(ChevronUpIcon, {}),
+        /* @__PURE__ */ jsx("span", {
+          className: "sr-only",
+          children: "Previous slide"
+        })
+      ]
+    })
+  });
+}
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  disabled,
+  onClick,
+  children,
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsx(Button2, {
+    "data-slot": "carousel-next",
+    variant,
+    size,
+    className: (state) => cn2("absolute touch-manipulation", orientation === "horizontal" ? "inset-y-0 -end-10 my-auto" : "-bottom-10 left-1/2 -translate-x-1/2", typeof className === "function" ? className(state) : className),
+    disabled: disabled || !canScrollNext,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented)
+        scrollNext();
+    },
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronRightIcon, {
+          className: "rtl:rotate-180"
+        }) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+        /* @__PURE__ */ jsx("span", {
+          className: "sr-only",
+          children: "Next slide"
+        })
+      ]
+    })
+  });
+}
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  useCarousel
+};

package/dist/components/carousel/types.d.ts

@@ -0,0 +1,23 @@
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import type useEmblaCarousel from "embla-carousel-react";
+import type { ComponentProps } from "react";
+import type { IDensityProps } from "../../density/types.js";
+export type CarouselApi = UseEmblaCarouselType[1];
+export type CarouselOptions = Parameters<typeof useEmblaCarousel>[0];
+export type CarouselPlugins = Parameters<typeof useEmblaCarousel>[1];
+export type CarouselProps = ComponentProps<"div"> & IDensityProps & {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugins;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+export interface ICarouselContextValue {
+    carouselRef: UseEmblaCarouselType[0];
+    api: CarouselApi;
+    orientation: "horizontal" | "vertical";
+    direction: "ltr" | "rtl";
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+}

package/dist/components/chart/Chart.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+import type { ChartProps, ChartTooltipContentProps, ChartLegendContentProps } from "./types.js";
+import { Tooltip } from "recharts";
+import { ChartStyle } from "./ChartStyle.js";
+declare function Chart({ id, dir, density, className, children, config, initialDimension, ...props }: ChartProps): ReactElement;
+declare function ChartTooltipContent({ density, active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, htmlProps, contentStyle, itemStyle, labelStyle, wrapperClassName, itemSorter, }: ChartTooltipContentProps): ReactElement | null;
+declare function ChartLegendContent({ density, className, hideIcon, payload, verticalAlign, nameKey, onClick, onMouseEnter, onMouseLeave, formatter, htmlProps, labelStyle, inactiveColor, }: ChartLegendContentProps): ReactElement | null;
+declare const ChartTooltip: typeof Tooltip;
+declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: import("recharts").LegendProps) => React.ReactPortal | null>;
+export { Chart, Chart as ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/components/chart/ChartContext.d.ts

@@ -0,0 +1,2 @@
+import type { IChartContextValue } from "./types.js";
+export declare const ChartContext: import("react").Context<IChartContextValue | null>;

package/dist/components/chart/ChartStyle.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from "react";
+import type { ChartStyleProps } from "./types.js";
+export declare function ChartStyle({ id, config }: ChartStyleProps): ReactElement | null;

package/dist/components/chart/getPayloadConfigFromPayload.d.ts

@@ -0,0 +1,2 @@
+import type { ChartConfig } from "./types.js";
+export declare function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string): ChartConfig[string] | undefined;

package/dist/components/chart/hooks/useChart.d.ts

@@ -0,0 +1,2 @@
+import type { IChartContextValue } from "../types.js";
+export declare function useChart(): IChartContextValue;

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

@@ -0,0 +1,3 @@
+export { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, } from "./Chart.js";
+export type { ChartConfig, ChartProps, ChartTooltipContentProps, ChartLegendContentProps } from "./types.js";
+export { useChart } from "./hooks/useChart.js";

package/dist/components/chart/index.js

@@ -0,0 +1,284 @@
+import {
+  useDensity
+} from "../../chunk-rjjwytbx.js";
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+import {
+  useDirection2
+} from "../../chunk-jpvw9xqy.js";
+
+// src/components/chart/Chart.tsx
+import { useId, useMemo } from "react";
+import { ResponsiveContainer, Tooltip, Legend } from "recharts";
+import sortBy from "es-toolkit/compat/sortBy";
+
+// src/components/chart/ChartContext.ts
+import { createContext } from "react";
+var ChartContext = createContext(null);
+
+// src/components/chart/getPayloadConfigFromPayload.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (!isRecord(payload))
+    return;
+  const value = payload[key];
+  const nested = isRecord(payload.payload) ? payload.payload[key] : undefined;
+  const configLabelKey = typeof value === "string" ? value : typeof nested === "string" ? nested : key;
+  return config[configLabelKey] ?? config[key];
+}
+
+// src/components/chart/hooks/useChart.ts
+import { useContext } from "react";
+function useChart() {
+  const context = useContext(ChartContext);
+  if (!context)
+    throw new Error("useChart must be used within a <ChartContainer />");
+  return context;
+}
+
+// src/components/chart/ChartStyle.tsx
+import cssesc from "cssesc";
+import { jsx } from "react/jsx-runtime";
+var themes = ["light", "dark"];
+function ChartStyle({ id, config }) {
+  const colors = Object.entries(config).filter(([, item]) => item.theme ?? item.color);
+  if (!colors.length)
+    return null;
+  return /* @__PURE__ */ jsx("style", {
+    children: themes.map((theme) => `${theme === "dark" ? "[data-theme=dark] " : ""}[data-chart=${cssesc(id, { isIdentifier: true })}] {
+${colors.map(([key, item]) => {
+      const color = item.theme?.[theme] ?? item.color;
+      return color ? `${cssesc(`--color-${key}`, { isIdentifier: true })}: ${color};` : "";
+    }).join(`
+`)}
+}`).join(`
+`)
+  });
+}
+
+// src/components/chart/Chart.tsx
+import { jsx as jsx2, jsxs, Fragment } from "react/jsx-runtime";
+function Chart({
+  id,
+  dir,
+  density,
+  className,
+  children,
+  config,
+  initialDimension = { width: 320, height: 200 },
+  ...props
+}) {
+  const uniqueId = useId();
+  const resolvedDensity = useDensity(density);
+  const inheritedDirection = useDirection2();
+  const direction = dir ?? inheritedDirection;
+  const chartId = `chart-${id ?? uniqueId}`;
+  return /* @__PURE__ */ jsx2(ChartContext.Provider, {
+    value: { config, density: resolvedDensity, dir: direction, chartId },
+    children: /* @__PURE__ */ jsxs("div", {
+      id,
+      dir: direction,
+      "data-density": resolvedDensity,
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn2("flex aspect-video min-w-0 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__ */ jsx2(ChartStyle, {
+          id: chartId,
+          config
+        }),
+        /* @__PURE__ */ jsx2(ResponsiveContainer, {
+          initialDimension,
+          children
+        })
+      ]
+    })
+  });
+}
+function ChartTooltipContent({
+  density,
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+  htmlProps,
+  contentStyle,
+  itemStyle,
+  labelStyle,
+  wrapperClassName,
+  itemSorter
+}) {
+  const { config, density: chartDensity, dir, chartId } = useChart();
+  const tooltipLabel = 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__ */ jsx2("div", {
+        className: cn2("font-medium", labelClassName),
+        style: labelStyle,
+        children: labelFormatter(value, payload)
+      });
+    if (!value)
+      return null;
+    return /* @__PURE__ */ jsx2("div", {
+      className: cn2("font-medium", labelClassName),
+      style: labelStyle,
+      children: value
+    });
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, labelStyle, config, labelKey]);
+  if (!active || !payload?.length)
+    return null;
+  const sortedPayload = itemSorter ? sortBy(payload, itemSorter) : payload;
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs("div", {
+    role: "status",
+    "data-slot": "chart-tooltip",
+    "data-chart": chartId,
+    dir,
+    "data-density": density ?? chartDensity,
+    ...htmlProps,
+    className: cn2("grid min-w-32 items-start gap-control-gap rounded-md border border-frame-edge bg-popover p-panel text-xs text-popover-foreground shadow-frame", className, wrapperClassName, htmlProps?.className),
+    style: { ...contentStyle, ...htmlProps?.style },
+    children: [
+      !nestLabel ? tooltipLabel : null,
+      /* @__PURE__ */ jsx2("div", {
+        className: "grid gap-control-gap",
+        children: sortedPayload.filter((item) => item.type !== "none").map((item, index) => {
+          const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const itemPayload = item.payload;
+          const fill = typeof itemPayload === "object" && itemPayload !== null && "fill" in itemPayload ? itemPayload.fill : undefined;
+          const indicatorColor = color ?? (typeof fill === "string" ? fill : item.color);
+          const indicatorStyle = {
+            "--color-bg": indicatorColor,
+            "--color-border": indicatorColor
+          };
+          return /* @__PURE__ */ jsx2("div", {
+            className: cn2("flex w-full flex-wrap items-stretch gap-control-gap [&>svg]:size-3 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+            style: itemStyle,
+            children: formatter && item.value !== undefined && item.name !== undefined ? formatter(item.value, item.name, item, index, payload) : /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx2(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx2("div", {
+                  "aria-hidden": "true",
+                  className: cn2("shrink-0 rounded-sm border-(--color-border) bg-(--color-bg)", {
+                    "size-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: indicatorStyle
+                }),
+                /* @__PURE__ */ jsxs("div", {
+                  className: cn2("flex flex-1 justify-between gap-control-gap leading-none", nestLabel ? "items-end" : "items-center"),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", {
+                      className: "grid gap-control-gap",
+                      children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx2("span", {
+                          className: "text-muted-foreground",
+                          children: itemConfig?.label ?? item.name
+                        })
+                      ]
+                    }),
+                    item.value != null && /* @__PURE__ */ jsx2("span", {
+                      className: "font-mono font-medium tabular-nums",
+                      children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
+                    })
+                  ]
+                })
+              ]
+            })
+          }, index);
+        })
+      })
+    ]
+  });
+}
+function ChartLegendContent({
+  density,
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  formatter,
+  htmlProps,
+  labelStyle,
+  inactiveColor
+}) {
+  const { config, density: chartDensity, dir, chartId } = useChart();
+  if (!payload?.length)
+    return null;
+  return /* @__PURE__ */ jsx2("div", {
+    "data-slot": "chart-legend",
+    "data-chart": chartId,
+    dir,
+    "data-density": density ?? chartDensity,
+    ...htmlProps,
+    className: cn2("flex items-center justify-center gap-panel", verticalAlign === "top" ? "pb-panel" : "pt-panel", className, htmlProps?.className),
+    children: payload.filter((item) => item.type !== "none").map((item, index) => {
+      const key = `${nameKey ?? item.dataKey ?? "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const content = /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx2(itemConfig.icon, {}) : /* @__PURE__ */ jsx2("span", {
+            "aria-hidden": "true",
+            className: "size-2 shrink-0 rounded-sm",
+            style: { backgroundColor: item.inactive ? inactiveColor : item.color }
+          }),
+          /* @__PURE__ */ jsx2("span", {
+            style: labelStyle,
+            children: formatter ? formatter(itemConfig?.label ?? item.value, item, index) : itemConfig?.label ?? item.value
+          })
+        ]
+      });
+      const classes = "flex items-center gap-control-gap [&>svg]:size-3 [&>svg]:text-muted-foreground";
+      return onClick ? /* @__PURE__ */ jsx2("button", {
+        type: "button",
+        className: cn2(classes, "outline-none focus-visible:ring-1 focus-visible:ring-ring"),
+        onClick: (event) => onClick(item, index, event),
+        onMouseEnter: (event) => onMouseEnter?.(item, index, event),
+        onMouseLeave: (event) => onMouseLeave?.(item, index, event),
+        children: content
+      }, index) : /* @__PURE__ */ jsx2("div", {
+        className: classes,
+        onMouseEnter: (event) => onMouseEnter?.(item, index, event),
+        onMouseLeave: (event) => onMouseLeave?.(item, index, event),
+        children: content
+      }, index);
+    })
+  });
+}
+var ChartTooltip = Tooltip;
+var ChartLegend = Legend;
+export {
+  Chart,
+  Chart as ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+  useChart
+};

package/dist/components/chart/types.d.ts

@@ -0,0 +1,50 @@
+import type { ComponentProps, ComponentType, CSSProperties, ReactNode } from "react";
+import type { DefaultLegendContentProps, DefaultTooltipContentProps, ResponsiveContainer, TooltipValueType } from "recharts";
+import type { Density, IDensityProps } from "../../density/types.js";
+import type { ResolvedTheme } from "../../theme/types.js";
+export type ChartConfig = Record<string, {
+    label?: ReactNode;
+    icon?: ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<ResolvedTheme, string>;
+})>;
+export interface IChartContextValue {
+    config: ChartConfig;
+    density: Density;
+    dir: string;
+    chartId: string;
+}
+export type ChartProps = ComponentProps<"div"> & IDensityProps & {
+    config: ChartConfig;
+    children: ComponentProps<typeof ResponsiveContainer>["children"];
+    initialDimension?: ComponentProps<typeof ResponsiveContainer>["initialDimension"];
+};
+export type ChartStyleProps = {
+    id: string;
+    config: ChartConfig;
+};
+export type ChartIndicatorStyle = CSSProperties & {
+    "--color-bg"?: string;
+    "--color-border"?: string;
+};
+export type ChartTooltipContentProps = Omit<DefaultTooltipContentProps<TooltipValueType, number | string>, "accessibilityLayer"> & IDensityProps & {
+    className?: string;
+    htmlProps?: ComponentProps<"div">;
+    active?: boolean;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    color?: string;
+};
+export type ChartLegendContentProps = DefaultLegendContentProps & IDensityProps & {
+    className?: string;
+    htmlProps?: ComponentProps<"div">;
+    hideIcon?: boolean;
+    nameKey?: string;
+};

package/dist/components/command/Command.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps, ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+import { Command as CommandPrimitive } from "cmdk";
+import { Dialog } from "../Dialog.js";
+type CommandProps = ComponentProps<typeof CommandPrimitive> & IDensityProps;
+declare function Command({ density, className, ...props }: CommandProps): ReactElement;
+type CommandDialogProps<Payload> = ComponentProps<typeof Dialog<Payload>> & IDensityProps & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+};
+declare function CommandDialog<Payload>({ title, description, children, density, className, showCloseButton, ...props }: CommandDialogProps<Payload>): ReactElement;
+declare function CommandInput({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>): ReactElement;
+declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): ReactElement;
+declare function CommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>): ReactElement;
+declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): ReactElement;
+declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): ReactElement;
+declare function CommandItem({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.Item>): ReactElement;
+declare function CommandShortcut({ className, ...props }: ComponentProps<"span">): ReactElement;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, };

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

@@ -0,0 +1 @@
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } from "./Command.js";