@devalok/shilp-sutra-karm 0.8.2 → 0.10.0

package/dist/_chunks/project-card.js

@@ -0,0 +1,121 @@
+"use client";
+import * as p from "react";
+import { useEffect as x } from "react";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { cn as f } from "@devalok/shilp-sutra/ui/lib/utils";
+import { Avatar as b, AvatarImage as u, AvatarFallback as y } from "@devalok/shilp-sutra/ui/avatar";
+import { Badge as v } from "@devalok/shilp-sutra/ui/badge";
+import { Progress as N } from "@devalok/shilp-sutra/ui/progress";
+function g({ accentCss: d }) {
+  return x(() => {
+    if (!d) return;
+    const a = document.documentElement, o = d.split(";").map((e) => e.trim()).filter(Boolean), r = [];
+    for (const e of o) {
+      const i = e.indexOf(":");
+      if (i === -1) continue;
+      const l = e.slice(0, i).trim(), n = e.slice(i + 1).trim();
+      l && n && (a.style.setProperty(l, n), r.push(l));
+    }
+    return () => {
+      for (const e of r)
+        a.style.removeProperty(e);
+    };
+  }, [d]), null;
+}
+g.displayName = "AccentProvider";
+const j = p.forwardRef(
+  ({ className: d, orgName: a, orgLogo: o, userName: r, userAvatar: e, children: i, ...l }, n) => {
+    const c = a.split(" ").map((m) => m[0]).join("").slice(0, 2).toUpperCase(), h = r.split(" ").map((m) => m[0]).join("").slice(0, 2).toUpperCase();
+    return /* @__PURE__ */ s(
+      "header",
+      {
+        ref: n,
+        className: f(
+          "flex h-ds-lg items-center justify-between border-b border-border-subtle bg-layer-01 px-ds-06",
+          d
+        ),
+        ...l,
+        children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: [
+            o ? /* @__PURE__ */ t(
+              "img",
+              {
+                src: o,
+                alt: a,
+                className: "h-ds-sm w-ds-sm rounded-ds-md object-cover"
+              }
+            ) : /* @__PURE__ */ t("div", { className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-md bg-interactive text-ds-sm font-semibold text-text-on-color", children: c }),
+            /* @__PURE__ */ t("span", { className: "font-display text-ds-base font-semibold text-text-primary", children: a })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: [
+            i,
+            /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+              /* @__PURE__ */ s(b, { className: "h-ds-sm w-ds-sm", children: [
+                e && /* @__PURE__ */ t(u, { src: e, alt: r }),
+                /* @__PURE__ */ t(y, { className: "bg-interactive-subtle text-ds-sm font-medium text-interactive", children: h })
+              ] }),
+              /* @__PURE__ */ t("span", { className: "hidden text-ds-md font-medium text-text-primary sm:inline", children: r })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+j.displayName = "ClientPortalHeader";
+const w = {
+  active: "success",
+  completed: "info",
+  paused: "warning"
+}, P = p.forwardRef(
+  ({
+    className: d,
+    name: a,
+    description: o,
+    status: r,
+    taskCount: e = 0,
+    completedTasks: i = 0,
+    ...l
+  }, n) => {
+    const c = e > 0 ? Math.round(i / e * 100) : 0;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: n,
+        className: f(
+          "group cursor-pointer rounded-ds-lg border border-border-subtle bg-layer-01 p-ds-05b shadow-01 transition-shadow duration-moderate-02 hover:shadow-02",
+          d
+        ),
+        ...l,
+        children: [
+          /* @__PURE__ */ s("div", { className: "mb-ds-04 flex items-start justify-between", children: [
+            /* @__PURE__ */ t("h3", { className: "font-display text-ds-base font-semibold text-text-primary", children: a }),
+            /* @__PURE__ */ t(v, { color: w[r], size: "sm", children: r })
+          ] }),
+          o && /* @__PURE__ */ t("p", { className: "mb-ds-05 line-clamp-2 text-ds-md text-text-secondary", children: o }),
+          /* @__PURE__ */ s("div", { className: "space-y-ds-03", children: [
+            /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-ds-sm text-text-helper", children: [
+              /* @__PURE__ */ s("span", { children: [
+                i,
+                " / ",
+                e,
+                " tasks"
+              ] }),
+              /* @__PURE__ */ s("span", { children: [
+                c,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ t(N, { value: c, className: "h-ds-02b", "aria-label": "Project progress" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+P.displayName = "ProjectCard";
+export {
+  g as A,
+  j as C,
+  P
+};