@vkzstudio/muza-ui 1.7.0 → 1.9.0

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,8 +1,18 @@
+import { ResponsiveBreakpoint } from '../../utils/index';
+import { DropdownMenuContentProps, DropdownMenuProps } from '../DropdownMenu';
 import * as React from 'react';
 /** Props for the Breadcrumb root component. */
 export type BreadcrumbProps = React.ComponentProps<'nav'>;
 /** Props for the BreadcrumbList component. */
-export type BreadcrumbListProps = React.ComponentProps<'ol'>;
+export interface BreadcrumbListProps extends React.ComponentProps<'ol'> {
+    /**
+     * Controls whether the trail wraps onto several lines. With `'nowrap'` it
+     * stays on a single line: every level keeps its full width and the current
+     * page (`BreadcrumbPage`) truncates with an ellipsis instead.
+     * @default 'wrap'
+     */
+    wrap?: 'wrap' | 'nowrap';
+}
 /** Props for the BreadcrumbItem component. */
 export type BreadcrumbItemProps = React.ComponentProps<'li'>;
 /** Props for the BreadcrumbLink component. */
@@ -16,12 +26,144 @@ export type BreadcrumbPageProps = React.ComponentProps<'span'>;
 export type BreadcrumbSeparatorProps = React.ComponentProps<'li'>;
 /** Props for the BreadcrumbEllipsis component. */
 export type BreadcrumbEllipsisProps = React.ComponentProps<'span'>;
