cleanplate 0.1.11 → 0.2.1

package/README.md

@@ -1,104 +1,237 @@
-# cleanplate
+# CleanPlate
 
-CleanPlate - Headless React UI Framework
+**A headless React UI framework** — reusable, accessible components you can style to match your brand. No opinionated theme; you bring the look and feel.
 
-### Installation
+- [Installation](#installation)
+- [Quick start](#quick-start)
+- [Available components](#available-components)
+- [Documentation](#documentation)
+- [TypeScript](#typescript)
+- [LLM / AI-friendly docs & agents](#llm--ai-friendly-docs--agents)
+- [GitHub MCP server](#github-mcp-server)
 
-```
-npm install cleanplate
-```
+---
 
-Check all versions at [NPM](https://www.npmjs.com/package/cleanplate).
+## Requirements
 
-### Usage
+- **React** 18 or higher
+- **React DOM** 18 or higher
 
-All components can be consumed by `import` using their respective names from `cleanplate` package.
+---
 
-#### Initial Setup
+## Installation
 
-Import the CSS Reset and minimal cleanplate styles at top most level or root level.
-
-```
-import "cleanplate/dist/index.css";
+```bash
+npm install cleanplate
 ```
 
-#### Button
+Or with Yarn:
 
+```bash
+yarn add cleanplate
 ```
-import { Button } from "cleanplate";
 
-<Button variant="primary" onClick={() => {}}>Save</Button>
-<Button variant="secondary" onClick={() => {}}>Save</Button>
-<Button variant="nude" onClick={() => {}}>Save</Button>
-<Button variant="special" onClick={() => {}}>Save</Button>
-```
+Published packages: [npm — cleanplate](https://www.npmjs.com/package/cleanplate)
 
-#### Typography
+---
 
-```
-import { Typography } from "cleanplate";
+## Quick start
 
-<Typography variant="h1">Hello World!</Typography>
-<Typography variant="h2">Hello World!</Typography>
-<Typography variant="h3">Hello World!</Typography>
-<Typography variant="h4">Hello World!</Typography>
-<Typography variant="h5">Hello World!</Typography>
-<Typography variant="h6">Hello World!</Typography>
-<Typography variant="p">Hello World!</Typography>
-<Typography variant="small">Hello World!</Typography>
+### 1. Add styles
 
+Import the reset and base styles **once** at your app root (e.g. `main.jsx`, `App.jsx`, or `index.js`):
+
+```jsx
+import "cleanplate/dist/index.css";
 ```
 
-#### Badge
+### 2. Import and use components
 
-```
-import { Badge } from "cleanplate";
+All components are **named exports** from `cleanplate`:
 
-<Badge label="New" />
+```jsx
+import { Button, Typography, Container } from "cleanplate";
+
+function App() {
+  return (
+    <Container padding="4">
+      <Typography variant="h1">Hello</Typography>
+      <Button variant="solid" onClick={() => alert("Saved!")}>
+        Save
+      </Button>
+    </Container>
+  );
+}
 ```
 
-#### AppShell
+### Example: Button
 
-```
-import { AppShell } from "cleanplate";
+```jsx
+import { Button } from "cleanplate";
 
-<AppShell />
+<Button variant="solid">Primary action</Button>
+<Button variant="outline">Secondary</Button>
+<Button variant="ghost">Tertiary</Button>
 ```
 
-#### Form Controls
+Variants: `solid`, `outline`, `ghost`, `icon`. Sizes: `small`, `medium`.
+
+### Example: Typography
 
+```jsx
+import { Typography } from "cleanplate";
+
+<Typography variant="h1">Heading 1</Typography>
+<Typography variant="h4">Heading 4</Typography>
+<Typography variant="p">Body paragraph.</Typography>
 ```
-import { FormControl } from "cleanplate";
 
-<FormControl.Input
-    name="email"
-    onChange={(e) => handleChange(e)}
-    value={values.email}
+Variants: `h1`–`h6`, `p`, `span`, `small`.
+
+### Example: Form controls
+
+```jsx
+import { FormControls } from "cleanplate";
+
+<FormControls.Input
+  label="Email"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
 />
 
-<FormControl.TextArea
-    name="bio"
-    onChange={(e) => handleChange(e)}
-    value={values.bio}
+<FormControls.Select
+  label="Country"
+  options={[
+    { label: "United States", value: "us" },
+    { label: "Canada", value: "ca" },
+  ]}
+  value={country}
+  onChange={(e) => setCountry(e.target.value)}
 />
 ```
 
-#### Icon
+Other form primitives: `TextArea`, `Checkbox`, `Radio`, `Date`, `File`, `Toggle`, etc.
 
-```
+### Example: Icon
+
+Uses [Google Material Symbols](https://fonts.google.com/icons). Include the font in your app; then:
+
+```jsx
 import { Icon } from "cleanplate";
 
-<Icon name="settings" size="small" color="balck">
+<Icon name="settings" size="small" color="black" />
+<Icon name="check_circle" size="medium" />
+```
+
+---
+
+## Available components
+
+| Component      | Use case |
+|----------------|----------|
+| Accordion      | Collapsible panels, FAQ sections |
+| Alert          | Inline feedback (success, error, warning, info) |
+| Animated       | Scroll-triggered animations |
+| AppShell       | Full-page layout with Header, Footer, sidebar |
+| Avatar         | User initials, image, or icon |
+| Badge          | Status labels, tags |
+| BottomSheet    | Slide-up panel |
+| BreadCrumb     | Navigation trail |
+| Button         | Actions and buttons |
+| ConfirmDialog  | Confirmation modals |
+| Container      | Layout, spacing, flex |
+| Dropdown       | Menus, floating panels |
+| Footer         | App footer |
+| FormControls   | Input, Select, TextArea, Checkbox, etc. |
+| Header         | App header with nav |
+| Icon           | Material Symbols icons |
+| MediaObject    | Media + title + description |
+| MenuList       | Navigation lists |
+| Modal          | Dialogs, overlays |
+| PageHeader     | Page title + CTA + more menu |
+| Pagination     | Page navigation |
+| Pills          | Tags/chips |
+| ProgressBar    | Progress indicator |
+| Spinner        | Loading indicator |
+| Stepper        | Multi-step flows |
+| Table          | Tabular data |
+| Toast          | Transient messages |
+| Typography     | Headings and text |
+
+Import any of them from `cleanplate`:
+
+```jsx
+import {
+  Button,
+  Typography,
+  Container,
+  Header,
+  PageHeader,
+  BreadCrumb,
+  Table,
+  FormControls,
+  // ... etc.
+} from "cleanplate";
+```
+
+---
+
+## Documentation
+
+- **Storybook** — Interactive playground and docs for every component:  
+  [https://cleanplate.sivadass.in](https://cleanplate.sivadass.in)
+- **GitHub** — Source and issue tracker:  
+  [github.com/sivadass/cleanplate](https://github.com/sivadass/cleanplate)
+
+---
+
+## TypeScript
+
+CleanPlate is written in TypeScript and ships type definitions. Types are included in the package (`dist/index.d.ts`). No extra `@types` package needed.
+
+```tsx
+import { Button } from "cleanplate";
+import type { ButtonProps } from "cleanplate";
 ```
 
-View all the available icon names from [Google Material Icons](https://fonts.google.com/icons).
+---
 
-#### Modal
+## LLM / AI-friendly docs & agents
 
-```
-import { Modal } from "cleanplate";
-```
+Documentation for **coding agents** and LLMs ships with the npm package alongside the compiled library.
+
+### After `npm install cleanplate`
+
+- **Index:** `node_modules/cleanplate/llms.txt` — component list, conventions, and links to each doc file.
+- **Per-component docs:** `node_modules/cleanplate/docs/<ComponentName>.md` — props, types, examples, behavior.
+
+**Agent workflow:** read `node_modules/cleanplate/llms.txt` first, then open the specific files under `node_modules/cleanplate/docs/` (not imports alone).
+
+### Version-pinned URLs (no download step)
+
+CDN mirrors of the published tarball work well for prompts and CI; pin the semver you depend on:
+
+- **Latest:** [unpkg — `llms.txt`](https://unpkg.com/cleanplate@latest/llms.txt) · [jsDelivr — `llms.txt`](https://cdn.jsdelivr.net/npm/cleanplate@latest/llms.txt)
+- **Pinned example:** `https://unpkg.com/cleanplate@0.2.0/llms.txt` and `https://unpkg.com/cleanplate@0.2.0/docs/Button.md` (substitute your installed version)
+
+Human-facing Storybook: [cleanplate.sivadass.in](https://cleanplate.sivadass.in).
+
+---
+
+## GitHub MCP server
+
+This repository is **compatible with the [GitHub MCP server](https://github.com/github/github-mcp-server)** (Model Context Protocol). The GitHub MCP server lets AI assistants (e.g. in Cursor or VS Code) access GitHub—repos, issues, pull requests, and workflows—so you can work with this codebase using natural language.
+
+- **Compatibility:** CleanPlate is a standard GitHub repo with no special constraints. The GitHub MCP server can read and interact with it once connected.
+- **Setup:** Add the GitHub MCP server in your editor:
+  - **Cursor:** Settings → Tools & MCP → add the GitHub MCP server (or add it to `~/.cursor/mcp.json`). Use [Cursor’s MCP docs](https://cursor.com/docs/context/mcp) for the exact config.
+  - **VS Code (1.101+):** Use the MCP servers UI or add the server to `.vscode/mcp.json`. See [GitHub: Using the GitHub MCP Server](https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/use-the-github-mcp-server).
+- **Auth:** You’ll need to authenticate with GitHub (OAuth or a Personal Access Token with the scopes the MCP server needs).
+
+No project-level MCP config is required; configure the GitHub MCP server in your editor or global config and point it at this repo.
+
+---
 
-### Documentation & Demo
+## License
 
-Storybook playground is available for all components at [https://cleanplate.sivadass.in](https://cleanplate.sivadass.in).
+MIT © Sivadass N

package/dist/components/accordion/Accordion.d.ts

@@ -1,15 +1,26 @@
-export default Accordion;
-declare function Accordion({ size, variant, margin, className, }: {
-    size?: string;
-    variant?: string;
-    margin?: string;
+import React from "react";
+import { SPACING_OPTIONS } from "../../constants/common";
+export interface AccordionItem {
+    title: string;
+    content: React.ReactNode;
+}
+export type SpacingOption = (typeof SPACING_OPTIONS)[number];
+export type AccordionIconVariant = "expand" | "plus";
+export type AccordionVariant = "grouped" | "spaced";
+export type AccordionTitleTag = "span" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type AccordionMargin = string | SpacingOption[];
+export type AccordionPadding = string | SpacingOption[];
+export interface AccordionProps {
+    items: AccordionItem[];
+    allowMultiple?: boolean;
+    defaultExpandedIndex?: number | number[];
+    iconVariant?: AccordionIconVariant;
+    variant?: AccordionVariant;
+    titleTag?: AccordionTitleTag;
+    margin?: AccordionMargin;
+    padding?: AccordionPadding;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace Accordion {
-    namespace propTypes {
-        let size: any;
-        let variant: any;
-        let margin: any;
-    }
 }
+declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/components/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.jsx"],"names":[],"mappings":";AAUA;;;;;4CAoBC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAMzD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAC7D,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1E,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,aAAa,EAAE,CAAC;AACvD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,aAAa,EAAE,CAAC;AAExD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiHvC,CAAC;AAIF,eAAe,SAAS,CAAC"}

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

@@ -1,3 +1,4 @@
+import Accordion from "./Accordion";
 export default Accordion;
-import Accordion from "./Accordion.jsx";
+export type { AccordionProps, AccordionItem, AccordionIconVariant, AccordionVariant, AccordionTitleTag, AccordionMargin, AccordionPadding } from "./Accordion";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.js"],"names":[],"mappings":";sBAAsB,iBAAiB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,eAAe,SAAS,CAAC;AACzB,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC"}

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

@@ -1,5 +1,37 @@
+import React from "react";
+import type { MenuListItem } from "../menu-list";
+import type { MenuListSize, MenuListVariant } from "../menu-list";
+import type { HeaderProps } from "../header";
+import type { FooterProps } from "../footer";
+/** Sidebar configuration: MenuList as vertical nav. Direction is always "vertical". */
+export interface AppShellSidebarConfig {
+    /** Menu items for the sidebar navigation */
+    items: MenuListItem[];
+    /** Value of the currently active item */
+    activeItem?: string;
+    /** Called when a menu item is clicked */
+    onMenuClick?: (item: MenuListItem) => void;
+    /** Size of menu items */
+    size?: MenuListSize;
+    /** Visual variant for the sidebar */
+    variant?: MenuListVariant;
+}
+export interface AppShellProps {
+    /** Main content (page area) */
+    children: React.ReactNode;
+    /** Top bar: pass Header props or custom ReactNode. Omit to hide header. */
+    header?: React.ReactNode | HeaderProps;
+    /** Bottom bar: pass Footer props or custom ReactNode. Omit to hide footer. */
+    footer?: React.ReactNode | FooterProps;
+    /** Sidebar config (MenuList as vertical nav on the left). Omit to hide sidebar. */
+    sidebar?: AppShellSidebarConfig;
+    /** Width of the sidebar (e.g. "240px", "16rem") */
+    sidebarWidth?: string;
+    /** Additional class name for the root element */
+    className?: string;
+    /** Additional class name for the main content wrapper */
+    contentClassName?: string;
+}
+declare const AppShell: React.FC<AppShellProps>;
 export default AppShell;
-declare function AppShell({ children }: {
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AppShell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/app-shell/AppShell.jsx"],"names":[],"mappings":";AAEA;;4CAEC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/app-shell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,uFAAuF;AACvF,MAAM,WAAW,qBAAqB;IACpC,4CAA4C;IAC5C,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,yBAAyB;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,qCAAqC;IACrC,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,+BAA+B;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2EAA2E;IAC3E,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC;IACvC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC;IACvC,mFAAmF;IACnF,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAQD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuDrC,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/components/app-shell/index.d.ts

@@ -1,3 +1,4 @@
+import AppShell from "./AppShell";
 export default AppShell;
-import AppShell from "./AppShell.jsx";
+export type { AppShellProps, AppShellSidebarConfig } from "./AppShell";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/app-shell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app-shell/index.js"],"names":[],"mappings":";qBAAqB,gBAAgB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app-shell/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,eAAe,QAAQ,CAAC;AACxB,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/bottom-sheet/BottomSheet.d.ts

@@ -1,18 +1,19 @@
-export default BottomSheet;
-declare function BottomSheet({ margin, className, children, isOpen, onClose }: {
-    margin: any;
-    className: any;
-    children: any;
-    isOpen: any;
-    onClose: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace BottomSheet {
-    namespace propTypes {
-        let isOpen: any;
-        let className: any;
-        let onClose: any;
-        let margin: any;
-        let children: any;
-    }
+import React from "react";
+import { SPACING_OPTIONS } from "../../constants/common";
+export type SpacingOption = (typeof SPACING_OPTIONS)[number];
+export type BottomSheetMargin = string | SpacingOption[];
+export interface BottomSheetProps {
+    /** Whether the bottom sheet is open */
+    isOpen: boolean;
+    /** Called when the sheet should close (e.g. after drag-to-close) */
+    onClose?: () => void;
+    /** Spacing suffix(s) for outer margin; component adds m- prefix */
+    margin?: BottomSheetMargin;
+    /** Additional class names for the sheet panel */
+    className?: string;
+    /** Content rendered inside the sheet */
+    children?: React.ReactNode;
 }
+declare const BottomSheet: React.FC<BottomSheetProps>;
+export default BottomSheet;
 //# sourceMappingURL=BottomSheet.d.ts.map

package/dist/components/bottom-sheet/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/BottomSheet.jsx"],"names":[],"mappings":";AAeA;;;;;;4CA6IC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAKzD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,aAAa,EAAE,CAAC;AAEzD,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkJ3C,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/components/bottom-sheet/index.d.ts

@@ -1,3 +1,4 @@
+import BottomSheet from "./BottomSheet";
 export default BottomSheet;
-import BottomSheet from "./BottomSheet.jsx";
+export type { BottomSheetProps, BottomSheetMargin } from "./BottomSheet";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/bottom-sheet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/index.js"],"names":[],"mappings":";wBAAwB,mBAAmB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,eAAe,WAAW,CAAC;AAC3B,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/breadcrumb/BreadCrumb.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { SPACING_OPTIONS } from "../../constants/common";
+export type SpacingOption = (typeof SPACING_OPTIONS)[number];
+export type BreadCrumbMargin = string | SpacingOption[];
+export type BreadCrumbSeparator = "slash" | "chevron";
+export interface BreadCrumbItem {
+    /** Display label for the crumb */
+    label: string;
+    /** URL for the crumb. Omit for the current page (last item). */
+    href?: string;
+}
+export interface BreadCrumbProps {
+    /** List of breadcrumb items. Last item is treated as current page when it has no href. */
+    items: BreadCrumbItem[];
+    /** Visual separator between items */
+    separator?: BreadCrumbSeparator;
+    /** Accessible label for the navigation landmark (default: "Breadcrumb") */
+    ariaLabel?: string;
+    /** Spacing suffix for outer margin (e.g. "0" → m-0). */
+    margin?: BreadCrumbMargin;
+    /** Additional class name for the root nav element */
+    className?: string;
+}
+declare const BreadCrumb: React.FC<BreadCrumbProps>;
+export default BreadCrumb;
+//# sourceMappingURL=BreadCrumb.d.ts.map

package/dist/components/breadcrumb/BreadCrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadCrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/BreadCrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAIzD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAC7D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,aAAa,EAAE,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,0FAA0F;IAC1F,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,qCAAqC;IACrC,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsEzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -1,3 +1,4 @@
-export default AppShell;
-import AppShell from "./AppShell.jsx";
+import BreadCrumb from "./BreadCrumb";
+export default BreadCrumb;
+export type { BreadCrumbProps, BreadCrumbItem, BreadCrumbSeparator, BreadCrumbMargin, SpacingOption, } from "./BreadCrumb";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/breadcrumb/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.js"],"names":[],"mappings":";qBAAqB,gBAAgB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,eAAe,UAAU,CAAC;AAC1B,YAAY,EACV,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,GACd,MAAM,cAAc,CAAC"}

package/dist/components/footer/Footer.d.ts

@@ -1,22 +1,27 @@
-export default Footer;
-declare function Footer({ margin, size, variant, brandName, poweredByLabel, poweredByLink, children, className, }: {
-    margin?: string;
-    size?: string;
-    variant?: string;
+import React from "react";
+import { SPACING_OPTIONS } from "../../constants/common";
+export type SpacingOption = (typeof SPACING_OPTIONS)[number];
+export type FooterSize = "small" | "medium" | "large";
+export type FooterVariant = "light" | "dark";
+export type FooterMargin = string | SpacingOption[];
+export interface FooterProps {
+    /** Spacing suffix(s) for outer margin; component adds m- prefix */
+    margin?: FooterMargin;
+    /** Size of the footer */
+    size?: FooterSize;
+    /** Visual variant */
+    variant?: FooterVariant;
+    /** Brand name shown in copyright (e.g. "Acme Inc") */
     brandName?: string;
+    /** Label for the powered-by link (e.g. "Powered by X") */
     poweredByLabel?: string;
+    /** URL for the powered-by link; shown when poweredByLabel is also set */
     poweredByLink?: string;
-    children: any;
+    /** Custom content rendered above the copyright line */
+    children?: React.ReactNode;
+    /** Additional class names for the root element */
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace Footer {
-    namespace propTypes {
-        let brandName: any;
-        let poweredByLabel: any;
-        let poweredByLink: any;
-        let size: any;
-        let variant: any;
-        let margin: any;
-    }
 }
+declare const Footer: React.FC<FooterProps>;
+export default Footer;
 //# sourceMappingURL=Footer.d.ts.map

package/dist/components/footer/Footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/footer/Footer.jsx"],"names":[],"mappings":";AASA;;;;;;;;;4CAwCC"}
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAKzD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,aAAa,EAAE,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0CjC,CAAC;AAIF,eAAe,MAAM,CAAC"}

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

@@ -1,3 +1,4 @@
+import Footer from "./Footer";
 export default Footer;
-import Footer from "./Footer.jsx";
+export type { FooterProps, FooterSize, FooterVariant, FooterMargin } from "./Footer";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/footer/index.js"],"names":[],"mappings":";mBAAmB,cAAc"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,eAAe,MAAM,CAAC;AACtB,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC"}

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

@@ -1,30 +1,34 @@
-export default Header;
-declare function Header({ logoUrl, activeMenuItem, onMenuItemClick, className, headerLeft, headerRight, headerCenter, size, variant, margin, menuItems, }: {
-    logoUrl: any;
-    activeMenuItem: any;
-    onMenuItemClick: any;
-    className: any;
-    headerLeft: any;
-    headerRight: any;
-    headerCenter: any;
-    size: any;
-    variant: any;
-    margin: any;
-    menuItems: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace Header {
-    namespace propTypes {
-        let logoUrl: any;
-        let activeMenuItem: any;
-        let onMenuItemClick: any;
-        let className: any;
-        let headerLeft: any;
-        let headerRight: any;
-        let headerCenter: any;
-        let menuItems: any;
-        let size: any;
-        let variant: any;
-        let margin: any;
-    }
+import React from "react";
+import { SPACING_OPTIONS } from "../../constants/common";
+import type { MenuListItem } from "../menu-list";
+export type SpacingOption = (typeof SPACING_OPTIONS)[number];
+export type HeaderSize = "small" | "medium" | "large";
+export type HeaderVariant = "light" | "dark";
+export type HeaderMargin = string | SpacingOption[];
+export interface HeaderProps {
+    /** URL for the logo image (shown when headerLeft is not provided) */
+    logoUrl?: string;
+    /** Value of the currently active menu item */
+    activeMenuItem?: string;
+    /** Called when a menu item is clicked */
+    onMenuItemClick?: (item: MenuListItem) => void;
+    /** Additional class names for the root element */
+    className?: string;
+    /** Custom content for the left area (replaces logo when provided) */
+    headerLeft?: React.ReactNode;
+    /** Custom content for the right area */
+    headerRight?: React.ReactNode;
+    /** Custom content for the center area (replaces MenuList when provided) */
+    headerCenter?: React.ReactNode;
+    /** Menu items for the center/vertical menu */
+    menuItems: MenuListItem[];
+    /** Size of the header */
+    size?: HeaderSize;
+    /** Visual variant */
+    variant?: HeaderVariant;
+    /** Spacing suffix(s) for outer margin; component adds m- prefix */
+    margin?: HeaderMargin;
 }
+declare const Header: React.FC<HeaderProps>;
+export default Header;
 //# sourceMappingURL=Header.d.ts.map