@locusgraph/components 0.1.1 → 0.2.1

package/dist/display/rule-grid/rule-grid.js

@@ -1,35 +1,321 @@
-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 ruleGridVariants = cva("grid grid-cols-1 gap-px p-px", {
-    variants: {
-        columns: {
-            1: "",
-            2: "sm:grid-cols-2",
-            3: "sm:grid-cols-2 lg:grid-cols-3",
-            4: "sm:grid-cols-2 lg:grid-cols-4",
-        },
-    },
-    defaultVariants: {
-        columns: 3,
-    },
+  variants: {
+    columns: {
+      1: "",
+      2: "sm:grid-cols-2",
+      3: "sm:grid-cols-2 lg:grid-cols-3",
+      4: "sm:grid-cols-2 lg:grid-cols-4"
+    }
+  },
+  defaultVariants: {
+    columns: 3
+  }
 });
-function RuleGrid({ className, columns = 3, ...props }) {
-    return (_jsx("div", { "data-slot": "rule-grid", "data-columns": columns, className: cn(ruleGridVariants({ columns, className })), ...props }));
+function RuleGrid(t0) {
+  const $ = _c(11);
+  let className;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      className,
+      columns: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+  }
+  const columns = t1 === undefined ? 3 : t1;
+  let t2;
+  if ($[4] !== className || $[5] !== columns) {
+    t2 = cn(ruleGridVariants({
+      columns,
+      className
+    }));
+    $[4] = className;
+    $[5] = columns;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== columns || $[8] !== props || $[9] !== t2) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      "data-slot": "rule-grid",
+      "data-columns": columns,
+      className: t2,
+      ...props
+    });
+    $[7] = columns;
+    $[8] = props;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+}
+function RuleGridCell(t0) {
+  const $ = _c(13);
+  let className;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      className,
+      asChild: t1,
+      interactive: t2,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+    t2 = $[4];
+  }
+  const asChild = t1 === undefined ? false : t1;
+  const interactive = t2 === undefined ? false : t2;
+  const Comp = asChild ? Slot.Root : "div";
+  const t3 = interactive || undefined;
+  const t4 = interactive && "transition-colors duration-150 ease-out outline-none hover:bg-accent/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring active:bg-accent";
+  let t5;
+  if ($[5] !== className || $[6] !== t4) {
+    t5 = cn("flex min-w-0 flex-col gap-2 bg-card p-6 text-card-foreground ring-1 ring-border", t4, className);
+    $[5] = className;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== Comp || $[9] !== props || $[10] !== t3 || $[11] !== t5) {
+    t6 = /*#__PURE__*/_jsx(Comp, {
+      "data-slot": "rule-grid-cell",
+      "data-interactive": t3,
+      className: t5,
+      ...props
+    });
+    $[8] = Comp;
+    $[9] = props;
+    $[10] = t3;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  return t6;
+}
+function RuleGridHeader(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("-mx-6 -mt-6 mb-2 flex min-h-11 items-center gap-2 border-b bg-muted/35 px-6 py-2.5", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      "data-slot": "rule-grid-header",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function RuleGridCell({ className, asChild = false, interactive = false, ...props }) {
-    const Comp = asChild ? Slot.Root : "div";
-    return (_jsx(Comp, { "data-slot": "rule-grid-cell", "data-interactive": interactive || undefined, className: cn("flex min-w-0 flex-col gap-2 bg-card p-6 text-card-foreground ring-1 ring-border", interactive &&
-            "transition-colors duration-150 ease-out outline-none hover:bg-accent/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring active:bg-accent", className), ...props }));
+function RuleGridFooter(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("-mx-6 mt-auto -mb-6 flex min-h-12 flex-wrap items-center gap-2 border-t bg-muted/70 px-6 py-3", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      "data-slot": "rule-grid-footer",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function RuleGridLabel({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "rule-grid-label", className: cn("font-mono text-[11.5px] text-muted-foreground", className), ...props }));
+function RuleGridLabel(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("eyebrow", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      "data-slot": "rule-grid-label",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function RuleGridTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "rule-grid-title", className: cn("text-[15px] font-medium tracking-[-0.01em]", className), ...props }));
+function RuleGridTitle(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("text-[15px] font-medium tracking-[-0.01em]", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      "data-slot": "rule-grid-title",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function RuleGridDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "rule-grid-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+function RuleGridDescription(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("text-sm text-muted-foreground", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("p", {
+      "data-slot": "rule-grid-description",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-export { RuleGrid, RuleGridCell, RuleGridDescription, RuleGridLabel, RuleGridTitle, ruleGridVariants, };
+export { RuleGrid, RuleGridCell, RuleGridDescription, RuleGridFooter, RuleGridHeader, RuleGridLabel, RuleGridTitle, ruleGridVariants };

package/dist/display/separator.js

@@ -1,8 +1,61 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
 import * as SeparatorPrimitive from "radix-ui/separator";
-function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
-    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className), ...props }));
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Separator(t0) {
+  const $ = _c(12);
+  let className;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      className,
+      orientation: t1,
+      decorative: t2,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+    t2 = $[4];
+  }
+  const orientation = t1 === undefined ? "horizontal" : t1;
+  const decorative = t2 === undefined ? true : t2;
+  let t3;
+  if ($[5] !== className) {
+    t3 = cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className);
+    $[5] = className;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== decorative || $[8] !== orientation || $[9] !== props || $[10] !== t3) {
+    t4 = /*#__PURE__*/_jsx(SeparatorPrimitive.Root, {
+      "data-slot": "separator",
+      decorative: decorative,
+      orientation: orientation,
+      className: t3,
+      ...props
+    });
+    $[7] = decorative;
+    $[8] = orientation;
+    $[9] = props;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
 }
 export { Separator };

