react-marketing-ui 0.0.1

package/dist/index.mjs

@@ -0,0 +1,34 @@
+export { ArrowLeft, ArrowRight, FlowDiamond, FlowNode, FlowPill, JoinArrow, SplitArrow, TurnDown } from './chunk-KNPOZ34H.mjs';
+export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPortal, NavigationMenuSub, NavigationMenuSubTrigger, NavigationMenuTrigger, NavigationMenuViewport } from './chunk-AYLCYDUM.mjs';
+export { navigationMenuSubTriggerStyle, navigationMenuTriggerStyle } from './chunk-KBHYXLRG.mjs';
+export { ArrowSvg, ChevronDownIcon, ChevronRightIcon } from './chunk-JVXJ6SFX.mjs';
+export { BREAKPOINTS, getBreakpoint, onBreakpointChange, useBreakpoint } from './chunk-IHLGCS63.mjs';
+export { PasswordInput } from './chunk-VJENJHXJ.mjs';
+export { Input } from './chunk-W22G7XHR.mjs';
+export { RangeSlider } from './chunk-4PBVBXGY.mjs';
+export { SavingsBadge } from './chunk-6MB4UKRX.mjs';
+export { ThemeToggle } from './chunk-KMXUQYR3.mjs';
+export { Button } from './chunk-AYY7D2RJ.mjs';
+export { ActionSwapRollIcon, ActionSwapRollText } from './chunk-DA3I3Y5O.mjs';
+export { grainient_default as Grainient } from './chunk-CTZEI2YS.mjs';
+export { DiaTextReveal } from './chunk-YKGP5JIL.mjs';
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from './chunk-KRNWCJ4D.mjs';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-YM3U2OBE.mjs';
+export { solidSurface } from './chunk-XZEDZVXT.mjs';
+export { AnimatedBeam } from './chunk-M5MESV26.mjs';
+export { GlossyButton, glossyButtonVariants } from './chunk-WDR5VPZJ.mjs';
+export { FeatureCard } from './chunk-3SB6HUBA.mjs';
+export { RollingBadge } from './chunk-TPGLLSYV.mjs';
+export { ElevatedInput } from './chunk-6T5LR34O.mjs';
+export { SparklesText } from './chunk-OCZFHVVD.mjs';
+export { RainbowButton, rainbowButtonVariants } from './chunk-4VCFWVSJ.mjs';
+export { ShineBorder } from './chunk-R2E2J42H.mjs';
+export { LiquidMetal } from './chunk-WLUGKBH7.mjs';
+export { Tabs } from './chunk-MJYBPJBA.mjs';
+export { Highlighter } from './chunk-5QQAPGR2.mjs';
+import './chunk-EYHT2EWJ.mjs';
+export { cn, hasKey, noop, validCssVars } from './chunk-QAWSH567.mjs';
+export { FadeIn, Stagger, StaggerItem } from './chunk-WYJYLDUA.mjs';
+export { EASE_OUT, EASE_OUT_CSS, SPRING_SWAP, easeOut, easeOutBack } from './chunk-NNHPQ67J.mjs';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

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

package/dist/input.d.cts

