@dtlvmw/react 0.0.1

package/guidelines/tier2/popovers.md

@@ -0,0 +1,81 @@
+# Signpost, Tooltip & Dropdown Angular (Tier 2 — Angular Elements)
+
+## Signpost
+
+Positioned info popover triggered by a button.
+
+```tsx
+import { Signpost } from '@dtlvmw/react';
+
+<Signpost position="right-middle">
+  This is signpost content with helpful information.
+</Signpost>
+```
+
+### Signpost Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `position` | `string` | `'right-middle'` | Popover position |
+
+Supported positions: `top-left`, `top-middle`, `top-right`, `right-top`, `right-middle`, `right-bottom`, `bottom-right`, `bottom-middle`, `bottom-left`, `left-bottom`, `left-middle`, `left-top`
+
+---
+
+## Tooltip
+
+Hover tooltip with positioned content.
+
+```tsx
+import { Tooltip } from '@dtlvmw/react';
+
+<Tooltip tooltipText="Helpful info" position="right" size="sm">
+  <button className="btn btn-sm">Hover me</button>
+</Tooltip>
+```
+
+### Tooltip Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tooltipText` | `string` | — | Tooltip content |
+| `position` | `string` | `'right'` | Tooltip position |
+| `size` | `string` | `'sm'` | Tooltip size (`xs`, `sm`, `md`, `lg`) |
+
+---
+
+## Dropdown Angular
+
+Full Angular-backed dropdown with keyboard navigation. Use this when you need keyboard navigation and focus management beyond what the CSS-only Dropdown provides.
+
+```tsx
+import { DropdownAngular } from '@dtlvmw/react';
+
+const items = [
+  { label: 'Actions', header: true },
+  { label: 'Edit' },
+  { label: 'Delete' },
+  { label: '', separator: true },
+  { label: 'Disabled', disabled: true },
+];
+
+<DropdownAngular triggerLabel="Actions" items={items} />
+```
+
+### DropdownAngular Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `triggerLabel` | `string` | `'Dropdown'` | Trigger button text |
+| `items` | `DropdownAngularItem[]` | `[]` | Menu items |
+
+### DropdownAngularItem
+
+```ts
+interface DropdownAngularItem {
+  label: string;
+  disabled?: boolean;
+  separator?: boolean; // renders <div class="dropdown-divider">
+  header?: boolean;    // renders <div class="dropdown-header">
+}
+```

package/guidelines/tier2/stepper.md

@@ -0,0 +1,39 @@
+# Stepper (Tier 2 — Angular Element)
+
+Form-integrated step flow with validation. Wraps `ClrStepper`.
+
+## React Component
+
+```tsx
+import { Stepper } from '@dtlvmw/react';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `steps` | `StepperStep[]` | `[]` | Step definitions |
+| `onSubmit` | `() => void` | — | Form submit callback |
+
+### StepperStep
+
+```ts
+interface StepperStep {
+  id: string;
+  title: string;
+  description?: string;
+  content: string;
+}
+```
+
+### Example
+
+```tsx
+const steps = [
+  { id: 'info', title: 'Basic Info', description: 'Enter details', content: 'Fill in your name and email.' },
+  { id: 'prefs', title: 'Preferences', content: 'Select your preferences.' },
+  { id: 'confirm', title: 'Confirm', content: 'Review and submit.' },
+];
+
+<Stepper steps={steps} onSubmit={() => console.log('submitted')} />
+```

package/guidelines/tier2/tree-view.md

@@ -0,0 +1,45 @@
+# Tree View (Tier 2 — Angular Element)
+
+Recursive tree with expand/collapse and selection. Wraps `ClrTreeView`.
+
+## React Component
+
+```tsx
+import { TreeView } from '@dtlvmw/react';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `nodes` | `TreeNode[]` | `[]` | Tree data |
+
+### TreeNode
+
+```ts
+interface TreeNode {
+  label: string;
+  expanded?: boolean;
+  selected?: boolean;
+  children?: TreeNode[];
+  data?: any;
+}
+```
+
+### Example
+
+```tsx
+const nodes = [
+  {
+    label: 'src',
+    expanded: true,
+    children: [
+      { label: 'components', children: [{ label: 'App.tsx' }, { label: 'Header.tsx' }] },
+      { label: 'utils', children: [{ label: 'helpers.ts' }] },
+    ],
+  },
+  { label: 'package.json' },
+];
+
+<TreeView nodes={nodes} />
+```

package/guidelines/tier2/vertical-nav.md

@@ -0,0 +1,52 @@
+# Vertical Nav (Tier 2 — Angular Element)
+
+Collapsible side navigation with groups and icons. Wraps `ClrVerticalNav`.
+
+## React Component
+
+```tsx
+import { VerticalNav } from '@dtlvmw/react';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `NavItem[]` | `[]` | Navigation items |
+| `collapsible` | `boolean` | — | Allow collapse |
+| `collapsed` | `boolean` | — | Collapsed state |
+| `onNavItemClick` | `(item: NavItem) => void` | — | Click callback |
+
+### NavItem
+
+```ts
+interface NavItem {
+  label: string;
+  icon?: string;     // Clarity icon shape name
+  active?: boolean;
+  children?: NavItem[];  // Creates a nav group
+}
+```
+
+### Example
+
+```tsx
+const items = [
+  { label: 'Dashboard', icon: 'home', active: true },
+  {
+    label: 'Settings',
+    icon: 'cog',
+    children: [
+      { label: 'Profile' },
+      { label: 'Security' },
+    ],
+  },
+  { label: 'Users', icon: 'users' },
+];
+
+<VerticalNav
+  items={items}
+  collapsible
+  onNavItemClick={(item) => navigate(item.label)}
+/>
+```

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@dtlvmw/react",
+  "version": "0.0.1",
+  "description": "Clarity React components — CSS-only Tier 1 + Angular Element Tier 2 wrappers",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Clarity Design System",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "guidelines"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "demo": "vite --config vite.demo.config.ts"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "@dtlvmw/ui": "^0.0.1"
+  },
+  "optionalDependencies": {
+    "@dtlvmw/elements": "^0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "keywords": [
+    "clarity",
+    "react",
+    "design-system",
+    "css",
+    "angular-elements"
+  ]
+}