@pibit.ai/cure-design-system 0.6.17 → 0.6.19

package/dist/patterns/sub-sidebar/sub-sidebar.js

@@ -0,0 +1,283 @@
+import { jsxs as o, jsx as r, Fragment as S } from "react/jsx-runtime";
+import { useState as A, useEffect as z, Fragment as m } from "react";
+import { Minus as F, Plus as I } from "@untitledui/icons";
+import { CollapseLeft as D } from "../../primitives/custom-icon/icons/collapse-left.js";
+import { CollapseRight as H } from "../../primitives/custom-icon/icons/collapse-right.js";
+import { cx as n } from "../../utils/cn.js";
+import { ButtonUtility as K } from "../../primitives/button/button-utility.js";
+const q = ({
+  href: i,
+  className: c,
+  children: p
+}) => /* @__PURE__ */ r("a", { href: i, className: c, children: p }), B = (i, c) => c, W = ({
+  config: i,
+  currentPath: c,
+  isCollapsed: p,
+  onCollapsedChange: k,
+  renderLink: x = q,
+  guard: h = B,
+  className: C
+}) => {
+  const [E, b] = A(/* @__PURE__ */ new Set()), y = (a) => c === a || c.startsWith(a + "/"), u = (a) => a.map((t) => t.href).filter((t) => !!t).filter(y).sort((t, l) => l.length - t.length)[0] ?? null, w = () => {
+    var e;
+    const a = !p;
+    k(a), (e = i.onToggleCollapse) == null || e.call(i, a);
+  };
+  z(() => {
+    const a = /* @__PURE__ */ new Set();
+    i.sections.forEach((e) => {
+      e.items.forEach((t) => {
+        var l;
+        if ((l = t.items) != null && l.length && u(t.items) !== null) {
+          const d = t.href || t.label;
+          a.add(d);
+        }
+      });
+    }), b((e) => {
+      const t = new Set(e);
+      return a.forEach((l) => t.add(l)), t;
+    });
+  }, [c, i.sections]);
+  const f = (a) => {
+    const e = a.href || a.label;
+    b((t) => {
+      const l = new Set(t);
+      return l.has(e) ? l.delete(e) : l.add(e), l;
+    });
+  }, v = (a) => {
+    var e;
+    return (e = a.items) != null && e.length && u(a.items) !== null ? !0 : a.href ? y(a.href) : !1;
+  }, j = (a, e) => u(e) === a;
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: n(
+        "h-full flex-shrink-0 bg-white border-r border-[#EDEFF4] relative transition-all duration-300 ease-in-out",
+        p ? "w-0 border-r-0" : i.width || "w-[296px]",
+        C
+      ),
+      children: [
+        i.collapsible !== !1 && p && /* @__PURE__ */ r(
+          "button",
+          {
+            onClick: w,
+            className: "absolute -right-5 top-5 z-20 flex h-6 w-6 items-center justify-center transition-all duration-300 cursor-pointer",
+            "aria-label": "Expand sidebar",
+            children: /* @__PURE__ */ r(
+              H,
+              {
+                color: "var(--color-fg-quaternary)",
+                className: "h-4 w-4 text-gray-400 hover:text-gray-600"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: n(
+              "pl-4 h-full flex flex-col overflow-hidden transition-opacity duration-300",
+              p ? "opacity-0 pointer-events-none" : "opacity-100"
+            ),
+            children: [
+              i.title && /* @__PURE__ */ o("div", { className: "pt-6 pb-4 relative flex-shrink-0 flex items-center justify-between", children: [
+                /* @__PURE__ */ r("h2", { className: "pl-1.5 text-primary font-semibold text-md leading-7 whitespace-nowrap", children: i.title }),
+                i.collapsible !== !1 && /* @__PURE__ */ r(
+                  "button",
+                  {
+                    onClick: w,
+                    className: "flex h-5 w-5 items-center justify-center transition-all duration-300 hover:scale-110 cursor-pointer",
+                    "aria-label": "Collapse sidebar",
+                    children: /* @__PURE__ */ r(
+                      D,
+                      {
+                        color: "var(--color-fg-quaternary)",
+                        className: "h-4 w-4 text-gray-400 hover:text-gray-600"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ r("nav", { className: "flex-1 pb-4 pr-2 overflow-y-auto overflow-x-hidden", children: i.sections.map((a) => /* @__PURE__ */ r(m, { children: h(
+                (a == null ? void 0 : a.permissions) || [],
+                /* @__PURE__ */ o("div", { className: n("mb-6"), children: [
+                  /* @__PURE__ */ r("div", { className: "py-0.5 px-2", children: /* @__PURE__ */ r("p", { className: "font-medium text-[10px] text-[var(--color-text-tertiary)] uppercase tracking-[1.3px] whitespace-nowrap", children: a.label }) }),
+                  /* @__PURE__ */ r("ul", { className: "space-y-1", children: a.items.map((e) => {
+                    const t = e.href || e.label, l = E.has(t), N = e.items && e.items.length > 0, d = v(e);
+                    return N ? /* @__PURE__ */ r(m, { children: h(
+                      e.permissions || [],
+                      /* @__PURE__ */ o(
+                        "li",
+                        {
+                          className: n(
+                            e.disabled && "opacity-30 cursor-not-allowed",
+                            "text-xs"
+                          ),
+                          children: [
+                            /* @__PURE__ */ o(
+                              "div",
+                              {
+                                className: n(
+                                  "flex items-center justify-between px-1 py-2 rounded-md transition-colors cursor-pointer",
+                                  d ? "bg-active text-primary font-medium" : "text-primary hover:bg-active",
+                                  e.disabled ? "cursor-not-allowed" : ""
+                                ),
+                                role: "button",
+                                tabIndex: e.disabled ? -1 : 0,
+                                "aria-expanded": l,
+                                "aria-disabled": e.disabled || void 0,
+                                onClick: (s) => {
+                                  s.stopPropagation(), !e.disabled && f(e);
+                                },
+                                onKeyDown: (s) => {
+                                  if (s.key === "Enter" || s.key === " ") {
+                                    if (s.stopPropagation(), e.disabled) return;
+                                    f(e);
+                                  }
+                                },
+                                children: [
+                                  /* @__PURE__ */ r("span", { className: "whitespace-nowrap text-primary font-medium", children: e.label }),
+                                  /* @__PURE__ */ r(
+                                    K,
+                                    {
+                                      onClick: (s) => {
+                                        s.stopPropagation(), !e.disabled && f(e);
+                                      },
+                                      className: n(
+                                        "rounded-md bg-secondary",
+                                        e.disabled ? "cursor-not-allowed" : ""
+                                      ),
+                                      size: "xs",
+                                      icon: l ? /* @__PURE__ */ r(F, { size: 12 }) : /* @__PURE__ */ r(I, { size: 12 })
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            l && h(
+                              e.permissions || [],
+                              /* @__PURE__ */ o("ul", { className: "mt-0.5 ml-4 space-y-0.5 relative", children: [
+                                /* @__PURE__ */ r("div", { className: "absolute left-2 top-[15px] bottom-[15px] w-px bg-[var(--color-utility-gray-200)]" }),
+                                e.items.map((s) => {
+                                  const g = j(
+                                    s.href,
+                                    e.items
+                                  );
+                                  return /* @__PURE__ */ r(m, { children: h(
+                                    s.permissions || [],
+                                    /* @__PURE__ */ r("li", { className: "relative", children: x({
+                                      href: s.href,
+                                      className: n(
+                                        "flex items-center pl-6 pr-2 py-2 rounded-md transition-colors relative",
+                                        g ? "text-primary font-medium" : "text-primary hover:bg-active"
+                                      ),
+                                      children: /* @__PURE__ */ o(S, { children: [
+                                        /* @__PURE__ */ r(
+                                          "div",
+                                          {
+                                            className: n(
+                                              "absolute left-1.5 top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full z-10",
+                                              g ? "bg-[var(--color-fg-primary)]" : "bg-[var(--color-utility-gray-200)]"
+                                            )
+                                          }
+                                        ),
+                                        /* @__PURE__ */ r("span", { className: "whitespace-nowrap", children: s.label })
+                                      ] })
+                                    }) }),
+                                    null
+                                  ) }, s.href);
+                                })
+                              ] }),
+                              null
+                            )
+                          ]
+                        }
+                      ),
+                      null
+                    ) }, t) : /* @__PURE__ */ r(m, { children: h(
+                      e.permissions || [],
+                      /* @__PURE__ */ r(
+                        "li",
+                        {
+                          className: n(
+                            e.disabled && "opacity-30 cursor-not-allowed",
+                            "text-xs"
+                          ),
+                          children: e.href ? e.disabled ? /* @__PURE__ */ r(
+                            "span",
+                            {
+                              className: n(
+                                "flex items-center justify-between px-2 py-2 rounded-md transition-colors cursor-not-allowed",
+                                d ? "bg-active text-primary" : "text-primary"
+                              ),
+                              "aria-disabled": "true",
+                              children: /* @__PURE__ */ r("span", { className: "whitespace-nowrap font-medium", children: e.label })
+                            }
+                          ) : x({
+                            href: e.href,
+                            className: n(
+                              "flex items-center justify-between px-2 py-2 rounded-md transition-colors",
+                              d ? "bg-active text-primary" : "text-primary hover:bg-active",
+                              e.disabled ? "opacity-30 cursor-not-allowed" : ""
+                            ),
+                            children: /* @__PURE__ */ r("span", { className: "whitespace-nowrap font-medium", children: e.label })
+                          }) : /* @__PURE__ */ r(
+                            "div",
+                            {
+                              onClick: () => {
+                                var s;
+                                return !e.disabled && ((s = e.onClick) == null ? void 0 : s.call(e));
+                              },
+                              className: n(
+                                "w-full flex items-center justify-between px-2 py-2 rounded-md text-sm transition-colors cursor-pointer",
+                                d ? "bg-active text-primary font-medium" : "text-primary hover:bg-active",
+                                e.disabled ? "opacity-30 cursor-not-allowed" : ""
+                              ),
+                              children: /* @__PURE__ */ r("span", { className: "whitespace-nowrap", children: e.label })
+                            }
+                          )
+                        }
+                      ),
+                      e.showDisabled ? /* @__PURE__ */ r(
+                        "span",
+                        {
+                          className: n(
+                            "flex items-center justify-between opacity-30 px-2 py-2 rounded-md transition-colors cursor-not-allowed text-xs whitespace-nowrap font-medium",
+                            d ? "bg-active text-primary" : "text-primary"
+                          ),
+                          "aria-disabled": "true",
+                          children: e.label
+                        }
+                      ) : null
+                    ) }, t);
+                  }) })
+                ] }),
+                a.showDisabled ? /* @__PURE__ */ o("div", { className: n("mb-6"), children: [
+                  /* @__PURE__ */ r("div", { className: "py-0.5 px-2", children: /* @__PURE__ */ r("p", { className: "font-medium text-[10px] text-[var(--color-text-tertiary)] uppercase tracking-[1.3px] whitespace-nowrap", children: a.label }) }),
+                  /* @__PURE__ */ r("ul", { className: "", children: a.items.map((e) => {
+                    const t = e.href || e.label, l = v(e);
+                    return /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: n(
+                          "flex items-center justify-between opacity-30 px-2 py-2 rounded-md transition-colors cursor-not-allowed text-xs whitespace-nowrap font-medium",
+                          l ? "bg-active text-primary" : "text-primary"
+                        ),
+                        "aria-disabled": "true",
+                        children: e.label
+                      },
+                      t
+                    );
+                  }) })
+                ] }) : null
+              ) }, a.id)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as SubSidebar
+};

package/dist/patterns/sub-sidebar/types.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+export interface SubSidebarItem {
+    label: string;
+    href?: string;
+    /** Child links, shown in a collapsible group under the item. */
+    items?: SubSidebarChildItem[];
+    /** For an item without `href`. */
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Passed to `guard`. */
+    permissions?: string[];
+    /** When `guard` denies the item, show it greyed out instead of hiding it. */
+    showDisabled?: boolean;
+}
+export interface SubSidebarChildItem {
+    label: string;
+    href: string;
+    permissions?: string[];
+}
+export interface SubSidebarSection {
+    id: string;
+    label: string;
+    items: SubSidebarItem[];
+    permissions?: string[];
+    /** When `guard` denies the section, show its items greyed out instead of hiding it. */
+    showDisabled?: boolean;
+}
+export interface SubSidebarConfig {
+    title?: string;
+    sections: SubSidebarSection[];
+    /** A width class for the expanded sidebar. Default `w-[296px]`. */
+    width?: string;
+    /** Default true: the title row gets a collapse button, and the collapsed sidebar an expand button. */
+    collapsible?: boolean;
+    onToggleCollapse?: (collapsed: boolean) => void;
+}
+export interface SubSidebarLinkProps {
+    href: string;
+    className: string;
+    children: ReactNode;
+}
+/**
+ * Decides whether `content` renders for `permissions`, returning `fallback` (or nothing) when it doesn't. An empty
+ * `permissions` array means no restriction.
+ */
+export type SubSidebarGuard = (permissions: string[], content: ReactNode, fallback: ReactNode) => ReactNode;
+//# sourceMappingURL=types.d.ts.map

package/dist/patterns/sub-sidebar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/sub-sidebar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,uFAAuF;IACvF,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,CAC5B,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,KAChB,SAAS,CAAC"}

package/dist/primitives/close-button/close-button.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+export interface CloseButtonProps extends AriaButtonProps {
+    theme?: "light" | "dark";
+    size?: "xs" | "sm" | "md" | "lg";
+    label?: string;
+}
+export declare const CloseButton: ({ label, className, size, theme, ...otherProps }: CloseButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=close-button.d.ts.map

package/dist/primitives/close-button/close-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"close-button.d.ts","sourceRoot":"","sources":["../../../src/primitives/close-button/close-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAmBlG,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,GAAI,kDAAmE,gBAAgB,4CAiB9G,CAAC"}

package/dist/primitives/close-button/close-button.js

@@ -0,0 +1,29 @@
+import { jsx as i } from "react/jsx-runtime";
+import { X as f } from "@untitledui/icons";
+import { Button as c } from "react-aria-components";
+import { cx as t } from "../../utils/cn.js";
+const r = {
+  xs: { root: "size-7", icon: "size-4" },
+  sm: { root: "size-9", icon: "size-5" },
+  md: { root: "size-10", icon: "size-5" },
+  lg: { root: "size-11", icon: "size-6" }
+}, a = {
+  light: "text-fg-quaternary hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 outline-focus-ring",
+  dark: "text-fg-white/70 hover:text-fg-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 outline-focus-ring"
+}, v = ({ label: n, className: o, size: e = "sm", theme: s = "light", ...u }) => /* @__PURE__ */ i(
+  c,
+  {
+    ...u,
+    "aria-label": n || "Close",
+    className: (l) => t(
+      "flex cursor-pointer items-center justify-center rounded-lg p-2 transition duration-100 ease-linear focus:outline-hidden",
+      r[e].root,
+      a[s],
+      typeof o == "function" ? o(l) : o
+    ),
+    children: /* @__PURE__ */ i(f, { "aria-hidden": "true", className: t("shrink-0 transition-inherit-all", r[e].icon) })
+  }
+);
+export {
+  v as CloseButton
+};

package/dist/primitives/close-button/index.d.ts

@@ -0,0 +1,2 @@
+export { CloseButton, type CloseButtonProps } from './close-button';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/close-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/close-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}