npm - doom-design-system - Versions diffs - 0.5.0 → 0.6.0 - Mend

doom-design-system 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (211) hide show

package/.agent/skills/doom/components/textarea.md DELETED Viewed

@@ -1,46 +0,0 @@
-# Textarea Component
-## Import
-```tsx
-import { Textarea } from "doom-design-system";
-```
-## Props
-| Prop         | Type      | Default | Description                         |
-| ------------ | --------- | ------- | ----------------------------------- |
-| `label`      | `string`  | —       | Label text                          |
-| `error`      | `string`  | —       | Error message                       |
-| `helperText` | `string`  | —       | Helper text below textarea          |
-| `showCount`  | `boolean` | —       | Show character count                |
-| `maxLength`  | `number`  | —       | Max characters (auto-enables count) |
-Plus all standard `<textarea>` attributes.
-## Usage
-```tsx
-<Textarea
-  label="Description"
-  placeholder="Enter description..."
-  rows={4}
-/>
-<Textarea
-  label="Bio"
-  maxLength={500}
-  helperText="Brief description of yourself"
-/>
-<Textarea
-  label="Notes"
-  error="This field is required"
-/>
-```
-## Guidelines
-- Same API pattern as `Input` component.
-- Use `maxLength` for character limits (auto-shows counter).
-- Use `rows` to control initial height.

package/.agent/skills/doom/components/toast.md DELETED Viewed

@@ -1,59 +0,0 @@
-# Toast Component
-## Import
-```tsx
-import { ToastProvider, useToast } from "doom-design-system";
-```
-## Setup
-Wrap your app with `ToastProvider`:
-```tsx
-<ToastProvider>
-  <App />
-</ToastProvider>
-```
-## Hook
-```tsx
-const { toast, toastSuccess, toastError, toastWarning, toastInfo } = useToast();
-```
-## Usage
-```tsx
-function MyComponent() {
-  const { toastSuccess, toastError } = useToast();
-  const handleSave = async () => {
-    try {
-      await save();
-      toastSuccess("Changes saved!");
-    } catch (error) {
-      toastError("Failed to save changes");
-    }
-  };
-  return <Button onClick={handleSave}>Save</Button>;
-}
-```
-## Methods
-| Method                  | Description                      |
-| ----------------------- | -------------------------------- |
-| `toast(message, type?)` | Generic toast with optional type |
-| `toastSuccess(message)` | Green success toast              |
-| `toastError(message)`   | Red error toast                  |
-| `toastWarning(message)` | Yellow warning toast             |
-| `toastInfo(message)`    | Blue info toast                  |
-## Guidelines
-- Auto-dismisses after 5 seconds.
-- Can be manually dismissed via X button.
-- Toasts stack from bottom-right.
-- Use for non-blocking notifications.

package/.agent/skills/doom/components/tooltip.md DELETED Viewed

@@ -1,35 +0,0 @@
-# Tooltip Component
-## Import
-```tsx
-import { Tooltip } from "doom-design-system";
-```
-## Props
-| Prop        | Type                | Default  | Description      |
-| ----------- | ------------------- | -------- | ---------------- |
-| `content`   | `string`            | required | Tooltip text     |
-| `children`  | `ReactNode`         | required | Trigger element  |
-| `delay`     | `number`            | `200`    | Show delay in ms |
-| `placement` | `"top" \| "bottom"` | `"top"`  | Position         |
-## Usage
-```tsx
-<Tooltip content="Save your changes">
-  <Button>Save</Button>
-</Tooltip>
-<Tooltip content="This action cannot be undone" placement="bottom">
-  <Button variant="danger">Delete</Button>
-</Tooltip>
-```
-## Guidelines
-- Use for brief explanatory text on hover/focus.
-- Keep content short (1 sentence max).
-- Shows on hover and focus for accessibility.
-- Use `delay` to prevent tooltip flicker on quick hovers.

package/.agent/skills/doom/index.md DELETED Viewed

