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

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;

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

@@ -0,0 +1,77 @@
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import { useState as v } from "react";
+import { cn as c } from "../../lib/utils.mjs";
+import { ListPanelContextProvider as y } from "./list-panel.context.mjs";
+function I({
+  items: i,
+  defaultSelectedItem: m,
+  colBreakpoint: t = 3,
+  listMode: u = "panel",
+  children: f,
+  onSelectedItemChange: p = () => null,
+  className: h
+}) {
+  const [s, b] = v(m), n = Math.max(1, 12 - t), a = (l) => {
+    b(l), p(l);
+  };
+  return /* @__PURE__ */ e(y, { value: s, children: /* @__PURE__ */ x(
+    "div",
+    {
+      className: c(
+        "grid h-full w-full grid-cols-12 rounded-lg border border-border bg-muted/40",
+        h
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "h-full border-r border-border px-2 py-2",
+            style: {
+              gridColumn: `span ${t} / span ${t}`
+            },
+            children: /* @__PURE__ */ e("ul", { className: "flex h-full flex-col gap-1 overflow-y-auto", children: i.map(({ id: l, text: r, tooltip: o, href: g }) => {
+              const d = c(
+                "flex w-full items-center rounded-md px-3 py-2 text-sm transition-colors",
+                s === l ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:bg-muted"
+              );
+              return /* @__PURE__ */ e("li", { children: u === "navigation" ? /* @__PURE__ */ e(
+                "a",
+                {
+                  href: g,
+                  className: d,
+                  "aria-label": r,
+                  onClick: () => a(l),
+                  title: o,
+                  children: r
+                }
+              ) : /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: d,
+                  "aria-label": r,
+                  onClick: () => a(l),
+                  title: o,
+                  children: r
+                }
+              ) }, l);
+            }) })
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "h-full px-3 py-3",
+            style: { gridColumn: `span ${n} / span ${n}` },
+            children: /* @__PURE__ */ e("div", { className: "h-full w-full rounded-md bg-card p-3", children: f })
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  I as ListPanel,
+  I as default
+};
+//# sourceMappingURL=list-panel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-panel.mjs","sources":["../../../src/components/list-panel/list-panel.tsx"],"sourcesContent":["import { type ReactNode, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { ListPanelContextProvider } from \"./list-panel.context\";\n\nexport interface ListPanelItem {\n  id: string;\n  text: string;\n  tooltip?: string;\n  href?: string;\n  path?: string;\n}\n\nexport interface ListPanelProps {\n  /**\n   * The ID of the item that should be selected by default.\n   */\n  defaultSelectedItem?: string;\n  /**\n   * The list of items to be displayed in the panel.\n   */\n  items: ListPanelItem[];\n  /**\n   * The mode of the list, either \"panel\" or \"navigation\".\n   */\n  listMode?: \"panel\" | \"navigation\";\n  /**\n   * The breakpoint for column layout.\n   */\n  colBreakpoint?: number;\n  /**\n   * Callback function that is called when the selected item changes.\n   */\n  onSelectedItemChange?: (id: string) => void;\n  /**\n   * Content to display in the panel area\n   */\n  children?: ReactNode;\n  /**\n   * Optional wrapper classes\n   */\n  className?: string;\n}\n\n/**\n * ListPanel component renders a panel with a list of items and a content area.\n */\nexport function ListPanel({\n  items,\n  defaultSelectedItem,\n  colBreakpoint = 3,\n  listMode = \"panel\",\n  children,\n  onSelectedItemChange = () => null,\n  className,\n}: ListPanelProps) {\n  const [selectedItem, setSelectedItem] = useState(defaultSelectedItem);\n  const contentSpan = Math.max(1, 12 - colBreakpoint);\n\n  const handleSelectItem = (id: string) => {\n    setSelectedItem(id);\n    onSelectedItemChange(id);\n  };\n\n  return (\n    <ListPanelContextProvider value={selectedItem}>\n      <div\n        className={cn(\n          \"grid h-full w-full grid-cols-12 rounded-lg border border-border bg-muted/40\",\n          className,\n        )}\n      >\n        <div\n          className=\"h-full border-r border-border px-2 py-2\"\n          style={{\n            gridColumn: `span ${colBreakpoint} / span ${colBreakpoint}`,\n          }}\n        >\n          <ul className=\"flex h-full flex-col gap-1 overflow-y-auto\">\n            {items.map(({ id, text, tooltip, href }) => {\n              const isSelected = selectedItem === id;\n              const itemClasses = cn(\n                \"flex w-full items-center rounded-md px-3 py-2 text-sm transition-colors\",\n                isSelected\n                  ? \"bg-card text-foreground shadow-sm\"\n                  : \"text-muted-foreground hover:bg-muted\",\n              );\n\n              return (\n                <li key={id}>\n                  {listMode === \"navigation\" ? (\n                    <a\n                      href={href}\n                      className={itemClasses}\n                      aria-label={text}\n                      onClick={() => handleSelectItem(id)}\n                      title={tooltip}\n                    >\n                      {text}\n                    </a>\n                  ) : (\n                    <button\n                      type=\"button\"\n                      className={itemClasses}\n                      aria-label={text}\n                      onClick={() => handleSelectItem(id)}\n                      title={tooltip}\n                    >\n                      {text}\n                    </button>\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n        <div\n          className=\"h-full px-3 py-3\"\n          style={{ gridColumn: `span ${contentSpan} / span ${contentSpan}` }}\n        >\n          <div className=\"h-full w-full rounded-md bg-card p-3\">{children}</div>\n        </div>\n      </div>\n    </ListPanelContextProvider>\n  );\n}\n\nexport default ListPanel;\n"],"names":["ListPanel","items","defaultSelectedItem","colBreakpoint","listMode","children","onSelectedItemChange","className","selectedItem","setSelectedItem","useState","contentSpan","handleSelectItem","id","jsx","ListPanelContextProvider","jsxs","cn","text","tooltip","href","itemClasses"],"mappings":";;;;AA8CO,SAASA,EAAU;AAAA,EACxB,OAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,sBAAAC,IAAuB,MAAM;AAAA,EAC7B,WAAAC;AACF,GAAmB;AACjB,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASR,CAAmB,GAC9DS,IAAc,KAAK,IAAI,GAAG,KAAKR,CAAa,GAE5CS,IAAmB,CAACC,MAAe;AACvC,IAAAJ,EAAgBI,CAAE,GAClBP,EAAqBO,CAAE;AAAA,EACzB;AAEA,SACE,gBAAAC,EAACC,GAAA,EAAyB,OAAOP,GAC/B,UAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAV;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,YAAY,QAAQX,CAAa,WAAWA,CAAa;AAAA,YAAA;AAAA,YAG3D,UAAA,gBAAAW,EAAC,MAAA,EAAG,WAAU,8CACX,UAAAb,EAAM,IAAI,CAAC,EAAE,IAAAY,GAAI,MAAAK,GAAM,SAAAC,GAAS,MAAAC,EAAA,MAAW;AAE1C,oBAAMC,IAAcJ;AAAA,gBAClB;AAAA,gBAFiBT,MAAiBK,IAI9B,sCACA;AAAA,cAAA;AAGN,qBACE,gBAAAC,EAAC,MAAA,EACE,UAAAV,MAAa,eACZ,gBAAAU;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAAM;AAAA,kBACA,WAAWC;AAAA,kBACX,cAAYH;AAAA,kBACZ,SAAS,MAAMN,EAAiBC,CAAE;AAAA,kBAClC,OAAOM;AAAA,kBAEN,UAAAD;AAAA,gBAAA;AAAA,cAAA,IAGH,gBAAAJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAWO;AAAA,kBACX,cAAYH;AAAA,kBACZ,SAAS,MAAMN,EAAiBC,CAAE;AAAA,kBAClC,OAAOM;AAAA,kBAEN,UAAAD;AAAA,gBAAA;AAAA,cAAA,KAnBEL,CAsBT;AAAA,YAEJ,CAAC,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,QAAQH,CAAW,WAAWA,CAAW,GAAA;AAAA,YAE9D,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,wCAAwC,UAAAT,EAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAClE;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -0,0 +1,5 @@
+import { ListPanelItem } from './list-panel';
+export declare const ListPanelDemoContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const mockItemsShort: ListPanelItem[];
+export declare const mockItemsLong: ListPanelItem[];
+export declare const mockItemsRouterNavigation: ListPanelItem[];

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

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

package/dist/components/markdown/markdown.d.ts

@@ -0,0 +1,43 @@
+export declare const markdownMuiOptions: {
+    overrides: {
+        h1: {
+            component: string;
+            props: {
+                className: string;
+            };
+        };
+        h2: {
+            component: string;
+            props: {
+                className: string;
+            };
+        };
+        h3: {
+            component: string;
+            props: {
+                className: string;
+            };
+        };
+        h4: {
+            component: string;
+            props: {
+                className: string;
+            };
+        };
+        p: {
+            component: string;
+            props: {
+                className: string;
+            };
+        };
+        a: {
+            component: string;
+            props: {
+                className: string;
+            };
+        };
+        li: {
+            component: string;
+        };
+    };
+};

package/dist/components/markdown/markdown.mjs

@@ -0,0 +1,47 @@
+const o = {
+  overrides: {
+    h1: {
+      component: "h1",
+      props: {
+        className: "mb-3 text-xl font-semibold"
+      }
+    },
+    h2: {
+      component: "h2",
+      props: {
+        className: "mb-3 text-lg font-semibold"
+      }
+    },
+    h3: {
+      component: "h3",
+      props: {
+        className: "mb-2 text-base font-medium"
+      }
+    },
+    h4: {
+      component: "h4",
+      props: {
+        className: "mb-2 text-sm font-medium"
+      }
+    },
+    p: {
+      component: "p",
+      props: {
+        className: "mb-3"
+      }
+    },
+    a: {
+      component: "a",
+      props: {
+        className: "text-primary underline underline-offset-2"
+      }
+    },
+    li: {
+      component: "li"
+    }
+  }
+};
+export {
+  o as markdownMuiOptions
+};
+//# sourceMappingURL=markdown.mjs.map

package/dist/components/markdown/markdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.mjs","sources":["../../../src/components/markdown/markdown.tsx"],"sourcesContent":["export const markdownMuiOptions = {\n  overrides: {\n    h1: {\n      component: \"h1\",\n      props: {\n        className: \"mb-3 text-xl font-semibold\",\n      },\n    },\n    h2: {\n      component: \"h2\",\n      props: {\n        className: \"mb-3 text-lg font-semibold\",\n      },\n    },\n    h3: {\n      component: \"h3\",\n      props: {\n        className: \"mb-2 text-base font-medium\",\n      },\n    },\n    h4: {\n      component: \"h4\",\n      props: {\n        className: \"mb-2 text-sm font-medium\",\n      },\n    },\n    p: {\n      component: \"p\",\n      props: {\n        className: \"mb-3\",\n      },\n    },\n    a: {\n      component: \"a\",\n      props: {\n        className: \"text-primary underline underline-offset-2\",\n      },\n    },\n    li: {\n      component: \"li\",\n    },\n  },\n};\n"],"names":["markdownMuiOptions"],"mappings":"AAAO,MAAMA,IAAqB;AAAA,EAChC,WAAW;AAAA,IACT,IAAI;AAAA,MACF,WAAW;AAAA,MACX,OAAO;AAAA,QACL,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,IAAI;AAAA,MACF,WAAW;AAAA,MACX,OAAO;AAAA,QACL,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,IAAI;AAAA,MACF,WAAW;AAAA,MACX,OAAO;AAAA,QACL,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,IAAI;AAAA,MACF,WAAW;AAAA,MACX,OAAO;AAAA,QACL,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,GAAG;AAAA,MACD,WAAW;AAAA,MACX,OAAO;AAAA,QACL,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,GAAG;AAAA,MACD,WAAW;AAAA,MACX,OAAO;AAAA,QACL,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,IAAI;AAAA,MACF,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;"}

package/dist/components/notification-center/index.d.ts

@@ -0,0 +1,2 @@
+export * from './notification-center-context';
+export * from './notification-center-provider';

package/dist/components/notification-center/notification-center-context.d.ts

@@ -0,0 +1,10 @@
+import { toast } from 'sonner';
+export declare const NotificationCenterProviderUndefinedError: Error;
+export interface NotificationCenterProps {
+    /**
+     * Sonner toast API.
+     */
+    toast: typeof toast;
+}
+export declare const NotificationCenterContext: import('react').Context<NotificationCenterProps | undefined>;
+export declare const useNotificationCenter: () => NotificationCenterProps;

package/dist/components/notification-center/notification-center-context.mjs

@@ -0,0 +1,15 @@
+import { createContext as e, useContext as o } from "react";
+const n = new Error(
+  "NotificationCenterContext.Provider is required and was undefined"
+), r = e(void 0), c = () => {
+  const t = o(r);
+  if (t === void 0)
+    throw n;
+  return t;
+};
+export {
+  r as NotificationCenterContext,
+  n as NotificationCenterProviderUndefinedError,
+  c as useNotificationCenter
+};
+//# sourceMappingURL=notification-center-context.mjs.map

package/dist/components/notification-center/notification-center-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-center-context.mjs","sources":["../../../src/components/notification-center/notification-center-context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { toast } from \"sonner\";\n\nexport const NotificationCenterProviderUndefinedError = new Error(\n  \"NotificationCenterContext.Provider is required and was undefined\",\n);\n\nexport interface NotificationCenterProps {\n  /**\n   * Sonner toast API.\n   */\n  toast: typeof toast;\n}\n\nexport const NotificationCenterContext = createContext<\n  NotificationCenterProps | undefined\n>(undefined);\n\nexport const useNotificationCenter = () => {\n  const context = useContext(NotificationCenterContext);\n\n  if (context === undefined) {\n    throw NotificationCenterProviderUndefinedError;\n  }\n\n  return context;\n};\n"],"names":["NotificationCenterProviderUndefinedError","NotificationCenterContext","createContext","useNotificationCenter","context","useContext"],"mappings":";AAGO,MAAMA,IAA2C,IAAI;AAAA,EAC1D;AACF,GASaC,IAA4BC,EAEvC,MAAS,GAEEC,IAAwB,MAAM;AACzC,QAAMC,IAAUC,EAAWJ,CAAyB;AAEpD,MAAIG,MAAY;AACd,UAAMJ;AAGR,SAAOI;AACT;"}

package/dist/components/notification-center/notification-center-provider.d.ts

@@ -0,0 +1,11 @@
+import { ToasterProps } from 'sonner';
+/**
+ * Props for the NotificationCenterProvider component.
+ */
+export interface NotificationCenterProviderProps extends ToasterProps {
+    /**
+     * Content to wrap with notification context.
+     */
+    children?: React.ReactNode;
+}
+export declare const NotificationCenterProvider: ({ children, ...toasterProps }: NotificationCenterProviderProps) => import("react/jsx-runtime").JSX.Element;