@mich8060/unified-design-system 0.2.3 → 0.2.5

package/README.md

@@ -31,3 +31,40 @@ npm run dev
 See `/docs` for the full methodology and governance model.
 
 - [Claude Rules](docs/claude-rules.md) – conventions and constraints for AI-assisted development in this repo
+
+## NPM package quick start
+
+Install the package and required peer dependencies:
+
+```bash
+npm i @mich8060/unified-design-system react react-dom react-router-dom @phosphor-icons/react
+```
+
+Import components and styles:
+
+```tsx
+import { AppShell, Button, Flex, Menu, Text, TextInput } from "@mich8060/unified-design-system";
+import "@mich8060/unified-design-system/styles.css";
+```
+
+## Common prop pitfalls
+
+- `Button` uses `appearance`, not `variant`
+  - valid values: `primary`, `soft`, `outline`, `text`, `ghost`, `disabled`, `destructive`
+- `Text` requires a `variant` value such as `heading-32` or `body-16`
+- `TextInput` icon placement uses `iconPosition` with `left` or `right`
+- `Menu` mode uses `light` or `dark`
+
+## Exported constants
+
+Use exported constants to avoid guessing valid values:
+
+```tsx
+import {
+  BUTTON_APPEARANCES,
+  TEXT_VARIANTS,
+  TEXT_WEIGHTS,
+  TEXT_INPUT_STATES,
+  ICON_APPEARANCES
+} from "@mich8060/unified-design-system";
+```