@@ -0,0 +1,15 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+export type InputProps = {
+    label?: string;
+    error?: string | boolean;
+    hint?: string;
+    leftAdornment?: ReactNode;
+    rightAdornment?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    shape?: 'rounded' | 'pill';
+    className?: string;
+    inputClassName?: string;
+    inputType?: InputHTMLAttributes<HTMLInputElement>['type'];
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>;
+export declare function Input({ label, error, hint, leftAdornment, rightAdornment, size, shape, className, inputClassName, inputType, id: idProp, onFocus, onBlur, disabled, autoFocus, ...inputProps }: InputProps): import("react").JSX.Element;
+//# sourceMappingURL=input.d.ts.map

package/dist/input.d.ts

@@ -0,0 +1,15 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+export type InputProps = {
+    label?: string;
+    error?: string | boolean;
+    hint?: string;
+    leftAdornment?: ReactNode;
+    rightAdornment?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    shape?: 'rounded' | 'pill';
+    className?: string;
+    inputClassName?: string;
+    inputType?: InputHTMLAttributes<HTMLInputElement>['type'];
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>;
+export declare function Input({ label, error, hint, leftAdornment, rightAdornment, size, shape, className, inputClassName, inputType, id: idProp, onFocus, onBlur, disabled, autoFocus, ...inputProps }: InputProps): import("react").JSX.Element;
+//# sourceMappingURL=input.d.ts.map

package/dist/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAgClF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;CAC3D,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEjE,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,aAAa,EACb,cAAc,EACd,IAAW,EACX,KAAiB,EACjB,SAAS,EACT,cAAc,EACd,SAAkB,EAClB,EAAE,EAAE,MAAM,EACV,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACd,EAAE,UAAU,+BAyEZ"}

package/dist/input.js

@@ -0,0 +1,110 @@
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var FIELD_BORDER = {
+  idle: "border-(--color-border)",
+  focused: "border-(--color-foreground)/40",
+  error: "border-(--color-destructive)"
+};
+var FIELD_HEIGHT = {
+  sm: "h-8",
+  md: "h-9",
+  lg: "h-11"
+};
+var FIELD_SHAPE = {
+  rounded: "rounded-lg",
+  pill: "rounded-full"
+};
+var INPUT_SIZE = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var INPUT_PAD = {
+  sm: "px-2.5",
+  md: "px-3",
+  lg: "px-3.5"
+};
+function Input({
+  label,
+  error,
+  hint,
+  leftAdornment,
+  rightAdornment,
+  size = "md",
+  shape = "rounded",
+  className,
+  inputClassName,
+  inputType = "text",
+  id: idProp,
+  onFocus,
+  onBlur,
+  disabled,
+  autoFocus,
+  ...inputProps
+}) {
+  const autoId = react.useId();
+  const id = idProp ?? autoId;
+  const [focused, setFocused] = react.useState(false);
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === "string" ? error : null;
+  const state = hasError ? "error" : focused ? "focused" : "idle";
+  const hasLeft = Boolean(leftAdornment);
+  const hasRight = Boolean(rightAdornment);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "px-1 font-medium text-(--color-foreground) text-sm", children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative flex flex-row items-center overflow-hidden border",
+          FIELD_BORDER[state],
+          FIELD_HEIGHT[size],
+          FIELD_SHAPE[shape],
+          disabled && "opacity-60"
+        ),
+        children: [
+          hasLeft ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute top-0 bottom-0 left-3 z-10 flex items-center justify-center", children: leftAdornment }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              type: inputType,
+              disabled,
+              autoFocus,
+              onFocus: (event_) => {
+                setFocused(true);
+                onFocus?.(event_);
+              },
+              onBlur: (event_) => {
+                setFocused(false);
+                onBlur?.(event_);
+              },
+              className: cn(
+                "h-full min-w-0 flex-1 bg-transparent text-(--color-foreground) outline-none",
+                INPUT_SIZE[size],
+                hasLeft ? "pl-10" : INPUT_PAD[size],
+                hasRight ? "pr-10" : INPUT_PAD[size],
+                inputClassName
+              ),
+              ...inputProps
+            }
+          ),
+          hasRight ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute top-0 right-3 bottom-0 z-10 flex items-center justify-center", children: rightAdornment }) : null
+        ]
+      }
+    ),
+    errorMessage ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "px-1 text-(--color-destructive) text-xs", children: errorMessage }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-1 text-(--color-muted-foreground) text-xs", children: hint }) : null
+  ] });
+}
+
+exports.Input = Input;
+//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/input.tsx"],"names":["twMerge","clsx","useId","useState","jsxs","jsx"],"mappings":";;;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,YAAA,GAAuC;AAAA,EAC3C,IAAA,EAAM,yBAAA;AAAA,EACN,OAAA,EAAS,gCAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEA,IAAM,YAAA,GAAuC;AAAA,EAC3C,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,WAAA,GAAsC;AAAA,EAC1C,OAAA,EAAS,YAAA;AAAA,EACT,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,UAAA,GAAqC;AAAA,EACzC,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,SAAA,GAAoC;AAAA,EACxC,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,MAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAeO,SAAS,KAAA,CAAM;AAAA,EACpB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA,GAAY,MAAA;AAAA,EACZ,EAAA,EAAI,MAAA;AAAA,EACJ,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,SAASC,WAAA,EAAM;AACrB,EAAA,MAAM,KAAK,MAAA,IAAU,MAAA;AACrB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,QAAA,GAAW,QAAQ,KAAK,CAAA;AAC9B,EAAA,MAAM,YAAA,GAAe,OAAO,KAAA,KAAU,QAAA,GAAW,KAAA,GAAQ,IAAA;AACzD,EAAA,MAAM,KAAA,GAAQ,QAAA,GAAW,OAAA,GAAU,OAAA,GAAU,SAAA,GAAY,MAAA;AACzD,EAAA,MAAM,OAAA,GAAU,QAAQ,aAAa,CAAA;AACrC,EAAA,MAAM,QAAA,GAAW,QAAQ,cAAc,CAAA;AAEvC,EAAA,uCACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,uBAAA,EAAyB,SAAS,CAAA,EAClD,QAAA,EAAA;AAAA,IAAA,KAAA,kCACE,OAAA,EAAA,EAAM,OAAA,EAAS,IAAI,SAAA,EAAU,oDAAA,EAC3B,iBACH,CAAA,GACE,IAAA;AAAA,oBAEJC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,4DAAA;AAAA,UACA,aAAa,KAAK,CAAA;AAAA,UAClB,aAAa,IAAI,CAAA;AAAA,UACjB,YAAY,KAAK,CAAA;AAAA,UACjB,QAAA,IAAY;AAAA,SACd;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,OAAA,mBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0FAAA,EACZ,yBACH,CAAA,GACE,IAAA;AAAA,0BAEJA,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,EAAA;AAAA,cACA,IAAA,EAAM,SAAA;AAAA,cACN,QAAA;AAAA,cAEA,SAAA;AAAA,cACA,OAAA,EAAS,CAAC,MAAA,KAAW;AACnB,gBAAA,UAAA,CAAW,IAAI,CAAA;AACf,gBAAA,OAAA,GAAU,MAAM,CAAA;AAAA,cAClB,CAAA;AAAA,cACA,MAAA,EAAQ,CAAC,MAAA,KAAW;AAClB,gBAAA,UAAA,CAAW,KAAK,CAAA;AAChB,gBAAA,MAAA,GAAS,MAAM,CAAA;AAAA,cACjB,CAAA;AAAA,cACA,SAAA,EAAW,EAAA;AAAA,gBACT,6EAAA;AAAA,gBACA,WAAW,IAAI,CAAA;AAAA,gBACf,OAAA,GAAU,OAAA,GAAU,SAAA,CAAU,IAAI,CAAA;AAAA,gBAClC,QAAA,GAAW,OAAA,GAAU,SAAA,CAAU,IAAI,CAAA;AAAA,gBACnC;AAAA,eACF;AAAA,cACC,GAAG;AAAA;AAAA,WACN;AAAA,UAEC,2BACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2FAAA,EACZ,0BACH,CAAA,GACE;AAAA;AAAA;AAAA,KACN;AAAA,IAEC,YAAA,mBACCA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAK,SAAQ,SAAA,EAAU,yCAAA,EACvB,QAAA,EAAA,YAAA,EACH,CAAA,GACE,uBACFA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8CAAA,EAAgD,gBAAK,CAAA,GAChE;AAAA,GAAA,EACN,CAAA;AAEJ","file":"input.js","sourcesContent":["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 { type InputHTMLAttributes, type ReactNode, useId, useState } from 'react';\nimport { cn } from '../lib/utils.js';\n\nconst FIELD_BORDER: Record<string, string> = {\n  idle: 'border-(--color-border)',\n  focused: 'border-(--color-foreground)/40',\n  error: 'border-(--color-destructive)',\n};\n\nconst FIELD_HEIGHT: Record<string, string> = {\n  sm: 'h-8',\n  md: 'h-9',\n  lg: 'h-11',\n};\n\nconst FIELD_SHAPE: Record<string, string> = {\n  rounded: 'rounded-lg',\n  pill: 'rounded-full',\n};\n\nconst INPUT_SIZE: Record<string, string> = {\n  sm: 'text-xs',\n  md: 'text-sm',\n  lg: 'text-base',\n};\n\nconst INPUT_PAD: Record<string, string> = {\n  sm: 'px-2.5',\n  md: 'px-3',\n  lg: 'px-3.5',\n};\n\nexport type InputProps = {\n  label?: string;\n  error?: string | boolean;\n  hint?: string;\n  leftAdornment?: ReactNode;\n  rightAdornment?: ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  shape?: 'rounded' | 'pill';\n  className?: string;\n  inputClassName?: string;\n  inputType?: InputHTMLAttributes<HTMLInputElement>['type'];\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>;\n\nexport function Input({\n  label,\n  error,\n  hint,\n  leftAdornment,\n  rightAdornment,\n  size = 'md',\n  shape = 'rounded',\n  className,\n  inputClassName,\n  inputType = 'text',\n  id: idProp,\n  onFocus,\n  onBlur,\n  disabled,\n  autoFocus,\n  ...inputProps\n}: InputProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n  const [focused, setFocused] = useState(false);\n  const hasError = Boolean(error);\n  const errorMessage = typeof error === 'string' ? error : null;\n  const state = hasError ? 'error' : focused ? 'focused' : 'idle';\n  const hasLeft = Boolean(leftAdornment);\n  const hasRight = Boolean(rightAdornment);\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)}>\n      {label ? (\n        <label htmlFor={id} className=\"px-1 font-medium text-(--color-foreground) text-sm\">\n          {label}\n        </label>\n      ) : null}\n\n      <div\n        className={cn(\n          'relative flex flex-row items-center overflow-hidden border',\n          FIELD_BORDER[state],\n          FIELD_HEIGHT[size],\n          FIELD_SHAPE[shape],\n          disabled && 'opacity-60',\n        )}\n      >\n        {hasLeft ? (\n          <div className=\"pointer-events-none absolute top-0 bottom-0 left-3 z-10 flex items-center justify-center\">\n            {leftAdornment}\n          </div>\n        ) : null}\n\n        <input\n          id={id}\n          type={inputType}\n          disabled={disabled}\n          // biome-ignore lint/a11y/noAutofocus: forwarded HTML attribute — callers decide whether to autofocus\n          autoFocus={autoFocus}\n          onFocus={(event_) => {\n            setFocused(true);\n            onFocus?.(event_);\n          }}\n          onBlur={(event_) => {\n            setFocused(false);\n            onBlur?.(event_);\n          }}\n          className={cn(\n            'h-full min-w-0 flex-1 bg-transparent text-(--color-foreground) outline-none',\n            INPUT_SIZE[size],\n            hasLeft ? 'pl-10' : INPUT_PAD[size],\n            hasRight ? 'pr-10' : INPUT_PAD[size],\n            inputClassName,\n          )}\n          {...inputProps}\n        />\n\n        {hasRight ? (\n          <div className=\"pointer-events-none absolute top-0 right-3 bottom-0 z-10 flex items-center justify-center\">\n            {rightAdornment}\n          </div>\n        ) : null}\n      </div>\n\n      {errorMessage ? (\n        <p role=\"alert\" className=\"px-1 text-(--color-destructive) text-xs\">\n          {errorMessage}\n        </p>\n      ) : hint ? (\n        <p className=\"px-1 text-(--color-muted-foreground) text-xs\">{hint}</p>\n      ) : null}\n    </div>\n  );\n}\n"]}

