@pautena/react-design-system 0.20.2 → 1.0.0

package/dist/Header/Header.types.d.ts

@@ -0,0 +1,274 @@
+import { BoxProps, BreadcrumbsProps, ButtonProps, ContainerProps, LinkProps, PropTypes, TabProps, TabsProps } from '@mui/material';
+import { JSXElementConstructor, ReactElement } from 'react';
+import { HeaderSubtitleProps, HeaderTitleProps } from './header-title';
+export type HeaderPreset = PropTypes.Color | "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
+     * @default "contained"
+     */
+    variant?: HeaderActionVariant;
+    /**
+     * Button color theme
+     * @default "primary"
+     */
+    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;
+}
+export interface HeaderNavigationButton {
+    /**
+     * Button text
+     */
+    text: string;
+    /**
+     * Url where the user has to be redirected
+     */
+    href: string;
+    /**
+     * Icon to be shown before the button
+     */
+    icon?: ReactElement;
+}
+/**
+ * Interface representing the slots for the Header component.
+ */
+export interface HeaderSlots {
+    /**
+     * Root container element
+     */
+    root?: JSXElementConstructor<BoxProps>;
+    /**
+     * Container element wrapping the header content
+     */
+    container?: JSXElementConstructor<ContainerProps>;
+    /**
+     * Container for header content (title/subtitle/breadcrumbs area)
+     */
+    contentContainer?: JSXElementConstructor<BoxProps>;
+    /**
+     * Container for title and subtitle area
+     */
+    titleContainer?: JSXElementConstructor<BoxProps>;
+    /**
+     * Navigation button component
+     */
+    navigationButton?: JSXElementConstructor<ButtonProps>;
+    /**
+     * Breadcrumbs container component
+     */
+    breadcrumbs?: JSXElementConstructor<BreadcrumbsProps>;
+    /**
+     * Individual breadcrumb link component
+     */
+    breadcrumbLink?: JSXElementConstructor<LinkProps>;
+    /**
+     * Title component
+     */
+    title?: JSXElementConstructor<HeaderTitleProps>;
+    /**
+     * Subtitle component
+     */
+    subtitle?: JSXElementConstructor<HeaderSubtitleProps>;
+    /**
+     * Container for action buttons
+     */
+    actionsContainer?: JSXElementConstructor<BoxProps>;
+    /**
+     * Individual action button component
+     */
+    actionButton?: JSXElementConstructor<ButtonProps>;
+    /**
+     * Tabs container component
+     */
+    tabs?: JSXElementConstructor<TabsProps>;
+    /**
+     * Individual tab component
+     */
+    tab?: JSXElementConstructor<TabProps>;
+}
+/**
+ * Interface representing the slot properties for the Header component.
+ */
+export interface HeaderSlotProps {
+    /**
+     * Props for the root container
+     */
+    root?: Partial<BoxProps>;
+    /**
+     * Props for the container element
+     */
+    container?: Partial<ContainerProps>;
+    /**
+     * Props for the content container
+     */
+    contentContainer?: Partial<BoxProps>;
+    /**
+     * Props for the title container
+     */
+    titleContainer?: Partial<BoxProps>;
+    /**
+     * Props for the navigation button
+     */
+    navigationButton?: Partial<ButtonProps>;
+    /**
+     * Props for the breadcrumbs
+     */
+    breadcrumbs?: Partial<BreadcrumbsProps>;
+    /**
+     * Props for individual breadcrumb links
+     */
+    breadcrumbLink?: Partial<LinkProps>;
+    /**
+     * Props for the title component
+     */
+    title?: Partial<HeaderTitleProps>;
+    /**
+     * Props for the subtitle component
+     */
+    subtitle?: Partial<HeaderSubtitleProps>;
+    /**
+     * Props for the actions container
+     */
+    actionsContainer?: Partial<BoxProps>;
+    /**
+     * Props for individual action buttons
+     */
+    actionButton?: Partial<ButtonProps>;
+    /**
+     * Props for the tabs container
+     */
+    tabs?: Partial<TabsProps>;
+    /**
+     * Props for individual tabs
+     */
+    tab?: Partial<TabProps>;
+}
+export type HeaderProps = {
+    /**
+     * Title of the header
+     */
+    title?: string | ReactElement;
+    /**
+     * Show a loading indicator in the title position
+     */
+    loadingTitle?: boolean;
+    /**
+     * Subtitle of the header
+     */
+    subtitle?: string | ReactElement;
+    /**
+     * Show a loading indicator in the subtitle position
+     */
+    loadingSubtitle?: boolean;
+    /**
+     * Color palete used to render the component
+     */
+    preset?: HeaderPreset;
+    /**
+     * List of breadcumbs to represent the path to reach
+     * the page that we are
+     */
+    breadcrumbs?: HeaderBreadcrumb[];
+    /**
+     * List of actions that can be performed by the user.
+     * Each action will be a button in the header.
+     */
+    actions?: HeaderAction[];
+    /**
+     * Variant used to render the actions
+     */
+    actionsVariant?: HeaderActionVariant;
+    /**
+     * If is set, a list of tabs is dispayed at the bottom
+     */
+    tabs?: HeaderTab[];
+    /**
+     * The tabs will work using
+     * - a panel container (panel)
+     * - using a the navigation system (navigation).
+     */
+    tabsMode?: "panel" | "navigation";
+    /**
+     * A single button that helps the user to navigate to
+     * a screen related to the current screen
+     */
+    navigationButton?: HeaderNavigationButton;
+    /**
+     * Whether to display a border at the bottom of the header
+     */
+    border?: boolean;
+    /**
+     * Optional slots for custom rendering within the header
+     */
+    slots?: HeaderSlots;
+    /**
+     * Optional props for the slots
+     */
+    slotProps?: HeaderSlotProps;
+};

