@telia/teddy 0.0.2 → 0.0.4

package/dist/components/icon/index.d.ts

@@ -1,4 +1,5 @@
-import iconsHref from '../../icons/sprite.svg';
+import { default as iconsHref } from '../../icons/sprite.svg';
+
 export { Icon } from './icon';
 export type { IconName, IconProps } from './icon';
 export { iconsHref };

package/dist/components/icon/index.js

@@ -1,4 +1,4 @@
-import { default as e } from "../../assets/f2a2f391a886d395.svg";
+import { default as e } from "../../assets/5161b177f001ea1a.svg";
 import { Icon as t } from "./icon.js";
 export {
   t as Icon,

package/dist/components/index.d.ts

@@ -1,3 +1,10 @@
+export * from './card';
+export * from './grid';
+export * from './navigation-menu';
+export * from './switch';
+export * from './accordion';
+export * from './link';
+export * from './badge';
 export * from './button';
 export * from './field-error-text';
 export * from './helper-text';
@@ -7,3 +14,6 @@ export * from './label';
 export * from './spinner';
 export * from './text';
 export * from './text-field';
+export * from './heading';
+export * from './visually-hidden';
+export * from './text-spacing';

package/dist/components/index.js

@@ -1,23 +1,40 @@
-import { Button as e } from "./button/button.js";
-import { FieldErrorText as p } from "./field-error-text/field-error-text.js";
-import { HelperText as f } from "./helper-text/helper-text.js";
-import { default as n } from "../assets/f2a2f391a886d395.svg";
-import { Icon as u } from "./icon/icon.js";
-import { Input as T, InputGroup as a } from "./input/input.js";
-import { Label as I } from "./label/label.js";
-import { Spinner as s } from "./spinner/spinner.js";
-import { Text as H } from "./text/text.js";
-import { TextField as B } from "./text-field/text-field.js";
+import { A as e, B as t, C as p, S as x } from "../badge-CbHdlkcM.js";
+import { Grid as m } from "./grid/grid.js";
+import { N as i } from "../navigation-menu-BgN7IKev.js";
+import { Link as d } from "./link/link.js";
+import { Button as l } from "./button/button.js";
+import { FieldErrorText as c } from "./field-error-text/field-error-text.js";
+import { HelperText as g } from "./helper-text/helper-text.js";
+import { default as S } from "../assets/5161b177f001ea1a.svg";
+import { Icon as I } from "./icon/icon.js";
+import { Input as C, InputGroup as F } from "./input/input.js";
+import { Label as L } from "./label/label.js";
+import { Spinner as b } from "./spinner/spinner.js";
+import { Text as k } from "./text/text.js";
+import { TextField as w } from "./text-field/text-field.js";
+import { Heading as E } from "./heading/heading.js";
+import { VisuallyHidden as V } from "./visually-hidden/visually-hidden.js";
+import { TextSpacing as q } from "./text-spacing/text-spacing.js";
 export {
-  e as Button,
-  p as FieldErrorText,
-  f as HelperText,
-  u as Icon,
-  T as Input,
-  a as InputGroup,
-  I as Label,
-  s as Spinner,
-  H as Text,
-  B as TextField,
-  n as iconsHref
+  e as Accordion,
+  t as Badge,
+  l as Button,
+  p as Card,
+  c as FieldErrorText,
+  m as Grid,
+  E as Heading,
+  g as HelperText,
+  I as Icon,
+  C as Input,
+  F as InputGroup,
+  L as Label,
+  d as Link,
+  i as NavigationMenu,
+  b as Spinner,
+  x as Switch,
+  k as Text,
+  w as TextField,
+  q as TextSpacing,
+  V as VisuallyHidden,
+  S as iconsHref
 };

package/dist/components/input/input.d.ts

@@ -1,28 +1,22 @@
-import React from 'react';
+import { default as React } from 'react';
+
 type InputGroupRootProps = React.ComponentPropsWithoutRef<'div'> & {};
 type ValidationState = 'valid' | 'invalid';
-type InputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'children'> & {
-    /**
-     * Whether the input should display its "valid" or "invalid" visual styling.
-     */
+type Input = React.ComponentPropsWithoutRef<'input'>;
+type InputProps = Omit<Input, 'children'> & {
+    /** Whether the input should display its "valid" or "invalid" visual styling. */
     validationState?: ValidationState;
-    /**
-     * Whether to show a loading indicator.
-     */
+    /** Whether to show a loading indicator. */
     isLoading?: boolean;
+    onValueChange?: (value: string) => void;
 };
-/**
- *  The input
- */
+/** The input element */
 declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "children"> & {
-    /**
-     * Whether the input should display its "valid" or "invalid" visual styling.
-     */
+    /** Whether the input should display its "valid" or "invalid" visual styling. */
     validationState?: ValidationState | undefined;
-    /**
-     * Whether to show a loading indicator.
-     */
+    /** Whether to show a loading indicator. */
     isLoading?: boolean | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 type InputIndicatorProps = React.ComponentPropsWithoutRef<'svg'> & {
     isLoading?: boolean;
@@ -30,14 +24,11 @@ type InputIndicatorProps = React.ComponentPropsWithoutRef<'svg'> & {
 };
 declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "children"> & {
-        /**
-         * Whether the input should display its "valid" or "invalid" visual styling.
-         */
+        /** Whether the input should display its "valid" or "invalid" visual styling. */
         validationState?: ValidationState | undefined;
-        /**
-         * Whether to show a loading indicator.
-         */
+        /** Whether to show a loading indicator. */
         isLoading?: boolean | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
     } & React.RefAttributes<HTMLInputElement>>;
     Indicator: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
         isLoading?: boolean | undefined;

package/dist/components/input/input.js

@@ -1,82 +1,104 @@
-import "../../assets/input.css";
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { c as d } from "../../clsx-DB4S2d7J.js";
-import _ from "react";
-import "../../assets/f2a2f391a886d395.svg";
-import { Icon as y } from "../icon/icon.js";
-import { Spinner as x } from "../spinner/spinner.js";
-const N = "_fadeInAnimation_1bk8x_1", v = "_scaleInAnimation_1bk8x_1", s = {
-  "teddy-input": "_teddy-input_1bk8x_17",
-  "teddy-input__frame": "_teddy-input__frame_1bk8x_24",
-  "teddy-input__input": "_teddy-input__input_1bk8x_31",
-  "teddy-input__input--valid": "_teddy-input__input--valid_1bk8x_62",
-  "teddy-input__input--invalid": "_teddy-input__input--invalid_1bk8x_62",
-  "teddy-input__indicator": "_teddy-input__indicator_1bk8x_68",
-  "teddy-input__input--error": "_teddy-input__input--error_1bk8x_71",
-  fadeInAnimation: N,
-  scaleInAnimation: v
-}, a = "teddy-input";
-function b(n) {
-  const e = n == null ? void 0 : n.target;
+import '../../assets/input.css';
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { c } from "../../clsx-DB4S2d7J.js";
+import s from "react";
+import "../../assets/5161b177f001ea1a.svg";
+import { Icon as C } from "../icon/icon.js";
+import { Spinner as h } from "../spinner/spinner.js";
+const x = "_fadeInAnimation_1o9uu_1", A = "_scaleInAnimation_1o9uu_1", a = {
+  "teddy-input": "_teddy-input_1o9uu_17",
+  "teddy-input__frame": "_teddy-input__frame_1o9uu_24",
+  "teddy-input__input": "_teddy-input__input_1o9uu_31",
+  "teddy-input__input--valid": "_teddy-input__input--valid_1o9uu_66",
+  "teddy-input__input--invalid": "_teddy-input__input--invalid_1o9uu_66",
+  "teddy-input__indicator": "_teddy-input__indicator_1o9uu_72",
+  "teddy-input__input--error": "_teddy-input__input--error_1o9uu_75",
+  fadeInAnimation: x,
+  scaleInAnimation: A
+}, _ = "teddy-input";
+function G(i) {
+  const e = i == null ? void 0 : i.target;
   if (e.closest("input, button, a"))
     return;
-  const t = [...n.currentTarget.getElementsByTagName("input")].find((p) => p);
+  const t = [...i.currentTarget.getElementsByTagName("input")].find((d) => d);
   if (!t)
     return;
-  const u = (t.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING) !== 0 ? 0 : t.value.length;
+  const r = (t.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING) !== 0 ? 0 : t.value.length;
   requestAnimationFrame(() => {
     try {
-      t.setSelectionRange(u, u);
+      t.setSelectionRange(r, r);
     } finally {
       t.focus();
     }
   });
 }
-const f = _.createContext(void 0), c = _.forwardRef(
-  ({ className: n, children: e, ...t }, i) => {
-    const r = d([s[`${a}`]], n);
-    return /* @__PURE__ */ m("div", { ...t, onPointerDown: b, ref: i, className: r, children: [
-      /* @__PURE__ */ o(f.Provider, { value: !0, children: e }),
-      /* @__PURE__ */ o("div", { className: s[`${a}__frame`] })
+const g = s.createContext(void 0), p = s.forwardRef(
+  ({ className: i, children: e, ...t }, n) => {
+    const u = c([a[`${_}`]], i);
+    return /* @__PURE__ */ y("div", { ...t, onPointerDown: G, ref: n, className: u, children: [
+      /* @__PURE__ */ o(g.Provider, { value: !0, children: e }),
+      /* @__PURE__ */ o("div", { className: a[`${_}__frame`] })
     ] });
   }
 );
-c.displayName = "InputGroup";
-const I = _.forwardRef(
-  ({ className: n, isLoading: e, validationState: t, ...i }, r) => {
-    const u = _.useContext(f), p = d(
+p.displayName = "InputGroup";
+const v = s.forwardRef(
+  ({ className: i, isLoading: e, validationState: t, ...n }, u) => {
+    const r = s.useContext(g), d = c(
       [
-        s[`${a}__input`],
+        a[`${_}__input`],
         {
-          [s[`${a}__input--valid`]]: t === "valid",
-          [s[`${a}__input--error`]]: t === "invalid"
+          [a[`${_}__input--valid`]]: t === "valid",
+          [a[`${_}__input--error`]]: t === "invalid"
         }
       ],
-      n
-    );
-    return u === !0 ? /* @__PURE__ */ o("input", { ...i, className: p, ref: r }) : /* @__PURE__ */ m(c, { children: [
-      /* @__PURE__ */ o("input", { ...i, className: p, ref: r }),
+      i
+    ), N = r === !0;
+    function m(f) {
+      var I;
+      (I = n.onValueChange) == null || I.call(n, f.target.value), n.onChange && n.onChange(f);
+    }
+    return N ? /* @__PURE__ */ o(
+      "input",
+      {
+        "aria-invalid": t === "invalid",
+        ...n,
+        onChange: m,
+        className: d,
+        ref: u
+      }
+    ) : /* @__PURE__ */ y(p, { children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          "aria-invalid": t === "invalid",
+          ...n,
+          onChange: m,
+          className: d,
+          ref: u
+        }
+      ),
       /* @__PURE__ */ o(l, { isValid: t === "valid", isLoading: e })
     ] });
   }
 );
-I.displayName = "Input";
-const l = _.forwardRef(
-  ({ className: n, isLoading: e, isValid: t, ...i }, r) => {
+v.displayName = "Input";
+const l = s.forwardRef(
+  ({ className: i, isLoading: e, isValid: t, ...n }, u) => {
     if (!t && !e)
       return null;
     if (!t && e)
-      return /* @__PURE__ */ o(x, { className: n, size: "xs", ...i, ref: r });
-    const u = d([s[`${a}__indicator`]], n);
-    return /* @__PURE__ */ o(y, { ...i, size: "md", name: "check-circle-filled", className: u, ref: r });
+      return /* @__PURE__ */ o(h, { className: i, size: "xs", ...n, ref: u });
+    const r = c([a[`${_}__indicator`]], i);
+    return /* @__PURE__ */ o(C, { ...n, size: "md", name: "check-circle-filled", className: r, ref: u });
   }
 );
 l.displayName = "InputIndicator";
-const O = Object.assign(c, {
-  Input: I,
+const T = Object.assign(p, {
+  Input: v,
   Indicator: l
 });
 export {
-  I as Input,
-  O as InputGroup
+  v as Input,
+  T as InputGroup
 };

package/dist/components/label/label.d.ts

@@ -1,9 +1,11 @@
+import { default as React } from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import React from 'react';
 export type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
     disabled?: boolean;
+    isRequired?: boolean;
 };
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
     disabled?: boolean | undefined;
+    isRequired?: boolean | undefined;
 } & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

package/dist/components/label/label.js

@@ -1,61 +1,33 @@
-import "../../assets/label.css";
-import { jsx as b } from "react/jsx-runtime";
-import { _ as d, a as p } from "../../index-TI1xsy6a.js";
-import u, { forwardRef as f, useEffect as $, createElement as i } from "react";
-import "react-dom";
-import { c as _ } from "../../clsx-DB4S2d7J.js";
-const x = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "span",
-  "svg",
-  "ul"
-], y = x.reduce((a, t) => {
-  const e = /* @__PURE__ */ f((o, r) => {
-    const { asChild: l, ...n } = o, m = l ? p : t;
-    return $(() => {
-      window[Symbol.for("radix-ui")] = !0;
-    }, []), /* @__PURE__ */ i(m, d({}, n, {
-      ref: r
-    }));
-  });
-  return e.displayName = `Primitive.${t}`, {
-    ...a,
-    [t]: e
-  };
-}, {}), v = /* @__PURE__ */ f((a, t) => /* @__PURE__ */ i(y.label, d({}, a, {
-  ref: t,
+import '../../assets/label.css';
+import { jsx as f } from "react/jsx-runtime";
+import { _ as b } from "../../index-DpfSJps6.js";
+import n, { forwardRef as i, createElement as m } from "react";
+import { $ as _ } from "../../index-DM5e-Whg.js";
+import { c as $ } from "../../clsx-DB4S2d7J.js";
+const u = /* @__PURE__ */ i((a, d) => /* @__PURE__ */ m(_.label, b({}, a, {
+  ref: d,
   onMouseDown: (e) => {
-    var o;
-    (o = a.onMouseDown) === null || o === void 0 || o.call(a, e), !e.defaultPrevented && e.detail > 1 && e.preventDefault();
+    var l;
+    (l = a.onMouseDown) === null || l === void 0 || l.call(a, e), !e.defaultPrevented && e.detail > 1 && e.preventDefault();
   }
-}))), w = v, s = {
-  "teddy-label": "_teddy-label_rfe6h_1",
-  "teddy-label--disabled": "_teddy-label--disabled_rfe6h_8"
-}, c = "teddy-label", h = u.forwardRef(
-  ({ className: a, disabled: t, children: e, ...o }, r) => {
-    const l = _(
-      [s[c]],
+}))), p = u, o = {
+  "teddy-label": "_teddy-label_1hc8e_1",
+  "teddy-label--disabled": "_teddy-label--disabled_1hc8e_8",
+  "teddy-label--required": "_teddy-label--required_1hc8e_12"
+}, r = "teddy-label", y = n.forwardRef(
+  ({ className: a, disabled: d, isRequired: e, children: l, ...t }, s) => {
+    const c = $(
+      [o[r]],
       {
-        [s[`${c}--disabled`]]: t
+        [o[`${r}--disabled`]]: d,
+        [o[`${r}--required`]]: e
       },
       a
     );
-    return /* @__PURE__ */ b(w, { ...o, ref: r, className: l, children: e });
+    return /* @__PURE__ */ f(p, { ...t, ref: s, className: c, children: l });
   }
 );
-h.displayName = "Label";
+y.displayName = "Label";
 export {
-  h as Label
+  y as Label
 };

package/dist/components/link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './link';
+export type { LinkProps } from './link';

package/dist/components/link/index.js

@@ -0,0 +1,4 @@
+import { Link as e } from "./link.js";
+export {
+  e as Link
+};

package/dist/components/link/link.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+
+/** -------------------------------------------------------------------------------------------------
+ * Link
+ * -----------------------------------------------------------------------------------------------*/
+type Variant = 'text' | 'text-negative' | 'standalone' | 'standalone-negative' | 'navigation' | 'navigation-negative';
+type LinkProps = React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean;
+    /** Disables visited styling */
+    disableVisited?: boolean;
+    /**
+     * This sets a minimum size on the targetable area of the link. Please note
+     * it also changes display value to flex, meaning its container will behave
+     * like a block element. You can wrap this component in a flex container
+     * for additional layout control.
+     */
+    ensureTargetArea?: boolean;
+    /**
+     * A silent link is intended to wrap an element
+     * to make it a link but not add any styling
+     * except for the pointer cursor and focus style.
+     */
+    silent?: boolean;
+    variant: Variant;
+};
+/**
+ *
+ */
+declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean | undefined;
+    /** Disables visited styling */
+    disableVisited?: boolean | undefined;
+    /**
+     * This sets a minimum size on the targetable area of the link. Please note
+     * it also changes display value to flex, meaning its container will behave
+     * like a block element. You can wrap this component in a flex container
+     * for additional layout control.
+     */
+    ensureTargetArea?: boolean | undefined;
+    /**
+     * A silent link is intended to wrap an element
+     * to make it a link but not add any styling
+     * except for the pointer cursor and focus style.
+     */
+    silent?: boolean | undefined;
+    variant: Variant;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export { Link };
+export type { LinkProps };

package/dist/components/link/link.js

@@ -0,0 +1,36 @@
+import '../../assets/link.css';
+import { jsx as l } from "react/jsx-runtime";
+import { c } from "../../clsx-DB4S2d7J.js";
+import g from "react";
+import { $ as v } from "../../index-DpfSJps6.js";
+const e = {
+  "teddy-link": "_teddy-link_1jza5_1",
+  "teddy-link--text": "_teddy-link--text_1jza5_15",
+  "teddy-link--standalone": "_teddy-link--standalone_1jza5_15",
+  "teddy-link--navigation": "_teddy-link--navigation_1jza5_15",
+  "teddy-link--disable-visited": "_teddy-link--disable-visited_1jza5_25",
+  "teddy-link--text-negative": "_teddy-link--text-negative_1jza5_28",
+  "teddy-link--standalone-negative": "_teddy-link--standalone-negative_1jza5_28",
+  "teddy-link--navigation-negative": "_teddy-link--navigation-negative_1jza5_28",
+  "teddy-link--ensure-target-area": "_teddy-link--ensure-target-area_1jza5_56",
+  "teddy-link--silent": "_teddy-link--silent_1jza5_62"
+}, t = "teddy-link", f = g.forwardRef(
+  ({ className: s, variant: a, silent: d, disableVisited: _, ensureTargetArea: r, asChild: o, children: n, ...i }, k) => {
+    const y = c(
+      [e[`${t}`]],
+      e[`${t}--${a}`],
+      {
+        [e[`${t}--silent`]]: d,
+        [e[`${t}--negative`]]: a.endsWith("negative"),
+        [e[`${t}--disable-visited`]]: _ ?? d,
+        [e[`${t}--ensure-target-area`]]: r
+      },
+      s
+    );
+    return /* @__PURE__ */ l(v, { ...i, ref: k, className: y, children: o ? n : /* @__PURE__ */ l("a", { href: i.href, children: n }) });
+  }
+);
+f.displayName = "Link";
+export {
+  f as Link
+};

package/dist/components/navigation-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { NavigationMenu } from './navigation-menu';
+export type { NavigationMenuProps } from './navigation-menu';

package/dist/components/navigation-menu/index.js

@@ -0,0 +1,4 @@
+import { N as e } from "../../navigation-menu-BgN7IKev.js";
+export {
+  e as NavigationMenu
+};

package/dist/components/navigation-menu/navigation-menu.d.ts

@@ -0,0 +1,126 @@
+import { default as React } from 'react';
+
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+/** -------------------------------------------------------------------------------------------------
+ * NavigationMenuRoot
+ * -----------------------------------------------------------------------------------------------*/
+type RootProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
+    /** The default top menu value
+     * @example "private" | "business"
+     */
+    defaultTopMenuValue?: string;
+};
+/** -------------------------------------------------------------------------------------------------
+ *  NavigationMenu.TopMenuList
+ * -----------------------------------------------------------------------------------------------*/
+type TopMenuListProps = React.ComponentPropsWithoutRef<'ul'>;
+/** -------------------------------------------------------------------------------------------------
+ *  NavigationMenu.TopMenuItem
+ *  -----------------------------------------------------------------------------------------------*/
+type TopMenuItemProps = React.ComponentPropsWithoutRef<'li'>;
+/** -------------------------------------------------------------------------------------------------
+ *  NavigationMenu.TopMenuTrigger
+ *  -----------------------------------------------------------------------------------------------*/
+type TopMenuTriggerProps = React.ComponentPropsWithoutRef<'button'> & {
+    value: string;
+};
+/** -------------------------------------------------------------------------------------------------
+ * NavigationMenuList
+ * -----------------------------------------------------------------------------------------------*/
+type ListProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> & {
+    variant?: 'gray';
+    /** If the list should be contained by the top menu, provide a value that matches the top menu value
+     * @example
+     * <NavigationMenu.TopMenuTrigger value="home" />
+     * <NavigationMenu.List value="home" />
+     */
+    value?: string;
+};
+/** -------------------------------------------------------------------------------------------------
+ * NavigationMenuItem
+ * -----------------------------------------------------------------------------------------------*/
+type ItemProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item> & {
+    defaultValue?: string;
+};
+/** -------------------------------------------------------------------------------------------------
+ * NavigationMenuTrigger
+ * -----------------------------------------------------------------------------------------------*/
+type TriggerProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> & {
+    variant?: 'default' | 'small';
+};
+/** -------------------------------------------------------------------------------------------------
+ * NavigationMenuContent
+ * -----------------------------------------------------------------------------------------------*/
+type ContentProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> & {
+    variant?: 'default' | 'float';
+};
+/** -------------------------------------------------------------------------------------------------
+ * NavigationMenuLink
+ * -----------------------------------------------------------------------------------------------*/
+type LinkProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link> & {
+    variant?: 'default' | 'small' | 'button';
+};
+/** -------------------------------------------------------------------------------------------------
+ * NavigationMenuIndicator
+ * -----------------------------------------------------------------------------------------------*/
+type IndicatorProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>;
+/** -------------------------------------------------------------------------------------------------
+ * NavigationMenuViewport
+ * -----------------------------------------------------------------------------------------------*/
+type ViewportProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>;
+/** -------------------------------------------------------------------------------------------------
+ * NavigationMenuSub
+ * -----------------------------------------------------------------------------------------------*/
+type SubProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Sub>;
+declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & {
+    /** The default top menu value
+     * @example "private" | "business"
+     */
+    defaultTopMenuValue?: string | undefined;
+} & React.RefAttributes<HTMLElement>> & {
+    List: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & {
+        variant?: "gray" | undefined;
+        /** If the list should be contained by the top menu, provide a value that matches the top menu value
+         * @example
+         * <NavigationMenu.TopMenuTrigger value="home" />
+         * <NavigationMenu.List value="home" />
+         */
+        value?: string | undefined;
+    } & React.RefAttributes<HTMLUListElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>, "ref"> & {
+        defaultValue?: string | undefined;
+    } & React.RefAttributes<HTMLLIElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+        variant?: "small" | "default" | undefined;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        variant?: "default" | "float" | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Link: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & {
+        variant?: "button" | "small" | "default" | undefined;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Viewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Sub: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    TopMenuList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    TopMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    TopMenuTrigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        value: string;
+    } & React.RefAttributes<HTMLButtonElement>>;
+};
+type NavigationMenuProps = {
+    Root: RootProps;
+    List: ListProps;
+    Item: ItemProps;
+    Trigger: TriggerProps;
+    Content: ContentProps;
+    Link: LinkProps;
+    Indicator: IndicatorProps;
+    Viewport: ViewportProps;
+    Sub: SubProps;
+    TopMenuList: TopMenuListProps;
+    TopMenuItem: TopMenuItemProps;
+    TopMenuTrigger: TopMenuTriggerProps;
+};
+export { NavigationMenu };
+export type { NavigationMenuProps };