package/dist/input.mjs

@@ -0,0 +1,4 @@
+export { Input } from './chunk-W22G7XHR.mjs';
+import './chunk-QAWSH567.mjs';
+//# sourceMappingURL=input.mjs.map
+//# sourceMappingURL=input.mjs.map

package/dist/input.mjs.map

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

package/dist/lib/breakpoints.d.cts

@@ -0,0 +1,36 @@
+/** Site breakpoints — `md` is 50rem here, not Tailwind's default 48rem. */
+export declare const BREAKPOINTS: readonly [readonly ["xs", 30], readonly ["sm", 40], readonly ["md", 50], readonly ["lg", 64], readonly ["xl", 80], readonly ["2xl", 96]];
+/** `'base'` is the implicit below-`xs` band — the widths no `min-width` query claims. */
+export type Breakpoint = 'base' | (typeof BREAKPOINTS)[number][0];
+/**
+ * The current breakpoint, read straight from `matchMedia`. Use this over
+ * `useBreakpoint` inside effects that need the *live* band: through the
+ * hydration pass the rendered value is still the server's `'base'`, which is a
+ * change away from the truth and will read as one.
+ */
+export declare function getBreakpoint(): Breakpoint;
+/**
+ * Call `listener` whenever the viewport crosses a breakpoint. Returns the
+ * unsubscribe.
+ *
+ * The imperative counterpart to `useBreakpoint`, for work that has to land in
+ * the *same frame* as the layout change. Media-query change events fire during
+ * the rendering steps, before `requestAnimationFrame` and before paint, so a
+ * listener that writes to the DOM here is painted with the new layout rather
+ * than one frame behind it. Going through React state instead costs a render
+ * round-trip — the scheduler runs the update in a later task, and the layout
+ * effect lands after the browser has already painted.
+ */
+export declare function onBreakpointChange(listener: () => void): () => void;
+/**
+ * The widest breakpoint the viewport currently satisfies, re-rendering only when
+ * it crosses from one band into another — not on every pixel of a resize.
+ *
+ * This is for work that has to be *redone* when the layout changes shape, like
+ * re-measuring something positioned against text that the gutters just moved. It
+ * is not for choosing what to render: the exported HTML has to be correct at
+ * every width before JS runs, so layout belongs in CSS breakpoints, and this
+ * returns `'base'` during SSR and the first client paint regardless of viewport.
+ */
+export declare function useBreakpoint(): Breakpoint;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/lib/breakpoints.d.ts

