@locusgraph/blocks 0.2.0 → 0.3.1

package/dist/keys/keys-empty.js

@@ -0,0 +1,73 @@
+import { c as _c } from "react/compiler-runtime";
+import { Password as KeyRoundIcon, Add as PlusIcon } from "@carbon/icons-react";
+import { Button, RuleGrid, RuleGridCell, RuleGridDescription, RuleGridTitle } from "@locusgraph/components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function KeysEmpty(t0) {
+  const $ = _c(10);
+  const {
+    newKeyHref,
+    description: t1,
+    linkComponent: t2
+  } = t0;
+  const description = t1 === undefined ? newKeyHref ? "Create a key to let a service call LocusGraph products for this organization." : "Ask an owner to create a key for this organization." : t1;
+  const Link = t2 === undefined ? "a" : t2;
+  let t3;
+  let t4;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/_jsx(KeyRoundIcon, {
+      className: "mb-1 size-5 text-muted-foreground"
+    });
+    t4 = /*#__PURE__*/_jsx(RuleGridTitle, {
+      children: "No API keys yet"
+    });
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t3 = $[0];
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== description) {
+    t5 = /*#__PURE__*/_jsx(RuleGridDescription, {
+      className: "max-w-sm",
+      children: description
+    });
+    $[2] = description;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  let t6;
+  if ($[4] !== Link || $[5] !== newKeyHref) {
+    t6 = newKeyHref && /*#__PURE__*/_jsx(Button, {
+      asChild: true,
+      size: "sm",
+      className: "mt-2",
+      children: /*#__PURE__*/_jsxs(Link, {
+        href: newKeyHref,
+        children: [/*#__PURE__*/_jsx(PlusIcon, {}), "New key"]
+      })
+    });
+    $[4] = Link;
+    $[5] = newKeyHref;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  let t7;
+  if ($[7] !== t5 || $[8] !== t6) {
+    t7 = /*#__PURE__*/_jsx(RuleGrid, {
+      columns: 1,
+      children: /*#__PURE__*/_jsxs(RuleGridCell, {
+        className: "items-center gap-2 py-12 text-center",
+        children: [t3, t4, t5, t6]
+      })
+    });
+    $[7] = t5;
+    $[8] = t6;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  return t7;
+}

package/dist/keys/{keys-table.d.ts → keys.d.ts}

@@ -1,9 +1,9 @@
 import type * as React from "react";
 import type { ApiKeyRow } from "../types.js";
-type KeysTableProps = {
+type KeysProps = {
     keys: ApiKeyRow[];
     actions?: (key: ApiKeyRow) => React.ReactNode;
     highlightedId?: string;
 };
-export declare function KeysTable({ keys, actions, highlightedId }: KeysTableProps): React.JSX.Element;
+export declare function Keys({ keys, actions, highlightedId }: KeysProps): React.JSX.Element;
 export {};

package/dist/keys/keys.js

@@ -0,0 +1,151 @@
+import { c as _c } from "react/compiler-runtime";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@locusgraph/components";
+import { LocalDate } from "../dates/local-date.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function dateOr(value, empty) {
+  return value ? /*#__PURE__*/_jsx(LocalDate, {
+    value: value
+  }) : empty;
+}
+export function Keys(t0) {
+  const $ = _c(22);
+  const {
+    keys,
+    actions,
+    highlightedId
+  } = t0;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /*#__PURE__*/_jsx(TableHead, {
+      children: "Name"
+    });
+    t2 = /*#__PURE__*/_jsx(TableHead, {
+      className: "hidden md:table-cell",
+      children: "Key"
+    });
+    t3 = /*#__PURE__*/_jsx(TableHead, {
+      children: "Product"
+    });
+    t4 = /*#__PURE__*/_jsx(TableHead, {
+      className: "hidden md:table-cell",
+      children: "Created by"
+    });
+    t5 = /*#__PURE__*/_jsx(TableHead, {
+      className: "hidden md:table-cell",
+      children: "Created"
+    });
+    t6 = /*#__PURE__*/_jsx(TableHead, {
+      children: "Expires"
+    });
+    $[0] = t1;
+    $[1] = t2;
+    $[2] = t3;
+    $[3] = t4;
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+    t3 = $[2];
+    t4 = $[3];
+    t5 = $[4];
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== actions) {
+    t7 = actions && /*#__PURE__*/_jsx(TableHead, {
+      className: "w-0"
+    });
+    $[6] = actions;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  let t8;
+  if ($[8] !== t7) {
+    t8 = /*#__PURE__*/_jsx(TableHeader, {
+      children: /*#__PURE__*/_jsxs(TableRow, {
+        children: [t1, t2, t3, t4, t5, t6, t7]
+      })
+    });
+    $[8] = t7;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  let t9;
+  if ($[10] !== actions || $[11] !== highlightedId || $[12] !== keys) {
+    let t10;
+    if ($[14] !== actions || $[15] !== highlightedId) {
+      t10 = key => /*#__PURE__*/_jsxs(TableRow, {
+        "data-new": key.id === highlightedId ? "" : undefined,
+        className: "transition-colors duration-1000 data-new:bg-accent",
+        children: [/*#__PURE__*/_jsxs(TableCell, {
+          className: "max-w-40",
+          children: [/*#__PURE__*/_jsx("span", {
+            className: "block truncate font-medium",
+            children: key.name ?? "Untitled"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "block truncate font-mono text-xs text-muted-foreground md:hidden",
+            children: key.maskedKey
+          })]
+        }), /*#__PURE__*/_jsx(TableCell, {
+          className: "hidden font-mono text-muted-foreground md:table-cell",
+          children: key.maskedKey
+        }), /*#__PURE__*/_jsx(TableCell, {
+          children: key.productLabel
+        }), /*#__PURE__*/_jsx(TableCell, {
+          className: "hidden md:table-cell",
+          children: key.createdBy
+        }), /*#__PURE__*/_jsx(TableCell, {
+          className: "hidden md:table-cell",
+          children: dateOr(key.createdAt, "\u2014")
+        }), /*#__PURE__*/_jsx(TableCell, {
+          children: dateOr(key.expiresAt, "Never")
+        }), actions && /*#__PURE__*/_jsx(TableCell, {
+          className: "w-0 pr-2 text-right whitespace-nowrap",
+          children: actions(key)
+        })]
+      }, key.id);
+      $[14] = actions;
+      $[15] = highlightedId;
+      $[16] = t10;
+    } else {
+      t10 = $[16];
+    }
+    t9 = keys.map(t10);
+    $[10] = actions;
+    $[11] = highlightedId;
+    $[12] = keys;
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  let t10;
+  if ($[17] !== t9) {
+    t10 = /*#__PURE__*/_jsx(TableBody, {
+      children: t9
+    });
+    $[17] = t9;
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  let t11;
+  if ($[19] !== t10 || $[20] !== t8) {
+    t11 = /*#__PURE__*/_jsxs(Table, {
+      children: [t8, t10]
+    });
+    $[19] = t10;
+    $[20] = t8;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  return t11;
+}

package/dist/skeletons/keys-skeleton.d.ts

@@ -0,0 +1,6 @@
+type KeysSkeletonProps = {
+    rows?: number;
+    actions?: boolean;
+};
+export declare function KeysSkeleton({ rows, actions }: KeysSkeletonProps): import("react").JSX.Element;
+export {};

package/dist/skeletons/keys-skeleton.js

@@ -0,0 +1,170 @@
+import { c as _c } from "react/compiler-runtime";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@locusgraph/components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const columns = [{
+  name: "Key",
+  visibility: "hidden md:table-cell",
+  bar: "w-36"
+}, {
+  name: "Product",
+  visibility: "",
+  bar: "w-20"
+}, {
+  name: "Created by",
+  visibility: "hidden md:table-cell",
+  bar: "w-32"
+}, {
+  name: "Created",
+  visibility: "hidden md:table-cell",
+  bar: "w-20"
+}, {
+  name: "Expires",
+  visibility: "",
+  bar: "w-20"
+}];
+function NameCellSkeleton() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /*#__PURE__*/_jsx(TableCell, {
+      className: "max-w-40",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "flex flex-col gap-1",
+        children: [/*#__PURE__*/_jsx(SkeletonBar, {
+          className: "h-4 w-28"
+        }), /*#__PURE__*/_jsx(SkeletonBar, {
+          className: "h-3 w-20 md:hidden"
+        })]
+      })
+    });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+export function KeysSkeleton(t0) {
+  const $ = _c(17);
+  const {
+    rows: t1,
+    actions: t2
+  } = t0;
+  const rows = t1 === undefined ? 3 : t1;
+  const actions = t2 === undefined ? false : t2;
+  const count = Math.max(1, Math.floor(rows));
+  let t3;
+  let t4;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/_jsx(TableHead, {
+      children: "Name"
+    });
+    t4 = columns.map(_temp);
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t3 = $[0];
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== actions) {
+    t5 = actions && /*#__PURE__*/_jsx(TableHead, {
+      className: "w-0"
+    });
+    $[2] = actions;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  let t6;
+  if ($[4] !== t5) {
+    t6 = /*#__PURE__*/_jsx(TableHeader, {
+      children: /*#__PURE__*/_jsxs(TableRow, {
+        className: "hover:bg-transparent",
+        children: [t3, t4, t5]
+      })
+    });
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== actions || $[7] !== count) {
+    let t8;
+    if ($[9] !== actions) {
+      t8 = (_, row) => /*#__PURE__*/_jsxs(TableRow, {
+        "data-slot": "keys-skeleton-row",
+        className: "hover:bg-transparent",
+        children: [/*#__PURE__*/_jsx(NameCellSkeleton, {}), columns.map(_temp2), actions && /*#__PURE__*/_jsx(TableCell, {
+          className: "w-0 pr-2 text-right",
+          children: /*#__PURE__*/_jsx(SkeletonBar, {
+            className: "ml-auto h-8 w-16 rounded-full"
+          })
+        })]
+      }, row);
+      $[9] = actions;
+      $[10] = t8;
+    } else {
+      t8 = $[10];
+    }
+    t7 = /*#__PURE__*/_jsx(TableBody, {
+      children: Array.from({
+        length: count
+      }, t8)
+    });
+    $[6] = actions;
+    $[7] = count;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[11] !== t6 || $[12] !== t7) {
+    t8 = /*#__PURE__*/_jsxs(Table, {
+      "aria-hidden": "true",
+      children: [t6, t7]
+    });
+    $[11] = t6;
+    $[12] = t7;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: "Loading API keys\u2026"
+    });
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== t8) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      "data-slot": "keys-skeleton",
+      ...skeletonRootProps,
+      className: "w-full",
+      children: [t8, t9]
+    });
+    $[15] = t8;
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+  return t10;
+}
+function _temp2(column_0) {
+  return /*#__PURE__*/_jsx(TableCell, {
+    className: column_0.visibility,
+    children: /*#__PURE__*/_jsx(SkeletonBar, {
+      className: `h-4 ${column_0.bar}`
+    })
+  }, column_0.name);
+}
+function _temp(column) {
+  return /*#__PURE__*/_jsx(TableHead, {
+    className: column.visibility,
+    children: column.name
+  }, column.name);
+}

