cleanplate 0.1.10 → 0.2.0

package/llms.txt

@@ -1,171 +0,0 @@
-# CleanPlate Component Documentation Index
-
-This file contains an index of all available component documentation for the CleanPlate UI framework.
-
-## Project Overview
-
-CleanPlate is a Headless React UI Framework providing reusable, accessible, and customizable components for building modern web applications.
-
-## Component Documentation
-
-All component documentation is located in the `docs/` folder. The following documentation files are available:
-
-### Button Component
-- File: `docs/Button.md`
-- Purpose: A highly customizable and interactive UI element designed to handle user actions with various styles, sizes, and variants. Supports loading states, disabled states, and click events.
-- Key Features: Variants (solid, outline, ghost, icon), sizes (small, medium), loading states, disabled states, fluid layout, margin spacing
-- Types: ButtonProps, ButtonSize, ButtonVariant, ButtonMargin, SpacingOption
-
-### Typography Component
-- File: `docs/Typography.md`
-- Purpose: Provides a consistent set of text styles for headings, paragraphs, and inline elements, ensuring clear hierarchy, readability, and brand-aligned communication across the interface.
-- Key Features: Variants (h1-h6, p, span, small), text alignment, word breaking, bold text, margin spacing
-- Types: TypographyProps, TypographyVariant, TypographyAlign, TypographyWordBreak, TypographyMargin, SpacingOption
-
-### Icon Component
-- File: `docs/Icon.md`
-- Purpose: A versatile and reusable element for displaying scalable vector icons, supporting various sizes, colors, and custom classes. Uses Google Material Symbols.
-- Key Features: Material Symbols integration, sizes (small, medium, large), colors (black, white, gray, blue, green, red, yellow, orange)
-- Types: IconProps, IconSize, IconColor
-- Note: Requires Material Symbols font to be included in the project
-
-### MediaObject Component
-- File: `docs/MediaObject.md`
-- Purpose: A flexible layout pattern that combines media (icon, image, or avatar) with content (title and description). Perfect for displaying user profiles, product cards, notifications, and any content that needs a media element alongside text.
-- Key Features: Media types (icon, image, avatar), title and description, margin and padding spacing, clickable support
-- Types: MediaObjectProps, MediaObjectMargin, MediaObjectPadding, SpacingOption
-- Related Components: Uses Avatar and Typography internally
-
-### Avatar Component
-- File: `docs/Avatar.md`
-- Purpose: Displays user initials, an image, or a Material icon in a consistent circle. Use for user identity in headers, lists, MediaObject, or anywhere you need a compact avatar.
-- Key Features: Display modes (initials, image, icon), sizes (small, medium), margin spacing (suffix API: e.g. "0" → m-0), optional onClick
-- Types: AvatarProps, AvatarSize, AvatarMargin, SpacingOption; icon prop uses MaterialIconName from Icon
-- Related Components: Used by MediaObject; often used with Container, Icon
-
-### Container Component
-- File: `docs/Container.md`
-- Purpose: A layout wrapper that controls display type, width, spacing (margin, padding, gap), and flex alignment. Use it to structure content, create flex layouts, and apply consistent spacing.
-- Key Features: Display (block, flex, inline-block), width variants, margin/padding/gap spacing (suffix API: e.g. "4" → p-4, "0" → m-0), flex align/justify, responsive width at 600px
-- Types: ContainerProps, ContainerDisplay, ContainerWidth, ContainerJustify, ContainerAlign, ContainerSpacing, SpacingOption
-
-### Dropdown Component
-- File: `docs/Dropdown.md`
-- Purpose: Floating panel that shows content relative to a trigger. Use for menus, option lists, or any content that opens on click.
-- Key Features: 12 placements, flip/shift to stay in viewport, three trigger modes (trigger element, renderTrigger, triggerLabel), close on outside click or Escape
-- Types: DropdownProps, DropdownPlacement, DropdownTriggerProps, DropdownRenderTriggerParams
-- Related Components: Button (trigger), MenuList (content)
-
-### Alert Component
-- File: `docs/Alert.md`
-- Purpose: Displays a short message with optional variant icon and dismiss button. Use for inline feedback (success, error, warning, info) or neutral notices.
-- Key Features: Variants (default, info, warning, error, success), sizes (small, medium, large), dismissible with onDismiss, margin spacing (suffix API), unmounts on dismiss
-- Types: AlertProps, AlertSize, AlertVariant, AlertMargin, SpacingOption
-- Related Components: Typography, Container, Button, Icon (used internally)
-
-### Spinner Component
-- File: `docs/Spinner.md`
-- Purpose: Loading indicator that shows a rotating Material icon. Use for progress or activity states.
-- Key Features: Six icon options (progress_activity, autorenew, sync, refresh, cached, loop), sizes (small, medium, large), variants (light, dark), margin spacing (suffix API)
-- Types: SpinnerProps, SpinnerSize, SpinnerVariant, SpinnerIcon, SpinnerMargin, SpacingOption
-- Related Components: Container, Icon (used internally)
-
-### Stepper Component
-- File: `docs/Stepper.md`
-- Purpose: Displays a sequence of steps for wizards or multi-step flows. Each step has label, key, and optional active/completed state; steps can be clickable.
-- Key Features: Variants (horizontal, vertical), config-driven steps (StepperStepConfig), optional onClick(step), margin spacing (suffix API), completed state shows done icon
-- Types: StepperProps, StepperStepConfig, StepperVariant, StepperMargin, SpacingOption
-- Related Components: Container, Typography, Icon (used internally)
-
-### ConfirmDialog Component
-- File: `docs/ConfirmDialog.md`
-- Purpose: Modal dialog for confirmation actions (delete, discard, proceed). Title, description, primary/secondary buttons, optional close button; overlay and Escape to close.
-- Key Features: Variants (default, destructive, warning), sizes (small, medium, large), showCloseButton, closeOnOverlayClick, closeOnEscape, focus and body scroll management
-- Types: ConfirmDialogProps, ConfirmDialogSize, ConfirmDialogVariant
-- Related Components: Button, Typography, Icon (used internally)
-
-### Modal Component
-- File: `docs/Modal.md`
-- Purpose: Full-featured modal overlay for forms, long content, or custom dialogs. Optional title, close button, footer primary/secondary buttons; overlay and Escape to close.
-- Key Features: Sizes (small, medium, large, fullscreen), showCloseButton, closeOnOverlayClick, closeOnEscape, margin spacing, contentClassName/overlayClassName, focus and body scroll management
-- Types: ModalProps, ModalSize, ModalMargin, SpacingOption
-- Related Components: ConfirmDialog (simpler confirm-only), Button, Typography, Icon (used internally)
-
-### Pagination Component
-- File: `docs/Pagination.md`
-- Purpose: Navigate large content sets by pages. Shows total count, prev/next and page-number buttons with ellipsis, and optional rows-per-page select. Controlled via currentPage and rowsPerPage.
-- Key Features: Variants (default, minimal), rowsPerPageOptions, onPageChange(page, rowsPerPage), onRowsPerPageChange(rowsPerPage), margin spacing (suffix API)
-- Types: PaginationProps, PaginationVariant, PaginationMargin, PaginationRowsPerPageOption, SpacingOption
-- Related Components: Table (often used with Pagination), Container, Button, FormControls.Select, Typography, Icon (used internally)
-
-### Table Component
-- File: `docs/Table.md`
-- Purpose: Displays structured data in a table with configurable columns, optional built-in pagination, and responsive mobile view (MediaObject cards when viewport < 768px and mobileColumns set).
-- Key Features: columns (id, title, textAlign, widthPercentage, customRender), data (TableRow[]), variants (default, compact), mobileColumns, onRowClick, pagination props (totalItems, currentPage, onPageChange, etc.), hidePagination, margin (suffix API)
-- Types: TableProps, TableColumn, TableRow, TableVariant, TableMargin, TableColumnTextAlign, TableMobileColumns, SpacingOption
-- Related Components: Pagination (built-in), MediaObject (mobile view), Typography, Container, Badge (often in customRender)
-
-### Badge Component
-- File: `docs/Badge.md`
-- Purpose: Short label with colored background for status, tags, or counts. Inline-block, five variants.
-- Key Features: label, variant (default, info, success, warning, error), className
-- Types: BadgeProps, BadgeVariant
-- Related Components: Table (often in customRender for status columns), Container (layout for multiple badges)
-
-### Pills Component
-- File: `docs/Pills.md`
-- Purpose: Single tag/chip with modes: read-only (label only), edit (input + submit), remove (label + close). For tags, filters, editable chips.
-- Key Features: mode (read-only, edit, remove), label, placeholder, onSubmit(value), onRemove(), isLoading, isDisabled, margin (suffix API)
-- Types: PillsProps, PillsMode, PillsMargin, SpacingOption
-- Related Components: Container (layout), FormControls.Input, Button, Icon, Spinner, Typography (used internally)
-
-## Documentation Format
-
-All documentation files follow a consistent format:
-1. Component name and purpose
-2. Props/Inputs table with types, defaults, and descriptions
-3. TypeScript type definitions
-4. Usage examples covering common use cases
-5. Behavior notes explaining important details
-6. Related components and links
-
-## Quick Reference
-
-| Component | File | Primary Use Case |
-|-----------|------|------------------|
-| Button | `docs/Button.md` | User actions and interactions |
-| Typography | `docs/Typography.md` | Text content and headings |
-| Icon | `docs/Icon.md` | Visual icons and symbols |
-| MediaObject | `docs/MediaObject.md` | Media + content layouts |
-| Avatar | `docs/Avatar.md` | User identity (initials, image, or icon) |
-| Container | `docs/Container.md` | Layout, spacing, and flex structure |
-| Dropdown | `docs/Dropdown.md` | Menus and floating panels |
-| Alert | `docs/Alert.md` | Inline feedback and notices |
-| Spinner | `docs/Spinner.md` | Loading and activity indicator |
-| Stepper | `docs/Stepper.md` | Multi-step flows and wizards |
-| ConfirmDialog | `docs/ConfirmDialog.md` | Confirmation modals and destructive actions |
-| Modal | `docs/Modal.md` | Forms, long content, and custom dialogs |
-| Pagination | `docs/Pagination.md` | Page navigation for tables and lists |
-| Table | `docs/Table.md` | Structured tabular data with optional pagination and mobile view |
-| Badge | `docs/Badge.md` | Status labels, tags, and counts with colored variants |
-| Pills | `docs/Pills.md` | Tags/chips with read-only, edit, and remove modes |
-
-## Additional Resources
-
-- Component source code: `src/components/`
-- Storybook documentation: Available at the project's Storybook instance
-- Type definitions: `src/types/` and component-specific type exports
-- Storybook static build: `storybook-static/`
-- Component stories: `src/stories/`
-
-## Installation
-
-```bash
-npm install cleanplate
-```
-
-## Usage
-
-```jsx
-import { Button, Typography, Icon, MediaObject, Avatar, Container, Dropdown, Alert, Spinner, Stepper, ConfirmDialog, Modal, Pagination, Table, Badge, Pills } from "cleanplate";
-```