@@ -0,0 +1,36 @@
+/** Site breakpoints — `md` is 50rem here, not Tailwind's default 48rem. */
+export declare const BREAKPOINTS: readonly [readonly ["xs", 30], readonly ["sm", 40], readonly ["md", 50], readonly ["lg", 64], readonly ["xl", 80], readonly ["2xl", 96]];
+/** `'base'` is the implicit below-`xs` band — the widths no `min-width` query claims. */
+export type Breakpoint = 'base' | (typeof BREAKPOINTS)[number][0];
+/**
+ * The current breakpoint, read straight from `matchMedia`. Use this over
+ * `useBreakpoint` inside effects that need the *live* band: through the
+ * hydration pass the rendered value is still the server's `'base'`, which is a
+ * change away from the truth and will read as one.
+ */
+export declare function getBreakpoint(): Breakpoint;
+/**
+ * Call `listener` whenever the viewport crosses a breakpoint. Returns the
+ * unsubscribe.
+ *
+ * The imperative counterpart to `useBreakpoint`, for work that has to land in
+ * the *same frame* as the layout change. Media-query change events fire during
+ * the rendering steps, before `requestAnimationFrame` and before paint, so a
+ * listener that writes to the DOM here is painted with the new layout rather
+ * than one frame behind it. Going through React state instead costs a render
+ * round-trip — the scheduler runs the update in a later task, and the layout
+ * effect lands after the browser has already painted.
+ */
+export declare function onBreakpointChange(listener: () => void): () => void;
+/**
+ * The widest breakpoint the viewport currently satisfies, re-rendering only when
+ * it crosses from one band into another — not on every pixel of a resize.
+ *
+ * This is for work that has to be *redone* when the layout changes shape, like
+ * re-measuring something positioned against text that the gutters just moved. It
+ * is not for choosing what to render: the exported HTML has to be correct at
+ * every width before JS runs, so layout belongs in CSS breakpoints, and this
+ * returns `'base'` during SSR and the first client paint regardless of viewport.
+ */
+export declare function useBreakpoint(): Breakpoint;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/lib/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../src/lib/breakpoints.ts"],"names":[],"mappings":"AAEA,2EAA2E;AAC3E,eAAO,MAAM,WAAW,0IAOd,CAAC;AAEX,yFAAyF;AACzF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAM1C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAMnE;AAMD;;;;;;;;;GASG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAG1C"}

package/dist/lib/breakpoints.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var react = require('react');
+
+// src/lib/breakpoints.ts
+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 getBreakpointServer() {
+  return "base";
+}
+function useBreakpoint() {
+  const subscribe = react.useCallback(onBreakpointChange, []);
+  return react.useSyncExternalStore(subscribe, getBreakpoint, getBreakpointServer);
+}
+
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.getBreakpoint = getBreakpoint;
+exports.onBreakpointChange = onBreakpointChange;
+exports.useBreakpoint = useBreakpoint;
+//# sourceMappingURL=breakpoints.js.map
+//# sourceMappingURL=breakpoints.js.map

