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

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

@@ -0,0 +1,32 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import D from "../drawer/drawer.mjs";
+import f from "../drawer-app-bar/drawer-app-bar.mjs";
+import c from "../drawer-content/drawer-content.mjs";
+import "../drawer-context/drawer-context.mjs";
+import { DrawerProvider as u } from "../drawer-context/drawer-provider.mjs";
+import A from "../drawer-main/drawer-main.mjs";
+function v({
+  children: t,
+  navigation: o,
+  title: n,
+  slots: e,
+  slotsProps: a,
+  ...w
+}) {
+  const p = e?.drawerAppBar ?? f, m = e?.drawer ?? D, i = e?.drawerContent ?? c;
+  return /* @__PURE__ */ d(u, { ...w, children: [
+    /* @__PURE__ */ r(p, { title: n, ...a?.drawerAppBar }),
+    /* @__PURE__ */ r(m, { ...a?.drawer, children: /* @__PURE__ */ r(
+      i,
+      {
+        navigation: o,
+        ...a?.drawerContent
+      }
+    ) }),
+    /* @__PURE__ */ r(A, { children: t })
+  ] });
+}
+export {
+  v as default
+};
+//# sourceMappingURL=drawer-layout.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-layout.mjs","sources":["../../../src/components/drawer-layout/drawer-layout.tsx"],"sourcesContent":["import type { JSXElementConstructor } from \"react\";\nimport Drawer from \"@/components/drawer\";\nimport DrawerAppBar, {\n  type DrawerAppBarProps,\n} from \"@/components/drawer-app-bar\";\nimport DrawerContent from \"@/components/drawer-content\";\nimport { DrawerProvider } from \"@/components/drawer-context\";\nimport DrawerMain from \"@/components/drawer-main\";\nimport type {\n  DrawerContentProps,\n  DrawerNavigation,\n  DrawerProps,\n  DrawerProviderProps,\n} from \"@/components/drawerx/drawer.types\";\n\n/**\n * Slots for DrawerLayout.\n */\nexport interface DrawerLayoutSlots {\n  /**\n   * Slot for DrawerAppBar.\n   */\n  drawerAppBar?: JSXElementConstructor<DrawerAppBarProps>;\n  /**\n   * Slot for Drawer.\n   */\n  drawer?: JSXElementConstructor<DrawerProps>;\n  /**\n   * Slot for DrawerContent.\n   */\n  drawerContent?: JSXElementConstructor<DrawerContentProps>;\n}\n\n/**\n * Slot props for DrawerLayout.\n */\nexport interface DrawerLayoutSlotProps {\n  /**\n   * Props for DrawerAppBar slot.\n   */\n  drawerAppBar?: DrawerAppBarProps;\n  /**\n   * Props for Drawer slot.\n   */\n  drawer?: DrawerProps;\n  /**\n   * Props for DrawerContent slot.\n   */\n  drawerContent?: DrawerContentProps;\n}\n\n/**\n * Props for DrawerLayout.\n */\nexport interface DrawerLayoutProps extends DrawerProviderProps {\n  /**\n   * Title of the drawer layout.\n   */\n  title: string;\n  /**\n   * Navigation tree.\n   */\n  navigation: DrawerNavigation;\n  /**\n   * Optional slots.\n   */\n  slots?: DrawerLayoutSlots;\n  /**\n   * Optional slot props.\n   */\n  slotsProps?: DrawerLayoutSlotProps;\n}\n\n/**\n * Layout structure with drawer and app bar.\n */\nexport default function DrawerLayout({\n  children,\n  navigation,\n  title,\n  slots,\n  slotsProps,\n  ...rest\n}: DrawerLayoutProps) {\n  const DrawerAppBarSlot = slots?.drawerAppBar ?? DrawerAppBar;\n  const DrawerSlot = slots?.drawer ?? Drawer;\n  const DrawerContentSlot = slots?.drawerContent ?? DrawerContent;\n\n  return (\n    <DrawerProvider {...rest}>\n      <DrawerAppBarSlot title={title} {...slotsProps?.drawerAppBar} />\n      <DrawerSlot {...slotsProps?.drawer}>\n        <DrawerContentSlot\n          navigation={navigation}\n          {...slotsProps?.drawerContent}\n        />\n      </DrawerSlot>\n      <DrawerMain>{children}</DrawerMain>\n    </DrawerProvider>\n  );\n}\n"],"names":["DrawerLayout","children","navigation","title","slots","slotsProps","rest","DrawerAppBarSlot","DrawerAppBar","DrawerSlot","Drawer","DrawerContentSlot","DrawerContent","jsxs","DrawerProvider","jsx","DrawerMain"],"mappings":";;;;;;;AA4EA,SAAwBA,EAAa;AAAA,EACnC,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAmBH,GAAO,gBAAgBI,GAC1CC,IAAaL,GAAO,UAAUM,GAC9BC,IAAoBP,GAAO,iBAAiBQ;AAElD,SACE,gBAAAC,EAACC,GAAA,EAAgB,GAAGR,GAClB,UAAA;AAAA,IAAA,gBAAAS,EAACR,GAAA,EAAiB,OAAAJ,GAAe,GAAGE,GAAY,aAAA,CAAc;AAAA,IAC9D,gBAAAU,EAACN,GAAA,EAAY,GAAGJ,GAAY,QAC1B,UAAA,gBAAAU;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,YAAAT;AAAA,QACC,GAAGG,GAAY;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IACA,gBAAAU,EAACC,KAAY,UAAAf,EAAA,CAAS;AAAA,EAAA,GACxB;AAEJ;"}

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

