@locusgraph/components 0.1.1 → 0.2.1

package/dist/display/avatar.js

@@ -1,14 +1,125 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
 import * as AvatarPrimitive from "radix-ui/avatar";
-function Avatar({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className), ...props }));
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Avatar(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(AvatarPrimitive.Root, {
+      "data-slot": "avatar",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function AvatarImage({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full", className), ...props }));
+function AvatarImage(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("aspect-square size-full", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(AvatarPrimitive.Image, {
+      "data-slot": "avatar-image",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function AvatarFallback({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-ghost text-xs font-medium uppercase", className), ...props }));
+function AvatarFallback(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("flex size-full items-center justify-center rounded-full bg-ghost text-xs font-medium uppercase", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(AvatarPrimitive.Fallback, {
+      "data-slot": "avatar-fallback",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
 export { Avatar, AvatarFallback, AvatarImage };

package/dist/display/badge.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "destructive" | "destructive-soft" | "ghost" | "link" | "outline" | "secondary" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/display/badge.js

@@ -1,24 +1,81 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
 import * as Slot from "radix-ui/slot";
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 const badgeVariants = cva("inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3", {
-    variants: {
-        variant: {
-            default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-            secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-            destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-            outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-            ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 [a&]:hover:underline",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-    },
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+      secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+      destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+      success: "bg-good/10 text-good [a&]:hover:bg-good/15",
+      warning: "bg-warn/10 text-warn [a&]:hover:bg-warn/15",
+      "destructive-soft": "bg-destructive/10 text-destructive [a&]:hover:bg-destructive/15",
+      outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 [a&]:hover:underline"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
 });
-function Badge({ className, variant = "default", asChild = false, ...props }) {
-    const Comp = asChild ? Slot.Root : "span";
-    return (_jsx(Comp, { "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props }));
+function Badge(t0) {
+  const $ = _c(13);
+  let className;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      className,
+      variant: t1,
+      asChild: t2,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+    t2 = $[4];
+  }
+  const variant = t1 === undefined ? "default" : t1;
+  const asChild = t2 === undefined ? false : t2;
+  const Comp = asChild ? Slot.Root : "span";
+  let t3;
+  if ($[5] !== className || $[6] !== variant) {
+    t3 = cn(badgeVariants({
+      variant
+    }), className);
+    $[5] = className;
+    $[6] = variant;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== Comp || $[9] !== props || $[10] !== t3 || $[11] !== variant) {
+    t4 = /*#__PURE__*/_jsx(Comp, {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: t3,
+      ...props
+    });
+    $[8] = Comp;
+    $[9] = props;
+    $[10] = t3;
+    $[11] = variant;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
 }
 export { Badge, badgeVariants };

package/dist/display/chart/chart-container.js

@@ -1,59 +1,219 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
-const THEMES = { light: "", dark: ".dark" };
-const INITIAL_DIMENSION = { width: 320, height: 200 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const THEMES = {
+  light: "",
+  dark: ".dark"
+};
+const INITIAL_DIMENSION = {
+  width: 320,
+  height: 200
+};
 const ChartContext = React.createContext(null);
 function useChart() {
-    const context = React.useContext(ChartContext);
-    if (!context) {
-        throw new Error("useChart must be used within a <ChartContainer />");
-    }
-    return context;
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
 }
-function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
-    const uniqueId = React.useId();
-    const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
-    return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "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: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
+function ChartContainer(t0) {
+  const $ = _c(29);
+  let children;
+  let className;
+  let config;
+  let id;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      id,
+      className,
+      children,
+      config,
+      initialDimension: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = config;
+    $[4] = id;
+    $[5] = props;
+    $[6] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    config = $[3];
+    id = $[4];
+    props = $[5];
+    t1 = $[6];
+  }
+  const initialDimension = t1 === undefined ? INITIAL_DIMENSION : t1;
+  const uniqueId = React.useId();
+  let t2;
+  if ($[7] !== id || $[8] !== uniqueId) {
+    t2 = id ?? uniqueId.replace(/:/g, "");
+    $[7] = id;
+    $[8] = uniqueId;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const chartId = `chart-${t2}`;
+  let t3;
+  if ($[10] !== config) {
+    t3 = {
+      config
+    };
+    $[10] = config;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== className) {
+    t4 = 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);
+    $[12] = className;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[14] !== chartId || $[15] !== config) {
+    t5 = /*#__PURE__*/_jsx(ChartStyle, {
+      id: chartId,
+      config: config
+    });
+    $[14] = chartId;
+    $[15] = config;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== children || $[18] !== initialDimension) {
+    t6 = /*#__PURE__*/_jsx(RechartsPrimitive.ResponsiveContainer, {
+      initialDimension: initialDimension,
+      children: children
+    });
+    $[17] = children;
+    $[18] = initialDimension;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  let t7;
+  if ($[20] !== chartId || $[21] !== props || $[22] !== t4 || $[23] !== t5 || $[24] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("div", {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: t4,
+      ...props,
+      children: [t5, t6]
+    });
+    $[20] = chartId;
+    $[21] = props;
+    $[22] = t4;
+    $[23] = t5;
+    $[24] = t6;
+    $[25] = t7;
+  } else {
+    t7 = $[25];
+  }
+  let t8;
+  if ($[26] !== t3 || $[27] !== t7) {
+    t8 = /*#__PURE__*/_jsx(ChartContext.Provider, {
+      value: t3,
+      children: t7
+    });
+    $[26] = t3;
+    $[27] = t7;
+    $[28] = t8;
+  } else {
+    t8 = $[28];
+  }
+  return t8;
 }
-const ChartStyle = ({ id, config }) => {
-    const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
-    if (!colorConfig.length) {
-        return null;
-    }
-    return (_jsx("style", { dangerouslySetInnerHTML: {
-            __html: Object.entries(THEMES)
-                .map(([theme, prefix]) => `
+const ChartStyle = t0 => {
+  const $ = _c(8);
+  const {
+    id,
+    config
+  } = t0;
+  let t1;
+  if ($[0] !== config) {
+    t1 = Object.entries(config).filter(_temp);
+    $[0] = config;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const colorConfig = t1;
+  if (!colorConfig.length) {
+    return null;
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = Object.entries(THEMES);
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== colorConfig || $[4] !== id) {
+    t3 = t2.map(t4 => {
+      const [theme, prefix] = t4;
+      return `
 ${prefix} [data-chart=${id}] {
-${colorConfig
-                .map(([key, itemConfig]) => {
-                const color = itemConfig.theme?.[theme] ?? itemConfig.color;
-                return color ? `  --color-${key}: ${color};` : null;
-            })
-                .join("\n")}
+${colorConfig.map(t5 => {
+        const [key, itemConfig] = t5;
+        const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+        return color ? `  --color-${key}: ${color};` : null;
+      }).join("\n")}
 }
-`)
-                .join("\n"),
-        } }));
+`;
+    });
+    $[3] = colorConfig;
+    $[4] = id;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const t4 = t3.join("\n");
+  let t5;
+  if ($[6] !== t4) {
+    t5 = /*#__PURE__*/_jsx("style", {
+      dangerouslySetInnerHTML: {
+        __html: t4
+      }
+    });
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
 };
 function getPayloadConfigFromPayload(config, payload, key) {
-    if (typeof payload !== "object" || payload === null) {
-        return undefined;
-    }
-    const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
-        ? payload.payload
-        : undefined;
-    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];
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : undefined;
+  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];
 }
 export { ChartContainer, ChartStyle, getPayloadConfigFromPayload, useChart };
+function _temp(t0) {
+  const [, config_0] = t0;
+  return config_0.theme ?? config_0.color;
+}

package/dist/display/chart/chart-legend.js

@@ -1,22 +1,87 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
+import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import { getPayloadConfigFromPayload, useChart } from "./chart-container.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartLegend = RechartsPrimitive.Legend;
-function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
-    const { config } = useChart();
-    if (!payload?.length) {
-        return null;
+function ChartLegendContent(t0) {
+  const $ = _c(15);
+  const {
+    className,
+    hideIcon: t1,
+    payload,
+    verticalAlign: t2,
+    nameKey
+  } = t0;
+  const hideIcon = t1 === undefined ? false : t1;
+  const verticalAlign = t2 === undefined ? "bottom" : t2;
+  const {
+    config
+  } = useChart();
+  if (!payload?.length) {
+    return null;
+  }
+  const t3 = verticalAlign === "top" ? "pb-3" : "pt-3";
+  let t4;
+  if ($[0] !== className || $[1] !== t3) {
+    t4 = cn("flex items-center justify-center gap-4", t3, className);
+    $[0] = className;
+    $[1] = t3;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== config || $[4] !== hideIcon || $[5] !== nameKey || $[6] !== payload) {
+    let t6;
+    if ($[8] !== config || $[9] !== hideIcon || $[10] !== nameKey) {
+      t6 = item_0 => {
+        const key = `${nameKey ?? item_0.dataKey ?? "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item_0, 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_0.color
+            }
+          }), itemConfig?.label]
+        }, key);
+      };
+      $[8] = config;
+      $[9] = hideIcon;
+      $[10] = nameKey;
+      $[11] = t6;
+    } else {
+      t6 = $[11];
     }
-    return (_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 (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
-                            backgroundColor: item.color,
-                        } })), itemConfig?.label] }, key));
-        }) }));
+    t5 = payload.filter(_temp).map(t6);
+    $[3] = config;
+    $[4] = hideIcon;
+    $[5] = nameKey;
+    $[6] = payload;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[12] !== t4 || $[13] !== t5) {
+    t6 = /*#__PURE__*/_jsx("div", {
+      className: t4,
+      children: t5
+    });
+    $[12] = t4;
+    $[13] = t5;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  return t6;
+}
+function _temp(item) {
+  return item.type !== "none";
 }
 export { ChartLegend, ChartLegendContent };