package/dist/display/skeletons/layouts/skeleton-rule-grid.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+import { RuleGrid } from "../../rule-grid/rule-grid.js";
+type SkeletonRuleGridProps = Omit<React.ComponentProps<typeof RuleGrid>, "children"> & {
+    cells?: number;
+    label?: string;
+};
+declare function SkeletonRuleGrid({ cells, columns, label, ...props }: SkeletonRuleGridProps): React.JSX.Element;
+export { SkeletonRuleGrid };

package/dist/display/skeletons/layouts/skeleton-rule-grid.js

@@ -0,0 +1,83 @@
+import { c as _c } from "react/compiler-runtime";
+import { RuleGrid, RuleGridCell } from "../../rule-grid/rule-grid.js";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "../skeleton-parts.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function SkeletonRuleGrid(t0) {
+  const $ = _c(14);
+  let label;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      cells: t1,
+      columns: t2,
+      label,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = label;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    label = $[1];
+    props = $[2];
+    t1 = $[3];
+    t2 = $[4];
+  }
+  const cells = t1 === undefined ? 3 : t1;
+  const columns = t2 === undefined ? 3 : t2;
+  const count = Math.max(1, Math.floor(cells));
+  let t3;
+  if ($[5] !== count) {
+    t3 = Array.from({
+      length: count
+    }, _temp);
+    $[5] = count;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== label) {
+    t4 = /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: label
+    });
+    $[7] = label;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== columns || $[10] !== props || $[11] !== t3 || $[12] !== t4) {
+    t5 = /*#__PURE__*/_jsxs(RuleGrid, {
+      "data-slot": "skeleton-rule-grid",
+      columns: columns,
+      ...skeletonRootProps,
+      ...props,
+      children: [t3, t4]
+    });
+    $[9] = columns;
+    $[10] = props;
+    $[11] = t3;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  return t5;
+}
+function _temp(_, index) {
+  return /*#__PURE__*/_jsxs(RuleGridCell, {
+    "data-slot": "skeleton-rule-grid-cell",
+    "aria-hidden": "true",
+    className: "gap-3",
+    children: [/*#__PURE__*/_jsx(SkeletonBar, {
+      className: "h-3 w-20"
+    }), /*#__PURE__*/_jsx(SkeletonBar, {
+      className: "h-7 w-28"
+    })]
+  }, index);
+}
+export { SkeletonRuleGrid };

package/dist/display/skeletons/layouts/skeleton-table.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+type SkeletonTableProps = React.ComponentProps<"div"> & {
+    rows?: number;
+    columns?: number;
+    label?: string;
+};
+declare function SkeletonTable({ rows, columns, label, className, ...props }: SkeletonTableProps): React.JSX.Element;
+export { SkeletonTable };

package/dist/display/skeletons/layouts/skeleton-table.js

