@luxfi/ui 6.1.2 → 7.0.0

package/dist/field.cjs

@@ -0,0 +1,183 @@
+"use client";
+'use strict';
+
+var LabelPrimitive = require('@radix-ui/react-label');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/field.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var space = String.fromCharCode(32);
+function getComponentDisplayName(type) {
+  if (typeof type === "string") return void 0;
+  if ("displayName" in type) return type.displayName;
+  return void 0;
+}
+var Field = React__namespace.forwardRef(
+  function Field2(props, ref) {
+    const {
+      label,
+      children,
+      helperText,
+      errorText,
+      optionalText,
+      size,
+      required,
+      disabled,
+      readOnly,
+      invalid,
+      floating,
+      id,
+      className,
+      style
+    } = props;
+    if (floating && label) {
+      const injectedProps2 = {
+        className: "peer",
+        placeholder: " ",
+        size,
+        floating,
+        disabled,
+        readOnly
+      };
+      const labelElement = /* @__PURE__ */ jsxRuntime.jsxs(
+        LabelPrimitive__namespace.Root,
+        {
+          className: cn(
+            "absolute left-3 top-1/2 -translate-y-1/2",
+            "text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+            "pointer-events-none select-none",
+            "origin-top-left transition-all duration-150",
+            "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75",
+            "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75"
+          ),
+          htmlFor: id,
+          children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
+            !required && optionalText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm", children: optionalText }),
+            errorText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm", children: [
+              "-",
+              space,
+              errorText
+            ] })
+          ]
+        }
+      );
+      const helperTextElement = helperText ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
+      const child2 = React__namespace.Children.only(children);
+      const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
+      if (isInputGroup) {
+        const inputElement2 = React__namespace.cloneElement(
+          React__namespace.Children.only(child2.props.children),
+          injectedProps2
+        );
+        const groupInputElement = React__namespace.cloneElement(
+          child2,
+          {},
+          inputElement2,
+          labelElement
+        );
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref,
+            id,
+            className: cn("relative w-full", className),
+            style,
+            "data-disabled": disabled || void 0,
+            "data-readonly": readOnly || void 0,
+            "data-invalid": invalid || void 0,
+            children: [
+              groupInputElement,
+              helperTextElement
+            ]
+          }
+        );
+      }
+      const inputElement = React__namespace.cloneElement(child2, injectedProps2);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          id,
+          className: cn("relative w-full", className),
+          style,
+          "data-disabled": disabled || void 0,
+          "data-readonly": readOnly || void 0,
+          "data-invalid": invalid || void 0,
+          children: [
+            inputElement,
+            labelElement,
+            helperTextElement
+          ]
+        }
+      );
+    }
+    const injectedProps = {
+      size
+    };
+    const child = React__namespace.Children.only(children);
+    const clonedChild = React__namespace.cloneElement(child, injectedProps);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        id,
+        className: cn("flex flex-col gap-1", className),
+        style,
+        "data-disabled": disabled || void 0,
+        "data-readonly": readOnly || void 0,
+        "data-invalid": invalid || void 0,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs(
+            LabelPrimitive__namespace.Root,
+            {
+              className: cn(
+                "text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]",
+                "dark:text-[var(--color-field-label,theme(colors.gray.300))]",
+                disabled && "opacity-40"
+              ),
+              htmlFor: id,
+              children: [
+                label,
+                required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
+                !required && optionalText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal", children: optionalText })
+              ]
+            }
+          ),
+          clonedChild,
+          helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }),
+          errorText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-fg-error,theme(colors.red.500))]", children: errorText })
+        ]
+      }
+    );
+  }
+);
+
+exports.Field = Field;

package/dist/field.d.cts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { InputProps } from './input.cjs';
+import { InputGroupProps } from './input-group.cjs';
+
+interface FieldProps {
+    readonly label?: React.ReactNode;
+    readonly helperText?: React.ReactNode;
+    readonly errorText?: React.ReactNode;
+    readonly optionalText?: React.ReactNode;
+    readonly children: React.ReactElement<InputProps> | React.ReactElement<InputGroupProps>;
+    readonly size?: 'sm' | 'md' | 'lg' | '2xl';
+    readonly required?: boolean;
+    readonly disabled?: boolean;
+    readonly readOnly?: boolean;
+    readonly invalid?: boolean;
+    readonly floating?: boolean;
+    readonly bgColor?: string | Record<string, string>;
+    readonly id?: string;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+}
+declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Field, type FieldProps };

