react-marketing-ui 0.0.1

package/dist/theme-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/ease.ts","../src/lib/utils.ts","../src/components/action-swap.tsx","../src/components/button.tsx","../src/components/theme-toggle.tsx"],"names":["twMerge","clsx","useReducedMotion","useRef","useState","useLayoutEffect","jsxs","jsx","AnimatePresence","motion","cva"],"mappings":"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","file":"theme-toggle.js","sourcesContent":["/**\n * Easing curves shared across landing-ui components.\n */\n\n/** Smooth deceleration — matches the former CSS `ease-out-expo`. */\nexport const easeOut = [0.22, 1, 0.36, 1] as const;\n\n/** Gentle overshoot — bounce-like settle for spring alternatives. */\nexport const easeOutBack = [0.34, 1.56, 0.64, 1] as const;\n\n// ── Content-swap tokens (action-swap) ─────────────────────────────────────\n// Values mirror beui.dev's `lib/ease.ts` so vendored action-swap primitives\n// keep their upstream timing.\n\n/** Strong ease-out — the default `ease-out` reads weak at these durations. */\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\n\n/** CSS string form of {@link EASE_OUT} for inline style transitions. */\nexport const EASE_OUT_CSS = 'cubic-bezier(0.16, 1, 0.3, 1)';\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = { type: 'spring', stiffness: 460, damping: 30, mass: 0.55 } as const;\n","import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","'use client';\n// Adapted from beui.dev/components/motion/action-swap (roll variant only).\n// Upstream imports `motion/react`; this project is on framer-motion, and its\n// blur/cascade animations and pre-styled <ActionSwapButton> are omitted — the\n// button's variant classes reference `bg-card`/`bg-primary`, which this site\n// doesn't define as --color-* tokens, so Tailwind would drop them silently.\n\nimport { AnimatePresence, motion, useReducedMotion, type Variants } from 'framer-motion';\nimport { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport { EASE_OUT, EASE_OUT_CSS, SPRING_SWAP } from '../lib/ease.js';\nimport { cn } from '../lib/utils.js';\n\n/** The outgoing half rolls out faster than the incoming half settles. */\nconst ROLL_EXIT_TRANSITION = { duration: 0.14, ease: EASE_OUT } as const;\nconst ROLL_BLUR = 'blur(3px)';\n\n/** Rest state used under reduced motion — no travel, no blur. */\nconst AT_REST = { opacity: 1, y: 0, filter: 'blur(0px)' } as const;\n\n/** Text travels in percentages so the roll scales with the line height. */\nconst TEXT_VARIANTS: Variants = {\n  initial: { opacity: 0, y: '90%', filter: ROLL_BLUR },\n  animate: { opacity: 1, y: '0%', filter: 'blur(0px)', transition: SPRING_SWAP },\n  exit: { opacity: 0, y: '-90%', filter: ROLL_BLUR, transition: ROLL_EXIT_TRANSITION },\n};\n\n/** Icons travel in pixels — a glyph box has no line height to scale against. */\nconst ICON_VARIANTS: Variants = {\n  initial: { opacity: 0, y: 12, filter: ROLL_BLUR },\n  animate: { opacity: 1, y: 0, filter: 'blur(0px)', transition: SPRING_SWAP },\n  exit: { opacity: 0, y: -12, filter: ROLL_BLUR, transition: ROLL_EXIT_TRANSITION },\n};\n\nexport type ActionSwapRollProps = {\n  /** Identity of the current content — changing it triggers the roll. */\n  value: string;\n  children: ReactNode;\n  className?: string;\n};\n\n/**\n * Rolls `children` up out of the box while the new content rolls in from below,\n * animating the box's width so labels of different lengths don't snap.\n *\n * The visible label is the accessible name, so for the duration of a swap both\n * the outgoing and incoming text are in the accessibility tree. Give the host\n * control an explicit `aria-label` when that ambiguity matters.\n */\nexport function ActionSwapRollText({ value, children, className }: ActionSwapRollProps) {\n  const reduce = useReducedMotion() ?? false;\n  const measureRef = useRef<HTMLSpanElement>(null);\n  const [width, setWidth] = useState<number>();\n\n  // Deliberately un-keyed: the invisible copy is re-measured after every render\n  // so the box tracks content it can't diff (fonts finishing, text changing).\n  useLayoutEffect(() => {\n    const nextWidth = measureRef.current?.offsetWidth;\n    if (!nextWidth) return;\n    setWidth((current) => (current === nextWidth ? current : nextWidth));\n  });\n\n  return (\n    <span\n      className={cn('relative inline-block overflow-hidden whitespace-nowrap align-bottom', className)}\n      style={{ width, transition: reduce ? undefined : `width 220ms ${EASE_OUT_CSS}` }}\n    >\n      {/* Width source: laid out in flow but never painted, so the absolutely\n          positioned live copies below have something to size the box. */}\n      <span ref={measureRef} aria-hidden={true} className=\"invisible inline-block whitespace-nowrap\">\n        {children}\n      </span>\n      <AnimatePresence initial={false}>\n        <motion.span\n          key={value}\n          variants={TEXT_VARIANTS}\n          initial={reduce ? false : 'initial'}\n          animate={reduce ? AT_REST : 'animate'}\n          exit={reduce ? undefined : 'exit'}\n          className=\"absolute top-0 left-0 inline-block will-change-[opacity,filter,transform]\"\n        >\n          {children}\n        </motion.span>\n      </AnimatePresence>\n    </span>\n  );\n}\n\n/**\n * Icon counterpart to {@link ActionSwapRollText}. `popLayout` pulls the outgoing\n * icon out of flow so the pair overlaps in one cell instead of sitting side by\n * side mid-swap. Always `aria-hidden` — icons here restate a visible label.\n */\nexport function ActionSwapRollIcon({ value, children, className }: ActionSwapRollProps) {\n  const reduce = useReducedMotion() ?? false;\n\n  return (\n    <span className={cn('relative inline-grid shrink-0 place-items-center overflow-hidden', className)}>\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        <motion.span\n          key={value}\n          aria-hidden={true}\n          variants={ICON_VARIANTS}\n          initial={reduce ? false : 'initial'}\n          animate={reduce ? AT_REST : 'animate'}\n          exit={reduce ? undefined : 'exit'}\n          className=\"col-start-1 row-start-1 inline-flex items-center justify-center will-change-[opacity,filter,transform]\"\n        >\n          {children}\n        </motion.span>\n      </AnimatePresence>\n    </span>\n  );\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { cn } from '../lib/utils.js';\n\n/**\n * Shared marketing-site button styles.\n *\n * The `transition` in the base string matches the former `.button-transition`\n * utility — a pure-CSS morph so the component stays server-renderable.\n */\nconst buttonVariants = cva(\n  'group inline-flex items-center justify-center gap-1.5 font-medium [transition:opacity_.24s_80ms,transform_.15s_cubic-bezier(.4,0,.2,1),box-shadow_.15s_cubic-bezier(.4,0,.2,1),filter_.15s_cubic-bezier(.4,0,.2,1)] disabled:[transition:opacity_.1s]',\n  {\n    variants: {\n      variant: {\n        filled: 'bg-(--foreground) text-(--primary-foreground) shadow-elevated-3 hover:opacity-90',\n        bordered: 'border border-(--border-hi) bg-surface-3 text-foreground shadow-elevated-3 hover:bg-(--muted)',\n        ghost: 'text-(--foreground-secondary) hover:bg-(--surface-hover) hover:text-(--foreground)',\n      },\n      size: {\n        sm: 'h-8 px-3.5 text-[15px]',\n        md: 'h-9 px-5 text-[17px]',\n        lg: 'h-11 px-6 text-[17px]',\n        icon: 'size-11',\n      },\n      shape: {\n        rounded: 'rounded-interactive',\n        pill: 'rounded-full',\n      },\n    },\n    // Pill is the house standard — every CTA is fully rounded.\n    defaultVariants: { variant: 'filled', size: 'md', shape: 'pill' },\n  },\n);\n\nexport type ButtonProps = VariantProps<typeof buttonVariants> & {\n  showArrow?: boolean;\n  /**\n   * Set when `actionOrLink` is an off-site URL — renders the anchor with\n   * `target=\"_blank\"` and `rel=\"noopener noreferrer\"`.\n   */\n  external?: boolean;\n  /** Hover tooltip on the rendered anchor/button. */\n  title?: string;\n  /**\n   * String  → renders as a plain anchor <a href={...}>.\n   * Function → renders as a <button type=\"button\" onClick={...}>.\n   */\n  actionOrLink: string | (() => void);\n  children: ReactNode;\n  className?: string;\n  'aria-label'?: string;\n  'aria-expanded'?: boolean;\n};\n\n/**\n * Shared marketing-site button.\n *\n * variant=\"filled\"   → primary CTA  (inverse theming: bg-(--foreground) + text-(--primary-foreground)\n *                     + shadow-elevated-3 — flips with the theme so it pops against any surface)\n * variant=\"bordered\" → elevated surface + border (bg-surface-3 + shadow-elevated-3 + border)\n * variant=\"ghost\"    → transparent, muted text that gains a surface on hover\n * size=\"sm\"          → h-8,  px-3.5, text-[15px]   (navbar / compact)\n * size=\"md\"          → h-9,  px-5,   text-[17px]   (default)\n * size=\"lg\"          → h-11, px-6,   text-[17px]   (hero CTAs)\n * size=\"icon\"        → size-11 square              (icon-only buttons)\n * shape=\"pill\"       → fully rounded (rounded-full); pill is the default\n * showArrow          → chevron right at rest, morphs to arrow-right on hover\n *\n * Server-renderable: the arrow morph is pure CSS (group-hover), so no client\n * state or animation library is needed. When `actionOrLink` is a function the\n * component renders a <button>; passing a function requires a client-component\n * parent (functions can't cross the server→client boundary), which is inherent\n * to any onClick prop and unchanged by this component being server-capable.\n */\nexport function Button({\n  variant,\n  size,\n  shape,\n  showArrow = false,\n  external = false,\n  title,\n  actionOrLink,\n  children,\n  className,\n  'aria-label': ariaLabel,\n  'aria-expanded': ariaExpanded,\n}: ButtonProps) {\n  const buttonClassName = cn(buttonVariants({ variant, size, shape }), className);\n\n  /*\n   * Single SVG that morphs from  ›  to  →  on hover — pure CSS, no JS.\n   * The shaft draws in from the left (stroke-dashoffset 9 → 0) and the arrowhead\n   * nudges right. Draw-in is slower (.22s) than the reverse (.08s), matching the\n   * asymmetric timing of the former framer-motion version. ease = cubic-bezier(.22,1,.36,1).\n   */\n  const arrowSlot = showArrow && (\n    <svg\n      viewBox=\"0 0 14 14\"\n      width=\"14\"\n      height=\"14\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden={true}\n      className=\"shrink-0\"\n    >\n      {/* Shaft — draws in from the left */}\n      <line\n        x1=\"0\"\n        y1=\"7\"\n        x2=\"9\"\n        y2=\"7\"\n        strokeDasharray=\"9\"\n        className=\"[stroke-dashoffset:9] [transition:stroke-dashoffset_.08s_cubic-bezier(.22,1,.36,1)] group-hover:[stroke-dashoffset:0] group-hover:[transition-duration:.22s]\"\n      />\n      {/* Arrowhead — nudges right so the shaft \"connects\" underneath */}\n      <path\n        d=\"M5 3l4 4-4 4\"\n        className=\"[transform:translateX(0)] [transition:transform_.22s_cubic-bezier(.22,1,.36,1)] group-hover:[transform:translateX(2px)]\"\n      />\n    </svg>\n  );\n\n  if (typeof actionOrLink === 'string')\n    return (\n      <a\n        href={actionOrLink}\n        className={cn(buttonClassName, 'no-underline')}\n        aria-label={ariaLabel}\n        title={title}\n        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n      >\n        {children}\n        {arrowSlot}\n      </a>\n    );\n\n  return (\n    <button\n      type=\"button\"\n      className={buttonClassName}\n      onClick={actionOrLink}\n      aria-label={ariaLabel}\n      aria-expanded={ariaExpanded}\n      title={title}\n    >\n      {children}\n      {arrowSlot}\n    </button>\n  );\n}\n","'use client';\n\nimport { ActionSwapRollIcon, ActionSwapRollText } from './action-swap.js';\nimport { Button } from './button.js';\n\n/*\n * Controlled theme toggle: the parent owns the current theme and the flip\n * handler, so there's no next-themes, no hydration detection, and no\n * pre-hydration CSS fallback — the theme is always known and the roll renders\n * directly on first paint.\n */\n\n// Icon-only (navbar / footer) sits on the `sm` height; the labeled row (mobile\n// drawer) on `md`. The `w-8 p-0` / `gap-2 px-3 text-[13px]` overrides turn the\n// shared <Button> sizes into the toggle's square and labeled geometries.\nconst ICON_LAYOUT = 'w-8 p-0';\nconst LABELED_LAYOUT = 'gap-2 px-3 text-[13px]';\n\n/** Sun glyph — the icon shown while dark, i.e. the theme you switch *to*. */\nfunction SunIcon() {\n  return (\n    <svg\n      width={14}\n      height={14}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden={true}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"1\" />\n      <line x1=\"12\" y1=\"23\" x2=\"12\" y2=\"21\" />\n      <line x1=\"3\" y1=\"12\" x2=\"1\" y2=\"12\" />\n      <line x1=\"23\" y1=\"12\" x2=\"21\" y2=\"12\" />\n      <line x1=\"5\" y1=\"5\" x2=\"3.5\" y2=\"3.5\" />\n      <line x1=\"20.5\" y1=\"20.5\" x2=\"19\" y2=\"19\" />\n      <line x1=\"19\" y1=\"5\" x2=\"20.5\" y2=\"3.5\" />\n      <line x1=\"4.5\" y1=\"20.5\" x2=\"3\" y2=\"19\" />\n    </svg>\n  );\n}\n\n/** Moon glyph — the icon shown while light, i.e. the theme you switch *to*. */\nfunction MoonIcon() {\n  return (\n    <svg\n      width={14}\n      height={14}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden={true}\n    >\n      <path d=\"M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z\" />\n    </svg>\n  );\n}\n\nexport type ThemeToggleProps = {\n  /** Current theme — drives which icon/label the roll shows. */\n  theme: 'light' | 'dark';\n  /** Flip handler; the parent persists the new theme. */\n  onToggle: () => void;\n  /** Render the labeled row (mobile drawer) instead of the icon-only square. */\n  showLabel?: boolean;\n};\n\nexport function ThemeToggle({ theme, onToggle, showLabel = false }: ThemeToggleProps) {\n  const size = showLabel ? 'md' : 'sm';\n  const layoutClassName = showLabel ? LABELED_LAYOUT : ICON_LAYOUT;\n\n  // The icon shows the theme you are switching *to*, matching the label.\n  const isDark = theme === 'dark';\n  const label = isDark ? 'Switch to light mode' : 'Switch to dark mode';\n\n  return (\n    <Button\n      variant=\"filled\"\n      size={size}\n      actionOrLink={onToggle}\n      className={layoutClassName}\n      // The visible label rolls, so mid-swap both strings are briefly in the\n      // tree. Naming the button explicitly keeps it unambiguous either way.\n      aria-label={label}\n    >\n      <ActionSwapRollIcon value={theme} className=\"h-4 w-4\">\n        {isDark ? <SunIcon /> : <MoonIcon />}\n      </ActionSwapRollIcon>\n      {showLabel ? <ActionSwapRollText value={theme}>{label}</ActionSwapRollText> : null}\n    </Button>\n  );\n}\n"]}