@@ -0,0 +1,2 @@
+export type { DrawerLayoutProps, DrawerLayoutSlotProps, DrawerLayoutSlots, } from './drawer-layout';
+export { default, default as DrawerLayout } from './drawer-layout';

package/dist/components/drawer-main/drawer-main.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+export type DrawerMainProps = PropsWithChildren;
+/**
+ * Main content area that shifts with drawer state.
+ */
+export default function DrawerMain({ children }: DrawerMainProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer-main/drawer-main.mjs

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { SidebarInset as e } from "../ui/sidebar.mjs";
+function i({ children: r }) {
+  return /* @__PURE__ */ t(e, { children: r });
+}
+export {
+  i as default
+};
+//# sourceMappingURL=drawer-main.mjs.map

package/dist/components/drawer-main/drawer-main.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-main.mjs","sources":["../../../src/components/drawer-main/drawer-main.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { SidebarInset } from \"@/components/ui/sidebar\";\n\nexport type DrawerMainProps = PropsWithChildren;\n\n/**\n * Main content area that shifts with drawer state.\n */\nexport default function DrawerMain({ children }: DrawerMainProps) {\n  return <SidebarInset>{children}</SidebarInset>;\n}\n"],"names":["DrawerMain","children","jsx","SidebarInset"],"mappings":";;AAQA,SAAwBA,EAAW,EAAE,UAAAC,KAA6B;AAChE,SAAO,gBAAAC,EAACC,KAAc,UAAAF,GAAS;AACjC;"}

package/dist/components/drawer-main/index.d.ts

@@ -0,0 +1,2 @@
+export type { DrawerMainProps } from './drawer-main';
+export { default, default as DrawerMain } from './drawer-main';

package/dist/components/drawer-subheader/drawer-subheader.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+export type DrawerSubheaderProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Section subheader rendered inside drawer navigation.
+ */
+export default function DrawerSubheader({ className, children, ...rest }: DrawerSubheaderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/drawer-subheader/drawer-subheader.mjs

@@ -0,0 +1,17 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useDrawer as m } from "../drawer-context/drawer-context.mjs";
+import "react";
+import { SidebarGroupLabel as p } from "../ui/sidebar.mjs";
+import { cn as s } from "../../lib/utils.mjs";
+function l({
+  className: r,
+  children: e,
+  ...o
+}) {
+  const { state: t } = m();
+  return t === "close" ? null : /* @__PURE__ */ a(p, { className: s("uppercase", r), ...o, children: e });
+}
+export {
+  l as default
+};
+//# sourceMappingURL=drawer-subheader.mjs.map

package/dist/components/drawer-subheader/drawer-subheader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-subheader.mjs","sources":["../../../src/components/drawer-subheader/drawer-subheader.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { useDrawer } from \"@/components/drawer-context\";\nimport { SidebarGroupLabel } from \"@/components/ui/sidebar\";\nimport { cn } from \"@/lib/utils\";\n\nexport type DrawerSubheaderProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * Section subheader rendered inside drawer navigation.\n */\nexport default function DrawerSubheader({\n  className,\n  children,\n  ...rest\n}: DrawerSubheaderProps) {\n  const { state } = useDrawer();\n\n  if (state === \"close\") {\n    return null;\n  }\n\n  return (\n    <SidebarGroupLabel className={cn(\"uppercase\", className)} {...rest}>\n      {children}\n    </SidebarGroupLabel>\n  );\n}\n"],"names":["DrawerSubheader","className","children","rest","state","useDrawer","jsx","SidebarGroupLabel","cn"],"mappings":";;;;;AAUA,SAAwBA,EAAgB;AAAA,EACtC,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAyB;AACvB,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA;AAElB,SAAID,MAAU,UACL,OAIP,gBAAAE,EAACC,KAAkB,WAAWC,EAAG,aAAaP,CAAS,GAAI,GAAGE,GAC3D,UAAAD,GACH;AAEJ;"}

