react-marketing-ui 0.0.1

package/dist/highlighter.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var framerMotion = require('framer-motion');
+var react = require('react');
+var roughNotation = require('rough-notation');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function useMediaQuery(query, defaultState = false) {
+  const [matches, setMatches] = react.useState(defaultState);
+  react.useEffect(() => {
+    const mql = globalThis.matchMedia(query);
+    setMatches(mql.matches);
+    const onChange = (e) => setMatches(e.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function resolveColor(element, color) {
+  if (!color.startsWith("var(")) return color;
+  const token = color.slice(4, -1).trim();
+  return globalThis.getComputedStyle(element).getPropertyValue(token).trim() || color;
+}
+var BREAKPOINTS = [
+  ["xs", 30],
+  ["sm", 40],
+  ["md", 50],
+  ["lg", 64],
+  ["xl", 80],
+  ["2xl", 96]
+];
+function getBreakpoint() {
+  let current = "base";
+  for (const [name, rem] of BREAKPOINTS) {
+    if (globalThis.matchMedia(`(min-width: ${rem}rem)`).matches) current = name;
+  }
+  return current;
+}
+function onBreakpointChange(listener) {
+  const queries = BREAKPOINTS.map(([, rem]) => globalThis.matchMedia(`(min-width: ${rem}rem)`));
+  for (const query of queries) query.addEventListener("change", listener);
+  return () => {
+    for (const query of queries) query.removeEventListener("change", listener);
+  };
+}
+function Highlighter({
+  children,
+  className,
+  action = "highlight",
+  color = "var(--marker-highlight)",
+  strokeWidth = 1.5,
+  animationDuration = 600,
+  delay = 0,
+  iterations = 2,
+  padding = 2,
+  multiline = true,
+  isView = false
+}) {
+  const elementRef = react.useRef(null);
+  const isInView = framerMotion.useInView(elementRef, { once: true, margin: "-10%" });
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const [themeVersion, setThemeVersion] = react.useState(0);
+  const shouldShow = !isView || isInView;
+  react.useLayoutEffect(() => {
+    const observer = new MutationObserver(() => setThemeVersion((v) => v + 1));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  react.useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!(shouldShow && element)) return;
+    let annotation;
+    let untrack;
+    const draw = () => {
+      annotation = roughNotation.annotate(element, {
+        type: action,
+        color: resolveColor(element, color),
+        strokeWidth,
+        animationDuration,
+        animate: !reducedMotion,
+        iterations,
+        padding,
+        multiline
+      });
+      annotation.show();
+      let drawnAt = getBreakpoint();
+      untrack = onBreakpointChange(() => {
+        const current = getBreakpoint();
+        if (current === drawnAt) return;
+        drawnAt = current;
+        annotation?.show();
+      });
+    };
+    const startDelay = reducedMotion ? 0 : delay;
+    const timer = startDelay > 0 ? globalThis.setTimeout(draw, startDelay) : void 0;
+    if (timer === void 0) draw();
+    return () => {
+      globalThis.clearTimeout(timer);
+      untrack?.();
+      annotation?.remove();
+    };
+  }, [
+    shouldShow,
+    action,
+    color,
+    strokeWidth,
+    animationDuration,
+    delay,
+    iterations,
+    padding,
+    multiline,
+    reducedMotion,
+    themeVersion
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative inline-block bg-transparent", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref: elementRef, children }) });
+}
+
+exports.Highlighter = Highlighter;
+//# sourceMappingURL=highlighter.js.map
+//# sourceMappingURL=highlighter.js.map

package/dist/highlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/use-media-query.ts","../src/lib/utils.ts","../src/components/highlighter.tsx"],"names":["useState","useEffect","twMerge","clsx","useRef","useInView","useLayoutEffect","annotate","jsx"],"mappings":"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","file":"highlighter.js","sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * Tracks a CSS media query, returning `true` when it matches.\n *\n * The default return before hydration is `false`; pass `defaultState`\n * to set a different initial value (e.g. `true` for dark-mode queries\n * whose SSR default is dark).\n */\nexport function useMediaQuery(query: string, defaultState = false): boolean {\n  const [matches, setMatches] = useState(defaultState);\n\n  // biome-ignore lint/plugin: subscribes to a matchMedia listener — an imperative side effect with no derived-state equivalent.\n  useEffect(() => {\n    const mql = globalThis.matchMedia(query);\n    setMatches(mql.matches);\n\n    const onChange = (e: MediaQueryListEvent) => setMatches(e.matches);\n    mql.addEventListener('change', onChange);\n    return () => mql.removeEventListener('change', onChange);\n  }, [query]);\n\n  return matches;\n}\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\nimport { useInView } from 'framer-motion';\nimport { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport { annotate } from 'rough-notation';\nimport type { RoughAnnotation } from 'rough-notation/lib/model';\nimport { useMediaQuery } from '../lib/use-media-query.js';\nimport { cn } from '../lib/utils.js';\n\ntype AnnotationAction = 'highlight' | 'underline' | 'box' | 'circle' | 'strike-through' | 'crossed-off' | 'bracket';\n\n/**\n * rough-notation writes the colour straight into the SVG's `stroke` presentation\n * attribute, where `var()` is never substituted — so a design token has to be\n * resolved against the live element before it is handed over.\n */\nfunction resolveColor(element: Element, color: string): string {\n  if (!color.startsWith('var(')) return color;\n  const token = color.slice(4, -1).trim();\n  return globalThis.getComputedStyle(element).getPropertyValue(token).trim() || color;\n}\n\n/**\n * The site's breakpoints, ascending, in the `rem` units Tailwind emits them in —\n * so they keep tracking the root font size the way the CSS does. Mirrored from\n * the library's `@theme` block (`xs` and `md` are custom, the rest are defaults).\n */\nconst BREAKPOINTS = [\n  ['xs', 30],\n  ['sm', 40],\n  ['md', 50],\n  ['lg', 64],\n  ['xl', 80],\n  ['2xl', 96],\n] as const;\n\ntype Breakpoint = 'base' | (typeof BREAKPOINTS)[number][0];\n\n/** `'base'` is the implicit below-`xs` band — the widths no `min-width` query claims. */\nfunction getBreakpoint(): Breakpoint {\n  let current: Breakpoint = 'base';\n  for (const [name, rem] of BREAKPOINTS) {\n    if (globalThis.matchMedia(`(min-width: ${rem}rem)`).matches) current = name;\n  }\n  return current;\n}\n\n/**\n * Call `listener` whenever the viewport crosses a breakpoint. Returns the\n * unsubscribe.\n *\n * The imperative counterpart to a `useBreakpoint` hook, for work that has to land\n * in the *same frame* as the layout change. Media-query change events fire during\n * the rendering steps, before `requestAnimationFrame` and before paint, so a\n * listener that writes to the DOM here is painted with the new layout rather than\n * one frame behind it.\n */\nfunction onBreakpointChange(listener: () => void): () => void {\n  const queries = BREAKPOINTS.map(([, rem]) => globalThis.matchMedia(`(min-width: ${rem}rem)`));\n  for (const query of queries) query.addEventListener('change', listener);\n  return () => {\n    for (const query of queries) query.removeEventListener('change', listener);\n  };\n}\n\ntype HighlighterProps = {\n  /** The words to annotate. Rendered inline, so they inherit the surrounding type. */\n  children: ReactNode;\n  className?: string;\n  /**\n   * Which marker stroke to draw.\n   * @default 'highlight'\n   */\n  action?: AnnotationAction;\n  /**\n   * Stroke colour. Accepts a `var(--token)` string, which is resolved against\n   * the live element and re-resolved whenever the theme flips.\n   * @default 'var(--marker-highlight)'\n   */\n  color?: string;\n  /** @default 1.5 */\n  strokeWidth?: number;\n  /** Milliseconds the stroke takes to draw itself on. @default 600 */\n  animationDuration?: number;\n  /**\n   * Milliseconds to hold the stroke back before it starts drawing. Ignored under\n   * reduced motion, where there is no draw-on to stagger.\n   * @default 0\n   */\n  delay?: number;\n  /** Passes over the same stroke, which is what makes it read as hand-drawn. @default 2 */\n  iterations?: number;\n  /** Pixels of slack between the text box and the stroke. @default 2 */\n  padding?: number;\n  /** Annotate every line the text wraps onto, rather than one box around all of them. @default true */\n  multiline?: boolean;\n  /** Hold the stroke back until the text scrolls into view. @default false */\n  isView?: boolean;\n};\n\n/**\n * Draws a hand-drawn marker stroke over a word or phrase.\n *\n * The stroke is an SVG that rough-notation injects on the client, so the\n * exported HTML ships the bare text and nothing about the layout depends on JS\n * having run. Readers who ask for reduced motion get the stroke without the\n * draw-on animation.\n */\nexport function Highlighter({\n  children,\n  className,\n  action = 'highlight',\n  color = 'var(--marker-highlight)',\n  strokeWidth = 1.5,\n  animationDuration = 600,\n  delay = 0,\n  iterations = 2,\n  padding = 2,\n  multiline = true,\n  isView = false,\n}: HighlighterProps) {\n  const elementRef = useRef<HTMLSpanElement>(null);\n  const isInView = useInView(elementRef, { once: true, margin: '-10%' });\n  const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  // Only a re-run trigger: the colour itself comes from the computed style, which\n  // is already correct on first paint because the theme class is set before\n  // hydration. The observer below bumps this whenever the class attribute flips.\n  const [themeVersion, setThemeVersion] = useState(0);\n\n  const shouldShow = !isView || isInView;\n\n  // Theme flips land as a class swap on <html> (the `.dark` class toggled by the\n  // theme provider), and rough-notation bakes the *resolved* token into the\n  // SVG's stroke attribute — which does not track var(). Re-running the draw\n  // effect with a freshly resolved colour is what repaints the stroke.\n  useLayoutEffect(() => {\n    const observer = new MutationObserver(() => setThemeVersion((v) => v + 1));\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });\n    return () => observer.disconnect();\n  }, []);\n\n  // Imperatively injects and tears down a rough-notation SVG measured off live\n  // DOM layout — a post-render side effect with no render-time equivalent.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: `themeVersion` is a redraw trigger, not a read value — the token resolves to a different colour per theme, so a flip has to repaint the stroke.\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (!(shouldShow && element)) return;\n\n    let annotation: RoughAnnotation | undefined;\n    let untrack: (() => void) | undefined;\n\n    const draw = () => {\n      annotation = annotate(element, {\n        type: action,\n        color: resolveColor(element, color),\n        strokeWidth,\n        animationDuration,\n        animate: !reducedMotion,\n        iterations,\n        padding,\n        multiline,\n      });\n      annotation.show();\n\n      // The wrapper below already carries the stroke wherever the page moves the\n      // text, so the only thing left that can stale it is a change in the text's\n      // own shape — which on a breakpoint-driven layout means a breakpoint. This\n      // is subscribed directly rather than through a `useBreakpoint` hook because\n      // a React state round-trip commits a frame or more after the browser has\n      // painted the new layout, which is exactly the lag being chased out.\n      // `show()` on a still-showing annotation re-renders un-animated, so the\n      // stroke resizes without replaying the draw-on.\n      let drawnAt = getBreakpoint();\n      untrack = onBreakpointChange(() => {\n        const current = getBreakpoint();\n        if (current === drawnAt) return;\n        drawnAt = current;\n        annotation?.show();\n      });\n    };\n\n    const startDelay = reducedMotion ? 0 : delay;\n    const timer = startDelay > 0 ? globalThis.setTimeout(draw, startDelay) : undefined;\n    if (timer === undefined) draw();\n\n    return () => {\n      globalThis.clearTimeout(timer);\n      untrack?.();\n      annotation?.remove();\n    };\n  }, [\n    shouldShow,\n    action,\n    color,\n    strokeWidth,\n    animationDuration,\n    delay,\n    iterations,\n    padding,\n    multiline,\n    reducedMotion,\n    themeVersion,\n  ]);\n\n  // Two spans, and both earn their place.\n  //\n  // rough-notation injects its SVG as a *sibling* of the annotated element, laid\n  // out `position: absolute; top: 0; left: 0`, with the stroke's coordinates baked\n  // as offsets from wherever that SVG lands. Left alone it resolves against\n  // whatever positioned ancestor it happens to find — for a centred, shrink-wrapped\n  // page section, effectively the viewport — so every reflow that slid the text\n  // sideways slid it out from under its own stroke, and only a redraw put it back.\n  // The `relative` wrapper makes the SVG resolve against a box the text sits\n  // inside instead, so the two now move as one and no listener is involved.\n  //\n  // The inner span stays plain `inline`, which is what makes `multiline` work:\n  // `getClientRects()` on an inline reports one box per line, so wrapped text gets\n  // a stroke per line rather than one slab drawn around the whole paragraph.\n  return (\n    <span className={cn('relative inline-block bg-transparent', className)}>\n      <span ref={elementRef}>{children}</span>\n    </span>\n  );\n}\n\nexport type { AnnotationAction, HighlighterProps };\n"]}

package/dist/highlighter.mjs

@@ -0,0 +1,5 @@
+export { Highlighter } from './chunk-5QQAPGR2.mjs';
+import './chunk-EYHT2EWJ.mjs';
+import './chunk-QAWSH567.mjs';
+//# sourceMappingURL=highlighter.mjs.map
+//# sourceMappingURL=highlighter.mjs.map

package/dist/highlighter.mjs.map

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

package/dist/index.css

@@ -0,0 +1,27 @@
+/* src/components/dia-text-reveal.css */
+@keyframes dia-sweep-a {
+  from {
+    background-position-x: var(--dia-sweep-from, 83.5%);
+  }
+  to {
+    background-position-x: var(--dia-sweep-to, 16.5%);
+  }
+}
+@keyframes dia-sweep-b {
+  from {
+    background-position-x: var(--dia-sweep-from, 83.5%);
+  }
+  to {
+    background-position-x: var(--dia-sweep-to, 16.5%);
+  }
+}
+
+/* src/components/grainient.css */
+.grainient-container {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dia-text-reveal.css","../src/components/grainient.css"],"sourcesContent":["/* Keyframes for DiaTextReveal's gradient sweep.\n\n   The band is a static gradient several times wider than the line (see\n   dia-text-reveal.sweep.ts); sweeping it is just sliding that image, so the only thing\n   animating here is background-position-x. Keeping it in CSS is the point: the sweep then\n   runs on the browser's animation clock instead of a requestAnimationFrame loop, so a busy\n   main thread — scrolling, WebGL render loops, React commits — can no longer stall it.\n\n   Two identical rules under different names. Re-assigning animation-name is what restarts a\n   CSS animation, and the rotating variant needs a restart per line; the alternative,\n   remounting the span, would leave wrap mode's ResizeObserver bound to a detached node.\n\n   The endpoints are supplied as custom properties by the component, which derives them from\n   the band geometry. The literal fallbacks match SWEEP_FROM / SWEEP_TO for the same defaults\n   and only apply if those properties never land. */\n\n@keyframes dia-sweep-a {\n  from {\n    background-position-x: var(--dia-sweep-from, 83.5%);\n  }\n  to {\n    background-position-x: var(--dia-sweep-to, 16.5%);\n  }\n}\n\n@keyframes dia-sweep-b {\n  from {\n    background-position-x: var(--dia-sweep-from, 83.5%);\n  }\n  to {\n    background-position-x: var(--dia-sweep-to, 16.5%);\n  }\n}\n",".grainient-container {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n"],"mappings":";AAgBA,WAAW;AACT;AACE,2BAAuB,IAAI,gBAAgB,EAAE;AAC/C;AACA;AACE,2BAAuB,IAAI,cAAc,EAAE;AAC7C;AACF;AAEA,WAAW;AACT;AACE,2BAAuB,IAAI,gBAAgB,EAAE;AAC/C;AACA;AACE,2BAAuB,IAAI,cAAc,EAAE;AAC7C;AACF;;;AChCA,CAAC;AACC,YAAU;AACV,SAAO;AACP,SAAO;AACP,UAAQ;AACR,YAAU;AACZ;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,56 @@
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from './components/accordion.js';
+export type { ActionSwapRollProps } from './components/action-swap.js';
+export { ActionSwapRollIcon, ActionSwapRollText } from './components/action-swap.js';
+export type { AnimatedBeamProps } from './components/animated-beam.js';
+export { AnimatedBeam } from './components/animated-beam.js';
+export type { ButtonProps } from './components/button.js';
+export { Button } from './components/button.js';
+export type { CardProps } from './components/card.js';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/card.js';
+export type { DiaTextRevealProps } from './components/dia-text-reveal.js';
+export { DiaTextReveal } from './components/dia-text-reveal.js';
+export { ElevatedInput } from './components/elevated-input.js';
+export type { FadeInProps, StaggerItemProps, StaggerProps } from './components/fade-in.js';
+export { FadeIn, Stagger, StaggerItem } from './components/fade-in.js';
+export type { FeatureCardProps } from './components/feature-card.js';
+export { FeatureCard } from './components/feature-card.js';
+export { ArrowLeft, ArrowRight, FlowDiamond, FlowNode, FlowPill, JoinArrow, SplitArrow, TurnDown, } from './components/flowchart-parts.js';
+export type { GlossyButtonProps } from './components/glossy-button.js';
+export { GlossyButton, glossyButtonVariants } from './components/glossy-button.js';
+export { default as Grainient } from './components/grainient.js';
+export type { GrainientProps } from './components/grainient.types.js';
+export type { AnnotationAction, HighlighterProps } from './components/highlighter.js';
+export { Highlighter } from './components/highlighter.js';
+export type { InputProps } from './components/input.js';
+export { Input } from './components/input.js';
+export type { LiquidMetalProps } from './components/liquid-metal.js';
+export { LiquidMetal } from './components/liquid-metal.js';
+export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPortal, NavigationMenuSub, NavigationMenuSubTrigger, NavigationMenuTrigger, NavigationMenuViewport, } from './components/navigation-menu.js';
+export { ArrowSvg, ChevronDownIcon, ChevronRightIcon } from './components/navigation-menu-icons.js';
+export type { NavigationMenuLinkProps, NavigationMenuProps, NavigationMenuSubProps, NavigationMenuViewportProps, } from './components/navigation-menu-styles.js';
+export { navigationMenuSubTriggerStyle, navigationMenuTriggerStyle, } from './components/navigation-menu-styles.js';
+export type { PasswordInputProps } from './components/password-input.js';
+export { PasswordInput } from './components/password-input.js';
+export type { RainbowButtonProps } from './components/rainbow-button.js';
+export { RainbowButton, rainbowButtonVariants } from './components/rainbow-button.js';
+export type { RangeSliderProps, Tick } from './components/range-slider.js';
+export { RangeSlider } from './components/range-slider.js';
+export type { BadgeEntry, RollingBadgeProps } from './components/rolling-badge.js';
+export { RollingBadge } from './components/rolling-badge.js';
+export { SavingsBadge } from './components/savings-badge.js';
+export type { ShineBorderProps } from './components/shine-border.js';
+export { ShineBorder } from './components/shine-border.js';
+export type { SparklesTextProps } from './components/sparkles-text.js';
+export { SparklesText } from './components/sparkles-text.js';
+export type { Tab, TabsProps } from './components/tabs.js';
+export { Tabs } from './components/tabs.js';
+export type { ThemeToggleProps } from './components/theme-toggle.js';
+export { ThemeToggle } from './components/theme-toggle.js';
+export type { Breakpoint } from './lib/breakpoints.js';
+export { BREAKPOINTS, getBreakpoint, onBreakpointChange, useBreakpoint } from './lib/breakpoints.js';
+export { EASE_OUT, EASE_OUT_CSS, easeOut, easeOutBack, SPRING_SWAP } from './lib/ease.js';
+export type { SurfaceLevel } from './lib/surface.js';
+export { solidSurface } from './lib/surface.js';
+export type { CSSPropertiesWithVars } from './lib/utils.js';
+export { cn, hasKey, noop, validCssVars } from './lib/utils.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from './components/accordion.js';
+export type { ActionSwapRollProps } from './components/action-swap.js';
+export { ActionSwapRollIcon, ActionSwapRollText } from './components/action-swap.js';
+export type { AnimatedBeamProps } from './components/animated-beam.js';
+export { AnimatedBeam } from './components/animated-beam.js';
+export type { ButtonProps } from './components/button.js';
+export { Button } from './components/button.js';
+export type { CardProps } from './components/card.js';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/card.js';
+export type { DiaTextRevealProps } from './components/dia-text-reveal.js';
+export { DiaTextReveal } from './components/dia-text-reveal.js';
+export { ElevatedInput } from './components/elevated-input.js';
+export type { FadeInProps, StaggerItemProps, StaggerProps } from './components/fade-in.js';
+export { FadeIn, Stagger, StaggerItem } from './components/fade-in.js';
+export type { FeatureCardProps } from './components/feature-card.js';
+export { FeatureCard } from './components/feature-card.js';
+export { ArrowLeft, ArrowRight, FlowDiamond, FlowNode, FlowPill, JoinArrow, SplitArrow, TurnDown, } from './components/flowchart-parts.js';
+export type { GlossyButtonProps } from './components/glossy-button.js';
+export { GlossyButton, glossyButtonVariants } from './components/glossy-button.js';
+export { default as Grainient } from './components/grainient.js';
+export type { GrainientProps } from './components/grainient.types.js';
+export type { AnnotationAction, HighlighterProps } from './components/highlighter.js';
+export { Highlighter } from './components/highlighter.js';
+export type { InputProps } from './components/input.js';
+export { Input } from './components/input.js';
+export type { LiquidMetalProps } from './components/liquid-metal.js';
+export { LiquidMetal } from './components/liquid-metal.js';
+export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPortal, NavigationMenuSub, NavigationMenuSubTrigger, NavigationMenuTrigger, NavigationMenuViewport, } from './components/navigation-menu.js';
+export { ArrowSvg, ChevronDownIcon, ChevronRightIcon } from './components/navigation-menu-icons.js';
+export type { NavigationMenuLinkProps, NavigationMenuProps, NavigationMenuSubProps, NavigationMenuViewportProps, } from './components/navigation-menu-styles.js';
+export { navigationMenuSubTriggerStyle, navigationMenuTriggerStyle, } from './components/navigation-menu-styles.js';
+export type { PasswordInputProps } from './components/password-input.js';
+export { PasswordInput } from './components/password-input.js';
+export type { RainbowButtonProps } from './components/rainbow-button.js';
+export { RainbowButton, rainbowButtonVariants } from './components/rainbow-button.js';
+export type { RangeSliderProps, Tick } from './components/range-slider.js';
+export { RangeSlider } from './components/range-slider.js';
+export type { BadgeEntry, RollingBadgeProps } from './components/rolling-badge.js';
+export { RollingBadge } from './components/rolling-badge.js';
+export { SavingsBadge } from './components/savings-badge.js';
+export type { ShineBorderProps } from './components/shine-border.js';
+export { ShineBorder } from './components/shine-border.js';
+export type { SparklesTextProps } from './components/sparkles-text.js';
+export { SparklesText } from './components/sparkles-text.js';
+export type { Tab, TabsProps } from './components/tabs.js';
+export { Tabs } from './components/tabs.js';
+export type { ThemeToggleProps } from './components/theme-toggle.js';
+export { ThemeToggle } from './components/theme-toggle.js';
+export type { Breakpoint } from './lib/breakpoints.js';
+export { BREAKPOINTS, getBreakpoint, onBreakpointChange, useBreakpoint } from './lib/breakpoints.js';
+export { EASE_OUT, EASE_OUT_CSS, easeOut, easeOutBack, SPRING_SWAP } from './lib/ease.js';
+export type { SurfaceLevel } from './lib/surface.js';
+export { solidSurface } from './lib/surface.js';
+export type { CSSPropertiesWithVars } from './lib/utils.js';
+export { cn, hasKey, noop, validCssVars } from './lib/utils.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}