@dezkareid/components 1.0.0 → 1.0.2

package/AGENTS.md

@@ -1,174 +0,0 @@
-# @dezkareid/components
-
-A package to export UI components in formats like React, Astro, Vue, etc.
-
-## Overview
-
-Always use Context7 MCP when I need external library/API documentation, code generation, setup or configuration steps without me having to explicitly ask.
-
-The following paths are the entry points to the different packages:
-
-- `src/react/`: React components (entry: `src/react/index.ts`)
-- `src/astro/`: Astro components (entry: `src/astro/index.ts`)
-- `src/vue/`: Vue components (entry: `src/vue/index.ts`)
-- `src/css/`: Shared CSS Modules (one file per component, `src/css/index.ts` imports all for the CSS bundle)
-- `src/shared/js/`: Framework-agnostic JS utilities
-- `src/shared/types/`: Shared TypeScript interfaces for all components
-
-## Package Exports
-
-| Export | Points to | Compiled? |
-|---|---|---|
-| `@dezkareid/components/react` | `dist/react.js` | Yes — pre-compiled ES module via Rollup + `@rollup/plugin-typescript` |
-| `@dezkareid/components/astro` | `src/astro/index.ts` | No — compiled by the consuming Astro app |
-| `@dezkareid/components/vue` | `src/vue/index.ts` | No — compiled by the consuming Vite/Vue app |
-| `@dezkareid/components/css` | `dist/components.min.css` | Yes — CSS Modules processed and extracted via `rollup-plugin-postcss` |
-
-### Why Astro and Vue are not pre-compiled
-
-- **Astro** `.astro` files require Astro's own compiler — they cannot be pre-compiled to generic JS
-- **Vue** SFCs are best compiled by the consumer's Vite for correct SSR and template optimisation
-
-## Build
-
-The build uses **Rollup** (`rollup.config.mjs`) — not Vite — because `rollup-plugin-postcss` handles CSS Modules extraction correctly in Rollup without conflicts.
-
-The build produces:
-- `dist/react.js` — ES module barrel entry
-- `dist/react/**/*.js` — individual component chunks (tree-shakeable via `preserveModules`)
-- `dist/react/**/*.d.ts` — TypeScript declarations
-- `dist/components.min.css` — all CSS Modules processed, scoped, and bundled into one file
-
-Key plugins:
-- `rollup-plugin-postcss` with `autoModules: true, extract: 'components.min.css', minimize: true` — processes CSS Modules and extracts to a single file
-- `@rollup/plugin-typescript` with `declaration: true` — compiles TSX and emits `.d.ts` files
-- `@rollup/plugin-node-resolve` — resolves node_modules
-
-### CSS Modules in the build
-
-CSS class names are scoped (hashed) by `postcss-modules`. The JS proxy files (e.g. `dist/css/button.module.css.js`) export the class name map so React components can reference the correct hashed names. The `dist/components.min.css` file contains the matching scoped styles.
-
-Consumers **must** import `@dezkareid/components/css` once at their app root — styles are not auto-injected into JS.
-
-## Development
-
-Each component lives in its own folder within each framework directory, e.g. `src/react/Button/index.tsx`.
-
-A component set should include:
-
-- `src/shared/types/<component>.ts` — shared TypeScript props interface
-- `src/css/<component>.module.css` — BEM + OOCSS styles using design tokens only
-- `src/react/<Component>/index.tsx` — React implementation
-- `src/react/<Component>/index.test.tsx` — Vitest + RTL tests (React only)
-- `src/astro/<Component>/index.astro` — Astro implementation
-- `src/vue/<Component>/index.vue` — Vue SFC implementation
-
-### CSS conventions
-
-- Use **BEM** for class naming: `.block`, `.block--modifier`, `.block__element`
-- Use **OOCSS** to separate structure (layout/sizing/spacing) from skin (colour/border/shadow)
-- All values must use CSS custom properties from `@dezkareid/design-tokens` — never hardcode hex, rgb, or px values
-- Use semantic tokens (`--color-primary`, `--color-text-primary`, etc.) for automatic light/dark support
-- When a needed token doesn't exist, use the closest base token and add a `TODO: Propose --token-name` comment
-
-### Available components
-
-#### Button
-
-File: `src/react/Button/index.tsx` | `src/astro/Button/index.astro` | `src/vue/Button/index.vue`
-Types: `src/shared/types/button.ts` | CSS: `src/css/button.module.css`
-
-Props:
-- `variant?: 'primary' | 'secondary'` — default `'primary'`
-- `size?: 'sm' | 'md' | 'lg'` — default `'md'`
-- `disabled?: boolean` — default `false`
-- Forwards all native `<button>` HTML attributes
-
-BEM classes: `.button`, `.button--primary`, `.button--secondary`, `.button--sm`, `.button--md`, `.button--lg`, `.button--disabled`
-
-#### Tag
-
-File: `src/react/Tag/index.tsx` | `src/astro/Tag/index.astro` | `src/vue/Tag/index.vue`
-Types: `src/shared/types/tag.ts` | CSS: `src/css/tag.module.css`
-
-Props:
-- `variant?: 'default' | 'success' | 'danger'` — default `'default'`
-- Accepts arbitrary `children`/slot content (not limited to plain text)
-
-BEM classes: `.tag`, `.tag--default`, `.tag--success`, `.tag--danger`
-
-#### Card
-
-File: `src/react/Card/index.tsx` | `src/astro/Card/index.astro` | `src/vue/Card/index.vue`
-Types: `src/shared/types/card.ts` | CSS: `src/css/card.module.css`
-
-Props:
-- `elevation?: 'flat' | 'raised'` — default `'raised'`
-- Accepts arbitrary `children`/slot content
-
-BEM classes: `.card`, `.card--raised`, `.card--flat`
-
-Note: `--shadow-raised` token is proposed but not yet in `@dezkareid/design-tokens`; currently uses a raw `box-shadow` value.
-
-#### ThemeToggle
-
-File: `src/react/ThemeToggle/index.tsx` | `src/astro/ThemeToggle/index.astro` | `src/vue/ThemeToggle/index.vue`
-Types: `src/shared/types/theme-toggle.ts` | CSS: `src/css/theme-toggle.module.css`
-Shared logic: `src/shared/js/theme.ts`
-
-Props: none (self-contained stateful component)
-
-Behaviour:
-- On mount: reads `localStorage.getItem('color-scheme')`; falls back to `window.matchMedia('(prefers-color-scheme: dark)')`
-- On toggle: flips theme, calls `applyTheme()` (sets `color-scheme` on `<html>`), calls `persistTheme()` (writes to `localStorage`)
-- Astro version includes an inline `<script is:inline>` for FOUC prevention
-- All `window`/`localStorage` access is SSR-safe (`typeof window !== 'undefined'` guards in `theme.ts`)
-
-BEM classes: `.theme-toggle`, `.theme-toggle--dark`
-
-And offer support for the next characteristics:
-
-- Multi-theme support
-- Mobile first
-- Accessibility support
-- Performance focused
-
-To choose colors use the `design-tokens` skill (already have multi-theme support). When you need to use a color not defined in the design tokens you can propose a new color to be added to the design tokens using a commentary in the code.
-
-## Critical Dependency Versions
-
-The following versions are established across the project's packages and should be respected when adding new dependencies or troubleshooting.
-
-### Core Languages & Runtimes
-- **TypeScript**: `5.9.3`
-
-### Build & Bundling Tools
-- **Rollup**: `4.56.0`
-- **Vite**: `7.3.1` (via `@vitejs/plugin-react`)
-- **@vitejs/plugin-react**: `5.1.4`
-
-### Testing Frameworks
-- **Vitest**: `4.0.18`
-- **React Testing Library**: `16.3.2`
-- **jsdom**: `27.4.0`
-
-### Linting & Formatting
-- **ESLint**: `9.39.2`
-- **Prettier**: `3.8.1`
-
-### Type Definitions
-- **@types/node**: `25.0.10`
-- **@types/react**: `19.2.9`
-- **@types/fs-extra**: `11.0.4`
-- **@types/jest**: `30.0.0`
-
-### Key Libraries
-- **React**: `19.2.4` (Peer dependency: `^18.0.0 || ^19.0.0`)
-- **React DOM**: `19.2.4`
-
-## Documentation
-
-- `README.md`: The source to use the package.
-- `AGENTS.md`: The source to understand the package for ai-assisted tools.
-
-When a component is created or modified, consider update those files with the new information.

