@arclux/arc-ui-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arclight Digital, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# @arclux/arc-ui-react
+
+React wrappers for [ARC UI](https://arcui.dev) web components with full TypeScript support.
+
+> **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.
+
+## Installation
+
+```bash
+npm install @arclux/arc-ui-react @arclux/arc-ui
+```
+
+Requires `react >= 18.0.0` and `react-dom >= 18.0.0`.
+
+## Usage
+
+```tsx
+import { Button, Card, Input } from '@arclux/arc-ui-react';
+
+function App() {
+  return (
+    <>
+      <Button variant="primary" onClick={() => console.log('clicked')}>
+        Get Started
+      </Button>
+      <Card>
+        <h3>Card Title</h3>
+        <p>Card content.</p>
+      </Card>
+      <Input
+        label="Email"
+        type="email"
+        placeholder="you@example.com"
+        onArcInput={(e) => console.log(e.detail.value)}
+      />
+    </>
+  );
+}
+```
+
+Components are organized by category and can be imported from subpaths:
+
+```tsx
+import { Button } from '@arclux/arc-ui-react/input';
+import { Card }   from '@arclux/arc-ui-react/content';
+import { AppShell } from '@arclux/arc-ui-react/layout';
+```
+
+## Documentation
+
+Full component docs and interactive examples: [arcui.dev](https://arcui.dev)
+
+## Links
+
+- [Canonical source (`@arclux/arc-ui`)](../web-components/)
+- [Root README](../../README.md)
+- [License](../../LICENSE)

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@arclux/arc-ui-react",
+  "version": "1.0.0",
+  "description": "React wrappers for ARC UI Web Components.",
+  "type": "module",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./content": {
+      "types": "./src/content/index.ts",
+      "default": "./src/content/index.ts"
+    },
+    "./input": {
+      "types": "./src/input/index.ts",
+      "default": "./src/input/index.ts"
+    },
+    "./feedback": {
+      "types": "./src/feedback/index.ts",
+      "default": "./src/feedback/index.ts"
+    },
+    "./navigation": {
+      "types": "./src/navigation/index.ts",
+      "default": "./src/navigation/index.ts"
+    },
+    "./layout": {
+      "types": "./src/layout/index.ts",
+      "default": "./src/layout/index.ts"
+    },
+    "./shared": {
+      "types": "./src/shared/index.ts",
+      "default": "./src/shared/index.ts"
+    }
+  },
+  "files": [
+    "src/"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@lit/react": "^1.0.8",
+    "@arclux/arc-ui": "1.0.0"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "web-components",
+    "design-system",
+    "arclight"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/arclight-digital/arc-ui",
+    "directory": "packages/react"
+  },
+  "homepage": "https://arcui.dev",
+  "bugs": {
+    "url": "https://github.com/arclight-digital/arc-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "echo 'Consumed directly via workspace — no build step required'"
+  }
+}

package/src/content/Accordion.ts

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcAccordion } from '@arclux/arc-ui';
+
+export interface AccordionProps {
+  _items?: string;
+  _openItems?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: (e: Event) => void;
+}
+
+export const Accordion = createComponent({
+  tagName: 'arc-accordion',
+  elementClass: ArcAccordion,
+  react: React,
+  events: {
+    onClick: 'click' as EventName<Event>,
+  },
+});

