@dynamic-labs-sdk/droplet 0.27.1 → 0.27.3

package/README.md

@@ -1,38 +1,30 @@
 # `@dynamic-labs-sdk/droplet`
 
-Dynamic Labs' internal React component library. Built on Radix UI primitives, Tailwind CSS v4, and an OKLCH-based design token system. Ships with 35+ components, animated icons, dark mode, and a live Storybook.
+Dynamic Labs' React component library. Built on Radix UI primitives, Tailwind CSS v4, and an OKLCH-based design token system. Ships with 35+ components, animated icons, dark mode, and a live Storybook.
 
 ---
 
 ## Installation
 
-This package is internal to the `dynamic-js-sdk` monorepo. Add it as a workspace dependency:
-
-```json
-{
-  "dependencies": {
-    "@dynamic-labs-sdk/droplet": "workspace:*"
-  }
-}
+```bash
+npm install @dynamic-labs-sdk/droplet
+# or
+pnpm add @dynamic-labs-sdk/droplet
+# or
+yarn add @dynamic-labs-sdk/droplet
 ```
 
+**Peer dependencies:** `react >= 18`, `react-dom >= 18`, `tailwindcss >= 4`. Next.js (`>= 14`) is optional.
+
 ---
 
 ## Setup
 
-Import the design tokens stylesheet **once at your app root**. This provides the full color, shadow, radius, and typography token system and is required for all components to render correctly.
+Droplet ships Tailwind CSS v4 utility classes baked into its compiled output. You must (1) have Tailwind v4 configured in your app, (2) import the design tokens stylesheet, and (3) tell Tailwind to scan droplet's `dist/` so its utility classes are emitted into your stylesheet.
 
-```ts
-import '@dynamic-labs-sdk/droplet/styles/globals.css';
-```
+### 1. Install and configure Tailwind v4
 
-If you're consuming from a source workspace (not the built `dist/`), use the relative path instead:
-
-```ts
-import '../../packages/droplet/src/styles/globals.css';
-```
-
-Your bundler must support Tailwind CSS v4 via the `@tailwindcss/vite` plugin:
+If you don't already have Tailwind v4, follow [the Tailwind v4 install guide](https://tailwindcss.com/docs/installation). The `@tailwindcss/vite` plugin is the simplest path for Vite/Next:
 
 ```ts
 // vite.config.ts
