@dynamic-labs-sdk/droplet 1.13.0 → 1.16.1

package/dist/migration.cjs

@@ -1,4 +1,4 @@
-const require_toggle_row = require('./toggle-row-B7XCm0Z-.cjs');
+const require_toggle_row = require('./toggle-row-BafR1dY7.cjs');
 const require_index = require('./index.cjs');
 let react = require("react");
 let _hugeicons_react = require("@hugeicons/react");

package/dist/migration.esm.js

@@ -1,4 +1,4 @@
-import { i as Input, r as Label, s as cn, t as ToggleRow } from "./toggle-row-C-B8HtY0.esm.js";
+import { c as cn, i as Input, r as Label, t as ToggleRow } from "./toggle-row-h0h1m_hc.esm.js";
 import { useId, useState } from "react";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { AiMagicIcon, Alert01Icon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon } from "@hugeicons/core-free-icons";

package/dist/{toggle-row-B7XCm0Z-.cjs → toggle-row-BafR1dY7.cjs}

@@ -15,9 +15,72 @@ 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/spinner/spinner.tsx
+/** Maps the `size` prop to Tailwind size utilities. */
+const sizeMap = {
+	lg: "size-6",
+	md: "size-4",
+	sm: "size-3"
+};
+const Spinner = ({ className, size = "md" }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", {
+	"aria-label": "Loading",
+	className: "inline-flex",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		className: cn("animate-spin motion-reduce:animate-none", sizeMap[size], className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			className: "opacity-75",
+			fill: "currentColor",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+		})]
+	})
+});
+
 //#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", {
+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-out active:scale-[0.96] motion-reduce:transition-none 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", {
+	compoundVariants: [
+		{
+			class: "min-w-16",
+			size: "sm",
+			variant: [
+				"default",
+				"destructive",
+				"outline",
+				"secondary"
+			]
+		},
+		{
+			class: "min-w-20",
+			size: "default",
+			variant: [
+				"default",
+				"destructive",
+				"outline",
+				"secondary"
+			]
+		},
+		{
+			class: "min-w-24",
+			size: "lg",
+			variant: [
+				"default",
+				"destructive",
+				"outline",
+				"secondary"
+			]
+		}
+	],
 	defaultVariants: {
 		size: "default",
 		variant: "default"
@@ -48,8 +111,10 @@ const buttonVariants = (0, class_variance_authority.cva)("relative isolate inlin
 * Variants: `default` | `destructive` | `outline` | `secondary` | `ghost` | `link`.
 * Sizes: `default` | `sm` | `xs` | `lg` | `icon` | `icon-sm` | `icon-xs`.
 * Set `asChild` to render the button styles onto a child element (e.g. an anchor) instead of a `<button>`.
+* Set `loading` to show an inline spinner before the label and disable interaction while an async action is pending.
+* When `asChild` is true, `loading` is ignored — the Slot host cannot render an additional spinner child.
 */
-const Button = ({ className, variant = "default", size = "default", asChild = false, ...props }) => {
+const Button = ({ className, variant = "default", size = "default", asChild = false, loading = false, disabled, children, style, ...props }) => {
 	if (asChild) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slot, {
 		"data-slot": "button",
 		"data-size": size,
@@ -59,18 +124,27 @@ const Button = ({ className, variant = "default", size = "default", asChild = fa
 			size,
 			variant
 		})),
-		...props
+		...props,
+		disabled,
+		style,
+		children
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		"data-slot": "button",
 		"data-size": size,
 		"data-variant": variant,
 		className: cn(buttonVariants({
-			className,
 			size,
 			variant
-		})),
-		...props
+		}), loading && "cursor-wait", className),
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		style: loading ? {
+			opacity: 1,
+			...style
+		} : style,
+		...props,
+		children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spinner, { className: "size-3.5" }), children]
 	});
 };
 
