@dynamic-labs-sdk/droplet 0.0.0 → 0.27.2

package/dist/migration.esm.js

@@ -0,0 +1,322 @@
+import { i as Input, r as Label, s as cn, t as ToggleRow } from "./toggle-row-B5iXNWCJ.esm.js";
+import { useId, useState } from "react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { AiMagicIcon, Alert01Icon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon } from "@hugeicons/core-free-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/migration/banner/banner.tsx
+/**
+* MIGRATION-AID — temporary composite added to unblock the redcoast
+* Northstar→droplet dashboard migration. NOT canonical. Will be replaced
+* by the design team's finalized version. Do not adopt for new droplet
+* projects; use the canonical droplet primitives directly instead.
+*
+* Tracking: https://github.com/dynamic-labs/redcoast/blob/main/MIGRATION-PLAN.md
+*/
+const variantStyles = {
+	advance: {
+		bg: "bg-brand-light border-border-focused/20",
+		iconColor: "text-brand-default",
+		text: "text-brand-accented"
+	},
+	error: {
+		bg: "bg-danger-light border-border-danger/20",
+		iconColor: "text-danger-default",
+		text: "text-text-danger"
+	},
+	info: {
+		bg: "bg-bg-default border-border-divider",
+		iconColor: "text-muted-foreground",
+		text: "text-muted-foreground"
+	},
+	success: {
+		bg: "bg-success-light border-border-success/20",
+		iconColor: "text-success-default",
+		text: "text-text-success"
+	},
+	warning: {
+		bg: "bg-warning-light border-border-warning/20",
+		iconColor: "text-warning-default",
+		text: "text-text-warning"
+	}
+};
+const variantIcons = {
+	advance: AiMagicIcon,
+	error: Alert01Icon,
+	info: InformationCircleIcon,
+	success: CheckmarkCircle02Icon,
+	warning: Alert01Icon
+};
+/**
+* 5-variant banner: `info` | `warning` | `error` | `success` | `advance`.
+* Inline icon + text + optional action button + optional close.
+*
+* Distinct from the canonical single-variant `InfoBanner`. The canonical
+* replacement may simply extend `InfoBanner` with semantic variants.
+*
+* @deprecated Migration-aid only. Replace with canonical version when available.
+*/
+const Banner = ({ action, children, className, dismissible = false, onDismiss, variant = "info" }) => {
+	const [dismissed, setDismissed] = useState(false);
+	const handleDismiss = () => {
+		setDismissed(true);
+		onDismiss?.();
+	};
+	if (dismissed) return null;
+	const styles = variantStyles[variant];
+	const icon = variantIcons[variant];
+	return /* @__PURE__ */ jsxs("output", {
+		className: cn("flex items-center gap-2.5 rounded-lg border px-3 py-2 text-sm", styles.bg, styles.text, className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("shrink-0", styles.iconColor),
+				children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+					icon,
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-w-0 text-pretty font-medium",
+				children
+			}),
+			action && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: action.onClick,
+				className: cn("shrink-0 px-2 py-1 rounded-md text-xs font-medium cursor-pointer touch-manipulation", "hover:bg-overlay-hover transition-colors", styles.text),
+				children: action.text
+			}),
+			dismissible && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleDismiss,
+				"aria-label": "Dismiss",
+				className: cn("shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 cursor-pointer transition-opacity", styles.text),
+				children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+					icon: Cancel01Icon,
+					size: 14
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/components/migration/double-section/double-section.tsx
+/**
+* Two `SettingsSection`-like blocks side by side with a divider between them.
+* Common use case: "Live mode | Sandbox mode" pairs.
+*
+* @deprecated Migration-aid only. Replace with canonical version when available.
+*/
+const DoubleSection = ({ className, sections }) => /* @__PURE__ */ jsx("section", {
+	className: cn("rounded-xl border border-border bg-card shadow-[var(--shadow-card)] overflow-hidden", "grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-border-divider", className),
+	children: sections.map((section) => /* @__PURE__ */ jsxs("div", {
+		className: "p-6 space-y-4",
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-semibold text-balance",
+				children: section.title
+			}), section.badge]
+		}), section.description && /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground mt-1 text-pretty",
+			children: section.description
+		})] }), /* @__PURE__ */ jsx("div", {
+			className: "space-y-3",
+			children: section.children
+		})]
+	}, section.id))
+});
+
+//#endregion
+//#region src/components/migration/field/field.tsx
+/**
+* MIGRATION-AID — temporary composite added to unblock the redcoast
+* Northstar→droplet dashboard migration. NOT canonical. Will be replaced
+* by the design team's finalized version. Do not adopt for new droplet
+* projects; use the canonical droplet primitives directly instead.
+*
+* Tracking: https://github.com/dynamic-labs/redcoast/blob/main/MIGRATION-PLAN.md
+*/
+/**
+* `Label` + `Input` + helper/error composite. Wires up `htmlFor`,
+* `aria-describedby`, and `aria-invalid` so call sites don't repeat the layout.
+*
+* The canonical version may differ in form-validation integration (RHF,
+* formik, native form, etc.) — keep this composite focused on layout only.
+*
+* @deprecated Migration-aid only. Replace with canonical version when available.
+*/
+const Field = ({ className, error, helper, label, required, id: idProp, ...inputProps }) => {
+	const reactId = useId();
+	const id = idProp || reactId;
+	const helperId = `${id}-helper`;
+	const errorId = `${id}-error`;
+	const showHelper = Boolean(helper) && !error;
+	const showError = Boolean(error);
+	let describedBy;
+	if (showError) describedBy = errorId;
+	else if (showHelper) describedBy = helperId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-2", className),
+		children: [
+			/* @__PURE__ */ jsxs(Label, {
+				htmlFor: id,
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "text-text-danger",
+					"aria-hidden": true,
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				id,
+				"aria-describedby": describedBy,
+				"aria-invalid": error ? true : void 0,
+				required,
+				...inputProps
+			}),
+			showHelper ? /* @__PURE__ */ jsx("p", {
+				id: helperId,
+				className: "text-xs text-muted-foreground",
+				children: helper
+			}) : null,
+			showError ? /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				role: "alert",
+				className: "text-xs text-text-danger",
+				children: error
+			}) : null
+		]
+	});
+};
+
+//#endregion
+//#region src/components/migration/settings-section-v2/settings-section-v2.tsx
+/**
+* Card-shaped settings section with a header (title + optional description +
+* optional helpLink + optional alert) and a content area.
+*
+* `layout='split'` renders header on the left and content on the right (1fr
+* 2fr grid on `md+`). Default `'stacked'` matches the canonical
+* `SettingsSection`.
+*
+* `variant='danger'` tints the title red and adds a red border.
+*
+* @deprecated Migration-aid only. Replace with canonical `SettingsSection` once
+*   the design team's finalized version supports `helpLink` / `alert` / split layout.
+*/
+const SettingsSectionV2 = ({ alert, children, className, description, helpLink, layout = "stacked", title, variant = "default" }) => {
+	const headerBlock = /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("h3", {
+			className: cn("text-sm font-semibold text-balance", variant === "danger" && "text-text-danger"),
+			children: title
+		}),
+		description && /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground mt-1 text-pretty",
+			children: description
+		}),
+		helpLink && /* @__PURE__ */ jsxs("a", {
+			href: helpLink.url,
+			target: "_blank",
+			rel: "noreferrer",
+			className: "inline-block text-sm font-medium text-text-link mt-2 hover:underline",
+			children: [helpLink.text, " →"]
+		}),
+		alert && /* @__PURE__ */ jsx("div", {
+			className: "mt-3",
+			children: alert
+		})
+	] });
+	if (layout === "split") return /* @__PURE__ */ jsxs("section", {
+		className: cn("rounded-xl border border-border bg-card p-6 shadow-[var(--shadow-card)]", "grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-6", variant === "danger" && "border-border-danger/30", className),
+		children: [headerBlock, /* @__PURE__ */ jsx("div", {
+			className: "space-y-4",
+			children
+		})]
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("rounded-xl border border-border bg-card p-6 shadow-[var(--shadow-card)]", variant === "danger" && "border-border-danger/30", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mb-4",
+			children: headerBlock
+		}), /* @__PURE__ */ jsx("div", {
+			className: "space-y-4",
+			children
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/migration/sub-section/sub-section.tsx
+/**
+* Heading + content stack, used inside an outer SettingsSection to group
+* sub-fields. Two variants:
+*   - 'plain' (default): unboxed.
+*   - 'boxed': thin-bordered card-within-a-card.
+*
+* @deprecated Migration-aid only. Replace with canonical version when available.
+*/
+const SubSection = ({ children, className, description, title, variant = "plain" }) => {
+	if (variant === "boxed") return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-lg border border-border-divider bg-bg-bottom p-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-3",
+			children: [/* @__PURE__ */ jsx("h4", {
+				className: "text-sm font-medium text-foreground",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground mt-0.5 text-pretty",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "space-y-3",
+			children
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-3", className),
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
+			className: "text-sm font-medium text-foreground",
+			children: title
+		}), description && /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-muted-foreground mt-0.5 text-pretty",
+			children: description
+		})] }), /* @__PURE__ */ jsx("div", {
+			className: "space-y-3",
+			children
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/migration/toggle-group/toggle-group.tsx
+/**
+* MIGRATION-AID — temporary composite added to unblock the redcoast
+* Northstar→droplet dashboard migration. NOT canonical. Will be replaced
+* by the design team's finalized version. Do not adopt for new droplet
+* projects; use the canonical droplet primitives directly instead.
+*
+* Tracking: https://github.com/dynamic-labs/redcoast/blob/main/MIGRATION-PLAN.md
+*/
+/**
+* Master `ToggleRow` on top, with a vertically-indented stack of nested
+* sub-toggles underneath. Sub-toggles auto-hide when the master is off.
+*
+* Used for "social login → which providers" and similar grouped-toggle
+* patterns ported from redcoast.
+*
+* @deprecated Migration-aid only. Replace with canonical version when available.
+*/
+const ToggleGroup = ({ children, className, master }) => {
+	const showChildren = master.checked && Boolean(children);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-3", className),
+		children: [/* @__PURE__ */ jsx(ToggleRow, { ...master }), showChildren ? /* @__PURE__ */ jsx("div", {
+			className: "ml-[42px] pl-4 border-l border-border-divider space-y-3",
+			children
+		}) : null]
+	});
+};
+
+//#endregion
+export { Banner, DoubleSection, Field, SettingsSectionV2, SubSection, ToggleGroup };
+//# sourceMappingURL=migration.esm.js.map

package/dist/migration.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"migration.esm.js","names":["variantStyles: Record<BannerVariant, VariantStyle>","variantIcons: Record<BannerVariant, typeof Alert01Icon>","describedBy: string | undefined"],"sources":["../src/components/migration/banner/banner.tsx","../src/components/migration/double-section/double-section.tsx","../src/components/migration/field/field.tsx","../src/components/migration/settings-section-v2/settings-section-v2.tsx","../src/components/migration/sub-section/sub-section.tsx","../src/components/migration/toggle-group/toggle-group.tsx"],"sourcesContent":["/**\n * MIGRATION-AID — temporary composite added to unblock the redcoast\n * Northstar→droplet dashboard migration. NOT canonical. Will be replaced\n * by the design team's finalized version. Do not adopt for new droplet\n * projects; use the canonical droplet primitives directly instead.\n *\n * Tracking: https://github.com/dynamic-labs/redcoast/blob/main/MIGRATION-PLAN.md\n */\n'use client';\n\nimport { type ReactNode, useState } from 'react';\nimport {\n  AiMagicIcon,\n  Alert01Icon,\n  Cancel01Icon,\n  CheckmarkCircle02Icon,\n  InformationCircleIcon,\n} from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\n\nimport { cn } from '../../../lib/utils';\n\nexport type BannerVariant = 'info' | 'warning' | 'error' | 'success' | 'advance';\n\nexport type BannerProps = {\n  action?: { onClick: () => void; text: string };\n  children: ReactNode;\n  className?: string;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  variant?: BannerVariant;\n};\n\ntype VariantStyle = { bg: string; iconColor: string; text: string };\n\nconst variantStyles: Record<BannerVariant, VariantStyle> = {\n  advance: {\n    bg: 'bg-brand-light border-border-focused/20',\n    iconColor: 'text-brand-default',\n    text: 'text-brand-accented',\n  },\n  error: {\n    bg: 'bg-danger-light border-border-danger/20',\n    iconColor: 'text-danger-default',\n    text: 'text-text-danger',\n  },\n  info: {\n    bg: 'bg-bg-default border-border-divider',\n    iconColor: 'text-muted-foreground',\n    text: 'text-muted-foreground',\n  },\n  success: {\n    bg: 'bg-success-light border-border-success/20',\n    iconColor: 'text-success-default',\n    text: 'text-text-success',\n  },\n  warning: {\n    bg: 'bg-warning-light border-border-warning/20',\n    iconColor: 'text-warning-default',\n    text: 'text-text-warning',\n  },\n};\n\nconst variantIcons: Record<BannerVariant, typeof Alert01Icon> = {\n  advance: AiMagicIcon,\n  error: Alert01Icon,\n  info: InformationCircleIcon,\n  success: CheckmarkCircle02Icon,\n  warning: Alert01Icon,\n};\n\n/**\n * 5-variant banner: `info` | `warning` | `error` | `success` | `advance`.\n * Inline icon + text + optional action button + optional close.\n *\n * Distinct from the canonical single-variant `InfoBanner`. The canonical\n * replacement may simply extend `InfoBanner` with semantic variants.\n *\n * @deprecated Migration-aid only. Replace with canonical version when available.\n */\nexport const Banner = ({\n  action,\n  children,\n  className,\n  dismissible = false,\n  onDismiss,\n  variant = 'info',\n}: BannerProps) => {\n  const [dismissed, setDismissed] = useState(false);\n\n  const handleDismiss = () => {\n    setDismissed(true);\n    onDismiss?.();\n  };\n\n  if (dismissed) return null;\n\n  const styles = variantStyles[variant];\n  const icon = variantIcons[variant];\n\n  return (\n    <output\n      className={cn(\n        'flex items-center gap-2.5 rounded-lg border px-3 py-2 text-sm',\n        styles.bg,\n        styles.text,\n        className,\n      )}\n    >\n      <span className={cn('shrink-0', styles.iconColor)}>\n        <HugeiconsIcon icon={icon} size={16} />\n      </span>\n      <div className='flex-1 min-w-0 text-pretty font-medium'>{children}</div>\n      {action && (\n        <button\n          type='button'\n          onClick={action.onClick}\n          className={cn(\n            'shrink-0 px-2 py-1 rounded-md text-xs font-medium cursor-pointer touch-manipulation',\n            'hover:bg-overlay-hover transition-colors',\n            styles.text,\n          )}\n        >\n          {action.text}\n        </button>\n      )}\n      {dismissible && (\n        <button\n          type='button'\n          onClick={handleDismiss}\n          aria-label='Dismiss'\n          className={cn(\n            'shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 cursor-pointer transition-opacity',\n            styles.text,\n          )}\n        >\n          <HugeiconsIcon icon={Cancel01Icon} size={14} />\n        </button>\n      )}\n    </output>\n  );\n};\n","/**\n * MIGRATION-AID — temporary composite added to unblock the redcoast\n * Northstar→droplet dashboard migration. NOT canonical. Will be replaced\n * by the design team's finalized version. Do not adopt for new droplet\n * projects; use the canonical droplet primitives directly instead.\n *\n * Tracking: https://github.com/dynamic-labs/redcoast/blob/main/MIGRATION-PLAN.md\n */\nimport { type ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\ntype SectionItem = {\n  badge?: ReactNode;\n  children: ReactNode;\n  description?: string;\n  id: string;\n  title: ReactNode;\n};\n\nexport type DoubleSectionProps = {\n  className?: string;\n  sections: [SectionItem, SectionItem];\n};\n\n/**\n * Two `SettingsSection`-like blocks side by side with a divider between them.\n * Common use case: \"Live mode | Sandbox mode\" pairs.\n *\n * @deprecated Migration-aid only. Replace with canonical version when available.\n */\nexport const DoubleSection = ({ className, sections }: DoubleSectionProps) => (\n  <section\n    className={cn(\n      'rounded-xl border border-border bg-card shadow-[var(--shadow-card)] overflow-hidden',\n      'grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-border-divider',\n      className,\n    )}\n  >\n    {sections.map((section) => (\n      <div key={section.id} className='p-6 space-y-4'>\n        <div>\n          <div className='flex items-center gap-2'>\n            <h3 className='text-sm font-semibold text-balance'>{section.title}</h3>\n            {section.badge}\n          </div>\n          {section.description && (\n            <p className='text-sm text-muted-foreground mt-1 text-pretty'>\n              {section.description}\n            </p>\n          )}\n        </div>\n        <div className='space-y-3'>{section.children}</div>\n      </div>\n    ))}\n  </section>\n);\n","/**\n * MIGRATION-AID — temporary composite added to unblock the redcoast\n * Northstar→droplet dashboard migration. NOT canonical. Will be replaced\n * by the design team's finalized version. Do not adopt for new droplet\n * projects; use the canonical droplet primitives directly instead.\n *\n * Tracking: https://github.com/dynamic-labs/redcoast/blob/main/MIGRATION-PLAN.md\n */\n'use client';\n\nimport { type ComponentProps, type ReactNode, useId } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { Input } from '../../ui/input';\nimport { Label } from '../../ui/label';\n\nexport type FieldProps = Omit<ComponentProps<'input'>, 'children'> & {\n  className?: string;\n  error?: string;\n  helper?: ReactNode;\n  label: string;\n  required?: boolean;\n};\n\n/**\n * `Label` + `Input` + helper/error composite. Wires up `htmlFor`,\n * `aria-describedby`, and `aria-invalid` so call sites don't repeat the layout.\n *\n * The canonical version may differ in form-validation integration (RHF,\n * formik, native form, etc.) — keep this composite focused on layout only.\n *\n * @deprecated Migration-aid only. Replace with canonical version when available.\n */\nexport const Field = ({\n  className,\n  error,\n  helper,\n  label,\n  required,\n  id: idProp,\n  ...inputProps\n}: FieldProps) => {\n  const reactId = useId();\n  const id = idProp || reactId;\n  const helperId = `${id}-helper`;\n  const errorId = `${id}-error`;\n\n  const showHelper = Boolean(helper) && !error;\n  const showError = Boolean(error);\n\n  let describedBy: string | undefined;\n  if (showError) {\n    describedBy = errorId;\n  } else if (showHelper) {\n    describedBy = helperId;\n  }\n\n  return (\n    <div className={cn('space-y-2', className)}>\n      <Label htmlFor={id}>\n        {label}\n        {required && (\n          <span className='text-text-danger' aria-hidden>\n            *\n          </span>\n        )}\n      </Label>\n      <Input\n        id={id}\n        aria-describedby={describedBy}\n        aria-invalid={error ? true : undefined}\n        required={required}\n        {...inputProps}\n      />\n      {showHelper ? (\n        <p id={helperId} className='text-xs text-muted-foreground'>\n          {helper}\n        </p>\n      ) : null}\n      {showError ? (\n        <p id={errorId} role='alert' className='text-xs text-text-danger'>\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n};\n","/**\n * MIGRATION-AID — temporary composite added to unblock the redcoast\n * Northstar→droplet dashboard migration. NOT canonical. Will be replaced\n * by the design team's finalized version. Do not adopt for new droplet\n * projects; use the canonical droplet `SettingsSection` directly instead.\n *\n * This is the redcoast-flavored variant of `SettingsSection` extended with\n *   - `helpLink` (deep-link to docs)\n *   - `alert` (inline alert slot in the header)\n *   - `layout='split'` (opt-in 2-column variant matching Northstar's layout)\n *\n * The canonical `SettingsSection` at `../../settings-section` remains untouched\n * so its consumers don't pick up Northstar-flavored API.\n *\n * Tracking: https://github.com/dynamic-labs/redcoast/blob/main/MIGRATION-PLAN.md\n */\nimport { type ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\nexport type SettingsSectionV2Props = {\n  alert?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  description?: string;\n  helpLink?: { text: string; url: string };\n  layout?: 'stacked' | 'split';\n  title: string;\n  variant?: 'default' | 'danger';\n};\n\n/**\n * Card-shaped settings section with a header (title + optional description +\n * optional helpLink + optional alert) and a content area.\n *\n * `layout='split'` renders header on the left and content on the right (1fr\n * 2fr grid on `md+`). Default `'stacked'` matches the canonical\n * `SettingsSection`.\n *\n * `variant='danger'` tints the title red and adds a red border.\n *\n * @deprecated Migration-aid only. Replace with canonical `SettingsSection` once\n *   the design team's finalized version supports `helpLink` / `alert` / split layout.\n */\nexport const SettingsSectionV2 = ({\n  alert,\n  children,\n  className,\n  description,\n  helpLink,\n  layout = 'stacked',\n  title,\n  variant = 'default',\n}: SettingsSectionV2Props) => {\n  const headerBlock = (\n    <div>\n      <h3\n        className={cn(\n          'text-sm font-semibold text-balance',\n          variant === 'danger' && 'text-text-danger',\n        )}\n      >\n        {title}\n      </h3>\n      {description && (\n        <p className='text-sm text-muted-foreground mt-1 text-pretty'>\n          {description}\n        </p>\n      )}\n      {helpLink && (\n        <a\n          href={helpLink.url}\n          target='_blank'\n          rel='noreferrer'\n          className='inline-block text-sm font-medium text-text-link mt-2 hover:underline'\n        >\n          {helpLink.text} →\n        </a>\n      )}\n      {alert && <div className='mt-3'>{alert}</div>}\n    </div>\n  );\n\n  if (layout === 'split') {\n    return (\n      <section\n        className={cn(\n          'rounded-xl border border-border bg-card p-6 shadow-[var(--shadow-card)]',\n          'grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-6',\n          variant === 'danger' && 'border-border-danger/30',\n          className,\n        )}\n      >\n        {headerBlock}\n        <div className='space-y-4'>{children}</div>\n      </section>\n    );\n  }\n\n  return (\n    <section\n      className={cn(\n        'rounded-xl border border-border bg-card p-6 shadow-[var(--shadow-card)]',\n        variant === 'danger' && 'border-border-danger/30',\n        className,\n      )}\n    >\n      <div className='mb-4'>{headerBlock}</div>\n      <div className='space-y-4'>{children}</div>\n    </section>\n  );\n};\n","/**\n * MIGRATION-AID — temporary composite added to unblock the redcoast\n * Northstar→droplet dashboard migration. NOT canonical. Will be replaced\n * by the design team's finalized version. Do not adopt for new droplet\n * projects; use the canonical droplet primitives directly instead.\n *\n * Tracking: https://github.com/dynamic-labs/redcoast/blob/main/MIGRATION-PLAN.md\n */\nimport { type ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\nexport type SubSectionProps = {\n  children: ReactNode;\n  className?: string;\n  description?: string;\n  title: string;\n  variant?: 'plain' | 'boxed';\n};\n\n/**\n * Heading + content stack, used inside an outer SettingsSection to group\n * sub-fields. Two variants:\n *   - 'plain' (default): unboxed.\n *   - 'boxed': thin-bordered card-within-a-card.\n *\n * @deprecated Migration-aid only. Replace with canonical version when available.\n */\nexport const SubSection = ({\n  children,\n  className,\n  description,\n  title,\n  variant = 'plain',\n}: SubSectionProps) => {\n  if (variant === 'boxed') {\n    return (\n      <div\n        className={cn(\n          'rounded-lg border border-border-divider bg-bg-bottom p-4',\n          className,\n        )}\n      >\n        <div className='mb-3'>\n          <h4 className='text-sm font-medium text-foreground'>{title}</h4>\n          {description && (\n            <p className='text-xs text-muted-foreground mt-0.5 text-pretty'>\n              {description}\n            </p>\n          )}\n        </div>\n        <div className='space-y-3'>{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('space-y-3', className)}>\n      <div>\n        <h4 className='text-sm font-medium text-foreground'>{title}</h4>\n        {description && (\n          <p className='text-xs text-muted-foreground mt-0.5 text-pretty'>\n            {description}\n          </p>\n        )}\n      </div>\n      <div className='space-y-3'>{children}</div>\n    </div>\n  );\n};\n","/**\n * MIGRATION-AID — temporary composite added to unblock the redcoast\n * Northstar→droplet dashboard migration. NOT canonical. Will be replaced\n * by the design team's finalized version. Do not adopt for new droplet\n * projects; use the canonical droplet primitives directly instead.\n *\n * Tracking: https://github.com/dynamic-labs/redcoast/blob/main/MIGRATION-PLAN.md\n */\n'use client';\n\nimport { type ReactNode } from 'react';\n\nimport { ToggleRow, type ToggleRowProps } from '../../toggle-row';\nimport { cn } from '../../../lib/utils';\n\nexport type ToggleGroupProps = {\n  children?: ReactNode;\n  className?: string;\n  /**\n   * All ToggleRow props for the master row. `children` of master is ignored —\n   * pass nested rows via `children` of ToggleGroup.\n   */\n  master: Omit<ToggleRowProps, 'children'>;\n};\n\n/**\n * Master `ToggleRow` on top, with a vertically-indented stack of nested\n * sub-toggles underneath. Sub-toggles auto-hide when the master is off.\n *\n * Used for \"social login → which providers\" and similar grouped-toggle\n * patterns ported from redcoast.\n *\n * @deprecated Migration-aid only. Replace with canonical version when available.\n */\nexport const ToggleGroup = ({ children, className, master }: ToggleGroupProps) => {\n  const showChildren = master.checked && Boolean(children);\n\n  return (\n    <div className={cn('space-y-3', className)}>\n      <ToggleRow {...master} />\n      {showChildren ? (\n        <div className='ml-[42px] pl-4 border-l border-border-divider space-y-3'>\n          {children}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":"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"}