periplo-ui 3.6.1 → 3.7.0

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":"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"}
+{"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":";;;;;;;AAUA,MAAM,iBAAiB,KAAM,CAAA,UAAA,CAM3B,CAAC,EAAE,GAAG,KAAM,EAAA,EAAG,GAAQ,qBAAA,GAAA,CAAC,SAAI,GAAU,EAAA,YAAA,EAAW,YAAc,EAAA,GAAG,OAAO,CAAE;AAC7E,cAAA,CAAe,WAAc,GAAA,gBAAA;AAM7B,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;AAM7B,MAAM,qBAAA,GAAwB,CAAC,SAA2C,KAAA;AACxE,EAAA,QAAQ,SAAW;AAAA,IACjB,KAAK,kBAAA;AACH,MAAO,OAAA,oCAAA;AAAA,IACT,KAAK,YAAA;AACH,MAAO,OAAA,YAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAO,OAAA,WAAA;AAAA,IACT;AACE,MAAO,OAAA,EAAA;AAAA;AAEb,CAAA;AAMA,MAAM,cAAiB,GAAA,KAAA,CAAM,UAQ3B,CAAA,CAAC,EAAE,OAAA,EAAS,SAAW,EAAA,aAAA,GAAgB,kBAAoB,EAAA,QAAA,EAAU,GAAG,KAAA,IAAS,GAAQ,KAAA;AACzF,EAAM,MAAA,IAAA,GAAO,UAAU,IAAO,GAAA,GAAA;AAG9B,EAAA,MAAM,OACJ,GAAA,aAAA,KAAkB,kBAAsB,IAAA,OAAO,aAAa,QACxD,GAAA,QAAA,CAAS,MAAO,CAAA,CAAC,EAAE,WAAY,EAAA,GAAI,QAAS,CAAA,KAAA,CAAM,CAAC,CACnD,GAAA,QAAA;AAEN,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,UAAA,EAAW,QAAQ,QACrC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,QACT,2DAAA;AAAA,QACA,aAAA,KAAkB,kBAAsB,IAAA,qBAAA,CAAsB,aAAa,CAAA;AAAA,QAC3E;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;AACD,cAAA,CAAe,WAAc,GAAA,gBAAA;AAM7B,MAAM,cAAiB,GAAA,KAAA,CAAM,UAK3B,CAAA,CAAC,EAAE,SAAA,EAAW,aAAgB,GAAA,kBAAA,EAAoB,QAAU,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAChF,EAAA,MAAM,OACJ,GAAA,aAAA,KAAkB,kBAAsB,IAAA,OAAO,aAAa,QACxD,GAAA,QAAA,CAAS,MAAO,CAAA,CAAC,EAAE,WAAY,EAAA,GAAI,QAAS,CAAA,KAAA,CAAM,CAAC,CACnD,GAAA,QAAA;AAEN,EACE,uBAAA,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,SAAW,EAAA,EAAA;AAAA,QACT,8BAAA;AAAA,QACA,aAAA,KAAkB,kBAAsB,IAAA,qBAAA,CAAsB,aAAa,CAAA;AAAA,QAC3E;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;AACD,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;AAOjC,MAAM,aAAA,GAAgB,CAAC,KAAkB,KAAA;AACvC,EAAO,OAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,EAAM,GAAG,CAAA;AAChC,CAAA;AAOA,MAAM,qBAAA,GAAwB,CAAC,KAA0B,KAAA;AACvD,EAAO,OAAA,KAAA,CACJ,MAAM,GAAG,CAAA,CACT,IAAI,CAAC,IAAA,EAAM,KAAW,KAAA,KAAA,KAAU,CAAI,GAAA,IAAA,GAAO,KAAK,MAAO,CAAA,CAAC,CAAE,CAAA,WAAA,EAAgB,GAAA,IAAA,CAAK,MAAM,CAAC,CAAE,CACxF,CAAA,IAAA,CAAK,EAAE,CAAA;AACZ,CAAA;AASA,MAAM,SAAY,GAAA,CAAC,QAAkB,EAAA,YAAA,EAAuC,CAAgC,KAAA;AAC1G,EAAA,MAAM,aAAa,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA,CAAE,OAAO,OAAO,CAAA;AAErD,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAC9C,IAAA,IAAI,WAAc,GAAA,KAAA;AAGlB,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,KAAK,CAAG,EAAA;AACvC,MAAA,WAAA,GAAc,aAAa,KAAK,CAAA;AAAA,eAGzB,CAAG,EAAA;AACV,MAAM,MAAA,cAAA,GAAiB,sBAAsB,KAAK,CAAA;AAClD,MAAA,WAAA,GAAc,EAAE,cAAc,CAAA;AAAA,KAG3B,MAAA;AACH,MAAA,WAAA,GAAc,cAAc,KAAK,CAAA;AAAA;AAGnC,IAAO,OAAA;AAAA,MACL,IAAM,EAAA,WAAA;AAAA,MACN,IAAA,EAAM,CAAI,CAAA,EAAA,UAAA,CAAW,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAC,CAAA,CAAE,IAAK,CAAA,GAAG,CAAC,CAAA;AAAA,KACpD;AAAA,GACD,CAAA;AAGD,EAAA,MAAM,OAAU,GAAA,MAAA;AAChB,EAAA,MAAA,CAAO,OAAQ,CAAA;AAAA,IACb,MAAM,YAAe,GAAA,OAAO,CAAK,IAAA,CAAA,GAAI,OAAO,CAAK,IAAA,MAAA;AAAA,IACjD,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAO,OAAA,MAAA;AACT,CAAA;AASA,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,YAAA;AAAA,EACA,CAAA;AAAA,EACA;AACF,CAKM,KAAA;AACJ,EAAA,2BACG,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,cACE,EAAA,EAAA,QAAA,EAAA,SAAA,CAAU,UAAU,YAAc,EAAA,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,KAAO,EAAA,KAAA,EAAO,0BACtD,IAAA,CAAA,KAAA,CAAM,UAAN,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBACE,QAAU,EAAA,KAAA,KAAA,KAAA,CAAM,SAAS,CACxB,mBAAA,GAAA,CAAC,kBAAe,aAA+B,EAAA,QAAA,EAAA,KAAA,CAAM,MAAK,CAE1D,mBAAA,GAAA,CAAC,kBAAe,IAAM,EAAA,KAAA,CAAM,MAAM,aAC/B,EAAA,QAAA,EAAA,KAAA,CAAM,MACT,CAEJ,EAAA,CAAA;AAAA,IACC,KAAQ,GAAA,KAAA,CAAM,MAAS,GAAA,CAAA,wBAAM,mBAAoB,EAAA,EAAA;AAAA,GAV/B,EAAA,EAAA,KAWrB,CACD,CAAA,EACH,CACF,EAAA,CAAA;AAEJ;AAEA,MAAM,eAAkB,GAAA,CAAC,EAAE,KAAA,EAAO,aAAoF,KAAA;AACpH,EACE,uBAAA,GAAA,CAAC,cACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,cACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IACV,qBAAA,IAAA,CAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,IAAA,EAAM,IAAK,CAAA,IAAA,EAAO,eAAK,IAAK,EAAA,CAAA;AAAA,0BAC3C,mBAAoB,EAAA,EAAA;AAAA,KAAA,EAAA,EAFF,KAAM,CAAA,OAAA,CAAQ,IAAI,CAGvC,CACD,CAAA;AAAA,oBACA,GAAA,CAAA,cAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAgB,uBAAY,CAC/B,EAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}

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, };