package/dist/field.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { InputProps } from './input.js';
+import { InputGroupProps } from './input-group.js';
+
+interface FieldProps {
+    readonly label?: React.ReactNode;
+    readonly helperText?: React.ReactNode;
+    readonly errorText?: React.ReactNode;
+    readonly optionalText?: React.ReactNode;
+    readonly children: React.ReactElement<InputProps> | React.ReactElement<InputGroupProps>;
+    readonly size?: 'sm' | 'md' | 'lg' | '2xl';
+    readonly required?: boolean;
+    readonly disabled?: boolean;
+    readonly readOnly?: boolean;
+    readonly invalid?: boolean;
+    readonly floating?: boolean;
+    readonly bgColor?: string | Record<string, string>;
+    readonly id?: string;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+}
+declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Field, type FieldProps };

package/dist/field.js

@@ -0,0 +1,160 @@
+"use client";
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/field.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var space = String.fromCharCode(32);
+function getComponentDisplayName(type) {
+  if (typeof type === "string") return void 0;
+  if ("displayName" in type) return type.displayName;
+  return void 0;
+}
+var Field = React.forwardRef(
+  function Field2(props, ref) {
+    const {
+      label,
+      children,
+      helperText,
+      errorText,
+      optionalText,
+      size,
+      required,
+      disabled,
+      readOnly,
+      invalid,
+      floating,
+      id,
+      className,
+      style
+    } = props;
+    if (floating && label) {
+      const injectedProps2 = {
+        className: "peer",
+        placeholder: " ",
+        size,
+        floating,
+        disabled,
+        readOnly
+      };
+      const labelElement = /* @__PURE__ */ jsxs(
+        LabelPrimitive.Root,
+        {
+          className: cn(
+            "absolute left-3 top-1/2 -translate-y-1/2",
+            "text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+            "pointer-events-none select-none",
+            "origin-top-left transition-all duration-150",
+            "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75",
+            "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75"
+          ),
+          htmlFor: id,
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
+            !required && optionalText && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm", children: optionalText }),
+            errorText && /* @__PURE__ */ jsxs("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm", children: [
+              "-",
+              space,
+              errorText
+            ] })
+          ]
+        }
+      );
+      const helperTextElement = helperText ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
+      const child2 = React.Children.only(children);
+      const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
+      if (isInputGroup) {
+        const inputElement2 = React.cloneElement(
+          React.Children.only(child2.props.children),
+          injectedProps2
+        );
+        const groupInputElement = React.cloneElement(
+          child2,
+          {},
+          inputElement2,
+          labelElement
+        );
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref,
+            id,
+            className: cn("relative w-full", className),
+            style,
+            "data-disabled": disabled || void 0,
+            "data-readonly": readOnly || void 0,
+            "data-invalid": invalid || void 0,
+            children: [
+              groupInputElement,
+              helperTextElement
+            ]
+          }
+        );
+      }
+      const inputElement = React.cloneElement(child2, injectedProps2);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          id,
+          className: cn("relative w-full", className),
+          style,
+          "data-disabled": disabled || void 0,
+          "data-readonly": readOnly || void 0,
+          "data-invalid": invalid || void 0,
+          children: [
+            inputElement,
+            labelElement,
+            helperTextElement
+          ]
+        }
+      );
+    }
+    const injectedProps = {
+      size
+    };
+    const child = React.Children.only(children);
+    const clonedChild = React.cloneElement(child, injectedProps);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        className: cn("flex flex-col gap-1", className),
+        style,
+        "data-disabled": disabled || void 0,
+        "data-readonly": readOnly || void 0,
+        "data-invalid": invalid || void 0,
+        children: [
+          label && /* @__PURE__ */ jsxs(
+            LabelPrimitive.Root,
+            {
+              className: cn(
+                "text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]",
+                "dark:text-[var(--color-field-label,theme(colors.gray.300))]",
+                disabled && "opacity-40"
+              ),
+              htmlFor: id,
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
+                !required && optionalText && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal", children: optionalText })
+              ]
+            }
+          ),
+          clonedChild,
+          helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }),
+          errorText && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-fg-error,theme(colors.red.500))]", children: errorText })
+        ]
+      }
+    );
+  }
+);
+
+export { Field };

