@cognite/aura 0.2.0 → 0.3.0

package/dist/components/ui/core/alert/alert.js

@@ -1,105 +1,111 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { createContext as N, forwardRef as n, useMemo as k, useContext as u } from "react";
-import { IconX as C, IconInfoCircle as I, IconAlertHexagon as V, IconAlertTriangle as _ } from "@tabler/icons-react";
-import { cva as h } from "class-variance-authority";
-import { useControllableState as z } from "../../../../lib/use-controllable-state.js";
+import { jsx as a, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as l, useMemo as k, useContext as g, createContext as C } from "react";
+import { IconX as S, IconInfoCircleFilled as I, IconAlertCircleFilled as V, IconAlertTriangleFilled as z } from "@tabler/icons-react";
+import { cva as v } from "class-variance-authority";
+import { useControllableState as _ } from "../../../../lib/use-controllable-state.js";
 import { cn as s } from "../../../../lib/utils.js";
-import { Button as x } from "../button/button.js";
-const i = N({
+import { Button as b } from "../button/button.js";
+const i = C({
   show: !0,
   setShow: () => {
   },
-  variant: "default"
-}), j = h(
+  variant: "default",
+  alertStyle: "card"
+}), B = v(
   [
     "[&_svg]:shrink-0",
-    "[&_svg:not([class*='size-']):not([class*='w-'])]:w-3.5",
-    "[&_svg:not([class*='size-']):not([class*='h-'])]:h-3.5",
-    "[&_svg:not([class*='mt-'])]:mt-0.5"
+    "[&_svg:not([class*='size-']):not([class*='w-'])]:w-4",
+    "[&_svg:not([class*='size-']):not([class*='h-'])]:h-4"
   ].join(" ")
-), D = h(
+), D = v(
   "relative w-full rounded-md pt-2.5 pr-3 has-[>button[data-slot=alert-close]]:pr-12 pb-2 pl-3 text-sm grid has-[>[data-slot=alert-icon]]:grid-cols-[auto_1fr] grid-cols-[0_1fr] has-[>[data-slot=alert-icon]]:gap-x-2 has-[>[data-slot=alert-icon]]:gap-y-1 items-start",
   {
     variants: {
       variant: {
-        default: "bg-neutral-muted-background text-foreground [&>[data-slot=alert-icon]]:text-info-foreground",
-        secondary: "bg-info-muted-background text-foreground [&>[data-slot=alert-icon]]:text-info-foreground",
+        default: "bg-neutral-muted-background text-foreground [&>[data-slot=alert-icon]]:text-muted-foreground",
+        info: "bg-info-muted-background text-foreground [&>[data-slot=alert-icon]]:text-info-foreground",
         warning: "bg-warning-muted-background [&>[data-slot=alert-icon]]:text-warning-foreground",
         error: "bg-destructive-muted-background text-foreground [&>[data-slot=alert-icon]]:text-destructive-foreground"
+      },
+      alertStyle: {
+        card: "pt-3 pr-5 pb-3 pl-3 [&>[data-slot=alert-title]+[data-slot=alert-description]]:mt-2 [&>[data-slot=alert-icon]]:mt-0.5",
+        strip: "flex min-h-11 items-center gap-2 py-2 pr-3 pl-3 [&>[data-slot=alert-title]]:hidden"
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "default",
+      alertStyle: "card"
     }
   }
 );
-function S(r) {
+function T(r) {
   const t = { "aria-hidden": !0 };
   switch (r) {
     case "warning":
-      return /* @__PURE__ */ e(_, { ...t });
+      return /* @__PURE__ */ a(z, { ...t });
     case "error":
-      return /* @__PURE__ */ e(V, { ...t });
+      return /* @__PURE__ */ a(V, { ...t });
     default:
-      return /* @__PURE__ */ e(I, { ...t });
+      return /* @__PURE__ */ a(I, { ...t });
   }
 }
-const T = n(
+const j = l(
   ({
     className: r,
     variant: t = "default",
-    visible: a,
-    defaultVisible: o = !0,
-    onClose: l,
+    alertStyle: e = "card",
+    visible: o,
+    defaultVisible: n = !0,
+    onClose: d,
     icon: c,
-    children: g,
-    ...w
-  }, A) => {
-    const [f, m] = z({
-      defaultProp: o,
-      prop: a,
-      onChange: l
-    }), d = t ?? "default", y = k(
-      () => ({ show: f, setShow: m, variant: d }),
-      [f, m, d]
-    );
-    if (!f)
+    children: f,
+    ...m
+  }, w) => {
+    const [p, x] = _({
+      defaultProp: n,
+      prop: o,
+      onChange: d
+    }), u = t === "secondary" ? "info" : t ?? "default", A = k(() => ({ show: p, setShow: x, variant: u, alertStyle: e }), [p, x, u, e]);
+    if (!p)
       return null;
-    const v = c !== void 0 ? c : S(d);
-    return /* @__PURE__ */ e(i.Provider, { value: y, children: /* @__PURE__ */ p(
+    const h = c !== void 0 ? c : T(u);
+    return /* @__PURE__ */ a(i.Provider, { value: A, children: /* @__PURE__ */ N(
       "div",
       {
-        ref: A,
+        ref: w,
         "data-slot": "alert",
         role: "alert",
-        className: s(D({ variant: d }), r),
-        ...w,
+        className: s(
+          D({ variant: u, alertStyle: e }),
+          r
+        ),
+        ...m,
         children: [
-          l && /* @__PURE__ */ e(b, {}),
-          v && /* @__PURE__ */ e("span", { "data-slot": "alert-icon", className: j(), children: v }),
-          g
+          h && /* @__PURE__ */ a("span", { "data-slot": "alert-icon", className: B(), children: h }),
+          f,
+          d && /* @__PURE__ */ a(y, {})
         ]
       }
     ) });
   }
 );
-T.displayName = "Alert";
-const B = {
-  default: "text-info-foreground",
-  secondary: "text-info-foreground",
-  warning: "text-warning-foreground",
-  error: "text-destructive-foreground"
-}, P = n(
-  ({ className: r, ...t }, a) => {
-    const { variant: o } = u(i);
-    return /* @__PURE__ */ e(
+j.displayName = "Alert";
+const F = {
+  default: "text-foreground",
+  info: "text-foreground",
+  warning: "text-foreground",
+  error: "text-foreground"
+}, P = l(
+  ({ className: r, ...t }, e) => {
+    const { variant: o, alertStyle: n } = g(i);
+    return /* @__PURE__ */ a(
       "div",
       {
-        ref: a,
+        ref: e,
         "data-slot": "alert-title",
         className: s(
-          "col-start-2 text-base font-medium leading-5 tracking-tightest",
-          B[o],
+          n === "strip" ? "text-sm font-medium leading-[18px] tracking-normal" : "col-start-2 text-base font-medium leading-5 tracking-tighter",
+          F[o],
           r
         ),
         ...t
@@ -108,22 +114,22 @@ const B = {
   }
 );
 P.displayName = "AlertTitle";
-const H = {
-  default: "text-foreground",
-  secondary: "text-foreground",
-  warning: "text-foreground",
-  error: "text-foreground"
-}, M = n(
-  ({ className: r, ...t }, a) => {
-    const { variant: o } = u(i);
-    return /* @__PURE__ */ e(
+const L = {
+  default: "text-secondary-foreground",
+  info: "text-secondary-foreground",
+  warning: "text-secondary-foreground",
+  error: "text-secondary-foreground"
+}, M = l(
+  ({ className: r, ...t }, e) => {
+    const { variant: o, alertStyle: n } = g(i);
+    return /* @__PURE__ */ a(
       "div",
       {
-        ref: a,
+        ref: e,
         "data-slot": "alert-description",
         className: s(
-          "col-start-2 grid justify-items-start gap-1 text-sm font-normal leading-4.5 tracking-tight items-center",
-          H[o],
+          n === "strip" ? "flex-1 min-w-0 pr-4 text-sm font-normal leading-[18px] tracking-tight" : "col-start-2 text-sm font-normal leading-[18px] tracking-tight",
+          L[o],
           r
         ),
         ...t
@@ -132,73 +138,70 @@ const H = {
   }
 );
 M.displayName = "AlertDescription";
-const R = n(
-  ({ className: r, ...t }, a) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: a,
-      "data-slot": "alert-actions",
-      className: s(
-        "col-start-2 flex flex-wrap items-start gap-2 pt-1",
-        r
-      ),
-      ...t
-    }
-  )
+const R = l(
+  ({ className: r, ...t }, e) => {
+    const { alertStyle: o } = g(i);
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: e,
+        "data-slot": "alert-actions",
+        className: s(
+          o === "strip" ? "ml-auto flex shrink-0 items-center gap-3" : "col-start-2 flex flex-wrap items-center gap-3 pt-2",
+          r
+        ),
+        ...t
+      }
+    );
+  }
 );
 R.displayName = "AlertActions";
-const X = n(({ className: r, ...t }, a) => {
-  const { variant: o } = u(i);
-  return /* @__PURE__ */ e(
-    x,
-    {
-      ref: a,
-      "data-slot": "alert-button",
-      variant: "ghost",
-      size: "sm",
-      className: s("text-foreground", {
-        default: "hover:bg-neutral-background-hover",
-        secondary: "hover:bg-info-background-hover",
-        warning: "hover:bg-warning-background-hover",
-        error: "hover:bg-destructive-background-hover"
-      }[o], r),
-      ...t
-    }
-  );
-});
-X.displayName = "AlertButton";
-const b = n(
-  ({ className: r, onClick: t, ...a }, o) => {
-    const { setShow: l } = u(i), c = (g) => {
-      l(!1), t?.(g);
+const X = {
+  default: "gap-2 rounded-md",
+  ghost: "h-auto p-0 hover:bg-transparent"
+}, q = l(({ className: r, variant: t = "default", ...e }, o) => /* @__PURE__ */ a(
+  b,
+  {
+    ref: o,
+    "data-slot": "alert-button",
+    variant: t === "ghost" ? "ghost" : void 0,
+    size: "sm",
+    className: s(X[t], r),
+    ...e
+  }
+));
+q.displayName = "AlertButton";
+const y = l(
+  ({ className: r, onClick: t, ...e }, o) => {
+    const { setShow: n, alertStyle: d } = g(i), c = e["aria-label"] ?? "Close alert", f = (m) => {
+      n(!1), t?.(m);
     };
-    return /* @__PURE__ */ p(
-      x,
+    return /* @__PURE__ */ a(
+      b,
       {
         ref: o,
         "data-slot": "alert-close",
         variant: "ghost",
-        size: "icon-sm",
+        size: "sm",
         className: s(
-          "absolute top-3 right-4 h-3.5 w-3.5 p-0 opacity-70 hover:opacity-100 text-foreground",
+          "shrink-0 size-7 rounded-md p-0 text-secondary-foreground hover:bg-transparent hover:text-foreground",
+          d === "card" && "absolute right-2 top-2",
           r
         ),
-        onClick: c,
-        ...a,
-        children: [
-          /* @__PURE__ */ e(C, { size: 14 }),
-          /* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
-        ]
+        "aria-label": c,
+        onClick: f,
+        ...e,
+        children: /* @__PURE__ */ a(S, { "aria-hidden": "true", className: "size-4" })
       }
     );
   }
 );
-b.displayName = "AlertClose";
+y.displayName = "AlertClose";
 export {
-  T as Alert,
+  j as Alert,
   R as AlertActions,
-  X as AlertButton,
-  b as AlertClose,
+  q as AlertButton,
+  y as AlertClose,
   M as AlertDescription,
   P as AlertTitle
 };

package/dist/components/ui/core/avatar/avatar.d.ts

@@ -1,10 +1,14 @@
-import { HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
+import { AvatarFallbackProps, AvatarImageProps, AvatarRootProps } from '@base-ui/react/avatar';
 import { VariantProps } from 'class-variance-authority';
-declare const Avatar: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').AvatarRootProps, "ref"> & import('react').RefAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "orange" | "nordic" | "aurora" | "fjord" | "dusk" | "sky" | "overflow" | null | undefined;
-    sizes?: "default" | "xsm" | "xxsm" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
-declare const AvatarImage: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').AvatarImageProps, "ref"> & import('react').RefAttributes<HTMLImageElement>, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').AvatarFallbackProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
-declare const AvatarIcon: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import('react').RefAttributes<HTMLSpanElement>>;
+import { ClassProp } from 'class-variance-authority/types';
+interface AvatarVariantProps {
+    variant?: 'default' | 'nordic' | 'aurora' | 'fjord' | 'dusk' | 'orange' | 'sky' | 'overflow' | null;
+    sizes?: 'default' | 'xsm' | 'xxsm' | null;
+}
+declare const avatarVariants: (props?: (AvatarVariantProps & ClassProp) | undefined) => string;
+declare const Avatar: ForwardRefExoticComponent<Omit<AvatarRootProps & VariantProps<typeof avatarVariants>, 'ref'> & RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: ForwardRefExoticComponent<Omit<AvatarImageProps, 'ref'> & RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: ForwardRefExoticComponent<Omit<AvatarFallbackProps, 'ref'> & RefAttributes<HTMLSpanElement>>;
+declare const AvatarIcon: ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement>>;
 export { Avatar, AvatarImage, AvatarFallback, AvatarIcon };

package/dist/components/ui/core/badge/badge.d.ts

@@ -1,14 +1,17 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
-declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "gray" | "orange" | "nordic" | "aurora" | "fjord" | "dusk" | "sky" | "warning" | "mountain" | "error" | "success" | "inProgress" | "archived" | "closable" | null | undefined;
-    size?: "default" | "icon" | null | undefined;
-    outline?: boolean | null | undefined;
-    background?: boolean | null | undefined;
-    dot?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+import { ClassProp } from 'class-variance-authority/types';
+interface BadgeVariantProps {
+    variant?: 'default' | 'fjord' | 'nordic' | 'aurora' | 'sky' | 'dusk' | 'orange' | 'gray' | 'mountain' | 'secondary' | 'error' | 'warning' | 'success' | 'inProgress' | 'archived' | 'closable' | null;
+    size?: 'default' | 'icon' | null;
+    outline?: boolean | null;
+    background?: boolean | null;
+    dot?: boolean | null;
+}
+declare const badgeVariants: (props?: (BadgeVariantProps & ClassProp) | undefined) => string;
 type BadgeProps = useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     urgent?: boolean;
 };
-declare const Badge: import('react').ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+declare const Badge: ForwardRefExoticComponent<Omit<BadgeProps, 'ref'> & RefAttributes<HTMLSpanElement>>;
 export { Badge, badgeVariants };

package/dist/components/ui/core/banner/banner.d.ts

@@ -1,40 +1,30 @@
-import { ComponentProps, ComponentType, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, ComponentProps, ComponentType, HTMLAttributes } from 'react';
 import { IconProps } from '@tabler/icons-react';
 import { VariantProps } from 'class-variance-authority';
+import { ClassProp } from 'class-variance-authority/types';
+import { Badge } from '../badge/badge';
 import { Button } from '../button/button';
-declare const Banner: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "info" | "warning" | null | undefined;
-    inset?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
+interface BannerVariantProps {
+    variant?: 'default' | 'info' | 'destructive' | 'warning' | null;
+    inset?: boolean | null;
+}
+declare const bannerVariants: (props?: (BannerVariantProps & ClassProp) | undefined) => string;
+type BannerProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof bannerVariants> & {
     visible?: boolean;
     defaultVisible?: boolean;
     onClose?: () => void;
-} & import('react').RefAttributes<HTMLDivElement>>;
+};
+declare const Banner: ForwardRefExoticComponent<Omit<BannerProps, 'ref'> & RefAttributes<HTMLDivElement>>;
 type TablerIconComponent = ComponentType<IconProps>;
-declare const BannerIcon: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const BannerIcon: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     icon: TablerIconComponent;
-} & import('react').RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;
 type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;
-declare const BannerTitle: import('react').ForwardRefExoticComponent<BannerTitleProps & import('react').RefAttributes<HTMLParagraphElement>>;
-declare const BannerStatus: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('react').DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
-} & {
-    render?: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | import('@base-ui/react').ComponentRenderFn<import('@base-ui/react').HTMLProps, {}> | undefined;
-} & VariantProps<(props?: ({
-    variant?: "default" | "secondary" | "gray" | "orange" | "nordic" | "aurora" | "fjord" | "dusk" | "sky" | "warning" | "mountain" | "error" | "success" | "inProgress" | "archived" | "closable" | null | undefined;
-    size?: "default" | "icon" | null | undefined;
-    outline?: boolean | null | undefined;
-    background?: boolean | null | undefined;
-    dot?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
-    urgent?: boolean;
-}, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+declare const BannerTitle: ForwardRefExoticComponent<BannerTitleProps & RefAttributes<HTMLParagraphElement>>;
+declare const BannerStatus: ForwardRefExoticComponent<Omit<ComponentProps<typeof Badge>, 'ref'> & RefAttributes<HTMLSpanElement>>;
 type BannerActionsProps = HTMLAttributes<HTMLDivElement>;
-declare const BannerActions: import('react').ForwardRefExoticComponent<BannerActionsProps & import('react').RefAttributes<HTMLDivElement>>;
-declare const BannerAction: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ButtonProps & VariantProps<(props?: ({
-    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+declare const BannerActions: ForwardRefExoticComponent<BannerActionsProps & RefAttributes<HTMLDivElement>>;
+declare const BannerAction: ForwardRefExoticComponent<Omit<ComponentProps<typeof Button>, 'ref'> & RefAttributes<HTMLElement>>;
 type BannerCloseProps = Omit<ComponentProps<typeof Button>, 'size'>;
-declare const BannerClose: import('react').ForwardRefExoticComponent<Omit<BannerCloseProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+declare const BannerClose: ForwardRefExoticComponent<Omit<BannerCloseProps, 'ref'> & RefAttributes<HTMLElement>>;
 export { Banner, BannerIcon, BannerTitle, BannerStatus, BannerActions, BannerAction, BannerClose, };

package/dist/components/ui/core/banner/banner.js

@@ -1,11 +1,11 @@
 import { jsx as s } from "react/jsx-runtime";
-import { createContext as k, forwardRef as l, useMemo as w, useContext as b, useState as B, useRef as N, useEffect as y, useCallback as C } from "react";
+import { forwardRef as l, useMemo as k, useContext as b, useState as w, useRef as B, useEffect as N, useCallback as y, createContext as C } from "react";
 import { cva as V } from "class-variance-authority";
 import { cn as u } from "../../../../lib/utils.js";
 import { Badge as S } from "../badge/badge.js";
 import { Button as A } from "../button/button.js";
 const R = (e) => {
-}, m = k({
+}, m = C({
   show: !0,
   setShow: R,
   variant: "default"
@@ -18,11 +18,11 @@ function j({
   defaultVisible: t,
   onClose: n
 }) {
-  const [r, a] = B(t), i = e !== void 0, g = i ? e : r, d = N(n);
-  y(() => {
+  const [r, a] = w(t), i = e !== void 0, g = i ? e : r, d = B(n);
+  N(() => {
     d.current = n;
   }, [n]);
-  const x = C(
+  const x = y(
     (o) => {
       if (i) {
         (p(o) ? o(e) : o) || d.current?.();
@@ -72,7 +72,7 @@ const I = V(
       defaultVisible: n,
       visible: t,
       onClose: r
-    }), h = w(
+    }), h = k(
       () => ({ show: c ?? !0, setShow: f, variant: o }),
       [c, f, o]
     );

package/dist/components/ui/core/breadcrumb/breadcrumb.d.ts

@@ -1,11 +1,12 @@
+import { ForwardRefExoticComponent, RefAttributes, ComponentProps } from 'react';
 import { useRender } from '@base-ui/react/use-render';
-declare const Breadcrumb: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
-declare const BreadcrumbList: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import('react').RefAttributes<HTMLOListElement>>;
-declare const BreadcrumbItem: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
-declare const BreadcrumbLink: import('react').ForwardRefExoticComponent<Omit<useRender.ComponentProps<"a", {}, import('@base-ui/react').HTMLProps>, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
-declare const BreadcrumbPage: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
-declare const BreadcrumbPageButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-declare const BreadcrumbEllipsisButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-declare const BreadcrumbSeparator: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
-declare const BreadcrumbEllipsis: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
+declare const Breadcrumb: ForwardRefExoticComponent<ComponentProps<'nav'> & RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: ForwardRefExoticComponent<ComponentProps<'ol'> & RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: ForwardRefExoticComponent<ComponentProps<'li'> & RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: ForwardRefExoticComponent<Omit<useRender.ComponentProps<'a'>, 'ref'> & RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: ForwardRefExoticComponent<ComponentProps<'span'> & RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbPageButton: ForwardRefExoticComponent<ComponentProps<'button'> & RefAttributes<HTMLButtonElement>>;
+declare const BreadcrumbEllipsisButton: ForwardRefExoticComponent<ComponentProps<'button'> & RefAttributes<HTMLButtonElement>>;
+declare const BreadcrumbSeparator: ForwardRefExoticComponent<ComponentProps<'li'> & RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbEllipsis: ForwardRefExoticComponent<ComponentProps<'li'> & RefAttributes<HTMLLIElement>>;
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbPageButton, BreadcrumbEllipsisButton, BreadcrumbSeparator, BreadcrumbEllipsis, };