@dynamic-labs-sdk/droplet 1.13.0 → 1.16.1

package/src/styles/globals.css

@@ -66,6 +66,7 @@
   --color-text-process: var(--text-process);
   --color-inactive-light: var(--inactive-light);
   --color-border-divider: var(--border-divider);
+  --color-border-hairline: var(--border-hairline);
   --color-border-default: var(--border-default);
   --color-border-hover: var(--border-hover);
   --color-border-strong: var(--border-strong);
@@ -143,6 +144,7 @@
   --brand-hover: oklch(0.652 0.172 253.28);
   --brand-accented: oklch(0.497 0.174 256.63);
   --ring: oklch(0.574 0.207 257.4);                   /* border-focused */
+  --ring-halo: color-mix(in oklch, var(--ring) 15%, transparent);
   --action: oklch(0.574 0.207 257.4);
 
   /* ——— Destructive ——— */
@@ -153,6 +155,9 @@
   --border: oklch(0.278 0.03 256.85 / 0.12);
   --input: oklch(0.278 0.03 256.85 / 0.12);
   --border-divider: oklch(0.928 0.006 264.53);
+  /* hairline 0.06 — the faint header rule, half the strength of --border (0.12).
+     Used for in-panel dividers (e.g. Dialog header) per the Dialog tuner spec. */
+  --border-hairline: oklch(0.278 0.03 256.85 / 0.06);
   --border-default: oklch(0.849 0.01 252.82);
   --border-hover: oklch(0.714 0.019 261.32);
   --border-strong: oklch(0.551 0.023 264.36);
@@ -227,6 +232,24 @@
   --shadow-field-hover: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.18), 0px 0px 1px 0px oklch(0.278 0.03 256.85 / 0.10);
   --shadow-elevated: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.10), 0px 5px 15px 0px oklch(0.278 0.03 256.85 / 0.08), 0px 15px 35px -5px oklch(0.278 0.03 256.85 / 0.20);
   --shadow-card-content: 0px 0px 2px 0px oklch(0.278 0.03 256.85 / 0.08), 0px 1px 2px 0px oklch(0.278 0.03 256.85 / 0.06);
+  --shadow-control: 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);
+  /* Hover ring for unchecked checkbox/radio — darkens the 0.20 ring to 0.30, matching the Switch's unchecked-track hover. */
+  --shadow-control-hover: 0 0 0 1px rgba(31,41,55,0.30),0 1px 2px 0 rgba(0,0,0,0.06),0 0 1px 0 rgba(0,0,0,0.02);
+  --shadow-control-checked: 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);
+  --shadow-control-thumb: 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);
+  --shadow-radio: 0 1px 2px rgba(0,0,0,0.06),0 0 1px rgba(31,41,55,0.08);
+
+  /* ——— Tray system ———
+     A container = muted SHELL + a raised white SHELF (rounded, ring + soft
+     shadow) + one muted TRAY on a chrome edge. Convention: footer present
+     (has actions) → footer tray; else → header tray (Table/CodeBlock). One
+     tray per container, footer-priority. Values tuned in the local Dialog tuner. */
+  --tray-chrome: var(--muted);          /* the shell + tray muted surface */
+  --tray-inset: 3px;                    /* shell padding around the shelf */
+  --tray-shelf-radius: 14px;            /* the raised white shelf corner */
+  /* Shelf "border" = box-shadow ring (shadows-over-borders) + lift + ambient. */
+  --tray-shelf-shadow: 0 0 0 1px rgba(31,41,55,0.04), 0px 1px 4px -1px rgba(0,0,0,0.04), 0px 2px 4px 0px rgba(0,0,0,0.024);
+  --tray-shell-ring: 0 0 0 1px rgba(31,41,55,0.08);   /* shell hairline (non-modal) */
 
   /* ——— Component-specific overlays (themeable) ——— */
   --selection-bg: oklch(0.574 0.207 257.4 / 0.15);
@@ -289,6 +312,8 @@
   --border: oklch(1 0 0 / 0.05);
   --input: oklch(1 0 0 / 0.08);
   --border-divider: oklch(0.220 0.014 231);
+  /* hairline 0.06 — faint header rule on dark surfaces. */
+  --border-hairline: oklch(1 0 0 / 0.06);
   --border-default: oklch(0.295 0.014 231);
   --border-hover: oklch(0.370 0.014 231);
   --border-strong: oklch(0.500 0.014 231);