+/**
+ * Props for the BreadcrumbCollapsed component. Remaining props go to the
+ * ellipsis `<button>`.
+ *
+ * @example
+ * <BreadcrumbItem>
+ *   <BreadcrumbCollapsed>
+ *     <BreadcrumbCollapsedItem asChild>
+ *       <Link href="/courses">Courses</Link>
+ *     </BreadcrumbCollapsedItem>
+ *   </BreadcrumbCollapsed>
+ * </BreadcrumbItem>
+ */
+export interface BreadcrumbCollapsedProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {
+    /** Lists the collapsed levels as `BreadcrumbCollapsedItem`s, in trail order. */
+    children: React.ReactNode;
+    /** Accessible label for the ellipsis button. Defaults to translation `breadcrumb.collapsedAriaLabel`. */
+    label?: string;
+    /** Controlled open state of the menu. */
+    open?: DropdownMenuProps['open'];
+    /** Initial open state for uncontrolled usage. @default false */
+    defaultOpen?: DropdownMenuProps['defaultOpen'];
+    /** Fires when the menu opens or closes. Receives the new open value. */
+    onOpenChange?: DropdownMenuProps['onOpenChange'];
+    /** Controls modal behaviour of the menu (focus trap, outside pointer events). @default true */
+    modal?: DropdownMenuProps['modal'];
+    /**
+     * Props forwarded to the `DropdownMenuContent`.
+     * @see DropdownMenuContentProps
+     */
+    contentProps?: Omit<DropdownMenuContentProps, 'children'>;
+}
+/** Props for the BreadcrumbCollapsedItem component. */
+export interface BreadcrumbCollapsedItemProps {
+    /** Label of the level. With `asChild`, the link element to render instead. */
+    children: React.ReactNode;
+    /** Target of the level. Ignored with `asChild`, where the child carries its own target. */
+    href?: string;
+    /**
+     * Renders the single child as the item, e.g. a router `Link`, so the app
+     * keeps control of navigation.
+     * @default false
+     */
+    asChild?: boolean;
+    /** Additional CSS classes for the item. */
+    className?: string;
+}
+/** A single level of a `BreadcrumbTrail`. */
+export interface BreadcrumbTrailItem {
+    /** Stable React key. Falls back to the level's index. */
+    key?: React.Key;
+    /** Visible label of the level. */
+    label: React.ReactNode;
+    /** Target of the level. Levels without it render as plain text and are left out of the collapsed menu. Ignored on the last level. */
+    href?: string;
+}
+/**
+ * How a `BreadcrumbTrail` collapses while this rule is active. Rules are
+ * listed from the largest breakpoint to the smallest, and the first one that
+ * matches wins, as in `ResponsiveLayoutTable`.
+ *
+ * @example
+ * collapse={[
+ *   { responsive: 'lg', expanded: true },
+ *   { responsive: 'md', keepStart: 1, keepEnd: 2 },
+ *   { keepStart: 1, keepEnd: 1 },
+ * ]}
+ */
+export interface BreadcrumbCollapseRule {
+    /**
+     * Controls when this rule is active.
+     * - Named breakpoint (`'xs'..'3xl'`): active at and above that breakpoint.
+     *   Resolved with CSS, so server rendering matches the first client render.
+     * - Boolean: caller supplies the result, e.g. from `useMediaQuery()`.
+     * - Omitted: fallback that matches every remaining width.
+     *
+     * @see {@link ResponsiveBreakpoint}
+     */
+    responsive?: ResponsiveBreakpoint | boolean;
+    /** Shows the full trail while this rule is active. @default false */
+    expanded?: boolean;
+    /** Number of leading levels that stay visible. @default 1 */
+    keepStart?: number;
+    /** Number of trailing levels that stay visible, including the current page. Never less than 1. @default 1 */
+    keepEnd?: number;
+}
+/** Props for the BreadcrumbTrail component. */
+export interface BreadcrumbTrailProps {
+    /** Levels in trail order. The last one renders as the current page. */
+    items: BreadcrumbTrailItem[];
+    /**
+     * Hides the middle levels behind a `BreadcrumbCollapsed` menu. Pass one rule
+     * to collapse at every width, or a list ordered from the largest breakpoint
+     * to the smallest to collapse differently per breakpoint. When no rule
+     * matches, the last one applies. Omit to always show the full trail.
+     *
+     * @example
+     * collapse={{ keepStart: 1, keepEnd: 1 }}
+     * collapse={[{ responsive: 'md', expanded: true }, { keepEnd: 2 }]}
+     * @see BreadcrumbCollapseRule
+     */
+    collapse?: BreadcrumbCollapseRule | BreadcrumbCollapseRule[];
+    /**
+     * Renders the link element for a level that has an `href`. The result is
+     * used through `asChild`, so return a single element such as a router
+     * `Link`. Defaults to a plain `<a>`.
+     *
+     * @example
+     * renderLink={(item) => <Link href={item.href!}>{item.label}</Link>}
+     */
+    renderLink?: (item: BreadcrumbTrailItem) => React.ReactElement;
+    /** Accessible label for the ellipsis button. Defaults to translation `breadcrumb.collapsedAriaLabel`. */
+    collapsedLabel?: string;
+}
 declare const Breadcrumb: ({ ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
-declare const BreadcrumbList: ({ className, ...props }: BreadcrumbListProps) => import("react/jsx-runtime").JSX.Element;
+declare const BreadcrumbList: ({ className, wrap, ...props }: BreadcrumbListProps) => import("react/jsx-runtime").JSX.Element;
 declare const BreadcrumbItem: ({ className, ...props }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
 declare const BreadcrumbLink: ({ asChild, className, ...props }: BreadcrumbLinkProps) => import("react/jsx-runtime").JSX.Element;
-declare const BreadcrumbPage: ({ className, ...props }: BreadcrumbPageProps) => import("react/jsx-runtime").JSX.Element;
+declare const BreadcrumbPage: ({ className, children, title, ...props }: BreadcrumbPageProps) => import("react/jsx-runtime").JSX.Element;
 declare const BreadcrumbSeparator: ({ children, className, ...props }: BreadcrumbSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Purely visual "…" marker. For collapsed levels users can open, use
+ * `BreadcrumbCollapsed`, which renders this inside a menu button.
+ */
 declare const BreadcrumbEllipsis: ({ className, ...props }: BreadcrumbEllipsisProps) => import("react/jsx-runtime").JSX.Element;
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+declare const BreadcrumbCollapsed: React.ForwardRefExoticComponent<BreadcrumbCollapsedProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A collapsed level inside `BreadcrumbCollapsed`. Always renders a link,
+ * either a plain `<a>` or the child passed with `asChild`.
+ */
+declare const BreadcrumbCollapsedItem: ({ children, href, asChild, className, }: BreadcrumbCollapsedItemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a whole trail from data, collapsing the middle levels into a
+ * `BreadcrumbCollapsed` menu. Place it inside `BreadcrumbList`.
+ */
+declare const BreadcrumbTrail: {
+    ({ items, collapse, renderLink, collapsedLabel, }: BreadcrumbTrailProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, BreadcrumbCollapsed, BreadcrumbCollapsedItem, BreadcrumbTrail, };
 //# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,+CAA+C;AAC/C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAEzD,8CAA8C;AAC9C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAE5D,8CAA8C;AAC9C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAE5D,8CAA8C;AAC9C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;IACpE,kGAAkG;IAClG,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,8CAA8C;AAC9C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAE9D,mDAAmD;AACnD,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAEjE,kDAAkD;AAClD,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAElE,QAAA,MAAM,UAAU,GAAI,cAAc,eAAe,4CAEhD,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,yBAAyB,mBAAmB,4CAWnE,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,yBAAyB,mBAAmB,4CAQnE,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,kCAIrB,mBAAmB,4CAqBrB,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,yBAAyB,mBAAmB,4CAoBnE,CAAA;AAED,QAAA,MAAM,mBAAmB,GAAI,mCAI1B,wBAAwB,4CAe1B,CAAA;AAED,QAAA,MAAM,kBAAkB,GAAI,yBAGzB,uBAAuB,4CAuBzB,CAAA;AAED,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"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"}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,36 +1,58 @@
-import { jsx as t } from "react/jsx-runtime";
-import "react";
-import { Slot as i } from "@radix-ui/react-slot";
-import { cn as a } from "../../utils/cn.js";
-import { AltArrowRightOutline as n } from "@solar-icons/react-perf";
-import { typographyVariants as o, Typography as m } from "../Typography/Typography.js";
-const f = ({ ...r }) => /* @__PURE__ */ t("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...r }), g = ({ className: r, ...e }) => /* @__PURE__ */ t(
-  "ol",
-  {
-    "data-slot": "breadcrumb-list",
-    className: a(
-      "flex flex-wrap items-center gap-comp-breadcrumb-gap text-sm break-words",
-      r
-    ),
-    ...e
-  }
-), h = ({ className: r, ...e }) => /* @__PURE__ */ t(
-  "li",
-  {
-    "data-slot": "breadcrumb-item",
-    className: a("inline-flex items-center", r),
-    ...e
-  }
-), y = ({
+import { jsx as t, jsxs as x, Fragment as v } from "react/jsx-runtime";
+import * as m from "react";
+import { Slot as D } from "@radix-ui/react-slot";
+import { useMuzaTranslationContext as I } from "../../translations/TranslationContext.js";
+import { hiddenInRangesClassName as k, responsiveBreakpoints as w } from "../../utils/breakpoints.js";
+import { cn as f } from "../../utils/cn.js";
+import { DropdownMenu as L, DropdownMenuTrigger as F, DropdownMenuContent as R, DropdownMenuItem as $ } from "../DropdownMenu/DropdownMenu.js";
+import { Flex as j } from "../Flex/Flex.js";
+import { AltArrowRightOutline as A } from "@solar-icons/react-perf";
+import { typographyVariants as M, Typography as E } from "../Typography/Typography.js";
+const g = m.createContext({ wrap: !0 }), Z = ({ ...r }) => /* @__PURE__ */ t("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...r }), _ = ({
+  className: r,
+  wrap: a = "wrap",
+  ...s
+}) => {
+  const n = a === "wrap", o = m.useMemo(() => ({ wrap: n }), [n]);
+  return /* @__PURE__ */ t(g.Provider, { value: o, children: /* @__PURE__ */ t(
+    j,
+    {
+      component: "ol",
+      "data-slot": "breadcrumb-list",
+      wrap: a,
+      align: "center",
+      className: f(
+        "gap-comp-breadcrumb-gap text-sm",
+        n ? "break-words" : "min-w-0",
+        r
+      ),
+      ...s
+    }
+  ) });
+}, y = ({ className: r, ...a }) => {
+  const { wrap: s } = m.useContext(g);
+  return /* @__PURE__ */ t(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: f(
+        "inline-flex items-center",
+        !s && "shrink-0 whitespace-nowrap has-[[data-slot=breadcrumb-page]]:min-w-0 has-[[data-slot=breadcrumb-page]]:shrink",
+        r
+      ),
+      ...a
+    }
+  );
+}, C = ({
   asChild: r,
-  className: e,
+  className: a,
   ...s
 }) => /* @__PURE__ */ t(
-  r ? i : "a",
+  r ? D : "a",
   {
     "data-slot": "breadcrumb-link",
-    className: a(
-      o({
+    className: f(
+      M({
         variant: "body",
         weight: "regular",
         size: "sm",
@@ -39,79 +61,214 @@ const f = ({ ...r }) => /* @__PURE__ */ t("nav", { "aria-label": "breadcrumb", "
       "font-text text-text-dark-secondary",
       "hover:text-text-brand-def",
       "focus-visible-default",
-      e
+      a
     ),
     ...s
   }
-), k = ({ className: r, ...e }) => /* @__PURE__ */ t(
-  "span",
-  {
-    "data-slot": "breadcrumb-page",
-    role: "link",
-    "aria-disabled": "true",
-    "aria-current": "page",
-    className: a(
-      o({
-        variant: "body",
-        weight: "medium",
-        size: "sm",
-        fixY: !0
-      }),
-      "font-text text-text-dark-primary-def",
-      r
-    ),
-    ...e
-  }
-), v = ({
+), O = ({
+  className: r,
+  children: a,
+  title: s,
+  ...n
+}) => {
+  const { wrap: o } = m.useContext(g);
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      title: s ?? (!o && typeof a == "string" ? a : void 0),
+      className: f(
+        M({
+          variant: "body",
+          weight: "medium",
+          size: "sm",
+          fixY: !0
+        }),
+        "font-text text-text-dark-primary-def",
+        !o && "truncate",
+        r
+      ),
+      ...n,
+      children: a
+    }
+  );
+}, B = ({
   children: r,
-  className: e,
+  className: a,
   ...s
-}) => /* @__PURE__ */ t(
-  "li",
-  {
-    "data-slot": "breadcrumb-separator",
-    role: "presentation",
-    "aria-hidden": "true",
-    className: a(
-      "text-icon-dark-secondary-def [&>svg]:size-comp-breadcrumb-ico-size-sm",
-      e
-    ),
-    ...s,
-    children: r ?? /* @__PURE__ */ t(n, {})
-  }
-), B = ({
+}) => {
+  const { wrap: n } = m.useContext(g);
+  return /* @__PURE__ */ t(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: f(
+        "text-icon-dark-secondary-def [&>svg]:size-comp-breadcrumb-ico-size-sm",
+        !n && "shrink-0",
+        a
+      ),
+      ...s,
+      children: r ?? /* @__PURE__ */ t(A, {})
+    }
+  );
+}, T = ({
   className: r,
-  ...e
+  ...a
 }) => /* @__PURE__ */ t(
   "span",
   {
     "data-slot": "breadcrumb-ellipsis",
     role: "presentation",
     "aria-hidden": "true",
-    className: a(
-      "flex cursor-pointer items-center justify-center text-text-dark-secondary hover:text-text-brand-def",
+    className: f(
+      "flex items-center justify-center text-text-dark-secondary",
       r
     ),
-    ...e,
-    children: /* @__PURE__ */ t(
-      m,
+    ...a,
+    children: /* @__PURE__ */ t(E, { component: "span", variant: "body", weight: "regular", size: "sm", children: "..." })
+  }
+), z = m.forwardRef(
+  ({
+    children: r,
+    label: a,
+    open: s,
+    defaultOpen: n,
+    onOpenChange: o,
+    modal: p,
+    contentProps: b,
+    className: u,
+    ...e
+  }, l) => {
+    const { translations: c } = I();
+    return /* @__PURE__ */ x(
+      L,
       {
-        component: "span",
-        variant: "body",
-        weight: "regular",
-        size: "sm",
-        className: "transition-color",
-        children: "..."
+        open: s,
+        defaultOpen: n,
+        onOpenChange: o,
+        modal: p,
+        children: [
+          /* @__PURE__ */ t(F, { asChild: !0, children: /* @__PURE__ */ t(
+            "button",
+            {
+              ref: l,
+              type: "button",
+              "data-slot": "breadcrumb-collapsed",
+              "aria-label": a ?? c.breadcrumb.collapsedAriaLabel,
+              className: f(
+                "relative inline-flex cursor-pointer items-center rounded-xs text-text-dark-secondary transition-colors",
+                // Widens the tiny "…" hit area into the gaps around it.
+                "after:absolute after:-inset-x-sm after:-inset-y-xs",
+                "hover:text-text-brand-def data-[state=open]:text-text-brand-def",
+                "active:text-text-brand-pressed",
+                "disabled:pointer-events-none disabled:text-text-dark-disabled",
+                "focus-visible-default",
+                u
+              ),
+              ...e,
+              children: /* @__PURE__ */ t(T, { className: "text-inherit" })
+            }
+          ) }),
+          /* @__PURE__ */ t(R, { align: "start", ...b, children: r })
+        ]
       }
-    )
+    );
   }
 );
+z.displayName = "BreadcrumbCollapsed";
+const S = ({
+  children: r,
+  href: a,
+  asChild: s = !1,
+  className: n
+}) => /* @__PURE__ */ t(
+  $,
+  {
+    asChild: !0,
+    "data-slot": "breadcrumb-collapsed-item",
+    className: n,
+    children: s ? r : /* @__PURE__ */ t("a", { href: a, children: r })
+  }
+), P = (r, a) => {
+  const s = r ? [r].flat() : [], n = [];
+  let o;
+  const p = (e) => o === void 0 || o !== null && w.indexOf(e) < w.indexOf(o);
+  for (const e of s)
+    if (e.responsive !== !1)
+      if (typeof e.responsive == "string") {
+        if (!p(e.responsive)) continue;
+        n.push({ rule: e, from: e.responsive, to: o ?? void 0 }), o = e.responsive;
+      } else {
+        n.push({ rule: e, to: o ?? void 0 }), o = null;
+        break;
+      }
+  const b = s[s.length - 1], u = n[n.length - 1];
+  return o !== null && b && ((u == null ? void 0 : u.rule) === b ? u.from = void 0 : n.push({ rule: b, to: o })), n.map(({ rule: e, from: l, to: c }) => {
+    const i = Math.max(0, e.keepStart ?? 1), d = a - Math.max(1, e.keepEnd ?? 1);
+    return {
+      from: l,
+      to: c,
+      hidden: !e.expanded && d > i ? { start: i, end: d } : null
+    };
+  });
+}, Y = (r) => /* @__PURE__ */ t("a", { href: r.href, children: r.label }), N = (r, a) => r.key ?? a, K = ({
+  items: r,
+  collapse: a,
+  renderLink: s = Y,
+  collapsedLabel: n
+}) => {
+  const o = P(a, r.length), p = /* @__PURE__ */ new Map();
+  for (const { hidden: e } of o)
+    e && p.set(`${e.start}-${e.end}`, e);
+  const b = (e, l) => l === r.length - 1 ? /* @__PURE__ */ t(O, { children: e.label }) : e.href ? /* @__PURE__ */ t(C, { asChild: !0, children: s(e) }) : /* @__PURE__ */ t(C, { asChild: !0, className: "hover:text-text-dark-secondary", children: /* @__PURE__ */ t("span", { children: e.label }) }), u = (e, l) => {
+    const c = k(
+      o.filter((d) => {
+        var h;
+        return ((h = d.hidden) == null ? void 0 : h.start) !== e || d.hidden.end !== l;
+      })
+    ) ?? void 0, i = r.slice(e, l).filter((d) => d.href);
+    return /* @__PURE__ */ x(m.Fragment, { children: [
+      e > 0 && /* @__PURE__ */ t(B, { className: c }),
+      /* @__PURE__ */ t(y, { className: c, children: i.length > 0 ? /* @__PURE__ */ t(z, { label: n, children: i.map((d, h) => /* @__PURE__ */ t(
+        S,
+        {
+          asChild: !0,
+          children: s(d)
+        },
+        N(d, e + h)
+      )) }) : /* @__PURE__ */ t(T, {}) })
+    ] }, `breadcrumb-collapsed-${e}-${l}`);
+  };
+  return /* @__PURE__ */ t(v, { children: r.map((e, l) => {
+    const c = k(
+      o.filter(
+        ({ hidden: i }) => i && l >= i.start && l < i.end
+      )
+    );
+    return /* @__PURE__ */ x(m.Fragment, { children: [
+      [...p.values()].filter(({ start: i }) => i === l).map(({ start: i, end: d }) => u(i, d)),
+      c !== null && /* @__PURE__ */ x(v, { children: [
+        l > 0 && /* @__PURE__ */ t(B, { className: c }),
+        /* @__PURE__ */ t(y, { className: c, children: b(e, l) })
+      ] })
+    ] }, N(e, l));
+  }) });
+};
+K.displayName = "BreadcrumbTrail";
 export {
-  f as Breadcrumb,
-  B as BreadcrumbEllipsis,
-  h as BreadcrumbItem,
-  y as BreadcrumbLink,
-  g as BreadcrumbList,
-  k as BreadcrumbPage,
-  v as BreadcrumbSeparator
+  Z as Breadcrumb,
+  z as BreadcrumbCollapsed,
+  S as BreadcrumbCollapsedItem,
+  T as BreadcrumbEllipsis,
+  y as BreadcrumbItem,
+  C as BreadcrumbLink,
+  _ as BreadcrumbList,
+  O as BreadcrumbPage,
+  B as BreadcrumbSeparator,
+  K as BreadcrumbTrail
 };

package/dist/components/Breadcrumb/Breadcrumb.stories.d.ts

@@ -4,4 +4,8 @@ declare const meta: Meta<typeof Breadcrumb>;
 export default meta;
 type Story = StoryObj<typeof Breadcrumb>;
 export declare const Default: Story;
+export declare const CollapsedOpen: Story;
+export declare const SingleLine: Story;
+export declare const Trail: Story;
+export declare const ResponsiveTrail: Story;
 //# sourceMappingURL=Breadcrumb.stories.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EACL,UAAU,EAOX,MAAM,cAAc,CAAA;AAErB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA2CjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KA+BrB,CAAA"}
+{"version":3,"file":"Breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EACL,UAAU,EAWX,MAAM,cAAc,CAAA;AAErB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAiDjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAUxC,eAAO,MAAM,OAAO,EAAE,KAsCrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAqC3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAgCxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAmBnB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAA"}

package/dist/components/Breadcrumb/index.js

@@ -1,10 +1,13 @@
-import { Breadcrumb as a, BreadcrumbEllipsis as m, BreadcrumbItem as b, BreadcrumbLink as c, BreadcrumbList as d, BreadcrumbPage as u, BreadcrumbSeparator as B } from "./Breadcrumb.js";
+import { Breadcrumb as a, BreadcrumbCollapsed as m, BreadcrumbCollapsedItem as d, BreadcrumbEllipsis as b, BreadcrumbItem as c, BreadcrumbLink as u, BreadcrumbList as B, BreadcrumbPage as l, BreadcrumbSeparator as i, BreadcrumbTrail as o } from "./Breadcrumb.js";
 export {
   a as Breadcrumb,
-  m as BreadcrumbEllipsis,
-  b as BreadcrumbItem,
-  c as BreadcrumbLink,
-  d as BreadcrumbList,
-  u as BreadcrumbPage,
-  B as BreadcrumbSeparator
+  m as BreadcrumbCollapsed,
+  d as BreadcrumbCollapsedItem,
+  b as BreadcrumbEllipsis,
+  c as BreadcrumbItem,
+  u as BreadcrumbLink,
+  B as BreadcrumbList,
+  l as BreadcrumbPage,
+  i as BreadcrumbSeparator,
+  o as BreadcrumbTrail
 };