@dynamic-labs-sdk/droplet 0.27.1 → 0.27.2

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;