package/dist/components/drawer-subheader/index.d.ts

@@ -0,0 +1,2 @@
+export type { DrawerSubheaderProps } from './drawer-subheader';
+export { default, default as DrawerSubheader } from './drawer-subheader';

package/dist/components/drawerx/drawer.mock.d.ts

@@ -0,0 +1,11 @@
+import { DrawerNavigation, DrawerNavigationCollapsable, DrawerNavigationItem, DrawerNavigationLink } from './drawer.types';
+export declare const mockLinkDrawerNavigationItem: DrawerNavigationLink;
+export declare const mockLinkNoIconDrawerNavigationItem: DrawerNavigationLink;
+export declare const mockLinkBulletDrawerNavigationItem: DrawerNavigationItem;
+export declare const mockLinkLabelDrawerNavigationItem: DrawerNavigationItem;
+export declare const mockLinkAvatarDrawerNavigationItem: DrawerNavigationItem;
+export declare const mockListDrawerNavigationItems: DrawerNavigationItem[];
+export declare const mockMenuDrawerNavigationItem: DrawerNavigationCollapsable;
+export declare const mockMenuInsideMenuDrawerNavigationItem: DrawerNavigationItem;
+export declare const mockListDrawerNavigationItems2: DrawerNavigationItem[];
+export declare const mockDrawerNavigation: DrawerNavigation;

package/dist/components/drawerx/drawer.types.d.ts

@@ -0,0 +1,189 @@
+import { ComponentType, CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
+import { BadgeVariant } from '../badge';
+import { BulletVariant } from '../bullet';
+/**
+ * Drawer states.
+ * - open: expanded drawer with labels
+ * - close: mini drawer with icons only
+ */
+export type DrawerState = "open" | "close";
+/**
+ * Drawer size variants.
+ */
+export type DrawerSize = "small" | "medium";
+/**
+ * Avatar configuration for drawer items.
+ */
+export interface DrawerItemAvatar {
+    /**
+     * Avatar image source URL.
+     */
+    src: string;
+    /**
+     * Alt text for the avatar image.
+     */
+    alt: string;
+}
+/**
+ * Label configuration for drawer items.
+ */
+export interface DrawerItemLabel {
+    /**
+     * Label text content.
+     */
+    text: string;
+    /**
+     * Label color variant.
+     */
+    variant: BadgeVariant;
+}
+/**
+ * Bullet indicator configuration for drawer items.
+ */
+export interface DrawerItemBullet {
+    /**
+     * Bullet color variant.
+     */
+    variant: BulletVariant;
+}
+/**
+ * Navigation link item in the drawer.
+ */
+export interface DrawerNavigationLink {
+    /**
+     * Item type discriminator.
+     */
+    kind: "link";
+    /**
+     * Unique identifier.
+     */
+    id: string;
+    /**
+     * Display text.
+     */
+    text: string;
+    /**
+     * Navigation URL.
+     */
+    href: string;
+    /**
+     * Optional icon element.
+     */
+    icon?: ReactElement;
+    /**
+     * Optional avatar configuration.
+     */
+    avatar?: DrawerItemAvatar;
+    /**
+     * Optional label badge.
+     */
+    label?: DrawerItemLabel;
+    /**
+     * Optional bullet indicator.
+     */
+    bullet?: DrawerItemBullet;
+}
+/**
+ * Collapsible navigation group with nested items.
+ */
+export type DrawerNavigationCollapsable = Pick<DrawerNavigationLink, "id" | "text" | "icon"> & {
+    /**
+     * Item type discriminator.
+     */
+    kind: "collapsable";
+    /**
+     * Nested navigation items.
+     */
+    items: DrawerNavigationItem[];
+};
+/**
+ * Section header in the drawer navigation.
+ */
+export interface DrawerNavigationHeader {
+    /**
+     * Item type discriminator.
+     */
+    kind: "header";
+    /**
+     * Unique identifier.
+     */
+    id: string;
+    /**
+     * Header text.
+     */
+    text: string;
+}
+/**
+ * Union of all possible drawer navigation item types.
+ */
+export type DrawerNavigationItem = DrawerNavigationLink | DrawerNavigationCollapsable | DrawerNavigationHeader;
+/**
+ * Complete navigation structure for the drawer.
+ */
+export type DrawerNavigation = DrawerNavigationItem[];
+/**
+ * Props for DrawerContent.
+ */
+export interface DrawerContentProps {
+    /**
+     * Navigation items to render.
+     */
+    navigation: DrawerNavigation;
+}
+/**
+ * Props for Drawer component.
+ */
+export type DrawerProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * Shared item colors returned from drawer selection state.
+ */
+export declare const getDrawerItemColors: (selected: boolean | undefined) => {
+    colorClass: string;
+    fontWeight: CSSProperties["fontWeight"];
+};
+/**
+ * Props for DrawerAppBar.
+ */
+export interface DrawerAppBarProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    /**
+     * Title to display in the app bar.
+     */
+    title?: string;
+}
+/**
+ * Props for DrawerProvider.
+ */
+export interface DrawerProviderProps extends PropsWithChildren {
+    /**
+     * Initial state of the drawer.
+     */
+    initialState?: DrawerState;
+    /**
+     * Size of the drawer.
+     * @default "medium"
+     */
+    size?: DrawerSize;
+    /**
+     * Whether the drawer is clipped under the app bar.
+     * @default true
+     */
+    clipped?: boolean;
+    /**
+     * Width of the drawer in pixels.
+     */
+    drawerWidth?: number;
+    /**
+     * ID of currently selected navigation item.
+     */
+    selectedItemId?: string;
+    /**
+     * Component used to render links.
+     * @default "a"
+     */
+    LinkComponent?: ComponentType<any> | string;
+    /**
+     * Callback fired when drawer state changes.
+     * @param newState - The new drawer state.
+     */
+    onStateChange?: (newState: DrawerState) => void;
+}