package/dist/skeletons/plans-skeleton.d.ts

@@ -0,0 +1,7 @@
+type PlansSkeletonProps = {
+    plans?: number;
+    points?: number;
+    currentIndex?: number;
+};
+export declare function PlansSkeleton({ plans, points, currentIndex }: PlansSkeletonProps): import("react").JSX.Element;
+export {};

package/dist/skeletons/plans-skeleton.js

@@ -0,0 +1,94 @@
+import { c as _c } from "react/compiler-runtime";
+import { RuleGrid, RuleGridCell, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "@locusgraph/components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PlansSkeleton(t0) {
+  const $ = _c(11);
+  const {
+    plans: t1,
+    points: t2,
+    currentIndex: t3
+  } = t0;
+  const plans = t1 === undefined ? 2 : t1;
+  const points = t2 === undefined ? 2 : t2;
+  const currentIndex = t3 === undefined ? 0 : t3;
+  const planCount = Math.max(1, Math.floor(plans));
+  const pointCount = Math.max(0, Math.floor(points));
+  const t4 = planCount >= 3 ? 3 : 2;
+  let t5;
+  if ($[0] !== currentIndex || $[1] !== planCount || $[2] !== pointCount) {
+    let t6;
+    if ($[4] !== currentIndex || $[5] !== pointCount) {
+      t6 = (_, plan) => /*#__PURE__*/_jsxs(RuleGridCell, {
+        "data-slot": "plan-skeleton",
+        "aria-hidden": "true",
+        className: "gap-4",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "flex flex-col gap-2",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "flex min-h-6 items-center",
+            children: /*#__PURE__*/_jsx(SkeletonBar, {
+              className: "h-5 w-20"
+            })
+          }), /*#__PURE__*/_jsx(SkeletonBar, {
+            className: "h-8 w-28"
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: "flex flex-col gap-1.5",
+          children: Array.from({
+            length: pointCount
+          }, _temp)
+        }), plan === currentIndex ? /*#__PURE__*/_jsx("div", {
+          className: "mt-auto flex min-h-8 items-center",
+          children: /*#__PURE__*/_jsx(SkeletonBar, {
+            className: "h-4 w-16"
+          })
+        }) : /*#__PURE__*/_jsx(SkeletonBar, {
+          className: "mt-auto h-8 w-28 rounded-full"
+        })]
+      }, plan);
+      $[4] = currentIndex;
+      $[5] = pointCount;
+      $[6] = t6;
+    } else {
+      t6 = $[6];
+    }
+    t5 = Array.from({
+      length: planCount
+    }, t6);
+    $[0] = currentIndex;
+    $[1] = planCount;
+    $[2] = pointCount;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  let t6;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: "Loading plans\u2026"
+    });
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== t4 || $[9] !== t5) {
+    t7 = /*#__PURE__*/_jsxs(RuleGrid, {
+      columns: t4,
+      "data-slot": "plans-skeleton",
+      ...skeletonRootProps,
+      children: [t5, t6]
+    });
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  return t7;
+}
+function _temp(__0, point) {
+  return /*#__PURE__*/_jsx(SkeletonBar, {
+    className: "h-4 w-40"
+  }, point);
+}

