periplo-ui 3.6.2 → 3.7.1

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

@@ -3,7 +3,7 @@ import * as React from 'react';
  * Root container for the breadcrumb navigation.
  * Provides the overall context and ARIA labeling.
  */
-declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+declare const BreadcrumbRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     /** Custom separator element to use between breadcrumb items */
     separator?: React.ReactNode;
 } & React.RefAttributes<HTMLElement>>;
@@ -17,6 +17,8 @@ declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.Detaile
  * Wraps a link or the current page indicator.
  */
 declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+/** Text transform options for breadcrumb links */
+type TextTransformOption = 'capitalize' | 'capitalize-first' | 'uppercase' | 'none';
 /**
  * Interactive link element for breadcrumb navigation.
  * Can be rendered as a custom element using asChild.
@@ -24,12 +26,16 @@ declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.Detaile
 declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     /** When true, the component will render its children directly instead of wrapping them in an anchor tag */
     asChild?: boolean;
+    /** The text transformation to apply to the link text */
+    textTransform?: TextTransformOption;
 } & React.RefAttributes<HTMLAnchorElement>>;
 /**
  * Current page indicator in the breadcrumb.
  * Non-interactive element showing the current location.
  */
-declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    textTransform?: TextTransformOption;
+} & React.RefAttributes<HTMLSpanElement>>;
 /**
  * Separator element between breadcrumb items.
  * Can be customized with different icons or characters.
@@ -46,4 +52,24 @@ declare const BreadcrumbEllipsis: {
     ({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+/**
+ * Navigation breadcrumb component.
+ * Displays a breadcrumb navigation for the current path.
+ * @param pathname - The current pathname
+ * @param pathMappings - Optional object containing custom path mappings
+ * @param t - Optional translation function
+ */
+declare const NavigationBreadcrumb: ({ pathname, pathMappings, t, textTransform, }: {
+    pathname: string;
+    pathMappings?: Record<string, string>;
+    t?: (key: string) => string;
+    textTransform?: TextTransformOption;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const PagesBreadcrumb: ({ pages, currentPage }: {
+    pages: {
+        link: string;
+        text: string;
+    }[];
+    currentPage: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export { BreadcrumbRoot, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, NavigationBreadcrumb, PagesBreadcrumb, };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import { Typography } from '../Typography/Typography.js';
 import { cn } from '../../lib/utils.js';
 
-const Breadcrumb = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
-Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbRoot = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+BreadcrumbRoot.displayName = "BreadcrumbRoot";
 const BreadcrumbList = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "ol",
@@ -25,30 +25,54 @@ const BreadcrumbItem = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props })
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
-const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+const getTextTransformClass = (transform) => {
+  switch (transform) {
+    case "capitalize-first":
+      return "[&]:has-[::first-letter]:uppercase";
+    case "capitalize":
+      return "capitalize";
+    case "uppercase":
+      return "uppercase";
+    default:
+      return "";
+  }
+};
+const BreadcrumbLink = React.forwardRef(({ asChild, className, textTransform = "capitalize-first", children, ...props }, ref) => {
   const Comp = asChild ? Slot : "a";
-  return /* @__PURE__ */ jsx(Typography, { variant: "title-sm", children: /* @__PURE__ */ jsx(
+  const content = textTransform === "capitalize-first" && typeof children === "string" ? children.charAt(0).toUpperCase() + children.slice(1) : children;
+  return /* @__PURE__ */ jsx(Typography, { variant: "title-sm", weight: "medium", children: /* @__PURE__ */ jsx(
     Comp,
     {
       ref,
-      className: cn("text-neutral-500 transition-colors hover:text-neutral-950", className),
-      ...props
+      className: cn(
+        "text-neutral-500 transition-colors hover:text-neutral-950",
+        textTransform !== "capitalize-first" && getTextTransformClass(textTransform),
+        className
+      ),
+      ...props,
+      children: content
     }
   ) });
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-const BreadcrumbPage = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(Typography, { variant: "title-sm", children: /* @__PURE__ */ jsx(
+const BreadcrumbPage = React.forwardRef(({ className, textTransform = "capitalize-first", children, ...props }, ref) => {
+  const content = textTransform === "capitalize-first" && typeof children === "string" ? children.charAt(0).toUpperCase() + children.slice(1) : children;
+  return /* @__PURE__ */ jsx(Typography, { variant: "title-sm", children: /* @__PURE__ */ jsx(
     "span",
     {
       ref,
       "aria-disabled": "true",
       "aria-current": "page",
-      className: cn("font-medium text-neutral-950", className),
-      ...props
+      className: cn(
+        "font-medium text-neutral-950",
+        textTransform !== "capitalize-first" && getTextTransformClass(textTransform),
+        className
+      ),
+      ...props,
+      children: content
     }
-  ) })
-);
+  ) });
+});
 BreadcrumbPage.displayName = "BreadcrumbPage";
 const BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("text-neutral-500 [&>svg]:size-3.5", className), ...props, children: children ?? /* @__PURE__ */ jsx(CaretRight, {}) });
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -57,6 +81,56 @@ const BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("sp
   /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
 ] });
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+const sanitizeRoute = (route) => {
+  return route.replace(/-/g, " ");
+};
+const routeToTranslationKey = (route) => {
+  return route.split("-").map((word, index) => index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)).join("");
+};
+const getRoutes = (pathname, pathMappings, t) => {
+  const baseRoutes = pathname.split("/").filter(Boolean);
+  const routes = baseRoutes.map((route, index) => {
+    let displayName = route;
+    if (pathMappings && pathMappings[route]) {
+      displayName = pathMappings[route];
+    } else if (t) {
+      const translationKey = routeToTranslationKey(route);
+      displayName = t(translationKey);
+    } else {
+      displayName = sanitizeRoute(route);
+    }
+    return {
+      name: displayName,
+      href: `/${baseRoutes.slice(0, index + 1).join("/")}`
+    };
+  });
+  const homeKey = "home";
+  routes.unshift({
+    name: pathMappings?.[homeKey] || t?.(homeKey) || "Home",
+    href: "/"
+  });
+  return routes;
+};
+const NavigationBreadcrumb = ({
+  pathname,
+  pathMappings,
+  t,
+  textTransform
+}) => {
+  return /* @__PURE__ */ jsx(BreadcrumbRoot, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: getRoutes(pathname, pathMappings, t).map((route, index, array) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: index === array.length - 1 ? /* @__PURE__ */ jsx(BreadcrumbPage, { textTransform, children: route.name }) : /* @__PURE__ */ jsx(BreadcrumbLink, { href: route.href, textTransform, children: route.name }) }),
+    index < array.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})
+  ] }, index)) }) });
+};
+const PagesBreadcrumb = ({ pages, currentPage }) => {
+  return /* @__PURE__ */ jsx(BreadcrumbRoot, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+    pages.map((page) => /* @__PURE__ */ jsxs(BreadcrumbItem, { children: [
+      /* @__PURE__ */ jsx(BreadcrumbLink, { href: page.link, children: page.text }),
+      /* @__PURE__ */ jsx(BreadcrumbSeparator, {})
+    ] }, pages.indexOf(page))),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: currentPage }) })
+  ] }) });
+};
 
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+export { BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbRoot, BreadcrumbSeparator, NavigationBreadcrumb, PagesBreadcrumb };
 //# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { CaretRight, DotsThree } from '@phosphor-icons/react'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\nimport { Typography } from '../Typography'\nimport { cn } from '@/lib/utils'\n\n/**\n * Root container for the breadcrumb navigation.\n * Provides the overall context and ARIA labeling.\n */\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'> & {\n    /** Custom separator element to use between breadcrumb items */\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = 'Breadcrumb'\n\n/**\n * Container for breadcrumb items.\n * Handles layout and spacing of the breadcrumb navigation.\n */\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n  ({ className, ...props }, ref) => (\n    <ol\n      ref={ref}\n      className={cn(\n        'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n/**\n * Individual breadcrumb item container.\n * Wraps a link or the current page indicator.\n */\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />\n  ),\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n/**\n * Interactive link element for breadcrumb navigation.\n * Can be rendered as a custom element using asChild.\n */\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<'a'> & {\n    /** When true, the component will render its children directly instead of wrapping them in an anchor tag */\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Typography variant=\"title-sm\">\n      <Comp\n        ref={ref}\n        className={cn('text-neutral-500 transition-colors hover:text-neutral-950', className)}\n        {...props}\n      />\n    </Typography>\n  )\n})\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n/**\n * Current page indicator in the breadcrumb.\n * Non-interactive element showing the current location.\n */\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n  ({ className, ...props }, ref) => (\n    <Typography variant=\"title-sm\">\n      <span\n        ref={ref}\n        aria-disabled=\"true\"\n        aria-current=\"page\"\n        className={cn('font-medium text-neutral-950', className)}\n        {...props}\n      />\n    </Typography>\n  ),\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n/**\n * Separator element between breadcrumb items.\n * Can be customized with different icons or characters.\n */\nconst BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'span'>) => (\n  <span aria-hidden=\"true\" className={cn('text-neutral-500 [&>svg]:size-3.5', className)} {...props}>\n    {children ?? <CaretRight />}\n  </span>\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n/**\n * Ellipsis indicator for truncated breadcrumb paths.\n * Used to show that there are hidden items in the path.\n */\nconst BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (\n  <span aria-hidden=\"true\" className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>\n    <DotsThree className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n"],"names":[],"mappings":";;;;;;;AAUA,MAAM,aAAa,KAAM,CAAA,UAAA,CAMvB,CAAC,EAAE,GAAG,KAAM,EAAA,EAAG,GAAQ,qBAAA,GAAA,CAAC,SAAI,GAAU,EAAA,YAAA,EAAW,YAAc,EAAA,GAAG,OAAO,CAAE;AAC7E,UAAA,CAAW,WAAc,GAAA,YAAA;AAMzB,MAAM,iBAAiB,KAAM,CAAA,UAAA;AAAA,EAC3B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,QACT,0FAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AACA,cAAA,CAAe,WAAc,GAAA,gBAAA;AAM7B,MAAM,iBAAiB,KAAM,CAAA,UAAA;AAAA,EAC3B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,kCAAA,EAAoC,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAE3F;AACA,cAAA,CAAe,WAAc,GAAA,gBAAA;AAMvB,MAAA,cAAA,GAAiB,KAAM,CAAA,UAAA,CAM3B,CAAC,EAAE,SAAS,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAC3C,EAAM,MAAA,IAAA,GAAO,UAAU,IAAO,GAAA,GAAA;AAE9B,EACE,uBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,UAClB,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAG,CAAA,2DAAA,EAA6D,SAAS,CAAA;AAAA,MACnF,GAAG;AAAA;AAAA,GAER,EAAA,CAAA;AAEJ,CAAC;AACD,cAAA,CAAe,WAAc,GAAA,gBAAA;AAM7B,MAAM,iBAAiB,KAAM,CAAA,UAAA;AAAA,EAC3B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,UAClB,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,eAAc,EAAA,MAAA;AAAA,MACd,cAAa,EAAA,MAAA;AAAA,MACb,SAAA,EAAW,EAAG,CAAA,8BAAA,EAAgC,SAAS,CAAA;AAAA,MACtD,GAAG;AAAA;AAAA,GAER,EAAA;AAEJ;AACA,cAAA,CAAe,WAAc,GAAA,gBAAA;AAMvB,MAAA,mBAAA,GAAsB,CAAC,EAAE,QAAA,EAAU,WAAW,GAAG,KAAA,EACrD,qBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,aAAA,EAAY,QAAO,SAAW,EAAA,EAAA,CAAG,qCAAqC,SAAS,CAAA,EAAI,GAAG,KACzF,EAAA,QAAA,EAAA,QAAA,oBAAa,GAAA,CAAA,UAAA,EAAA,EAAW,CAC3B,EAAA;AAEF,mBAAA,CAAoB,WAAc,GAAA,qBAAA;AAMlC,MAAM,qBAAqB,CAAC,EAAE,SAAW,EAAA,GAAG,OAC1C,qBAAA,IAAA,CAAC,MAAK,EAAA,EAAA,aAAA,EAAY,QAAO,SAAW,EAAA,EAAA,CAAG,4CAA4C,SAAS,CAAA,EAAI,GAAG,KACjG,EAAA,QAAA,EAAA;AAAA,kBAAC,GAAA,CAAA,SAAA,EAAA,EAAU,WAAU,SAAU,EAAA,CAAA;AAAA,kBAC9B,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,SAAA,EAAU,QAAI,EAAA,MAAA,EAAA;AAAA,CAChC,EAAA;AAEF,kBAAA,CAAmB,WAAc,GAAA,oBAAA;;;;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { CaretRight, DotsThree } from '@phosphor-icons/react'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\nimport { Typography } from '../Typography'\nimport { cn } from '@/lib/utils'\n\n/**\n * Root container for the breadcrumb navigation.\n * Provides the overall context and ARIA labeling.\n */\nconst BreadcrumbRoot = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'> & {\n    /** Custom separator element to use between breadcrumb items */\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumbRoot.displayName = 'BreadcrumbRoot'\n\n/**\n * Container for breadcrumb items.\n * Handles layout and spacing of the breadcrumb navigation.\n */\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n  ({ className, ...props }, ref) => (\n    <ol\n      ref={ref}\n      className={cn(\n        'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n/**\n * Individual breadcrumb item container.\n * Wraps a link or the current page indicator.\n */\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />\n  ),\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n/** Text transform options for breadcrumb links */\ntype TextTransformOption = 'capitalize' | 'capitalize-first' | 'uppercase' | 'none'\n\n/** Get class names for text transform styling */\nconst getTextTransformClass = (transform: TextTransformOption): string => {\n  switch (transform) {\n    case 'capitalize-first':\n      return '[&]:has-[::first-letter]:uppercase'\n    case 'capitalize':\n      return 'capitalize'\n    case 'uppercase':\n      return 'uppercase'\n    default:\n      return ''\n  }\n}\n\n/**\n * Interactive link element for breadcrumb navigation.\n * Can be rendered as a custom element using asChild.\n */\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<'a'> & {\n    /** When true, the component will render its children directly instead of wrapping them in an anchor tag */\n    asChild?: boolean\n    /** The text transformation to apply to the link text */\n    textTransform?: TextTransformOption\n  }\n>(({ asChild, className, textTransform = 'capitalize-first', children, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  // Simplify the capitalization logic using a direct string transformation\n  const content =\n    textTransform === 'capitalize-first' && typeof children === 'string'\n      ? children.charAt(0).toUpperCase() + children.slice(1)\n      : children\n\n  return (\n    <Typography variant=\"title-sm\" weight={'medium'}>\n      <Comp\n        ref={ref}\n        className={cn(\n          'text-neutral-500 transition-colors hover:text-neutral-950',\n          textTransform !== 'capitalize-first' && getTextTransformClass(textTransform),\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </Comp>\n    </Typography>\n  )\n})\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n/**\n * Current page indicator in the breadcrumb.\n * Non-interactive element showing the current location.\n */\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<'span'> & {\n    textTransform?: TextTransformOption\n  }\n>(({ className, textTransform = 'capitalize-first', children, ...props }, ref) => {\n  const content =\n    textTransform === 'capitalize-first' && typeof children === 'string'\n      ? children.charAt(0).toUpperCase() + children.slice(1)\n      : children\n\n  return (\n    <Typography variant=\"title-sm\">\n      <span\n        ref={ref}\n        aria-disabled=\"true\"\n        aria-current=\"page\"\n        className={cn(\n          'font-medium text-neutral-950',\n          textTransform !== 'capitalize-first' && getTextTransformClass(textTransform),\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </span>\n    </Typography>\n  )\n})\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n/**\n * Separator element between breadcrumb items.\n * Can be customized with different icons or characters.\n */\nconst BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'span'>) => (\n  <span aria-hidden=\"true\" className={cn('text-neutral-500 [&>svg]:size-3.5', className)} {...props}>\n    {children ?? <CaretRight />}\n  </span>\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n/**\n * Ellipsis indicator for truncated breadcrumb paths.\n * Used to show that there are hidden items in the path.\n */\nconst BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (\n  <span aria-hidden=\"true\" className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>\n    <DotsThree className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n/**\n * Sanitizes a route string by replacing hyphens with spaces.\n * @param route - The route string to sanitize.\n * @returns The sanitized route string.\n */\nconst sanitizeRoute = (route: string) => {\n  return route.replace(/-/g, ' ')\n}\n\n/**\n * Transforms a kebab-case route to a camelCase translation key\n * @param route - The route segment in kebab-case\n * @returns The translation key in camelCase\n */\nconst routeToTranslationKey = (route: string): string => {\n  return route\n    .split('-')\n    .map((word, index) => (index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)))\n    .join('')\n}\n\n/**\n * Gets the routes for the breadcrumb navigation.\n * @param pathname - The current pathname.\n * @param pathMappings - Optional object containing custom path mappings.\n * @param t - Optional translation function.\n * @returns The routes for the breadcrumb navigation.\n */\nconst getRoutes = (pathname: string, pathMappings?: Record<string, string>, t?: (key: string) => string) => {\n  const baseRoutes = pathname.split('/').filter(Boolean)\n\n  const routes = baseRoutes.map((route, index) => {\n    let displayName = route\n\n    // Check if there's a custom mapping for this route\n    if (pathMappings && pathMappings[route]) {\n      displayName = pathMappings[route]\n    }\n    // If there's a translation function, convert route to translation key\n    else if (t) {\n      const translationKey = routeToTranslationKey(route)\n      displayName = t(translationKey)\n    }\n    // If no mapping or translation function, sanitize the route\n    else {\n      displayName = sanitizeRoute(route)\n    }\n\n    return {\n      name: displayName,\n      href: `/${baseRoutes.slice(0, index + 1).join('/')}`,\n    }\n  })\n\n  // Handle home translation\n  const homeKey = 'home'\n  routes.unshift({\n    name: pathMappings?.[homeKey] || t?.(homeKey) || 'Home',\n    href: '/',\n  })\n\n  return routes\n}\n\n/**\n * Navigation breadcrumb component.\n * Displays a breadcrumb navigation for the current path.\n * @param pathname - The current pathname\n * @param pathMappings - Optional object containing custom path mappings\n * @param t - Optional translation function\n */\nconst NavigationBreadcrumb = ({\n  pathname,\n  pathMappings,\n  t,\n  textTransform,\n}: {\n  pathname: string\n  pathMappings?: Record<string, string>\n  t?: (key: string) => string\n  textTransform?: TextTransformOption\n}) => {\n  return (\n    <BreadcrumbRoot>\n      <BreadcrumbList>\n        {getRoutes(pathname, pathMappings, t).map((route, index, array) => (\n          <React.Fragment key={index}>\n            <BreadcrumbItem>\n              {index === array.length - 1 ? (\n                <BreadcrumbPage textTransform={textTransform}>{route.name}</BreadcrumbPage>\n              ) : (\n                <BreadcrumbLink href={route.href} textTransform={textTransform}>\n                  {route.name}\n                </BreadcrumbLink>\n              )}\n            </BreadcrumbItem>\n            {index < array.length - 1 && <BreadcrumbSeparator />}\n          </React.Fragment>\n        ))}\n      </BreadcrumbList>\n    </BreadcrumbRoot>\n  )\n}\n\nconst PagesBreadcrumb = ({ pages, currentPage }: { pages: { link: string; text: string }[]; currentPage: string }) => {\n  return (\n    <BreadcrumbRoot>\n      <BreadcrumbList>\n        {pages.map((page) => (\n          <BreadcrumbItem key={pages.indexOf(page)}>\n            <BreadcrumbLink href={page.link}>{page.text}</BreadcrumbLink>\n            <BreadcrumbSeparator />\n          </BreadcrumbItem>\n        ))}\n        <BreadcrumbItem>\n          <BreadcrumbPage>{currentPage}</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </BreadcrumbRoot>\n  )\n}\n\nexport {\n  BreadcrumbRoot,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n  NavigationBreadcrumb,\n  PagesBreadcrumb,\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Breadcrumb/index.js

