@arclux/arc-ui-react 2.4.0 → 2.5.0

package/README.md

@@ -1,8 +1,8 @@
 # @arclux/arc-ui-react
 
-React wrappers for [ARC UI](https://arcui.dev) web components with full TypeScript support.
+React wrappers for [ARC UI](https://arcui.dev) web components with full TypeScript support, built on [`@lit/react`](https://www.npmjs.com/package/@lit/react).
 
-> **Auto-generated** -- this package is produced by [Prism](../../prism.config.js) from the canonical source in [`@arclux/arc-ui`](../web-components/). Do not edit by hand.
+> **Auto-generated** — this package is produced by [Prism](https://www.npmjs.com/package/@arclux/prism) from the canonical source in [`@arclux/arc-ui`](https://www.npmjs.com/package/@arclux/arc-ui). Do not edit by hand.
 
 ## Installation
 
@@ -38,7 +38,7 @@ function App() {
 }
 ```
 
-Components are organized by category and can be imported from subpaths:
+Components are organized by tier and can be imported from subpaths:
 
 ```tsx
 import { Button } from '@arclux/arc-ui-react/input';
@@ -46,12 +46,28 @@ import { Card }   from '@arclux/arc-ui-react/content';
 import { AppShell } from '@arclux/arc-ui-react/layout';
 ```
 
-## Documentation
+## Events
 
-Full component docs and interactive examples: [arcui.dev](https://arcui.dev)
+Each component's `arc-*` CustomEvents are exposed as typed `onArc*` props (`arc-input` → `onArcInput`, `arc-select` → `onArcSelect`, …). The handler receives the original `CustomEvent`; payloads are on `event.detail`. Native DOM events (`onClick`, `onFocus`, …) work as usual.
+
+## Server-side rendering
+
+The wrappers register custom elements on import, which requires a DOM. In server-rendered React (e.g. Next.js App Router), use them from client components (`'use client'`).
+
+## Theming
+
+Components read design tokens from CSS custom properties. Overriding the base accent tokens re-themes every component — see the [theming guide](https://arcui.dev/docs/theming):
+
+```css
+:root {
+  --accent-primary: rgb(77, 126, 247);
+  --accent-primary-rgb: 77, 126, 247;
+}
+```
 
 ## Links
 
-- [Canonical source (`@arclux/arc-ui`)](../web-components/)
-- [Root README](../../README.md)
-- [License](../../LICENSE)
+- [Documentation & interactive examples](https://arcui.dev)
+- [Canonical source (`@arclux/arc-ui`)](https://www.npmjs.com/package/@arclux/arc-ui)
+- [Repository](https://github.com/arclight-digital/arc-ui)
+- [License (MIT)](https://github.com/arclight-digital/arc-ui/blob/main/LICENSE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-react",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "React wrappers for ARC UI Web Components.",
   "sideEffects": false,
   "type": "module",
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@arclux/arc-ui": "2.4.0"
+    "@arclux/arc-ui": "2.5.0"
   },
   "license": "MIT",
   "keywords": [

package/src/data/EventCalendar.ts

@@ -6,7 +6,7 @@ import { ArcEventCalendar } from '@arclux/arc-ui/event-calendar';
 
 export interface EventCalendarProps {
   events?: unknown[];
-  view?: string;
+  view?: 'week';
   date?: string;
   className?: string;
   children?: React.ReactNode;

package/src/feedback/NotificationPanel.ts

@@ -6,7 +6,7 @@ import { ArcNotificationPanel } from '@arclux/arc-ui/notification-panel';
 
 export interface NotificationPanelProps {
   open?: boolean;
-  position?: string;
+  position?: 'top-left' | 'top-right';
   maxHeight?: string;
   className?: string;
   children?: React.ReactNode;

package/src/layout/PageLayout.ts

@@ -5,7 +5,7 @@ import { createComponent } from '@lit/react';
 import { ArcPageLayout } from '@arclux/arc-ui/page-layout';
 
 export interface PageLayoutProps {
-  layout?: string;
+  layout?: 'centered' | 'wide' | 'sidebar-left' | 'sidebar-right';
   maxWidth?: string;
   gap?: string;
   className?: string;

package/src/layout/SplitPane.ts

@@ -5,7 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcSplitPane } from '@arclux/arc-ui/split-pane';
 
 export interface SplitPaneProps {
-  orientation?: string;
+  orientation?: 'vertical' | 'horizontal';
   ratio?: number;
   minRatio?: number;
   maxRatio?: number;

package/src/layout/StatusBar.ts

@@ -5,7 +5,7 @@ import { createComponent } from '@lit/react';
 import { ArcStatusBar } from '@arclux/arc-ui/status-bar';
 
 export interface StatusBarProps {
-  position?: string;
+  position?: 'fixed';
   className?: string;
   children?: React.ReactNode;
 }

package/src/layout/Toolbar.ts

@@ -6,7 +6,7 @@ import { ArcToolbar } from '@arclux/arc-ui/toolbar';
 
 export interface ToolbarProps {
   sticky?: boolean;
-  size?: string;
+  size?: 'sm';
   border?: boolean;
   overflow?: boolean;
   className?: string;

package/src/typography/Blockquote.ts

@@ -6,7 +6,7 @@ import { ArcBlockquote } from '@arclux/arc-ui/blockquote';
 
 export interface BlockquoteProps {
   cite?: string;
-  variant?: string;
+  variant?: 'accent';
   className?: string;
   children?: React.ReactNode;
 }