@dtlvmw/react 0.0.1

package/guidelines/components/forms.md

@@ -0,0 +1,133 @@
+# Forms
+
+Standard HTML form elements styled with Clarity CSS.
+
+## HTML/CSS Template
+
+### Text Input
+
+```html
+<div class="clr-form-control">
+  <label class="clr-control-label">Username</label>
+  <div class="clr-control-container">
+    <div class="clr-input-wrapper">
+      <input type="text" class="clr-input" placeholder="Enter username" />
+    </div>
+    <span class="clr-subtext">Helper text here</span>
+  </div>
+</div>
+
+<!-- Error state -->
+<div class="clr-form-control clr-error">
+  <label class="clr-control-label">Email</label>
+  <div class="clr-control-container">
+    <div class="clr-input-wrapper">
+      <input type="email" class="clr-input" />
+    </div>
+    <span class="clr-subtext">Invalid email address</span>
+  </div>
+</div>
+
+<!-- Success state -->
+<div class="clr-form-control clr-success">
+  <label class="clr-control-label">Name</label>
+  <div class="clr-control-container">
+    <div class="clr-input-wrapper">
+      <input type="text" class="clr-input" />
+    </div>
+    <span class="clr-subtext">Looks good!</span>
+  </div>
+</div>
+```
+
+### Select
+
+```html
+<div class="clr-form-control">
+  <label class="clr-control-label">Country</label>
+  <div class="clr-control-container">
+    <div class="clr-select-wrapper">
+      <select class="clr-select">
+        <option>USA</option>
+        <option>Canada</option>
+      </select>
+    </div>
+  </div>
+</div>
+```
+
+### Checkbox
+
+```html
+<div class="clr-form-control">
+  <div class="clr-control-container">
+    <div class="clr-checkbox-wrapper">
+      <input type="checkbox" class="clr-checkbox" id="cb1" />
+      <label class="clr-control-label" for="cb1">Accept terms</label>
+    </div>
+  </div>
+</div>
+
+<!-- Inline checkboxes -->
+<div class="clr-form-control">
+  <div class="clr-control-container clr-control-inline">
+    <div class="clr-checkbox-wrapper">
+      <input type="checkbox" class="clr-checkbox" id="cb2" />
+      <label class="clr-control-label" for="cb2">Option A</label>
+    </div>
+    <div class="clr-checkbox-wrapper">
+      <input type="checkbox" class="clr-checkbox" id="cb3" />
+      <label class="clr-control-label" for="cb3">Option B</label>
+    </div>
+  </div>
+</div>
+```
+
+### Toggle
+
+```html
+<div class="clr-form-control">
+  <div class="clr-control-container">
+    <div class="clr-toggle-wrapper">
+      <input type="checkbox" class="clr-toggle" id="tg1" />
+      <label class="clr-control-label" for="tg1">Enable notifications</label>
+    </div>
+  </div>
+</div>
+```
+
+### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `clr-form-control` | Outer form control wrapper |
+| `clr-control-label` | Label text |
+| `clr-control-container` | Inner container |
+| `clr-input-wrapper` | Wraps text input |
+| `clr-input` | Text input element |
+| `clr-select-wrapper` | Wraps select element |
+| `clr-select` | Select element |
+| `clr-checkbox-wrapper` | Wraps checkbox |
+| `clr-checkbox` | Checkbox input |
+| `clr-toggle-wrapper` | Wraps toggle switch |
+| `clr-toggle` | Toggle input |
+| `clr-subtext` | Helper/error text |
+| `clr-error` | Error state (on `clr-form-control`) |
+| `clr-success` | Success state (on `clr-form-control`) |
+| `clr-control-inline` | Inline layout for checkboxes/radios |
+
+## React Components
+
+```tsx
+import { Input, Select, Checkbox, Toggle } from '@dtlvmw/react';
+
+<Input label="Username" placeholder="Enter username" helperText="Required" />
+<Input label="Email" state="error" errorText="Invalid email" />
+<Select label="Country">
+  <option>USA</option>
+  <option>Canada</option>
+</Select>
+<Checkbox label="Accept terms" />
+<Checkbox label="Option A" inline />
+<Toggle label="Enable notifications" />
+```