@@ -1,2 +1,2 @@
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './Breadcrumb.js';
+export { BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbRoot, BreadcrumbSeparator, NavigationBreadcrumb, PagesBreadcrumb } from './Breadcrumb.js';
 //# sourceMappingURL=index.js.map

package/dist/components/Form/Form.d.ts

@@ -1,4 +1,5 @@
 import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { TypographyProps } from '../Typography';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as React from 'react';
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
@@ -19,5 +20,5 @@ declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
 declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 declare const FormControl: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLParagraphElement>>;
 export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/dist/components/Form/Form.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { FormProvider, Controller, useFormContext } from 'react-hook-form';
 import { Label } from '../Label/Label.js';
 import { cn } from '../../lib/utils.js';
+import { Typography } from '../Typography/Typography.js';
 
 const Form = FormProvider;
 const FormFieldContext = React.createContext({});
@@ -67,13 +68,24 @@ const FormDescription = React.forwardRef(
 );
 FormDescription.displayName = "FormDescription";
 const FormMessage = React.forwardRef(
-  ({ className, children, ...props }, ref) => {
+  ({ className = "", children, ...props }, ref) => {
     const { error, formMessageId } = useFormField();
     const body = error ? String(error.message) : children;
     if (!body) {
       return null;
     }
-    return /* @__PURE__ */ jsx("p", { ref, id: formMessageId, className: cn("text-sm text-error", className), ...props, children: body });
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        component: "p",
+        className: cn("flex items-center gap-2", error ? "text-error" : "text-neutral-500", className),
+        variant: "body-md",
+        id: formMessageId,
+        ...props,
+        children: body
+      }
+    );
   }
 );
 FormMessage.displayName = "FormMessage";