package/dist/skeletons/top-up-skeleton.d.ts

@@ -0,0 +1,5 @@
+type TopUpSkeletonProps = {
+    packs?: number;
+};
+export declare function TopUpSkeleton({ packs }: TopUpSkeletonProps): import("react").JSX.Element;
+export {};

package/dist/skeletons/top-up-skeleton.js

@@ -0,0 +1,73 @@
+import { c as _c } from "react/compiler-runtime";
+import { RuleGridCell, RuleGridLabel, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "@locusgraph/components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TopUpSkeleton(t0) {
+  const $ = _c(6);
+  const {
+    packs: t1
+  } = t0;
+  const packs = t1 === undefined ? 3 : t1;
+  const count = Math.max(1, Math.floor(packs));
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-1.5",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "flex min-h-6 items-center",
+        children: /*#__PURE__*/_jsx(RuleGridLabel, {
+          children: "Buy credits"
+        })
+      }), /*#__PURE__*/_jsx(SkeletonBar, {
+        className: "h-4 w-full max-w-72"
+      }), /*#__PURE__*/_jsx(SkeletonBar, {
+        className: "h-4 w-3/4 max-w-56"
+      })]
+    });
+    $[0] = t2;
+  } else {
+    t2 = $[0];
+  }
+  let t3;
+  if ($[1] !== count) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      className: "flex flex-wrap gap-2",
+      "aria-hidden": "true",
+      children: Array.from({
+        length: count
+      }, _temp)
+    });
+    $[1] = count;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: "Loading credit packs\u2026"
+    });
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] !== t3) {
+    t5 = /*#__PURE__*/_jsxs(RuleGridCell, {
+      "data-slot": "top-up-skeleton",
+      ...skeletonRootProps,
+      className: "gap-4",
+      children: [t2, t3, t4]
+    });
+    $[4] = t3;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  return t5;
+}
+function _temp(_, index) {
+  return /*#__PURE__*/_jsx(SkeletonBar, {
+    "data-slot": "credit-pack-skeleton",
+    className: "h-9 w-24 rounded-full"
+  }, index);
+}