package/dist/lib/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/breakpoints.ts"],"names":["useCallback","useSyncExternalStore"],"mappings":";;;;;AAGO,IAAM,WAAA,GAAc;AAAA,EACzB,CAAC,MAAM,EAAE,CAAA;AAAA,EACT,CAAC,MAAM,EAAE,CAAA;AAAA,EACT,CAAC,MAAM,EAAE,CAAA;AAAA,EACT,CAAC,MAAM,EAAE,CAAA;AAAA,EACT,CAAC,MAAM,EAAE,CAAA;AAAA,EACT,CAAC,OAAO,EAAE;AACZ;AAWO,SAAS,aAAA,GAA4B;AAC1C,EAAA,IAAI,OAAA,GAAsB,MAAA;AAC1B,EAAA,KAAA,MAAW,CAAC,IAAA,EAAM,GAAG,CAAA,IAAK,WAAA,EAAa;AACrC,IAAA,IAAI,WAAW,UAAA,CAAW,CAAA,YAAA,EAAe,GAAG,CAAA,IAAA,CAAM,CAAA,CAAE,SAAS,OAAA,GAAU,IAAA;AAAA,EACzE;AACA,EAAA,OAAO,OAAA;AACT;AAcO,SAAS,mBAAmB,QAAA,EAAkC;AACnE,EAAA,MAAM,OAAA,GAAU,WAAA,CAAY,GAAA,CAAI,CAAC,GAAG,GAAG,CAAA,KAAM,UAAA,CAAW,UAAA,CAAW,CAAA,YAAA,EAAe,GAAG,MAAM,CAAC,CAAA;AAC5F,EAAA,KAAA,MAAW,KAAA,IAAS,OAAA,EAAS,KAAA,CAAM,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACtE,EAAA,OAAO,MAAM;AACX,IAAA,KAAA,MAAW,KAAA,IAAS,OAAA,EAAS,KAAA,CAAM,mBAAA,CAAoB,UAAU,QAAQ,CAAA;AAAA,EAC3E,CAAA;AACF;AAEA,SAAS,mBAAA,GAAkC;AACzC,EAAA,OAAO,MAAA;AACT;AAYO,SAAS,aAAA,GAA4B;AAC1C,EAAA,MAAM,SAAA,GAAYA,iBAAA,CAAY,kBAAA,EAAoB,EAAE,CAAA;AACpD,EAAA,OAAOC,0BAAA,CAAqB,SAAA,EAAW,aAAA,EAAe,mBAAmB,CAAA;AAC3E","file":"breakpoints.js","sourcesContent":["import { useCallback, useSyncExternalStore } from 'react';\n\n/** Site breakpoints — `md` is 50rem here, not Tailwind's default 48rem. */\nexport const BREAKPOINTS = [\n  ['xs', 30],\n  ['sm', 40],\n  ['md', 50],\n  ['lg', 64],\n  ['xl', 80],\n  ['2xl', 96],\n] as const;\n\n/** `'base'` is the implicit below-`xs` band — the widths no `min-width` query claims. */\nexport type Breakpoint = 'base' | (typeof BREAKPOINTS)[number][0];\n\n/**\n * The current breakpoint, read straight from `matchMedia`. Use this over\n * `useBreakpoint` inside effects that need the *live* band: through the\n * hydration pass the rendered value is still the server's `'base'`, which is a\n * change away from the truth and will read as one.\n */\nexport function 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 `useBreakpoint`, for work that has to land in\n * 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\n * than one frame behind it. Going through React state instead costs a render\n * round-trip — the scheduler runs the update in a later task, and the layout\n * effect lands after the browser has already painted.\n */\nexport function 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\nfunction getBreakpointServer(): Breakpoint {\n  return 'base';\n}\n\n/**\n * The widest breakpoint the viewport currently satisfies, re-rendering only when\n * it crosses from one band into another — not on every pixel of a resize.\n *\n * This is for work that has to be *redone* when the layout changes shape, like\n * re-measuring something positioned against text that the gutters just moved. It\n * is not for choosing what to render: the exported HTML has to be correct at\n * every width before JS runs, so layout belongs in CSS breakpoints, and this\n * returns `'base'` during SSR and the first client paint regardless of viewport.\n */\nexport function useBreakpoint(): Breakpoint {\n  const subscribe = useCallback(onBreakpointChange, []);\n  return useSyncExternalStore(subscribe, getBreakpoint, getBreakpointServer);\n}\n"]}

package/dist/lib/breakpoints.mjs

@@ -0,0 +1,3 @@
+export { BREAKPOINTS, getBreakpoint, onBreakpointChange, useBreakpoint } from '../chunk-IHLGCS63.mjs';
+//# sourceMappingURL=breakpoints.mjs.map
+//# sourceMappingURL=breakpoints.mjs.map

package/dist/lib/breakpoints.mjs.map

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

package/dist/lib/cn.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function validCssVars(style) {
+  return style;
+}
+function hasKey(key, obj) {
+  return obj !== null && typeof obj === "object" && Object.hasOwn(obj, key);
+}
+function noop() {
+}
+
+exports.cn = cn;
+exports.hasKey = hasKey;
+exports.noop = noop;
+exports.validCssVars = validCssVars;
+//# sourceMappingURL=cn.js.map
+//# sourceMappingURL=cn.js.map