package/dist/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["'use client'\nimport * as LabelPrimitive from '@radix-ui/react-label'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\nimport { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form'\n\nimport { Label } from '../Label/Label'\n\nimport { cn } from '@/lib/utils'\n\nconst Form = FormProvider\n\ninterface FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  const contextValue = React.useMemo(() => ({ name: props.name }), [props.name])\n\n  return (\n    <FormFieldContext.Provider value={contextValue}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ninterface FormItemContextValue {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const id = React.useId()\n    const contextValue = React.useMemo(() => ({ id }), [id])\n\n    return (\n      <FormItemContext.Provider value={contextValue}>\n        <div ref={ref} className={cn('space-y-2', className)} {...props} />\n      </FormItemContext.Provider>\n    )\n  },\n)\nFormItem.displayName = 'FormItem'\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return <Label ref={ref} className={cn(error && '', className)} htmlFor={formItemId} {...props} />\n})\nFormLabel.displayName = 'FormLabel'\n\nconst FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(\n  ({ ...props }, ref) => {\n    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n    return (\n      <Slot\n        ref={ref}\n        id={formItemId}\n        aria-describedby={`${formDescriptionId}  ${error ? formMessageId : ''}`}\n        aria-invalid={!!error}\n        {...props}\n      />\n    )\n  },\n)\nFormControl.displayName = 'FormControl'\n\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => {\n    const { formDescriptionId } = useFormField()\n\n    return <p ref={ref} id={formDescriptionId} className={cn('text-muted-foreground text-sm', className)} {...props} />\n  },\n)\nFormDescription.displayName = 'FormDescription'\n\nconst FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { error, formMessageId } = useFormField()\n    const body = error ? String(error.message) : children\n\n    if (!body) {\n      return null\n    }\n\n    return (\n      <p ref={ref} id={formMessageId} className={cn('text-sm text-error', className)} {...props}>\n        {body}\n      </p>\n    )\n  },\n)\nFormMessage.displayName = 'FormMessage'\n\nexport { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }\n"],"names":[],"mappings":";;;;;;;;AAUA;AASA;AAEA;AAGE;AAEF;AACE;AAEA;AAKF;AAEA;AACE;AACA;AACA;AAEA;AAEA;AAEA;AAAO;AACL;AACmB;AACF;AACO;AACJ;AACjB;AAEP;AAMA;AAEA;AAAuB;AAEnB;AACA;AAEA;AAGE;AAGN;AACA;AAEM;AAIJ;AAEA;AACF;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACI;AACiE;AACrD;AACZ;AAAA;AACN;AAGN;AACA;AAEA;AAA8B;AAE1B;AAEA;AAAiH;AAErH;AACA;AAEA;AAA0B;AAEtB;AACA;AAEA;AACE;AAAO;AAGT;AAGE;AAGN;AACA;;"}
+{"version":3,"file":"Form.js","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["'use client'\nimport * as LabelPrimitive from '@radix-ui/react-label'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\nimport { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form'\n\nimport { Label } from '../Label/Label'\n\nimport { cn } from '@/lib/utils'\nimport { Typography, TypographyProps } from '../Typography'\n\nconst Form = FormProvider\n\ninterface FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  const contextValue = React.useMemo(() => ({ name: props.name }), [props.name])\n\n  return (\n    <FormFieldContext.Provider value={contextValue}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ninterface FormItemContextValue {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const id = React.useId()\n    const contextValue = React.useMemo(() => ({ id }), [id])\n\n    return (\n      <FormItemContext.Provider value={contextValue}>\n        <div ref={ref} className={cn('space-y-2', className)} {...props} />\n      </FormItemContext.Provider>\n    )\n  },\n)\nFormItem.displayName = 'FormItem'\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return <Label ref={ref} className={cn(error && '', className)} htmlFor={formItemId} {...props} />\n})\nFormLabel.displayName = 'FormLabel'\n\nconst FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(\n  ({ ...props }, ref) => {\n    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n    return (\n      <Slot\n        ref={ref}\n        id={formItemId}\n        aria-describedby={`${formDescriptionId}  ${error ? formMessageId : ''}`}\n        aria-invalid={!!error}\n        {...props}\n      />\n    )\n  },\n)\nFormControl.displayName = 'FormControl'\n\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => {\n    const { formDescriptionId } = useFormField()\n\n    return <p ref={ref} id={formDescriptionId} className={cn('text-muted-foreground text-sm', className)} {...props} />\n  },\n)\nFormDescription.displayName = 'FormDescription'\n\nconst FormMessage = React.forwardRef<HTMLParagraphElement, TypographyProps>(\n  ({ className = '', children, ...props }, ref) => {\n    const { error, formMessageId } = useFormField()\n    const body = error ? String(error.message) : children\n\n    if (!body) {\n      return null\n    }\n\n    return (\n      <Typography\n        ref={ref}\n        component=\"p\"\n        className={cn('flex items-center gap-2', error ? 'text-error' : 'text-neutral-500', className)}\n        variant=\"body-md\"\n        id={formMessageId}\n        {...props}\n      >\n        {body}\n      </Typography>\n    )\n  },\n)\n\nFormMessage.displayName = 'FormMessage'\n\nexport { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }\n"],"names":[],"mappings":";;;;;;;;;AAWA;AASA;AAEA;AAGE;AAEF;AACE;AAEA;AAKF;AAEA;AACE;AACA;AACA;AAEA;AAEA;AAEA;AAAO;AACL;AACmB;AACF;AACO;AACJ;AACjB;AAEP;AAMA;AAEA;AAAuB;AAEnB;AACA;AAEA;AAGE;AAGN;AACA;AAEM;AAIJ;AAEA;AACF;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACI;AACiE;AACrD;AACZ;AAAA;AACN;AAGN;AACA;AAEA;AAA8B;AAE1B;AAEA;AAAiH;AAErH;AACA;AAEA;AAA0B;AAEtB;AACA;AAEA;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AACC;AACU;AACmF;AACrF;AACJ;AACA;AAEH;AAAA;AACH;AAGN;AAEA;;"}

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,61 @@
+import { TooltipContent } from '../Tooltip';
+import * as React from 'react';
+type SidebarContext = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare const SidebarContext: React.Context<SidebarContext | null>;
+declare function useSidebar(): SidebarContext;
+declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarRoot: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | "right";
+    variant?: "default" | "hidden";
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import('../Button').ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarInput: React.ForwardRefExoticComponent<Omit<import('../Input').InputProps & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<import('../Separator').SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+    variant?: "navigation-item" | "element";
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSkeleton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    showIcon?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+    isActive?: boolean;
+}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export { SidebarRoot, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };