react-marketing-ui 0.0.3 → 0.0.4

package/dist/input.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var react = require('react');

package/dist/input.mjs

@@ -1,4 +1,109 @@
-export { Input } from './chunk-W22G7XHR.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { useId, useState } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(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 = useId();
+  const id = idProp ?? autoId;
+  const [focused, setFocused] = 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__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor: id, className: "px-1 font-medium text-(--color-foreground) text-sm", children: label }) : null,
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "pointer-events-none absolute top-0 bottom-0 left-3 z-10 flex items-center justify-center", children: leftAdornment }) : null,
+          /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { role: "alert", className: "px-1 text-(--color-destructive) text-xs", children: errorMessage }) : hint ? /* @__PURE__ */ jsx("p", { className: "px-1 text-(--color-muted-foreground) text-xs", children: hint }) : null
+  ] });
+}
+
+export { Input };
 //# sourceMappingURL=input.mjs.map
 //# sourceMappingURL=input.mjs.map

package/dist/input.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"input.mjs"}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/input.tsx"],"names":[],"mappings":";;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,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,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,KAAK,MAAA,IAAU,MAAA;AACrB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,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,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,uBAAA,EAAyB,SAAS,CAAA,EAClD,QAAA,EAAA;AAAA,IAAA,KAAA,uBACE,OAAA,EAAA,EAAM,OAAA,EAAS,IAAI,SAAA,EAAU,oDAAA,EAC3B,iBACH,CAAA,GACE,IAAA;AAAA,oBAEJ,IAAA;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,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0FAAA,EACZ,yBACH,CAAA,GACE,IAAA;AAAA,0BAEJ,GAAA;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,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2FAAA,EACZ,0BACH,CAAA,GACE;AAAA;AAAA;AAAA,KACN;AAAA,IAEC,YAAA,mBACC,GAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAK,SAAQ,SAAA,EAAU,yCAAA,EACvB,QAAA,EAAA,YAAA,EACH,CAAA,GACE,uBACF,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8CAAA,EAAgD,gBAAK,CAAA,GAChE;AAAA,GAAA,EACN,CAAA;AAEJ","file":"input.mjs","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/lib/breakpoints.js

@@ -1,8 +1,8 @@
+"use client";
 'use strict';
 
 var react = require('react');
 
-// src/lib/breakpoints.ts
 var BREAKPOINTS = [
   ["xs", 30],
   ["sm", 40],

package/dist/lib/breakpoints.js.map

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

@@ -1,3 +1,36 @@
-export { BREAKPOINTS, getBreakpoint, onBreakpointChange, useBreakpoint } from '../chunk-IHLGCS63.mjs';
+"use client";
+import { useCallback, useSyncExternalStore } from 'react';
+
+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 = useCallback(onBreakpointChange, []);
+  return useSyncExternalStore(subscribe, getBreakpoint, getBreakpointServer);
+}
+
+export { BREAKPOINTS, getBreakpoint, onBreakpointChange, useBreakpoint };
 //# sourceMappingURL=breakpoints.mjs.map
 //# sourceMappingURL=breakpoints.mjs.map

package/dist/lib/breakpoints.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"breakpoints.mjs"}
+{"version":3,"sources":["../../src/lib/breakpoints.ts"],"names":[],"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,GAAY,WAAA,CAAY,kBAAA,EAAoB,EAAE,CAAA;AACpD,EAAA,OAAO,oBAAA,CAAqB,SAAA,EAAW,aAAA,EAAe,mBAAmB,CAAA;AAC3E","file":"breakpoints.mjs","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/cn.js

@@ -1,9 +1,9 @@
+"use client";
 'use strict';
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 
-// src/lib/utils.ts
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }

package/dist/lib/cn.js.map

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

@@ -1,3 +1,19 @@
-export { cn, hasKey, noop, validCssVars } from '../chunk-QAWSH567.mjs';
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function validCssVars(style) {
+  return style;
+}
+function hasKey(key, obj) {
+  return obj !== null && typeof obj === "object" && Object.hasOwn(obj, key);
+}
+function noop() {
+}
+
+export { cn, hasKey, noop, validCssVars };
 //# sourceMappingURL=cn.mjs.map
 //# sourceMappingURL=cn.mjs.map

package/dist/lib/cn.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"cn.mjs"}
+{"version":3,"sources":["../../src/lib/utils.ts"],"names":[],"mappings":";;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,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.mjs","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/ease.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 // src/lib/ease.ts

package/dist/lib/ease.mjs

@@ -1,3 +1,11 @@
-export { EASE_OUT, EASE_OUT_CSS, SPRING_SWAP, easeOut, easeOutBack } from '../chunk-NNHPQ67J.mjs';
+"use client";
+// 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 };
+
+export { EASE_OUT, EASE_OUT_CSS, SPRING_SWAP, easeOut, easeOutBack };
 //# sourceMappingURL=ease.mjs.map
 //# sourceMappingURL=ease.mjs.map

package/dist/lib/ease.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"ease.mjs"}
+{"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.mjs","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/surface.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 // src/lib/surface.ts

package/dist/lib/surface.mjs

@@ -1,3 +1,39 @@
-export { solidSurface } from '../chunk-XZEDZVXT.mjs';
+"use client";
+// 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]}`;
+}
+
+export { solidSurface };
 //# sourceMappingURL=surface.mjs.map
 //# sourceMappingURL=surface.mjs.map

package/dist/lib/surface.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"surface.mjs"}
+{"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.mjs","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/use-media-query.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var react = require('react');

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

@@ -1,3 +1,18 @@
-export { useMediaQuery } from '../chunk-EYHT2EWJ.mjs';
+"use client";
+import { useState, useEffect } from 'react';
+
+function useMediaQuery(query, defaultState = false) {
+  const [matches, setMatches] = useState(defaultState);
+  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;
+}
+
+export { useMediaQuery };
 //# sourceMappingURL=use-media-query.mjs.map
 //# sourceMappingURL=use-media-query.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"use-media-query.mjs"}
+{"version":3,"sources":["../../src/lib/use-media-query.ts"],"names":[],"mappings":";;AAWO,SAAS,aAAA,CAAc,KAAA,EAAe,YAAA,GAAe,KAAA,EAAgB;AAC1E,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,YAAY,CAAA;AAGnD,EAAA,SAAA,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.mjs","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/liquid-metal.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var shadersReact = require('@paper-design/shaders-react');

package/dist/liquid-metal.mjs

@@ -1,4 +1,42 @@
-export { LiquidMetal } from './chunk-WLUGKBH7.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { LiquidMetal as LiquidMetal$1 } from '@paper-design/shaders-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function LiquidMetal({
+  colorBack = "#aaaaac",
+  colorTint = "#ffffff",
+  speed = 0.5,
+  repetition = 4,
+  distortion = 0.1,
+  scale = 1,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-0 z-0 overflow-hidden", className), style, children: /* @__PURE__ */ jsx(
+    LiquidMetal$1,
+    {
+      colorBack,
+      colorTint,
+      speed,
+      repetition,
+      distortion,
+      softness: 0,
+      shiftRed: 0.3,
+      shiftBlue: -0.3,
+      angle: 45,
+      shape: "none",
+      scale,
+      fit: "cover",
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
+}
+
+export { LiquidMetal };
 //# sourceMappingURL=liquid-metal.mjs.map
 //# sourceMappingURL=liquid-metal.mjs.map

package/dist/liquid-metal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"liquid-metal.mjs"}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/liquid-metal.tsx"],"names":["LiquidMetalShader"],"mappings":";;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACwBO,SAAS,WAAA,CAAY;AAAA,EAC1B,SAAA,GAAY,SAAA;AAAA,EACZ,SAAA,GAAY,SAAA;AAAA,EACZ,KAAA,GAAQ,GAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,UAAA,GAAa,GAAA;AAAA,EACb,KAAA,GAAQ,CAAA;AAAA,EACR,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,uBACE,GAAA,CAAC,SAAI,aAAA,EAAa,IAAA,EAAM,WAAW,EAAA,CAAG,0DAAA,EAA4D,SAAS,CAAA,EAAG,KAAA,EAC5G,QAAA,kBAAA,GAAA;AAAA,IAACA,aAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA,EAAU,CAAA;AAAA,MACV,QAAA,EAAU,GAAA;AAAA,MACV,SAAA,EAAW,IAAA;AAAA,MACX,KAAA,EAAO,EAAA;AAAA,MACP,KAAA,EAAM,MAAA;AAAA,MACN,KAAA;AAAA,MACA,GAAA,EAAI,OAAA;AAAA,MACJ,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,QAAQ,MAAA;AAAO;AAAA,GACzC,EACF,CAAA;AAEJ","file":"liquid-metal.mjs","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 { LiquidMetal as LiquidMetalShader } from '@paper-design/shaders-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { cn } from '../lib/utils.js';\n\n/* ── Shader wrapper ────────────────────────────────────── */\n\nexport type LiquidMetalProps = {\n  /** Base background color of the liquid metal. */\n  colorBack?: string;\n  /** Tint / highlight color for the chrome effect. */\n  colorTint?: string;\n  /** Animation speed (0.1–2.0 recommended). */\n  speed?: number;\n  /** Pattern stripe density (1–10). */\n  repetition?: number;\n  /** Wave distortion amount (0–1). */\n  distortion?: number;\n  /** Texture zoom (0.01–4). */\n  scale?: number;\n  className?: string;\n  style?: CSSProperties;\n};\n\n/**\n * Full-bleed animated liquid-metal shader. Absolutely positioned to fill its\n * nearest positioned ancestor; the WebGL canvas is decorative, so it is hidden\n * from assistive tech and never intercepts pointer events.\n */\nexport function LiquidMetal({\n  colorBack = '#aaaaac',\n  colorTint = '#ffffff',\n  speed = 0.5,\n  repetition = 4,\n  distortion = 0.1,\n  scale = 1,\n  className,\n  style,\n}: LiquidMetalProps) {\n  return (\n    <div aria-hidden={true} className={cn('pointer-events-none absolute inset-0 z-0 overflow-hidden', className)} style={style}>\n      <LiquidMetalShader\n        colorBack={colorBack}\n        colorTint={colorTint}\n        speed={speed}\n        repetition={repetition}\n        distortion={distortion}\n        softness={0}\n        shiftRed={0.3}\n        shiftBlue={-0.3}\n        angle={45}\n        shape=\"none\"\n        scale={scale}\n        fit=\"cover\"\n        style={{ width: '100%', height: '100%' }}\n      />\n    </div>\n  );\n}\n"]}

package/dist/navigation-menu-icons.js

@@ -1,8 +1,8 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/navigation-menu-icons.tsx
 function ChevronDownIcon(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 3.5L5 7.5L9 3.5", stroke: "currentColor", strokeWidth: "1.5" }) });
 }

package/dist/navigation-menu-icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/navigation-menu-icons.tsx"],"names":["jsx","jsxs"],"mappings":";;;;;AAEO,SAAS,gBAAgB,KAAA,EAAoC;AAClE,EAAA,uBACEA,cAAA,CAAC,SAAI,aAAA,EAAY,MAAA,EAAO,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,QAAQ,GAAG,KAAA,EACjF,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAqB,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,KAAA,EAAM,CAAA,EACvE,CAAA;AAEJ;AAEO,SAAS,iBAAiB,KAAA,EAAoC;AACnE,EAAA,uBACEA,cAAA,CAAC,SAAI,aAAA,EAAY,MAAA,EAAO,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,QAAQ,GAAG,KAAA,EACjF,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAqB,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,KAAA,EAAM,CAAA,EACvE,CAAA;AAEJ;AAEO,SAAS,SAAS,KAAA,EAAoC;AAC3D,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAQ,GAAG,KAAA,EACjF,QAAA,EAAA;AAAA,oBAAAD,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,iMAAA;AAAA,QACF,SAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBACAA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,kSAAA;AAAA,QACF,SAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBACAA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,sTAAA;AAAA,QACF,SAAA,EAAU;AAAA;AAAA;AACZ,GAAA,EACF,CAAA;AAEJ","file":"navigation-menu-icons.js","sourcesContent":["import type * as React from 'react';\n\nexport function ChevronDownIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg aria-hidden=\"true\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" {...props}>\n      <path d=\"M1 3.5L5 7.5L9 3.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  );\n}\n\nexport function ChevronRightIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg aria-hidden=\"true\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" {...props}>\n      <path d=\"M3.5 1L7.5 5L3.5 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  );\n}\n\nexport function ArrowSvg(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg aria-hidden=\"true\" width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-(--popup-surface,var(--surface-3))\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-border\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-border\"\n      />\n    </svg>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/navigation-menu-icons.tsx"],"names":["jsx","jsxs"],"mappings":";;;;AAEO,SAAS,gBAAgB,KAAA,EAAoC;AAClE,EAAA,uBACEA,cAAA,CAAC,SAAI,aAAA,EAAY,MAAA,EAAO,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,QAAQ,GAAG,KAAA,EACjF,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAqB,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,KAAA,EAAM,CAAA,EACvE,CAAA;AAEJ;AAEO,SAAS,iBAAiB,KAAA,EAAoC;AACnE,EAAA,uBACEA,cAAA,CAAC,SAAI,aAAA,EAAY,MAAA,EAAO,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,QAAQ,GAAG,KAAA,EACjF,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAqB,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,KAAA,EAAM,CAAA,EACvE,CAAA;AAEJ;AAEO,SAAS,SAAS,KAAA,EAAoC;AAC3D,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAQ,GAAG,KAAA,EACjF,QAAA,EAAA;AAAA,oBAAAD,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,iMAAA;AAAA,QACF,SAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBACAA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,kSAAA;AAAA,QACF,SAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBACAA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,sTAAA;AAAA,QACF,SAAA,EAAU;AAAA;AAAA;AACZ,GAAA,EACF,CAAA;AAEJ","file":"navigation-menu-icons.js","sourcesContent":["import type * as React from 'react';\n\nexport function ChevronDownIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg aria-hidden=\"true\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" {...props}>\n      <path d=\"M1 3.5L5 7.5L9 3.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  );\n}\n\nexport function ChevronRightIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg aria-hidden=\"true\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" {...props}>\n      <path d=\"M3.5 1L7.5 5L3.5 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  );\n}\n\nexport function ArrowSvg(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg aria-hidden=\"true\" width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-(--popup-surface,var(--surface-3))\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-border\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-border\"\n      />\n    </svg>\n  );\n}\n"]}

package/dist/navigation-menu-icons.mjs

@@ -1,3 +1,38 @@
-export { ArrowSvg, ChevronDownIcon, ChevronRightIcon } from './chunk-JVXJ6SFX.mjs';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", ...props, children: /* @__PURE__ */ jsx("path", { d: "M1 3.5L5 7.5L9 3.5", stroke: "currentColor", strokeWidth: "1.5" }) });
+}
+function ChevronRightIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", ...props, children: /* @__PURE__ */ jsx("path", { d: "M3.5 1L7.5 5L3.5 9", stroke: "currentColor", strokeWidth: "1.5" }) });
+}
+function ArrowSvg(props) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...props, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+        className: "fill-(--popup-surface,var(--surface-3))"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+        className: "fill-border"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+        className: "fill-border"
+      }
+    )
+  ] });
+}
+
+export { ArrowSvg, ChevronDownIcon, ChevronRightIcon };
 //# sourceMappingURL=navigation-menu-icons.mjs.map
 //# sourceMappingURL=navigation-menu-icons.mjs.map

package/dist/navigation-menu-icons.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"navigation-menu-icons.mjs"}
+{"version":3,"sources":["../src/components/navigation-menu-icons.tsx"],"names":[],"mappings":";;AAEO,SAAS,gBAAgB,KAAA,EAAoC;AAClE,EAAA,uBACE,GAAA,CAAC,SAAI,aAAA,EAAY,MAAA,EAAO,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,QAAQ,GAAG,KAAA,EACjF,8BAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAqB,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,KAAA,EAAM,CAAA,EACvE,CAAA;AAEJ;AAEO,SAAS,iBAAiB,KAAA,EAAoC;AACnE,EAAA,uBACE,GAAA,CAAC,SAAI,aAAA,EAAY,MAAA,EAAO,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,QAAQ,GAAG,KAAA,EACjF,8BAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAqB,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,KAAA,EAAM,CAAA,EACvE,CAAA;AAEJ;AAEO,SAAS,SAAS,KAAA,EAAoC;AAC3D,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAQ,GAAG,KAAA,EACjF,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,iMAAA;AAAA,QACF,SAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,kSAAA;AAAA,QACF,SAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,sTAAA;AAAA,QACF,SAAA,EAAU;AAAA;AAAA;AACZ,GAAA,EACF,CAAA;AAEJ","file":"navigation-menu-icons.mjs","sourcesContent":["import type * as React from 'react';\n\nexport function ChevronDownIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg aria-hidden=\"true\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" {...props}>\n      <path d=\"M1 3.5L5 7.5L9 3.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  );\n}\n\nexport function ChevronRightIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg aria-hidden=\"true\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" {...props}>\n      <path d=\"M3.5 1L7.5 5L3.5 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  );\n}\n\nexport function ArrowSvg(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg aria-hidden=\"true\" width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-(--popup-surface,var(--surface-3))\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-border\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-border\"\n      />\n    </svg>\n  );\n}\n"]}

