cleanplate 0.3.14 → 0.3.15

package/AGENTS.md

@@ -38,6 +38,10 @@ Correct vs avoid:
 <Typography variant="h4" style={{ textAlign: "center", marginBottom: "1rem" }}>Login</Typography>
 ```
 
+## Tabs
+
+There is **no** `Tabs` component in CleanPlate. For tab bars and in-page tab switching, use **`MenuList`** (`docs/MenuList.md`): horizontal `direction`, `activeItem`, `onMenuClick`, and render panel content in the parent from the same state.
+
 ## Workflow
 
 1. Read `node_modules/cleanplate/llms.txt` for global rules and the right `docs/*.md` path.  

package/README.md

@@ -147,7 +147,7 @@ import { Icon } from "cleanplate";
 | Header         | App header with nav |
 | Icon           | Material Symbols icons |
 | MediaObject    | Media + title + description |
-| MenuList       | Navigation lists |
+| MenuList       | Navigation lists; **tabs / tab bar** (no separate Tabs component) |
 | Modal          | Dialogs, overlays |
 | PageHeader     | Page title + CTA + more menu |
 | Pagination     | Page navigation |

package/dist/components/menu-list/MenuList.d.ts

@@ -12,7 +12,11 @@ export interface MenuListItem {
     icon?: MaterialIconName;
 }
 export interface MenuListProps {
-    /** List of menu items; each has label, value, and optional icon */
+    /**
+     * List of menu items; each has label, value, and optional icon.
+     * Also used as a **tab bar** (tabs): set `direction="horizontal"`, control `activeItem`,
+     * and render panel content in the parent. CleanPlate has no separate `Tabs` component.
+     */
     items: MenuListItem[];
     /** Value of the currently active item (matches item.value) */
     activeItem?: string;

package/dist/components/menu-list/MenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../src/components/menu-list/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAKzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,aAAa,EAAE,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,mEAAmE;IACnE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,mCAAmC;IACnC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,mEAAmE;IACnE,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC5C;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuDrC,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../src/components/menu-list/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAKzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,aAAa,EAAE,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,mCAAmC;IACnC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,mEAAmE;IACnE,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC5C;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuDrC,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/docs/MenuList.md

@@ -1,6 +1,8 @@
 # MenuList Component
 
-Purpose: Renders a list of navigational items with optional icons, active state highlighting, and customizable layout. Use for nav menus, sidebars, or link lists. Supports horizontal and vertical directions, sizes (small, medium, large), variants (light, dark), and margin spacing. Items use Animated with fade-in-left on mount.
+**Also known as:** **Tabs**, **tab bar**, **tab list** — CleanPlate does **not** ship a separate `Tabs` component. Use **MenuList** for in-page tab UIs (settings sections, filters, dashboard views). Pair a horizontal MenuList with your own panel content keyed off `activeItem`.
+
+Purpose: Renders a list of navigational items with optional icons, active state highlighting, and customizable layout. Use for nav menus, sidebars, link lists, **and tab bars**. Supports horizontal and vertical directions, sizes (small, medium, large), variants (light, dark), and margin spacing. Items use Animated with fade-in-left on mount.
 
 ## Props / Inputs
 