package/dist/lib/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts"],"names":["twMerge","clsx"],"mappings":";;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AAiBO,SAAS,aAAa,KAAA,EAA6C;AACxE,EAAA,OAAO,KAAA;AACT;AAMO,SAAS,MAAA,CAA8B,KAAQ,GAAA,EAAyC;AAC7F,EAAA,OAAO,GAAA,KAAQ,QAAQ,OAAO,GAAA,KAAQ,YAAY,MAAA,CAAO,MAAA,CAAO,KAAK,GAAG,CAAA;AAC1E;AAEO,SAAS,IAAA,GAAa;AAE7B","file":"cn.js","sourcesContent":["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"]}

package/dist/lib/cn.mjs

@@ -0,0 +1,3 @@
+export { cn, hasKey, noop, validCssVars } from '../chunk-QAWSH567.mjs';
+//# sourceMappingURL=cn.mjs.map
+//# sourceMappingURL=cn.mjs.map

package/dist/lib/cn.mjs.map

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

package/dist/lib/ease.d.cts

@@ -0,0 +1,19 @@
+/**
+ * Easing curves shared across landing-ui components.
+ */
+/** Smooth deceleration — matches the former CSS `ease-out-expo`. */
+export declare const easeOut: readonly [0.22, 1, 0.36, 1];
+/** Gentle overshoot — bounce-like settle for spring alternatives. */
+export declare const easeOutBack: readonly [0.34, 1.56, 0.64, 1];
+/** Strong ease-out — the default `ease-out` reads weak at these durations. */
+export declare const EASE_OUT: readonly [0.16, 1, 0.3, 1];
+/** CSS string form of {@link EASE_OUT} for inline style transitions. */
+export declare const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";
+/** Content swaps — label/icon slots trading places inside a control. */
+export declare const SPRING_SWAP: {
+    readonly type: "spring";
+    readonly stiffness: 460;
+    readonly damping: 30;
+    readonly mass: 0.55;
+};
+//# sourceMappingURL=ease.d.ts.map

package/dist/lib/ease.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Easing curves shared across landing-ui components.
+ */
+/** Smooth deceleration — matches the former CSS `ease-out-expo`. */
+export declare const easeOut: readonly [0.22, 1, 0.36, 1];
+/** Gentle overshoot — bounce-like settle for spring alternatives. */
+export declare const easeOutBack: readonly [0.34, 1.56, 0.64, 1];
+/** Strong ease-out — the default `ease-out` reads weak at these durations. */
+export declare const EASE_OUT: readonly [0.16, 1, 0.3, 1];
+/** CSS string form of {@link EASE_OUT} for inline style transitions. */
+export declare const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";
+/** Content swaps — label/icon slots trading places inside a control. */
+export declare const SPRING_SWAP: {
+    readonly type: "spring";
+    readonly stiffness: 460;
+    readonly damping: 30;
+    readonly mass: 0.55;
+};
+//# sourceMappingURL=ease.d.ts.map

package/dist/lib/ease.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ease.d.ts","sourceRoot":"","sources":["../../src/lib/ease.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,oEAAoE;AACpE,eAAO,MAAM,OAAO,6BAA8B,CAAC;AAEnD,qEAAqE;AACrE,eAAO,MAAM,WAAW,gCAAiC,CAAC;AAM1D,8EAA8E;AAC9E,eAAO,MAAM,QAAQ,4BAA6B,CAAC;AAEnD,wEAAwE;AACxE,eAAO,MAAM,YAAY,kCAAkC,CAAC;AAE5D,wEAAwE;AACxE,eAAO,MAAM,WAAW;;;;;CAAuE,CAAC"}

package/dist/lib/ease.js

@@ -0,0 +1,16 @@
+'use strict';
+
+// src/lib/ease.ts
+var easeOut = [0.22, 1, 0.36, 1];
+var easeOutBack = [0.34, 1.56, 0.64, 1];
+var EASE_OUT = [0.16, 1, 0.3, 1];
+var EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";
+var SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55 };
+
+exports.EASE_OUT = EASE_OUT;
+exports.EASE_OUT_CSS = EASE_OUT_CSS;
+exports.SPRING_SWAP = SPRING_SWAP;
+exports.easeOut = easeOut;
+exports.easeOutBack = easeOutBack;
+//# sourceMappingURL=ease.js.map
+//# sourceMappingURL=ease.js.map

package/dist/lib/ease.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/ease.ts"],"names":[],"mappings":";;;AAKO,IAAM,OAAA,GAAU,CAAC,IAAA,EAAM,CAAA,EAAG,MAAM,CAAC;AAGjC,IAAM,WAAA,GAAc,CAAC,IAAA,EAAM,IAAA,EAAM,MAAM,CAAC;AAOxC,IAAM,QAAA,GAAW,CAAC,IAAA,EAAM,CAAA,EAAG,KAAK,CAAC;AAGjC,IAAM,YAAA,GAAe;AAGrB,IAAM,WAAA,GAAc,EAAE,IAAA,EAAM,QAAA,EAAU,WAAW,GAAA,EAAK,OAAA,EAAS,EAAA,EAAI,IAAA,EAAM,IAAA","file":"ease.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"]}

package/dist/lib/ease.mjs