@@ -103,7 +177,7 @@ const 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 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_var(--ring-halo,#0072EF26)]", "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,
@@ -152,7 +226,7 @@ const Input = (0, react.forwardRef)(({ className, type, shaderBorder, style, ...
 			ref,
 			type,
 			"data-slot": "input",
-			className: cn(inputClassName, isActive && "animate-shimmer motion-reduce:animate-none"),
+			className: cn(inputClassName, isActive && "animate-shimmer motion-reduce:animate-none", isActive && "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--ring)]"),
 			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))`,
@@ -192,11 +266,12 @@ const Switch = (0, react.forwardRef)(({ className, size = "default", ...props },
 	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),
+	className: cn("peer data-[state=checked]:bg-(--action) data-[state=unchecked]:bg-input hover:data-[state=unchecked]:bg-[rgba(31,41,55,0.16)] group-hover/toggle:data-[state=unchecked]:bg-[rgba(31,41,55,0.16)] 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-[var(--shadow-control)] dark:shadow-[var(--shadow-control)] data-[state=checked]:shadow-[var(--shadow-control-checked)] dark:data-[state=checked]:shadow-[var(--shadow-control-checked)] transition-[color,background-color,box-shadow] duration-200 ease-out motion-reduce:transition-none 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-[15px] 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]")
+		className: cn("pointer-events-none relative block ring-0", "transition-transform duration-200 ease-out motion-reduce:transition-none", "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]"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("absolute top-0 h-full rounded-full", "bg-background dark:group-data-[state=checked]/switch:bg-white dark:group-data-[state=unchecked]/switch:bg-[oklch(0.500_0.013_253)]", "shadow-[var(--shadow-control-thumb)] dark:shadow-[var(--shadow-control-thumb)]", "group-data-[size=default]/switch:w-3.5 group-data-[size=sm]/switch:w-2.5", "group-data-[state=checked]/switch:right-0 group-data-[state=unchecked]/switch:left-0", "group-[&[data-size=default]:active]/switch:w-[17px] group-[&[data-size=sm]:active]/switch:w-3", "transition-[width,background-color] duration-[120ms] ease-out motion-reduce:transition-none") })
 	})
 }));
 Switch.displayName = "Switch";
@@ -300,6 +375,12 @@ Object.defineProperty(exports, 'Label', {
     return Label;
   }
 });
+Object.defineProperty(exports, 'Spinner', {
+  enumerable: true,
+  get: function () {
+    return Spinner;
+  }
+});
 Object.defineProperty(exports, 'Switch', {
   enumerable: true,
   get: function () {
@@ -324,4 +405,4 @@ Object.defineProperty(exports, 'cn', {
     return cn;
   }
 });
-//# sourceMappingURL=toggle-row-B7XCm0Z-.cjs.map
+//# sourceMappingURL=toggle-row-BafR1dY7.cjs.map

package/dist/toggle-row-BafR1dY7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-row-BafR1dY7.cjs","names":["Slot","shaderDefaults: Required<ShaderBorderConfig>","AnimatePresence","motion","PulsingBorder","Root","Root","Thumb","HugeiconsIcon","Setting07Icon"],"sources":["../src/lib/utils.ts","../src/components/ui/spinner/spinner.tsx","../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 { cn } from '../../../lib/utils';\n\n/** Maps the `size` prop to Tailwind size utilities. */\nconst sizeMap = {\n  lg: 'size-6',\n  md: 'size-4',\n  sm: 'size-3',\n} as const;\n\ntype SpinnerSize = keyof typeof sizeMap;\n\ntype SpinnerProps = {\n  className?: string;\n  /** Controls the spinner diameter. Defaults to `md` (size-4). `className` wins over `size`. */\n  size?: SpinnerSize;\n};\n\nconst Spinner = ({ className, size = 'md' }: SpinnerProps) => (\n  <output aria-label='Loading' className='inline-flex'>\n    <svg\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n      className={cn('animate-spin motion-reduce:animate-none', sizeMap[size], className)}\n    >\n      <circle\n        className='opacity-25'\n        cx='12'\n        cy='12'\n        r='10'\n        stroke='currentColor'\n        strokeWidth='4'\n      />\n      <path\n        className='opacity-75'\n        fill='currentColor'\n        d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z'\n      />\n    </svg>\n  </output>\n);\n\nexport { Spinner };\nexport type { SpinnerProps, SpinnerSize };\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';\nimport { Spinner } from '../spinner';\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-out active:scale-[0.96] motion-reduce:transition-none 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    // Min-width floors so short labels (Done/OK/Save) read as proper buttons and\n    // paired footer actions balance — only for solid/outlined TEXT buttons.\n    // Excluded by design: `ghost`/`link` (inline text, no button floor) and all\n    // `icon*` sizes (square). `min-w-*` (not fixed width) so labels still grow,\n    // and `w-full`/`flex-1` usages override it harmlessly.\n    compoundVariants: [\n      {\n        class: 'min-w-16',\n        size: 'sm',\n        variant: ['default', 'destructive', 'outline', 'secondary'],\n      },\n      {\n        class: 'min-w-20',\n        size: 'default',\n        variant: ['default', 'destructive', 'outline', 'secondary'],\n      },\n      {\n        class: 'min-w-24',\n        size: 'lg',\n        variant: ['default', 'destructive', 'outline', 'secondary'],\n      },\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\n/**\n * Primary clickable action button.\n *\n * Variants: `default` | `destructive` | `outline` | `secondary` | `ghost` | `link`.\n * Sizes: `default` | `sm` | `xs` | `lg` | `icon` | `icon-sm` | `icon-xs`.\n * Set `asChild` to render the button styles onto a child element (e.g. an anchor) instead of a `<button>`.\n * Set `loading` to show an inline spinner before the label and disable interaction while an async action is pending.\n * When `asChild` is true, `loading` is ignored — the Slot host cannot render an additional spinner child.\n */\nconst Button = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  asChild = false,\n  loading = false,\n  disabled,\n  children,\n  style,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    /** When true, renders an inline spinner before the label and disables interaction. */\n    loading?: 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, disabled, style }}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <button\n      data-slot='button'\n      data-size={size}\n      data-variant={variant}\n      className={cn(\n        buttonVariants({ size, variant }),\n        // Loading stays full-strength (not the 50% disabled wash) so it reads as\n        // \"working\", not \"disabled\" — interaction is still blocked via `disabled`.\n        loading && 'cursor-wait',\n        className,\n      )}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      // Inline opacity wins over the class-level `disabled:opacity-50` so the\n      // loading button keeps its color while remaining truly disabled.\n      style={loading ? { opacity: 1, ...style } : style}\n      {...props}\n    >\n      {loading && (\n        // Size matches the svg sizing the button already applies to icons at each size\n        <Spinner className='size-3.5' />\n      )}\n      {children}\n    </button>\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_var(--ring-halo,#0072EF26)]',\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              isActive && 'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--ring)]',\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.16)] group-hover/toggle:data-[state=unchecked]:bg-[rgba(31,41,55,0.16)] 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-[var(--shadow-control)] dark:shadow-[var(--shadow-control)] data-[state=checked]:shadow-[var(--shadow-control-checked)] dark:data-[state=checked]:shadow-[var(--shadow-control-checked)] transition-[color,background-color,box-shadow] duration-200 ease-out motion-reduce:transition-none 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-[15px] before:content-['']\",\n      className,\n    )}\n    {...props}\n  >\n    <Thumb\n      data-slot='switch-thumb'\n      className={cn(\n        'pointer-events-none relative block ring-0',\n        // travel only — slides between off/on with ease-out (Emil's blueprint)\n        'transition-transform duration-200 ease-out motion-reduce:transition-none',\n        'group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5',\n        '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      {/* Inner pill carries the appearance + the press stretch. It animates WIDTH\n          (not scaleX, which would oval the round caps) and is pinned to the edge\n          nearest the track wall — right when checked, left when unchecked — so it\n          only ever grows inward toward the track centre, never past the wall. */}\n      <span\n        className={cn(\n          'absolute top-0 h-full rounded-full',\n          'bg-background dark:group-data-[state=checked]/switch:bg-white dark:group-data-[state=unchecked]/switch:bg-[oklch(0.500_0.013_253)]',\n          'shadow-[var(--shadow-control-thumb)] dark:shadow-[var(--shadow-control-thumb)]',\n          'group-data-[size=default]/switch:w-3.5 group-data-[size=sm]/switch:w-2.5',\n          'group-data-[state=checked]/switch:right-0 group-data-[state=unchecked]/switch:left-0',\n          // press stretch (1.2×) — ease-out, quick, direct-manipulation feedback\n          'group-[&[data-size=default]:active]/switch:w-[17px] group-[&[data-size=sm]:active]/switch:w-3',\n          'transition-[width,background-color] duration-[120ms] ease-out motion-reduce:transition-none',\n        )}\n      />\n    </Thumb>\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":";;;;;;;;;;;;;;;AAGA,MAAa,MAAM,GAAG,sDAAsC,OAAO,CAAC;;;;;ACApE,MAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAUD,MAAM,WAAW,EAAE,WAAW,OAAO,WACnC,2CAAC;CAAO,cAAW;CAAU,WAAU;WACrC,4CAAC;EACC,SAAQ;EACR,MAAK;EACL,OAAM;EACN,WAAW,GAAG,2CAA2C,QAAQ,OAAO,UAAU;aAElF,2CAAC;GACC,WAAU;GACV,IAAG;GACH,IAAG;GACH,GAAE;GACF,QAAO;GACP,aAAY;IACZ,EACF,2CAAC;GACC,WAAU;GACV,MAAK;GACL,GAAE;IACF;GACE;EACC;;;;AChCX,MAAM,mDACJ,qmBACA;CAME,kBAAkB;EAChB;GACE,OAAO;GACP,MAAM;GACN,SAAS;IAAC;IAAW;IAAe;IAAW;IAAY;GAC5D;EACD;GACE,OAAO;GACP,MAAM;GACN,SAAS;IAAC;IAAW;IAAe;IAAW;IAAY;GAC5D;EACD;GACE,OAAO;GACP,MAAM;GACN,SAAS;IAAC;IAAW;IAAe;IAAW;IAAY;GAC5D;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,MAAM;GACJ,SAAS;GACT,QAAQ;GACR,WAAW;GACX,WAAW;GACX,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,SAAS;GACP,SACE;GACF,aACE;GACF,OACE;GACF,MAAM;GACN,SACE;GACF,WACE;GACH;EACF;CACF,CACF;;;;;;;;;;AAWD,MAAM,UAAU,EACd,WACA,UAAU,WACV,OAAO,WACP,UAAU,OACV,UAAU,OACV,UACA,UACA,OACA,GAAG,YAMG;AACN,KAAI,QACF,QACE,2CAACA;EACC,aAAU;EACV,aAAW;EACX,gBAAc;EACd,WAAW,GAAG,eAAe;GAAE;GAAW;GAAM;GAAS,CAAC,CAAC;EACrD,GAAG;EAAO;EAAU;EAEzB;GACI;AAIX,QACE,4CAAC;EACC,aAAU;EACV,aAAW;EACX,gBAAc;EACd,WAAW,GACT,eAAe;GAAE;GAAM;GAAS,CAAC,EAGjC,WAAW,eACX,UACD;EACD,UAAU,YAAY;EACtB,aAAW,WAAW;EAGtB,OAAO,UAAU;GAAE,SAAS;GAAG,GAAG;GAAO,GAAG;EAC5C,GAAI;aAEH,WAEC,2CAAC,WAAQ,WAAU,aAAa,EAEjC;GACM;;;;;ACpGb,MAAMC,iBAA+C;CACnD,OAAO;CACP,QAAQ;EAAC;EAAW;EAAW;EAAU;CACzC,OAAO;CACP,WAAW;CACX,OAAO;CACP,WAAW;CACX,OAAO;CACP,OAAO;CACP,WAAW;CACX,UAAU;CACV,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACZ;AAED,MAAM,SAAS;CAAE,QAAQ;CAAG,UAAU;CAAM,MAAM;CAAmB;AAMrE,MAAM,+BACH,EAAE,WAAW,MAAM,cAAc,OAAO,GAAG,SAAS,QAAQ;CAC3D,MAAM,2DAAyC;CAC/C,MAAM,iBAAiB,GACrB,ifACA,4CACA,qFACA,2IACA,UACD;CAED,MAAM,WAAW,CAAC,CAAC;CACnB,MAAM,SACJ,OAAO,iBAAiB,WACpB;EAAE,GAAG;EAAgB,GAAG;EAAc,GACtC;CACN,MAAM,QAAQ,OAAO;AAErB,KAAI,iBAAiB,OACnB,QACE,4CAAC;EAAI,WAAU;aACb,2CAACC;GAAgB,SAAS;aACvB,YACC,2CAACC,oBAAO;IAEN,SAAS,uBAAuB,QAAQ,EAAE,SAAS,GAAG;IACtD,SAAS,EAAE,SAAS,GAAG;IACvB,MAAM,EAAE,SAAS,GAAG;IACpB,YAAY,uBAAuB,EAAE,UAAU,GAAG,GAAG;IACrD,WAAU;IACV,OAAO;KACL,cAAc,GAAG,IAAI,MAAM;KAC3B,OAAO,IAAI,MAAM;KACjB,YAAY;KACb;cAED,2CAACC;KACC,WAAU;KACV,QAAQ,OAAO;KACf,OAAO,OAAO;KACd,OAAO,OAAO;KACd,WAAW,OAAO;KAClB,WAAW,OAAO;KAClB,UAAU,OAAO;KACjB,WAAW,OAAO;KAClB,OAAO,OAAO;KACd,OAAO,OAAO;KACd,UAAU,OAAO;KACjB,OAAO,OAAO;KACd,OAAO,OAAO;KACd,WAAW,OAAO;KAClB,wBAAwB;MACtB,OAAO;MACP,oBAAoB;MACrB;KACD,WAAU;KACV,OAAO,EAAE,cAAc,GAAG,IAAI,MAAM,KAAK;MACzC;MAjCE,gBAkCO;IAEC,EAClB,2CAAC;GACM;GACC;GACN,aAAU;GACV,WAAW,GACT,gBACA,YAAY,8CACZ,YAAY,6FACb;GACD,OACE,WACI;IACE,gBAAgB;IAChB,iBAAiB,gDAAgD,OAAO,OAAO,GAAG,kCAAkC,OAAO,OAAO,MAAM,OAAO,OAAO,GAAG,kCAAkC,OAAO,OAAO,MAAM,OAAO,OAAO,GAAG,kCAAkC,OAAO,OAAO,GAAG;IACnR,gBAAgB;IAChB,WAAW;IACX,OAAO;IACP,sBAAsB;IACtB,GAAG;IACJ,GACD;GAEN,GAAI;IACJ;GACE;AAIV,QACE,2CAAC;EACM;EACC;EACN,aAAU;EACV,WAAW;EACJ;EACP,GAAI;GACJ;EAGP;AACD,MAAM,cAAc;;;;AC7IpB,MAAM,kDACJ,6FACD;AAED,MAAM,+BAGH,EAAE,WAAW,GAAG,SAAS,QAC1B,2CAACC;CAAU;CAAK,WAAW,GAAG,eAAe,EAAE,UAAU;CAAE,GAAI;EAAS,CACxE;AACF,MAAM,cAAcA,2BAAK;;;;ACXzB,MAAM,gCAKH,EAAE,WAAW,OAAO,WAAW,GAAG,SAAS,QAC5C,2CAACC;CACM;CACL,aAAU;CACV,aAAW;CACX,WAAW,GACT,yhCACA,UACD;CACD,GAAI;WAEJ,2CAACC;EACC,aAAU;EACV,WAAW,GACT,6CAEA,4EACA,kFACA,sLACD;YAMD,2CAAC,UACC,WAAW,GACT,sCACA,sIACA,kFACA,4EACA,wFAEA,iGACA,8FACD,GACD;GACI;EACH,CACP;AACF,OAAO,cAAc;;;;AC7BrB,MAAa,aAAa,EACxB,OACA,aACA,SACA,iBACA,WAAW,OACX,iBAAiB,QACjB,MACA,OACA,YACA,UACA,gBACoB;CACpB,MAAM,6BAAkB;CACxB,MAAM,2BAAgB;CAEtB,MAAM,cAAc,WAAW,uBAAuB;AAEtD,KAAI,mBAAmB,OACrB,QACE,4CAAC;EAAe;aACd,4CAAC;GAAI,WAAW,GAAG,2DAA2D;;IAC5E,2CAAC;KACC,IAAI;KACJ,oBAAkB,cAAc,SAAS;KAChC;KACQ;KACP;KACV,WAAU;MACV;IACD,QACC,2CAAC;KACC,SAAS;KACT,WAAW,GAAG,6CAA6C,YAAY;eAEtE;MACK;IAEV,4CAAC;KAAI,WAAU;gBACb,4CAAC;MAAI,WAAU;iBACb,2CAAC;OACC,SAAS;OACT,WAAW,GACT,2BACA,YAAY,yBACZ,YACD;iBAEA;QACK,EACP;OACG,EACL,eACC,2CAAC;MACC,SAAS;MACT,IAAI;MACJ,WAAW,GACT,gFACA,YACD;gBAEA;OACK;MAEN;;IACF,EACL;GACG;AAKV,QACE,4CAAC;EAAI,WAAW,GAAG,aAAa,UAAU;aACxC,4CAAC,oBACC,4CAAC;GAAI,WAAU;cACb,2CAAC;IACC,SAAS;IACT,WAAW,GAAG,mCAAmC,YAAY;cAE5D;KACK,EACR,4CAAC;IAAI,WAAU;eACZ,cAAc,WACb,2CAAC;KACC,SAAQ;KACR,MAAK;KACL,SAAS;KACT,WAAU;KACV,cAAW;eAEX,2CAACC;MAAc,MAAMC;MAAe,MAAM;OAAM;MACzC,EAEX,2CAAC;KACC,IAAI;KACJ,oBAAkB,cAAc,SAAS;KAChC;KACQ;KACP;MACV;KACE;IACF,EACL,eACC,2CAAC;GACC,SAAS;GACT,IAAI;GACJ,WAAW,GACT,kFACA,YACD;aAEA;IACK,IAEN,EACL,WAAW,YAAY;GACpB"}

package/dist/{toggle-row-C-B8HtY0.esm.js → toggle-row-h0h1m_hc.esm.js}

@@ -14,9 +14,72 @@ 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/spinner/spinner.tsx
+/** Maps the `size` prop to Tailwind size utilities. */
+const sizeMap = {
+	lg: "size-6",
+	md: "size-4",
+	sm: "size-3"
+};
+const Spinner = ({ className, size = "md" }) => /* @__PURE__ */ jsx("output", {
+	"aria-label": "Loading",
+	className: "inline-flex",
+	children: /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		className: cn("animate-spin motion-reduce:animate-none", sizeMap[size], className),
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		}), /* @__PURE__ */ jsx("path", {
+			className: "opacity-75",
+			fill: "currentColor",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+		})]
+	})
+});
+
 //#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", {
+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-out active:scale-[0.96] motion-reduce:transition-none 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", {
+	compoundVariants: [
+		{
+			class: "min-w-16",
+			size: "sm",
+			variant: [
+				"default",
+				"destructive",
+				"outline",
+				"secondary"
+			]
+		},
+		{
+			class: "min-w-20",
+			size: "default",
+			variant: [
+				"default",
+				"destructive",
+				"outline",
+				"secondary"
+			]
+		},
+		{
+			class: "min-w-24",
+			size: "lg",
+			variant: [
+				"default",
+				"destructive",
+				"outline",
+				"secondary"
+			]
+		}
+	],
 	defaultVariants: {
 		size: "default",
 		variant: "default"
@@ -47,8 +110,10 @@ const buttonVariants = cva("relative isolate inline-flex items-center justify-ce
 * Variants: `default` | `destructive` | `outline` | `secondary` | `ghost` | `link`.
 * Sizes: `default` | `sm` | `xs` | `lg` | `icon` | `icon-sm` | `icon-xs`.
 * Set `asChild` to render the button styles onto a child element (e.g. an anchor) instead of a `<button>`.
+* Set `loading` to show an inline spinner before the label and disable interaction while an async action is pending.
+* When `asChild` is true, `loading` is ignored — the Slot host cannot render an additional spinner child.
 */
-const Button = ({ className, variant = "default", size = "default", asChild = false, ...props }) => {
+const Button = ({ className, variant = "default", size = "default", asChild = false, loading = false, disabled, children, style, ...props }) => {
 	if (asChild) return /* @__PURE__ */ jsx(Slot, {
 		"data-slot": "button",
 		"data-size": size,
@@ -58,18 +123,27 @@ const Button = ({ className, variant = "default", size = "default", asChild = fa
 			size,
 			variant
 		})),
-		...props
+		...props,
+		disabled,
+		style,
+		children
 	});
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsxs("button", {
 		"data-slot": "button",
 		"data-size": size,
 		"data-variant": variant,
 		className: cn(buttonVariants({
-			className,
 			size,
 			variant
-		})),
-		...props
+		}), loading && "cursor-wait", className),
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		style: loading ? {
+			opacity: 1,
+			...style
+		} : style,
+		...props,
+		children: [loading && /* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), children]
 	});
 };
 
@@ -102,7 +176,7 @@ const 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 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_var(--ring-halo,#0072EF26)]", "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,
@@ -151,7 +225,7 @@ const Input = forwardRef(({ className, type, shaderBorder, style, ...props }, re
 			ref,
 			type,
 			"data-slot": "input",
-			className: cn(inputClassName, isActive && "animate-shimmer motion-reduce:animate-none"),
+			className: cn(inputClassName, isActive && "animate-shimmer motion-reduce:animate-none", isActive && "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--ring)]"),
 			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))`,
@@ -191,11 +265,12 @@ const Switch = forwardRef(({ className, size = "default", ...props }, ref) => /*
 	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),
+	className: cn("peer data-[state=checked]:bg-(--action) data-[state=unchecked]:bg-input hover:data-[state=unchecked]:bg-[rgba(31,41,55,0.16)] group-hover/toggle:data-[state=unchecked]:bg-[rgba(31,41,55,0.16)] 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-[var(--shadow-control)] dark:shadow-[var(--shadow-control)] data-[state=checked]:shadow-[var(--shadow-control-checked)] dark:data-[state=checked]:shadow-[var(--shadow-control-checked)] transition-[color,background-color,box-shadow] duration-200 ease-out motion-reduce:transition-none 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-[15px] 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]")
+		className: cn("pointer-events-none relative block ring-0", "transition-transform duration-200 ease-out motion-reduce:transition-none", "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]"),
+		children: /* @__PURE__ */ jsx("span", { className: cn("absolute top-0 h-full rounded-full", "bg-background dark:group-data-[state=checked]/switch:bg-white dark:group-data-[state=unchecked]/switch:bg-[oklch(0.500_0.013_253)]", "shadow-[var(--shadow-control-thumb)] dark:shadow-[var(--shadow-control-thumb)]", "group-data-[size=default]/switch:w-3.5 group-data-[size=sm]/switch:w-2.5", "group-data-[state=checked]/switch:right-0 group-data-[state=unchecked]/switch:left-0", "group-[&[data-size=default]:active]/switch:w-[17px] group-[&[data-size=sm]:active]/switch:w-3", "transition-[width,background-color] duration-[120ms] ease-out motion-reduce:transition-none") })
 	})
 }));
 Switch.displayName = "Switch";