package/dist/components/drawerx/drawer.types.mjs

@@ -0,0 +1,8 @@
+const r = (o) => ({
+  colorClass: o ? "text-primary" : "text-foreground",
+  fontWeight: o ? 700 : 500
+});
+export {
+  r as getDrawerItemColors
+};
+//# sourceMappingURL=drawer.types.mjs.map

package/dist/components/drawerx/drawer.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.types.mjs","sources":["../../../src/components/drawerx/drawer.types.ts"],"sourcesContent":["import type {\n  ComponentType,\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactElement,\n} from \"react\";\nimport type { BadgeVariant } from \"@/components/badge\";\nimport type { BulletVariant } from \"@/components/bullet\";\n\n/**\n * Drawer states.\n * - open: expanded drawer with labels\n * - close: mini drawer with icons only\n */\nexport type DrawerState = \"open\" | \"close\";\n\n/**\n * Drawer size variants.\n */\nexport type DrawerSize = \"small\" | \"medium\";\n\n/**\n * Avatar configuration for drawer items.\n */\nexport interface DrawerItemAvatar {\n  /**\n   * Avatar image source URL.\n   */\n  src: string;\n  /**\n   * Alt text for the avatar image.\n   */\n  alt: string;\n}\n\n/**\n * Label configuration for drawer items.\n */\nexport interface DrawerItemLabel {\n  /**\n   * Label text content.\n   */\n  text: string;\n  /**\n   * Label color variant.\n   */\n  variant: BadgeVariant;\n}\n\n/**\n * Bullet indicator configuration for drawer items.\n */\nexport interface DrawerItemBullet {\n  /**\n   * Bullet color variant.\n   */\n  variant: BulletVariant;\n}\n\n/**\n * Navigation link item in the drawer.\n */\nexport interface DrawerNavigationLink {\n  /**\n   * Item type discriminator.\n   */\n  kind: \"link\";\n  /**\n   * Unique identifier.\n   */\n  id: string;\n  /**\n   * Display text.\n   */\n  text: string;\n  /**\n   * Navigation URL.\n   */\n  href: string;\n  /**\n   * Optional icon element.\n   */\n  icon?: ReactElement;\n  /**\n   * Optional avatar configuration.\n   */\n  avatar?: DrawerItemAvatar;\n  /**\n   * Optional label badge.\n   */\n  label?: DrawerItemLabel;\n  /**\n   * Optional bullet indicator.\n   */\n  bullet?: DrawerItemBullet;\n}\n\n/**\n * Collapsible navigation group with nested items.\n */\nexport type DrawerNavigationCollapsable = Pick<\n  DrawerNavigationLink,\n  \"id\" | \"text\" | \"icon\"\n> & {\n  /**\n   * Item type discriminator.\n   */\n  kind: \"collapsable\";\n  /**\n   * Nested navigation items.\n   */\n  items: DrawerNavigationItem[];\n};\n\n/**\n * Section header in the drawer navigation.\n */\nexport interface DrawerNavigationHeader {\n  /**\n   * Item type discriminator.\n   */\n  kind: \"header\";\n  /**\n   * Unique identifier.\n   */\n  id: string;\n  /**\n   * Header text.\n   */\n  text: string;\n}\n\n/**\n * Union of all possible drawer navigation item types.\n */\nexport type DrawerNavigationItem =\n  | DrawerNavigationLink\n  | DrawerNavigationCollapsable\n  | DrawerNavigationHeader;\n\n/**\n * Complete navigation structure for the drawer.\n */\nexport type DrawerNavigation = DrawerNavigationItem[];\n\n/**\n * Props for DrawerContent.\n */\nexport interface DrawerContentProps {\n  /**\n   * Navigation items to render.\n   */\n  navigation: DrawerNavigation;\n}\n\n/**\n * Props for Drawer component.\n */\nexport type DrawerProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;\n\n/**\n * Shared item colors returned from drawer selection state.\n */\nexport const getDrawerItemColors = (\n  selected: boolean | undefined,\n): {\n  colorClass: string;\n  fontWeight: CSSProperties[\"fontWeight\"];\n} => ({\n  colorClass: selected ? \"text-primary\" : \"text-foreground\",\n  fontWeight: selected ? 700 : 500,\n});\n\n/**\n * Props for DrawerAppBar.\n */\nexport interface DrawerAppBarProps\n  extends PropsWithChildren<HTMLAttributes<HTMLElement>> {\n  /**\n   * Title to display in the app bar.\n   */\n  title?: string;\n}\n\n/**\n * Props for DrawerProvider.\n */\nexport interface DrawerProviderProps extends PropsWithChildren {\n  /**\n   * Initial state of the drawer.\n   */\n  initialState?: DrawerState;\n  /**\n   * Size of the drawer.\n   * @default \"medium\"\n   */\n  size?: DrawerSize;\n  /**\n   * Whether the drawer is clipped under the app bar.\n   * @default true\n   */\n  clipped?: boolean;\n  /**\n   * Width of the drawer in pixels.\n   */\n  drawerWidth?: number;\n  /**\n   * ID of currently selected navigation item.\n   */\n  selectedItemId?: string;\n  /**\n   * Component used to render links.\n   * @default \"a\"\n   */\n  LinkComponent?: ComponentType<any> | string;\n  /**\n   * Callback fired when drawer state changes.\n   * @param newState - The new drawer state.\n   */\n  onStateChange?: (newState: DrawerState) => void;\n}\n"],"names":["getDrawerItemColors","selected"],"mappings":"AAoKO,MAAMA,IAAsB,CACjCC,OAII;AAAA,EACJ,YAAYA,IAAW,iBAAiB;AAAA,EACxC,YAAYA,IAAW,MAAM;AAC/B;"}

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