@@ -0,0 +1,3 @@
+export { EASE_OUT, EASE_OUT_CSS, SPRING_SWAP, easeOut, easeOutBack } from '../chunk-NNHPQ67J.mjs';
+//# sourceMappingURL=ease.mjs.map
+//# sourceMappingURL=ease.mjs.map

package/dist/lib/ease.mjs.map

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

package/dist/lib/surface.d.cts

@@ -0,0 +1,14 @@
+export type SurfaceLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+/**
+ * Elevation for a free-floating surface: background, elevation variable, and the drop shadow with
+ * its rim inset painted in the same `box-shadow` — which leaves `::after` free for other purposes.
+ *
+ * Suits containers with no opaque children near their edges. A child painted over the rim (a sticky
+ * label, a pinned input, a dialog header) covers it, since nothing re-paints the rim above the
+ * children.
+ *
+ * When `level !== shadowLevel` the rim color tracks `shadowLevel` — the two cannot be controlled
+ * independently.
+ */
+export declare function solidSurface(level: SurfaceLevel, shadowLevel?: SurfaceLevel): string;
+//# sourceMappingURL=surface.d.ts.map

package/dist/lib/surface.d.ts

@@ -0,0 +1,14 @@
+export type SurfaceLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+/**
+ * Elevation for a free-floating surface: background, elevation variable, and the drop shadow with
+ * its rim inset painted in the same `box-shadow` — which leaves `::after` free for other purposes.
+ *
+ * Suits containers with no opaque children near their edges. A child painted over the rim (a sticky
+ * label, a pinned input, a dialog header) covers it, since nothing re-paints the rim above the
+ * children.
+ *
+ * When `level !== shadowLevel` the rim color tracks `shadowLevel` — the two cannot be controlled
+ * independently.
+ */
+export declare function solidSurface(level: SurfaceLevel, shadowLevel?: SurfaceLevel): string;
+//# sourceMappingURL=surface.d.ts.map

package/dist/lib/surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../src/lib/surface.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAuCzD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,EAAE,WAAW,GAAE,YAAoB,GAAG,MAAM,CAE3F"}

package/dist/lib/surface.js

@@ -0,0 +1,40 @@
+'use strict';
+
+// src/lib/surface.ts
+var SURFACE_BG = {
+  1: "bg-surface-1",
+  2: "bg-surface-2",
+  3: "bg-surface-3",
+  4: "bg-surface-4",
+  5: "bg-surface-5",
+  6: "bg-surface-6",
+  7: "bg-surface-7",
+  8: "bg-surface-8"
+};
+var SURFACE_VAR = {
+  1: "[--popup-surface:var(--surface-1)]",
+  2: "[--popup-surface:var(--surface-2)]",
+  3: "[--popup-surface:var(--surface-3)]",
+  4: "[--popup-surface:var(--surface-4)]",
+  5: "[--popup-surface:var(--surface-5)]",
+  6: "[--popup-surface:var(--surface-6)]",
+  7: "[--popup-surface:var(--surface-7)]",
+  8: "[--popup-surface:var(--surface-8)]"
+};
+var SURFACE_SHADOW_COMBINED = {
+  1: "shadow-elevated-1",
+  2: "shadow-elevated-2",
+  3: "shadow-elevated-3",
+  4: "shadow-elevated-4",
+  5: "shadow-elevated-5",
+  6: "shadow-elevated-6",
+  7: "shadow-elevated-7",
+  8: "shadow-elevated-8"
+};
+function solidSurface(level, shadowLevel = level) {
+  return `${SURFACE_BG[level]} ${SURFACE_SHADOW_COMBINED[shadowLevel]} ${SURFACE_VAR[level]}`;
+}
+
+exports.solidSurface = solidSurface;
+//# sourceMappingURL=surface.js.map
+//# sourceMappingURL=surface.js.map

package/dist/lib/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/surface.ts"],"names":[],"mappings":";;;AAEA,IAAM,UAAA,GAA2C;AAAA,EAC/C,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAEA,IAAM,WAAA,GAA4C;AAAA,EAChD,CAAA,EAAG,oCAAA;AAAA,EACH,CAAA,EAAG,oCAAA;AAAA,EACH,CAAA,EAAG,oCAAA;AAAA,EACH,CAAA,EAAG,oCAAA;AAAA,EACH,CAAA,EAAG,oCAAA;AAAA,EACH,CAAA,EAAG,oCAAA;AAAA,EACH,CAAA,EAAG,oCAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAMA,IAAM,uBAAA,GAAwD;AAAA,EAC5D,CAAA,EAAG,mBAAA;AAAA,EACH,CAAA,EAAG,mBAAA;AAAA,EACH,CAAA,EAAG,mBAAA;AAAA,EACH,CAAA,EAAG,mBAAA;AAAA,EACH,CAAA,EAAG,mBAAA;AAAA,EACH,CAAA,EAAG,mBAAA;AAAA,EACH,CAAA,EAAG,mBAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAaO,SAAS,YAAA,CAAa,KAAA,EAAqB,WAAA,GAA4B,KAAA,EAAe;AAC3F,EAAA,OAAO,CAAA,EAAG,UAAA,CAAW,KAAK,CAAC,CAAA,CAAA,EAAI,uBAAA,CAAwB,WAAW,CAAC,CAAA,CAAA,EAAI,WAAA,CAAY,KAAK,CAAC,CAAA,CAAA;AAC3F","file":"surface.js","sourcesContent":["export type SurfaceLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n\nconst SURFACE_BG: Record<SurfaceLevel, string> = {\n  1: 'bg-surface-1',\n  2: 'bg-surface-2',\n  3: 'bg-surface-3',\n  4: 'bg-surface-4',\n  5: 'bg-surface-5',\n  6: 'bg-surface-6',\n  7: 'bg-surface-7',\n  8: 'bg-surface-8',\n};\n\nconst SURFACE_VAR: Record<SurfaceLevel, string> = {\n  1: '[--popup-surface:var(--surface-1)]',\n  2: '[--popup-surface:var(--surface-2)]',\n  3: '[--popup-surface:var(--surface-3)]',\n  4: '[--popup-surface:var(--surface-4)]',\n  5: '[--popup-surface:var(--surface-5)]',\n  6: '[--popup-surface:var(--surface-6)]',\n  7: '[--popup-surface:var(--surface-7)]',\n  8: '[--popup-surface:var(--surface-8)]',\n};\n\n/**\n * Drops + rim insets in a single `box-shadow` (no `::after`). Used by `solidSurface()`.\n * Literal Tailwind classes so the scanner picks them up.\n */\nconst SURFACE_SHADOW_COMBINED: Record<SurfaceLevel, string> = {\n  1: 'shadow-elevated-1',\n  2: 'shadow-elevated-2',\n  3: 'shadow-elevated-3',\n  4: 'shadow-elevated-4',\n  5: 'shadow-elevated-5',\n  6: 'shadow-elevated-6',\n  7: 'shadow-elevated-7',\n  8: 'shadow-elevated-8',\n};\n\n/**\n * Elevation for a free-floating surface: background, elevation variable, and the drop shadow with\n * its rim inset painted in the same `box-shadow` — which leaves `::after` free for other purposes.\n *\n * Suits containers with no opaque children near their edges. A child painted over the rim (a sticky\n * label, a pinned input, a dialog header) covers it, since nothing re-paints the rim above the\n * children.\n *\n * When `level !== shadowLevel` the rim color tracks `shadowLevel` — the two cannot be controlled\n * independently.\n */\nexport function solidSurface(level: SurfaceLevel, shadowLevel: SurfaceLevel = level): string {\n  return `${SURFACE_BG[level]} ${SURFACE_SHADOW_COMBINED[shadowLevel]} ${SURFACE_VAR[level]}`;\n}\n"]}

package/dist/lib/surface.mjs

@@ -0,0 +1,3 @@
+export { solidSurface } from '../chunk-XZEDZVXT.mjs';
+//# sourceMappingURL=surface.mjs.map
+//# sourceMappingURL=surface.mjs.map

package/dist/lib/surface.mjs.map

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

package/dist/lib/use-media-query.d.cts

@@ -0,0 +1,9 @@
+/**
+ * Tracks a CSS media query, returning `true` when it matches.
+ *
+ * The default return before hydration is `false`; pass `defaultState`
+ * to set a different initial value (e.g. `true` for dark-mode queries
+ * whose SSR default is dark).
+ */
+export declare function useMediaQuery(query: string, defaultState?: boolean): boolean;
+//# sourceMappingURL=use-media-query.d.ts.map

package/dist/lib/use-media-query.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tracks a CSS media query, returning `true` when it matches.
+ *
+ * The default return before hydration is `false`; pass `defaultState`
+ * to set a different initial value (e.g. `true` for dark-mode queries
+ * whose SSR default is dark).
+ */
+export declare function useMediaQuery(query: string, defaultState?: boolean): boolean;
+//# sourceMappingURL=use-media-query.d.ts.map

package/dist/lib/use-media-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../src/lib/use-media-query.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,UAAQ,GAAG,OAAO,CAc1E"}

package/dist/lib/use-media-query.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var react = require('react');
+
+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;
+}
+
+exports.useMediaQuery = useMediaQuery;
+//# sourceMappingURL=use-media-query.js.map
+//# sourceMappingURL=use-media-query.js.map

package/dist/lib/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/use-media-query.ts"],"names":["useState","useEffect"],"mappings":";;;;AAWO,SAAS,aAAA,CAAc,KAAA,EAAe,YAAA,GAAe,KAAA,EAAgB;AAC1E,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,YAAY,CAAA;AAGnD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,GAAA,GAAM,UAAA,CAAW,UAAA,CAAW,KAAK,CAAA;AACvC,IAAA,UAAA,CAAW,IAAI,OAAO,CAAA;AAEtB,IAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAA2B,UAAA,CAAW,EAAE,OAAO,CAAA;AACjE,IAAA,GAAA,CAAI,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACvC,IAAA,OAAO,MAAM,GAAA,CAAI,mBAAA,CAAoB,QAAA,EAAU,QAAQ,CAAA;AAAA,EACzD,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,OAAO,OAAA;AACT","file":"use-media-query.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"]}

package/dist/lib/use-media-query.mjs

@@ -0,0 +1,3 @@
+export { useMediaQuery } from '../chunk-EYHT2EWJ.mjs';
+//# sourceMappingURL=use-media-query.mjs.map
+//# sourceMappingURL=use-media-query.mjs.map

package/dist/lib/use-media-query.mjs.map

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