package/guidelines/components/header.md

@@ -0,0 +1,59 @@
+# Header
+
+Application header with branding, navigation, and actions.
+
+## HTML/CSS Template
+
+```html
+<header class="header header-6">
+  <div class="branding">
+    <a href="#" class="nav-link">
+      <cds-icon shape="vm-bug"></cds-icon>
+      <span class="title">App Name</span>
+    </a>
+  </div>
+  <div class="header-nav">
+    <a href="#" class="nav-link active"><span class="nav-text">Dashboard</span></a>
+    <a href="#" class="nav-link"><span class="nav-text">Settings</span></a>
+  </div>
+  <div class="header-actions">
+    <a href="#" class="nav-link">
+      <cds-icon shape="user"></cds-icon>
+    </a>
+  </div>
+</header>
+```
+
+### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `header` | Base header (required) |
+| `header-1` through `header-8` | Color variants |
+| `branding` | Logo/title section |
+| `header-nav` | Navigation links |
+| `header-actions` | Action buttons (right side) |
+| `nav-link` | Navigation link |
+| `nav-text` | Link text |
+| `active` | Active nav indicator |
+
+## React Component
+
+```tsx
+import { Header, HeaderBranding, HeaderNav, HeaderActions } from '@dtlvmw/react';
+
+<Header color={6}>
+  <HeaderBranding>
+    <a className="nav-link">
+      <span className="title">My App</span>
+    </a>
+  </HeaderBranding>
+  <HeaderNav>
+    <a className="nav-link active"><span className="nav-text">Dashboard</span></a>
+    <a className="nav-link"><span className="nav-text">Settings</span></a>
+  </HeaderNav>
+  <HeaderActions>
+    <a className="nav-link"><cds-icon shape="user" /></a>
+  </HeaderActions>
+</Header>
+```

package/guidelines/components/icon.md

@@ -0,0 +1,64 @@
+# Icon (CdsIcon)
+
+Pure React SVG icon component. Reads icon shapes from the Clarity icon registry at runtime. No Angular runtime required — icons are rendered as inline SVG.
+
+## React Component
+
+```tsx
+import { CdsIcon } from '@dtlvmw/react';
+
+// Or use the `Icon` alias (same component)
+import { Icon } from '@dtlvmw/react';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `shape` | `string` | — | Icon name (required) |
+| `size` | `string` | — | Size: `'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, or pixel string like `'24'` |
+| `direction` | `'up' \| 'down' \| 'left' \| 'right'` | — | Rotation direction |
+| `status` | `'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral'` | — | Status color |
+| `solid` | `boolean` | — | Solid fill variant |
+| `className` | `string` | — | Additional CSS class |
+| `role` | `string` | — | ARIA role |
+| `aria-label` | `string` | — | Accessible label |
+
+### Examples
+
+```tsx
+<CdsIcon shape="home" size="24" />
+<CdsIcon shape="check-circle" status="success" />
+<CdsIcon shape="exclamation-triangle" status="warning" size="lg" />
+<CdsIcon shape="cog" solid />
+<CdsIcon shape="angle" direction="down" />
+<CdsIcon shape="user" size="36" />
+```
+
+### Available Icon Shapes
+
+Common shapes registered by the elements bundle:
+
+- **Navigation**: `home`, `cog`, `user`, `users`, `search`, `bars`
+- **Status**: `check-circle`, `exclamation-circle`, `exclamation-triangle`, `info-circle`, `success-standard`, `error-standard`
+- **Actions**: `times`, `window-close`, `check`
+- **Arrows**: `angle`, `arrow`, `angle-double`
+- **Files**: `file`, `file-group`, `folder`, `folder-open`
+- **Misc**: `dot-circle`, `circle`, `calendar`, `event`, `node`, `tree-view`, `ellipsis-horizontal`, `ellipsis-vertical`, `filter-grid`, `filter-grid-circle`, `view-columns`, `step-forward-2`, `info-standard`
+
+### How It Works
+
+`CdsIcon` reads SVG path data from the global Clarity icon registry (`window.CDS._state.iconRegistry`) which is populated when `@dtlvmw/elements` is imported. The component renders the SVG inline as a `<span>` containing an `<svg>` element.
+
+### Sizing
+
+| Size prop | Pixels |
+|-----------|--------|
+| `xs` | 12px |
+| `sm` | 16px |
+| `md` | 20px |
+| `lg` | 24px |
+| `xl` | 28px |
+| `xxl` | 32px |
+| `'24'` (numeric string) | 24px |
+| (none) | 16px (1rem) |