package/dist/greeks-display.cjs

@@ -0,0 +1,114 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var GREEKS = [
+  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-blue-400", barColor: "bg-blue-500", decimals: 4, maxMagnitude: 1 },
+  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-purple-400", barColor: "bg-purple-500", decimals: 4, maxMagnitude: 0.1 },
+  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-red-400", barColor: "bg-red-500", decimals: 4, maxMagnitude: 1 },
+  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-emerald-400", barColor: "bg-emerald-500", decimals: 4, maxMagnitude: 1 },
+  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-orange-400", barColor: "bg-orange-500", decimals: 4, maxMagnitude: 1 },
+  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-amber-400", barColor: "bg-amber-500", decimals: 1, maxMagnitude: 100 }
+];
+function GreekItem({ def, value, compact }) {
+  const magnitude = Math.min(Math.abs(value) / def.maxMagnitude, 1);
+  const displayValue = def.key === "iv" ? `${(value * 100).toFixed(def.decimals)}%` : value.toFixed(def.decimals);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1.5",
+        compact ? "min-w-0" : "min-w-[100px]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] font-semibold shrink-0", def.color), children: def.symbol }),
+        !compact && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-500 shrink-0 w-[34px]", children: def.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+          "font-mono tabular-nums text-xs text-zinc-200 shrink-0",
+          value < 0 && "text-red-400"
+        ), children: displayValue }),
+        !compact && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1 rounded-full bg-zinc-800 min-w-[24px] max-w-[48px] overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("h-full rounded-full transition-all", def.barColor),
+            style: { width: `${magnitude * 100}%`, opacity: 0.7 }
+          }
+        ) })
+      ]
+    }
+  );
+}
+var GreeksDisplay = React__namespace.forwardRef(
+  function GreeksDisplay2(props, ref) {
+    const {
+      delta,
+      gamma,
+      theta,
+      vega,
+      rho,
+      iv,
+      compact = false,
+      className,
+      ...rest
+    } = props;
+    const values = {
+      delta,
+      gamma,
+      theta,
+      vega,
+      rho,
+      iv
+    };
+    const activeGreeks = GREEKS.filter((g) => values[g.key] !== void 0);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-wrap items-center",
+          compact ? "gap-3" : "gap-4",
+          className
+        ),
+        ...rest,
+        children: activeGreeks.map((g) => /* @__PURE__ */ jsxRuntime.jsx(
+          GreekItem,
+          {
+            def: g,
+            value: values[g.key],
+            compact
+          },
+          g.key
+        ))
+      }
+    );
+  }
+);
+
+exports.GreeksDisplay = GreeksDisplay;

package/dist/greeks-display.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface GreeksDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly delta: number;
+    readonly gamma: number;
+    readonly theta: number;
+    readonly vega: number;
+    readonly rho?: number;
+    readonly iv?: number;
+    readonly compact?: boolean;
+}
+declare const GreeksDisplay: React.ForwardRefExoticComponent<GreeksDisplayProps & React.RefAttributes<HTMLDivElement>>;
+
+export { GreeksDisplay, type GreeksDisplayProps };

package/dist/greeks-display.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface GreeksDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly delta: number;
+    readonly gamma: number;
+    readonly theta: number;
+    readonly vega: number;
+    readonly rho?: number;
+    readonly iv?: number;
+    readonly compact?: boolean;
+}
+declare const GreeksDisplay: React.ForwardRefExoticComponent<GreeksDisplayProps & React.RefAttributes<HTMLDivElement>>;
+
+export { GreeksDisplay, type GreeksDisplayProps };

package/dist/greeks-display.js