package/dist/components/Sidebar/Sidebar.js

@@ -0,0 +1,486 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { Sidebar } from '@phosphor-icons/react';
+import { Button } from '../Button/Button.js';
+import { Input } from '../Input/Input.js';
+import { Separator } from '../Separator/Separator.js';
+import { SheetRoot, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../Sheet/Sheet.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
+import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { useIsMobile } from '../../lib/useMobile.js';
+import { cn } from '../../lib/utils.js';
+import { Typography } from '../Typography/Typography.js';
+import { cva } from 'class-variance-authority';
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SidebarContext = React.createContext(null);
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+const SidebarProvider = React.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [isMobile, setOpen, setOpenMobile]);
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
+      },
+      className: cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className),
+      ref,
+      ...props,
+      children
+    }
+  ) }) });
+});
+SidebarProvider.displayName = "SidebarProvider";
+const SidebarRoot = React.forwardRef(({ side = "left", variant = "default", className, children, ...props }, ref) => {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(SheetRoot, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        "data-sidebar": "sidebar",
+        "data-mobile": "true",
+        className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+        style: {
+          "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+        },
+        side,
+        children: [
+          /* @__PURE__ */ jsxs(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "group peer hidden text-sidebar-foreground shadow-md md:block",
+      "data-state": state,
+      "data-side": side,
+      "data-variant": variant,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+              variant === "default" && "group-data-[state=collapsed]:w-[--sidebar-width-icon]",
+              variant === "hidden" && "group-data-[state=collapsed]:w-0",
+              "group-data-[side=right]:rotate-180"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+              side === "left" ? [
+                "left-0",
+                variant === "default" && "group-data-[state=collapsed]:w-[--sidebar-width-icon]",
+                variant === "hidden" && "group-data-[state=collapsed]:left-[calc(var(--sidebar-width)*-1)]"
+              ] : [
+                "right-0",
+                variant === "default" && "group-data-[state=collapsed]:w-[--sidebar-width-icon]",
+                variant === "hidden" && "group-data-[state=collapsed]:right-[calc(var(--sidebar-width)*-1)]"
+              ],
+              "group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx("div", { "data-sidebar": "sidebar", className: "flex h-full w-full flex-col bg-sidebar", children })
+          }
+        )
+      ]
+    }
+  );
+});
+SidebarRoot.displayName = "SidebarRoot";
+const SidebarTrigger = React.forwardRef(
+  ({ className, onClick, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        "data-sidebar": "trigger",
+        variant: "text",
+        className: cn("h-8 w-8 p-1 text-primary-foreground", className),
+        onClick: (event) => {
+          onClick?.(event);
+          toggleSidebar();
+        },
+        ...props,
+        StartIcon: Sidebar,
+        children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
+      }
+    );
+  }
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+const SidebarRail = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        "data-sidebar": "rail",
+        "aria-label": "Toggle Sidebar",
+        tabIndex: -1,
+        onClick: toggleSidebar,
+        title: "Toggle Sidebar",
+        className: cn(
+          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+          "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          "group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full group-data-[variant=offcanvas]:hover:bg-sidebar",
+          "[[data-side=left][data-variant=offcanvas]_&]:-right-2",
+          "[[data-side=right][data-variant=offcanvas]_&]:-left-2",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarRail.displayName = "SidebarRail";
+const SidebarInset = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      ref,
+      className: cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      ),
+      ...props
+    }
+  );
+});
+SidebarInset.displayName = "SidebarInset";
+const SidebarInput = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        "data-sidebar": "input",
+        className: cn(
+          "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarInput.displayName = "SidebarInput";
+const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, "data-sidebar": "header", className: cn("flex flex-col gap-2 p-2", className), ...props });
+});
+SidebarHeader.displayName = "SidebarHeader";
+const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, "data-sidebar": "footer", className: cn("flex flex-col gap-2 p-2", className), ...props });
+});
+SidebarFooter.displayName = "SidebarFooter";
+const SidebarSeparator = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Separator,
+      {
+        ref,
+        "data-sidebar": "separator",
+        className: cn("mx-2 w-auto bg-sidebar-border", className),
+        ...props
+      }
+    );
+  }
+);
+SidebarSeparator.displayName = "SidebarSeparator";
+const SidebarContent = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sidebar": "content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto",
+        "group-data-[variant=default]:group-data-[state=collapsed]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";
+const SidebarGroupLabel = React.forwardRef(
+  ({ className, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-sidebar": "group-label",
+        className: cn(
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "group-data-[state=collapsed]:group-data-[variant=hidden]:hidden",
+          "group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0",
+          className
+        ),
+        ...props,
+        children: typeof children === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "label-md", color: "secondary", children }) : children
+      }
+    );
+  }
+);
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+const SidebarGroupAction = React.forwardRef(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-sidebar": "group-action",
+        className: cn(
+          "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "after:absolute after:-inset-2 after:md:hidden",
+          "group-data-[state=collapsed]:hidden",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarGroupAction.displayName = "SidebarGroupAction";
+const SidebarGroupContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props })
+);
+SidebarGroupContent.displayName = "SidebarGroupContent";
+const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", { ref, "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-1", className), ...props }));
+SidebarMenu.displayName = "SidebarMenu";
+const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+const SidebarMenuButton = React.forwardRef(({ asChild = false, isActive = false, tooltip, className, children, variant = "navigation-item", ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();
+  const sidebarMenuButtonVariants = cva(
+    "peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+    {
+      variants: {
+        variant: {
+          "navigation-item": "h-8",
+          element: "group-data-[state=collapsed]:!p-0"
+        }
+      },
+      defaultVariants: {
+        variant: "navigation-item"
+      }
+    }
+  );
+  const button = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-sidebar": "menu-button",
+      "data-active": isActive,
+      className: cn(sidebarMenuButtonVariants({ variant }), className),
+      ...props,
+      children
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltip })
+  ] });
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-sidebar": "menu-action",
+      className: cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[state=collapsed]:hidden",
+        showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+const SidebarMenuBadge = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sidebar": "menu-badge",
+      className: cn(
+        "pointer-events-none absolute right-1 top-1.5 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "group-data-[state=collapsed]:group-data-[variant=hidden]:hidden",
+        "group-data-[state=collapsed]:group-data-[variant=default]:opacity-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+  const width = React.useMemo(() => {
+    return `${Math.floor(window.crypto.getRandomValues(new Uint32Array(1))[0] % 40 + 50)}%`;
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-sidebar": "menu-skeleton",
+      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "h-4 max-w-[--skeleton-width] flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": width
+            }
+          }
+        )
+      ]
+    }
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+const SidebarMenuSub = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      "data-sidebar": "menu-sub",
+      className: cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[state=collapsed]:hidden",
+        className
+      ),
+      ...props
+    }
+  )
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+const SidebarMenuSubItem = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, ...props }));
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+const SidebarMenuSubButton = React.forwardRef(({ asChild = false, isActive, className, children, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-sidebar": "menu-sub-button",
+      "data-active": isActive,
+      className: cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        "group-data-[state=collapsed]:hidden",
+        className
+      ),
+      ...props,
+      children: typeof children === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "body-md", children }) : children
+    }
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, useSidebar };
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Sidebar as SidebarIcon } from '@phosphor-icons/react'\n\nimport { Button } from '../Button'\nimport { Input } from '../Input'\nimport { Separator } from '../Separator'\nimport { SheetContent, SheetDescription, SheetHeader, SheetRoot, SheetTitle } from '../Sheet'\nimport { Skeleton } from '../Skeleton'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { useIsMobile } from '../../lib/useMobile'\nimport { cn } from '@/lib/utils'\nimport { Typography } from '../Typography'\nimport { cva } from 'class-variance-authority'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === 'function' ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open],\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? 'expanded' : 'collapsed'\n\n  const contextValue = React.useMemo<SidebarContext>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH,\n              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', className)}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  )\n})\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst SidebarRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'default' | 'hidden'\n  }\n>(({ side = 'left', variant = 'default', className, children, ...props }, ref) => {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (isMobile) {\n    return (\n      <SheetRoot open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </SheetRoot>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      className=\"group peer hidden text-sidebar-foreground shadow-md md:block\"\n      data-state={state}\n      data-side={side}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          'relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',\n          variant === 'default' && 'group-data-[state=collapsed]:w-[--sidebar-width-icon]',\n          variant === 'hidden' && 'group-data-[state=collapsed]:w-0',\n          'group-data-[side=right]:rotate-180',\n        )}\n      />\n      <div\n        className={cn(\n          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',\n          side === 'left'\n            ? [\n                'left-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-[--sidebar-width-icon]',\n                variant === 'hidden' && 'group-data-[state=collapsed]:left-[calc(var(--sidebar-width)*-1)]',\n              ]\n            : [\n                'right-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-[--sidebar-width-icon]',\n                variant === 'hidden' && 'group-data-[state=collapsed]:right-[calc(var(--sidebar-width)*-1)]',\n              ],\n          'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          className,\n        )}\n        {...props}\n      >\n        <div data-sidebar=\"sidebar\" className=\"flex h-full w-full flex-col bg-sidebar\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n})\nSidebarRoot.displayName = 'SidebarRoot'\n\nconst SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(\n  ({ className, onClick, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <Button\n        ref={ref}\n        data-sidebar=\"trigger\"\n        variant=\"text\"\n        className={cn('h-8 w-8 p-1 text-primary-foreground', className)}\n        onClick={(event) => {\n          onClick?.(event)\n          toggleSidebar()\n        }}\n        {...props}\n        StartIcon={SidebarIcon}\n      >\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n    )\n  },\n)\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full group-data-[variant=offcanvas]:hover:bg-sidebar',\n          '[[data-side=left][data-variant=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-variant=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        'relative flex w-full flex-1 flex-col bg-background',\n        'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = React.forwardRef<React.ElementRef<typeof Input>, React.ComponentProps<typeof Input>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Input\n        ref={ref}\n        data-sidebar=\"input\"\n        className={cn(\n          'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<React.ElementRef<typeof Separator>, React.ComponentProps<typeof Separator>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Separator\n        ref={ref}\n        data-sidebar=\"separator\"\n        className={cn('mx-2 w-auto bg-sidebar-border', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto',\n        'group-data-[variant=default]:group-data-[state=collapsed]:overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { asChild?: boolean }>(\n  ({ className, asChild = false, children, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"group-label\"\n        className={cn(\n          'flex h-8 shrink-0 items-center rounded-md px-2 text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n          'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n          'group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n          className,\n        )}\n        {...props}\n      >\n        {typeof children === 'string' ? (\n          <Typography variant=\"label-md\" color=\"secondary\">\n            {children}\n          </Typography>\n        ) : (\n          children\n        )}\n      </Comp>\n    )\n  },\n)\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'> & { asChild?: boolean }>(\n  ({ className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"group-action\"\n        className={cn(\n          'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n          'after:absolute after:-inset-2 after:md:hidden',\n          'group-data-[state=collapsed]:hidden',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (\n  <ul ref={ref} data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (\n  <li ref={ref} data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n    variant?: 'navigation-item' | 'element'\n  }\n>(({ asChild = false, isActive = false, tooltip, className, children, variant = 'navigation-item', ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n  const { isMobile, state } = useSidebar()\n\n  const sidebarMenuButtonVariants = cva(\n    'peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n    {\n      variants: {\n        variant: {\n          'navigation-item': 'h-8',\n          element: 'group-data-[state=collapsed]:!p-0',\n        },\n      },\n      defaultVariants: {\n        variant: 'navigation-item',\n      },\n    },\n  )\n\n  const button = (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-button\"\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant }), className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === 'string') {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <TooltipRoot>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n    </TooltipRoot>\n  )\n})\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'group-data-[state=collapsed]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-1 top-1.5 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n        'group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor((window.crypto.getRandomValues(new Uint32Array(1))[0] % 40) + 50)}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-[--skeleton-width] flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n        'group-data-[state=collapsed]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ ...props }, ref) => (\n  <li ref={ref} {...props} />\n))\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<'a'> & {\n    asChild?: boolean\n    isActive?: boolean\n  }\n>(({ asChild = false, isActive, className, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-active={isActive}\n      className={cn(\n        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n        'group-data-[state=collapsed]:hidden',\n        className,\n      )}\n      {...props}\n    >\n      {typeof children === 'string' ? <Typography variant=\"body-md\">{children}</Typography> : children}\n    </Comp>\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n  SidebarRoot,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiBA;AACA;AACA;AACA;AACA;AACA;AAYA;AAEA;AACE;AACA;AACE;AAAmE;AAGrE;AACF;AAEA;AAQE;AACA;AAIA;AACA;AACA;AAAsB;AAElB;AACA;AACE;AAAqB;AAErB;AAAkB;AAIpB;AAAgG;AAClG;AACkB;AAIpB;AACE;AAA0E;AAI5E;AACE;AACE;AACE;AACA;AAAc;AAChB;AAGF;AACA;AAAgE;AAKlE;AAEA;AAA2B;AAClB;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACyE;AAG3E;AAGM;AAAC;AAAA;AAEG;AACqB;AACK;AACrB;AACL;AAE0G;AAC5G;AACI;AAEH;AAAA;AAKX;AACA;AAEA;AAOE;AAEA;AACE;AAEI;AAAC;AAAA;AACc;AACD;AACF;AAER;AACqB;AACrB;AAEF;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACC;AACU;AACE;AACD;AACG;AAGd;AAAA;AAAC;AAAA;AACY;AACT;AACyB;AACD;AACxB;AACF;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AAEI;AACE;AACyB;AACD;AAE1B;AACE;AACyB;AACD;AAC1B;AACJ;AACA;AACF;AACI;AAIJ;AAAA;AACF;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACL;AACsD;AAE5D;AACA;AAAc;AAChB;AACI;AACO;AAE6B;AAAA;AAC1C;AAGN;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACD;AACD;AACH;AACK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEM;AACJ;AACE;AAAC;AAAA;AACC;AACW;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA2B;AAEvB;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEM;AACJ;AACF;AACA;AAEM;AACJ;AACF;AACA;AAEA;AAA+B;AAE3B;AACE;AAAC;AAAA;AACC;AACa;AAC2C;AACpD;AAAA;AACN;AAGN;AACA;AAEM;AACJ;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEM;AACJ;AACE;AAAC;AAAA;AACC;AACa;AACuD;AAChE;AAAA;AAGV;AACA;AAEA;AAAgC;AAE5B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAOF;AAAA;AAEJ;AAGN;AACA;AAEA;AAAiC;AAE7B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AAAkC;AAIlC;AACA;AAEM;AAGN;AAEM;AAGN;AAEA;AASE;AACA;AAEA;AAAkC;AAChC;AACA;AACY;AACC;AACY;AACV;AACX;AACF;AACiB;AACN;AACX;AACF;AAGF;AACE;AAAC;AAAA;AACC;AACa;AACA;AACkD;AAC3D;AAEH;AAAA;AAIL;AACE;AAAO;AAGT;AACE;AAAU;AACE;AACZ;AAGF;AAEI;AAAgC;AACoE;AAG1G;AACA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AAEE;AACF;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA+B;AAE3B;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEM;AAOJ;AACE;AAAsF;AAGxF;AACE;AAAC;AAAA;AACC;AACa;AACyD;AAClE;AAEH;AAAsF;AACvF;AAAC;AAAA;AACW;AACG;AAEX;AACsB;AACtB;AAAA;AAEJ;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAGA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAEoF;AAAA;AAG9F;AACA;;"}

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