package/CHANGELOG.md

@@ -1,12 +0,0 @@
-# @dezkareid/components-v1.0.0 (2026-03-04)
-
-
-### Bug Fixes
-
-* set right build scripts ([5418aa9](https://github.com/dezkareid/dezkareid/commit/5418aa97e19e1e0f52a25db21c509433dd16e452))
-
-
-### Features
-
-* **components:** add tag, theme toggle, card and button ([036cf28](https://github.com/dezkareid/dezkareid/commit/036cf288de3958d0726f4c224190dd58cf3ba5c7))
-* release components ([93e8372](https://github.com/dezkareid/dezkareid/commit/93e8372146e1549f8d58d7883254cebdff716bbf))

package/done/2026-03-03-design-system-components/osddt.plan.md

@@ -1,233 +0,0 @@
-# Implementation Plan: Design System Components
-
-## Architecture Overview
-
-### Directory Structure
-
-Framework-specific components are grouped by framework. CSS and shared logic live in a top-level `shared/` folder, keeping styling and utilities decoupled from any framework.
-
-```
-src/
-  css/
-    button.module.css       # Button BEM + OOCSS classes
-    tag.module.css          # Tag BEM + OOCSS classes
-    card.module.css         # Card BEM + OOCSS classes
-    theme-toggle.module.css # ThemeToggle BEM + OOCSS classes
-  shared/
-    js/
-      theme.ts                # ThemeToggle logic (read/write localStorage, apply color-scheme)
-    types/
-      button.ts               # ButtonProps interface
-      tag.ts                  # TagProps interface
-      card.ts                 # CardProps interface
-      theme-toggle.ts         # ThemeToggleProps interface
-  react/
-    Button/
-      index.tsx
-      index.test.tsx
-    Tag/
-      index.tsx
-      index.test.tsx
-    Card/
-      index.tsx
-      index.test.tsx
-    ThemeToggle/
-      index.tsx
-      index.test.tsx
-    index.ts                  # Barrel: exports all React components
-  astro/
-    Button/
-      index.astro
-    Tag/
-      index.astro
-    Card/
-      index.astro
-    ThemeToggle/
-      index.astro
-    index.ts                  # Barrel: exports all Astro components
-  vue/
-    Button/
-      index.vue
-    Tag/
-      index.vue
-    Card/
-      index.vue
-    ThemeToggle/
-      index.vue
-    index.ts                  # Barrel: exports all Vue components
-```
-
-### Styling Strategy
-
-- **CSS Modules** for component-scoped styles, located in `src/css/`.
-- **BEM** for class naming within each module: block (`button`), element (`button__label`), modifier (`button--primary`, `button--sm`, `button--disabled`).
-- **OOCSS** to separate structural responsibility from skin responsibility:
-  - *Structure classes* define layout, sizing, spacing, and display behaviour (e.g. `.button`, `.card`).
-  - *Skin classes* define colour, border, shadow, and typography (e.g. `.button--primary`, `.tag--success`, `.card--raised`).
-  - Framework files compose both structure and skin classes together.
-- All colour, spacing, and font values use CSS custom properties from `@dezkareid/design-tokens`.
-- Semantic tokens (`--color-background-primary`, `--color-text-primary`, etc.) are used exclusively — no raw hex/px values.
-
-### Theming
-
-- The `color-scheme` attribute on `<html>` drives light/dark switching.
-- `ThemeToggle` is the only component that reads/writes theme state. All other components are passive consumers of semantic tokens.
-- `ThemeToggle` uses `localStorage` (key: `color-scheme`) for persistence and falls back to `prefers-color-scheme`.
-
-### TypeScript
-
-- Shared prop interfaces/types are defined in `src/shared/types/<component>.ts` and imported by all three framework implementations.
-- Strict typing; no `any`.
-
-### Testing
-
-- React implementations only (as per spec).
-- Vitest + React Testing Library.
-- Tests cover: rendering variants, disabled states, slot/children content, ThemeToggle localStorage and OS-preference behaviour.
-
-### Entry Points
-
-The package will expose three sub-path exports:
-- `@dezkareid/components/react` → all React components
-- `@dezkareid/components/astro` → all Astro components
-- `@dezkareid/components/vue` → all Vue components
-
-`package.json` `exports` field will be configured accordingly.
-
----
-
-## Implementation Phases
-
-### Phase 1 — Package Setup
-
-**Goal**: Establish the build infrastructure, folder layout, and entry points before writing any component code.
-
-- Configure `package.json` with `exports` for `react/`, `astro/`, and `vue/` sub-paths.
-- Create the full directory skeleton: `src/css/`, `src/shared/js/`, `src/shared/types/`, `src/react/`, `src/astro/`, `src/vue/`.
-- Create barrel `index.ts` files for each framework entry point (`src/react/index.ts`, `src/astro/index.ts`, `src/vue/index.ts`).
-- Verify that `@dezkareid/design-tokens` is available as a dependency and that its CSS token file can be imported from `src/css/`.
-- Set up Vitest config (if not present) targeting `src/react/**/*.test.tsx`.
-
-### Phase 2 — Button Component
-
-**Goal**: Implement the Button component across all three frameworks with full variant, size, and disabled support.
-
-- Define `ButtonProps` in `src/shared/types/button.ts`: `variant: 'primary' | 'secondary'`, `size: 'sm' | 'md' | 'lg'`, `disabled?: boolean`, `children/slot`.
-- Write `src/css/button.module.css` using BEM + OOCSS:
-  - **Structure**: `.button` — `display: inline-flex`, `align-items: center`, `cursor: pointer`, `border: none`, `border-radius`.
-  - **Structure modifiers** (size): `.button--sm`, `.button--md`, `.button--lg` — vary `padding` and `font-size` via spacing/font tokens.
-  - **Skin modifiers** (variant): `.button--primary` — `background-color: var(--color-primary)`, `color: var(--color-text-inverse)`; `.button--secondary` — `background-color: transparent`, `border: 1px solid var(--color-primary)`, `color: var(--color-primary)`.
-  - **State modifier**: `.button--disabled` — reduced opacity, `cursor: not-allowed`, `pointer-events: none`.
-- Implement `src/react/Button/index.tsx` — renders `<button>`, composes BEM classes from CSS module, passes through native button props.
-- Implement `src/astro/Button/index.astro`.
-- Implement `src/vue/Button/index.vue`.
-- Write `src/react/Button/index.test.tsx`: renders each variant, renders each size, disabled prevents click, accessible role.
-
-### Phase 3 — Tag Component
-
-**Goal**: Implement the Tag component across all three frameworks with semantic colour variants and children support.
-
-- Define `TagProps` in `src/shared/types/tag.ts`: `variant: 'default' | 'success' | 'danger'`, `children/slot`.
-- Write `src/css/tag.module.css` using BEM + OOCSS:
-  - **Structure**: `.tag` — `display: inline-flex`, `align-items: center`, `border-radius`, `padding: var(--spacing-4) var(--spacing-8)`, `font-size: var(--font-size-100)`.
-  - **Skin modifiers** (variant): `.tag--default` — `background-color: var(--color-background-secondary)`, `color: var(--color-text-primary)`; `.tag--success` — `background-color: var(--color-success)`, `color: var(--color-text-inverse)`; `.tag--danger` — `background-color: var(--color-base-red-500)`, `color: var(--color-text-inverse)`. *(Note: propose `--color-danger` semantic token for the design-tokens package.)*
-- Implement `src/react/Tag/index.tsx` — renders a `<span>`, composes BEM classes, accepts `children`.
-- Implement `src/astro/Tag/index.astro`.
-- Implement `src/vue/Tag/index.vue`.
-- Write `src/react/Tag/index.test.tsx`: renders each variant, renders slot/children content.
-
-### Phase 4 — Card Component
-
-**Goal**: Implement the Card component across all three frameworks with flat and raised elevation.
-
-- Define `CardProps` in `src/shared/types/card.ts`: `elevation?: 'flat' | 'raised'` (default: `'raised'`), `children/slot`.
-- Write `src/css/card.module.css` using BEM + OOCSS:
-  - **Structure**: `.card` — `display: block`, `border-radius`, `padding: var(--spacing-24)`, `width: 100%`.
-  - **Skin** (base): `.card` — `background-color: var(--color-background-secondary)`, `color: var(--color-text-primary)`.
-  - **Skin modifiers** (elevation): `.card--raised` — `box-shadow: 0 2px 8px rgba(0,0,0,0.12)` *(propose `--shadow-raised` token)*; `.card--flat` — no shadow.
-- Implement `src/react/Card/index.tsx` — renders a `<div>`, composes BEM classes, accepts `children`.
-- Implement `src/astro/Card/index.astro`.
-- Implement `src/vue/Card/index.vue`.
-- Write `src/react/Card/index.test.tsx`: renders children, applies correct elevation class.
-
-### Phase 5 — ThemeToggle Component
-
-**Goal**: Implement the ThemeToggle component across all three frameworks with localStorage persistence and OS preference fallback.
-
-- Define `ThemeToggleProps` in `src/shared/types/theme-toggle.ts`: no required props (self-contained stateful component).
-- Extract shared theme logic to `src/shared/js/theme.ts`:
-  - `getInitialTheme(): 'light' | 'dark'` — reads `localStorage.getItem('color-scheme')`; falls back to `window.matchMedia('(prefers-color-scheme: dark)').matches`.
-  - `applyTheme(theme: 'light' | 'dark'): void` — sets `document.documentElement.setAttribute('color-scheme', theme)`.
-  - `persistTheme(theme: 'light' | 'dark'): void` — writes to `localStorage`.
-  - All functions guard against `typeof window === 'undefined'` for SSR safety.
-- Write `src/css/theme-toggle.module.css` using BEM + OOCSS:
-  - **Structure**: `.theme-toggle` — `display: inline-flex`, `align-items: center`, `cursor: pointer`, `padding`, `border: none`.
-  - **Skin**: `.theme-toggle` — `background-color: transparent`, `color: var(--color-text-primary)`.
-  - **State modifier**: `.theme-toggle--dark` — visual indicator for dark mode active state.
-- Implement `src/react/ThemeToggle/index.tsx` — uses `useState` + `useEffect`, calls `src/shared/js/theme.ts` utilities.
-- Implement `src/astro/ThemeToggle/index.astro` — static markup + inline `<script>` that imports and calls `src/shared/js/theme.ts`.
-- Implement `src/vue/ThemeToggle/index.vue` — uses `ref` + `onMounted`, calls shared utilities.
-- Write `src/react/ThemeToggle/index.test.tsx`: initialises from `localStorage`, initialises from `prefers-color-scheme` when no stored value, toggles on click, persists to `localStorage`.
-
-### Phase 6 — Exports & Package Configuration
-
-**Goal**: Wire all components into the entry points and validate the exports map.
-
-- Update `src/react/index.ts` to re-export `Button`, `Tag`, `Card`, `ThemeToggle` from their respective sub-folders.
-- Update `src/astro/index.ts` to re-export Astro components.
-- Update `src/vue/index.ts` to re-export Vue components.
-- Update `package.json` `exports`:
-  ```json
-  {
-    "./react": "./src/react/index.ts",
-    "./astro": "./src/astro/index.ts",
-    "./vue": "./src/vue/index.ts"
-  }
-  ```
-- Verify build compiles without errors.
-
-### Phase 7 — Documentation
-
-**Goal**: Update `README.md` and `AGENTS.md` to reflect the new components.
-
-- Add installation note for `@dezkareid/design-tokens` CSS requirement.
-- Add usage examples for each component in each framework format.
-- Update `AGENTS.md` with component API summaries.
-
----
-
-## Technical Dependencies
-
-| Dependency | Purpose | Already Present? |
-|---|---|---|
-| `@dezkareid/design-tokens` | CSS token variables | To verify |
-| `react` / `react-dom` | React runtime | Peer dep |
-| `vue` | Vue runtime | To add as peer dep |
-| `astro` | Astro runtime | To add as peer dep |
-| `vitest` | Test runner | To configure |
-| `@testing-library/react` | React test utilities | To configure |
-| `jsdom` | DOM environment for tests | To configure |
-| `typescript` | Type checking | To configure |
-
----
-
-## Risks & Mitigations
-
-| Risk | Mitigation |
-|---|---|
-| Missing semantic tokens (e.g. `--color-danger`, `--shadow-raised`) | Use base tokens as fallback; add inline comments proposing new tokens to the design-tokens package |
-| CSS Modules not supported in Astro/Vue by default | Astro natively supports CSS Modules; Vue supports them via `<style module>` — both are straightforward |
-| `localStorage` access in SSR/Astro contexts | Wrap all `localStorage` access in `typeof window !== 'undefined'` guards; use `is:inline` or `client:load` in Astro |
-| ThemeToggle hydration flash (FOUC) | Emit an inline `<script>` that applies the theme before first paint (Astro strategy); React version uses `useEffect` which may flash — document as a known limitation |
-| Vue not yet configured as a peer dependency | Add `vue` peer dep to `package.json` in Phase 1 |
-
----
-
-## Out of Scope
-
-- Icon library (no icon assets bundled with components).
-- Animation/transition system.
-- Loading state or icon-only Button variant.
-- Storybook or visual regression tooling.
-- SSR-optimised theme detection beyond the `<script>` injection approach.
-- Astro and Vue unit tests (React tests only, per spec).

package/done/2026-03-03-design-system-components/osddt.spec.md

@@ -1,90 +0,0 @@
-# Feature Specification: Design System Components
-
-## Overview
-
-Add four foundational UI components — **Button**, **Tag**, **Card**, and **ThemeToggle** — to the `@dezkareid/components` package. These components form the core building blocks of the personal design system, enabling consistent, accessible, and theme-aware UI across all surfaces that consume the package (React, Astro, Vue).
-
-Each component must ship in all three framework formats (React, Astro, Vue), use design tokens for all visual properties, and support light/dark theming automatically.
-
----
-
-## Requirements
-
-### Button
-
-- Renders a clickable element that triggers an action.
-- Supports at least two visual variants: **primary** (filled) and **secondary** (outlined).
-- Supports a **disabled** state that prevents interaction and communicates non-interactivity visually.
-- Accepts a label via slot/children.
-- Must be keyboard-accessible and announce its role to assistive technologies.
-
-### Tag
-
-- Renders a small inline label used to categorise or annotate content.
-- Supports at least three semantic colour variants: **default**, **success**, and **danger**.
-- Is non-interactive (display only).
-- Text content is passed via slot/children.
-- Must be readable by assistive technologies (appropriate role/label).
-
-### Card
-
-- Renders a contained surface that groups related content.
-- Accepts arbitrary content via slot/children (title, body, actions).
-- Provides consistent internal spacing and a distinct background relative to the page.
-- Must be usable as a layout container with no fixed height.
-
-### ThemeToggle
-
-- Renders a toggle control that switches the active colour scheme between light and dark.
-- The current theme state is reflected visually (icon or label change).
-- Toggling persists the preference to `localStorage` under the key `color-scheme`.
-- On initial load, reads `localStorage` first; falls back to the OS `prefers-color-scheme` preference.
-- Theme is applied by setting `color-scheme` on the `<html>` element (`light` or `dark`).
-- Must be keyboard-accessible and communicate its current state to assistive technologies.
-
----
-
-## Scope
-
-### In scope
-
-- React, Astro, and Vue implementations for all four components.
-- Design-token-driven styling (no hardcoded colour or spacing values).
-- Automatic light/dark theme support via CSS semantic tokens.
-- Accessible markup (keyboard navigation, ARIA roles/attributes where needed).
-- Mobile-first responsive behaviour.
-- Unit/integration tests for the React implementations.
-- TypeScript prop types/interfaces for all components.
-- Updated `README.md` and `AGENTS.md` with usage examples for each component.
-
-### Out of scope
-
-- Icon library integration (icons may be addressed as a follow-up).
-- Animation or transition systems.
-- Complex compound variants (e.g. icon-only Button, loading state).
-- Storybook or visual regression tooling.
-- Server-side rendering (SSR) specific configuration.
-
----
-
-## Acceptance Criteria
-
-1. **Button** renders correctly in primary and secondary variants and is disabled when `disabled` is set.
-2. **Tag** renders in default, success, and danger variants using the correct semantic colour tokens.
-3. **Card** renders its children inside a visually distinct surface with consistent spacing.
-4. **ThemeToggle** switches the `color-scheme` attribute on `<html>` and persists the value to `localStorage`.
-5. **ThemeToggle** reads `localStorage` on mount and applies the stored value; if absent, applies the OS preference.
-6. All components pass accessibility checks (keyboard focus, ARIA) without errors.
-7. All components render correctly in both light and dark modes using semantic tokens only.
-8. React implementations have passing unit tests.
-9. Each component is exported from the appropriate entry point (`react/`, `astro/`, `vue/`).
-10. `README.md` includes import and usage examples for all four components.
-
----
-
-## Decisions
-
-1. **Button sizes**: Button will support three size variants — small, medium, and large — via a `size` prop.
-2. **Tag dismissibility**: Tag remains display-only with no close action. It must accept arbitrary content via slot/children (not just a plain text string).
-3. **Card elevation**: Card will support two elevation levels — **flat** (no shadow) and **raised** (with shadow) — via an `elevation` prop.
-4. **ThemeToggle framework scope**: ThemeToggle will ship in all three framework formats (React, Astro, Vue), consistent with the other components.

package/done/2026-03-03-design-system-components/osddt.tasks.md

@@ -1,100 +0,0 @@
-# Task List: Design System Components
-
----
-
-## Phase 1 — Package Setup
-
-> All Phase 2–7 tasks depend on Phase 1 being complete.
-
-- [x] [S] Configure `package.json`: add `exports` map for `./react`, `./astro`, `./vue` sub-paths, and add `vue` + `astro` as peer dependencies
-- [x] [S] Create directory skeleton: `src/css/`, `src/shared/js/`, `src/shared/types/`, `src/react/`, `src/astro/`, `src/vue/`
-- [x] [S] Create empty barrel files: `src/react/index.ts`, `src/astro/index.ts`, `src/vue/index.ts`
-- [x] [S] Verify `@dezkareid/design-tokens` is installed and its CSS token file is importable; add as dependency if missing
-- [x] [M] Set up Vitest config targeting `src/react/**/*.test.tsx` with jsdom environment and React Testing Library
-
-**Definition of Done**: `package.json` has correct exports and peer deps; all directories exist; Vitest runs (no tests yet, zero failures).
-
----
-
-## Phase 2 — Button Component
-
-> Depends on: Phase 1
-
-- [x] [S] Define `ButtonProps` interface in `src/shared/types/button.ts` (`variant`, `size`, `disabled`, `children`)
-- [x] [M] Write `src/css/button.module.css` — structure (`.button`, size modifiers `.button--sm/md/lg`) and skin (variant modifiers `.button--primary/secondary`, state modifier `.button--disabled`) using BEM + OOCSS
-- [x] [M] Implement `src/react/Button/index.tsx` — composes BEM classes, forwards native button props
-- [x] [M] Write `src/react/Button/index.test.tsx` — renders primary/secondary variants, renders sm/md/lg sizes, disabled prevents click, has accessible button role
-- [x] [M] Implement `src/astro/Button/index.astro`
-- [x] [M] Implement `src/vue/Button/index.vue`
-
-**Definition of Done**: Button renders all variants and sizes in all three frameworks; React tests pass; no hardcoded colour or spacing values.
-
----
-
-## Phase 3 — Tag Component
-
-> Depends on: Phase 1
-
-- [x] [S] Define `TagProps` interface in `src/shared/types/tag.ts` (`variant`, `children`)
-- [x] [M] Write `src/css/tag.module.css` — structure (`.tag`) and skin (variant modifiers `.tag--default/success/danger`) using BEM + OOCSS; add comment proposing `--color-danger` semantic token
-- [x] [M] Implement `src/react/Tag/index.tsx` — renders `<span>`, accepts `children`, composes BEM classes
-- [x] [M] Write `src/react/Tag/index.test.tsx` — renders default/success/danger variants, renders arbitrary children content
-- [x] [M] Implement `src/astro/Tag/index.astro`
-- [x] [M] Implement `src/vue/Tag/index.vue`
-
-**Definition of Done**: Tag renders all variants with correct colours in all three frameworks; accepts arbitrary slot/children; React tests pass.
-
----
-
-## Phase 4 — Card Component
-
-> Depends on: Phase 1
-
-- [x] [S] Define `CardProps` interface in `src/shared/types/card.ts` (`elevation`, `children`; default elevation `'raised'`)
-- [x] [M] Write `src/css/card.module.css` — structure (`.card`) and skin (base skin on `.card`, elevation modifiers `.card--raised/flat`) using BEM + OOCSS; add comment proposing `--shadow-raised` token
-- [x] [M] Implement `src/react/Card/index.tsx` — renders `<div>`, accepts `children`, composes BEM classes
-- [x] [M] Write `src/react/Card/index.test.tsx` — renders children, applies `card--raised` by default, applies `card--flat` when set
-- [x] [M] Implement `src/astro/Card/index.astro`
-- [x] [M] Implement `src/vue/Card/index.vue`
-
-**Definition of Done**: Card renders children inside a themed surface with correct elevation in all three frameworks; React tests pass.
-
----
-
-## Phase 5 — ThemeToggle Component
-
-> Depends on: Phase 1
-
-- [x] [S] Define `ThemeToggleProps` interface in `src/shared/types/theme-toggle.ts` (no required props)
-- [x] [M] Implement shared theme utilities in `src/shared/js/theme.ts`: `getInitialTheme()`, `applyTheme()`, `persistTheme()` — all SSR-safe with `typeof window` guards
-- [x] [M] Write `src/css/theme-toggle.module.css` — structure (`.theme-toggle`) and skin + state modifier (`.theme-toggle--dark`) using BEM + OOCSS
-- [x] [M] Implement `src/react/ThemeToggle/index.tsx` — uses `useState` + `useEffect`, calls shared theme utilities
-- [x] [L] Write `src/react/ThemeToggle/index.test.tsx` — initialises from `localStorage`, falls back to `prefers-color-scheme`, toggles on click, persists to `localStorage`
-- [x] [M] Implement `src/astro/ThemeToggle/index.astro` — static markup + inline `<script>` calling shared utilities
-- [x] [M] Implement `src/vue/ThemeToggle/index.vue` — uses `ref` + `onMounted`, calls shared utilities
-
-**Definition of Done**: ThemeToggle reads, applies, and persists theme in all three frameworks; React tests pass; no FOUC in Astro (inline script runs before paint).
-
----
-
-## Phase 6 — Exports & Package Configuration
-
-> Depends on: Phases 2–5
-
-- [x] [S] Update `src/react/index.ts` to re-export `Button`, `Tag`, `Card`, `ThemeToggle`
-- [x] [S] Update `src/astro/index.ts` to re-export all Astro components
-- [x] [S] Update `src/vue/index.ts` to re-export all Vue components
-- [x] [S] Verify `package.json` `exports` paths resolve correctly (smoke check imports)
-
-**Definition of Done**: All components importable from `@dezkareid/components/react`, `/astro`, and `/vue`; no TypeScript errors.
-
----
-
-## Phase 7 — Documentation
-
-> Depends on: Phase 6
-
-- [x] [M] Update `README.md`: add `@dezkareid/design-tokens` CSS import requirement, add usage examples for Button, Tag, Card, ThemeToggle in all three framework formats
-- [x] [M] Update `AGENTS.md`: add component API summaries (props, variants, slot/children behaviour) for all four components
-
-**Definition of Done**: README covers install, token CSS import, and usage for all components; AGENTS.md describes all component APIs for AI tooling.

package/rollup.config.mjs

@@ -1,32 +0,0 @@
-import typescript from '@rollup/plugin-typescript';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import postcss from 'rollup-plugin-postcss';
-
-export default {
-  input: 'src/react/index.ts',
-  external: ['react', 'react/jsx-runtime'],
-  plugins: [
-    resolve({ extensions: ['.ts', '.tsx'] }),
-    commonjs(),
-    postcss({
-      autoModules: true,
-      extract: 'components.min.css',
-      minimize: true,
-    }),
-    typescript({
-      tsconfig: './tsconfig.json',
-      declaration: true,
-      declarationDir: 'dist',
-      exclude: ['**/*.test.tsx', '**/*.test.ts', 'setupTests.ts'],
-    }),
-  ],
-  output: {
-    dir: 'dist',
-    format: 'es',
-    preserveModules: true,
-    preserveModulesRoot: 'src',
-    entryFileNames: '[name].js',
-    sourcemap: true,
-  },
-};

package/setupTests.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "types": ["vitest/globals", "@testing-library/jest-dom"],
-    "outDir": "dist"
-  },
-  "include": ["src", "setupTests.ts"]
-}