@@ -97,8 +99,49 @@ const Nav = () => {
 <MenuList items={items} size="large" activeItem={activeItem} onMenuClick={handleClick} />
 ```
 
+### Tabs (in-page panels)
+
+Use `direction="horizontal"`, controlled `activeItem`, and `onMenuClick` as the tab control. Render the active panel below (or beside) based on the same `activeItem` state. Do **not** import or invent a `Tabs` export — it does not exist in CleanPlate.
+
+```jsx
+import { useState } from "react";
+import { MenuList, Container, Typography } from "cleanplate";
+
+const TAB_ITEMS = [
+  { label: "General", value: "general", icon: "settings" },
+  { label: "Security", value: "security", icon: "lock" },
+  { label: "Notifications", value: "notifications", icon: "notifications" },
+];
+
+const PANELS = {
+  general: <Typography variant="p">General settings content.</Typography>,
+  security: <Typography variant="p">Security settings content.</Typography>,
+  notifications: <Typography variant="p">Notification preferences.</Typography>,
+};
+
+const SettingsTabs = () => {
+  const [activeItem, setActiveItem] = useState("general");
+  return (
+    <>
+      <MenuList
+        items={TAB_ITEMS}
+        direction="horizontal"
+        variant="light"
+        activeItem={activeItem}
+        onMenuClick={(item) => setActiveItem(item.value)}
+        margin="b-2"
+      />
+      <Container padding="4">{PANELS[activeItem]}</Container>
+    </>
+  );
+};
+```
+
+For URL-driven tabs, keep `activeItem` in sync with the route (e.g. search param or path segment) in the parent; MenuList stays presentational.
+
 ## Behavior Notes
 
+- **No separate Tabs component:** Search terms like “tabs”, “tab bar”, or “TabList” map to **MenuList** + conditional panel content in the app.
 - **Items:** Each item must have `label` and `value`. `icon` is optional (Material icon name).
 - **onMenuClick:** Called with the clicked item. Use it to update `activeItem` or navigate.
 - **DOM:** A `div` wrapping a `ul` of `li` elements; each `li` contains an anchor.

package/llms.txt

@@ -30,6 +30,9 @@ When generating code that uses CleanPlate components, **use component props inst
 - **Container:** Use `padding`, `margin`, `gap`, `align`, `justify`, `display`, `width` props (spacing uses suffix rule above).
 - **Button, Alert, Badge, etc.:** Each has documented props (e.g. variant, size, margin). Prefer these over inline style. Any `margin` or `padding` prop follows the suffix rule. See `docs/<ComponentName>.md` for the full prop list.
 
+### Tabs (no separate component)
+- CleanPlate does **not** export `Tabs`. For tab bars / in-page tab UIs, use **`MenuList`** (`docs/MenuList.md`): `direction="horizontal"`, `activeItem`, `onMenuClick`, then render panel content from the same `activeItem` state in the parent. Do not add a `Tabs` import or expect a `docs/Tabs.md` file.
+
 ### Example (correct)
 ```jsx
 <Typography variant="h4" align="center" margin="b-2">Login</Typography>
@@ -193,10 +196,11 @@ All component documentation is located in the `docs/` folder. The following docu
 
 ### MenuList Component
 - File: `docs/MenuList.md`
-- Purpose: Renders a list of navigational items with optional icons, active state highlighting, and customizable layout.
+- **Aliases (LLM / search):** **Tabs**, **tab bar**, **tab list** — there is no separate Tabs component; use MenuList + parent-rendered panels (see “Tabs (in-page panels)” in `docs/MenuList.md`).
+- Purpose: Renders a list of navigational items with optional icons, active state highlighting, and customizable layout. Use for nav menus, sidebars, dropdown actions, **and horizontal tab bars** with conditional panel content below.
 - Key Features: items (label, value, icon), activeItem, direction (horizontal, vertical), sizes (small, medium, large), variants (light, dark), margin (suffix API), onMenuClick(item), Animated entrance
 - Types: MenuListProps, MenuListItem, MenuListSize, MenuListVariant, MenuListDirection, MenuListMargin
-- Related Components: Dropdown (content), Header (navigation), Container, Typography, Icon, Animated (used internally)
+- Related Components: Dropdown (content), Header (navigation), Container (tab panels + layout), Typography, Icon, Animated (used internally)
 
 ### Header Component
 - File: `docs/Header.md`
@@ -268,7 +272,7 @@ All documentation files follow a consistent format:
 | Animated | `docs/Animated.md` | Scroll-triggered entrance/exit animations |
 | FormControls | `docs/FormControls.md` | Form primitives (Input, Select, TextArea, Date, Checkbox, **numeric Stepper**, etc.) |
 | Toast | `docs/Toast.md` | Transient messages via ref.addMessage |
-| MenuList | `docs/MenuList.md` | Nav menus and link lists with icons |
+| MenuList | `docs/MenuList.md` | Nav menus, link lists, **tabs / tab bar** (no separate Tabs) |
 | Header | `docs/Header.md` | Responsive navigation header with logo and menu |
 | PageHeader | `docs/PageHeader.md` | Page title, subtitle, primary CTA, and more menu |
 | BottomSheet | `docs/BottomSheet.md` | Slide-up panel for forms and actions |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cleanplate",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "description": "CleanPlate - A Headless React UI Framework",
   "files": [
     "dist",