@lessly/ui 0.6.0 → 0.7.1

package/dist/index.d.ts

@@ -986,9 +986,19 @@ interface ConnectionCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     glyph?: React$1.ReactNode;
     /** Override the default status label (e.g. "Token expired" for `error`). */
     statusLabel?: string;
-    /** How many products hold a segment of this connection. */
+    /**
+     * How many products hold a segment of this connection. `undefined` renders the
+     * "Not granted to any product yet" default — pass it ONLY on a surface where
+     * that claim is true and knowable (the org roster); on a product surface pass
+     * neither `grantedCount` nor a footer `action` to render no footer at all.
+     */
     grantedCount?: number;
-    /** Footer action — typically a <Button> ("Manage", "Reconnect", "Connect"). */
+    /**
+     * Footer action — typically a <Button> ("Manage", "Reconnect", "Connect").
+     * Flat mode: a disconnected card shows it in the header. Collapsible mode: the
+     * header is a disclosure trigger (nesting a button would be invalid), so the
+     * action always renders in the expanded footer instead.
+     */
     action?: React$1.ReactNode;
     /**
      * Blast-radius disclosure. Some providers (GitHub, ClickUp) grant all-or-nothing
@@ -1000,12 +1010,24 @@ interface ConnectionCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
      */
     access?: React$1.ReactNode;
     /**
-     * Drawer content rendered below the card body — the org surface's accordion
-     * drawer in the integration prototype (the per-product grants roster, inline
-     * requests, "+ Grant to a product"). The caller owns expand/collapse: pass
-     * children only while open. Omitted = the flat card, unchanged.
+     * Drawer content rendered below the card body — the per-product grants roster,
+     * inline requests, "+ Grant to a product". Flat mode: the caller owns visibility,
+     * pass children only while open (unchanged behavior). Collapsible mode: pass
+     * children unconditionally — the card shows them while expanded.
      */
     children?: React$1.ReactNode;