@@ -281,5 +356,5 @@ const ToggleRow = ({ label, description, checked, onCheckedChange, disabled = fa
 };
 
 //#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-C-B8HtY0.esm.js.map
+export { Button as a, cn as c, Input as i, Switch as n, buttonVariants as o, Label as r, Spinner as s, ToggleRow as t };
+//# sourceMappingURL=toggle-row-h0h1m_hc.esm.js.map

package/dist/toggle-row-h0h1m_hc.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-row-h0h1m_hc.esm.js","names":["shaderDefaults: Required<ShaderBorderConfig>","Root"],"sources":["../src/lib/utils.ts","../src/components/ui/spinner/spinner.tsx","../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 { cn } from '../../../lib/utils';\n\n/** Maps the `size` prop to Tailwind size utilities. */\nconst sizeMap = {\n  lg: 'size-6',\n  md: 'size-4',\n  sm: 'size-3',\n} as const;\n\ntype SpinnerSize = keyof typeof sizeMap;\n\ntype SpinnerProps = {\n  className?: string;\n  /** Controls the spinner diameter. Defaults to `md` (size-4). `className` wins over `size`. */\n  size?: SpinnerSize;\n};\n\nconst Spinner = ({ className, size = 'md' }: SpinnerProps) => (\n  <output aria-label='Loading' className='inline-flex'>\n    <svg\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n      className={cn('animate-spin motion-reduce:animate-none', sizeMap[size], className)}\n    >\n      <circle\n        className='opacity-25'\n        cx='12'\n        cy='12'\n        r='10'\n        stroke='currentColor'\n        strokeWidth='4'\n      />\n      <path\n        className='opacity-75'\n        fill='currentColor'\n        d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z'\n      />\n    </svg>\n  </output>\n);\n\nexport { Spinner };\nexport type { SpinnerProps, SpinnerSize };\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';\nimport { Spinner } from '../spinner';\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-out active:scale-[0.96] motion-reduce:transition-none 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    // Min-width floors so short labels (Done/OK/Save) read as proper buttons and\n    // paired footer actions balance — only for solid/outlined TEXT buttons.\n    // Excluded by design: `ghost`/`link` (inline text, no button floor) and all\n    // `icon*` sizes (square). `min-w-*` (not fixed width) so labels still grow,\n    // and `w-full`/`flex-1` usages override it harmlessly.\n    compoundVariants: [\n      {\n        class: 'min-w-16',\n        size: 'sm',\n        variant: ['default', 'destructive', 'outline', 'secondary'],\n      },\n      {\n        class: 'min-w-20',\n        size: 'default',\n        variant: ['default', 'destructive', 'outline', 'secondary'],\n      },\n      {\n        class: 'min-w-24',\n        size: 'lg',\n        variant: ['default', 'destructive', 'outline', 'secondary'],\n      },\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\n/**\n * Primary clickable action button.\n *\n * Variants: `default` | `destructive` | `outline` | `secondary` | `ghost` | `link`.\n * Sizes: `default` | `sm` | `xs` | `lg` | `icon` | `icon-sm` | `icon-xs`.\n * Set `asChild` to render the button styles onto a child element (e.g. an anchor) instead of a `<button>`.\n * Set `loading` to show an inline spinner before the label and disable interaction while an async action is pending.\n * When `asChild` is true, `loading` is ignored — the Slot host cannot render an additional spinner child.\n */\nconst Button = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  asChild = false,\n  loading = false,\n  disabled,\n  children,\n  style,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    /** When true, renders an inline spinner before the label and disables interaction. */\n    loading?: 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, disabled, style }}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <button\n      data-slot='button'\n      data-size={size}\n      data-variant={variant}\n      className={cn(\n        buttonVariants({ size, variant }),\n        // Loading stays full-strength (not the 50% disabled wash) so it reads as\n        // \"working\", not \"disabled\" — interaction is still blocked via `disabled`.\n        loading && 'cursor-wait',\n        className,\n      )}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      // Inline opacity wins over the class-level `disabled:opacity-50` so the\n      // loading button keeps its color while remaining truly disabled.\n      style={loading ? { opacity: 1, ...style } : style}\n      {...props}\n    >\n      {loading && (\n        // Size matches the svg sizing the button already applies to icons at each size\n        <Spinner className='size-3.5' />\n      )}\n      {children}\n    </button>\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_var(--ring-halo,#0072EF26)]',\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              isActive && 'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--ring)]',\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.16)] group-hover/toggle:data-[state=unchecked]:bg-[rgba(31,41,55,0.16)] 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-[var(--shadow-control)] dark:shadow-[var(--shadow-control)] data-[state=checked]:shadow-[var(--shadow-control-checked)] dark:data-[state=checked]:shadow-[var(--shadow-control-checked)] transition-[color,background-color,box-shadow] duration-200 ease-out motion-reduce:transition-none 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-[15px] before:content-['']\",\n      className,\n    )}\n    {...props}\n  >\n    <Thumb\n      data-slot='switch-thumb'\n      className={cn(\n        'pointer-events-none relative block ring-0',\n        // travel only — slides between off/on with ease-out (Emil's blueprint)\n        'transition-transform duration-200 ease-out motion-reduce:transition-none',\n        'group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5',\n        '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      {/* Inner pill carries the appearance + the press stretch. It animates WIDTH\n          (not scaleX, which would oval the round caps) and is pinned to the edge\n          nearest the track wall — right when checked, left when unchecked — so it\n          only ever grows inward toward the track centre, never past the wall. */}\n      <span\n        className={cn(\n          'absolute top-0 h-full rounded-full',\n          'bg-background dark:group-data-[state=checked]/switch:bg-white dark:group-data-[state=unchecked]/switch:bg-[oklch(0.500_0.013_253)]',\n          'shadow-[var(--shadow-control-thumb)] dark:shadow-[var(--shadow-control-thumb)]',\n          'group-data-[size=default]/switch:w-3.5 group-data-[size=sm]/switch:w-2.5',\n          'group-data-[state=checked]/switch:right-0 group-data-[state=unchecked]/switch:left-0',\n          // press stretch (1.2×) — ease-out, quick, direct-manipulation feedback\n          'group-[&[data-size=default]:active]/switch:w-[17px] group-[&[data-size=sm]:active]/switch:w-3',\n          'transition-[width,background-color] duration-[120ms] ease-out motion-reduce:transition-none',\n        )}\n      />\n    </Thumb>\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs-sdk/droplet",
-  "version": "1.13.0",
+  "version": "1.16.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",