package/dist/skeletons/usage-skeleton.d.ts

@@ -0,0 +1,6 @@
+type UsageSkeletonProps = {
+    quotas?: number;
+    label?: string;
+};
+export declare function UsageSkeleton({ quotas, label }: UsageSkeletonProps): import("react").JSX.Element;
+export {};

package/dist/skeletons/usage-skeleton.js

@@ -0,0 +1,88 @@
+import { c as _c } from "react/compiler-runtime";
+import { RuleGrid, RuleGridCell, RuleGridLabel, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "@locusgraph/components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function QuotaSkeleton() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /*#__PURE__*/_jsxs("div", {
+      "data-slot": "quota-skeleton",
+      "aria-hidden": "true",
+      className: "flex flex-col gap-2",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "flex items-baseline justify-between gap-4",
+        children: [/*#__PURE__*/_jsx(SkeletonBar, {
+          className: "h-4 w-28"
+        }), /*#__PURE__*/_jsx(SkeletonBar, {
+          className: "h-4 w-36"
+        })]
+      }), /*#__PURE__*/_jsx(SkeletonBar, {
+        className: "h-2 w-full rounded-full"
+      })]
+    });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+export function UsageSkeleton(t0) {
+  const $ = _c(8);
+  const {
+    quotas: t1,
+    label: t2
+  } = t0;
+  const quotas = t1 === undefined ? 2 : t1;
+  const label = t2 === undefined ? "Usage" : t2;
+  const count = Math.max(1, Math.floor(quotas));
+  let t3;
+  if ($[0] !== label) {
+    t3 = /*#__PURE__*/_jsx(RuleGridLabel, {
+      children: label
+    });
+    $[0] = label;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== count) {
+    t4 = Array.from({
+      length: count
+    }, _temp);
+    $[2] = count;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: "Loading usage\u2026"
+    });
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] !== t3 || $[6] !== t4) {
+    t6 = /*#__PURE__*/_jsx(RuleGrid, {
+      columns: 1,
+      "data-slot": "usage-skeleton",
+      ...skeletonRootProps,
+      children: /*#__PURE__*/_jsxs(RuleGridCell, {
+        className: "gap-5",
+        children: [t3, t4, t5]
+      })
+    });
+    $[5] = t3;
+    $[6] = t4;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  return t6;
+}
+function _temp(_, index) {
+  return /*#__PURE__*/_jsx(QuotaSkeleton, {}, index);
+}

package/dist/skeletons/wallet-skeleton.d.ts

@@ -0,0 +1,5 @@
+type WalletSkeletonProps = {
+    grants?: number;
+};
+export declare function WalletSkeleton({ grants }: WalletSkeletonProps): import("react").JSX.Element;
+export {};