@@ -360,6 +385,16 @@
   --shadow-field-hover: 0 0 0 1px oklch(1 0 0 / 0.18), 0px 0px 1px 0px oklch(0 0 0 / 0.10);
   --shadow-elevated: 0 0 0 1px oklch(1 0 0 / 0.06), 0px 5px 15px 0px oklch(0 0 0 / 0.25), 0px 15px 35px -5px oklch(0 0 0 / 0.45);
   --shadow-card-content: 0px 0px 2px 0px oklch(0 0 0 / 0.08), 0px 1px 2px 0px oklch(0 0 0 / 0.06);
+  --shadow-control: 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);
+  --shadow-control-hover: 0 0 0 1px rgba(255,255,255,0.25),0 1px 2px 0 rgba(0,0,0,0.20),0 0 1px 0 rgba(0,0,0,0.06);
+  --shadow-control-checked: 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);
+  --shadow-control-thumb: 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);
+  --shadow-radio: 0 1px 2px rgba(0,0,0,0.20),0 0 1px rgba(0,0,0,0.15);
+
+  /* Tray — redeclared so chrome/rings resolve against dark tokens (radii/inset are theme-agnostic). */
+  --tray-chrome: var(--muted);
+  --tray-shelf-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0px 1px 4px -1px rgba(0,0,0,0.30);
+  --tray-shell-ring: 0 0 0 1px rgba(255,255,255,0.08);
 
   /* ——— Component-specific overlays (themeable) ——— */
   --selection-bg: oklch(0.510 0.205 257 / 0.18);
@@ -499,17 +534,11 @@
    Control + label hover feedback
    ═══════════════════════════════════════════════════════════ */
 
-:has(> [data-slot='checkbox']):hover,
-:has(> [data-slot='switch']):hover,
-:has(> [data-slot='radio-group-item']):hover {
-  cursor: pointer;
-}
-
-:has(> [data-slot='checkbox']):hover > *,
-:has(> [data-slot='switch']):hover > *,
-:has(> [data-slot='radio-group-item']):hover > * {
-  cursor: pointer;
-}
+/* Cursor:pointer is provided by each control's own 44px hit area (the control
+   has cursor-pointer, which its ::after hit-area pseudo inherits), so the pointer
+   matches the clickable region exactly. A label/row wrapper sets its own
+   cursor-pointer. (Removed the previous `:has(> control):hover > *` rule, which
+   painted a standalone control's entire non-clickable parent as clickable.) */
 
 :has(> [data-slot='checkbox']):hover > [data-slot='checkbox'],
 :has(> [data-slot='switch']):hover > [data-slot='switch'],
@@ -600,20 +629,36 @@
 }
 
 /* ═══════════════════════════════════════════════════════════
-   Card with footer
+   Tray system — chrome slots on the muted shell
+   A header/footer that became the TRAY is a direct child of the muted
+   container shell (not the white shelf). Drop its solid chrome — the shelf's
+   rounded corner + the muted gap is the separator, not a border.
    ═══════════════════════════════════════════════════════════ */
 
-[data-slot='card-content']:has(+ [data-slot='card-footer']),
-[data-slot='dialog-body']:has(+ [data-slot='dialog-footer']) {
-  border-bottom-left-radius: 12px;
-  border-bottom-right-radius: 12px;
-  box-shadow: var(--shadow-card-content);
-  position: relative;
-  z-index: 1;
+[data-slot='dialog-content'][data-tray='footer'] > [data-slot='dialog-footer'] {
+  background: transparent;
+  border-top: none;
+}
+
+[data-slot='dialog-content'][data-tray='header'] > [data-slot='dialog-header'] {
+  background: transparent;
+  border-bottom: none;
+}
+
+[data-slot='card'][data-tray='footer'] > [data-slot='card-footer'] {
+  background: transparent;
+  border-top: none;
+}
+
+[data-slot='card'][data-tray='header'] > [data-slot='card-header'] {
+  background: transparent;
+  border-bottom: none;
+}
+
+[data-slot='alert-dialog-content'][data-tray='footer'] > [data-slot='alert-dialog-footer'] {
+  background: transparent;
 }
 
-[data-slot='card-content'] + [data-slot='card-footer'],
-[data-slot='dialog-body'] + [data-slot='dialog-footer'] {
-  margin-top: -12px;
-  padding-top: calc(12px + 1rem);
+[data-slot='alert-dialog-content'][data-tray='header'] > [data-slot='alert-dialog-header'] {
+  background: transparent;
 }

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

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

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