@cognite/aura 0.2.0 → 0.3.0

package/dist/components/ui/core/breadcrumb/breadcrumb.js

@@ -47,101 +47,111 @@ const f = o(
   )
 );
 f.displayName = "BreadcrumbItem";
-const x = o(({ className: e, render: t, children: r, ...s }, d) => l({
-  defaultTagName: "a",
-  ref: d,
-  props: m(
-    {
-      ...{
-        "data-slot": "breadcrumb-link"
+const x = o(
+  ({ className: e, render: t, children: r, ...s }, d) => l({
+    defaultTagName: "a",
+    ref: d,
+    props: m(
+      {
+        ...{
+          "data-slot": "breadcrumb-link"
+        },
+        className: n(
+          "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
+          "text-muted-foreground text-sm leading-[18px] tracking-tight font-normal",
+          "transition-colors hover:bg-accent-background hover:text-foreground",
+          "aria-[current=page]:font-medium aria-[current=page]:text-foreground",
+          e
+        )
       },
+      { ...s, children: r }
+    ),
+    render: t,
+    state: {
+      slot: "breadcrumb-link"
+    }
+  })
+);
+x.displayName = "BreadcrumbLink";
+const h = o(
+  ({ className: e, ...t }, r) => /* @__PURE__ */ a(
+    "span",
+    {
+      ref: r,
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      tabIndex: -1,
       className: n(
         "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
-        "text-muted-foreground text-sm leading-[18px] tracking-tight font-normal",
-        "transition-colors hover:bg-accent-background hover:text-foreground",
-        "aria-[current=page]:font-medium aria-[current=page]:text-foreground",
+        "cursor-default hover:bg-transparent dark:hover:bg-transparent",
+        "text-sm leading-[18px] tracking-tight font-medium text-foreground",
         e
-      )
-    },
-    { ...s, children: r }
-  ),
-  render: t,
-  state: {
-    slot: "breadcrumb-link"
-  }
-}));
-x.displayName = "BreadcrumbLink";
-const h = o(({ className: e, ...t }, r) => /* @__PURE__ */ a(
-  "span",
-  {
-    ref: r,
-    "data-slot": "breadcrumb-page",
-    role: "link",
-    "aria-disabled": "true",
-    "aria-current": "page",
-    tabIndex: -1,
-    className: n(
-      "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
-      "cursor-default hover:bg-transparent dark:hover:bg-transparent",
-      "text-sm leading-[18px] tracking-tight font-medium text-foreground",
-      e
-    ),
-    ...t
-  }
-));
+      ),
+      ...t
+    }
+  )
+);
 h.displayName = "BreadcrumbPage";
-const N = o(({ className: e, ...t }, r) => /* @__PURE__ */ a(
-  "button",
-  {
-    ref: r,
-    "data-slot": "breadcrumb-page-button",
-    type: "button",
-    "aria-current": "page",
-    className: n(
-      "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
-      "text-sm leading-[18px] tracking-tight font-medium text-foreground",
-      "transition-colors hover:bg-accent-background",
-      e
-    ),
-    ...t
-  }
-));
+const N = o(
+  ({ className: e, ...t }, r) => /* @__PURE__ */ a(
+    "button",
+    {
+      ref: r,
+      "data-slot": "breadcrumb-page-button",
+      type: "button",
+      "aria-current": "page",
+      className: n(
+        "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
+        "text-sm leading-[18px] tracking-tight font-medium text-foreground",
+        "transition-colors hover:bg-accent-background",
+        e
+      ),
+      ...t
+    }
+  )
+);
 N.displayName = "BreadcrumbPageButton";
-const y = o(({ className: e, children: t, ...r }, s) => /* @__PURE__ */ a(
-  "button",
-  {
-    ref: s,
-    "data-slot": "breadcrumb-ellipsis-button",
-    type: "button",
-    className: n(
-      "flex size-7 items-center justify-center rounded-md",
-      "text-muted-foreground transition-colors hover:bg-accent-background hover:text-foreground",
-      "data-[popup-open]:bg-accent-background data-[popup-open]:text-foreground",
-      e
-    ),
-    ...r,
-    children: t ?? /* @__PURE__ */ u(c, { children: [
-      /* @__PURE__ */ a(i, { className: "size-3" }),
-      /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
-    ] })
-  }
-));
+const y = o(
+  ({ className: e, children: t, ...r }, s) => /* @__PURE__ */ a(
+    "button",
+    {
+      ref: s,
+      "data-slot": "breadcrumb-ellipsis-button",
+      type: "button",
+      className: n(
+        "flex size-7 items-center justify-center rounded-md",
+        "text-muted-foreground transition-colors hover:bg-accent-background hover:text-foreground",
+        "data-[popup-open]:bg-accent-background data-[popup-open]:text-foreground",
+        e
+      ),
+      ...r,
+      children: t ?? /* @__PURE__ */ u(c, { children: [
+        /* @__PURE__ */ a(i, { className: "size-3" }),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
+      ] })
+    }
+  )
+);
 y.displayName = "BreadcrumbEllipsisButton";