package/dist/app-shell/AppShell.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import type { ShellLayoutConfig } from "./layout.types";
+import "./shell.scss";
+export interface AppShellSlots {
+    Header?: React.ReactNode;
+    Sidebar?: React.ReactNode;
+    Breadcrumb?: React.ReactNode;
+    Footer?: React.ReactNode;
+    SubNav?: React.ReactNode;
+}
+/**
+ * Public props for the AppShell root component.
+ *
+ * @example
+ * ```tsx
+ * <AppShell brand="comphealth" theme="dark">
+ *   <AppShell.Menu>...</AppShell.Menu>
+ *   <AppShell.Content>
+ *     <AppShell.Main>...</AppShell.Main>
+ *   </AppShell.Content>
+ * </AppShell>
+ * ```
+ */
+export interface AppShellProps {
+    layout?: ShellLayoutConfig;
+    slots?: AppShellSlots;
+    children?: React.ReactNode;
+    brand?: string;
+    theme?: "light" | "dark";
+    className?: string;
+}
+/** Slot wrapper props used by AppShell compound regions. */
+export interface AppShellSectionProps {
+    children?: React.ReactNode;
+}
+declare const AppShellMenuSlot: ({ children }: AppShellSectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppShellContentSlot: ({ children }: AppShellSectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppShellListviewSlot: ({ children }: AppShellSectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppShellMainSlot: ({ children }: AppShellSectionProps) => import("react/jsx-runtime").JSX.Element;
+type AppShellCompound = React.FC<AppShellProps> & {
+    Menu: typeof AppShellMenuSlot;
+    Content: typeof AppShellContentSlot;
+    Listview: typeof AppShellListviewSlot;
+    Main: typeof AppShellMainSlot;
+};
+export declare const AppShell: AppShellCompound;
+export {};

package/dist/app-shell/layout.types.d.ts

@@ -0,0 +1,15 @@
+export type ContainerMode = "max" | "fluid" | "none";
+export type DensityMode = "compact" | "comfortable";
+export type PaddingMode = "standard" | "none";
+export interface ShellLayoutConfig {
+    header?: boolean;
+    sidebar?: boolean;
+    breadcrumb?: boolean;
+    footer?: boolean;
+    padding?: PaddingMode;
+    container?: ContainerMode;
+    subNav?: boolean;
+    brandSwitcher?: boolean;
+    density?: DensityMode;
+}
+export declare const defaultLayout: Required<ShellLayoutConfig>;

package/dist/design-system/components/Accordion/Accordion.d.ts

@@ -0,0 +1,26 @@
+import "./_accordion.scss";
+import type { AccordionProps } from "./Accordion.types";
+/**
+ * AccordionItem component - individual accordion item
+ * @param {string} label - The label text for the accordion item
+ * @param {boolean} defaultExpanded - Whether the item is expanded by default
+ * @param {React.ReactNode} children - Content to display when expanded
+ * @param {string} className - Additional CSS classes
+ * @param {function} onToggle - Callback when item is toggled (receives new expanded state)
+ * @param {object} props - Additional props to pass to the accordion item
+ */
+export declare function AccordionItem({ label, defaultExpanded, children, className, onToggle, ...props }: {
+    [x: string]: any;
+    label: any;
+    defaultExpanded?: boolean | undefined;
+    children: any;
+    className?: string | undefined;
+    onToggle: any;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accordion component - container for accordion items
+ * @param {React.ReactNode} children - AccordionItem components
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the accordion container
+ */
+export default function Accordion({ children, className, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Accordion/Accordion.types.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export interface AccordionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+    className?: string;
+}

package/dist/design-system/components/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Accordion";
+export { default as Accordion } from "./Accordion";
+export type { AccordionProps } from "./Accordion.types";

package/dist/design-system/components/ActionMenu/ActionMenu.d.ts

@@ -0,0 +1,15 @@
+import "./_action-menu.scss";
+import type { ActionMenuProps } from "./ActionMenu.types";
+/**
+ * ActionMenu component - A dropdown menu for actions
+ * @param {React.ReactNode} trigger - Required trigger element (use Button component)
+ * @param {array} items - Array of menu items: { label, icon, onClick, disabled, destructive, divider, items (for submenus) }
+ * @param {string} placement - Menu placement: 'bottom-start', 'bottom-end', 'top-start', 'top-end'
+ * @param {boolean} fullWidth - When true, the menu matches the trigger width
+ * @param {boolean} disabled - Whether the menu is disabled
+ * @param {function} onOpenChange - Callback when open state changes: (isOpen: boolean) => void
+ * @param {string} className - Additional CSS classes
+ * @param {string} menuClassName - Additional CSS classes for the menu panel
+ * @param {object} props - Additional props
+ */
+export default function ActionMenu({ trigger, items, placement, fullWidth, disabled, onOpenChange, className, menuClassName, ...props }: ActionMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/ActionMenu/ActionMenu.types.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonHTMLAttributes } from "react";
+export interface ActionMenuProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    trigger?: unknown;
+    items?: unknown[];
+    placement?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    onOpenChange?: (...args: unknown[]) => void;
+    className?: string;
+    menuClassName?: string;
+}

package/dist/design-system/components/ActionMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./ActionMenu";
+export { default as ActionMenu } from "./ActionMenu";
+export type { ActionMenuProps } from "./ActionMenu.types";

package/dist/design-system/components/Avatar/Avatar.d.ts

@@ -0,0 +1,13 @@
+import "./_avatar.scss";
+import type { AvatarProps } from "./Avatar.types";
+/**
+ * Avatar component for displaying user photos or initials
+ * @param {string} src - Image source URL for user photo
+ * @param {string} initials - Initials to display (e.g., "EB", "JD")
+ * @param {boolean} status - Whether to show the status indicator (green dot)
+ * @param {string} size - Size of the avatar: 'small', 'default', 'large' (default: 'default')
+ * @param {string} className - Additional CSS classes
+ * @param {string} alt - Alt text for the image
+ * @param {object} props - Additional props to pass to the avatar container
+ */
+export default function Avatar({ src, initials, status, size, className, alt, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Avatar/Avatar.types.d.ts

@@ -0,0 +1,9 @@
+import type { ImgHTMLAttributes } from "react";
+export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
+    src?: unknown;
+    initials?: unknown;
+    status?: boolean;
+    size?: string;
+    className?: string;
+    alt?: string;
+}

package/dist/design-system/components/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Avatar";
+export { default as Avatar } from "./Avatar";
+export type { AvatarProps } from "./Avatar.types";

package/dist/design-system/components/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import "./_badge.scss";
+import type { BadgeProps } from "./Badge.types";
+/**
+ * Badge component for displaying badges
+ * @param {number|string} count - The count to display (will be formatted with + if over maxCount)
+ * @param {string} variant - Color variant: 'red', 'orange', 'yellow', 'green', 'dark-green', 'blue', 'dark-blue', 'purple', 'pink', 'gray', 'outline'
+ * @param {number} maxCount - Maximum count to display before showing "+" (default: 99)
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the badge element
+ */
+export default function Badge({ count, variant, maxCount, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/design-system/components/Badge/Badge.types.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "react";
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+    count?: unknown;
+    variant?: string;
+    maxCount?: number;
+    className?: string;
+}

package/dist/design-system/components/Badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Badge";
+export { default as Badge } from "./Badge";
+export type { BadgeProps } from "./Badge.types";

package/dist/design-system/components/Branding/Branding.d.ts

@@ -0,0 +1,20 @@
+import "./_branding.scss";
+import type { BrandingProps } from "./Branding.types";
+/**
+ * Branding component — displays a single brand logo as inline SVG.
+ * Colors are driven by CSS custom properties (--uds-brands-*) so they
+ * can be themed for light / dark mode.
+ *
+ * Works like <Icon name="House" /> but for brand logos:
+ *   <Branding brand="connect" />
+ *
+ * @param {string}  brand   - Brand key: "design-system" | "connect" | "comphealth" |
+ *                            "weatherby" | "modio" | "locumsmart" | "wireframe"
+ * @param {boolean} symbol  - When true, renders only the brand symbol/icon instead
+ *                            of the full logo. Defaults to false (full logo).
+ * @param {boolean} inherit - When true, ignores `brand` prop and automatically uses
+ *                            the active brand from the `data-brand` attribute on <html>.
+ * @param {string}  size    - Size variant: "small" | "default" | "large"
+ * @param {string}  className - Additional CSS classes
+ */
+export default function Branding({ brand, symbol, inherit, size, className, ...props }: BrandingProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/design-system/components/Branding/Branding.types.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "react";
+export interface BrandingProps extends HTMLAttributes<HTMLDivElement> {
+    brand?: unknown;
+    symbol?: boolean;
+    inherit?: boolean;
+    size?: string;
+    className?: string;
+}

package/dist/design-system/components/Branding/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Branding";
+export { default as Branding } from "./Branding";
+export type { BrandingProps } from "./Branding.types";

package/dist/design-system/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,8 @@
+import "./_breadcrumb.scss";
+import type { BreadcrumbProps } from "./Breadcrumb.types";
+/**
+ * Breadcrumb component for page navigation
+ * @param {Array} items - Optional array of breadcrumb items (max 5). Each item should have { label: string, href?: string }
+ *                        If href is provided, the item will be a link. The last item is always the current page (no link).
+ */
+export default function Breadcrumb({ items }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/design-system/components/Breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,4 @@
+import type { AnchorHTMLAttributes } from "react";
+export interface BreadcrumbProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    items?: unknown;
+}

package/dist/design-system/components/Breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Breadcrumb";
+export { default as Breadcrumb } from "./Breadcrumb";
+export type { BreadcrumbProps } from "./Breadcrumb.types";

package/dist/design-system/components/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonProps } from "./Button.types";
+import "./_button.scss";
+export default function Button({ label, appearance, layout, size, icon, iconSize, icons, children, tracking, className, onClick, disabled, "aria-label": ariaLabel, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Button/Button.types.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export type ButtonAppearance = "primary" | "soft" | "outline" | "text" | "ghost" | "disabled" | "destructive";
+export type ButtonLayout = "label-only" | "icon-left" | "icon-right" | "icon-only" | "only";
+export type ButtonSize = "large" | "default" | "small" | "xsmall";
+export type ButtonTracking = string | Record<string, unknown>;
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    label?: string;
+    appearance?: ButtonAppearance;
+    layout?: ButtonLayout;
+    size?: ButtonSize;
+    icon?: string | ReactNode;
+    iconSize?: number;
+    icons?: ReactNode;
+    children?: ReactNode;
+    tracking?: ButtonTracking;
+}

package/dist/design-system/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Button";
+export { default as Button } from "./Button";
+export type { ButtonProps } from "./Button.types";

package/dist/design-system/components/Calendar/Calendar.d.ts

@@ -0,0 +1,20 @@
+import "./_calendar.scss";
+import type { CalendarProps } from "./Calendar.types";
+/**
+ * Calendar — A full-size calendar component with multi-day spanning events.
+ *
+ * Events support `startDate` + `endDate` for multi-day spans across
+ * days, weeks, and months. Renders lightweight inline event bars.
+ *
+ * @param {string} view - "month" (default) or "week"
+ * @param {Date} defaultDate - Initial date to display (default: today)
+ * @param {Date} value - Selected date (controlled)
+ * @param {Array} events - Event objects (see docs for shape)
+ * @param {function} onDateSelect - (date: Date) => void
+ * @param {function} onEventClick - (event, e) => void
+ * @param {number} maxEventsPerDay - Max event rows per cell (default: 3)
+ * @param {boolean} showWeekNumbers - Show ISO week number column
+ * @param {string} size - "default" or "compact"
+ * @param {string} className - Additional CSS classes
+ */
+export default function Calendar({ view, defaultDate, value, events, onDateSelect, onEventClick, maxEventsPerDay, showWeekNumbers, size, className, ...rest }: CalendarProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Calendar/Calendar.types.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+export interface CalendarProps extends HTMLAttributes<HTMLDivElement> {
+    view?: string;
+    defaultDate?: unknown;
+    value?: unknown;
+    events?: unknown[];
+    onDateSelect?: (...args: unknown[]) => void;
+    onEventClick?: (...args: unknown[]) => void;
+    maxEventsPerDay?: number;
+    showWeekNumbers?: boolean;
+    size?: string;
+    className?: string;
+}

package/dist/design-system/components/Calendar/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Calendar";
+export { default as Calendar } from "./Calendar";
+export type { CalendarProps } from "./Calendar.types";

package/dist/design-system/components/Card/Card.d.ts

@@ -0,0 +1,13 @@
+import "./_card.scss";
+import type { CardProps } from "./Card.types";
+/**
+ * Card component for navigation items on the overview page
+ *
+ * @param {Object} props
+ * @param {string} props.to - The route path to navigate to
+ * @param {string} props.title - The card title
+ * @param {string} props.description - The card description
+ * @param {React.ReactNode} props.icon - The SVG icon to display
+ * @param {string} [props.className] - Additional CSS classes
+ */
+export default function Card({ to, title, description, icon, className }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Card/Card.types.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    to?: unknown;
+    title?: unknown;
+    description?: unknown;
+    icon?: string | ReactNode;
+    className?: string;
+}

package/dist/design-system/components/Card/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Card";
+export { default as Card } from "./Card";
+export type { CardProps } from "./Card.types";

package/dist/design-system/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import "./_checkbox.scss";
+import type { CheckboxProps } from "./Checkbox.types";
+/**
+ * Checkbox component for form inputs
+ * @param {boolean} checked - Whether the checkbox is checked
+ * @param {function} onChange - Callback function when checkbox state changes
+ * @param {string} id - Unique identifier for the checkbox input
+ * @param {string} label - Label text for the checkbox
+ * @param {boolean} disabled - Whether the checkbox is disabled
+ * @param {boolean} indeterminate - Whether the checkbox is in indeterminate state
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the checkbox
+ */
+export default function Checkbox({ checked, onChange, id, label, disabled, indeterminate, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes } from "react";
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    checked?: boolean;
+    onChange?: (...args: unknown[]) => void;
+    id?: unknown;
+    label?: unknown;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    className?: string;
+}

package/dist/design-system/components/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Checkbox";
+export { default as Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox.types";

package/dist/design-system/components/Chip/Chip.d.ts

@@ -0,0 +1,17 @@
+import "./_chip.scss";
+import type { ChipProps } from "./Chip.types";
+/**
+ * Chip component for displaying labels, tags, or filters
+ * @param {string} label - The text content of the chip
+ * @param {string} appearance - Visual style variant: 'outline' or 'primary'
+ * @param {string} shape - Shape variant: 'pill' (fully rounded) or 'rounded' (slightly rounded)
+ * @param {string} iconPlacement - Icon placement: 'both', 'left', 'right', or 'none'
+ * @param {string} icon - Icon name to display (when iconPlacement is not 'none')
+ * @param {number|string} badge - Badge count to display
+ * @param {string} badgeVariant - Badge color variant (default: 'red')
+ * @param {string} className - Additional CSS classes
+ * @param {function} onClick - Click handler function
+ * @param {boolean} disabled - Whether the chip is disabled
+ * @param {object} props - Additional props to pass to the chip element
+ */
+export default function Chip({ label, appearance, shape, iconPlacement, icon, badge, badgeVariant, className, onClick, disabled, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Chip/Chip.types.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface ChipProps extends HTMLAttributes<HTMLDivElement> {
+    label?: unknown;
+    appearance?: string;
+    shape?: string;
+    iconPlacement?: string;
+    icon?: string | ReactNode;
+    badge?: unknown;
+    badgeVariant?: string;
+    className?: string;
+    onClick?: (...args: unknown[]) => void;
+    disabled?: boolean;
+}

package/dist/design-system/components/Chip/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Chip";
+export { default as Chip } from "./Chip";
+export type { ChipProps } from "./Chip.types";

package/dist/design-system/components/Datepicker/Datepicker.d.ts

@@ -0,0 +1,17 @@
+import "./_datepicker.scss";
+import type { DatepickerProps } from "./Datepicker.types";
+/**
+ * Datepicker component - A calendar component for date selection with range support
+ * @param {Date} value - Selected date (optional)
+ * @param {Date} startDate - Start date for range selection (optional)
+ * @param {Date} endDate - End date for range selection (optional)
+ * @param {Date} month - Month to display (default: current month)
+ * @param {function} onDateSelect - Callback when a date is selected: (date: Date) => void
+ * @param {array} unavailableDates - Array of dates that are unavailable
+ * @param {object} dateData - Object mapping dates to data (travel, onAssignment)
+ * @param {string} size - Calendar size: 'desktop' or 'mobile' (default: 'desktop')
+ * @param {boolean} showWeekdays - Whether to show weekday header (default: true)
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props
+ */
+export default function Datepicker({ value, startDate, endDate, month, onDateSelect, unavailableDates, dateData, size, showWeekdays, className, ...props }: DatepickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Datepicker/Datepicker.types.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonHTMLAttributes } from "react";
+export interface DatepickerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    value?: unknown;
+    startDate?: unknown;
+    endDate?: unknown;
+    month?: unknown;
+    onDateSelect?: (...args: unknown[]) => void;
+    unavailableDates?: unknown[];
+    dateData?: Record<string, unknown>;
+    size?: string;
+    showWeekdays?: boolean;
+    className?: string;
+}

package/dist/design-system/components/Datepicker/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Datepicker";
+export { default as Datepicker } from "./Datepicker";
+export type { DatepickerProps } from "./Datepicker.types";

package/dist/design-system/components/Dialog/Dialog.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import "./_dialog.scss";
+import type { DialogProps } from "./Dialog.types";
+/**
+ * Dialog component — Purpose-built confirmation / alert overlay
+ *
+ * A focused, intent-driven dialog for confirmations, warnings, alerts,
+ * and simple prompts. Smaller and more opinionated than Modal.
+ *
+ * @param {boolean}        open              Whether the dialog is visible
+ * @param {function}       onClose           Called when the user dismisses the dialog
+ * @param {string}         intent            "info" | "success" | "warning" | "destructive"
+ * @param {string}         icon              Override the default intent icon (Phosphor icon name)
+ * @param {string}         title             Dialog heading
+ * @param {string}         description       Supporting text below the title
+ * @param {string}         confirmLabel      Primary action button label (default "Confirm")
+ * @param {string}         cancelLabel       Secondary action button label (default "Cancel")
+ * @param {function}       onConfirm         Called when the primary action is clicked
+ * @param {function}       onCancel          Called when the secondary action is clicked (defaults to onClose)
+ * @param {boolean}        showCancel        Whether to show the cancel button (default true)
+ * @param {boolean}        loading           Show loading state on the confirm button
+ * @param {boolean}        closeOnBackdrop   Close when clicking the overlay (default true)
+ * @param {boolean}        closeOnEscape     Close on Escape key (default true)
+ * @param {HTMLElement}    container         Portal target (default document.body)
+ * @param {string}         className         Additional CSS classes
+ * @param {React.ReactNode} children         Optional custom body content below description
+ * @param {object}         props             Additional props spread onto the dialog element
+ */
+export default function Dialog({ open, onClose, intent, icon, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, showCancel, loading, closeOnBackdrop, closeOnEscape, container, className, children, ...props }: DialogProps): React.ReactPortal | null;

package/dist/design-system/components/Dialog/Dialog.types.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
+    open?: boolean;
+    onClose?: (...args: unknown[]) => void;
+    intent?: string;
+    icon?: string | ReactNode;
+    title?: unknown;
+    description?: unknown;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: (...args: unknown[]) => void;
+    onCancel?: (...args: unknown[]) => void;
+    showCancel?: boolean;
+    loading?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    container?: unknown;
+    className?: string;
+    children?: ReactNode;
+}

package/dist/design-system/components/Dialog/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Dialog";
+export { default as Dialog } from "./Dialog";
+export type { DialogProps } from "./Dialog.types";

package/dist/design-system/components/Divider/Divider.d.ts

@@ -0,0 +1,13 @@
+import "./_divider.scss";
+import type { DividerProps } from "./Divider.types";
+/**
+ * Divider component for separating content sections
+ * @param {string} variant - Variant style: 'line' (default) or 'solid' (8px solid box)
+ * @param {string} label - Optional text label to display on the divider (only for 'line' variant)
+ * @param {string} icon - Optional icon name to display on the divider (only for 'line' variant)
+ * @param {string} alignment - Alignment of label/icon: 'left', 'center', or 'right' (only for 'line' variant)
+ * @param {boolean} labelWithIcon - Whether to show icon within the label text (e.g., "+ Divider Label") (only for 'line' variant)
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the divider element
+ */
+export default function Divider({ variant, label, icon, alignment, labelWithIcon, className, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Divider/Divider.types.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: string;
+    label?: unknown;
+    icon?: string | ReactNode;
+    alignment?: string;
+    labelWithIcon?: boolean;
+    className?: string;
+}

package/dist/design-system/components/Divider/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Divider";
+export { default as Divider } from "./Divider";
+export type { DividerProps } from "./Divider.types";

package/dist/design-system/components/DotStatus/DotStatus.d.ts

@@ -0,0 +1,12 @@
+import "./_dot-status.scss";
+import type { DotStatusProps } from "./DotStatus.types";
+/**
+ * Dot Status component for displaying status indicators
+ * @param {string} variant - Color variant
+ * @param {string} size - Size variant: 'small', 'medium', or 'large'
+ * @param {boolean} outline - Whether to show an outline/border around the dot
+ * @param {string} className - Additional CSS classes
+ * @param {string} 'aria-label' - Accessible label for screen readers
+ * @param {object} props - Additional props to pass to the dot element
+ */
+export default function DotStatus({ variant, size, outline, className, "aria-label": ariaLabel, ...props }: DotStatusProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/DotStatus/DotStatus.types.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "react";
+export interface DotStatusProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: string;
+    size?: string;
+    outline?: boolean;
+    className?: string;
+}

package/dist/design-system/components/DotStatus/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./DotStatus";
+export { default as DotStatus } from "./DotStatus";
+export type { DotStatusProps } from "./DotStatus.types";