@@ -0,0 +1,10 @@
+export { default as Drawer } from '../drawer';
+export type { DrawerAppBarProps } from '../drawer-app-bar';
+export { default as DrawerAppBar } from '../drawer-app-bar';
+export { default as DrawerContent } from '../drawer-content';
+export * from '../drawer-context';
+export type { DrawerMainProps } from '../drawer-main';
+export { default as DrawerMain } from '../drawer-main';
+export type { DrawerSubheaderProps } from '../drawer-subheader';
+export { default as DrawerSubheader } from '../drawer-subheader';
+export * from './drawer.types';

package/dist/components/expandable-alert/expandable-alert.d.ts

@@ -0,0 +1,47 @@
+import { ReactElement, ReactNode } from 'react';
+/**
+ * Supported alert severity levels.
+ */
+export type AlertSeverity = "success" | "info" | "warning" | "error";
+/**
+ * Props for the ExpandableAlert component.
+ */
+export interface ExpandableAlertProps {
+    /**
+     * Alert severity level.
+     */
+    severity: AlertSeverity;
+    /**
+     * Custom icon mapping for different severity levels.
+     */
+    iconMapping?: Partial<Record<AlertSeverity, ReactNode>>;
+    /**
+     * Alert title.
+     */
+    title?: string;
+    /**
+     * Alert message content.
+     */
+    message: string;
+    /**
+     * Additional metadata to display in expandable section.
+     */
+    metadata?: string | string[];
+    /**
+     * Custom component to render in expandable section.
+     */
+    metadataComponent?: ReactElement;
+    /**
+     * Callback when alert is closed.
+     */
+    onClose: () => void;
+    /**
+     * Additional class names for the alert container.
+     */
+    className?: string;
+}
+/**
+ * Alert component with expandable metadata section.
+ */
+export declare function ExpandableAlert({ severity, iconMapping, title, message, metadata, metadataComponent, onClose, className, }: ExpandableAlertProps): import("react/jsx-runtime").JSX.Element;
+export default ExpandableAlert;

package/dist/components/expandable-alert/expandable-alert.mjs

