@pautena/react-design-system 2.0.0-alpha.1b → 2.0.0-alpha.4

package/dist/components/header/header-title.mjs

@@ -0,0 +1,35 @@
+import { jsx as t, Fragment as s } from "react/jsx-runtime";
+import i from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+function l({
+  loading: r,
+  children: e,
+  ...a
+}) {
+  return r ? /* @__PURE__ */ t(
+    i,
+    {
+      role: "progressbar",
+      "aria-label": "title loading",
+      className: "h-8 w-8 animate-spin"
+    }
+  ) : typeof e == "string" ? /* @__PURE__ */ t("h1", { className: "text-3xl font-semibold", ...a, children: e }) : /* @__PURE__ */ t(s, { children: e });
+}
+function f({
+  loading: r,
+  children: e,
+  ...a
+}) {
+  return r ? /* @__PURE__ */ t(
+    i,
+    {
+      role: "progressbar",
+      "aria-label": "subtitle loading",
+      className: "h-4 w-4 animate-spin"
+    }
+  ) : typeof e == "string" ? /* @__PURE__ */ t("h2", { className: "text-base text-muted-foreground", ...a, children: e }) : /* @__PURE__ */ t(s, { children: e });
+}
+export {
+  f as HeaderSubtitle,
+  l as default
+};
+//# sourceMappingURL=header-title.mjs.map

package/dist/components/header/header-title.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-title.mjs","sources":["../../../src/components/header/header-title.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport type { HTMLAttributes } from \"react\";\n\n/**\n * Props for the HeaderTitle component.\n */\nexport interface HeaderTitleProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Whether to show a loading indicator.\n   */\n  loading?: boolean;\n  /**\n   * The title content to display.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Header title component with optional loading state.\n */\nexport default function HeaderTitle({\n  loading,\n  children,\n  ...props\n}: HeaderTitleProps) {\n  if (loading) {\n    return (\n      <Loader2\n        role=\"progressbar\"\n        aria-label=\"title loading\"\n        className=\"h-8 w-8 animate-spin\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <h1 className=\"text-3xl font-semibold\" {...props}>\n        {children}\n      </h1>\n    );\n  }\n\n  return <>{children}</>;\n}\n\n/**\n * Props for the HeaderSubtitle component.\n */\nexport interface HeaderSubtitleProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Whether to show a loading indicator.\n   */\n  loading?: boolean;\n  /**\n   * The subtitle content to display.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Header subtitle component with optional loading state.\n */\nexport function HeaderSubtitle({\n  loading,\n  children,\n  ...props\n}: HeaderSubtitleProps) {\n  if (loading) {\n    return (\n      <Loader2\n        role=\"progressbar\"\n        aria-label=\"subtitle loading\"\n        className=\"h-4 w-4 animate-spin\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <h2 className=\"text-base text-muted-foreground\" {...props}>\n        {children}\n      </h2>\n    );\n  }\n\n  return <>{children}</>;\n}\n"],"names":["HeaderTitle","loading","children","props","jsx","Loader2","HeaderSubtitle"],"mappings":";;AAoBA,SAAwBA,EAAY;AAAA,EAClC,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,SAAIF,IAEA,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,IAAA;AAAA,EAAA,IAKZ,OAAOH,KAAa,6BAEnB,MAAA,EAAG,WAAU,0BAA0B,GAAGC,GACxC,UAAAD,GACH,2BAIM,UAAAA,GAAS;AACrB;AAmBO,SAASI,EAAe;AAAA,EAC7B,SAAAL;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,SAAIF,IAEA,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,IAAA;AAAA,EAAA,IAKZ,OAAOH,KAAa,6BAEnB,MAAA,EAAG,WAAU,mCAAmC,GAAGC,GACjD,UAAAD,GACH,2BAIM,UAAAA,GAAS;AACrB;"}

package/dist/components/header/header.d.ts