-const B = o(({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a(
-  "li",
-  {
-    ref: s,
-    "data-slot": "breadcrumb-separator",
-    role: "presentation",
-    "aria-hidden": "true",
-    className: n(
-      "flex size-4 items-center justify-center [&>svg]:size-4",
-      t
-    ),
-    ...r,
-    children: e ?? /* @__PURE__ */ a(p, { className: "size-4 text-muted-foreground" })
-  }
-));
+const B = o(
+  ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a(
+    "li",
+    {
+      ref: s,
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: n(
+        "flex size-4 items-center justify-center [&>svg]:size-4",
+        t
+      ),
+      ...r,
+      children: e ?? /* @__PURE__ */ a(p, { className: "size-4 text-muted-foreground" })
+    }
+  )
+);
 B.displayName = "BreadcrumbSeparator";
 const k = o(
   ({ children: e, className: t, ...r }, s) => {

package/dist/components/ui/core/button/button.d.ts

@@ -1,9 +1,12 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+import { ClassProp } from 'class-variance-authority/types';
+export interface ButtonVariantProps {
+    variant?: 'default' | 'defaultOnDark' | 'secondary' | 'secondaryOnDark' | 'outline' | 'ghost' | 'ghostOnDark' | 'destructive' | null;
+    size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg' | null;
+}
+declare const buttonVariants: (props?: (ButtonVariantProps & ClassProp) | undefined) => string;
 type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants>;
-declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, 'ref'> & RefAttributes<HTMLElement>>;
 export { Button, buttonVariants };

package/dist/components/ui/core/button/button.js

@@ -1,18 +1,21 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { Button as u } from "@base-ui/react/button";
-import { cva as g } from "class-variance-authority";
-import { focusRing as b, focusRingDestructive as v, cn as l } from "../../../../lib/utils.js";
-const p = g(
-  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm leading-4.5 tracking-normal font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 ${b} aria-invalid:focus-visible:shadow-focus-ring-destructive`,
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { Button as b } from "@base-ui/react/button";
+import { cva as c } from "class-variance-authority";
+import { cn as u, focusRing as f, focusRingDestructive as l } from "../../../../lib/utils.js";
+const v = c(
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm leading-4.5 tracking-normal font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 ${f} aria-invalid:focus-visible:shadow-focus-ring-destructive`,
   {
     variants: {
       variant: {
         default: "bg-primary-background text-foreground-on-primary hover:bg-primary-background-hover",
+        defaultOnDark: "bg-primary-background-fixed-dark text-foreground-fixed-dark hover:bg-primary-background-fixed-dark-hover disabled:opacity-100 disabled:bg-disabled-background-fixed-dark disabled:text-disabled-foreground-fixed-dark",
         secondary: "bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover",
+        secondaryOnDark: "bg-secondary-background-fixed-dark text-foreground-fixed-light hover:bg-secondary-background-fixed-dark-hover disabled:opacity-100 disabled:bg-disabled-background-fixed-dark disabled:text-disabled-foreground-fixed-dark",
         outline: "border border-border-emphasized bg-background text-foreground hover:bg-accent-background disabled:border-transparent disabled:bg-disabled-background",
         ghost: "hover:bg-accent-background",
-        destructive: `bg-destructive-background text-destructive-foreground-on-critical hover:bg-destructive-background-hover ${v}`
+        ghostOnDark: "text-foreground-fixed-light hover:bg-secondary-background-fixed-dark disabled:opacity-100 disabled:text-disabled-foreground-fixed-dark",
+        destructive: `bg-destructive-background text-destructive-foreground-on-critical hover:bg-destructive-background-hover ${l}`
       },
       size: {
         default: "h-9 px-3 has-[>svg]:px-3",
@@ -28,22 +31,22 @@ const p = g(
       size: "default"
     }
   }
-), f = c(
-  ({ className: r, variant: o, size: t, children: a, render: e, nativeButton: n, ...s }, i) => /* @__PURE__ */ d(
-    u,
+), k = g(
+  ({ className: r, variant: d, size: a, children: o, render: e, nativeButton: t, ...i }, n) => /* @__PURE__ */ s(
+    b,
     {
-      ref: i,
+      ref: n,
       "data-slot": "button",
       render: e,
-      nativeButton: n ?? (e ? !1 : void 0),
-      className: l(p({ variant: o, size: t, className: r })),
-      ...s,
-      children: a
+      nativeButton: t ?? (e ? !1 : void 0),
+      className: u(v({ variant: d, size: a, className: r })),
+      ...i,
+      children: o
     }
   )
 );
-f.displayName = "Button";
+k.displayName = "Button";
 export {
-  f as Button,
-  p as buttonVariants
+  k as Button,
+  v as buttonVariants
 };

package/dist/components/ui/core/button-group/button-group.d.ts

@@ -1,11 +1,12 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
+import { ClassProp } from 'class-variance-authority/types';
 import { Separator } from '../separator/separator';
 declare const buttonGroupVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function ButtonGroup({ className, orientation, ...props }: ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
-declare function ButtonGroupText({ className, render, children, ...props }: useRender.ComponentProps<'div'>): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-declare function ButtonGroupSeparator({ className, orientation, ...props }: ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+    orientation?: 'horizontal' | 'vertical' | null | undefined;
+} & ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): ReactNode;
+declare function ButtonGroupText({ className, render, children, ...props }: useRender.ComponentProps<'div'>): ReactNode;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: ComponentProps<typeof Separator>): ReactNode;
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

package/dist/components/ui/core/card/card.d.ts

@@ -1,20 +1,21 @@
-import { ReactNode } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, ComponentProps, ReactNode } from 'react';
+import { MenuRoot } from '@base-ui/react';
 type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-declare const Card: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardHeaderStart: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardTitle: import('react').ForwardRefExoticComponent<Omit<import('react').ClassAttributes<HTMLHeadingElement> & import('react').HTMLAttributes<HTMLHeadingElement> & {
+declare const Card: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardHeaderStart: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardTitle: ForwardRefExoticComponent<Omit<ComponentProps<'h3'> & {
     as?: HeadingElement;
-}, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
-declare const CardDescription: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
-declare const CardHeaderEnd: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardHeaderCenter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardActions: import('react').ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuRoot.Props<unknown>, "children"> & {
+}, 'ref'> & RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: ForwardRefExoticComponent<ComponentProps<'p'> & RefAttributes<HTMLParagraphElement>>;
+declare const CardHeaderEnd: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardHeader: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardHeaderCenter: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardActions: ForwardRefExoticComponent<Omit<MenuRoot.Props<unknown>, 'children'> & {
     children?: ReactNode;
-    align?: "start" | "center" | "end";
-} & import('react').RefAttributes<HTMLElement>>;
-declare const CardContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardFooter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardFooterStart: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardFooterEnd: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    align?: 'start' | 'center' | 'end';
+} & RefAttributes<HTMLElement>>;
+declare const CardContent: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardFooter: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardFooterStart: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardFooterEnd: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
 export { Card, CardHeader, CardHeaderCenter, CardHeaderStart, CardHeaderEnd, CardFooter, CardFooterStart, CardFooterEnd, CardTitle, CardActions, CardDescription, CardContent, };

package/dist/components/ui/core/chart/chart.d.ts

@@ -0,0 +1,69 @@
+import { ComponentProps, CSSProperties, ReactNode } from 'react';
+import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+export type ChartConfig = {
+    [k in string]: {
+        label?: ReactNode;
+        icon?: ReactNode;
+        /** A CSS color or `var(--token)`. Use a token for light/dark theming. */
+        color?: string;
+    };
+};
+declare function colorVarsFromConfig(config: ChartConfig): CSSProperties;
+type ChartA11yProps = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-labelledby': string;
+    'aria-label'?: never;
+};
+type ChartContainerProps = Omit<ComponentProps<'div'>, 'aria-label' | 'aria-labelledby'> & ChartA11yProps & {
+    config: ChartConfig;
+    children: ComponentProps<typeof ResponsiveContainer>['children'];
+};
+declare function ChartContainer({ id, className, children, config, style, role, ...props }: ChartContainerProps): ReactNode;
+declare const ChartTooltip: typeof Tooltip;
+type TooltipPayloadItem = {
+    type?: string;
+    name?: string | number;
+    dataKey?: string | number;
+    value?: string | number;
+    color?: string;
+    payload?: Record<string, unknown>;
+    fill?: string;
+    [key: string]: unknown;
+};
+type ChartTooltipContentProps = Omit<ComponentProps<typeof Tooltip>, 'content' | 'formatter' | 'labelFormatter'> & {
+    className?: string;
+    labelClassName?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+    payload?: TooltipPayloadItem[];
+    label?: string | number;
+    color?: string;
+    formatter?: (value: string | number, name: string | number, item: TooltipPayloadItem, index: number, payload: Record<string, unknown> | undefined) => ReactNode;
+    labelFormatter?: (value: ReactNode, payload: TooltipPayloadItem[]) => ReactNode;
+    /** Pass an i18n-aware formatter from your app's locale; defaults to the environment locale. */
+    valueFormatter?: (value: string | number) => string;
+};
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, valueFormatter, }: ChartTooltipContentProps): ReactNode;
+declare const ChartLegend: typeof Legend;
+type LegendPayloadItem = {
+    type?: string;
+    value?: string;
+    dataKey?: string | number;
+    color?: string;
+    [key: string]: unknown;
+};
+type ChartLegendContentProps = {
+    className?: string;
+    hideIcon?: boolean;
+    nameKey?: string;
+    payload?: LegendPayloadItem[];
+    verticalAlign?: 'top' | 'bottom' | 'middle';
+};
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: ChartLegendContentProps): ReactNode;
+declare function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string): ChartConfig[string] | undefined;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, colorVarsFromConfig, getPayloadConfigFromPayload, };

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