@@ -1,167 +0,0 @@
-# Doom Design System Skills
-## Setup
-Wrap your app with `DesignSystemProvider`:
-```tsx
-import { DesignSystemProvider } from "doom-design-system";
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <DesignSystemProvider
-        initialTheme="default"
-        withBody
-        fontClassName={font.className}
-      >
-        {children}
-      </DesignSystemProvider>
-    </html>
-  );
-}
-```
-### Props
-| Prop            | Type                                              | Default     | Description                         |
-| --------------- | ------------------------------------------------- | ----------- | ----------------------------------- |
-| `initialTheme`  | `"default" \| "doom" \| "captain" \| "vigilante"` | `"default"` | Theme to apply                      |
-| `withBody`      | `boolean`                                         | `false`     | Render as `<body>` element          |
-| `fontClassName` | `string`                                          | `""`        | Font class (e.g., from `next/font`) |
-| `className`     | `string`                                          | `""`        | Additional classes                  |
-## Core Principles
-1. **Neubrutalist aesthetic**: Bold 2px borders, hard shadows, high contrast.
-2. **CSS Variables**: All colors/spacing via CSS variables—never hardcode hex values.
-3. **Server Components ready**: Use `'use client'` only where needed.
-4. **Accessibility**: WCAG 2.1 AAA color contrast target.
-## Themes
-| Key         | Name        | Primary Color      |
-| ----------- | ----------- | ------------------ |
-| `default`   | Default     | Purple             |
-| `doom`      | DOOMSDAY    | Green (dark mode)  |
-| `captain`   | THE CAPTAIN | Blue               |
-| `vigilante` | DARK KNIGHT | Yellow (dark mode) |
-## Import Pattern
-```tsx
-import { Button, Card, Text, Modal } from "doom-design-system";
-```
-All components are tree-shakeable.
----
-## Hooks
-### useTheme
-Access and change the current theme programmatically.
-```tsx
-import { useTheme } from "doom-design-system";
-function ThemeSwitcher() {
-  const { theme, setTheme, availableThemes } = useTheme();
-  return (
-    <Select
-      value={theme}
-      onChange={(e) => setTheme(e.target.value)}
-      options={Object.keys(availableThemes).map((key) => ({
-        value: key,
-        label: availableThemes[key].name,
-      }))}
-    />
-  );
-}
-```
-| Return Value      | Type                            | Description       |
-| ----------------- | ------------------------------- | ----------------- |
-| `theme`           | `ThemeKey`                      | Current theme key |
-| `setTheme`        | `(theme: ThemeKey) => void`     | Change theme      |
-| `availableThemes` | `Record<ThemeKey, ThemeConfig>` | All theme configs |
----
-## Styles
-- [aesthetic.md](styles/aesthetic.md) — **READ FIRST!** Visual philosophy and design principles
-- [tokens.md](styles/tokens.md) — Design tokens (palette, typography, spacing, z-index, motion)
-- [css-variables.md](styles/css-variables.md) — Theme-aware CSS custom properties
-- [mixins.md](styles/mixins.md) — SCSS mixins for interactivity, theming, shadows
-- [utilities.md](styles/utilities.md) — Utility classes for layout, spacing, typography
----
-## Components
-### Layout
-- [layout.md](components/layout.md) — Flex, Stack, Grid, Container, Switcher
-- [page.md](components/page.md) — Page container
-### Navigation
-- [breadcrumbs.md](components/breadcrumbs.md) — Navigation hierarchy
-- [link.md](components/link.md) — Anchor links
-- [pagination.md](components/pagination.md) — Page navigation
-- [sidebar.md](components/sidebar.md) — Multi-mode side navigation
-- [tabs.md](components/tabs.md) — Tab navigation
-### Forms
-- [button.md](components/button.md) — Buttons
-- [checkbox.md](components/checkbox.md) — Checkboxes
-- [combobox.md](components/combobox.md) — Searchable dropdown
-- [fileupload.md](components/fileupload.md) — File input with drag-drop
-- [form.md](components/form.md) — Form containers
-- [input.md](components/input.md) — Text inputs
-- [label.md](components/label.md) — Form labels
-- [radiogroup.md](components/radiogroup.md) — Radio buttons
-- [select.md](components/select.md) — Dropdown select
-- [slider.md](components/slider.md) — Range inputs
-- [switch.md](components/switch.md) — Toggle switches
-- [textarea.md](components/textarea.md) — Multi-line inputs
-### Data Display
-- [avatar.md](components/avatar.md) — User avatars
-- [badge.md](components/badge.md) — Status indicators
-- [card.md](components/card.md) — Content containers
-- [chart.md](components/chart.md) — Data visualization (D3.js)
-- [chip.md](components/chip.md) — Tags and filters
-- [image.md](components/image.md) — Enhanced images
-- [progressbar.md](components/progressbar.md) — Progress indicators
-- [skeleton.md](components/skeleton.md) — Loading placeholders
-- [slat.md](components/slat.md) — List items
-- [table.md](components/table.md) — Data tables (TanStack)
-- [text.md](components/text.md) — Typography
-### Feedback
-- [alert.md](components/alert.md) — Status messages
-- [spinner.md](components/spinner.md) — Loading spinners
-- [toast.md](components/toast.md) — Notification toasts
-- [tooltip.md](components/tooltip.md) — Hover tooltips
-### Overlays
-- [drawer.md](components/drawer.md) — Side panels
-- [dropdown.md](components/dropdown.md) — Action menus
-- [modal.md](components/modal.md) — Dialog overlays
-- [popover.md](components/popover.md) — Positioned overlays
-- [sheet.md](components/sheet.md) — Bottom sheets
-### Other
-- [accordion.md](components/accordion.md) — Expandable content
-- [actionrow.md](components/actionrow.md) — Settings/navigation rows
-- [icon.md](components/icon.md) — Lucide icons
-- [splitbutton.md](components/splitbutton.md) — Split action buttons