@@ -44,6 +36,26 @@ export default defineConfig({
 });
 ```
 
+### 2. Import the design tokens stylesheet
+
+Import once at your app root. This provides the full color, shadow, radius, and typography token system and is required for all components to render correctly.
+
+```ts
+import '@dynamic-labs-sdk/droplet/styles/globals.css';
+```
+
+### 3. Add droplet to Tailwind's `@source` paths
+
+Tailwind v4 only scans the consuming project by default, so it will miss the utility classes inside droplet's compiled JS. Add an `@source` directive to your app's main stylesheet:
+
+```css
+/* app.css */
+@import 'tailwindcss';
+@source "../node_modules/@dynamic-labs-sdk/droplet/dist";
+```
+
+Adjust the relative path to match where your stylesheet lives. Without this step, components will render unstyled.
+
 ---
 
 ## Usage
@@ -194,6 +206,90 @@ import {
 
 ---
 
+## Theming
+
+Droplet's theme is a layer of CSS custom properties. Tailwind utility classes resolve through them (`bg-brand-default` → `var(--brand-default)`), and every component reads from the same vars — so you can fully rebrand by **redefining the vars in your own stylesheet**. No Tailwind config changes, no rebuild, no fork.
+
+### Quick start: change the brand color
+
+```css
+/* your-theme.css — imported AFTER @dynamic-labs-sdk/droplet/styles/globals.css */
+
+:root {
+  --brand-default: oklch(0.67 0.21 30);  /* your light-mode brand */
+  --brand-hover: oklch(0.72 0.19 30);
+  --brand-accented: oklch(0.58 0.22 30);
+  --brand-light: oklch(0.97 0.03 30);
+  --ring: oklch(0.67 0.21 30);
+  --action: oklch(0.67 0.21 30);
+}
+
+.dark {
+  --brand-default: oklch(0.6 0.22 30);   /* your dark-mode brand */
+  --brand-hover: oklch(0.68 0.19 30);
+  --brand-accented: oklch(0.52 0.23 30);
+  --brand-light: oklch(0.27 0.07 30);
+  --ring: oklch(0.6 0.22 30);
+  --action: oklch(0.6 0.22 30);
+}
+```
+
+```ts
+// in your app entry, AFTER the droplet import
+import '@dynamic-labs-sdk/droplet/styles/globals.css';
+import './your-theme.css';
+```
+
+That's it. Buttons, links, focus rings, text-selection highlights, sidebars — all switch to the new brand.
+
+### Cascade order matters
+
+Your theme stylesheet **must load after** `@dynamic-labs-sdk/droplet/styles/globals.css`, or the same selectors (`:root`, `.dark`) in droplet's stylesheet will win and your overrides will silently do nothing. If you `@import` in a single CSS file, put droplet's import **first**:
+
+```css
+@import '@dynamic-labs-sdk/droplet/styles/globals.css';
+@import './your-theme.css';
+```
+
+### What's themeable
+
+Anything in the [Design tokens](#design-tokens) table below — colors, shadows, radii. The most common things to override:
+
+| What you want to change                                       | Tokens                                                                                              |
+| ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| Brand color (buttons, focus rings, links, selection)          | `--brand-default`, `--brand-hover`, `--brand-accented`, `--brand-light`, `--ring`, `--action`       |
+| Surfaces (page bg, cards, sidebar)                            | `--background`, `--card`, `--bg-bottom`, `--bg-default`, `--sidebar`                                |
+| Text colors                                                   | `--foreground`, `--muted-foreground`, `--text-link`                                                 |
+| Radius scale                                                  | `--radius-sm` through `--radius-4xl`                                                                |
+| Selection highlight                                           | `--selection-bg`                                                                                    |
+| Solid button top-highlight                                    | `--button-highlight`                                                                                |
+| Checkbox / radio hover fills                                  | `--checkbox-hover-fill`, `--radio-hover-fill`                                                       |
+
+For semantic colors (success/danger/warning/process), override the matching `--<state>-default`, `--<state>-light`, `--text-<state>` triplet.
+
+### Scoping a theme to part of your app
+
+If you only want droplet themed inside a subtree (e.g., a marketing site reusing one component), put the overrides on a wrapper class instead of `:root`:
+
+```css
+.my-theme {
+  --brand-default: oklch(0.67 0.21 30);
+  /* ... */
+}
+```
+
+```tsx
+<div className="my-theme">
+  <Button>Themed</Button>
+</div>
+```
+
+### Color space
+
+Droplet uses [OKLCH](https://oklch.com/) throughout. If your design system is in hex/rgb, tools like [oklch.com](https://oklch.com) or [oklch.fyi](https://oklch.fyi) will convert. You don't *have* to use OKLCH in your overrides — `oklch()`, `hex`, `rgb()`, and `hsl()` all interoperate fine — but staying in OKLCH gives you perceptually uniform lightness ramps when you tune hover/accented variants.
+
+---
+
 ## Design tokens
 
 All tokens are CSS custom properties defined in `globals.css`. Tailwind utility classes map directly to them — `bg-brand-default` resolves to `var(--brand-default)`.

package/dist/components/toggle-card/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleCard, type ToggleCardProps, type ToggleCardInputProps, type ToggleCardTag, type ToggleCardActionLink, type ToggleCardCustomActionIcon, } from './toggle-card';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/toggle-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,GAChC,MAAM,eAAe,CAAC"}

package/dist/components/toggle-card/toggle-card.d.ts

@@ -0,0 +1,113 @@
+/**
+ * ToggleCard — droplet's rich toggle composite.
+ *
+ * Rebuilt from Northstar's SingleToggleCard to support the redcoast dashboard
+ * migration. ToggleRow (sibling primitive) remains the minimal/canonical
+ * single-line toggle; ToggleCard is the multi-feature card variant with:
+ *   - Accordion expand/collapse for nested children
+ *   - Pluggable input type: switch (default), radio, or checkbox
+ *   - Optional left icon
+ *   - Tags row above the title and a RightSideTags slot on the right
+ *   - Optional notification dot in the trigger
+ *   - Optional `actionLink` rendered below content
+ *   - Optional `customActionIcon` rendered alongside the trigger affordance
+ *   - Whole-card click handler
+ *
+ * The API mirrors Northstar SingleToggleCard so a redcoast migration can be a
+ * mechanical rename. Where the Northstar API surfaced layout-tuning props
+ * (`disableHover`, `dontSeparateContentFromHeader`, `descriptionModificators`,
+ * `titleModificators`) the equivalent expression here is via Tailwind classes
+ * on `className` or `triggerClassName`.
+ *
+ * Authored in droplet so a single canonical card is available across teams.
+ * Backed by Card + Switch/Checkbox/RadioGroup + Radix Accordion.
+ */
+import { type ChangeEvent, type FC, type ReactElement, type ReactNode } from 'react';
+type ToggleCardInputType = 'toggle' | 'radio' | 'checkbox';
+export type ToggleCardInputProps = {
+    checked?: boolean;
+    disabled?: boolean;
+    /** Hide the input control entirely (useful when the row is informational). */
+    hidden?: boolean;
+    id?: string;
+    /** When true, renders a lock badge instead of a switch — signals the value
+     * is fixed and cannot be toggled via this UI. Implies disabled. */
+    isLocked?: boolean;
+    /** Indicates the saved/unsaved state via styling — informational, optional. */
+    isSaved?: boolean;
+    /** When true, paints the input with the warning accent (informational). */
+    isWarning?: boolean;
+    name?: string;
+    /** Native onChange — receives a synthetic event for parity with HTML inputs. */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Controls which control element renders next to the title. */
+    type?: ToggleCardInputType;
+};
+export type ToggleCardTag = {
+    Tag: ReactElement;
+    id: string;
+};
+export type ToggleCardActionLink = {
+    onClick: () => void;
+    text: string;
+};
+export type ToggleCardCustomActionIcon = {
+    Icon: ReactElement;
+    className?: string;
+};
+export type ToggleCardProps = {
+    /** Optional icon rendered before the title. */
+    Icon?: ReactElement;
+    /** Tags shown on the RIGHT side of the trigger (e.g. status badges). */
+    RightSideTags?: ToggleCardTag[];
+    /** Tags shown ABOVE the title (e.g. status pills). */
+    Tags?: ToggleCardTag[];
+    /** Required key for Radix Accordion item identity. */
+    accordionKey: string;
+    /** Action button rendered at the bottom of expanded content. */
+    actionLink?: ToggleCardActionLink;
+    /** Whether the accordion CAN expand. Defaults to true. */
+    allowExpand?: boolean;
+    /** Children — rendered inside the AccordionContent when expanded. */
+    children?: ReactNode;
+    /** className applied to the outer Accordion root. */
+    className?: string;
+    /** Whether the accordion can be collapsed (Radix `collapsible`). */
+    collapsible?: boolean;
+    /** Replaces the default chevron with a custom icon. */
+    customActionIcon?: ToggleCardCustomActionIcon;
+    /** Whether the accordion is expanded by default. */
+    defaultExpanded?: boolean;
+    /** Optional secondary line below the title. */
+    description?: string;
+    /** Disables the entire card (input + trigger). */
+    disabled?: boolean;
+    /** Inputs (toggle/radio/checkbox) rendered alongside the title. */
+    inputProps?: ToggleCardInputProps;
+    /** When true, draws a notification dot on the trigger. */
+    notification?: boolean;
+    /**
+     * Click handler for the whole card surface.
+     *
+     * @deprecated Currently a no-op: attaching onClick to a wrapper that nests
+     *   interactive children (AccordionTrigger, Switch / Checkbox / RadioGroup)
+     *   is an a11y anti-pattern. Kept in the type signature for Northstar
+     *   mechanical-rename parity. A future iteration may re-introduce this with
+     *   a dedicated click target (e.g. an overlay button) outside the nested
+     *   interactives.
+     */
+    onCardClick?: () => void;
+    /** Accordion value-change handler. */
+    onValueChange?: (value: string | undefined) => void;
+    /** Card title — rendered as the primary label inside the trigger. */
+    title?: string;
+    /** className applied to the trigger row. */
+    triggerClassName?: string;
+    /** Test id applied to the accordion trigger element. */
+    triggerTestId?: string;
+    /** Controlled accordion value. */
+    value?: string;
+};
+export declare const ToggleCard: FC<ToggleCardProps>;
+export {};
+//# sourceMappingURL=toggle-card.d.ts.map

package/dist/components/toggle-card/toggle-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-card.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-card/toggle-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,EAAE,EACP,KAAK,YAAY,EACjB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAcf,KAAK,mBAAmB,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAE3D,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;uEACmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,gEAAgE;IAChE,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,YAAY,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,wEAAwE;IACxE,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;IAChC,sDAAsD;IACtD,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;IAC9C,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,sCAAsC;IACtC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuFF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA6L1C,CAAC"}

package/dist/components/toggle-card/toggle-card.stories.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    args: {
+        accordionKey: string;
+        description: string;
+        inputProps: {
+            checked: true;
+            type: "toggle";
+        };
+        title: string;
+    };
+    argTypes: {
+        allowExpand: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        notification: {
+            control: "boolean";
+        };
+    };
+    component: React.FC<import("./toggle-card").ToggleCardProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const WithTags: Story;
+export declare const WithRightSideTags: Story;
+export declare const Expandable: Story;
+export declare const WithActionLink: Story;
+export declare const IsLocked: Story;
+export declare const Notification: Story;
+export declare const RadioInput: Story;
+export declare const CheckboxInput: Story;
+export declare const Disabled: Story;
+export declare const WholeCardClickable: Story;
+//# sourceMappingURL=toggle-card.stories.d.ts.map

package/dist/components/toggle-card/toggle-card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-card/toggle-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgByB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAqB/B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAwBxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA6B5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAuB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC"}

package/dist/index.cjs

@@ -2192,6 +2192,189 @@ const StatusBadge = ({ status, label, className }) => {
 	});
 };
 
+//#endregion
+//#region src/components/toggle-card/toggle-card.tsx
+/**
+* ToggleCard — droplet's rich toggle composite.
+*
+* Rebuilt from Northstar's SingleToggleCard to support the redcoast dashboard
+* migration. ToggleRow (sibling primitive) remains the minimal/canonical
+* single-line toggle; ToggleCard is the multi-feature card variant with:
+*   - Accordion expand/collapse for nested children
+*   - Pluggable input type: switch (default), radio, or checkbox
+*   - Optional left icon
+*   - Tags row above the title and a RightSideTags slot on the right
+*   - Optional notification dot in the trigger
+*   - Optional `actionLink` rendered below content
+*   - Optional `customActionIcon` rendered alongside the trigger affordance
+*   - Whole-card click handler
+*
+* The API mirrors Northstar SingleToggleCard so a redcoast migration can be a
+* mechanical rename. Where the Northstar API surfaced layout-tuning props
+* (`disableHover`, `dontSeparateContentFromHeader`, `descriptionModificators`,
+* `titleModificators`) the equivalent expression here is via Tailwind classes
+* on `className` or `triggerClassName`.
+*
+* Authored in droplet so a single canonical card is available across teams.
+* Backed by Card + Switch/Checkbox/RadioGroup + Radix Accordion.
+*/
+const inputCommon = "shrink-0 touch-manipulation cursor-pointer disabled:cursor-not-allowed disabled:opacity-50";
+const renderInput = (input, id) => {
+	if (!input || input.hidden) return null;
+	if (input.isLocked) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-label": "Locked",
+		title: "Locked",
+		className: "shrink-0 inline-flex items-center justify-center size-5 rounded-full bg-muted text-muted-foreground mt-0.5",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			className: "size-3",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": true,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				x: "3",
+				y: "11",
+				width: "18",
+				height: "11",
+				rx: "2",
+				ry: "2"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7 11V7a5 5 0 0110 0v4" })]
+		})
+	});
+	const type = input.type ?? "toggle";
+	const handleChange = (next) => {
+		if (!input.onChange) return;
+		input.onChange({ target: {
+			checked: next,
+			name: input.name ?? ""
+		} });
+	};
+	if (type === "toggle") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_toggle_row.Switch, {
+		id: input.id ?? id,
+		checked: Boolean(input.checked),
+		disabled: input.disabled,
+		onCheckedChange: handleChange,
+		className: require_toggle_row.cn(inputCommon, "mt-0.5")
+	});
+	if (type === "checkbox") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Checkbox, {
+		id: input.id ?? id,
+		checked: Boolean(input.checked),
+		disabled: input.disabled,
+		onCheckedChange: (state) => handleChange(state === true),
+		className: require_toggle_row.cn(inputCommon, "mt-1")
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroup, {
+		value: input.checked ? input.id ?? id : "",
+		onValueChange: (v) => handleChange(v === (input.id ?? id)),
+		disabled: input.disabled,
+		className: "shrink-0 mt-0.5",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupItem, {
+			id: input.id ?? id,
+			value: input.id ?? id,
+			className: inputCommon
+		})
+	});
+};
+const ToggleCard = ({ accordionKey, title, description, inputProps, allowExpand = true, defaultExpanded, value, onValueChange, collapsible = true, Tags, RightSideTags, notification, actionLink, customActionIcon, onCardClick: _onCardClick, children, disabled, triggerTestId, className, triggerClassName }) => {
+	const generatedId = (0, react.useId)();
+	const inputId = inputProps?.id ?? generatedId;
+	const isParentMode = !allowExpand && Boolean(children);
+	const renderContent = () => {
+		const actionLinkButton = actionLink ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: actionLink.onClick,
+			className: "mt-3 text-sm font-medium text-(--action) hover:underline underline-offset-4 cursor-pointer",
+			children: actionLink.text
+		}) : null;
+		if (allowExpand) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_accordion.Content, {
+			className: "border-t border-border-divider px-5 py-4",
+			children: [children, actionLinkButton]
+		});
+		if (!children && !actionLink) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "border-t border-border-divider bg-card px-5 py-3 space-y-2",
+			children: [children, actionLinkButton]
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_accordion.Root, {
+		type: "single",
+		collapsible,
+		defaultValue: defaultExpanded ? accordionKey : void 0,
+		value,
+		onValueChange,
+		"data-slot": "toggle-card",
+		className: require_toggle_row.cn("rounded-xl bg-card shadow-card overflow-hidden", disabled && "opacity-60", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_accordion.Item, {
+			value: accordionKey,
+			className: "border-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_accordion.Header, {
+				className: "m-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_toggle_row.cn("group flex items-start gap-3 px-5 py-4", isParentMode && "bg-bg-bottom", triggerClassName),
+					children: [
+						renderInput(inputProps, inputId),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex-1 min-w-0",
+							children: [
+								title && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-baseline gap-1.5 flex-wrap leading-5",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+										htmlFor: inputId,
+										className: require_toggle_row.cn("text-sm font-medium select-none leading-5", disabled && "text-muted-foreground"),
+										children: [title, notification && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											"aria-hidden": true,
+											className: "inline-block ml-1.5 size-1.5 rounded-full bg-destructive align-middle"
+										})]
+									}), Tags && Tags.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: Tags.map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "leading-5",
+										children: t.Tag
+									}, t.id)) })]
+								}),
+								!title && Tags && Tags.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "flex items-baseline gap-1.5 mb-1 leading-5",
+									children: Tags.map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "leading-5",
+										children: t.Tag
+									}, t.id))
+								}),
+								description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-sm text-muted-foreground mt-0.5 text-pretty",
+									children: description
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2 shrink-0 self-start",
+							children: [RightSideTags && RightSideTags.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex items-center gap-1.5",
+								children: RightSideTags.map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t.Tag }, t.id))
+							}), allowExpand && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_accordion.Trigger, {
+								"data-testid": triggerTestId,
+								className: require_toggle_row.cn("shrink-0 inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-[transform,background-color] duration-150 hover:bg-overlay-hover [&[data-state=open]>svg]:rotate-180", customActionIcon?.className),
+								disabled: !allowExpand,
+								children: customActionIcon ? customActionIcon.Icon : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+									className: "size-4",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									"aria-hidden": true,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "6 9 12 15 18 9" })
+								})
+							})]
+						})
+					]
+				})
+			}), renderContent()]
+		})
+	});
+};
+
 //#endregion
 //#region src/components/icons/arrow-up-right/arrow-up-right.tsx
 const ArrowUpRightIcon = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIcon, {
@@ -3858,6 +4041,7 @@ exports.TabsTrigger = TabsTrigger;
 exports.TerminalIcon = TerminalIcon;
 exports.Textarea = Textarea;
 exports.Toaster = Toaster;
+exports.ToggleCard = ToggleCard;
 exports.ToggleRow = require_toggle_row.ToggleRow;
 exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;