@@ -0,0 +1 @@
+export * from './Sidebar';

package/dist/components/Sidebar/index.js

@@ -0,0 +1,2 @@
+export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, useSidebar } from './Sidebar.js';
+//# sourceMappingURL=index.js.map

package/dist/components/Sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -33,3 +33,4 @@ export * from './components/Progress';
 export * from './components/DropdownMenu';
 export * from './components/Separator';
 export * from './components/Marquee';
+export * from './components/Sidebar';

package/dist/index.js

@@ -16,7 +16,7 @@ export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, Comma
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetRoot, SheetTitle, SheetTrigger } from './components/Sheet/Sheet.js';
 export { Toaster, toast } from './components/Toaster/Toaster.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/Tabs/Tabs.js';
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/Breadcrumb/Breadcrumb.js';
+export { BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbRoot, BreadcrumbSeparator, NavigationBreadcrumb, PagesBreadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/Table/Table.js';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './components/Accordion/Accordion.js';
 export { RadioGroup, RadioGroupItem } from './components/RadioGroup/RadioGroup.js';
@@ -33,4 +33,5 @@ export { Progress } from './components/Progress/Progress.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenu.js';
 export { Separator } from './components/Separator/Separator.js';
 export { Marquee } from './components/Marquee/Marquee.js';
+export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, useSidebar } from './components/Sidebar/Sidebar.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/plugin.js