@@ -0,0 +1,92 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var GREEKS = [
+  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-blue-400", barColor: "bg-blue-500", decimals: 4, maxMagnitude: 1 },
+  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-purple-400", barColor: "bg-purple-500", decimals: 4, maxMagnitude: 0.1 },
+  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-red-400", barColor: "bg-red-500", decimals: 4, maxMagnitude: 1 },
+  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-emerald-400", barColor: "bg-emerald-500", decimals: 4, maxMagnitude: 1 },
+  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-orange-400", barColor: "bg-orange-500", decimals: 4, maxMagnitude: 1 },
+  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-amber-400", barColor: "bg-amber-500", decimals: 1, maxMagnitude: 100 }
+];
+function GreekItem({ def, value, compact }) {
+  const magnitude = Math.min(Math.abs(value) / def.maxMagnitude, 1);
+  const displayValue = def.key === "iv" ? `${(value * 100).toFixed(def.decimals)}%` : value.toFixed(def.decimals);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1.5",
+        compact ? "min-w-0" : "min-w-[100px]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("text-[10px] font-semibold shrink-0", def.color), children: def.symbol }),
+        !compact && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-500 shrink-0 w-[34px]", children: def.label }),
+        /* @__PURE__ */ jsx("span", { className: cn(
+          "font-mono tabular-nums text-xs text-zinc-200 shrink-0",
+          value < 0 && "text-red-400"
+        ), children: displayValue }),
+        !compact && /* @__PURE__ */ jsx("div", { className: "flex-1 h-1 rounded-full bg-zinc-800 min-w-[24px] max-w-[48px] overflow-hidden", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("h-full rounded-full transition-all", def.barColor),
+            style: { width: `${magnitude * 100}%`, opacity: 0.7 }
+          }
+        ) })
+      ]
+    }
+  );
+}
+var GreeksDisplay = React.forwardRef(
+  function GreeksDisplay2(props, ref) {
+    const {
+      delta,
+      gamma,
+      theta,
+      vega,
+      rho,
+      iv,
+      compact = false,
+      className,
+      ...rest
+    } = props;
+    const values = {
+      delta,
+      gamma,
+      theta,
+      vega,
+      rho,
+      iv
+    };
+    const activeGreeks = GREEKS.filter((g) => values[g.key] !== void 0);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-wrap items-center",
+          compact ? "gap-3" : "gap-4",
+          className
+        ),
+        ...rest,
+        children: activeGreeks.map((g) => /* @__PURE__ */ jsx(
+          GreekItem,
+          {
+            def: g,
+            value: values[g.key],
+            compact
+          },
+          g.key
+        ))
+      }
+    );
+  }
+);
+
+export { GreeksDisplay };

package/dist/heading.cjs

@@ -0,0 +1,46 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/heading.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var LEVEL_TAG = {
+  "1": "h1",
+  "2": "h2",
+  "3": "h3"
+};
+var LEVEL_CLASSES = {
+  "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
+  "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
+  "3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
+};
+var BASE_CLASSES = "font-heading text-heading";
+var Heading = React__default.default.forwardRef(
+  function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
+    const Tag = level ? LEVEL_TAG[level] : "h2";
+    const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
+    const shimStyle = { ...styleProp };
+    if (mb !== void 0) shimStyle.marginBottom = typeof mb === "number" ? `${mb * 4}px` : mb;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Tag,
+      {
+        ref,
+        className: cn(BASE_CLASSES, levelClasses, className),
+        style: Object.keys(shimStyle).length > 0 ? shimStyle : void 0,
+        ...rest
+      }
+    );
+  }
+);
+
+exports.Heading = Heading;

package/dist/heading.d.cts

@@ -0,0 +1,10 @@
+import React__default from 'react';
+
+interface HeadingProps extends React__default.ComponentPropsWithoutRef<'h1'> {
+    level?: '1' | '2' | '3';
+    mb?: number | string;
+    size?: string;
+}
+declare const Heading: React__default.ForwardRefExoticComponent<HeadingProps & React__default.RefAttributes<HTMLHeadingElement>>;
+
+export { Heading, type HeadingProps };