package/.agent/skills/doom/styles/aesthetic.md DELETED Viewed

@@ -1,151 +0,0 @@
-# Aesthetic Guide
-This guide defines the visual principles of the Doom Design System.
-## Core Style: Neubrutalism
-- **Bold borders** — 2px solid, always
-- **Hard shadows** — No blur, offset only
-- **High contrast** — Meets WCAG AAA
-- **Geometric** — 4px border-radius, clean lines
----
-## Rules
-### 1. Borders
-Every interactive element has a 2px solid border.
-```scss
-// ✅ Correct
-border: var(--border-width) solid var(--card-border);
-// ❌ Wrong
-border: 1px solid #ccc;
-border: none;
-```
-### 2. Shadows
-Hard offset shadows only. No blur.
-```scss
-// ✅ Correct
-box-shadow: var(--shadow-hard);
-// ❌ Wrong
-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-```
-### 3. Hover States
-Elements lift on hover. Shadow compensates.
-```scss
-// ✅ Correct
-&:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: var(--shadow-hover);
-}
-// ❌ Wrong
-&:hover {
-  opacity: 0.8;
-}
-```
-### 4. Colors
-Use CSS variables. Never hardcode hex values.
-```tsx
-// ✅ Correct
-style={{ background: "var(--card-bg)" }}
-// ❌ Wrong
-style={{ background: "#ffffff" }}
-```
-### 5. Typography
-Headings are bold and uppercase.
-```scss
-font-family: var(--font-heading);
-font-weight: var(--heading-weight); // 800
-text-transform: var(--heading-transform); // uppercase
-```
----
-## Color Usage
-| Purpose         | Variable    |
-| --------------- | ----------- |
-| Primary actions | `--primary` |
-| Success         | `--success` |
-| Errors          | `--error`   |
-| Warnings        | `--warning` |
-| Muted text      | `--muted`   |
-Use color sparingly. Most UI should be black/white/gray with one accent.
----
-## Spacing
-Use the scale via layout components:
-```tsx
-// ✅ Correct
-<Stack gap={4}>...</Stack>
-// ❌ Wrong
-<div style={{ marginBottom: "16px" }}>...</div>
-```
-| Token          | Size    |
-| -------------- | ------- |
-| `--spacing-xs` | 0.25rem |
-| `--spacing-sm` | 0.5rem  |
-| `--spacing-md` | 1rem    |
-| `--spacing-lg` | 1.5rem  |
-| `--spacing-xl` | 2rem    |
----
-## Animation
-Keep it fast: 150-250ms. Use `transform` for motion.
-```scss
-transition: all var(--duration-fast) var(--ease-in-out);
-```
----
-## Avoid
-- Rounded pills (except badges/chips)
-- Gradients
-- Soft shadows
-- Thin fonts (< 400 weight)
-- Icon-only buttons without labels
-- Custom styles that bypass tokens
----
-## Template
-```scss
-@use "styles/mixins" as m;
-.component {
-  @include m.base-interactive; // border, shadow, transition
-  background: var(--card-bg);
-  @include m.brutalist-hover; // lift + shadow grow
-  @include m.focus; // focus-visible ring
-}
-```

package/.agent/skills/doom/styles/css-variables.md DELETED Viewed