package/src/content/AccordionItem.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcAccordionItem } from '@arclux/arc-ui';
+
+export interface AccordionItemProps {
+  question?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const AccordionItem = createComponent({
+  tagName: 'arc-accordion-item',
+  elementClass: ArcAccordionItem,
+  react: React,
+});

package/src/content/AnimatedNumber.ts

@@ -0,0 +1,23 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcAnimatedNumber } from '@arclux/arc-ui';
+
+export interface AnimatedNumberProps {
+  value?: number;
+  duration?: number;
+  format?: string;
+  prefix?: string;
+  suffix?: string;
+  decimals?: number;
+  locale?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const AnimatedNumber = createComponent({
+  tagName: 'arc-animated-number',
+  elementClass: ArcAnimatedNumber,
+  react: React,
+});

package/src/content/AspectRatio.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcAspectRatio } from '@arclux/arc-ui';
+
+export interface AspectRatioProps {
+  ratio?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const AspectRatio = createComponent({
+  tagName: 'arc-aspect-ratio',
+  elementClass: ArcAspectRatio,
+  react: React,
+});

package/src/content/Avatar.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcAvatar } from '@arclux/arc-ui';
+
+export interface AvatarProps {
+  src?: string;
+  name?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Avatar = createComponent({
+  tagName: 'arc-avatar',
+  elementClass: ArcAvatar,
+  react: React,
+});

package/src/content/AvatarGroup.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcAvatarGroup } from '@arclux/arc-ui';
+
+export interface AvatarGroupProps {
+  max?: number;
+  overlap?: 'sm' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const AvatarGroup = createComponent({
+  tagName: 'arc-avatar-group',
+  elementClass: ArcAvatarGroup,
+  react: React,
+});

package/src/content/Badge.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcBadge } from '@arclux/arc-ui';
+
+export interface BadgeProps {
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Badge = createComponent({
+  tagName: 'arc-badge',
+  elementClass: ArcBadge,
+  react: React,
+});

package/src/content/Callout.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcCallout } from '@arclux/arc-ui';
+
+export interface CalloutProps {
+  variant?: 'info' | 'warning' | 'tip' | 'danger';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Callout = createComponent({
+  tagName: 'arc-callout',
+  elementClass: ArcCallout,
+  react: React,
+});

package/src/content/Card.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcCard } from '@arclux/arc-ui';
+
+export interface CardProps {
+  href?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Card = createComponent({
+  tagName: 'arc-card',
+  elementClass: ArcCard,
+  react: React,
+});

package/src/content/Carousel.ts

@@ -0,0 +1,27 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcCarousel } from '@arclux/arc-ui';
+
+export interface CarouselProps {
+  autoPlay?: boolean;
+  interval?: number;
+  loop?: boolean;
+  showDots?: boolean;
+  showArrows?: boolean;
+  _current?: string;
+  _total?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const Carousel = createComponent({
+  tagName: 'arc-carousel',
+  elementClass: ArcCarousel,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/content/CodeBlock.ts

@@ -0,0 +1,24 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcCodeBlock } from '@arclux/arc-ui';
+
+export interface CodeBlockProps {
+  language?: string;
+  filename?: string;
+  code?: string;
+  _copied?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: (e: Event) => void;
+}
+
+export const CodeBlock = createComponent({
+  tagName: 'arc-code-block',
+  elementClass: ArcCodeBlock,
+  react: React,
+  events: {
+    onClick: 'click' as EventName<Event>,
+  },
+});

package/src/content/Collapsible.ts

@@ -0,0 +1,24 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcCollapsible } from '@arclux/arc-ui';
+
+export interface CollapsibleProps {
+  open?: boolean;
+  heading?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcToggle?: (e: CustomEvent) => void;
+  onClick?: (e: Event) => void;
+}
+
+export const Collapsible = createComponent({
+  tagName: 'arc-collapsible',
+  elementClass: ArcCollapsible,
+  react: React,
+  events: {
+    onArcToggle: 'arc-toggle' as EventName<CustomEvent>,
+    onClick: 'click' as EventName<Event>,
+  },
+});

package/src/content/ColorSwatch.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcColorSwatch } from '@arclux/arc-ui';
+
+export interface ColorSwatchProps {
+  color?: string;
+  label?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ColorSwatch = createComponent({
+  tagName: 'arc-color-swatch',
+  elementClass: ArcColorSwatch,
+  react: React,
+});

package/src/content/Column.ts

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcColumn } from '@arclux/arc-ui';
+
+export interface ColumnProps {
+  key?: string;
+  label?: string;
+  sortable?: boolean;
+  width?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Column = createComponent({
+  tagName: 'arc-column',
+  elementClass: ArcColumn,
+  react: React,
+});

package/src/content/DataTable.ts

@@ -0,0 +1,31 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcDataTable } from '@arclux/arc-ui';
+
+export interface DataTableProps {
+  rows?: unknown[];
+  sortable?: boolean;
+  selectable?: boolean;
+  sortColumn?: string;
+  sortDirection?: string;
+  _columns?: string;
+  _selectedRows?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcSort?: (e: CustomEvent) => void;
+  onArcSelectAll?: (e: CustomEvent) => void;
+  onArcRowSelect?: (e: CustomEvent) => void;
+}
+
+export const DataTable = createComponent({
+  tagName: 'arc-data-table',
+  elementClass: ArcDataTable,
+  react: React,
+  events: {
+    onArcSort: 'arc-sort' as EventName<CustomEvent>,
+    onArcSelectAll: 'arc-select-all' as EventName<CustomEvent>,
+    onArcRowSelect: 'arc-row-select' as EventName<CustomEvent>,
+  },
+});