package/dist/theme-toggle.mjs

@@ -0,0 +1,7 @@
+export { ThemeToggle } from './chunk-KMXUQYR3.mjs';
+import './chunk-AYY7D2RJ.mjs';
+import './chunk-DA3I3Y5O.mjs';
+import './chunk-QAWSH567.mjs';
+import './chunk-NNHPQ67J.mjs';
+//# sourceMappingURL=theme-toggle.mjs.map
+//# sourceMappingURL=theme-toggle.mjs.map

package/dist/theme-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"theme-toggle.mjs"}

package/package.json

@@ -0,0 +1,428 @@
+{
+  "name": "react-marketing-ui",
+  "version": "0.0.1",
+  "description": "Reusable landing & marketing page UI components for React — animated text reveals, shader effects, magnetic tabs, and scroll-triggered entrances.",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "marketing",
+    "landing",
+    "animation",
+    "framer-motion",
+    "tailwind",
+    "storybook"
+  ],
+  "license": "MIT",
+  "author": "Ivan Stepanian <iv.stpn@gmail.com>",
+  "homepage": "https://github.com/iv-stpn/react-marketing-ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iv-stpn/react-marketing-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/iv-stpn/react-marketing-ui/issues"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./sparkles-text": {
+      "import": {
+        "types": "./dist/sparkles-text.d.ts",
+        "default": "./dist/sparkles-text.js"
+      },
+      "require": {
+        "types": "./dist/sparkles-text.d.cts",
+        "default": "./dist/sparkles-text.cjs"
+      }
+    },
+    "./rainbow-button": {
+      "import": {
+        "types": "./dist/rainbow-button.d.ts",
+        "default": "./dist/rainbow-button.js"
+      },
+      "require": {
+        "types": "./dist/rainbow-button.d.cts",
+        "default": "./dist/rainbow-button.cjs"
+      }
+    },
+    "./shine-border": {
+      "import": {
+        "types": "./dist/shine-border.d.ts",
+        "default": "./dist/shine-border.js"
+      },
+      "require": {
+        "types": "./dist/shine-border.d.cts",
+        "default": "./dist/shine-border.cjs"
+      }
+    },
+    "./liquid-metal": {
+      "import": {
+        "types": "./dist/liquid-metal.d.ts",
+        "default": "./dist/liquid-metal.js"
+      },
+      "require": {
+        "types": "./dist/liquid-metal.d.cts",
+        "default": "./dist/liquid-metal.cjs"
+      }
+    },
+    "./tabs": {
+      "import": {
+        "types": "./dist/tabs.d.ts",
+        "default": "./dist/tabs.js"
+      },
+      "require": {
+        "types": "./dist/tabs.d.cts",
+        "default": "./dist/tabs.cjs"
+      }
+    },
+    "./highlighter": {
+      "import": {
+        "types": "./dist/highlighter.d.ts",
+        "default": "./dist/highlighter.js"
+      },
+      "require": {
+        "types": "./dist/highlighter.d.cts",
+        "default": "./dist/highlighter.cjs"
+      }
+    },
+    "./fade-in": {
+      "import": {
+        "types": "./dist/fade-in.d.ts",
+        "default": "./dist/fade-in.js"
+      },
+      "require": {
+        "types": "./dist/fade-in.d.cts",
+        "default": "./dist/fade-in.cjs"
+      }
+    },
+    "./dia-text-reveal": {
+      "import": {
+        "types": "./dist/dia-text-reveal.d.ts",
+        "default": "./dist/dia-text-reveal.js"
+      },
+      "require": {
+        "types": "./dist/dia-text-reveal.d.cts",
+        "default": "./dist/dia-text-reveal.cjs"
+      }
+    },
+    "./accordion": {
+      "import": {
+        "types": "./dist/accordion.d.ts",
+        "default": "./dist/accordion.js"
+      },
+      "require": {
+        "types": "./dist/accordion.d.cts",
+        "default": "./dist/accordion.cjs"
+      }
+    },
+    "./card": {
+      "import": {
+        "types": "./dist/card.d.ts",
+        "default": "./dist/card.js"
+      },
+      "require": {
+        "types": "./dist/card.d.cts",
+        "default": "./dist/card.cjs"
+      }
+    },
+    "./animated-beam": {
+      "import": {
+        "types": "./dist/animated-beam.d.ts",
+        "default": "./dist/animated-beam.js"
+      },
+      "require": {
+        "types": "./dist/animated-beam.d.cts",
+        "default": "./dist/animated-beam.cjs"
+      }
+    },
+    "./glossy-button": {
+      "import": {
+        "types": "./dist/glossy-button.d.ts",
+        "default": "./dist/glossy-button.js"
+      },
+      "require": {
+        "types": "./dist/glossy-button.d.cts",
+        "default": "./dist/glossy-button.cjs"
+      }
+    },
+    "./feature-card": {
+      "import": {
+        "types": "./dist/feature-card.d.ts",
+        "default": "./dist/feature-card.js"
+      },
+      "require": {
+        "types": "./dist/feature-card.d.cts",
+        "default": "./dist/feature-card.cjs"
+      }
+    },
+    "./rolling-badge": {
+      "import": {
+        "types": "./dist/rolling-badge.d.ts",
+        "default": "./dist/rolling-badge.js"
+      },
+      "require": {
+        "types": "./dist/rolling-badge.d.cts",
+        "default": "./dist/rolling-badge.cjs"
+      }
+    },
+    "./elevated-input": {
+      "import": {
+        "types": "./dist/elevated-input.d.ts",
+        "default": "./dist/elevated-input.js"
+      },
+      "require": {
+        "types": "./dist/elevated-input.d.cts",
+        "default": "./dist/elevated-input.cjs"
+      }
+    },
+    "./input": {
+      "import": {
+        "types": "./dist/input.d.ts",
+        "default": "./dist/input.js"
+      },
+      "require": {
+        "types": "./dist/input.d.cts",
+        "default": "./dist/input.cjs"
+      }
+    },
+    "./password-input": {
+      "import": {
+        "types": "./dist/password-input.d.ts",
+        "default": "./dist/password-input.js"
+      },
+      "require": {
+        "types": "./dist/password-input.d.cts",
+        "default": "./dist/password-input.cjs"
+      }
+    },
+    "./range-slider": {
+      "import": {
+        "types": "./dist/range-slider.d.ts",
+        "default": "./dist/range-slider.js"
+      },
+      "require": {
+        "types": "./dist/range-slider.d.cts",
+        "default": "./dist/range-slider.cjs"
+      }
+    },
+    "./lib/cn": {
+      "import": {
+        "types": "./dist/lib/utils.d.ts",
+        "default": "./dist/lib/cn.js"
+      },
+      "require": {
+        "types": "./dist/lib/utils.d.cts",
+        "default": "./dist/lib/cn.cjs"
+      }
+    },
+    "./lib/use-media-query": {
+      "import": {
+        "types": "./dist/lib/use-media-query.d.ts",
+        "default": "./dist/lib/use-media-query.js"
+      },
+      "require": {
+        "types": "./dist/lib/use-media-query.d.cts",
+        "default": "./dist/lib/use-media-query.cjs"
+      }
+    },
+    "./button": {
+      "import": {
+        "types": "./dist/button.d.ts",
+        "default": "./dist/button.js"
+      },
+      "require": {
+        "types": "./dist/button.d.cts",
+        "default": "./dist/button.cjs"
+      }
+    },
+    "./action-swap": {
+      "import": {
+        "types": "./dist/action-swap.d.ts",
+        "default": "./dist/action-swap.js"
+      },
+      "require": {
+        "types": "./dist/action-swap.d.cts",
+        "default": "./dist/action-swap.cjs"
+      }
+    },
+    "./savings-badge": {
+      "import": {
+        "types": "./dist/savings-badge.d.ts",
+        "default": "./dist/savings-badge.js"
+      },
+      "require": {
+        "types": "./dist/savings-badge.d.cts",
+        "default": "./dist/savings-badge.cjs"
+      }
+    },
+    "./theme-toggle": {
+      "import": {
+        "types": "./dist/theme-toggle.d.ts",
+        "default": "./dist/theme-toggle.js"
+      },
+      "require": {
+        "types": "./dist/theme-toggle.d.cts",
+        "default": "./dist/theme-toggle.cjs"
+      }
+    },
+    "./grainient": {
+      "import": {
+        "types": "./dist/grainient.d.ts",
+        "default": "./dist/grainient.js"
+      },
+      "require": {
+        "types": "./dist/grainient.d.cts",
+        "default": "./dist/grainient.cjs"
+      }
+    },
+    "./flowchart-parts": {
+      "import": {
+        "types": "./dist/flowchart-parts.d.ts",
+        "default": "./dist/flowchart-parts.js"
+      },
+      "require": {
+        "types": "./dist/flowchart-parts.d.cts",
+        "default": "./dist/flowchart-parts.cjs"
+      }
+    },
+    "./navigation-menu": {
+      "import": {
+        "types": "./dist/navigation-menu.d.ts",
+        "default": "./dist/navigation-menu.js"
+      },
+      "require": {
+        "types": "./dist/navigation-menu.d.cts",
+        "default": "./dist/navigation-menu.cjs"
+      }
+    },
+    "./navigation-menu-styles": {
+      "import": {
+        "types": "./dist/navigation-menu-styles.d.ts",
+        "default": "./dist/navigation-menu-styles.js"
+      },
+      "require": {
+        "types": "./dist/navigation-menu-styles.d.cts",
+        "default": "./dist/navigation-menu-styles.cjs"
+      }
+    },
+    "./navigation-menu-icons": {
+      "import": {
+        "types": "./dist/navigation-menu-icons.d.ts",
+        "default": "./dist/navigation-menu-icons.js"
+      },
+      "require": {
+        "types": "./dist/navigation-menu-icons.d.cts",
+        "default": "./dist/navigation-menu-icons.cjs"
+      }
+    },
+    "./lib/surface": {
+      "import": {
+        "types": "./dist/surface.d.ts",
+        "default": "./dist/surface.js"
+      },
+      "require": {
+        "types": "./dist/surface.d.cts",
+        "default": "./dist/surface.cjs"
+      }
+    },
+    "./lib/breakpoints": {
+      "import": {
+        "types": "./dist/breakpoints.d.ts",
+        "default": "./dist/breakpoints.js"
+      },
+      "require": {
+        "types": "./dist/breakpoints.d.cts",
+        "default": "./dist/breakpoints.cjs"
+      }
+    },
+    "./lib/ease": {
+      "import": {
+        "types": "./dist/ease.d.ts",
+        "default": "./dist/ease.js"
+      },
+      "require": {
+        "types": "./dist/ease.d.cts",
+        "default": "./dist/ease.cjs"
+      }
+    },
+    "./grainient.css": "./dist/grainient.css"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsup && bun run build:types",
+    "build:types": "tsc -p tsconfig.build.json && bun scripts/gen-cjs-types.ts",
+    "build-storybook": "storybook build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "bun run build && changeset publish",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.42.2",
+    "tailwind-merge": "^3.6.0",
+    "ogl": "^1.0.11",
+    "rough-notation": "^0.5.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5",
+    "@changesets/changelog-github": "^0.6.0",
+    "@changesets/cli": "^2.31",
+    "@iv-stpn/biome-config": "^1.3",
+    "@paper-design/shaders-react": "^0.0.77",
+    "@storybook/addon-docs": "^10.5",
+    "@storybook/addon-themes": "^10.5",
+    "@storybook/addon-vitest": "^10.5",
+    "@storybook/react": "^10.5",
+    "@storybook/react-vite": "^10.5",
+    "@tailwindcss/vite": "^4.3",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitest/browser-playwright": "^4.1",
+    "husky": "^9",
+    "playwright": "^1.61",
+    "react": "^19.2",
+    "react-dom": "^19.2",
+    "storybook": "^10.5",
+    "tailwindcss": "^4",
+    "tsup": "^8",
+    "typescript": "^7",
+    "vite": "^8",
+    "vitest": "^4"
+  }
+}