@@ -165,9 +165,26 @@ function periploTheme() {
             DEFAULT: "#FBC45F",
             foreground: "#1D1D1B"
           },
+          sidebar: {
+            DEFAULT: "#FFFFFF",
+            foreground: "#1D1D1B",
+            primary: "#F7F7F6",
+            "primary-foreground": "#1D1D1B",
+            accent: "#F7F7F6",
+            "accent-foreground": "#1D1D1B",
+            border: "#E4E4E3",
+            ring: "#FAB700"
+          },
           border: "#F7F7F6",
           input: "#F7F7F6",
           ring: "#FAB700"
+        },
+        boxShadow: {
+          tooltip: "0 2px 5px 2px rgba(0, 0, 0, 0.1)",
+          toast: "0 4px 12px #0000001a"
+        },
+        borderWidth: {
+          1.5: "1.5px"
         }
       }
     }

package/dist/lib/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sources":["../../src/lib/plugin.ts"],"sourcesContent":["import plugin from 'tailwindcss/plugin'\n\nexport function handler() {\n  return true\n}\n\nexport function periploTheme() {\n  return plugin(handler, {\n    theme: {\n      extend: {\n        keyframes: {\n          marquee: {\n            from: { transform: \"translateX(0)\" },\n            to: { transform: \"translateX(calc(-100% - var(--gap)))\" },\n          },\n          \"marquee-vertical\": {\n            from: { transform: \"translateY(0)\" },\n            to: { transform: \"translateY(calc(-100% - var(--gap)))\" },\n          },\n          'accordion-down': {\n            from: { height: '0' },\n            to: { height: 'var(--radix-accordion-content-height)' },\n          },\n          'accordion-up': {\n            from: { height: 'var(--radix-accordion-content-height)' },\n            to: { height: '0' },\n          },\n          shine: {\n            '0%': { backgroundPosition: '200% 0' },\n            '100%': { backgroundPosition: '-100% 0' },\n          },\n          'shine-infinite': {\n            '0%': { backgroundPosition: '200% 0' },\n            '10%': { backgroundPosition: '-100% 0' },\n            '100%': { backgroundPosition: '-100% 0' },\n          },\n          'icon-down-up': {\n            '0%': { transform: 'translateY(0%)' },\n            '50%': { transform: 'translateY(100%)' },\n            '50.01%': { transform: 'translateY(-100%)' },\n            '100%': { transform: 'translateY(0%)' },\n          },\n        },\n        animation: {\n          'accordion-down': 'accordion-down 0.2s ease-out',\n          'accordion-up': 'accordion-up 0.2s ease-out',\n          shine: 'shine 1s ease',\n          'shine-infinite': 'shine-infinite 10s ease infinite',\n          'icon-down-up': 'icon-down-up 0.2s ease-out',\n          marquee: \"marquee var(--duration) linear infinite\",\n        \"marquee-vertical\": \"marquee-vertical var(--duration) linear infinite\",\n        },\n        fontFamily: {\n          montserrat: ['var(--font-montserrat)', 'sans-serif'],\n          opensans: ['var(--font-opensans)', 'sans-serif'],\n        },\n        colors: {\n          foreground: '#1D1D1B',\n          white: '#FFFFFF',\n          card: '#F7F7F6',\n          'card-foreground': '#1D1D1B',\n          popover: '#F7F7F6',\n          'popover-foreground': '#1D1D1B',\n          neutral: {\n            '50': '#F7F7F6',\n            '100': '#E4E4E3',\n            '200': '#C9C9C6',\n            '300': '#A7A6A1',\n            '400': '#84837D',\n            '500': '#696963',\n            '600': '#53534E',\n            '700': '#454440',\n            '800': '#393936',\n            '900': '#32322F',\n            '950': '#1D1D1B',\n            DEFAULT: '#696963',\n            foreground: '#F7F7F6',\n          },\n          primary: {\n            '50': '#FFF0DE',\n            '100': '#FFE182',\n            '200': '#FFD685',\n            '300': '#FFCE59',\n            '400': '#FFC92F',\n            '500': '#FBBA00',\n            '600': '#F1A100',\n            '700': '#F8A800',\n            '800': '#FAA100',\n            '900': '#F19700',\n            '950': '#ED8C00',\n            DEFAULT: '#FBBA00',\n            foreground: '#1D1D1B',\n          },\n          accent: {\n            '50': '#FFD5A8',\n            '100': '#FFCC93',\n            '200': '#FFB86A',\n            '300': '#FFA542',\n            '400': '#FF9119',\n            '500': '#F77D00',\n            '600': '#D57000',\n            '700': '#BC6200',\n            '800': '#A35500',\n            '900': '#894800',\n            '950': '#7C4100',\n            DEFAULT: '#F77D00',\n            foreground: '#1D1D1B',\n          },\n          success: {\n            '50': '#F2FBF2',\n            '100': '#E1F8E0',\n            '200': '#C5EFC3',\n            '300': '#90E194',\n            '400': '#5FCB5D',\n            '500': '#2EC03C',\n            '600': '#299128',\n            '700': '#247223',\n            '800': '#215B20',\n            '900': '#1C4B1D',\n            '950': '#0A290B',\n            DEFAULT: '#247223',\n            foreground: '#FFFFFF',\n          },\n          warning: {\n            '50': '#FCF5EE',\n            '100': '#F7E4CE',\n            '200': '#EEC799',\n            '300': '#E6A563',\n            '400': '#DE8334',\n            '500': '#D76929',\n            '600': '#BE4D21',\n            '700': '#9E331F',\n            '800': '#812B1F',\n            '900': '#6B251C',\n            '950': '#3D100B',\n            DEFAULT: '#D76929',\n            foreground: '#FFFFFF',\n          },\n          error: {\n            '50': '#FEF2F2',\n            '100': '#FEE2E2',\n            '200': '#FFC9C9',\n            '300': '#FDA4A4',\n            '400': '#FA6F70',\n            '500': '#F13637',\n            '600': '#DF2324',\n            '700': '#BC191A',\n            '800': '#9B191A',\n            '900': '#811B1C',\n            '950': '#460909',\n            DEFAULT: '#BC191A',\n            foreground: '#FFFFFF',\n          },\n          background: {\n            '50': '#FFFFFF',\n            '100': '#FBFBFB',\n            '200': '#FEF0D6',\n            '300': '#FDE1AE',\n            '400': '#FCD386',\n            '500': '#FBC45F',\n            '600': '#FAB637',\n            '700': '#F9A70F',\n            '800': '#DA8F05',\n            '900': '#B27504',\n            '950': '#9E6804',\n            DEFAULT: '#FBC45F',\n            foreground: '#1D1D1B',\n          },\n          border: '#F7F7F6',\n          input: '#F7F7F6',\n          ring: '#FAB700',\n        },\n      },\n    },\n  })\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"plugin.js","sources":["../../src/lib/plugin.ts"],"sourcesContent":["import plugin from 'tailwindcss/plugin'\n\nexport function handler() {\n  return true\n}\n\nexport function periploTheme() {\n  return plugin(handler, {\n    theme: {\n      extend: {\n        keyframes: {\n          marquee: {\n            from: { transform: 'translateX(0)' },\n            to: { transform: 'translateX(calc(-100% - var(--gap)))' },\n          },\n          'marquee-vertical': {\n            from: { transform: 'translateY(0)' },\n            to: { transform: 'translateY(calc(-100% - var(--gap)))' },\n          },\n          'accordion-down': {\n            from: { height: '0' },\n            to: { height: 'var(--radix-accordion-content-height)' },\n          },\n          'accordion-up': {\n            from: { height: 'var(--radix-accordion-content-height)' },\n            to: { height: '0' },\n          },\n          shine: {\n            '0%': { backgroundPosition: '200% 0' },\n            '100%': { backgroundPosition: '-100% 0' },\n          },\n          'shine-infinite': {\n            '0%': { backgroundPosition: '200% 0' },\n            '10%': { backgroundPosition: '-100% 0' },\n            '100%': { backgroundPosition: '-100% 0' },\n          },\n          'icon-down-up': {\n            '0%': { transform: 'translateY(0%)' },\n            '50%': { transform: 'translateY(100%)' },\n            '50.01%': { transform: 'translateY(-100%)' },\n            '100%': { transform: 'translateY(0%)' },\n          },\n        },\n        animation: {\n          'accordion-down': 'accordion-down 0.2s ease-out',\n          'accordion-up': 'accordion-up 0.2s ease-out',\n          shine: 'shine 1s ease',\n          'shine-infinite': 'shine-infinite 10s ease infinite',\n          'icon-down-up': 'icon-down-up 0.2s ease-out',\n          marquee: 'marquee var(--duration) linear infinite',\n          'marquee-vertical': 'marquee-vertical var(--duration) linear infinite',\n        },\n        fontFamily: {\n          montserrat: ['var(--font-montserrat)', 'sans-serif'],\n          opensans: ['var(--font-opensans)', 'sans-serif'],\n        },\n        colors: {\n          foreground: '#1D1D1B',\n          white: '#FFFFFF',\n          card: '#F7F7F6',\n          'card-foreground': '#1D1D1B',\n          popover: '#F7F7F6',\n          'popover-foreground': '#1D1D1B',\n          neutral: {\n            '50': '#F7F7F6',\n            '100': '#E4E4E3',\n            '200': '#C9C9C6',\n            '300': '#A7A6A1',\n            '400': '#84837D',\n            '500': '#696963',\n            '600': '#53534E',\n            '700': '#454440',\n            '800': '#393936',\n            '900': '#32322F',\n            '950': '#1D1D1B',\n            DEFAULT: '#696963',\n            foreground: '#F7F7F6',\n          },\n          primary: {\n            '50': '#FFF0DE',\n            '100': '#FFE182',\n            '200': '#FFD685',\n            '300': '#FFCE59',\n            '400': '#FFC92F',\n            '500': '#FBBA00',\n            '600': '#F1A100',\n            '700': '#F8A800',\n            '800': '#FAA100',\n            '900': '#F19700',\n            '950': '#ED8C00',\n            DEFAULT: '#FBBA00',\n            foreground: '#1D1D1B',\n          },\n          accent: {\n            '50': '#FFD5A8',\n            '100': '#FFCC93',\n            '200': '#FFB86A',\n            '300': '#FFA542',\n            '400': '#FF9119',\n            '500': '#F77D00',\n            '600': '#D57000',\n            '700': '#BC6200',\n            '800': '#A35500',\n            '900': '#894800',\n            '950': '#7C4100',\n            DEFAULT: '#F77D00',\n            foreground: '#1D1D1B',\n          },\n          success: {\n            '50': '#F2FBF2',\n            '100': '#E1F8E0',\n            '200': '#C5EFC3',\n            '300': '#90E194',\n            '400': '#5FCB5D',\n            '500': '#2EC03C',\n            '600': '#299128',\n            '700': '#247223',\n            '800': '#215B20',\n            '900': '#1C4B1D',\n            '950': '#0A290B',\n            DEFAULT: '#247223',\n            foreground: '#FFFFFF',\n          },\n          warning: {\n            '50': '#FCF5EE',\n            '100': '#F7E4CE',\n            '200': '#EEC799',\n            '300': '#E6A563',\n            '400': '#DE8334',\n            '500': '#D76929',\n            '600': '#BE4D21',\n            '700': '#9E331F',\n            '800': '#812B1F',\n            '900': '#6B251C',\n            '950': '#3D100B',\n            DEFAULT: '#D76929',\n            foreground: '#FFFFFF',\n          },\n          error: {\n            '50': '#FEF2F2',\n            '100': '#FEE2E2',\n            '200': '#FFC9C9',\n            '300': '#FDA4A4',\n            '400': '#FA6F70',\n            '500': '#F13637',\n            '600': '#DF2324',\n            '700': '#BC191A',\n            '800': '#9B191A',\n            '900': '#811B1C',\n            '950': '#460909',\n            DEFAULT: '#BC191A',\n            foreground: '#FFFFFF',\n          },\n          background: {\n            '50': '#FFFFFF',\n            '100': '#FBFBFB',\n            '200': '#FEF0D6',\n            '300': '#FDE1AE',\n            '400': '#FCD386',\n            '500': '#FBC45F',\n            '600': '#FAB637',\n            '700': '#F9A70F',\n            '800': '#DA8F05',\n            '900': '#B27504',\n            '950': '#9E6804',\n            DEFAULT: '#FBC45F',\n            foreground: '#1D1D1B',\n          },\n          sidebar: {\n            DEFAULT: '#FFFFFF',\n            foreground: '#1D1D1B',\n            primary: '#F7F7F6',\n            'primary-foreground': '#1D1D1B',\n            accent: '#F7F7F6',\n            'accent-foreground': '#1D1D1B',\n            border: '#E4E4E3',\n            ring: '#FAB700',\n          },\n          border: '#F7F7F6',\n          input: '#F7F7F6',\n          ring: '#FAB700',\n        },\n        boxShadow: {\n          tooltip: '0 2px 5px 2px rgba(0, 0, 0, 0.1)',\n          toast: '0 4px 12px #0000001a',\n        },\n        borderWidth: {\n          1.5: '1.5px',\n        },\n      },\n    },\n  })\n}\n"],"names":[],"mappings":"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"}

package/dist/lib/useMobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/lib/useMobile.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(undefined);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+
+export { useIsMobile };
+//# sourceMappingURL=useMobile.js.map

package/dist/lib/useMobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMobile.js","sources":["../../src/lib/useMobile.tsx"],"sourcesContent":["import * as React from 'react'\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener('change', onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener('change', onChange)\n  }, [])\n\n  return !!isMobile\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAoB,GAAA,GAAA;AAEnB,SAAS,WAAc,GAAA;AAC5B,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,KAAA,CAAM,SAA8B,SAAS,CAAA;AAE7E,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,MAAM,MAAM,MAAO,CAAA,UAAA,CAAW,CAAe,YAAA,EAAA,iBAAA,GAAoB,CAAC,CAAK,GAAA,CAAA,CAAA;AACvE,IAAA,MAAM,WAAW,MAAM;AACrB,MAAY,WAAA,CAAA,MAAA,CAAO,aAAa,iBAAiB,CAAA;AAAA,KACnD;AACA,IAAI,GAAA,CAAA,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACvC,IAAY,WAAA,CAAA,MAAA,CAAO,aAAa,iBAAiB,CAAA;AACjD,IAAA,OAAO,MAAM,GAAA,CAAI,mBAAoB,CAAA,QAAA,EAAU,QAAQ,CAAA;AAAA,GACzD,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,CAAC,CAAC,QAAA;AACX;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "3.6.1",
+  "version": "3.7.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",