@dynamic-labs-sdk/droplet 0.0.0 → 0.27.2

package/dist/toggle-row-7lfPUutt.cjs

@@ -0,0 +1,320 @@
+const require_index = require('./index.cjs');
+let clsx = require("clsx");
+let tailwind_merge = require("tailwind-merge");
+let react = require("react");
+let motion_react = require("motion/react");
+let _hugeicons_react = require("@hugeicons/react");
+let _hugeicons_core_free_icons = require("@hugeicons/core-free-icons");
+let class_variance_authority = require("class-variance-authority");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _paper_design_shaders_react = require("@paper-design/shaders-react");
+let _radix_ui_react_label = require("@radix-ui/react-label");
+let _radix_ui_react_switch = require("@radix-ui/react-switch");
+
+//#region src/lib/utils.ts
+const cn = (...inputs) => (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+
+//#endregion
+//#region src/components/ui/button/button.tsx
+const buttonVariants = (0, class_variance_authority.cva)("relative isolate inline-flex items-center justify-center gap-1.5 whitespace-nowrap select-none text-[13px] font-medium leading-[calc(18/13)] touch-manipulation transition-[background-color,color,opacity,box-shadow,transform,filter,scale] duration-150 ease active:scale-[0.96] cursor-pointer border-0 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", {
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: "rounded-md px-3 py-1.5 h-8 has-[>svg]:px-2.5 [&_svg:not([class*='size-'])]:size-3.5",
+			"icon": "size-9 rounded-md",
+			"icon-sm": "size-7 rounded-md [&_svg:not([class*='size-'])]:size-3.5 relative before:absolute before:-inset-[6px] before:content-['']",
+			"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3 relative before:absolute before:-inset-[9px] before:content-['']",
+			lg: "rounded-md px-5 py-2.5 h-10 has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4",
+			sm: "rounded-md px-2.5 py-1 h-7 has-[>svg]:px-2 [&_svg:not([class*='size-'])]:size-3 before:absolute before:-inset-y-[6px] before:inset-x-0 before:content-['']",
+			xs: "rounded-md px-3 py-1 h-7 [&_svg:not([class*='size-'])]:size-3"
+		},
+		variant: {
+			default: "bg-(--action) text-white shadow-[0_0_0_1px_var(--action),var(--shadow-button)] hover:brightness-105 [text-shadow:0_1px_1px_rgba(0,0,0,0.16)]",
+			destructive: "bg-destructive text-white shadow-[0_0_0_1px_var(--destructive),var(--shadow-button)] hover:brightness-105 [text-shadow:0_1px_1px_rgba(0,0,0,0.16)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+			ghost: "text-muted-foreground hover:bg-[#f8f8f9] hover:text-foreground dark:hover:bg-white/[0.06]",
+			link: "text-(--action) underline-offset-4 hover:underline",
+			outline: "bg-white shadow-[var(--shadow-input)] hover:bg-[#f8f8f9] hover:shadow-[var(--shadow-input-hover)] dark:bg-input/30 dark:hover:bg-white/[0.06]",
+			secondary: "bg-white shadow-[var(--shadow-secondary)] hover:bg-[#f8f8f9] hover:shadow-[var(--shadow-secondary-hover)] dark:bg-input/30 dark:hover:bg-white/[0.06]"
+		}
+	}
+});
+const Button = ({ className, variant = "default", size = "default", asChild = false, ...props }) => {
+	if (asChild) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slot, {
+		"data-slot": "button",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			className,
+			size,
+			variant
+		})),
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"data-slot": "button",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			className,
+			size,
+			variant
+		})),
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/ui/input/input.tsx
+const shaderDefaults = {
+	bloom: 0,
+	colors: [
+		"#BDDCFF",
+		"#57A7FF",
+		"#DEEAFC"
+	],
+	inset: 1,
+	intensity: 0,
+	pulse: .3,
+	roundness: .6,
+	scale: 1,
+	smoke: .75,
+	smokeSize: .7,
+	softness: .6,
+	speed: 2.2,
+	spots: 8,
+	spotSize: .75,
+	thickness: .04
+};
+const spring = {
+	bounce: 0,
+	duration: .35,
+	type: "spring"
+};
+const Input = (0, react.forwardRef)(({ className, type, shaderBorder, style, ...props }, ref) => {
+	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const inputClassName = cn("file:text-foreground placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 h-8 w-full min-w-0 touch-manipulation rounded-md border-0 bg-background px-3 py-1 text-base shadow-[var(--shadow-input)] transition-[color,box-shadow] duration-100 ease-out outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "hover:shadow-[var(--shadow-input-hover)]", "focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_rgba(0,114,239,0.15)]", "aria-invalid:shadow-[0_0_0_1px_var(--destructive),0_0_1px_0_var(--destructive)] dark:aria-invalid:shadow-[0_0_0_1px_var(--destructive)]", className);
+	const isActive = !!shaderBorder;
+	const config = typeof shaderBorder === "object" ? {
+		...shaderDefaults,
+		...shaderBorder
+	} : shaderDefaults;
+	const inset = config.inset;
+	if (shaderBorder !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
+			initial: false,
+			children: isActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.motion.div, {
+				initial: prefersReducedMotion ? false : { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: prefersReducedMotion ? { duration: 0 } : spring,
+				className: "absolute pointer-events-none z-20",
+				style: {
+					borderRadius: `${8 + inset}px`,
+					inset: `-${inset}px`,
+					willChange: "opacity"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_paper_design_shaders_react.PulsingBorder, {
+					colorBack: "#00000000",
+					colors: config.colors,
+					speed: config.speed,
+					scale: config.scale,
+					roundness: config.roundness,
+					thickness: config.thickness,
+					softness: config.softness,
+					intensity: config.intensity,
+					bloom: config.bloom,
+					spots: config.spots,
+					spotSize: config.spotSize,
+					pulse: config.pulse,
+					smoke: config.smoke,
+					smokeSize: config.smokeSize,
+					webGlContextAttributes: {
+						alpha: true,
+						premultipliedAlpha: true
+					},
+					className: "size-full",
+					style: { borderRadius: `${8 + inset}px` }
+				})
+			}, "shader-border")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref,
+			type,
+			"data-slot": "input",
+			className: cn(inputClassName, isActive && "animate-shimmer motion-reduce:animate-none"),
+			style: isActive ? {
+				backgroundClip: "text",
+				backgroundImage: `linear-gradient(to right, color-mix(in srgb, ${config.colors[0]} 70%, #000), color-mix(in srgb, ${config.colors[1] || config.colors[0]} 70%, #000), color-mix(in srgb, ${config.colors[2] || config.colors[0]} 70%, #000), color-mix(in srgb, ${config.colors[0]} 70%, #000))`,
+				backgroundSize: "200% 100%",
+				boxShadow: "none",
+				color: "transparent",
+				WebkitBackgroundClip: "text",
+				...style
+			} : style,
+			...props
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref,
+		type,
+		"data-slot": "input",
+		className: inputClassName,
+		style,
+		...props
+	});
+});
+Input.displayName = "Input";
+
+//#endregion
+//#region src/components/ui/label/label.tsx
+const labelVariants = (0, class_variance_authority.cva)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_label.Root, {
+	ref,
+	className: cn(labelVariants(), className),
+	...props
+}));
+Label.displayName = _radix_ui_react_label.Root.displayName;
+
+//#endregion
+//#region src/components/ui/switch/switch.tsx
+const Switch = (0, react.forwardRef)(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_switch.Root, {
+	ref,
+	"data-slot": "switch",
+	"data-size": size,
+	className: cn("peer data-[state=checked]:bg-(--action) data-[state=unchecked]:bg-input hover:data-[state=unchecked]:bg-[rgba(31,41,55,0.14)] group-hover/toggle:data-[state=unchecked]:bg-[rgba(31,41,55,0.14)] focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 dark:hover:data-[state=unchecked]:bg-[rgba(255,255,255,0.12)] dark:group-hover/toggle:data-[state=unchecked]:bg-[rgba(255,255,255,0.12)] relative group/switch inline-flex shrink-0 touch-manipulation items-center rounded-full border-0 shadow-[0_0_0_1px_rgba(31,41,55,0.20),0_1px_2px_0_rgba(0,0,0,0.06),0_0_1px_0_rgba(0,0,0,0.02)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.15),0_1px_2px_0_rgba(0,0,0,0.20),0_0_1px_0_rgba(0,0,0,0.06)] data-[state=checked]:shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_rgba(255,255,255,0.15)_inset,0px_2px_3px_0px_rgba(31,41,55,0.30),0px_1px_1px_0px_rgba(0,0,0,0.28)] dark:data-[state=checked]:shadow-[0px_1px_1px_0px_rgba(255,255,255,0.10)_inset,0px_2px_3px_0px_rgba(0,0,0,0.50),0px_1px_1px_0px_rgba(0,0,0,0.30)] transition-[color,background-color,box-shadow] duration-200 ease outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer data-[size=default]:h-[18px] data-[size=default]:w-[30px] data-[size=sm]:h-3.5 data-[size=sm]:w-[22px] before:absolute before:-inset-[13px] before:content-['']", className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_switch.Thumb, {
+		"data-slot": "switch-thumb",
+		className: cn("bg-background dark:data-[state=checked]:bg-white dark:data-[state=unchecked]:bg-[oklch(0.500_0.013_253)] pointer-events-none block rounded-full shadow-[0_2px_2px_-1px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.06),0_4px_4px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_2px_2px_-1px_rgba(0,0,0,0.20),0_0_0_1px_rgba(0,0,0,0.15),0_4px_4px_-2px_rgba(0,0,0,0.15)] ring-0 transition-[transform,background-color] duration-150 ease group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-[state=unchecked]:translate-x-0.5 group-data-[size=default]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[10px]")
+	})
+}));
+Switch.displayName = "Switch";
+
+//#endregion
+//#region src/components/toggle-row/toggle-row.tsx
+const ToggleRow = ({ label, description, checked, onCheckedChange, disabled = false, switchPosition = "left", icon, badge, onSettings, children, className }) => {
+	const switchId = (0, react.useId)();
+	const descId = (0, react.useId)();
+	const cursorClass = disabled ? "cursor-not-allowed" : "cursor-pointer";
+	if (switchPosition === "left") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn("flex items-start gap-2.5 touch-manipulation group/toggle"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Switch, {
+					id: switchId,
+					"aria-describedby": description ? descId : void 0,
+					checked,
+					onCheckedChange,
+					disabled,
+					className: "mt-0.5"
+				}),
+				icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					htmlFor: switchId,
+					className: cn("text-muted-foreground shrink-0 self-start", cursorClass),
+					children: icon
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex-1 min-w-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+							htmlFor: switchId,
+							className: cn("font-medium select-none", disabled && "text-muted-foreground", cursorClass),
+							children: label
+						}), badge]
+					}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						htmlFor: switchId,
+						id: descId,
+						className: cn("block text-sm font-normal text-muted-foreground mt-1 text-pretty select-none", cursorClass),
+						children: description
+					})]
+				})
+			]
+		}), children]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("space-y-3", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-between gap-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: switchId,
+				className: cn("text-sm font-medium select-none", cursorClass),
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 shrink-0",
+				children: [onSettings && checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: onSettings,
+					className: "text-muted-foreground hover:text-foreground",
+					"aria-label": "Configure",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+						icon: _hugeicons_core_free_icons.Setting07Icon,
+						size: 14
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Switch, {
+					id: switchId,
+					"aria-describedby": description ? descId : void 0,
+					checked,
+					onCheckedChange,
+					disabled
+				})]
+			})]
+		}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			htmlFor: switchId,
+			id: descId,
+			className: cn("block text-sm font-normal text-muted-foreground mt-0.5 text-pretty select-none", cursorClass),
+			children: description
+		})] }), checked && children && children]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'Button', {
+  enumerable: true,
+  get: function () {
+    return Button;
+  }
+});
+Object.defineProperty(exports, 'Input', {
+  enumerable: true,
+  get: function () {
+    return Input;
+  }
+});
+Object.defineProperty(exports, 'Label', {
+  enumerable: true,
+  get: function () {
+    return Label;
+  }
+});
+Object.defineProperty(exports, 'Switch', {
+  enumerable: true,
+  get: function () {
+    return Switch;
+  }
+});
+Object.defineProperty(exports, 'ToggleRow', {
+  enumerable: true,
+  get: function () {
+    return ToggleRow;
+  }
+});
+Object.defineProperty(exports, 'buttonVariants', {
+  enumerable: true,
+  get: function () {
+    return buttonVariants;
+  }
+});
+Object.defineProperty(exports, 'cn', {
+  enumerable: true,
+  get: function () {
+    return cn;
+  }
+});
+//# sourceMappingURL=toggle-row-7lfPUutt.cjs.map

package/dist/toggle-row-7lfPUutt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-row-7lfPUutt.cjs","names":["Slot","shaderDefaults: Required<ShaderBorderConfig>","AnimatePresence","motion","PulsingBorder","Root","Root","Thumb","HugeiconsIcon","Setting07Icon"],"sources":["../src/lib/utils.ts","../src/components/ui/button/button.tsx","../src/components/ui/input/input.tsx","../src/components/ui/label/label.tsx","../src/components/ui/switch/switch.tsx","../src/components/toggle-row/toggle-row.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\n","import { type ComponentProps } from 'react';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../../lib/utils';\n\nconst buttonVariants = cva(\n  \"relative isolate inline-flex items-center justify-center gap-1.5 whitespace-nowrap select-none text-[13px] font-medium leading-[calc(18/13)] touch-manipulation transition-[background-color,color,opacity,box-shadow,transform,filter,scale] duration-150 ease active:scale-[0.96] cursor-pointer border-0 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n  {\n    defaultVariants: {\n      size: 'default',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: \"rounded-md px-3 py-1.5 h-8 has-[>svg]:px-2.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"icon\": 'size-9 rounded-md',\n        \"icon-sm\": \"size-7 rounded-md [&_svg:not([class*='size-'])]:size-3.5 relative before:absolute before:-inset-[6px] before:content-['']\",\n        \"icon-xs\": \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3 relative before:absolute before:-inset-[9px] before:content-['']\",\n        lg: \"rounded-md px-5 py-2.5 h-10 has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4\",\n        sm: \"rounded-md px-2.5 py-1 h-7 has-[>svg]:px-2 [&_svg:not([class*='size-'])]:size-3 before:absolute before:-inset-y-[6px] before:inset-x-0 before:content-['']\",\n        xs: \"rounded-md px-3 py-1 h-7 [&_svg:not([class*='size-'])]:size-3\",\n      },\n      variant: {\n        default:\n          'bg-(--action) text-white shadow-[0_0_0_1px_var(--action),var(--shadow-button)] hover:brightness-105 [text-shadow:0_1px_1px_rgba(0,0,0,0.16)]',\n        destructive:\n          'bg-destructive text-white shadow-[0_0_0_1px_var(--destructive),var(--shadow-button)] hover:brightness-105 [text-shadow:0_1px_1px_rgba(0,0,0,0.16)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',\n        ghost:\n          'text-muted-foreground hover:bg-[#f8f8f9] hover:text-foreground dark:hover:bg-white/[0.06]',\n        link: 'text-(--action) underline-offset-4 hover:underline',\n        outline:\n          'bg-white shadow-[var(--shadow-input)] hover:bg-[#f8f8f9] hover:shadow-[var(--shadow-input-hover)] dark:bg-input/30 dark:hover:bg-white/[0.06]',\n        secondary:\n          'bg-white shadow-[var(--shadow-secondary)] hover:bg-[#f8f8f9] hover:shadow-[var(--shadow-secondary-hover)] dark:bg-input/30 dark:hover:bg-white/[0.06]',\n      },\n    },\n  },\n);\n\nconst Button = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  asChild = false,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) => {\n  if (asChild) {\n    return (\n      <Slot\n        data-slot='button'\n        data-size={size}\n        data-variant={variant}\n        className={cn(buttonVariants({ className, size, variant }))}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <button\n      data-slot='button'\n      data-size={size}\n      data-variant={variant}\n      className={cn(buttonVariants({ className, size, variant }))}\n      {...props}\n    />\n  );\n};\n\nexport { Button, buttonVariants };\n","'use client';\n\nimport type { ComponentProps } from 'react';\nimport { forwardRef } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { PulsingBorder } from '@paper-design/shaders-react';\n\nimport { cn } from '../../../lib/utils';\n\ntype ShaderBorderConfig = {\n  bloom?: number;\n  colors?: string[];\n  inset?: number;\n  intensity?: number;\n  pulse?: number;\n  roundness?: number;\n  scale?: number;\n  smoke?: number;\n  smokeSize?: number;\n  softness?: number;\n  speed?: number;\n  spotSize?: number;\n  spots?: number;\n  thickness?: number;\n};\n\nconst shaderDefaults: Required<ShaderBorderConfig> = {\n  bloom: 0,\n  colors: ['#BDDCFF', '#57A7FF', '#DEEAFC'],\n  inset: 1,\n  intensity: 0,\n  pulse: 0.3,\n  roundness: 0.6,\n  scale: 1,\n  smoke: 0.75,\n  smokeSize: 0.7,\n  softness: 0.6,\n  speed: 2.2,\n  spots: 8,\n  spotSize: 0.75,\n  thickness: 0.04,\n};\n\nconst spring = { bounce: 0, duration: 0.35, type: 'spring' as const };\n\ntype InputProps = ComponentProps<'input'> & {\n  shaderBorder?: boolean | ShaderBorderConfig;\n};\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, shaderBorder, style, ...props }, ref) => {\n    const prefersReducedMotion = useReducedMotion();\n    const inputClassName = cn(\n      'file:text-foreground placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 h-8 w-full min-w-0 touch-manipulation rounded-md border-0 bg-background px-3 py-1 text-base shadow-[var(--shadow-input)] transition-[color,box-shadow] duration-100 ease-out outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n      'hover:shadow-[var(--shadow-input-hover)]',\n      'focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_rgba(0,114,239,0.15)]',\n      'aria-invalid:shadow-[0_0_0_1px_var(--destructive),0_0_1px_0_var(--destructive)] dark:aria-invalid:shadow-[0_0_0_1px_var(--destructive)]',\n      className,\n    );\n\n    const isActive = !!shaderBorder;\n    const config =\n      typeof shaderBorder === 'object'\n        ? { ...shaderDefaults, ...shaderBorder }\n        : shaderDefaults;\n    const inset = config.inset;\n\n    if (shaderBorder !== undefined) {\n      return (\n        <div className='relative'>\n          <AnimatePresence initial={false}>\n            {isActive && (\n              <motion.div\n                key='shader-border'\n                initial={prefersReducedMotion ? false : { opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={prefersReducedMotion ? { duration: 0 } : spring}\n                className='absolute pointer-events-none z-20'\n                style={{\n                  borderRadius: `${8 + inset}px`,\n                  inset: `-${inset}px`,\n                  willChange: 'opacity',\n                }}\n              >\n                <PulsingBorder\n                  colorBack='#00000000'\n                  colors={config.colors}\n                  speed={config.speed}\n                  scale={config.scale}\n                  roundness={config.roundness}\n                  thickness={config.thickness}\n                  softness={config.softness}\n                  intensity={config.intensity}\n                  bloom={config.bloom}\n                  spots={config.spots}\n                  spotSize={config.spotSize}\n                  pulse={config.pulse}\n                  smoke={config.smoke}\n                  smokeSize={config.smokeSize}\n                  webGlContextAttributes={{\n                    alpha: true,\n                    premultipliedAlpha: true,\n                  }}\n                  className='size-full'\n                  style={{ borderRadius: `${8 + inset}px` }}\n                />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <input\n            ref={ref}\n            type={type}\n            data-slot='input'\n            className={cn(\n              inputClassName,\n              isActive && 'animate-shimmer motion-reduce:animate-none',\n            )}\n            style={\n              isActive\n                ? {\n                    backgroundClip: 'text',\n                    backgroundImage: `linear-gradient(to right, color-mix(in srgb, ${config.colors[0]} 70%, #000), color-mix(in srgb, ${config.colors[1] || config.colors[0]} 70%, #000), color-mix(in srgb, ${config.colors[2] || config.colors[0]} 70%, #000), color-mix(in srgb, ${config.colors[0]} 70%, #000))`,\n                    backgroundSize: '200% 100%',\n                    boxShadow: 'none',\n                    color: 'transparent',\n                    WebkitBackgroundClip: 'text',\n                    ...style,\n                  }\n                : style\n            }\n            {...props}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-slot='input'\n        className={inputClassName}\n        style={style}\n        {...props}\n      />\n    );\n  },\n);\nInput.displayName = 'Input';\n\nexport { Input };\nexport type { ShaderBorderConfig };\n","'use client';\n\nimport type { ComponentPropsWithoutRef, ComponentRef} from 'react';\nimport { forwardRef } from 'react';\nimport { Root } from '@radix-ui/react-label';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { cn } from '../../../lib/utils';\n\nconst labelVariants = cva(\n  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n);\n\nconst Label = forwardRef<\n  ComponentRef<typeof Root>,\n  ComponentPropsWithoutRef<typeof Root> & VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n));\nLabel.displayName = Root.displayName;\n\nexport { Label };\n","'use client';\n\nimport type { ComponentPropsWithoutRef, ComponentRef } from 'react';\nimport { forwardRef } from 'react';\nimport { Root, Thumb } from '@radix-ui/react-switch';\n\nimport { cn } from '../../../lib/utils';\n\nconst Switch = forwardRef<\n  ComponentRef<typeof Root>,\n  ComponentPropsWithoutRef<typeof Root> & {\n    size?: 'sm' | 'default';\n  }\n>(({ className, size = 'default', ...props }, ref) => (\n  <Root\n    ref={ref}\n    data-slot='switch'\n    data-size={size}\n    className={cn(\n      \"peer data-[state=checked]:bg-(--action) data-[state=unchecked]:bg-input hover:data-[state=unchecked]:bg-[rgba(31,41,55,0.14)] group-hover/toggle:data-[state=unchecked]:bg-[rgba(31,41,55,0.14)] focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 dark:hover:data-[state=unchecked]:bg-[rgba(255,255,255,0.12)] dark:group-hover/toggle:data-[state=unchecked]:bg-[rgba(255,255,255,0.12)] relative group/switch inline-flex shrink-0 touch-manipulation items-center rounded-full border-0 shadow-[0_0_0_1px_rgba(31,41,55,0.20),0_1px_2px_0_rgba(0,0,0,0.06),0_0_1px_0_rgba(0,0,0,0.02)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.15),0_1px_2px_0_rgba(0,0,0,0.20),0_0_1px_0_rgba(0,0,0,0.06)] data-[state=checked]:shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_rgba(255,255,255,0.15)_inset,0px_2px_3px_0px_rgba(31,41,55,0.30),0px_1px_1px_0px_rgba(0,0,0,0.28)] dark:data-[state=checked]:shadow-[0px_1px_1px_0px_rgba(255,255,255,0.10)_inset,0px_2px_3px_0px_rgba(0,0,0,0.50),0px_1px_1px_0px_rgba(0,0,0,0.30)] transition-[color,background-color,box-shadow] duration-200 ease outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer data-[size=default]:h-[18px] data-[size=default]:w-[30px] data-[size=sm]:h-3.5 data-[size=sm]:w-[22px] before:absolute before:-inset-[13px] before:content-['']\",\n      className,\n    )}\n    {...props}\n  >\n    <Thumb\n      data-slot='switch-thumb'\n      className={cn(\n        \"bg-background dark:data-[state=checked]:bg-white dark:data-[state=unchecked]:bg-[oklch(0.500_0.013_253)] pointer-events-none block rounded-full shadow-[0_2px_2px_-1px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.06),0_4px_4px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_2px_2px_-1px_rgba(0,0,0,0.20),0_0_0_1px_rgba(0,0,0,0.15),0_4px_4px_-2px_rgba(0,0,0,0.15)] ring-0 transition-[transform,background-color] duration-150 ease group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-[state=unchecked]:translate-x-0.5 group-data-[size=default]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[10px]\",\n      )}\n    />\n  </Root>\n));\nSwitch.displayName = 'Switch';\n\nexport { Switch };\n","'use client'\n\nimport { type ReactNode, useId } from 'react'\nimport { HugeiconsIcon } from '@hugeicons/react'\nimport { Setting07Icon } from '@hugeicons/core-free-icons'\n\nimport { Switch } from '../ui/switch'\nimport { Button } from '../ui/button'\nimport { cn } from '../../lib/utils'\n\nexport interface ToggleRowProps {\n  badge?: ReactNode,\n  checked: boolean,\n  children?: ReactNode,\n  className?: string,\n  description?: string,\n  disabled?: boolean,\n  icon?: ReactNode\n  label: string,\n  onCheckedChange: (checked: boolean) => void,\n  onSettings?: () => void,\n  switchPosition?: 'left' | 'right'\n}\n\nexport const ToggleRow = ({\n  label,\n  description,\n  checked,\n  onCheckedChange,\n  disabled = false,\n  switchPosition = 'left',\n  icon,\n  badge,\n  onSettings,\n  children,\n  className,\n}: ToggleRowProps) => {\n  const switchId = useId()\n  const descId = useId()\n\n  const cursorClass = disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n\n  if (switchPosition === 'left') {\n    return (\n      <div className={className}>\n        <div className={cn('flex items-start gap-2.5 touch-manipulation group/toggle')}>\n          <Switch\n            id={switchId}\n            aria-describedby={description ? descId : undefined}\n            checked={checked}\n            onCheckedChange={onCheckedChange}\n            disabled={disabled}\n            className='mt-0.5'\n          />\n          {icon && (\n            <label\n              htmlFor={switchId}\n              className={cn('text-muted-foreground shrink-0 self-start', cursorClass)}\n            >\n              {icon}\n            </label>\n          )}\n          <div className='flex-1 min-w-0'>\n            <div className='flex items-center gap-2'>\n              <label\n                htmlFor={switchId}\n                className={cn(\n                  'font-medium select-none',\n                  disabled && 'text-muted-foreground',\n                  cursorClass\n                )}\n              >\n                {label}\n              </label>\n              {badge}\n            </div>\n            {description && (\n              <label\n                htmlFor={switchId}\n                id={descId}\n                className={cn(\n                  'block text-sm font-normal text-muted-foreground mt-1 text-pretty select-none',\n                  cursorClass\n                )}\n              >\n                {description}\n              </label>\n            )}\n          </div>\n        </div>\n        {children}\n      </div>\n    )\n  }\n\n  // switchPosition === \"right\"\n  return (\n    <div className={cn('space-y-3', className)}>\n      <div>\n        <div className='flex items-center justify-between gap-4'>\n          <label\n            htmlFor={switchId}\n            className={cn('text-sm font-medium select-none', cursorClass)}\n          >\n            {label}\n          </label>\n          <div className='flex items-center gap-2 shrink-0'>\n            {onSettings && checked && (\n              <Button\n                variant='ghost'\n                size='icon-xs'\n                onClick={onSettings}\n                className='text-muted-foreground hover:text-foreground'\n                aria-label='Configure'\n              >\n                <HugeiconsIcon icon={Setting07Icon} size={14} />\n              </Button>\n            )}\n            <Switch\n              id={switchId}\n              aria-describedby={description ? descId : undefined}\n              checked={checked}\n              onCheckedChange={onCheckedChange}\n              disabled={disabled}\n            />\n          </div>\n        </div>\n        {description && (\n          <label\n            htmlFor={switchId}\n            id={descId}\n            className={cn(\n              'block text-sm font-normal text-muted-foreground mt-0.5 text-pretty select-none',\n              cursorClass\n            )}\n          >\n            {description}\n          </label>\n        )}\n      </div>\n      {checked && children && children}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/toggle-row-B5iXNWCJ.esm.js

@@ -0,0 +1,278 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { forwardRef, useId } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Setting07Icon } from "@hugeicons/core-free-icons";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PulsingBorder } from "@paper-design/shaders-react";
+import { Root } from "@radix-ui/react-label";
+import { Root as Root$1, Thumb } from "@radix-ui/react-switch";
+
+//#region src/lib/utils.ts
+const cn = (...inputs) => twMerge(clsx(inputs));
+
+//#endregion
+//#region src/components/ui/button/button.tsx
+const buttonVariants = cva("relative isolate inline-flex items-center justify-center gap-1.5 whitespace-nowrap select-none text-[13px] font-medium leading-[calc(18/13)] touch-manipulation transition-[background-color,color,opacity,box-shadow,transform,filter,scale] duration-150 ease active:scale-[0.96] cursor-pointer border-0 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", {
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: "rounded-md px-3 py-1.5 h-8 has-[>svg]:px-2.5 [&_svg:not([class*='size-'])]:size-3.5",
+			"icon": "size-9 rounded-md",
+			"icon-sm": "size-7 rounded-md [&_svg:not([class*='size-'])]:size-3.5 relative before:absolute before:-inset-[6px] before:content-['']",
+			"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3 relative before:absolute before:-inset-[9px] before:content-['']",
+			lg: "rounded-md px-5 py-2.5 h-10 has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4",
+			sm: "rounded-md px-2.5 py-1 h-7 has-[>svg]:px-2 [&_svg:not([class*='size-'])]:size-3 before:absolute before:-inset-y-[6px] before:inset-x-0 before:content-['']",
+			xs: "rounded-md px-3 py-1 h-7 [&_svg:not([class*='size-'])]:size-3"
+		},
+		variant: {
+			default: "bg-(--action) text-white shadow-[0_0_0_1px_var(--action),var(--shadow-button)] hover:brightness-105 [text-shadow:0_1px_1px_rgba(0,0,0,0.16)]",
+			destructive: "bg-destructive text-white shadow-[0_0_0_1px_var(--destructive),var(--shadow-button)] hover:brightness-105 [text-shadow:0_1px_1px_rgba(0,0,0,0.16)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+			ghost: "text-muted-foreground hover:bg-[#f8f8f9] hover:text-foreground dark:hover:bg-white/[0.06]",
+			link: "text-(--action) underline-offset-4 hover:underline",
+			outline: "bg-white shadow-[var(--shadow-input)] hover:bg-[#f8f8f9] hover:shadow-[var(--shadow-input-hover)] dark:bg-input/30 dark:hover:bg-white/[0.06]",
+			secondary: "bg-white shadow-[var(--shadow-secondary)] hover:bg-[#f8f8f9] hover:shadow-[var(--shadow-secondary-hover)] dark:bg-input/30 dark:hover:bg-white/[0.06]"
+		}
+	}
+});
+const Button = ({ className, variant = "default", size = "default", asChild = false, ...props }) => {
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		"data-slot": "button",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			className,
+			size,
+			variant
+		})),
+		...props
+	});
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "button",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			className,
+			size,
+			variant
+		})),
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/ui/input/input.tsx
+const shaderDefaults = {
+	bloom: 0,
+	colors: [
+		"#BDDCFF",
+		"#57A7FF",
+		"#DEEAFC"
+	],
+	inset: 1,
+	intensity: 0,
+	pulse: .3,
+	roundness: .6,
+	scale: 1,
+	smoke: .75,
+	smokeSize: .7,
+	softness: .6,
+	speed: 2.2,
+	spots: 8,
+	spotSize: .75,
+	thickness: .04
+};
+const spring = {
+	bounce: 0,
+	duration: .35,
+	type: "spring"
+};
+const Input = forwardRef(({ className, type, shaderBorder, style, ...props }, ref) => {
+	const prefersReducedMotion = useReducedMotion();
+	const inputClassName = cn("file:text-foreground placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 h-8 w-full min-w-0 touch-manipulation rounded-md border-0 bg-background px-3 py-1 text-base shadow-[var(--shadow-input)] transition-[color,box-shadow] duration-100 ease-out outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "hover:shadow-[var(--shadow-input-hover)]", "focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_rgba(0,114,239,0.15)]", "aria-invalid:shadow-[0_0_0_1px_var(--destructive),0_0_1px_0_var(--destructive)] dark:aria-invalid:shadow-[0_0_0_1px_var(--destructive)]", className);
+	const isActive = !!shaderBorder;
+	const config = typeof shaderBorder === "object" ? {
+		...shaderDefaults,
+		...shaderBorder
+	} : shaderDefaults;
+	const inset = config.inset;
+	if (shaderBorder !== void 0) return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			children: isActive && /* @__PURE__ */ jsx(motion.div, {
+				initial: prefersReducedMotion ? false : { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: prefersReducedMotion ? { duration: 0 } : spring,
+				className: "absolute pointer-events-none z-20",
+				style: {
+					borderRadius: `${8 + inset}px`,
+					inset: `-${inset}px`,
+					willChange: "opacity"
+				},
+				children: /* @__PURE__ */ jsx(PulsingBorder, {
+					colorBack: "#00000000",
+					colors: config.colors,
+					speed: config.speed,
+					scale: config.scale,
+					roundness: config.roundness,
+					thickness: config.thickness,
+					softness: config.softness,
+					intensity: config.intensity,
+					bloom: config.bloom,
+					spots: config.spots,
+					spotSize: config.spotSize,
+					pulse: config.pulse,
+					smoke: config.smoke,
+					smokeSize: config.smokeSize,
+					webGlContextAttributes: {
+						alpha: true,
+						premultipliedAlpha: true
+					},
+					className: "size-full",
+					style: { borderRadius: `${8 + inset}px` }
+				})
+			}, "shader-border")
+		}), /* @__PURE__ */ jsx("input", {
+			ref,
+			type,
+			"data-slot": "input",
+			className: cn(inputClassName, isActive && "animate-shimmer motion-reduce:animate-none"),
+			style: isActive ? {
+				backgroundClip: "text",
+				backgroundImage: `linear-gradient(to right, color-mix(in srgb, ${config.colors[0]} 70%, #000), color-mix(in srgb, ${config.colors[1] || config.colors[0]} 70%, #000), color-mix(in srgb, ${config.colors[2] || config.colors[0]} 70%, #000), color-mix(in srgb, ${config.colors[0]} 70%, #000))`,
+				backgroundSize: "200% 100%",
+				boxShadow: "none",
+				color: "transparent",
+				WebkitBackgroundClip: "text",
+				...style
+			} : style,
+			...props
+		})]
+	});
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type,
+		"data-slot": "input",
+		className: inputClassName,
+		style,
+		...props
+	});
+});
+Input.displayName = "Input";
+
+//#endregion
+//#region src/components/ui/label/label.tsx
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Root, {
+	ref,
+	className: cn(labelVariants(), className),
+	...props
+}));
+Label.displayName = Root.displayName;
+
+//#endregion
+//#region src/components/ui/switch/switch.tsx
+const Switch = forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ jsx(Root$1, {
+	ref,
+	"data-slot": "switch",
+	"data-size": size,
+	className: cn("peer data-[state=checked]:bg-(--action) data-[state=unchecked]:bg-input hover:data-[state=unchecked]:bg-[rgba(31,41,55,0.14)] group-hover/toggle:data-[state=unchecked]:bg-[rgba(31,41,55,0.14)] focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 dark:hover:data-[state=unchecked]:bg-[rgba(255,255,255,0.12)] dark:group-hover/toggle:data-[state=unchecked]:bg-[rgba(255,255,255,0.12)] relative group/switch inline-flex shrink-0 touch-manipulation items-center rounded-full border-0 shadow-[0_0_0_1px_rgba(31,41,55,0.20),0_1px_2px_0_rgba(0,0,0,0.06),0_0_1px_0_rgba(0,0,0,0.02)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.15),0_1px_2px_0_rgba(0,0,0,0.20),0_0_1px_0_rgba(0,0,0,0.06)] data-[state=checked]:shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_rgba(255,255,255,0.15)_inset,0px_2px_3px_0px_rgba(31,41,55,0.30),0px_1px_1px_0px_rgba(0,0,0,0.28)] dark:data-[state=checked]:shadow-[0px_1px_1px_0px_rgba(255,255,255,0.10)_inset,0px_2px_3px_0px_rgba(0,0,0,0.50),0px_1px_1px_0px_rgba(0,0,0,0.30)] transition-[color,background-color,box-shadow] duration-200 ease outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer data-[size=default]:h-[18px] data-[size=default]:w-[30px] data-[size=sm]:h-3.5 data-[size=sm]:w-[22px] before:absolute before:-inset-[13px] before:content-['']", className),
+	...props,
+	children: /* @__PURE__ */ jsx(Thumb, {
+		"data-slot": "switch-thumb",
+		className: cn("bg-background dark:data-[state=checked]:bg-white dark:data-[state=unchecked]:bg-[oklch(0.500_0.013_253)] pointer-events-none block rounded-full shadow-[0_2px_2px_-1px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.06),0_4px_4px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_2px_2px_-1px_rgba(0,0,0,0.20),0_0_0_1px_rgba(0,0,0,0.15),0_4px_4px_-2px_rgba(0,0,0,0.15)] ring-0 transition-[transform,background-color] duration-150 ease group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-[state=unchecked]:translate-x-0.5 group-data-[size=default]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[10px]")
+	})
+}));
+Switch.displayName = "Switch";
+
+//#endregion
+//#region src/components/toggle-row/toggle-row.tsx
+const ToggleRow = ({ label, description, checked, onCheckedChange, disabled = false, switchPosition = "left", icon, badge, onSettings, children, className }) => {
+	const switchId = useId();
+	const descId = useId();
+	const cursorClass = disabled ? "cursor-not-allowed" : "cursor-pointer";
+	if (switchPosition === "left") return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-start gap-2.5 touch-manipulation group/toggle"),
+			children: [
+				/* @__PURE__ */ jsx(Switch, {
+					id: switchId,
+					"aria-describedby": description ? descId : void 0,
+					checked,
+					onCheckedChange,
+					disabled,
+					className: "mt-0.5"
+				}),
+				icon && /* @__PURE__ */ jsx("label", {
+					htmlFor: switchId,
+					className: cn("text-muted-foreground shrink-0 self-start", cursorClass),
+					children: icon
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 min-w-0",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("label", {
+							htmlFor: switchId,
+							className: cn("font-medium select-none", disabled && "text-muted-foreground", cursorClass),
+							children: label
+						}), badge]
+					}), description && /* @__PURE__ */ jsx("label", {
+						htmlFor: switchId,
+						id: descId,
+						className: cn("block text-sm font-normal text-muted-foreground mt-1 text-pretty select-none", cursorClass),
+						children: description
+					})]
+				})
+			]
+		}), children]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-3", className),
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-4",
+			children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: switchId,
+				className: cn("text-sm font-medium select-none", cursorClass),
+				children: label
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 shrink-0",
+				children: [onSettings && checked && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: onSettings,
+					className: "text-muted-foreground hover:text-foreground",
+					"aria-label": "Configure",
+					children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+						icon: Setting07Icon,
+						size: 14
+					})
+				}), /* @__PURE__ */ jsx(Switch, {
+					id: switchId,
+					"aria-describedby": description ? descId : void 0,
+					checked,
+					onCheckedChange,
+					disabled
+				})]
+			})]
+		}), description && /* @__PURE__ */ jsx("label", {
+			htmlFor: switchId,
+			id: descId,
+			className: cn("block text-sm font-normal text-muted-foreground mt-0.5 text-pretty select-none", cursorClass),
+			children: description
+		})] }), checked && children && children]
+	});
+};
+
+//#endregion
+export { Button as a, Input as i, Switch as n, buttonVariants as o, Label as r, cn as s, ToggleRow as t };
+//# sourceMappingURL=toggle-row-B5iXNWCJ.esm.js.map