package/dist/navigation-menu-styles.js

@@ -1,8 +1,8 @@
+"use client";
 'use strict';
 
 var classVarianceAuthority = require('class-variance-authority');
 
-// src/components/navigation-menu-styles.ts
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
   "box-border flex items-center justify-center gap-1.5 h-10 px-2.5 xs:px-3 m-0 rounded-md text-foreground font-medium !text-[15px] leading-6 select-none no-underline hover:text-foreground data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring focus-visible:relative"
 );

package/dist/navigation-menu-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/navigation-menu-styles.ts"],"names":["cva"],"mappings":";;;;;AAOO,IAAM,0BAAA,GAA6BA,0BAAA;AAAA,EACxC;AACF;AAEO,IAAM,6BAAA,GAAgCA,0BAAA;AAAA,EAC3C;AACF","file":"navigation-menu-styles.js","sourcesContent":["import type { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { cva } from 'class-variance-authority';\nimport type * as React from 'react';\nimport type { SurfaceLevel } from '../lib/surface.js';\n\ntype PositionerProps = React.ComponentProps<typeof NavigationMenuPrimitive.Positioner>;\n\nexport const navigationMenuTriggerStyle = cva(\n  'box-border flex items-center justify-center gap-1.5 h-10 px-2.5 xs:px-3 m-0 rounded-md text-foreground font-medium !text-[15px] leading-6 select-none no-underline hover:text-foreground data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring focus-visible:relative',\n);\n\nexport const navigationMenuSubTriggerStyle = cva(\n  'w-full text-left relative block rounded-md p-2.5 xs:p-3 no-underline text-inherit hover:bg-black/[0.07] dark:hover:bg-white/[0.07] hover:text-foreground active:bg-black/[0.11] dark:active:bg-white/[0.11] focus-visible:relative focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground',\n);\n\nexport interface NavigationMenuProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Root> {\n  side?: PositionerProps['side'];\n  sideOffset?: PositionerProps['sideOffset'];\n  align?: PositionerProps['align'];\n  alignOffset?: PositionerProps['alignOffset'];\n  collisionPadding?: PositionerProps['collisionPadding'];\n  collisionBoundary?: PositionerProps['collisionBoundary'];\n  positionMethod?: PositionerProps['positionMethod'];\n  arrow?: boolean;\n  /** Surface elevation level (1-8) for the bar. Defaults to 2 — subtle toolbar above the page. */\n  level?: SurfaceLevel;\n  /** Shadow weight (1-8) for the bar. Defaults to 2. */\n  shadowLevel?: SurfaceLevel;\n}\n\nexport interface NavigationMenuLinkProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Link> {\n  /**\n   * When true, applies trigger button styling for top-level navigation links\n   */\n  standalone?: boolean;\n}\n\nexport interface NavigationMenuViewportProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Viewport> {\n  side?: PositionerProps['side'];\n  sideOffset?: PositionerProps['sideOffset'];\n  align?: PositionerProps['align'];\n  alignOffset?: PositionerProps['alignOffset'];\n  collisionPadding?: PositionerProps['collisionPadding'];\n  collisionBoundary?: PositionerProps['collisionBoundary'];\n  positionMethod?: PositionerProps['positionMethod'];\n  arrow?: boolean;\n}\n\nexport interface NavigationMenuSubProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Root> {\n  side?: PositionerProps['side'];\n  sideOffset?: PositionerProps['sideOffset'];\n  align?: PositionerProps['align'];\n  alignOffset?: PositionerProps['alignOffset'];\n  arrow?: boolean;\n}\n"]}
+{"version":3,"sources":["../src/components/navigation-menu-styles.ts"],"names":["cva"],"mappings":";;;;AAOO,IAAM,0BAAA,GAA6BA,0BAAA;AAAA,EACxC;AACF;AAEO,IAAM,6BAAA,GAAgCA,0BAAA;AAAA,EAC3C;AACF","file":"navigation-menu-styles.js","sourcesContent":["import type { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { cva } from 'class-variance-authority';\nimport type * as React from 'react';\nimport type { SurfaceLevel } from '../lib/surface.js';\n\ntype PositionerProps = React.ComponentProps<typeof NavigationMenuPrimitive.Positioner>;\n\nexport const navigationMenuTriggerStyle = cva(\n  'box-border flex items-center justify-center gap-1.5 h-10 px-2.5 xs:px-3 m-0 rounded-md text-foreground font-medium !text-[15px] leading-6 select-none no-underline hover:text-foreground data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring focus-visible:relative',\n);\n\nexport const navigationMenuSubTriggerStyle = cva(\n  'w-full text-left relative block rounded-md p-2.5 xs:p-3 no-underline text-inherit hover:bg-black/[0.07] dark:hover:bg-white/[0.07] hover:text-foreground active:bg-black/[0.11] dark:active:bg-white/[0.11] focus-visible:relative focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground',\n);\n\nexport interface NavigationMenuProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Root> {\n  side?: PositionerProps['side'];\n  sideOffset?: PositionerProps['sideOffset'];\n  align?: PositionerProps['align'];\n  alignOffset?: PositionerProps['alignOffset'];\n  collisionPadding?: PositionerProps['collisionPadding'];\n  collisionBoundary?: PositionerProps['collisionBoundary'];\n  positionMethod?: PositionerProps['positionMethod'];\n  arrow?: boolean;\n  /** Surface elevation level (1-8) for the bar. Defaults to 2 — subtle toolbar above the page. */\n  level?: SurfaceLevel;\n  /** Shadow weight (1-8) for the bar. Defaults to 2. */\n  shadowLevel?: SurfaceLevel;\n}\n\nexport interface NavigationMenuLinkProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Link> {\n  /**\n   * When true, applies trigger button styling for top-level navigation links\n   */\n  standalone?: boolean;\n}\n\nexport interface NavigationMenuViewportProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Viewport> {\n  side?: PositionerProps['side'];\n  sideOffset?: PositionerProps['sideOffset'];\n  align?: PositionerProps['align'];\n  alignOffset?: PositionerProps['alignOffset'];\n  collisionPadding?: PositionerProps['collisionPadding'];\n  collisionBoundary?: PositionerProps['collisionBoundary'];\n  positionMethod?: PositionerProps['positionMethod'];\n  arrow?: boolean;\n}\n\nexport interface NavigationMenuSubProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Root> {\n  side?: PositionerProps['side'];\n  sideOffset?: PositionerProps['sideOffset'];\n  align?: PositionerProps['align'];\n  alignOffset?: PositionerProps['alignOffset'];\n  arrow?: boolean;\n}\n"]}

package/dist/navigation-menu-styles.mjs

@@ -1,3 +1,13 @@
-export { navigationMenuSubTriggerStyle, navigationMenuTriggerStyle } from './chunk-KBHYXLRG.mjs';
+"use client";
+import { cva } from 'class-variance-authority';
+
+var navigationMenuTriggerStyle = cva(
+  "box-border flex items-center justify-center gap-1.5 h-10 px-2.5 xs:px-3 m-0 rounded-md text-foreground font-medium !text-[15px] leading-6 select-none no-underline hover:text-foreground data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring focus-visible:relative"
+);
+var navigationMenuSubTriggerStyle = cva(
+  "w-full text-left relative block rounded-md p-2.5 xs:p-3 no-underline text-inherit hover:bg-black/[0.07] dark:hover:bg-white/[0.07] hover:text-foreground active:bg-black/[0.11] dark:active:bg-white/[0.11] focus-visible:relative focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground"
+);
+
+export { navigationMenuSubTriggerStyle, navigationMenuTriggerStyle };
 //# sourceMappingURL=navigation-menu-styles.mjs.map
 //# sourceMappingURL=navigation-menu-styles.mjs.map

package/dist/navigation-menu-styles.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"navigation-menu-styles.mjs"}
+{"version":3,"sources":["../src/components/navigation-menu-styles.ts"],"names":[],"mappings":";;AAOO,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACxC;AACF;AAEO,IAAM,6BAAA,GAAgC,GAAA;AAAA,EAC3C;AACF","file":"navigation-menu-styles.mjs","sourcesContent":["import type { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { cva } from 'class-variance-authority';\nimport type * as React from 'react';\nimport type { SurfaceLevel } from '../lib/surface.js';\n\ntype PositionerProps = React.ComponentProps<typeof NavigationMenuPrimitive.Positioner>;\n\nexport const navigationMenuTriggerStyle = cva(\n  'box-border flex items-center justify-center gap-1.5 h-10 px-2.5 xs:px-3 m-0 rounded-md text-foreground font-medium !text-[15px] leading-6 select-none no-underline hover:text-foreground data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring focus-visible:relative',\n);\n\nexport const navigationMenuSubTriggerStyle = cva(\n  'w-full text-left relative block rounded-md p-2.5 xs:p-3 no-underline text-inherit hover:bg-black/[0.07] dark:hover:bg-white/[0.07] hover:text-foreground active:bg-black/[0.11] dark:active:bg-white/[0.11] focus-visible:relative focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground',\n);\n\nexport interface NavigationMenuProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Root> {\n  side?: PositionerProps['side'];\n  sideOffset?: PositionerProps['sideOffset'];\n  align?: PositionerProps['align'];\n  alignOffset?: PositionerProps['alignOffset'];\n  collisionPadding?: PositionerProps['collisionPadding'];\n  collisionBoundary?: PositionerProps['collisionBoundary'];\n  positionMethod?: PositionerProps['positionMethod'];\n  arrow?: boolean;\n  /** Surface elevation level (1-8) for the bar. Defaults to 2 — subtle toolbar above the page. */\n  level?: SurfaceLevel;\n  /** Shadow weight (1-8) for the bar. Defaults to 2. */\n  shadowLevel?: SurfaceLevel;\n}\n\nexport interface NavigationMenuLinkProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Link> {\n  /**\n   * When true, applies trigger button styling for top-level navigation links\n   */\n  standalone?: boolean;\n}\n\nexport interface NavigationMenuViewportProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Viewport> {\n  side?: PositionerProps['side'];\n  sideOffset?: PositionerProps['sideOffset'];\n  align?: PositionerProps['align'];\n  alignOffset?: PositionerProps['alignOffset'];\n  collisionPadding?: PositionerProps['collisionPadding'];\n  collisionBoundary?: PositionerProps['collisionBoundary'];\n  positionMethod?: PositionerProps['positionMethod'];\n  arrow?: boolean;\n}\n\nexport interface NavigationMenuSubProps extends React.ComponentProps<typeof NavigationMenuPrimitive.Root> {\n  side?: PositionerProps['side'];\n  sideOffset?: PositionerProps['sideOffset'];\n  align?: PositionerProps['align'];\n  alignOffset?: PositionerProps['alignOffset'];\n  arrow?: boolean;\n}\n"]}

package/dist/navigation-menu.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var navigationMenu = require('@base-ui/react/navigation-menu');
@@ -6,8 +7,6 @@ var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
 
-// src/components/navigation-menu.tsx
-
 // src/lib/surface.ts
 var SURFACE_BG = {
   1: "bg-surface-1",