+    /**
+     * Disclosure mode: the header row toggles the card open/closed; the footer and
+     * drawer render only while open. The `access` blast-radius notice stays visible
+     * even while collapsed — it is a safety disclosure, not a detail. Collapsed by
+     * default.
+     */
+    collapsible?: boolean;
+    /** Uncontrolled initial state (collapsible mode). Default: false (collapsed). */
+    defaultOpen?: boolean;
+    /** Controlled open state (collapsible mode); pair with `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 declare const ConnectionCard: React$1.ForwardRefExoticComponent<ConnectionCardProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -3366,7 +3366,7 @@ SegmentChip.displayName = "SegmentChip";
 
 // src/components/connection-card.tsx
 import * as React56 from "react";
-import { AlertTriangle } from "lucide-react";
+import { AlertTriangle, ChevronDown as ChevronDown4 } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx66, jsxs as jsxs33 } from "react/jsx-runtime";
 var authLabels = { app: "App", oauth: "OAuth", token: "token" };
 var statusMeta = {
@@ -3378,53 +3378,123 @@ function monogram(name) {
   return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
 }
 var ConnectionCard = React56.forwardRef(
-  ({ name, scope, auth, status, glyph, statusLabel, grantedCount, action, access, children, className, ...props }, ref) => {
+  ({
+    name,
+    scope,
+    auth,
+    status,
+    glyph,
+    statusLabel,
+    grantedCount,
+    action,
+    access,
+    children,
+    collapsible = false,
+    defaultOpen,
+    open,
+    onOpenChange,
+    className,
+    ...props
+  }, ref) => {
     const meta = statusMeta[status];
     const connected = status !== "disconnected";
-    return /* @__PURE__ */ jsxs33(Card, { ref, className: cn(status === "disconnected" && "border-dashed border-border-default", className), ...props, children: [
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3 p-4", children: [
-        /* @__PURE__ */ jsx66(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-elevated text-sm font-bold text-text-secondary",
-            children: glyph ?? monogram(name)
-          }
-        ),
-        /* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx66("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
-          /* @__PURE__ */ jsxs33("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
-            /* @__PURE__ */ jsx66(Badge, { variant: "secondary", children: scope }),
-            /* @__PURE__ */ jsx66(Badge, { variant: "secondary", children: authLabels[auth] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx66("div", { className: "ml-auto shrink-0", children: connected ? /* @__PURE__ */ jsxs33(Badge, { variant: meta.badge, className: "gap-1.5", children: [
-          /* @__PURE__ */ jsx66(StatusDot, { status: meta.dot, size: "sm" }),
-          statusLabel ?? meta.label
-        ] }) : action })
-      ] }),
-      access && /* @__PURE__ */ jsxs33(
-        "div",
+    const glyphBox = /* @__PURE__ */ jsx66(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-elevated text-sm font-bold text-text-secondary",
+        children: glyph ?? monogram(name)
+      }
+    );
+    const identity = /* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx66("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+      /* @__PURE__ */ jsxs33("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ jsx66(Badge, { variant: "secondary", children: scope }),
+        /* @__PURE__ */ jsx66(Badge, { variant: "secondary", children: authLabels[auth] })
+      ] })
+    ] });
+    const statusBadge = /* @__PURE__ */ jsxs33(Badge, { variant: meta.badge, className: "gap-1.5", children: [
+      /* @__PURE__ */ jsx66(StatusDot, { status: meta.dot, size: "sm" }),
+      statusLabel ?? meta.label
+    ] });
+    const accessNote = access ? /* @__PURE__ */ jsxs33(
+      "div",
+      {
+        role: "note",
+        className: "flex items-start gap-2 border-t border-border-subtle bg-bg-warning-subtle px-4 py-2.5 text-xs font-medium text-text-warning",
+        children: [
+          /* @__PURE__ */ jsx66(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx66("span", { children: access })
+        ]
+      }
+    ) : null;
+    const footerAction = collapsible ? action : connected && action;
+    const footer = grantedCount !== void 0 || footerAction ? /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
+      /* @__PURE__ */ jsx66("span", { className: "text-sm text-text-secondary", children: grantedCount !== void 0 ? /* @__PURE__ */ jsxs33(Fragment5, { children: [
+        "Granted to ",
+        /* @__PURE__ */ jsx66("span", { className: "font-semibold text-text-primary", children: grantedCount }),
+        " ",
+        grantedCount === 1 ? "product" : "products"
+      ] }) : /* @__PURE__ */ jsx66("span", { className: "text-text-tertiary", children: "Not granted to any product yet" }) }),
+      footerAction
+    ] }) : null;
+    const drawer = children ? /* @__PURE__ */ jsx66("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children }) : null;
+    if (!collapsible) {
+      return /* @__PURE__ */ jsxs33(
+        Card,
         {
-          role: "note",
-          className: "flex items-start gap-2 border-t border-border-subtle bg-bg-warning-subtle px-4 py-2.5 text-xs font-medium text-text-warning",
+          ref,
+          className: cn(status === "disconnected" && "border-dashed border-border-default", className),
+          ...props,
           children: [
-            /* @__PURE__ */ jsx66(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx66("span", { children: access })
+            /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3 p-4", children: [
+              glyphBox,
+              identity,
+              /* @__PURE__ */ jsx66("div", { className: "ml-auto shrink-0", children: connected ? statusBadge : action })
+            ] }),
+            accessNote,
+            footer,
+            drawer
           ]
         }
-      ),
-      (grantedCount !== void 0 || connected && action) && /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
-        /* @__PURE__ */ jsx66("span", { className: "text-sm text-text-secondary", children: grantedCount !== void 0 ? /* @__PURE__ */ jsxs33(Fragment5, { children: [
-          "Granted to ",
-          /* @__PURE__ */ jsx66("span", { className: "font-semibold text-text-primary", children: grantedCount }),
-          " ",
-          grantedCount === 1 ? "product" : "products"
-        ] }) : /* @__PURE__ */ jsx66("span", { className: "text-text-tertiary", children: "Not granted to any product yet" }) }),
-        connected && action
-      ] }),
-      children && /* @__PURE__ */ jsx66("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children })
-    ] });
+      );
+    }
+    return /* @__PURE__ */ jsx66(Collapsible, { defaultOpen, open, onOpenChange, children: /* @__PURE__ */ jsxs33(
+      Card,
+      {
+        ref,
+        className: cn(status === "disconnected" && "border-dashed border-border-default", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx66(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs33(
+            "button",
+            {
+              type: "button",
+              className: "group flex w-full cursor-pointer items-center gap-3 rounded-[inherit] p-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+              children: [
+                glyphBox,
+                identity,
+                /* @__PURE__ */ jsxs33("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+                  statusBadge,
+                  /* @__PURE__ */ jsx66(
+                    ChevronDown4,
+                    {
+                      "aria-hidden": "true",
+                      className: "size-4 shrink-0 text-text-tertiary transition-transform group-data-[state=open]:rotate-180"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) }),
+          accessNote,
+          /* @__PURE__ */ jsxs33(CollapsibleContent2, { children: [
+            footer,
+            drawer
+          ] })
+        ]
+      }
+    ) });
   }
 );
 ConnectionCard.displayName = "ConnectionCard";

package/dist/styles.css

@@ -11,13 +11,13 @@
  */
 
 :root {
-  --bg-primary: #0e1015;
+  --bg-primary: #191b24;
   --bg-secondary: #12141b;
-  --bg-surface: #191b24;
-  --bg-elevated: #1f222d;
-  --bg-sunken: #08090c;
+  --bg-surface: #1f222d;
+  --bg-elevated: #252936;
+  --bg-sunken: #0e1015;
   --bg-brand: #06297d;
-  --bg-brand-subtle: #0e204c;
+  --bg-brand-subtle: #1f2541;
   --bg-brand-hover: #08349b;
   --bg-brand-bright: #165ff2;
   --bg-brand-bright-hover: #3d7af4;
@@ -33,7 +33,7 @@
   --bg-rose-subtle: #1a090b;
   --text-primary: #eeeff0;
   --text-secondary: #a5a9b5;
-  --text-tertiary: #8a91a7;
+  --text-tertiary: #8a93a8;
   --text-disabled: #60687f;
   --text-inverse: #0e1015;
   --text-on-brand: #f6f7f7;
@@ -57,9 +57,9 @@
   --icon-success: #2eda76;
   --icon-warning: #efb042;
   --icon-danger: #f06a6a;
-  --border-subtle: #30343f;
-  --border-default: #60687f;
-  --border-strong: #737c95;
+  --border-subtle: #2a2e3b;
+  --border-default: #737c95;
+  --border-strong: #8a91a7;
   --border-brand: #165ff2;
   --border-focus: #165ff2;
   --border-success: #1da456;
@@ -271,12 +271,12 @@
 }
 
 .light {
-  --bg-primary: #eeeff0;
-  --bg-secondary: #e1e2e4;
-  --bg-surface: #f6f7f7;
-  --bg-elevated: #ffffff;
-  --bg-sunken: #cfd1d7;
-  --bg-brand-subtle: #eaeef4;
+  --bg-primary: #f6f7f7;
+  --bg-secondary: #eeeff0;
+  --bg-surface: #f2f3f4;
+  --bg-elevated: #edeef0;
+  --bg-sunken: #e1e2e4;
+  --bg-brand-subtle: #e4ecfe;
   --bg-brand-hover: #05226a;
   --bg-brand-bright-hover: #0b4cd5;
   --bg-success-subtle: #ebf3ef;
@@ -291,7 +291,7 @@
   --text-tertiary: #535a6e;
   --text-disabled: #737c95;
   --text-inverse: #f6f7f7;
-  --text-brand: #0940b8;
+  --text-brand: #0b4cd5;
   --text-success: #13703c;
   --text-warning: #7a5409;
   --text-danger: #94120e;
@@ -303,12 +303,11 @@
   --icon-primary: #252936;
   --icon-secondary: #535a6e;
   --icon-disabled: #8a91a7;
-  --icon-brand: #0940b8;
+  --icon-brand: #165ff2;
   --icon-success: #13703c;
   --icon-warning: #7a5409;
   --icon-danger: #94120e;
   --border-subtle: #cfd1d7;
-  --border-default: #737c95;
   --border-strong: #60687f;
   --border-focus: #0940b8;
   --border-success: #188a49;
@@ -668,7 +667,6 @@
   --color-icon-warning: var(--icon-warning);
   --color-icon-danger: var(--icon-danger);
   --color-border-subtle: var(--border-subtle);
-  --color-border-default: var(--border-default);
   --color-border-strong: var(--border-strong);
   --color-border-focus: var(--border-focus);
   --color-border-success: var(--border-success);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",
@@ -57,7 +57,7 @@
     }
   },
   "dependencies": {
-    "@lessly/tokens": "^0.1.0",
+    "@lessly/tokens": "^0.3.1",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-alert-dialog": "^1.1.19",
     "@radix-ui/react-aspect-ratio": "^1.1.11",