package/src/content/Divider.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcDivider } from '@arclux/arc-ui';
+
+export interface DividerProps {
+  variant?: 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient';
+  align?: 'left' | 'right';
+  vertical?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Divider = createComponent({
+  tagName: 'arc-divider',
+  elementClass: ArcDivider,
+  react: React,
+});

package/src/content/EmptyState.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcEmptyState } from '@arclux/arc-ui';
+
+export interface EmptyStateProps {
+  heading?: string;
+  description?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const EmptyState = createComponent({
+  tagName: 'arc-empty-state',
+  elementClass: ArcEmptyState,
+  react: React,
+});

package/src/content/FeatureCard.ts

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcFeatureCard } from '@arclux/arc-ui';
+
+export interface FeatureCardProps {
+  icon?: string;
+  heading?: string;
+  description?: string;
+  href?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const FeatureCard = createComponent({
+  tagName: 'arc-feature-card',
+  elementClass: ArcFeatureCard,
+  react: React,
+});

package/src/content/Highlight.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcHighlight } from '@arclux/arc-ui';
+
+export interface HighlightProps {
+  text?: string;
+  query?: string;
+  caseSensitive?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Highlight = createComponent({
+  tagName: 'arc-highlight',
+  elementClass: ArcHighlight,
+  react: React,
+});

package/src/content/Icon.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcIcon } from '@arclux/arc-ui';
+
+export interface IconProps {
+  name?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  label?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Icon = createComponent({
+  tagName: 'arc-icon',
+  elementClass: ArcIcon,
+  react: React,
+});

package/src/content/InfiniteScroll.ts

@@ -0,0 +1,24 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcInfiniteScroll } from '@arclux/arc-ui';
+
+export interface InfiniteScrollProps {
+  threshold?: number;
+  loading?: boolean;
+  finished?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcLoadMore?: (e: CustomEvent) => void;
+}
+
+export const InfiniteScroll = createComponent({
+  tagName: 'arc-infinite-scroll',
+  elementClass: ArcInfiniteScroll,
+  react: React,
+  events: {
+    onArcLoadMore: 'arc-load-more' as EventName<CustomEvent>,
+  },
+});

package/src/content/Kbd.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcKbd } from '@arclux/arc-ui';
+
+export interface KbdProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Kbd = createComponent({
+  tagName: 'arc-kbd',
+  elementClass: ArcKbd,
+  react: React,
+});

package/src/content/Markdown.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcMarkdown } from '@arclux/arc-ui';
+
+export interface MarkdownProps {
+  content?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Markdown = createComponent({
+  tagName: 'arc-markdown',
+  elementClass: ArcMarkdown,
+  react: React,
+});

package/src/content/Marquee.ts

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcMarquee } from '@arclux/arc-ui';
+
+export interface MarqueeProps {
+  speed?: number;
+  direction?: string;
+  gap?: string;
+  _animDuration?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Marquee = createComponent({
+  tagName: 'arc-marquee',
+  elementClass: ArcMarquee,
+  react: React,
+});