package/scripts/generate-icons.js

@@ -1,175 +0,0 @@
-// scripts/generate-icons.js
-const fs = require('fs');
-const path = require('path');
-const https = require('https');
-
-// Material Symbols Outlined variable font codepoints (same format: "icon_name codepoint" per line)
-const CODEPOINTS_URL =
-  'https://raw.githubusercontent.com/google/material-design-icons/master/variablefont/MaterialSymbolsOutlined%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints';
-
-async function fetchMaterialIcons() {
-  return new Promise((resolve, reject) => {
-    https.get(CODEPOINTS_URL, (res) => {
-      let data = '';
-      res.on('data', (chunk) => data += chunk);
-      res.on('end', () => resolve(data));
-      res.on('error', reject);
-    });
-  });
-}
-
-function parseCodepoints(data) {
-  // Same format as Material Icons: each line is "icon_name codepoint" (space-separated)
-  return data
-    .split('\n')
-    .filter((line) => line.trim())
-    .map((line) => line.split(' ')[0])
-    .sort();
-}
-
-function categorizIcons(icons) {
-  // Basic categorization - you can enhance this
-  const categories = {
-    navigation: [],
-    action: [],
-    communication: [],
-    content: [],
-    device: [],
-    editor: [],
-    file: [],
-    hardware: [],
-    image: [],
-    maps: [],
-    notification: [],
-    social: [],
-    toggle: [],
-    av: [],
-    alert: [],
-    other: []
-  };
-
-  icons.forEach(icon => {
-    // Simple prefix-based categorization
-    if (icon.startsWith('arrow_') || icon.startsWith('navigation_') || ['home', 'menu', 'close'].includes(icon)) {
-      categories.navigation.push(icon);
-    } else if (icon.startsWith('add') || icon.startsWith('delete') || icon.startsWith('edit') || ['search', 'settings', 'refresh'].includes(icon)) {
-      categories.action.push(icon);
-    } else if (icon.startsWith('email') || icon.startsWith('chat') || icon.startsWith('message')) {
-      categories.communication.push(icon);
-    } else if (icon.startsWith('content_')) {
-      categories.content.push(icon);
-    } else if (icon.startsWith('phone') || icon.startsWith('device')) {
-      categories.device.push(icon);
-    } else if (icon.startsWith('format_')) {
-      categories.editor.push(icon);
-    } else if (icon.startsWith('folder') || icon.startsWith('insert_')) {
-      categories.file.push(icon);
-    } else if (icon.startsWith('computer') || icon.startsWith('keyboard')) {
-      categories.hardware.push(icon);
-    } else if (icon.startsWith('image') || icon.startsWith('photo')) {
-      categories.image.push(icon);
-    } else if (icon.startsWith('map') || icon.startsWith('place')) {
-      categories.maps.push(icon);
-    } else if (icon.startsWith('notification')) {
-      categories.notification.push(icon);
-    } else if (icon.startsWith('person') || icon.startsWith('group') || icon.startsWith('share')) {
-      categories.social.push(icon);
-    } else if (icon.startsWith('toggle_') || icon.startsWith('check')) {
-      categories.toggle.push(icon);
-    } else if (icon.startsWith('play_') || icon.startsWith('pause') || icon.startsWith('volume')) {
-      categories.av.push(icon);
-    } else if (icon.startsWith('error') || icon.startsWith('warning')) {
-      categories.alert.push(icon);
-    } else {
-      categories.other.push(icon);
-    }
-  });
-
-  return categories;
-}
-
-function generateTypeScript(icons, categories) {
-  const template = `// This file is auto-generated. Do not edit manually.
-// Generated on: ${new Date().toISOString()}
-// Total icons: ${icons.length}
-
-/**
- * All available Material Symbol names (Material Symbols Outlined variable font).
- * Source: https://fonts.google.com/icons
- */
-export const MATERIAL_ICON_NAMES = [
-${icons.map(icon => `  '${icon}'`).join(',\n')}
-] as const;
-
-export type MaterialIconName = typeof MATERIAL_ICON_NAMES[number];
-
-/**
- * Material Symbols organized by category for easier discovery.
- * Use this when you need to find icons for specific purposes.
- */
-export const ICON_CATEGORIES = {
-${Object.entries(categories)
-  .filter(([_, icons]) => icons.length > 0)
-  .map(([category, icons]) => 
-    `  ${category}: [\n${icons.map(icon => `    '${icon}'`).join(',\n')}\n  ] as const`
-  )
-  .join(',\n')}
-} as const;
-
-/**
- * Helper function to check if a string is a valid Material Symbol name.
- */
-export function isMaterialIconName(name: string): name is MaterialIconName {
-  return MATERIAL_ICON_NAMES.includes(name as MaterialIconName);
-}
-
-/**
- * Get all icons in a specific category.
- */
-export function getIconsByCategory(category: keyof typeof ICON_CATEGORIES): readonly string[] {
-  return ICON_CATEGORIES[category];
-}
-`;
-
-  return template;
-}
-
-async function main() {
-  try {
-    console.log('Fetching Material Symbols Outlined codepoints...');
-    const data = await fetchMaterialIcons();
-    
-    console.log('Parsing icon names...');
-    const icons = parseCodepoints(data);
-    
-    console.log(`Found ${icons.length} icons`);
-    
-    console.log('Categorizing icons...');
-    const categories = categorizIcons(icons);
-    
-    console.log('Generating TypeScript file...');
-    const tsContent = generateTypeScript(icons, categories);
-    
-    const outputPath = path.join(__dirname, '../src/components/icon/material-icon-names.ts');
-    const outputDir = path.dirname(outputPath);
-    
-    if (!fs.existsSync(outputDir)) {
-      fs.mkdirSync(outputDir, { recursive: true });
-    }
-    
-    fs.writeFileSync(outputPath, tsContent);
-    
-    console.log(`✅ Successfully generated ${outputPath}`);
-    console.log('\nCategory summary:');
-    Object.entries(categories)
-      .filter(([_, icons]) => icons.length > 0)
-      .forEach(([category, icons]) => {
-        console.log(`  ${category}: ${icons.length} icons`);
-      });
-  } catch (error) {
-    console.error('Error generating icons:', error);
-    process.exit(1);
-  }
-}
-
-main();