package/guidelines/components/login.md

@@ -0,0 +1,59 @@
+# Login Page
+
+Full-page login layout with branding and form.
+
+## HTML/CSS Template
+
+```html
+<div class="login-wrapper">
+  <div class="login">
+    <div class="login-group">
+      <div class="clr-form-control">
+        <label class="clr-control-label">Username</label>
+        <div class="clr-control-container">
+          <div class="clr-input-wrapper">
+            <input type="text" class="clr-input" placeholder="Username" />
+          </div>
+        </div>
+      </div>
+      <div class="clr-form-control">
+        <label class="clr-control-label">Password</label>
+        <div class="clr-control-container">
+          <div class="clr-input-wrapper">
+            <input type="password" class="clr-input" placeholder="Password" />
+          </div>
+        </div>
+      </div>
+      <button class="btn btn-primary">Login</button>
+      <a href="#" class="signup">Sign up</a>
+    </div>
+  </div>
+</div>
+```
+
+### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `login-wrapper` | Full-page wrapper |
+| `login` | Login form area |
+| `login-group` | Form group container |
+| `signup` | Sign-up link |
+
+## React Component
+
+```tsx
+import { LoginWrapper, Login } from '@dtlvmw/react';
+import { Input, Button } from '@dtlvmw/react';
+
+<LoginWrapper>
+  <Login>
+    <div className="login-group">
+      <Input label="Username" placeholder="Username" />
+      <Input label="Password" type="password" placeholder="Password" />
+      <Button>Login</Button>
+      <a className="signup" href="#">Sign up</a>
+    </div>
+  </Login>
+</LoginWrapper>
+```

package/guidelines/components/modal.md