@@ -0,0 +1,215 @@
+import { jsx as a, jsxs as g, Fragment as L } from "react/jsx-runtime";
+import { useMemo as O, createContext as K, useContext as Y } from "react";
+import { Legend as $, Tooltip as D, ResponsiveContainer as M } from "recharts";
+import { cn as i } from "../../../../lib/utils.js";
+function S(e) {
+  if (!e)
+    return;
+  const r = e.trim();
+  return { backgroundColor: r, borderColor: r };
+}
+const V = K(null);
+function j() {
+  const e = Y(V);
+  if (!e)
+    throw new Error("useChart must be used within a <ChartContainer>");
+  return e;
+}
+function R(e) {
+  const r = {};
+  for (const [s, n] of Object.entries(e))
+    n.color && (r[`--color-${s}`] = n.color);
+  return r;
+}
+function Q({
+  id: e,
+  className: r,
+  children: s,
+  config: n,
+  style: d,
+  role: c = "img",
+  ...o
+}) {
+  const l = O(() => ({ config: n }), [n]), f = R(n);
+  return /* @__PURE__ */ a(V.Provider, { value: l, children: /* @__PURE__ */ a(
+    "div",
+    {
+      role: c,
+      "data-slot": "chart",
+      "data-chart-id": e,
+      className: i(
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-chart-gridlines [&_.recharts-curve.recharts-tooltip-cursor]:stroke-chart-gridlines [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-chart-gridlines [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-chart-gridlines flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        r
+      ),
+      style: { ...f, ...d },
+      ...o,
+      children: /* @__PURE__ */ a(M, { children: s })
+    }
+  ) });
+}
+const U = D, G = [], H = (e) => typeof e == "number" ? e.toLocaleString() : String(e);
+function W({
+  active: e,
+  payload: r = G,
+  className: s,
+  indicator: n = "dot",
+  hideLabel: d = !1,
+  hideIndicator: c = !1,
+  label: o,
+  labelFormatter: l,
+  labelClassName: f,
+  formatter: h,
+  color: y,
+  nameKey: T,
+  labelKey: _,
+  valueFormatter: A = H
+}) {
+  const { config: x } = j(), k = (() => {
+    if (d || !r?.length)
+      return null;
+    const [t] = r, v = `${_ ?? t?.dataKey ?? t?.name ?? "value"}`, C = b(x, t, v), u = !_ && typeof o == "string" ? x[o]?.label ?? o : C?.label;
+    return l ? /* @__PURE__ */ a("div", { className: i("font-medium", f), children: l(u, r) }) : u ? /* @__PURE__ */ a("div", { className: i("font-medium", f), children: u }) : null;
+  })(), w = !e || !r.length, p = r.length === 1 && n !== "dot";
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: i(
+        "bg-popover-background grid min-w-32 items-start gap-1 rounded-md p-2 text-sm shadow-md",
+        w && "invisible",
+        s
+      ),
+      children: w ? null : /* @__PURE__ */ g(L, { children: [
+        p ? null : k,
+        /* @__PURE__ */ a("div", { className: "grid gap-1.5", children: r.filter((t) => t.type !== "none").map((t, v) => {
+          const C = `${T ?? t.name ?? t.dataKey ?? "value"}`, u = b(
+            x,
+            t,
+            C
+          ), E = m(t.payload) && typeof t.payload.fill == "string" ? t.payload.fill : void 0, N = y ?? E ?? t.color, F = S(
+            typeof N == "string" ? N : void 0
+          );
+          return /* @__PURE__ */ a(
+            "div",
+            {
+              className: i(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                n === "dot" && "items-center"
+              ),
+              children: h && t.value != null && t.name != null ? h(
+                t.value,
+                t.name,
+                t,
+                v,
+                m(t.payload) ? t.payload : void 0
+              ) : /* @__PURE__ */ g(L, { children: [
+                u?.icon ? u.icon : !c && /* @__PURE__ */ a(
+                  "div",
+                  {
+                    className: i("shrink-0 rounded-xs", {
+                      "h-2 w-2": n === "dot",
+                      "w-1": n === "line",
+                      "w-0 border border-dashed bg-transparent": n === "dashed",
+                      "my-0.5": p && n === "dashed"
+                    }),
+                    style: F
+                  }
+                ),
+                /* @__PURE__ */ g(
+                  "div",
+                  {
+                    className: i(
+                      "flex flex-1 justify-between gap-4 leading-none",
+                      p ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ g("div", { className: "grid gap-1", children: [
+                        p ? k : null,
+                        /* @__PURE__ */ a("span", { className: "text-muted-foreground", children: u?.label ?? t.name })
+                      ] }),
+                      t.value !== void 0 && t.value !== null && /* @__PURE__ */ a("span", { className: "text-foreground tabular-nums", children: A(t.value) })
+                    ]
+                  }
+                )
+              ] })
+            },
+            t.dataKey ?? v
+          );
+        }) })
+      ] })
+    }
+  );
+}
+const X = $, I = [];
+function Z({
+  className: e,
+  hideIcon: r = !1,
+  payload: s = I,
+  verticalAlign: n = "bottom",
+  nameKey: d
+}) {
+  const { config: c } = j();
+  return s?.length ? /* @__PURE__ */ a(
+    "div",
+    {
+      className: i(
+        "flex items-center justify-center gap-4",
+        n === "top" ? "pb-3" : "pt-3",
+        e
+      ),
+      children: s.filter((o) => o.type !== "none").map((o, l) => {
+        const f = `${d ?? o.dataKey ?? "value"}`, h = b(c, o, f), y = S(
+          typeof o.color == "string" ? o.color : void 0
+        );
+        return /* @__PURE__ */ g(
+          "div",
+          {
+            className: i(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            ),
+            children: [
+              h?.icon && !r ? h.icon : /* @__PURE__ */ a(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-xs",
+                  style: y
+                }
+              ),
+              h?.label ?? o.value
+            ]
+          },
+          o.value ?? l
+        );
+      })
+    }
+  ) : null;
+}
+function b(e, r, s) {
+  if (!m(r))
+    return;
+  const n = r, d = m(n.payload) ? n.payload : void 0;
+  let c = s;
+  const o = P(n, s);
+  if (o)
+    c = o;
+  else {
+    const l = d ? P(d, s) : void 0;
+    l && (c = l);
+  }
+  return e[c] ?? e[s];
+}
+function m(e) {
+  return typeof e == "object" && e !== null && !Array.isArray(e);
+}
+function P(e, r) {
+  const s = e[r];
+  return typeof s == "string" ? s : void 0;
+}
+export {
+  Q as ChartContainer,
+  X as ChartLegend,
+  Z as ChartLegendContent,
+  U as ChartTooltip,
+  W as ChartTooltipContent,
+  R as colorVarsFromConfig,
+  b as getPayloadConfigFromPayload
+};

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

@@ -0,0 +1,2 @@
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from './chart';
+export type { ChartConfig } from './chart';

package/dist/components/ui/core/chart/index.js

@@ -0,0 +1,8 @@
+import { ChartContainer as e, ChartLegend as n, ChartLegendContent as r, ChartTooltip as C, ChartTooltipContent as a } from "./chart.js";
+export {
+  e as ChartContainer,
+  n as ChartLegend,
+  r as ChartLegendContent,
+  C as ChartTooltip,
+  a as ChartTooltipContent
+};