@@ -0,0 +1,6 @@
+import { HeaderProps } from './header.types';
+/**
+ * Section used to provide basic information about the page and display main actions.
+ */
+export declare function Header({ title, subtitle, preset, actionsVariant, breadcrumbs, breadcrumbSeparator, actions, tabs, tabsMode, navigationButton, border, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/components/header/header.dummy.d.ts

@@ -0,0 +1,5 @@
+import { HeaderAction, HeaderBreadcrumb, HeaderTab } from './header.types';
+export declare const breadcrumbs: HeaderBreadcrumb[];
+export declare const actions: HeaderAction[];
+export declare const tabs: HeaderTab[];
+export declare const linkedTabs: HeaderTab[];

package/dist/components/header/header.mjs

@@ -0,0 +1,133 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { Breadcrumbs as j } from "../breadcrumbs/breadcrumbs.mjs";
+import { Button as u } from "../button/button.mjs";
+import { Tabs as k, TabsList as H, TabsTrigger as I } from "../ui/tabs.mjs";
+import { cn as p } from "../../lib/utils.mjs";
+import { useTab as z } from "../tab-provider/tab-provider.context.mjs";
+import "react";
+import P, { HeaderSubtitle as S } from "./header-title.mjs";
+const A = {
+  default: "bg-muted",
+  primary: "bg-primary",
+  secondary: "bg-secondary",
+  inherit: "bg-inherit",
+  transparent: "bg-transparent",
+  paper: "bg-card"
+}, B = {
+  default: "text-foreground",
+  primary: "text-primary-foreground",
+  secondary: "text-secondary-foreground",
+  inherit: "text-inherit",
+  transparent: "text-foreground",
+  paper: "text-foreground"
+}, L = {
+  inherit: "default",
+  primary: "primary",
+  secondary: "secondary",
+  success: "success",
+  error: "error",
+  info: "info",
+  warning: "warning"
+};
+function q(i, o) {
+  return i === "outlined" ? "outline" : i === "text" ? "ghost" : L[o ?? "primary"];
+}
+function R({
+  title: i = "",
+  subtitle: o,
+  preset: d = "default",
+  actionsVariant: f = "outlined",
+  breadcrumbs: x,
+  breadcrumbSeparator: g,
+  actions: c,
+  tabs: n,
+  tabsMode: h = "navigation",
+  navigationButton: s,
+  border: y = !1
+}) {
+  const [b, N] = z(), T = n?.[b]?.id ?? n?.[0]?.id;
+  return /* @__PURE__ */ e(
+    "section",
+    {
+      className: p(
+        A[d],
+        B[d],
+        y && "border-b"
+      ),
+      children: /* @__PURE__ */ l("div", { className: "mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8", children: [
+        /* @__PURE__ */ l("div", { className: "flex flex-row justify-between py-6", children: [
+          /* @__PURE__ */ l("div", { children: [
+            s ? /* @__PURE__ */ l(
+              u,
+              {
+                variant: "link",
+                size: "sm",
+                className: "mb-2 h-auto p-0 text-sm",
+                onClick: () => {
+                  window.location.assign(s.href);
+                },
+                children: [
+                  s.icon,
+                  s.text
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ e(
+              j,
+              {
+                items: x,
+                className: "mt-0.5",
+                separator: g
+              }
+            ),
+            /* @__PURE__ */ e(P, { children: i }),
+            o ? /* @__PURE__ */ e(S, { children: o }) : null
+          ] }),
+          c ? /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: c.map(
+            ({ color: r, disabled: t, id: a, href: m, onClick: v, text: w, variant: C }, V) => /* @__PURE__ */ e(
+              u,
+              {
+                type: "button",
+                size: "sm",
+                variant: q(C ?? f, r),
+                disabled: t,
+                onClick: () => {
+                  v?.(), m && window.location.assign(m);
+                },
+                className: p(V !== c.length - 1 && "mr-1"),
+                children: w
+              },
+              a
+            )
+          ) }) : null
+        ] }),
+        n ? /* @__PURE__ */ e(
+          k,
+          {
+            value: T,
+            onValueChange: (r) => {
+              const t = n.findIndex((a) => a.id === r);
+              h === "panel" && t >= 0 && N(t);
+            },
+            className: "py-2",
+            children: /* @__PURE__ */ e(H, { className: "mx-auto h-auto", children: n.map(({ id: r, label: t, disabled: a }) => /* @__PURE__ */ e(
+              I,
+              {
+                value: r,
+                disabled: a,
+                className: "px-2.5 py-1 text-sm data-active:font-semibold",
+                children: t
+              },
+              r
+            )) })
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+export {
+  R as Header,
+  R as default
+};
+//# sourceMappingURL=header.mjs.map

package/dist/components/header/header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.mjs","sources":["../../../src/components/header/header.tsx"],"sourcesContent":["import Breadcrumbs from \"@/components/breadcrumbs\";\nimport Button, { type ButtonVariant } from \"@/components/button\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { cn } from \"@/lib/utils\";\nimport { useTab } from \"../tab-provider\";\nimport type {\n  HeaderActionColor,\n  HeaderActionVariant,\n  HeaderPreset,\n  HeaderProps,\n} from \"./header.types\";\nimport HeaderTitle, { HeaderSubtitle } from \"./header-title\";\n\nconst bgColorPresets: Record<HeaderPreset, string> = {\n  default: \"bg-muted\",\n  primary: \"bg-primary\",\n  secondary: \"bg-secondary\",\n  inherit: \"bg-inherit\",\n  transparent: \"bg-transparent\",\n  paper: \"bg-card\",\n};\n\nconst textColorPresets: Record<HeaderPreset, string> = {\n  default: \"text-foreground\",\n  primary: \"text-primary-foreground\",\n  secondary: \"text-secondary-foreground\",\n  inherit: \"text-inherit\",\n  transparent: \"text-foreground\",\n  paper: \"text-foreground\",\n};\n\nconst containedColorToButtonVariant: Record<HeaderActionColor, ButtonVariant> =\n  {\n    inherit: \"default\",\n    primary: \"primary\",\n    secondary: \"secondary\",\n    success: \"success\",\n    error: \"error\",\n    info: \"info\",\n    warning: \"warning\",\n  };\n\nfunction getActionButtonVariant(\n  actionVariant: HeaderActionVariant,\n  actionColor?: HeaderActionColor,\n): ButtonVariant {\n  if (actionVariant === \"outlined\") {\n    return \"outline\";\n  }\n\n  if (actionVariant === \"text\") {\n    return \"ghost\";\n  }\n\n  return containedColorToButtonVariant[actionColor ?? \"primary\"];\n}\n\n/**\n * Section used to provide basic information about the page and display main actions.\n */\nexport function Header({\n  title = \"\",\n  subtitle,\n  preset = \"default\",\n  actionsVariant = \"outlined\",\n  breadcrumbs,\n  breadcrumbSeparator,\n  actions,\n  tabs,\n  tabsMode = \"navigation\",\n  navigationButton,\n  border = false,\n}: HeaderProps) {\n  const [selectedTab, setSelectedTab] = useTab();\n  const selectedTabId = tabs?.[selectedTab]?.id ?? tabs?.[0]?.id;\n\n  return (\n    <section\n      className={cn(\n        bgColorPresets[preset],\n        textColorPresets[preset],\n        border && \"border-b\",\n      )}\n    >\n      <div className=\"mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8\">\n        <div className=\"flex flex-row justify-between py-6\">\n          <div>\n            {navigationButton ? (\n              <Button\n                variant=\"link\"\n                size=\"sm\"\n                className=\"mb-2 h-auto p-0 text-sm\"\n                onClick={() => {\n                  window.location.assign(navigationButton.href);\n                }}\n              >\n                {navigationButton.icon}\n                {navigationButton.text}\n              </Button>\n            ) : null}\n\n            <Breadcrumbs\n              items={breadcrumbs}\n              className=\"mt-0.5\"\n              separator={breadcrumbSeparator}\n            />\n\n            <HeaderTitle>{title}</HeaderTitle>\n\n            {subtitle ? <HeaderSubtitle>{subtitle}</HeaderSubtitle> : null}\n          </div>\n\n          {actions ? (\n            <div className=\"flex items-center gap-2\">\n              {actions.map(\n                ({ color, disabled, id, href, onClick, text, variant }, i) => {\n                  const visualVariant = variant ?? actionsVariant;\n\n                  return (\n                    <Button\n                      key={id}\n                      type=\"button\"\n                      size=\"sm\"\n                      variant={getActionButtonVariant(visualVariant, color)}\n                      disabled={disabled}\n                      onClick={() => {\n                        onClick?.();\n\n                        if (href) {\n                          window.location.assign(href);\n                        }\n                      }}\n                      className={cn(i !== actions.length - 1 && \"mr-1\")}\n                    >\n                      {text}\n                    </Button>\n                  );\n                },\n              )}\n            </div>\n          ) : null}\n        </div>\n\n        {tabs ? (\n          <Tabs\n            value={selectedTabId}\n            onValueChange={(value) => {\n              const nextIndex = tabs.findIndex((tab) => tab.id === value);\n\n              if (tabsMode === \"panel\" && nextIndex >= 0) {\n                setSelectedTab(nextIndex);\n              }\n            }}\n            className=\"py-2\"\n          >\n            <TabsList className=\"mx-auto h-auto\">\n              {tabs.map(({ id, label, disabled }) => (\n                <TabsTrigger\n                  key={id}\n                  value={id}\n                  disabled={disabled}\n                  className=\"px-2.5 py-1 text-sm data-active:font-semibold\"\n                >\n                  {label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </Tabs>\n        ) : null}\n      </div>\n    </section>\n  );\n}\n\nexport default Header;\n"],"names":["bgColorPresets","textColorPresets","containedColorToButtonVariant","getActionButtonVariant","actionVariant","actionColor","Header","title","subtitle","preset","actionsVariant","breadcrumbs","breadcrumbSeparator","actions","tabs","tabsMode","navigationButton","border","selectedTab","setSelectedTab","useTab","selectedTabId","jsx","cn","jsxs","Button","Breadcrumbs","HeaderTitle","HeaderSubtitle","color","disabled","id","href","onClick","text","variant","i","Tabs","value","nextIndex","tab","TabsList","label","TabsTrigger"],"mappings":";;;;;;;;AAaA,MAAMA,IAA+C;AAAA,EACnD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AAAA,EACb,OAAO;AACT,GAEMC,IAAiD;AAAA,EACrD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AAAA,EACb,OAAO;AACT,GAEMC,IACJ;AAAA,EACE,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACX;AAEF,SAASC,EACPC,GACAC,GACe;AACf,SAAID,MAAkB,aACb,YAGLA,MAAkB,SACb,UAGFF,EAA8BG,KAAe,SAAS;AAC/D;AAKO,SAASC,EAAO;AAAA,EACrB,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAAC,IAAiB;AAAA,EACjB,aAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,kBAAAC;AAAA,EACA,QAAAC,IAAS;AACX,GAAgB;AACd,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAA,GAChCC,IAAgBP,IAAOI,CAAW,GAAG,MAAMJ,IAAO,CAAC,GAAG;AAE5D,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTvB,EAAeS,CAAM;AAAA,QACrBR,EAAiBQ,CAAM;AAAA,QACvBQ,KAAU;AAAA,MAAA;AAAA,MAGZ,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EACE,UAAA;AAAA,YAAAR,IACC,gBAAAQ;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,MAAM;AACb,yBAAO,SAAS,OAAOT,EAAiB,IAAI;AAAA,gBAC9C;AAAA,gBAEC,UAAA;AAAA,kBAAAA,EAAiB;AAAA,kBACjBA,EAAiB;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,IAElB;AAAA,YAEJ,gBAAAM;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,OAAOf;AAAA,gBACP,WAAU;AAAA,gBACV,WAAWC;AAAA,cAAA;AAAA,YAAA;AAAA,YAGb,gBAAAU,EAACK,KAAa,UAAApB,EAAA,CAAM;AAAA,YAEnBC,IAAW,gBAAAc,EAACM,GAAA,EAAgB,UAAApB,EAAA,CAAS,IAAoB;AAAA,UAAA,GAC5D;AAAA,UAECK,IACC,gBAAAS,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAAT,EAAQ;AAAA,YACP,CAAC,EAAE,OAAAgB,GAAO,UAAAC,GAAU,IAAAC,GAAI,MAAAC,GAAM,SAAAC,GAAS,MAAAC,GAAM,SAAAC,EAAA,GAAWC,MAIpD,gBAAAd;AAAA,cAACG;AAAA,cAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,SAAStB,EAPSgC,KAAWzB,GAOkBmB,CAAK;AAAA,gBACpD,UAAAC;AAAA,gBACA,SAAS,MAAM;AACb,kBAAAG,IAAA,GAEID,KACF,OAAO,SAAS,OAAOA,CAAI;AAAA,gBAE/B;AAAA,gBACA,WAAWT,EAAGa,MAAMvB,EAAQ,SAAS,KAAK,MAAM;AAAA,gBAE/C,UAAAqB;AAAA,cAAA;AAAA,cAdIH;AAAA,YAAA;AAAA,UAiBX,GAEJ,IACE;AAAA,QAAA,GACN;AAAA,QAECjB,IACC,gBAAAQ;AAAA,UAACe;AAAA,UAAA;AAAA,YACC,OAAOhB;AAAA,YACP,eAAe,CAACiB,MAAU;AACxB,oBAAMC,IAAYzB,EAAK,UAAU,CAAC0B,MAAQA,EAAI,OAAOF,CAAK;AAE1D,cAAIvB,MAAa,WAAWwB,KAAa,KACvCpB,EAAeoB,CAAS;AAAA,YAE5B;AAAA,YACA,WAAU;AAAA,YAEV,UAAA,gBAAAjB,EAACmB,GAAA,EAAS,WAAU,kBACjB,UAAA3B,EAAK,IAAI,CAAC,EAAE,IAAAiB,GAAI,OAAAW,GAAO,UAAAZ,EAAA,MACtB,gBAAAR;AAAA,cAACqB;AAAA,cAAA;AAAA,gBAEC,OAAOZ;AAAA,gBACP,UAAAD;AAAA,gBACA,WAAU;AAAA,gBAET,UAAAY;AAAA,cAAA;AAAA,cALIX;AAAA,YAAA,CAOR,EAAA,CACH;AAAA,UAAA;AAAA,QAAA,IAEA;AAAA,MAAA,EAAA,CACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/header/header.types.d.ts

@@ -0,0 +1,146 @@
+import { ReactElement } from 'react';
+export type HeaderPreset = "default" | "inherit" | "primary" | "secondary" | "transparent" | "paper";
+export type HeaderActionVariant = "text" | "outlined" | "contained";
+export type HeaderActionColor = "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+/**
+ * Action button configuration for the header.
+ */
+export type HeaderAction = {
+    /**
+     * Unique identifier.
+     */
+    id: string;
+    /**
+     * Button text label.
+     */
+    text: string;
+    /**
+     * Whether the action is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Navigation URL when clicked.
+     */
+    href?: string;
+    /**
+     * Click handler function.
+     */
+    onClick?: () => void;
+    /**
+     * Button style variant.
+     */
+    variant?: HeaderActionVariant;
+    /**
+     * Button color theme.
+     */
+    color?: HeaderActionColor;
+};
+/**
+ * Breadcrumb navigation item.
+ */
+export interface HeaderBreadcrumb {
+    /**
+     * Unique identifier.
+     */
+    id: string;
+    /**
+     * Display text.
+     */
+    text: string;
+    /**
+     * Navigation URL.
+     */
+    link: string;
+}
+/**
+ * Tab configuration for the header.
+ */
+export interface HeaderTab {
+    /**
+     * Unique identifier.
+     */
+    id: string;
+    /**
+     * Tab label text.
+     */
+    label: string;
+    /**
+     * Whether the tab is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Navigation URL for the tab.
+     */
+    href?: string;
+    /**
+     * Route path pattern for active state matching.
+     */
+    path?: string;
+}
+/**
+ * Navigation button configuration.
+ */
+export interface HeaderNavigationButton {
+    /**
+     * Button text.
+     */
+    text: string;
+    /**
+     * URL where the user is redirected.
+     */
+    href: string;
+    /**
+     * Icon shown before text.
+     */
+    icon?: ReactElement;
+}
+/**
+ * Props for the Header component.
+ */
+export type HeaderProps = {
+    /**
+     * Title of the header.
+     */
+    title?: string | ReactElement;
+    /**
+     * Subtitle of the header.
+     */
+    subtitle?: string | ReactElement;
+    /**
+     * Color preset used by the component.
+     */
+    preset?: HeaderPreset;
+    /**
+     * List of breadcrumbs.
+     */
+    breadcrumbs?: HeaderBreadcrumb[];
+    /**
+     * Separator rendered between breadcrumb items.
+     */
+    breadcrumbSeparator?: string;
+    /**
+     * List of actions that can be performed by the user.
+     */
+    actions?: HeaderAction[];
+    /**
+     * Variant used to render actions.
+     * @default "outlined"
+     */
+    actionsVariant?: HeaderActionVariant;
+    /**
+     * Tabs rendered at the bottom.
+     */
+    tabs?: HeaderTab[];
+    /**
+     * Tabs mode.
+     */
+    tabsMode?: "panel" | "navigation";
+    /**
+     * Optional navigation button.
+     */
+    navigationButton?: HeaderNavigationButton;
+    /**
+     * Whether to display a border at the bottom.
+     */
+    border?: boolean;
+};

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

@@ -0,0 +1,3 @@
+export { default, default as Header } from './header';
+export type { HeaderPreset, HeaderProps, HeaderTab } from './header.types';
+export * from './header-title';

package/dist/components/header-layout/header-layout.d.ts

@@ -0,0 +1,89 @@
+import { JSXElementConstructor, ReactElement } from 'react';
+import { ContentProps } from '../content';
+import { HeaderProps } from '../header';
+import { PlaceholderIcon } from '../placeholder';
+/**
+ * Slots for HeaderLayout.
+ */
+export interface HeaderLayoutSlots {
+    /**
+     * Slot for header component.
+     */
+    header?: JSXElementConstructor<HeaderProps>;
+    /**
+     * Slot for content component.
+     */
+    content?: JSXElementConstructor<ContentProps>;
+}
+/**
+ * Slot props for HeaderLayout.
+ */
+export interface HeaderLayoutSlotProps {
+    /**
+     * Props for header slot.
+     */
+    header?: HeaderProps;
+    /**
+     * Props for content slot.
+     */
+    content?: ContentProps;
+}
+/**
+ * Error payload for HeaderLayout.
+ */
+export interface HeaderLayoutError {
+    /**
+     * Optional icon to display with the error.
+     */
+    icon?: PlaceholderIcon;
+    /**
+     * Optional title for the error.
+     */
+    title?: string;
+    /**
+     * The error message to display.
+     */
+    message: string;
+}
+/**
+ * Props for HeaderLayout.
+ */
+export interface HeaderLayoutProps {
+    /**
+     * Header title.
+     */
+    title: string | ReactElement;
+    /**
+     * Optional subtitle.
+     */
+    subtitle?: string | ReactElement;
+    /**
+     * Optional slots.
+     */
+    slots?: HeaderLayoutSlots;
+    /**
+     * Optional slot props.
+     */
+    slotProps?: HeaderLayoutSlotProps;
+    /**
+     * Optional loading flag.
+     */
+    loading?: boolean;
+    /**
+     * Optional fetching flag.
+     */
+    fetching?: boolean;
+    /**
+     * Optional error state.
+     */
+    error?: HeaderLayoutError;
+    /**
+     * Content rendered in layout.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Layout component with header and content area plus loading/fetching/error states.
+ */
+export declare function HeaderLayout({ loading, title, subtitle, slots, slotProps, children, fetching, error, }: HeaderLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default HeaderLayout;

package/dist/components/header-layout/header-layout.mjs

@@ -0,0 +1,47 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { Content as d } from "../content/content.mjs";
+import { Header as u } from "../header/header.mjs";
+import { Placeholder as h } from "../placeholder/placeholder.mjs";
+import "../tab-provider/tab-provider.context.mjs";
+import { TabProvider as p } from "../tab-provider/tab-provider.provider.mjs";
+import b from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+import x from "../../node_modules/lucide-react/dist/esm/icons/triangle-alert.mjs";
+const v = ({ size: t }) => /* @__PURE__ */ e(x, { className: "text-destructive", size: t });
+function L({
+  loading: t,
+  title: n,
+  subtitle: i,
+  slots: r,
+  slotProps: a,
+  children: o,
+  fetching: m,
+  error: l
+}) {
+  const s = r?.header || u, c = r?.content || d;
+  return /* @__PURE__ */ e(p, { children: /* @__PURE__ */ f("div", { className: "flex h-full min-h-full flex-col", children: [
+    /* @__PURE__ */ e(s, { title: n, subtitle: i, ...a?.header }),
+    m ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: "h-1 w-full bg-muted",
+        role: "progressbar",
+        "aria-label": "fetching"
+      }
+    ) : null,
+    t ? /* @__PURE__ */ e("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ e(b, { role: "progressbar", className: "h-8 w-8 animate-spin" }) }) : null,
+    l ? /* @__PURE__ */ e("div", { className: "mt-4", children: /* @__PURE__ */ e(
+      h,
+      {
+        icon: l.icon || v,
+        title: l.title || "There has been an error",
+        subtitle: l.message
+      }
+    ) }) : null,
+    !t && !l ? /* @__PURE__ */ e(c, { ...a?.content, children: o }) : null
+  ] }) });
+}
+export {
+  L as HeaderLayout,
+  L as default
+};
+//# sourceMappingURL=header-layout.mjs.map

package/dist/components/header-layout/header-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-layout.mjs","sources":["../../../src/components/header-layout/header-layout.tsx"],"sourcesContent":["import { AlertTriangle, Loader2 } from \"lucide-react\";\nimport type { JSXElementConstructor, ReactElement } from \"react\";\nimport Content, { type ContentProps } from \"@/components/content\";\nimport Header, { type HeaderProps } from \"@/components/header\";\nimport Placeholder, { type PlaceholderIcon } from \"@/components/placeholder\";\nimport { TabProvider } from \"../tab-provider\";\n\n/**\n * Slots for HeaderLayout.\n */\nexport interface HeaderLayoutSlots {\n  /**\n   * Slot for header component.\n   */\n  header?: JSXElementConstructor<HeaderProps>;\n  /**\n   * Slot for content component.\n   */\n  content?: JSXElementConstructor<ContentProps>;\n}\n\n/**\n * Slot props for HeaderLayout.\n */\nexport interface HeaderLayoutSlotProps {\n  /**\n   * Props for header slot.\n   */\n  header?: HeaderProps;\n  /**\n   * Props for content slot.\n   */\n  content?: ContentProps;\n}\n\n/**\n * Error payload for HeaderLayout.\n */\nexport interface HeaderLayoutError {\n  /**\n   * Optional icon to display with the error.\n   */\n  icon?: PlaceholderIcon;\n  /**\n   * Optional title for the error.\n   */\n  title?: string;\n  /**\n   * The error message to display.\n   */\n  message: string;\n}\n\n/**\n * Props for HeaderLayout.\n */\nexport interface HeaderLayoutProps {\n  /**\n   * Header title.\n   */\n  title: string | ReactElement;\n  /**\n   * Optional subtitle.\n   */\n  subtitle?: string | ReactElement;\n  /**\n   * Optional slots.\n   */\n  slots?: HeaderLayoutSlots;\n  /**\n   * Optional slot props.\n   */\n  slotProps?: HeaderLayoutSlotProps;\n  /**\n   * Optional loading flag.\n   */\n  loading?: boolean;\n  /**\n   * Optional fetching flag.\n   */\n  fetching?: boolean;\n  /**\n   * Optional error state.\n   */\n  error?: HeaderLayoutError;\n  /**\n   * Content rendered in layout.\n   */\n  children?: React.ReactNode;\n}\n\nconst DefaultErrorIcon: PlaceholderIcon = ({ size }) => (\n  <AlertTriangle className=\"text-destructive\" size={size} />\n);\n\n/**\n * Layout component with header and content area plus loading/fetching/error states.\n */\nexport function HeaderLayout({\n  loading,\n  title,\n  subtitle,\n  slots,\n  slotProps,\n  children,\n  fetching,\n  error,\n}: HeaderLayoutProps) {\n  const HeaderSlot = slots?.header || Header;\n  const ContentSlot = slots?.content || Content;\n\n  return (\n    <TabProvider>\n      <div className=\"flex h-full min-h-full flex-col\">\n        <HeaderSlot title={title} subtitle={subtitle} {...slotProps?.header} />\n\n        {fetching ? (\n          <div\n            className=\"h-1 w-full bg-muted\"\n            role=\"progressbar\"\n            aria-label=\"fetching\"\n          />\n        ) : null}\n\n        {loading ? (\n          <div className=\"flex h-full w-full items-center justify-center\">\n            <Loader2 role=\"progressbar\" className=\"h-8 w-8 animate-spin\" />\n          </div>\n        ) : null}\n\n        {error ? (\n          <div className=\"mt-4\">\n            <Placeholder\n              icon={error.icon || DefaultErrorIcon}\n              title={error.title || \"There has been an error\"}\n              subtitle={error.message}\n            />\n          </div>\n        ) : null}\n\n        {!loading && !error ? (\n          <ContentSlot {...slotProps?.content}>{children}</ContentSlot>\n        ) : null}\n      </div>\n    </TabProvider>\n  );\n}\n\nexport default HeaderLayout;\n"],"names":["DefaultErrorIcon","size","jsx","AlertTriangle","HeaderLayout","loading","title","subtitle","slots","slotProps","children","fetching","error","HeaderSlot","Header","ContentSlot","Content","TabProvider","jsxs","Loader2","Placeholder"],"mappings":";;;;;;;;AA2FA,MAAMA,IAAoC,CAAC,EAAE,MAAAC,EAAA,MAC3C,gBAAAC,EAACC,GAAA,EAAc,WAAU,oBAAmB,MAAAF,GAAY;AAMnD,SAASG,EAAa;AAAA,EAC3B,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACF,GAAsB;AACpB,QAAMC,IAAaL,GAAO,UAAUM,GAC9BC,IAAcP,GAAO,WAAWQ;AAEtC,SACE,gBAAAd,EAACe,GAAA,EACC,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,IAAA,gBAAAhB,EAACW,GAAA,EAAW,OAAAP,GAAc,UAAAC,GAAqB,GAAGE,GAAW,QAAQ;AAAA,IAEpEE,IACC,gBAAAT;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,MAAA;AAAA,IAAA,IAEX;AAAA,IAEHG,IACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,kDACb,UAAA,gBAAAA,EAACiB,GAAA,EAAQ,MAAK,eAAc,WAAU,uBAAA,CAAuB,EAAA,CAC/D,IACE;AAAA,IAEHP,IACC,gBAAAV,EAAC,OAAA,EAAI,WAAU,QACb,UAAA,gBAAAA;AAAA,MAACkB;AAAA,MAAA;AAAA,QACC,MAAMR,EAAM,QAAQZ;AAAA,QACpB,OAAOY,EAAM,SAAS;AAAA,QACtB,UAAUA,EAAM;AAAA,MAAA;AAAA,IAAA,GAEpB,IACE;AAAA,IAEH,CAACP,KAAW,CAACO,IACZ,gBAAAV,EAACa,KAAa,GAAGN,GAAW,SAAU,UAAAC,EAAA,CAAS,IAC7C;AAAA,EAAA,EAAA,CACN,EAAA,CACF;AAEJ;"}

package/dist/components/header-layout/index.d.ts

@@ -0,0 +1,2 @@
+export type { HeaderLayoutError, HeaderLayoutProps, HeaderLayoutSlotProps, HeaderLayoutSlots, } from './header-layout';
+export { default, default as HeaderLayout } from './header-layout';

package/dist/components/list-panel/index.d.ts

@@ -0,0 +1,4 @@
+export type { ListPanelItem, ListPanelProps } from './list-panel';
+export { default, default as ListPanel } from './list-panel';
+export * from './list-panel.context';
+export { default as ListPanelPanel } from './list-panel-panel';

package/dist/components/list-panel/list-panel-panel.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the ListPanelPanel component
+ */
+export interface ListPanelPanelProps {
+    /**
+     * List of item IDs that should display this panel
+     */
+    ids: string[];
+    /**
+     * Content to display when a matching item is selected
+     */
+    children?: ReactNode;
+}
+/**
+ * Content panel for ListPanel that displays when a matching item is selected
+ */
+export default function ListPanelPanel({ ids, children }: ListPanelPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/list-panel/list-panel-panel.mjs

@@ -0,0 +1,10 @@
+import { jsx as r, Fragment as l } from "react/jsx-runtime";
+import { useListPanel as s } from "./list-panel.context.mjs";
+function u({ ids: t, children: n }) {
+  const e = s();
+  return e && !t.includes(e) ? null : /* @__PURE__ */ r(l, { children: n });
+}
+export {
+  u as default
+};
+//# sourceMappingURL=list-panel-panel.mjs.map

package/dist/components/list-panel/list-panel-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-panel-panel.mjs","sources":["../../../src/components/list-panel/list-panel-panel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useListPanel } from \"./list-panel.context\";\n\n/**\n * Props for the ListPanelPanel component\n */\nexport interface ListPanelPanelProps {\n  /**\n   * List of item IDs that should display this panel\n   */\n  ids: string[];\n  /**\n   * Content to display when a matching item is selected\n   */\n  children?: ReactNode;\n}\n\n/**\n * Content panel for ListPanel that displays when a matching item is selected\n */\nexport default function ListPanelPanel({ ids, children }: ListPanelPanelProps) {\n  const selectedId = useListPanel();\n\n  if (selectedId && !ids.includes(selectedId)) {\n    return null;\n  }\n\n  return <>{children}</>;\n}\n"],"names":["ListPanelPanel","ids","children","selectedId","useListPanel"],"mappings":";;AAoBA,SAAwBA,EAAe,EAAE,KAAAC,GAAK,UAAAC,KAAiC;AAC7E,QAAMC,IAAaC,EAAA;AAEnB,SAAID,KAAc,CAACF,EAAI,SAASE,CAAU,IACjC,8BAGC,UAAAD,GAAS;AACrB;"}

package/dist/components/list-panel/list-panel.context.mjs

@@ -0,0 +1,8 @@
+import { createContext as e, useContext as o } from "react";
+const t = e(void 0), r = t.Provider, s = () => o(t);
+export {
+  t as ListPanelContext,
+  r as ListPanelContextProvider,
+  s as useListPanel
+};
+//# sourceMappingURL=list-panel.context.mjs.map

package/dist/components/list-panel/list-panel.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-panel.context.mjs","sources":["../../../src/components/list-panel/list-panel.context.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const ListPanelContext = createContext<string | undefined>(undefined);\nexport const ListPanelContextProvider = ListPanelContext.Provider;\nexport const useListPanel = () => useContext(ListPanelContext);\n"],"names":["ListPanelContext","createContext","ListPanelContextProvider","useListPanel","useContext"],"mappings":";AAEO,MAAMA,IAAmBC,EAAkC,MAAS,GAC9DC,IAA2BF,EAAiB,UAC5CG,IAAe,MAAMC,EAAWJ,CAAgB;"}

package/dist/components/list-panel/list-panel.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+export interface ListPanelItem {
+    id: string;
+    text: string;
+    tooltip?: string;
+    href?: string;
+    path?: string;
+}
+export interface ListPanelProps {
+    /**
+     * The ID of the item that should be selected by default.
+     */
+    defaultSelectedItem?: string;
+    /**
+     * The list of items to be displayed in the panel.
+     */
+    items: ListPanelItem[];
+    /**
+     * The mode of the list, either "panel" or "navigation".
+     */
+    listMode?: "panel" | "navigation";
+    /**
+     * The breakpoint for column layout.
+     */
+    colBreakpoint?: number;
+    /**
+     * Callback function that is called when the selected item changes.
+     */
+    onSelectedItemChange?: (id: string) => void;
+    /**
+     * Content to display in the panel area
+     */
+    children?: ReactNode;
+    /**
+     * Optional wrapper classes
+     */
+    className?: string;
+}
+/**
+ * ListPanel component renders a panel with a list of items and a content area.
+ */
+export declare function ListPanel({ items, defaultSelectedItem, colBreakpoint, listMode, children, onSelectedItemChange, className, }: ListPanelProps): import("react/jsx-runtime").JSX.Element;
+export default ListPanel;