@@ -0,0 +1,87 @@
+# Modal
+
+Overlay dialog with backdrop, header, body, and footer.
+
+## HTML/CSS Template
+
+```html
+<!-- Modal (visible when both .modal and .modal-backdrop exist) -->
+<div class="modal">
+  <div class="modal-dialog" role="dialog" aria-modal="true">
+    <div class="modal-content-wrapper">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3 class="modal-title">Dialog Title</h3>
+        </div>
+        <div class="modal-body">
+          <p>Dialog content.</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-outline">Cancel</button>
+          <button class="btn btn-primary">OK</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-backdrop" aria-hidden="true"></div>
+</div>
+
+<!-- Size variants: add to .modal-dialog -->
+<!-- modal-sm, modal-lg, modal-xl, modal-full-screen -->
+<div class="modal-dialog modal-lg" role="dialog">...</div>
+```
+
+### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `modal` | Root modal container |
+| `modal-dialog` | Dialog wrapper |
+| `modal-content-wrapper` | Content wrapper |
+| `modal-content` | Inner content |
+| `modal-header` | Header section |
+| `modal-title` | Title text |
+| `modal-body` | Body content |
+| `modal-footer` | Footer with actions |
+| `modal-backdrop` | Semi-transparent overlay |
+| `modal-sm` | Small modal |
+| `modal-lg` | Large modal |
+| `modal-xl` | Extra large modal |
+| `modal-full-screen` | Full-screen modal |
+
+## React Component
+
+```tsx
+import { Modal, ModalHeader, ModalBody, ModalFooter } from '@dtlvmw/react';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | — | Controls visibility |
+| `closable` | `boolean` | `true` | Shows close button |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full-screen'` | `'md'` | Dialog size |
+| `staticBackdrop` | `boolean` | `true` | Prevent close on backdrop click |
+| `onClose` | `() => void` | — | Close callback |
+
+### Examples
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<Button onClick={() => setOpen(true)}>Open Modal</Button>
+
+<Modal open={open} onClose={() => setOpen(false)} size="lg">
+  <ModalHeader>
+    <h3 className="modal-title">Title</h3>
+  </ModalHeader>
+  <ModalBody>
+    <p>Modal body content.</p>
+  </ModalBody>
+  <ModalFooter>
+    <Button btnStyle="outline" onClick={() => setOpen(false)}>Cancel</Button>
+    <Button>OK</Button>
+  </ModalFooter>
+</Modal>
+```

package/guidelines/components/progress.md

@@ -0,0 +1,75 @@
+# Progress Bar
+
+Determinate or indeterminate progress indicator.
+
+## HTML/CSS Template
+
+```html
+<!-- Basic progress bar -->
+<div class="progress">
+  <progress max="100" value="55"></progress>
+</div>
+
+<!-- Labeled -->
+<div class="progress labeled">
+  <progress max="100" value="55" data-displayval="55%"></progress>
+  <span>55%</span>
+</div>
+
+<!-- Compact -->
+<div class="progress compact">
+  <progress max="100" value="40"></progress>
+</div>
+
+<!-- Looping (indeterminate) -->
+<div class="progress loop">
+  <progress></progress>
+</div>
+
+<!-- Color variants — add to .progress -->
+<div class="progress success"><progress max="100" value="100"></progress></div>
+<div class="progress warning"><progress max="100" value="70"></progress></div>
+<div class="progress danger"><progress max="100" value="30"></progress></div>
+
+<!-- Fade (animation) -->
+<div class="progress progress-fade">
+  <progress max="100" value="80"></progress>
+</div>
+```
+
+### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `progress` | Container (required) |
+| `compact` | Thin bar variant |
+| `labeled` | Shows percentage label |
+| `loop` | Indeterminate/looping animation |
+| `progress-fade` | Fade animation |
+| `success` | Green color |
+| `warning` | Yellow color |
+| `danger` | Red color |
+
+## React Component
+
+```tsx
+import { ProgressBar } from '@dtlvmw/react';
+
+<ProgressBar value={55} />
+<ProgressBar value={55} labeled />
+<ProgressBar value={100} color="success" />
+<ProgressBar compact value={40} />
+<ProgressBar loop />
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `number` | `0` | Current value |
+| `max` | `number` | `100` | Maximum value |
+| `color` | `'success' \| 'warning' \| 'danger'` | — | Bar color |
+| `labeled` | `boolean` | — | Show percentage label |
+| `compact` | `boolean` | — | Thin bar |
+| `loop` | `boolean` | — | Indeterminate animation |
+| `fade` | `boolean` | — | Fade animation |

package/guidelines/components/spinner.md

@@ -0,0 +1,52 @@
+# Spinner
+
+Loading indicator for asynchronous operations.
+
+## HTML/CSS Template
+
+```html
+<!-- Default (large) spinner -->
+<span class="spinner" aria-busy="true">Loading...</span>
+
+<!-- Medium spinner -->
+<span class="spinner spinner-md" aria-busy="true">Loading...</span>
+
+<!-- Small spinner -->
+<span class="spinner spinner-sm" aria-busy="true">Loading...</span>
+
+<!-- Inline spinner (for use within text/buttons) -->
+<span class="spinner spinner-inline" aria-busy="true"></span>
+
+<!-- Inverse (for dark backgrounds) -->
+<span class="spinner spinner-inverse" aria-busy="true">Loading...</span>
+```
+
+### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `spinner` | Base spinner (required) |
+| `spinner-sm` | Small size |
+| `spinner-md` | Medium size |
+| `spinner-inline` | Inline (for text/button context) |
+| `spinner-inverse` | White spinner for dark backgrounds |
+
+## React Component
+
+```tsx
+import { Spinner } from '@dtlvmw/react';
+
+<Spinner />
+<Spinner size="sm" />
+<Spinner size="md" />
+<Spinner inline />
+<Spinner inverse />
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'sm' \| 'md' \| 'lg'` | — | Spinner size |
+| `inline` | `boolean` | — | Inline mode |
+| `inverse` | `boolean` | — | White for dark backgrounds |