package/dist/Header/header-title.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Props for the HeaderTitle component
+ */
+export interface HeaderTitleProps {
+    /**
+     * Whether to show a loading indicator
+     */
+    loading?: boolean;
+    /**
+     * The title content to display
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Header title component with optional loading state
+ */
+export default function HeaderTitle({ loading, children }: HeaderTitleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the HeaderSubtitle component
+ */
+export interface HeaderSubtitleProps {
+    /**
+     * Whether to show a loading indicator
+     */
+    loading?: boolean;
+    /**
+     * The subtitle content to display
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Header subtitle component with optional loading state
+ */
+export declare function HeaderSubtitle({ loading, children }: HeaderSubtitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/Header/header-title.mjs

@@ -0,0 +1,31 @@
+import { j as r } from "../_virtual/jsx-runtime.mjs";
+import o from "../node_modules/@mui/material/esm/styles/useTheme.mjs";
+import a from "../node_modules/@mui/material/esm/CircularProgress/CircularProgress.mjs";
+import n from "../node_modules/@mui/material/esm/Typography/Typography.mjs";
+function u({ loading: e, children: t }) {
+  const { typography: i } = o();
+  return e ? /* @__PURE__ */ r.jsx(
+    a,
+    {
+      color: "inherit",
+      size: i.h4.fontSize,
+      "aria-label": "title loading"
+    }
+  ) : typeof t == "string" ? /* @__PURE__ */ r.jsx(n, { variant: "h4", role: "heading", "aria-level": 1, children: t }) : /* @__PURE__ */ r.jsx(r.Fragment, { children: t });
+}
+function g({ loading: e, children: t }) {
+  const { typography: i } = o();
+  return e ? /* @__PURE__ */ r.jsx(
+    a,
+    {
+      color: "inherit",
+      size: i.body1.fontSize,
+      "aria-label": "subtitle loading"
+    }
+  ) : typeof t == "string" ? /* @__PURE__ */ r.jsx(n, { variant: "body1", role: "heading", "aria-level": 2, children: t }) : /* @__PURE__ */ r.jsx(r.Fragment, { children: t });
+}
+export {
+  g as HeaderSubtitle,
+  u as default
+};
+//# sourceMappingURL=header-title.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-title.mjs","sources":["../../src/Header/header-title.tsx"],"sourcesContent":["import CircularProgress from \"@mui/material/CircularProgress\";\nimport { useTheme } from \"@mui/material/styles\";\nimport Typography from \"@mui/material/Typography\";\n\n/**\n * Props for the HeaderTitle component\n */\nexport interface HeaderTitleProps {\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({ loading, children }: HeaderTitleProps) {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress\n        color=\"inherit\"\n        size={typography.h4.fontSize}\n        aria-label=\"title loading\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n}\n\n/**\n * Props for the HeaderSubtitle component\n */\nexport interface HeaderSubtitleProps {\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({ loading, children }: HeaderSubtitleProps) {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress\n        color=\"inherit\"\n        size={typography.body1.fontSize}\n        aria-label=\"subtitle loading\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"body1\" role=\"heading\" aria-level={2}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n}\n"],"names":["HeaderTitle","loading","children","typography","useTheme","jsx","CircularProgress","Typography","HeaderSubtitle"],"mappings":";;;;AAqBA,SAAwBA,EAAY,EAAE,SAAAC,GAAS,UAAAC,KAA8B;AAC3E,QAAM,EAAE,YAAAC,EAAA,IAAeC,EAAA;AAEvB,SAAIH,IAEAI,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAMH,EAAW,GAAG;AAAA,MACpB,cAAW;AAAA,IAAA;AAAA,EAAA,IAKb,OAAOD,KAAa,WAEpBG,gBAAAA,MAACE,KAAW,SAAQ,MAAK,MAAK,WAAU,cAAY,GACjD,UAAAL,GACH,wCAIM,UAAAA,GAAS;AACrB;AAmBO,SAASM,EAAe,EAAE,SAAAP,GAAS,UAAAC,KAAiC;AACzE,QAAM,EAAE,YAAAC,EAAA,IAAeC,EAAA;AAEvB,SAAIH,IAEAI,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAMH,EAAW,MAAM;AAAA,MACvB,cAAW;AAAA,IAAA;AAAA,EAAA,IAKb,OAAOD,KAAa,WAEpBG,gBAAAA,MAACE,KAAW,SAAQ,SAAQ,MAAK,WAAU,cAAY,GACpD,UAAAL,GACH,wCAIM,UAAAA,GAAS;AACrB;"}

package/dist/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/HeaderLayout/HeaderLayout.d.ts

@@ -0,0 +1,88 @@
+import { JSXElementConstructor, ReactElement } from 'react';
+import { ContentProps } from '../Content';
+import { HeaderProps } from '../Header';
+import { PlaceholderIcon } from '../Placeholder';
+/**
+ * Interface representing the slots for the HeaderLayout component.
+ */
+export interface HeaderLayoutSlots {
+    /**
+     * Optional slot for the header component.
+     * Should be a JSX element constructor that takes HeaderProps as props.
+     */
+    header?: JSXElementConstructor<HeaderProps>;
+    /**
+     * Optional slot for the content component.
+     * Should be a JSX element constructor that takes ContentProps as props.
+     */
+    content?: JSXElementConstructor<ContentProps>;
+}
+/**
+ * Props for the HeaderLayout component slots.
+ */
+export interface HeaderLayoutSlotProps {
+    /**
+     * Props for the header slot.
+     */
+    header?: HeaderProps;
+    /**
+     * Props for the content slot.
+     */
+    content?: ContentProps;
+}
+/**
+ * Represents an error that can occur in the HeaderLayout component.
+ */
+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;
+}
+export interface HeaderLayoutProps {
+    /**
+     * The title to be displayed in the header.
+     */
+    title: string | ReactElement;
+    /**
+     * An optional subtitle to be displayed in the header.
+     */
+    subtitle?: string | ReactElement;
+    /**
+     * Optional slots for custom components within the header layout.
+     */
+    slots?: HeaderLayoutSlots;
+    /**
+     * Optional props for the custom slots.
+     */
+    slotProps?: HeaderLayoutSlotProps;
+    /**
+     * Optional flag to indicate if the header layout is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Optional flag to indicate if the header layout is in a fetching state.
+     */
+    fetching?: boolean;
+    /**
+     * Optional error object to be displayed in the header layout.
+     */
+    error?: HeaderLayoutError;
+    /**
+     * Content to display in the layout area
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A layout component that provides a header and content area with optional loading, fetching, and 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/HeaderLayout/HeaderLayout.mjs

@@ -0,0 +1,52 @@
+import { j as e } from "../_virtual/jsx-runtime.mjs";
+import x from "../node_modules/@mui/icons-material/esm/ReportProblem.mjs";
+import { Content as d } from "../Content/Content.mjs";
+import { Header as f } from "../Header/Header.mjs";
+import { Placeholder as j } from "../Placeholder/Placeholder.mjs";
+import "../TabProvider/TabProvider.context.mjs";
+import { TabProvider as p } from "../TabProvider/TabProvider.provider.mjs";
+import r from "../node_modules/@mui/material/esm/Box/Box.mjs";
+import u from "../node_modules/@mui/material/esm/LinearProgress/LinearProgress.mjs";
+import g from "../node_modules/@mui/material/esm/CircularProgress/CircularProgress.mjs";
+const b = () => /* @__PURE__ */ e.jsx(x, { color: "error", sx: { width: 200, height: 200 } });
+function S({
+  loading: o,
+  title: s,
+  subtitle: m,
+  slots: i,
+  slotProps: n,
+  children: c,
+  fetching: l,
+  error: t
+}) {
+  const a = i?.header || f, h = i?.content || d;
+  return /* @__PURE__ */ e.jsx(p, { children: /* @__PURE__ */ e.jsxs(r, { display: "flex", flexDirection: "column", height: 1, children: [
+    /* @__PURE__ */ e.jsx(a, { title: s, subtitle: m, ...n?.header }),
+    l && /* @__PURE__ */ e.jsx(r, { width: 1, children: /* @__PURE__ */ e.jsx(u, {}) }),
+    o && /* @__PURE__ */ e.jsx(
+      r,
+      {
+        width: 1,
+        height: 1,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        children: /* @__PURE__ */ e.jsx(g, {})
+      }
+    ),
+    t && /* @__PURE__ */ e.jsx(r, { mt: 4, children: /* @__PURE__ */ e.jsx(
+      j,
+      {
+        icon: t.icon || b,
+        title: t.title || "There has been an error",
+        subtitle: t.message
+      }
+    ) }),
+    !o && !t && /* @__PURE__ */ e.jsx(h, { ...n?.content, children: c })
+  ] }) });
+}
+export {
+  S as HeaderLayout,
+  S as default
+};
+//# sourceMappingURL=HeaderLayout.mjs.map

package/dist/HeaderLayout/HeaderLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderLayout.mjs","sources":["../../src/HeaderLayout/HeaderLayout.tsx"],"sourcesContent":["import ReportProblemIcon from \"@mui/icons-material/ReportProblem\";\nimport Box from \"@mui/material/Box\";\nimport CircularProgress from \"@mui/material/CircularProgress\";\nimport LinearProgress from \"@mui/material/LinearProgress\";\nimport type { JSXElementConstructor, ReactElement } from \"react\";\nimport Content, { type ContentProps } from \"../Content\";\nimport Header, { type HeaderProps } from \"../Header\";\nimport Placeholder, { type PlaceholderIcon } from \"../Placeholder\";\nimport { TabProvider } from \"../TabProvider\";\n\n/**\n * Interface representing the slots for the HeaderLayout component.\n */\nexport interface HeaderLayoutSlots {\n  /**\n   * Optional slot for the header component.\n   * Should be a JSX element constructor that takes HeaderProps as props.\n   */\n  header?: JSXElementConstructor<HeaderProps>;\n\n  /**\n   * Optional slot for the content component.\n   * Should be a JSX element constructor that takes ContentProps as props.\n   */\n  content?: JSXElementConstructor<ContentProps>;\n}\n\n/**\n * Props for the HeaderLayout component slots.\n */\nexport interface HeaderLayoutSlotProps {\n  /**\n   * Props for the header slot.\n   */\n  header?: HeaderProps;\n\n  /**\n   * Props for the content slot.\n   */\n  content?: ContentProps;\n}\n\n/**\n * Represents an error that can occur in the HeaderLayout component.\n */\nexport interface HeaderLayoutError {\n  /**\n   * Optional icon to display with the error.\n   */\n  icon?: PlaceholderIcon;\n\n  /**\n   * Optional title for the error.\n   */\n  title?: string;\n\n  /**\n   * The error message to display.\n   */\n  message: string;\n}\n\nexport interface HeaderLayoutProps {\n  /**\n   * The title to be displayed in the header.\n   */\n  title: string | ReactElement;\n  /**\n   * An optional subtitle to be displayed in the header.\n   */\n  subtitle?: string | ReactElement;\n  /**\n   * Optional slots for custom components within the header layout.\n   */\n  slots?: HeaderLayoutSlots;\n  /**\n   * Optional props for the custom slots.\n   */\n  slotProps?: HeaderLayoutSlotProps;\n  /**\n   * Optional flag to indicate if the header layout is in a loading state.\n   */\n  loading?: boolean;\n  /**\n   * Optional flag to indicate if the header layout is in a fetching state.\n   */\n  fetching?: boolean;\n  /**\n   * Optional error object to be displayed in the header layout.\n   */\n  error?: HeaderLayoutError;\n  /**\n   * Content to display in the layout area\n   */\n  children?: React.ReactNode;\n}\n\nconst DefaultErrorIcon = () => (\n  <ReportProblemIcon color=\"error\" sx={{ width: 200, height: 200 }} />\n);\n\n/**\n * A layout component that provides a header and content area with optional loading, fetching, and 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      <Box display=\"flex\" flexDirection=\"column\" height={1}>\n        <HeaderSlot title={title} subtitle={subtitle} {...slotProps?.header} />\n        {fetching && (\n          <Box width={1}>\n            <LinearProgress />\n          </Box>\n        )}\n        {loading && (\n          <Box\n            width={1}\n            height={1}\n            display=\"flex\"\n            justifyContent=\"center\"\n            alignItems=\"center\"\n          >\n            <CircularProgress />\n          </Box>\n        )}\n        {error && (\n          <Box mt={4}>\n            <Placeholder\n              icon={error.icon || DefaultErrorIcon}\n              title={error.title || \"There has been an error\"}\n              subtitle={error.message}\n            />\n          </Box>\n        )}\n        {!loading && !error && (\n          <ContentSlot {...slotProps?.content}>{children}</ContentSlot>\n        )}\n      </Box>\n    </TabProvider>\n  );\n}\n\nexport default HeaderLayout;\n"],"names":["DefaultErrorIcon","jsx","ReportProblemIcon","HeaderLayout","loading","title","subtitle","slots","slotProps","children","fetching","error","HeaderSlot","Header","ContentSlot","Content","TabProvider","jsxs","Box","LinearProgress","CircularProgress","Placeholder"],"mappings":";;;;;;;;;;AAiGA,MAAMA,IAAmB,MACvBC,gBAAAA,EAAAA,IAACC,GAAA,EAAkB,OAAM,SAAQ,IAAI,EAAE,OAAO,KAAK,QAAQ,IAAA,EAAI,CAAG;AAM7D,SAASC,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,SACEd,gBAAAA,EAAAA,IAACe,KACC,UAAAC,gBAAAA,EAAAA,KAACC,GAAA,EAAI,SAAQ,QAAO,eAAc,UAAS,QAAQ,GACjD,UAAA;AAAA,IAAAjB,gBAAAA,EAAAA,IAACW,GAAA,EAAW,OAAAP,GAAc,UAAAC,GAAqB,GAAGE,GAAW,QAAQ;AAAA,IACpEE,KACCT,gBAAAA,EAAAA,IAACiB,GAAA,EAAI,OAAO,GACV,UAAAjB,gBAAAA,MAACkB,KAAe,GAClB;AAAA,IAEDf,KACCH,gBAAAA,EAAAA;AAAAA,MAACiB;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAQ;AAAA,QACR,gBAAe;AAAA,QACf,YAAW;AAAA,QAEX,gCAACE,GAAA,CAAA,CAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGrBT,KACCV,gBAAAA,EAAAA,IAACiB,GAAA,EAAI,IAAI,GACP,UAAAjB,gBAAAA,EAAAA;AAAAA,MAACoB;AAAA,MAAA;AAAA,QACC,MAAMV,EAAM,QAAQX;AAAA,QACpB,OAAOW,EAAM,SAAS;AAAA,QACtB,UAAUA,EAAM;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IAED,CAACP,KAAW,CAACO,2BACXG,GAAA,EAAa,GAAGN,GAAW,SAAU,UAAAC,EAAA,CAAS;AAAA,EAAA,EAAA,CAEnD,EAAA,CACF;AAEJ;"}

package/dist/HeaderLayout/index.d.ts

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

package/dist/Label/Label.d.ts

@@ -0,0 +1,35 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error" | "success";
+export declare const labelClasses: {
+    root: string;
+};
+/**
+ * Props for the Label component
+ */
+export interface LabelProps {
+    /**
+     * Content of the component
+     */
+    text: string;
+    /**
+     * Color palette used to draw the component
+     */
+    variant?: LabelVariant;
+    /**
+     * Background color. Overrides variant
+     */
+    color?: string;
+    /**
+     * Custom styles
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Show the text as uppercase
+     */
+    textTransform?: "none" | "capitalize" | "uppercase";
+}
+/**
+ * Compact element to represent a text
+ */
+export declare function Label({ text, color: colorProp, variant, textTransform, sx, }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export default Label;

package/dist/Label/Label.mjs

@@ -0,0 +1,61 @@
+import { j as f } from "../_virtual/jsx-runtime.mjs";
+import d from "../node_modules/@mui/material/esm/styles/useTheme.mjs";
+import u from "../node_modules/@mui/material/esm/Box/Box.mjs";
+const m = {
+  root: "RdsLabel-root"
+};
+function y({
+  text: o,
+  color: e,
+  variant: r = "default",
+  textTransform: a = "capitalize",
+  sx: i
+}) {
+  const { palette: t, typography: n } = d(), s = {
+    default: t.mode === "light" ? t.grey[100] : t.grey[900],
+    primary: t.primary.light,
+    secondary: t.secondary.light,
+    info: t.info.light,
+    warning: t.warning.light,
+    error: t.error.light,
+    success: t.success.light
+  }, l = {
+    default: t.getContrastText(s.default),
+    primary: t.primary.contrastText,
+    secondary: t.secondary.contrastText,
+    info: t.info.contrastText,
+    warning: t.warning.contrastText,
+    error: t.error.contrastText,
+    success: t.success.contrastText
+  }, c = e || s[r], g = e ? t.getContrastText(e) : l[r];
+  return /* @__PURE__ */ f.jsx(
+    u,
+    {
+      height: 24,
+      minWidth: 22,
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      bgcolor: c,
+      color: g,
+      fontSize: n.caption.fontSize,
+      fontWeight: n.fontWeightBold,
+      lineHeight: 0,
+      textTransform: a,
+      whiteSpace: "nowrap",
+      borderRadius: 2,
+      role: "label",
+      "aria-label": `${o} ${r} label`,
+      py: 0,
+      px: 1,
+      sx: { cursor: "default", ...i },
+      children: o
+    }
+  );
+}
+export {
+  y as Label,
+  y as default,
+  m as labelClasses
+};
+//# sourceMappingURL=Label.mjs.map

package/dist/Label/Label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.mjs","sources":["../../src/Label/Label.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport { type SxProps, type Theme, useTheme } from \"@mui/material/styles\";\n\nexport type LabelVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport const labelClasses = {\n  root: \"RdsLabel-root\",\n};\n\n/**\n * Props for the Label component\n */\nexport interface LabelProps {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: LabelVariant;\n  /**\n   * Background color. Overrides variant\n   */\n  color?: string;\n\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Show the text as uppercase\n   */\n  textTransform?: \"none\" | \"capitalize\" | \"uppercase\";\n}\n\n/**\n * Compact element to represent a text\n */\nexport function Label({\n  text,\n  color: colorProp,\n  variant = \"default\",\n  textTransform = \"capitalize\",\n  sx,\n}: LabelProps) {\n  const { palette, typography } = useTheme();\n\n  const backgroundColor: Record<LabelVariant, string> = {\n    default: palette.mode === \"light\" ? palette.grey[100] : palette.grey[900],\n    primary: palette.primary.light,\n    secondary: palette.secondary.light,\n    info: palette.info.light,\n    warning: palette.warning.light,\n    error: palette.error.light,\n    success: palette.success.light,\n  };\n\n  const textColor: Record<LabelVariant, string> = {\n    default: palette.getContrastText(backgroundColor.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    info: palette.info.contrastText,\n    warning: palette.warning.contrastText,\n    error: palette.error.contrastText,\n    success: palette.success.contrastText,\n  };\n\n  const bgcolor = colorProp ? colorProp : backgroundColor[variant];\n  const color = colorProp\n    ? palette.getContrastText(colorProp)\n    : textColor[variant];\n\n  return (\n    <Box\n      height={24}\n      minWidth={22}\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bgcolor={bgcolor}\n      color={color}\n      fontSize={typography.caption.fontSize}\n      fontWeight={typography.fontWeightBold}\n      lineHeight={0}\n      textTransform={textTransform}\n      whiteSpace=\"nowrap\"\n      borderRadius={2}\n      role=\"label\"\n      aria-label={`${text} ${variant} label`}\n      py={0}\n      px={1}\n      sx={{ cursor: \"default\", ...sx }}\n    >\n      {text}\n    </Box>\n  );\n}\n\nexport default Label;\n"],"names":["labelClasses","Label","text","colorProp","variant","textTransform","sx","palette","typography","useTheme","backgroundColor","textColor","bgcolor","color","jsx","Box"],"mappings":";;;AAYO,MAAMA,IAAe;AAAA,EAC1B,MAAM;AACR;AAiCO,SAASC,EAAM;AAAA,EACpB,MAAAC;AAAA,EACA,OAAOC;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,eAAAC,IAAgB;AAAA,EAChB,IAAAC;AACF,GAAe;AACb,QAAM,EAAE,SAAAC,GAAS,YAAAC,EAAA,IAAeC,EAAA,GAE1BC,IAAgD;AAAA,IACpD,SAASH,EAAQ,SAAS,UAAUA,EAAQ,KAAK,GAAG,IAAIA,EAAQ,KAAK,GAAG;AAAA,IACxE,SAASA,EAAQ,QAAQ;AAAA,IACzB,WAAWA,EAAQ,UAAU;AAAA,IAC7B,MAAMA,EAAQ,KAAK;AAAA,IACnB,SAASA,EAAQ,QAAQ;AAAA,IACzB,OAAOA,EAAQ,MAAM;AAAA,IACrB,SAASA,EAAQ,QAAQ;AAAA,EAAA,GAGrBI,IAA0C;AAAA,IAC9C,SAASJ,EAAQ,gBAAgBG,EAAgB,OAAO;AAAA,IACxD,SAASH,EAAQ,QAAQ;AAAA,IACzB,WAAWA,EAAQ,UAAU;AAAA,IAC7B,MAAMA,EAAQ,KAAK;AAAA,IACnB,SAASA,EAAQ,QAAQ;AAAA,IACzB,OAAOA,EAAQ,MAAM;AAAA,IACrB,SAASA,EAAQ,QAAQ;AAAA,EAAA,GAGrBK,IAAUT,KAAwBO,EAAgBN,CAAO,GACzDS,IAAQV,IACVI,EAAQ,gBAAgBJ,CAAS,IACjCQ,EAAUP,CAAO;AAErB,SACEU,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,SAAQ;AAAA,MACR,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,SAAAH;AAAA,MACA,OAAAC;AAAA,MACA,UAAUL,EAAW,QAAQ;AAAA,MAC7B,YAAYA,EAAW;AAAA,MACvB,YAAY;AAAA,MACZ,eAAAH;AAAA,MACA,YAAW;AAAA,MACX,cAAc;AAAA,MACd,MAAK;AAAA,MACL,cAAY,GAAGH,CAAI,IAAIE,CAAO;AAAA,MAC9B,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI,EAAE,QAAQ,WAAW,GAAGE,EAAA;AAAA,MAE3B,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/Label/index.d.ts

@@ -0,0 +1,2 @@
+export type { LabelProps, LabelVariant } from './Label';
+export { default, default as Label, labelClasses } from './Label';

package/dist/ListPanel/ListPanel.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=ListPanel.context.mjs.map

package/dist/ListPanel/ListPanel.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListPanel.context.mjs","sources":["../../src/ListPanel/ListPanel.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/ListPanel/ListPanel.d.ts

@@ -0,0 +1,38 @@
+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?: React.ReactNode;
+}
+/**
+ * ListPanel component renders a panel with a list of items and a content area.
+ */
+export declare function ListPanel({ items, defaultSelectedItem, colBreakpoint, listMode, children, onSelectedItemChange, }: ListPanelProps): import("react/jsx-runtime").JSX.Element;
+export default ListPanel;