@@ -0,0 +1,77 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { Board as C } from "../board/board.mjs";
+import { Button as t } from "../button/button.mjs";
+import { Alert as N, AlertTitle as w, AlertDescription as x, AlertAction as b } from "../ui/alert.mjs";
+import { Collapsible as A, CollapsibleContent as g } from "../ui/collapsible.mjs";
+import { cn as v } from "../../lib/utils.mjs";
+import k from "../../node_modules/lucide-react/dist/esm/icons/x.mjs";
+import j from "../../node_modules/lucide-react/dist/esm/icons/chevron-up.mjs";
+import z from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.mjs";
+import B from "../../node_modules/lucide-react/dist/esm/icons/circle-x.mjs";
+import D from "../../node_modules/lucide-react/dist/esm/icons/triangle-alert.mjs";
+import E from "../../node_modules/lucide-react/dist/esm/icons/info.mjs";
+import I from "../../node_modules/lucide-react/dist/esm/icons/circle-check.mjs";
+const T = {
+  success: /* @__PURE__ */ e(I, { className: "h-4 w-4", "aria-hidden": "true" }),
+  info: /* @__PURE__ */ e(E, { className: "h-4 w-4", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ e(D, { className: "h-4 w-4", "aria-hidden": "true" }),
+  error: /* @__PURE__ */ e(B, { className: "h-4 w-4", "aria-hidden": "true" })
+};
+function Q({
+  severity: a,
+  iconMapping: s,
+  title: n,
+  message: c,
+  metadata: i,
+  metadataComponent: m,
+  onClose: d,
+  className: h
+}) {
+  const [r, o] = u(!1), p = s?.[a] ?? T[a];
+  return /* @__PURE__ */ l(
+    N,
+    {
+      variant: a === "error" ? "destructive" : "default",
+      className: v(h),
+      children: [
+        p,
+        /* @__PURE__ */ l("div", { className: "w-full space-y-2", children: [
+          n ? /* @__PURE__ */ e(w, { children: n }) : null,
+          /* @__PURE__ */ e(x, { children: c }),
+          i ? /* @__PURE__ */ e(A, { open: r, onOpenChange: o, children: /* @__PURE__ */ e(g, { className: "mt-3", children: /* @__PURE__ */ e(C, { content: i, children: m }) }) }) : null
+        ] }),
+        /* @__PURE__ */ e(b, { children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ e(
+            t,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": "close alert",
+              onClick: d,
+              children: /* @__PURE__ */ e(k, { className: "h-4 w-4", "aria-hidden": "true" })
+            }
+          ),
+          i ? /* @__PURE__ */ e(
+            t,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": r ? "collapse metadata" : "expand metadata",
+              "aria-expanded": r,
+              onClick: () => o((f) => !f),
+              children: r ? /* @__PURE__ */ e(j, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ e(z, { className: "h-4 w-4", "aria-hidden": "true" })
+            }
+          ) : null
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  Q as ExpandableAlert,
+  Q as default
+};
+//# sourceMappingURL=expandable-alert.mjs.map

package/dist/components/expandable-alert/expandable-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-alert.mjs","sources":["../../../src/components/expandable-alert/expandable-alert.tsx"],"sourcesContent":["import {\n  AlertTriangle,\n  CheckCircle2,\n  ChevronDown,\n  ChevronUp,\n  Info,\n  X,\n  XCircle,\n} from \"lucide-react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport Board from \"@/components/board\";\nimport Button from \"@/components/button\";\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/components/ui/alert\";\nimport { Collapsible, CollapsibleContent } from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Supported alert severity levels.\n */\nexport type AlertSeverity = \"success\" | \"info\" | \"warning\" | \"error\";\n\n/**\n * Props for the ExpandableAlert component.\n */\nexport interface ExpandableAlertProps {\n  /**\n   * Alert severity level.\n   */\n  severity: AlertSeverity;\n  /**\n   * Custom icon mapping for different severity levels.\n   */\n  iconMapping?: Partial<Record<AlertSeverity, ReactNode>>;\n  /**\n   * Alert title.\n   */\n  title?: string;\n  /**\n   * Alert message content.\n   */\n  message: string;\n  /**\n   * Additional metadata to display in expandable section.\n   */\n  metadata?: string | string[];\n  /**\n   * Custom component to render in expandable section.\n   */\n  metadataComponent?: ReactElement;\n  /**\n   * Callback when alert is closed.\n   */\n  onClose: () => void;\n  /**\n   * Additional class names for the alert container.\n   */\n  className?: string;\n}\n\nconst defaultIcons: Record<AlertSeverity, ReactNode> = {\n  success: <CheckCircle2 className=\"h-4 w-4\" aria-hidden=\"true\" />,\n  info: <Info className=\"h-4 w-4\" aria-hidden=\"true\" />,\n  warning: <AlertTriangle className=\"h-4 w-4\" aria-hidden=\"true\" />,\n  error: <XCircle className=\"h-4 w-4\" aria-hidden=\"true\" />,\n};\n\n/**\n * Alert component with expandable metadata section.\n */\nexport function ExpandableAlert({\n  severity,\n  iconMapping,\n  title,\n  message,\n  metadata,\n  metadataComponent,\n  onClose,\n  className,\n}: ExpandableAlertProps) {\n  const [expanded, setExpanded] = useState(false);\n  const icon = iconMapping?.[severity] ?? defaultIcons[severity];\n\n  return (\n    <Alert\n      variant={severity === \"error\" ? \"destructive\" : \"default\"}\n      className={cn(className)}\n    >\n      {icon}\n      <div className=\"w-full space-y-2\">\n        {title ? <AlertTitle>{title}</AlertTitle> : null}\n        <AlertDescription>{message}</AlertDescription>\n        {metadata ? (\n          <Collapsible open={expanded} onOpenChange={setExpanded}>\n            <CollapsibleContent className=\"mt-3\">\n              <Board content={metadata}>{metadataComponent}</Board>\n            </CollapsibleContent>\n          </Collapsible>\n        ) : null}\n      </div>\n      <AlertAction>\n        <div className=\"flex flex-col gap-1\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"close alert\"\n            onClick={onClose}\n          >\n            <X className=\"h-4 w-4\" aria-hidden=\"true\" />\n          </Button>\n          {metadata ? (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              aria-label={expanded ? \"collapse metadata\" : \"expand metadata\"}\n              aria-expanded={expanded}\n              onClick={() => setExpanded((value) => !value)}\n            >\n              {expanded ? (\n                <ChevronUp className=\"h-4 w-4\" aria-hidden=\"true\" />\n              ) : (\n                <ChevronDown className=\"h-4 w-4\" aria-hidden=\"true\" />\n              )}\n            </Button>\n          ) : null}\n        </div>\n      </AlertAction>\n    </Alert>\n  );\n}\n\nexport default ExpandableAlert;\n"],"names":["defaultIcons","jsx","CheckCircle2","Info","AlertTriangle","XCircle","ExpandableAlert","severity","iconMapping","title","message","metadata","metadataComponent","onClose","className","expanded","setExpanded","useState","icon","jsxs","Alert","cn","AlertTitle","AlertDescription","Collapsible","CollapsibleContent","Board","AlertAction","Button","X","value","ChevronUp","ChevronDown"],"mappings":";;;;;;;;;;;;;;AAiEA,MAAMA,IAAiD;AAAA,EACrD,SAAS,gBAAAC,EAACC,GAAA,EAAa,WAAU,WAAU,eAAY,QAAO;AAAA,EAC9D,MAAM,gBAAAD,EAACE,GAAA,EAAK,WAAU,WAAU,eAAY,QAAO;AAAA,EACnD,SAAS,gBAAAF,EAACG,GAAA,EAAc,WAAU,WAAU,eAAY,QAAO;AAAA,EAC/D,OAAO,gBAAAH,EAACI,GAAA,EAAQ,WAAU,WAAU,eAAY,OAAA,CAAO;AACzD;AAKO,SAASC,EAAgB;AAAA,EAC9B,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAyB;AACvB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAOV,IAAcD,CAAQ,KAAKP,EAAaO,CAAQ;AAE7D,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASb,MAAa,UAAU,gBAAgB;AAAA,MAChD,WAAWc,EAAGP,CAAS;AAAA,MAEtB,UAAA;AAAA,QAAAI;AAAA,QACD,gBAAAC,EAAC,OAAA,EAAI,WAAU,oBACZ,UAAA;AAAA,UAAAV,IAAQ,gBAAAR,EAACqB,GAAA,EAAY,UAAAb,EAAA,CAAM,IAAgB;AAAA,UAC5C,gBAAAR,EAACsB,KAAkB,UAAAb,EAAA,CAAQ;AAAA,UAC1BC,IACC,gBAAAV,EAACuB,GAAA,EAAY,MAAMT,GAAU,cAAcC,GACzC,UAAA,gBAAAf,EAACwB,GAAA,EAAmB,WAAU,QAC5B,4BAACC,GAAA,EAAM,SAASf,GAAW,UAAAC,EAAA,CAAkB,EAAA,CAC/C,GACF,IACE;AAAA,QAAA,GACN;AAAA,QACA,gBAAAX,EAAC0B,GAAA,EACC,UAAA,gBAAAR,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAA,gBAAAlB;AAAA,YAAC2B;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAASf;AAAA,cAET,UAAA,gBAAAZ,EAAC4B,GAAA,EAAE,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UAE3ClB,IACC,gBAAAV;AAAA,YAAC2B;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,cAAYb,IAAW,sBAAsB;AAAA,cAC7C,iBAAeA;AAAA,cACf,SAAS,MAAMC,EAAY,CAACc,MAAU,CAACA,CAAK;AAAA,cAE3C,UAAAf,IACC,gBAAAd,EAAC8B,GAAA,EAAU,WAAU,WAAU,eAAY,OAAA,CAAO,IAElD,gBAAA9B,EAAC+B,GAAA,EAAY,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA,IAGtD;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/expandable-alert/index.d.ts

@@ -0,0 +1,2 @@
+export type { AlertSeverity, ExpandableAlertProps } from './expandable-alert';
+export { default, default as ExpandableAlert } from './expandable-alert';

package/dist/components/form-dialog/form-dialog.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { DialogSize } from '../dialog';
+/**
+ * Props for the FormDialog component.
+ *
+ * @template T - The type of data returned from the form.
+ */
+export interface FormDialogProps<T> {
+    /**
+     * Whether the dialog is open.
+     */
+    open: boolean;
+    /**
+     * The title of the dialog.
+     */
+    title: ReactNode;
+    /**
+     * Optional description rendered under the title.
+     */
+    description?: ReactNode;
+    /**
+     * Whether the dialog is in a loading state.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the dialog is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the submit button is disabled.
+     * @default false
+     */
+    disableAccept?: boolean;
+    /**
+     * Whether the cancel button is disabled.
+     * @default false
+     */
+    disableCancel?: boolean;
+    /**
+     * The text to display on the submit button.
+     * @default "Submit"
+     */
+    submitText?: string;
+    /**
+     * The text to display on the cancel button.
+     * @default "Cancel"
+     */
+    cancelText?: string;
+    /**
+     * Size variant for the dialog content.
+     * @default "md"
+     */
+    size?: DialogSize;
+    /**
+     * Additional class names for the dialog content.
+     */
+    className?: string;
+    /**
+     * Content rendered inside the form.
+     */
+    children?: ReactNode;
+    /**
+     * Callback function to be called when the cancel button is clicked.
+     */
+    onCancel: () => void;
+    /**
+     * Callback function to be called when the submit button is clicked.
+     * @param data - The data to be submitted.
+     */
+    onSubmit: (data: T) => void;
+}
+/**
+ * Form dialog wrapper with submit handling.
+ */
+export declare function FormDialog<T>({ open, title, description, loading, disabled, disableAccept, disableCancel, submitText, cancelText, size, className, children, onSubmit, onCancel, }: FormDialogProps<T>): import("react/jsx-runtime").JSX.Element;
+export default FormDialog;

package/dist/components/form-dialog/form-dialog.mjs

@@ -0,0 +1,93 @@
+import { jsx as e, jsxs as s, Fragment as x } from "react/jsx-runtime";
+import { useId as y } from "react";
+import { Button as l } from "../button/button.mjs";
+import { Dialog as C } from "../dialog/dialog.mjs";
+import { getFormData as w } from "../../utils/forms.mjs";
+import c from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+import v from "../../node_modules/lucide-react/dist/esm/icons/x.mjs";
+function H({
+  open: m,
+  title: d,
+  description: f,
+  loading: t = !1,
+  disabled: a = !1,
+  disableAccept: p = !1,
+  disableCancel: u = !1,
+  submitText: r = "Submit",
+  cancelText: h = "Cancel",
+  size: b = "md",
+  className: D,
+  children: N,
+  onSubmit: g,
+  onCancel: i
+}) {
+  const o = y();
+  return /* @__PURE__ */ e(
+    C,
+    {
+      open: m,
+      title: /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { children: d }),
+          t ? /* @__PURE__ */ e(
+            c,
+            {
+              role: "progressbar",
+              "aria-label": "loading",
+              className: "h-4 w-4 animate-spin text-muted-foreground"
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            "aria-label": "close",
+            disabled: a || t,
+            onClick: i,
+            children: /* @__PURE__ */ e(v, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        )
+      ] }),
+      description: f,
+      size: b,
+      className: D,
+      showCloseButton: !1,
+      footer: /* @__PURE__ */ s(x, { children: [
+        /* @__PURE__ */ e(
+          l,
+          {
+            type: "button",
+            variant: "outline",
+            disabled: a || t || u,
+            onClick: i,
+            children: h
+          }
+        ),
+        /* @__PURE__ */ e(
+          l,
+          {
+            type: "submit",
+            form: o,
+            disabled: a || t || p,
+            children: t ? /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ e(c, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }),
+              r
+            ] }) : r
+          }
+        )
+      ] }),
+      onClose: i,
+      children: /* @__PURE__ */ e("form", { id: o, onSubmit: (n) => {
+        n.preventDefault(), g(w(n));
+      }, className: "space-y-4", children: /* @__PURE__ */ e("fieldset", { disabled: t || a, className: "space-y-4", children: N }) })
+    }
+  );
+}
+export {
+  H as FormDialog,
+  H as default
+};
+//# sourceMappingURL=form-dialog.mjs.map