package/templates/README.md

@@ -1,10 +0,0 @@
-# Templates
-
-Reference templates for documentation and Storybook. Use these when adding or updating component docs.
-
-| File | Purpose |
-|------|---------|
-| `storybook-docs-template.md` | How to write Storybook docs (stories + docs.mdx): folder structure, meta, argTypes, args, Default/named stories, spacing suffix, docs.mdx sections, checklist. |
-| `docs-template-sample.md` | Sample structure for LLM/component docs in `docs/<Component>.md`: Purpose, Props table, Types, Usage examples, Behavior notes, Related components. |
-
-See `llms.txt` for the full documentation index.

package/templates/docs-template-sample.md

@@ -1,67 +0,0 @@
-# Avatar Component
-
-Purpose: Display a user avatar as an image, icon, or initials.
-
-## Props / Inputs
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| name | string | no | "" | Used for initials, title text, and background color seed. |
-| image | string | no | "" | Image URL to render when `icon` is not set. |
-| icon | string | no | "" | Icon name to render when `image` is not set. |
-| size | "small" \| "medium" | no | "medium" | Size variant. |
-| margin | string \| string[] | no | "m-0" | Spacing utility token(s), such as `m-0` or `m-b-2`. |
-| className | string | no | "" | Additional class names for the root element. |
-| onClick | function | no | — | Called with the click event. |
-
-## Types
-
-None.
-
-## Usage Examples
-
-### Initials (default)
-
-```jsx
-import { Avatar } from "cleanplate";
-
-export const Example = () => (
-  <Avatar name="Jane Doe" />
-);
-```
-
-### Image avatar
-
-```jsx
-import { Avatar } from "cleanplate";
-
-export const Example = () => (
-  <Avatar
-    name="Jane Doe"
-    image="https://example.com/jane.jpg"
-    size="small"
-  />
-);
-```
-
-### Icon avatar
-
-```jsx
-import { Avatar } from "cleanplate";
-
-export const Example = () => (
-  <Avatar icon="person" />
-);
-```
-
-## Behavior Notes
-
-- Initials are derived from the first letter of each word and limited to 2 characters.
-- Background color is generated from `name`, so the same name yields the same color.
-- Provide only one of `image` or `icon`. If both are set, the component renders no content.
-- The root element sets `title` to the value of `name`.
-
-## Related Components / Links
-
-- MediaObject
-- Icon