@@ -0,0 +1,174 @@
+import { c as _c } from "react/compiler-runtime";
+import { cn } from "cn";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../table.js";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "../skeleton-parts.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cellWidths = ["w-24", "w-32", "w-20", "w-28", "w-16"];
+function cellWidth(column) {
+  return cellWidths[column % cellWidths.length];
+}
+function indexes(count) {
+  return Array.from({
+    length: Math.max(1, Math.floor(count))
+  }, (_, index) => index);
+}
+function SkeletonTable(t0) {
+  const $ = _c(38);
+  let className;
+  let label;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      rows: t1,
+      columns: t2,
+      label,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = label;
+    $[3] = props;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    className = $[1];
+    label = $[2];
+    props = $[3];
+    t1 = $[4];
+    t2 = $[5];
+  }
+  const rows = t1 === undefined ? 5 : t1;
+  const columns = t2 === undefined ? 4 : t2;
+  let T0;
+  let T1;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[6] !== className || $[7] !== columns || $[8] !== props || $[9] !== rows) {
+    const columnIndexes = indexes(columns);
+    t6 = "skeleton-table";
+    t7 = skeletonRootProps;
+    if ($[19] !== className) {
+      t8 = cn("w-full", className);
+      $[19] = className;
+      $[20] = t8;
+    } else {
+      t8 = $[20];
+    }
+    t9 = props;
+    T1 = Table;
+    t4 = "true";
+    t5 = /*#__PURE__*/_jsx(TableHeader, {
+      children: /*#__PURE__*/_jsx(TableRow, {
+        className: "hover:bg-transparent",
+        children: columnIndexes.map(_temp)
+      })
+    });
+    T0 = TableBody;
+    t3 = indexes(rows).map(row => /*#__PURE__*/_jsx(TableRow, {
+      "data-slot": "skeleton-table-row",
+      className: "hover:bg-transparent",
+      children: columnIndexes.map(_temp2)
+    }, row));
+    $[6] = className;
+    $[7] = columns;
+    $[8] = props;
+    $[9] = rows;
+    $[10] = T0;
+    $[11] = T1;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = t6;
+    $[16] = t7;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    T0 = $[10];
+    T1 = $[11];
+    t3 = $[12];
+    t4 = $[13];
+    t5 = $[14];
+    t6 = $[15];
+    t7 = $[16];
+    t8 = $[17];
+    t9 = $[18];
+  }
+  let t10;
+  if ($[21] !== T0 || $[22] !== t3) {
+    t10 = /*#__PURE__*/_jsx(T0, {
+      children: t3
+    });
+    $[21] = T0;
+    $[22] = t3;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] !== T1 || $[25] !== t10 || $[26] !== t4 || $[27] !== t5) {
+    t11 = /*#__PURE__*/_jsxs(T1, {
+      "aria-hidden": t4,
+      children: [t5, t10]
+    });
+    $[24] = T1;
+    $[25] = t10;
+    $[26] = t4;
+    $[27] = t5;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  let t12;
+  if ($[29] !== label) {
+    t12 = /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: label
+    });
+    $[29] = label;
+    $[30] = t12;
+  } else {
+    t12 = $[30];
+  }
+  let t13;
+  if ($[31] !== t11 || $[32] !== t12 || $[33] !== t6 || $[34] !== t7 || $[35] !== t8 || $[36] !== t9) {
+    t13 = /*#__PURE__*/_jsxs("div", {
+      "data-slot": t6,
+      ...t7,
+      className: t8,
+      ...t9,
+      children: [t11, t12]
+    });
+    $[31] = t11;
+    $[32] = t12;
+    $[33] = t6;
+    $[34] = t7;
+    $[35] = t8;
+    $[36] = t9;
+    $[37] = t13;
+  } else {
+    t13 = $[37];
+  }
+  return t13;
+}
+function _temp2(column_0) {
+  return /*#__PURE__*/_jsx(TableCell, {
+    children: /*#__PURE__*/_jsx(SkeletonBar, {
+      className: cn("h-4", cellWidth(column_0))
+    })
+  }, column_0);
+}
+function _temp(column) {
+  return /*#__PURE__*/_jsx(TableHead, {
+    children: /*#__PURE__*/_jsx(SkeletonBar, {
+      className: "h-3 w-16"
+    })
+  }, column);
+}
+export { SkeletonTable };

package/dist/display/skeletons/shapes/skeleton-avatar.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const skeletonAvatarVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SkeletonAvatarProps = React.ComponentProps<"div"> & VariantProps<typeof skeletonAvatarVariants> & {
+    label?: string;
+};
+declare function SkeletonAvatar({ size, label, className, ...props }: SkeletonAvatarProps): React.JSX.Element;
+export { SkeletonAvatar, skeletonAvatarVariants };