@locusgraph/components 0.1.1 → 0.2.1

package/dist/display/skeletons/shapes/skeleton-avatar.js

@@ -0,0 +1,102 @@
+import { c as _c } from "react/compiler-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "../skeleton-parts.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const skeletonAvatarVariants = cva("rounded-full", {
+  variants: {
+    size: {
+      sm: "size-6",
+      md: "size-8",
+      lg: "size-10"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function SkeletonAvatar(t0) {
+  const $ = _c(19);
+  let className;
+  let label;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      size: t1,
+      label,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = label;
+    $[3] = props;
+    $[4] = t1;
+  } else {
+    className = $[1];
+    label = $[2];
+    props = $[3];
+    t1 = $[4];
+  }
+  const size = t1 === undefined ? "md" : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = cn("inline-flex shrink-0", className);
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== size) {
+    t3 = skeletonAvatarVariants({
+      size
+    });
+    $[7] = size;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== t3) {
+    t4 = /*#__PURE__*/_jsx(SkeletonBar, {
+      className: t3
+    });
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== label) {
+    t5 = /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: label
+    });
+    $[11] = label;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== props || $[14] !== size || $[15] !== t2 || $[16] !== t4 || $[17] !== t5) {
+    t6 = /*#__PURE__*/_jsxs("div", {
+      "data-slot": "skeleton-avatar",
+      "data-size": size,
+      ...skeletonRootProps,
+      className: t2,
+      ...props,
+      children: [t4, t5]
+    });
+    $[13] = props;
+    $[14] = size;
+    $[15] = t2;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  return t6;
+}
+export { SkeletonAvatar, skeletonAvatarVariants };

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

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

package/dist/display/skeletons/shapes/skeleton-button.js

@@ -0,0 +1,102 @@
+import { c as _c } from "react/compiler-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "../skeleton-parts.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const skeletonButtonVariants = cva("rounded-full", {
+  variants: {
+    size: {
+      sm: "h-8 w-20",
+      default: "h-9 w-24",
+      lg: "h-10 w-28"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function SkeletonButton(t0) {
+  const $ = _c(19);
+  let className;
+  let label;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      size: t1,
+      label,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = label;
+    $[3] = props;
+    $[4] = t1;
+  } else {
+    className = $[1];
+    label = $[2];
+    props = $[3];
+    t1 = $[4];
+  }
+  const size = t1 === undefined ? "default" : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = cn("inline-flex shrink-0", className);
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== size) {
+    t3 = skeletonButtonVariants({
+      size
+    });
+    $[7] = size;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== t3) {
+    t4 = /*#__PURE__*/_jsx(SkeletonBar, {
+      className: t3
+    });
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== label) {
+    t5 = /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: label
+    });
+    $[11] = label;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== props || $[14] !== size || $[15] !== t2 || $[16] !== t4 || $[17] !== t5) {
+    t6 = /*#__PURE__*/_jsxs("div", {
+      "data-slot": "skeleton-button",
+      "data-size": size,
+      ...skeletonRootProps,
+      className: t2,
+      ...props,
+      children: [t4, t5]
+    });
+    $[13] = props;
+    $[14] = size;
+    $[15] = t2;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  return t6;
+}
+export { SkeletonButton, skeletonButtonVariants };

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

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

package/dist/display/skeletons/shapes/skeleton-text.js

@@ -0,0 +1,84 @@
+import { c as _c } from "react/compiler-runtime";
+import { cn } from "cn";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "../skeleton-parts.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function lineWidth(index, lines) {
+  return lines > 1 && index === lines - 1 ? "w-3/5" : "w-full";
+}
+function SkeletonText(t0) {
+  const $ = _c(16);
+  let className;
+  let label;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      lines: t1,
+      label,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = label;
+    $[3] = props;
+    $[4] = t1;
+  } else {
+    className = $[1];
+    label = $[2];
+    props = $[3];
+    t1 = $[4];
+  }
+  const lines = t1 === undefined ? 3 : t1;
+  const count = Math.max(1, Math.floor(lines));
+  let t2;
+  if ($[5] !== className) {
+    t2 = cn("flex w-full flex-col gap-2", className);
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== count) {
+    t3 = Array.from({
+      length: count
+    }, (_, index) => /*#__PURE__*/_jsx(SkeletonBar, {
+      "data-slot": "skeleton-text-line",
+      className: cn("h-4", lineWidth(index, count))
+    }, index));
+    $[7] = count;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== label) {
+    t4 = /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: label
+    });
+    $[9] = label;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== props || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("div", {
+      "data-slot": "skeleton-text",
+      ...skeletonRootProps,
+      className: t2,
+      ...props,
+      children: [t3, t4]
+    });
+    $[11] = props;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  return t5;
+}
+export { SkeletonText };

package/dist/display/skeletons/skeleton-parts.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+import { Skeleton } from "../status/skeleton.js";
+declare function SkeletonBar({ className, ...props }: React.ComponentProps<typeof Skeleton>): React.JSX.Element;
+declare function SkeletonLoadingLabel({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare const skeletonRootProps: {
+    readonly role: "status";
+    readonly "aria-busy": true;
+};
+export { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps };

package/dist/display/skeletons/skeleton-parts.js

@@ -0,0 +1,68 @@
+import { c as _c } from "react/compiler-runtime";
+import { cn } from "cn";
+import { Skeleton } from "../status/skeleton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function SkeletonBar(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("rounded-none bg-skeleton motion-reduce:animate-none", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Skeleton, {
+      "aria-hidden": "true",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+function SkeletonLoadingLabel(t0) {
+  const $ = _c(2);
+  const {
+    children: t1
+  } = t0;
+  const children = t1 === undefined ? "Loading\u2026" : t1;
+  let t2;
+  if ($[0] !== children) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      "data-slot": "skeleton-loading-label",
+      className: "sr-only",
+      children: children
+    });
+    $[0] = children;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  return t2;
+}
+const skeletonRootProps = {
+  role: "status",
+  "aria-busy": true
+};
+export { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps };

package/dist/display/status/alert.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/display/status/alert.js

@@ -1,24 +1,144 @@
-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";
-const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
-    variants: {
-        variant: {
-            default: "bg-card text-card-foreground",
-            destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-    },
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5", {
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground",
+      success: "border-good/30 bg-good/5 text-card-foreground [&>svg]:text-good",
+      warning: "border-warn/30 bg-warn/5 text-card-foreground [&>svg]:text-warn",
+      destructive: "border-destructive/30 bg-destructive/5 text-card-foreground [&>svg]:text-destructive *:data-[slot=alert-title]:text-destructive"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
 });
-function Alert({ className, variant, ...props }) {
-    return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+function Alert(t0) {
+  const $ = _c(10);
+  let className;
+  let props;
+  let variant;
+  if ($[0] !== t0) {
+    ({
+      className,
+      variant,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = variant;
+  } else {
+    className = $[1];
+    props = $[2];
+    variant = $[3];
+  }
+  let t1;
+  if ($[4] !== className || $[5] !== variant) {
+    t1 = cn(alertVariants({
+      variant
+    }), className);
+    $[4] = className;
+    $[5] = variant;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== props || $[8] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      "data-slot": "alert",
+      role: "alert",
+      className: t1,
+      ...props
+    });
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
 }
-function AlertTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-title", className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className), ...props }));
+function AlertTitle(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("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      "data-slot": "alert-title",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function AlertDescription({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-description", className: cn("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed", className), ...props }));
+function AlertDescription(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("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      "data-slot": "alert-description",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
 export { Alert, AlertDescription, AlertTitle };