@dynamic-labs-sdk/droplet 1.12.2 → 1.13.0

package/dist/migration.cjs

@@ -1,4 +1,4 @@
-const require_toggle_row = require('./toggle-row-7lfPUutt.cjs');
+const require_toggle_row = require('./toggle-row-B7XCm0Z-.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-B5iXNWCJ.esm.js";
+import { i as Input, r as Label, s as cn, t as ToggleRow } from "./toggle-row-C-B8HtY0.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-7lfPUutt.cjs → toggle-row-B7XCm0Z-.cjs}

@@ -42,6 +42,13 @@ const buttonVariants = (0, class_variance_authority.cva)("relative isolate inlin
 		}
 	}
 });
+/**
+* Primary clickable action button.
+*
+* 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>`.
+*/
 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",
@@ -317,4 +324,4 @@ Object.defineProperty(exports, 'cn', {
     return cn;
   }
 });
-//# sourceMappingURL=toggle-row-7lfPUutt.cjs.map
+//# sourceMappingURL=toggle-row-B7XCm0Z-.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-row-B7XCm0Z-.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\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 */\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 → toggle-row-C-B8HtY0.esm.js}

@@ -41,6 +41,13 @@ const buttonVariants = cva("relative isolate inline-flex items-center justify-ce
 		}
 	}
 });
+/**
+* Primary clickable action button.
+*
+* 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>`.
+*/
 const Button = ({ className, variant = "default", size = "default", asChild = false, ...props }) => {
 	if (asChild) return /* @__PURE__ */ jsx(Slot, {
 		"data-slot": "button",
@@ -275,4 +282,4 @@ 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-B5iXNWCJ.esm.js.map
+//# sourceMappingURL=toggle-row-C-B8HtY0.esm.js.map

package/dist/toggle-row-C-B8HtY0.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-row-C-B8HtY0.esm.js","names":["shaderDefaults: Required<ShaderBorderConfig>","Root"],"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\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 */\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs-sdk/droplet",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
@@ -58,19 +58,20 @@
     "tw-animate-css": "1.3.4"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "10.4.1",
+    "@storybook/addon-docs": "10.4.1",
+    "@storybook/addon-mcp": "0.6.0",
+    "@storybook/react-vite": "10.4.1",
     "@tailwindcss/vite": "4.1.10",
-    "@storybook/addon-a11y": "8.6.17",
-    "@storybook/addon-docs": "8.6.17",
-    "@storybook/addon-toolbars": "8.6.17",
-    "@storybook/react-vite": "8.6.17",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.0.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
+    "eslint-plugin-storybook": "10.4.1",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.17",
+    "storybook": "10.4.1",
     "tailwindcss": "4.1.10",
     "tsdown": "*",
     "typescript": "~5.7.2",

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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle-row-B5iXNWCJ.esm.js","names":["shaderDefaults: Required<ShaderBorderConfig>","Root"],"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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"}