package/guidelines/components/stack-view.md

@@ -0,0 +1,57 @@
+# Stack View
+
+Expandable key-value block layout for displaying metadata or configuration details.
+
+## HTML/CSS Template
+
+```html
+<div class="stack-view">
+  <!-- Simple stack block -->
+  <div class="stack-block">
+    <div class="stack-block-label">Property</div>
+    <div class="stack-block-content">Value</div>
+  </div>
+
+  <!-- Expandable stack block -->
+  <div class="stack-block stack-block-expandable stack-block-expanded">
+    <div class="stack-block-label">Expandable Section</div>
+    <div class="stack-block-content">Summary</div>
+    <!-- Nested blocks (children shown when expanded) -->
+    <div class="stack-block">
+      <div class="stack-block-label">Sub-property</div>
+      <div class="stack-block-content">Sub-value</div>
+    </div>
+  </div>
+
+  <!-- Collapsed expandable -->
+  <div class="stack-block stack-block-expandable">
+    <div class="stack-block-label">Collapsed Section</div>
+    <div class="stack-block-content">Click to expand</div>
+  </div>
+</div>
+```
+
+### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `stack-view` | Container (required) |
+| `stack-block` | Block row |
+| `stack-block-label` | Key/label column |
+| `stack-block-content` | Value column |
+| `stack-block-expandable` | Marks block as expandable |
+| `stack-block-expanded` | Expanded state |
+
+## React Component
+
+```tsx
+import { StackView, StackBlock } from '@dtlvmw/react';
+
+<StackView>
+  <StackBlock label="Name" content="John Doe" />
+  <StackBlock label="Details" content="Summary" expandable expanded onToggle={() => {}}>
+    <StackBlock label="Email" content="john@example.com" />
+    <StackBlock label="Role" content="Admin" />
+  </StackBlock>
+</StackView>
+```

package/guidelines/components/table.md

@@ -0,0 +1,76 @@
+# Table
+
+Styled data table with variants.
+
+## HTML/CSS Template
+
+```html
+<!-- Basic table -->
+<table class="table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Status</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John</td>
+      <td>Active</td>
+      <td>Admin</td>
+    </tr>
+    <tr>
+      <td>Jane</td>
+      <td>Inactive</td>
+      <td>User</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- Compact table -->
+<table class="table table-compact">...</table>
+
+<!-- No border -->
+<table class="table table-noborder">...</table>
+
+<!-- Vertical (key-value layout) -->
+<table class="table table-vertical">
+  <tbody>
+    <tr><th>Name</th><td>John Doe</td></tr>
+    <tr><th>Email</th><td>john@example.com</td></tr>
+  </tbody>
+</table>
+```
+
+### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `table` | Base table style (required) |
+| `table-compact` | Reduced row height |
+| `table-noborder` | No border lines |
+| `table-vertical` | Key-value vertical layout |
+
+## React Component
+
+```tsx
+import { Table } from '@dtlvmw/react';
+
+<Table>
+  <thead><tr><th>Name</th><th>Status</th></tr></thead>
+  <tbody><tr><td>John</td><td>Active</td></tr></tbody>
+</Table>
+
+<Table compact noBorder>
+  ...
+</Table>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `compact` | `boolean` | — | Compact row height |
+| `vertical` | `boolean` | — | Vertical key-value layout |
+| `noBorder` | `boolean` | — | No border lines |