package/templates/storybook-docs-template.md

@@ -1,236 +0,0 @@
-# Storybook docs reference template
-
-Use this as a reference when adding or updating Storybook documentation for a component. The pattern is used by Alert, Avatar, Spinner, Stepper, ConfirmDialog, and Dropdown.
-
----
-
-## 1. Folder and file structure
-
-Put each component's stories and docs in a **folder** under `src/stories/`:
-
-```
-src/stories/
-  <component-name>/
-    <component-name>.stories.jsx   # Playground + named stories
-    <component-name>.docs.mdx      # Documentation tab
-```
-
-Examples: `alert/alert.stories.jsx`, `avatar/avatar.docs.mdx`, `stepper/stepper.stories.jsx`.
-
----
-
-## 2. Stories file (`*.stories.jsx`)
-
-### Meta (shared)
-
-- **title:** `atoms/<ComponentName>/Playground` or `molecules/<ComponentName>/Playground` (match your taxonomy).
-- **component:** The component from `../../index`.
-- **parameters:** `layout: "centered"` for consistent canvas.
-- **argTypes:** One entry per prop you want in the Controls panel:
-  - `control: "text"` or `control: "boolean"` or `control: { type: "select" }` with `options`.
-  - `description` for each.
-  - For event handlers use `{ action: "onClick" }` (or onClose, etc.).
-- **args:** Default values for the Controls (and for the Default story if it spreads `args`).
-
-### Spacing props (margin, padding, gap)
-
-- Use **suffix** values: the component adds the prefix (`m-`, `p-`, `g-`) internally.
-- In argTypes, use a limited options list, e.g. `SPACING_OPTIONS.slice(0, 10)` and `control: { type: "select" }`.
-- In args and in static examples, use strings like `"0"`, `"b-2"` (not `"m-0"`, `"m-b-2"`).
-
-### Stories to export
-
-- **Default:** Single interactive story that spreads `args` so Controls drive the component. Wrap in `Container` if needed.
-- **Variants / Sizes / etc.:** Named stories that show a few fixed variants (e.g. all variants, all sizes) with short headings via Typography.
-
-### Imports
-
-- Component(s), Container, Typography from `../../index`.
-- Constants (e.g. `SPACING_OPTIONS`) from `../../constants/common` if needed.
-
-### Example skeleton (stories)
-
-```jsx
-import { ComponentName, Container, Typography } from "../../index";
-import { SPACING_OPTIONS } from "../../constants/common";
-
-const MARGIN_OPTIONS = SPACING_OPTIONS.slice(0, 10);
-
-const meta = {
-  title: "atoms/ComponentName/Playground",
-  component: ComponentName,
-  parameters: { layout: "centered" },
-  argTypes: {
-    someProp: { control: "text", description: "..." },
-    variant: {
-      options: ["a", "b"],
-      control: { type: "select" },
-      description: "...",
-    },
-    margin: {
-      options: MARGIN_OPTIONS,
-      control: { type: "select" },
-      description: "Margin spacing (suffix: e.g. '0' applies m-0)",
-    },
-    onClick: { action: "onClick" },
-  },
-  args: {
-    variant: "a",
-    margin: "0",
-  },
-};
-
-export const Default = {
-  name: "Default",
-  render: (args) => (
-    <Container padding="4">
-      <ComponentName {...args} />
-    </Container>
-  ),
-};
-
-export const Variants = {
-  name: "Variants",
-  render: () => (
-    <Container padding="4">
-      <Typography variant="h5" margin="m-0 m-b-2">Variants</Typography>
-      {/* ... */}
-    </Container>
-  ),
-};
-
-export default meta;
-```
-
----
-
-## 3. Documentation MDX (`*.docs.mdx`)
-
-### Meta
-
-```mdx
-import { Meta } from "@storybook/blocks";
-import { ArgsTable } from "@storybook/addon-docs";
-import { ComponentName, Container, Typography } from "../../index";
-
-<Meta title="atoms/ComponentName/Documentation" />
-```
-
-### Sections (in order)
-
-1. **Title and intro**  
-   One short paragraph: what the component is and when to use it.
-
-2. **Features**  
-   Bullet list of main capabilities (variants, sizes, key props, spacing API, etc.).
-
-3. **Usage**  
-   Single code block (jsx) with one import and one minimal example.
-
-4. **Examples**  
-   Subsections (e.g. Variants, Sizes, With Container) with short descriptions and code blocks. Use `jsx` for blocks.
-
-5. **Spacing (if applicable)**  
-   Explain suffix API and show single value and array usage.
-
-6. **Behavior**  
-   Bullet list: how key props work, DOM structure, accessibility notes.
-
-7. **Props**  
-   ```mdx
-   ## Props
-   <ArgsTable of={ComponentName} />
-   ```
-
-8. **Related components**  
-   Bullet list of related components and how they're used with this one.
-
-### Example skeleton (docs)
-
-```mdx
-import { Meta } from "@storybook/blocks";
-import { ArgsTable } from "@storybook/addon-docs";
-import { ComponentName, Container } from "../../index";
-
-<Meta title="atoms/ComponentName/Documentation" />
-
-# ComponentName
-
-Short intro: what it is and when to use it.
-
-## Features
-
-- **Feature one:** ...
-- **Feature two:** ...
-
-## Usage
-
-```jsx
-import { ComponentName } from "cleanplate";
-const App = () => <ComponentName prop="value" />;
-```
-
-## Examples
-
-### Variants
-```jsx
-<ComponentName variant="a" />
-<ComponentName variant="b" />
-```
-
-### With Container
-```jsx
-<Container padding="4">
-  <ComponentName margin="b-2" />
-</Container>
-```
-
-## Spacing (margin)
-
-`margin` accepts the **spacing suffix**. Component adds `m-` prefix (e.g. `"0"` → m-0).
-
-```jsx
-<ComponentName margin="0" />
-<ComponentName margin={["b-2"]} />
-```
-
-## Behavior
-
-- **Point one:** ...
-- **Root element:** ...
-
-## Props
-
-<ArgsTable of={ComponentName} />
-
-## Related components
-
-- **OtherComponent** – How it relates
-```
-
----
-
-## 4. Naming and taxonomy
-
-- **Atoms:** Button, Typography, Icon, Alert, Avatar, Spinner, Stepper, Container.
-- **Molecules:** Dropdown, ConfirmDialog, MediaObject, etc.
-- Use the same segment in both titles: `atoms/Alert/Playground` and `atoms/Alert/Documentation`.
-
----
-
-## 5. Checklist for a new component
-
-- [ ] Create `src/stories/<name>/<name>.stories.jsx` with meta (title, component, parameters, argTypes, args), Default story, and at least one named story (e.g. Variants).
-- [ ] Create `src/stories/<name>/<name>.docs.mdx` with Meta, intro, Features, Usage, Examples, Behavior, Props (ArgsTable), Related components.
-- [ ] Use spacing **suffix** in examples and in Controls (e.g. `"0"`, `"b-2"`), not full tokens like `"m-0"`.
-- [ ] Add `onClick` / `onClose` etc. as `action` in argTypes so they appear in the Actions panel.
-- [ ] Ensure the Documentation tab title matches the Playground (e.g. both `atoms/Alert/...`).
-
----
-
-## 6. Reference components
-
-For full examples, see:
-
-- **Stories:** `src/stories/alert/alert.stories.jsx`, `src/stories/avatar/avatar.stories.jsx`, `src/stories/spinner/spinner.stories.jsx`
-- **Docs:** `src/stories/alert/alert.docs.mdx`, `src/stories/avatar/avatar.docs.mdx`

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "checkJs": false,
-    "outDir": "./dist",
-    "declaration": true,
-    "declarationMap": true,
-    "emitDeclarationOnly": true,
-    "sourceMap": true,
-    "strict": false,
-    "noImplicitAny": false,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "storybook-static", "**/*.stories.*", "**/*.test.*", "**/*.spec.*"]
-}