@@ -1,80 +0,0 @@
-# CSS Variables
-Theme-aware CSS variables defined in `styles/themes/definitions.ts`.
-## Color Variables
-| Variable                 | Description               |
-| ------------------------ | ------------------------- |
-| `--primary`              | Brand/action color        |
-| `--primary-foreground`   | Text on primary           |
-| `--primary-hover`        | Hover state for primary   |
-| `--secondary`            | Secondary actions         |
-| `--secondary-foreground` | Text on secondary         |
-| `--background`           | Page background           |
-| `--foreground`           | Default text color        |
-| `--card-bg`              | Card/component background |
-| `--card-border`          | Card border color         |
-| `--border-strong`        | Strong/emphasized borders |
-| `--muted`                | Muted/disabled elements   |
-| `--muted-foreground`     | Muted text                |
-| `--success`              | Success state             |
-| `--success-foreground`   | Text on success           |
-| `--error`                | Error state               |
-| `--error-foreground`     | Text on error             |
-| `--warning`              | Warning state             |
-| `--warning-foreground`   | Text on warning           |
-| `--accent`               | Accent color              |
-## Surface Variables
-| Variable                     | Description             |
-| ---------------------------- | ----------------------- |
-| `--surface-brand`            | Branded surface bg      |
-| `--surface-brand-foreground` | Text on branded surface |
-| `--surface-accent`           | Accent surface bg       |
-| `--on-surface`               | Text on any surface     |
-| `--on-surface-muted`         | Muted text on surface   |
-## Shadow Variables
-| Variable           | Description                 |
-| ------------------ | --------------------------- |
-| `--shadow-base`    | Base shadow color           |
-| `--shadow-primary` | Shadow for primary elements |
-| `--shadow-error`   | Shadow for error states     |
-| `--shadow-hard`    | Standard hard shadow        |
-| `--shadow-hover`   | Hover state shadow          |
-| `--shadow-sm`      | Small shadow                |
-| `--shadow-lg`      | Large shadow                |
-## Solid Variant Tokens
-Used by `variant="solid"` on Modal, Sheet, Drawer, etc.
-| Variable     | Description              |
-| ------------ | ------------------------ |
-| `--solid-bg` | Solid variant background |
-| `--solid-fg` | Solid variant text       |
-## Theme Values
-| Theme       | `--primary` | `--background` | Mode  |
-| ----------- | ----------- | -------------- | ----- |
-| `default`   | Purple 500  | Indigo 100     | Light |
-| `doom`      | Green 600   | Slate 950      | Dark  |
-| `captain`   | Blue 500    | Slate 50       | Light |
-| `vigilante` | Yellow 600  | Gray 950       | Dark  |
-## Usage in SCSS
-```scss
-.myComponent {
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--card-border);
-  color: var(--foreground);
-  box-shadow: var(--shadow-hard);
-}
-```
-**Never hardcode hex values**—always use CSS variables for theme compatibility.

package/.agent/skills/doom/styles/mixins.md DELETED Viewed

@@ -1,97 +0,0 @@
-# SCSS Mixins
-Available in `styles/_mixins.scss`. Import with `@use "../../styles/mixins" as m;`.
-## Interactive Element Mixins
-### `base-interactive`
-Base styles for clickable elements (border, shadow, transition).
-```scss
-.myButton {
-  @include m.base-interactive;
-}
-```
-### `focus`
-Focus states with keyboard navigation support (`focus-visible`).
-```scss
-.myInput {
-  @include m.focus;
-}
-```
-### `error`
-Error state styling (red border + error shadow).
-```scss
-.myInput {
-  &.hasError {
-    @include m.error;
-  }
-}
-```
-### `brutalist-hover($lift, $shadow-color)`
-Hover effect with lift and shadow grow.
-```scss
-.myCard {
-  @include m.brutalist-hover(2px, var(--shadow-base));
-}
-```
-### `disabled-state`
-Disabled styling with hatched pattern overlay.
-```scss
-.myButton:disabled {
-  @include m.disabled-state;
-}
-```
-## Theme Mixins
-### `invert-theme`
-Inverts theme for content on primary-colored backgrounds.
-### `solid-variant`
-Applies solid variant styling (used by Modal, Sheet, Drawer with `variant="solid"`).
-## Shadow Mixins
-### `brutalist-shadow($direction, $size, $color)`
-Directional hard shadows.
-```scss
-.myElement {
-  @include m.brutalist-shadow("left", 8px, var(--shadow-base));
-}
-```
-Directions: `standard`, `top`, `bottom`, `left`, `right`
-## Responsive
-### `mq($breakpoint, $type)`
-Media query helper.
-```scss
-.myElement {
-  @include m.mq("md") {
-    flex-direction: row;
-  }
-}
-```
-Breakpoints: `xxs` (360px), `xs` (480px), `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px)