@arclux/arc-ui-react 1.9.2 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-react",
-  "version": "1.9.2",
+  "version": "1.10.1",
   "description": "React wrappers for ARC UI Web Components.",
   "type": "module",
   "main": "src/index.ts",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@arclux/arc-ui": "1.9.2"
+    "@arclux/arc-ui": "1.10.1"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Avatar.ts

@@ -10,6 +10,7 @@ export interface AvatarProps {
   size?: 'sm' | 'md' | 'lg';
   shape?: 'square' | 'rounded';
   status?: 'online' | 'offline' | 'busy' | 'away';
+  _imgState?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/DataTable.ts

@@ -10,8 +10,12 @@ export interface DataTableProps {
   selectable?: boolean;
   sortColumn?: string;
   sortDirection?: string;
+  virtual?: boolean;
+  rowHeight?: number;
   _columns?: string;
   _selectedRows?: string;
+  _startIndex?: string;
+  _visibleCount?: string;
   className?: string;
   children?: React.ReactNode;
   onArcSort?: (e: CustomEvent) => void;

package/src/content/Image.ts

@@ -0,0 +1,29 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcImage } from '@arclux/arc-ui';
+
+export interface ImageProps {
+  src?: string;
+  alt?: string;
+  aspect?: '1/1' | '4/3' | '16/9' | '21/9' | '3/4' | '9/16';
+  fit?: 'contain' | 'fill' | 'none' | 'scale-down';
+  loading?: string;
+  fallback?: string;
+  _state?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcLoad?: (e: CustomEvent) => void;
+  onArcError?: (e: CustomEvent) => void;
+}
+
+export const Image = createComponent({
+  tagName: 'arc-image',
+  elementClass: ArcImage,
+  react: React,
+  events: {
+    onArcLoad: 'arc-load' as EventName<CustomEvent>,
+    onArcError: 'arc-error' as EventName<CustomEvent>,
+  },
+});

package/src/content/List.ts

@@ -0,0 +1,28 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcList } from '@arclux/arc-ui';
+
+export interface ListProps {
+  variant?: 'bordered' | 'separated';
+  size?: 'sm' | 'lg';
+  selectable?: boolean;
+  multiple?: boolean;
+  value?: string;
+  _items?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+  onArcItemClick?: (e: CustomEvent) => void;
+}
+
+export const List = createComponent({
+  tagName: 'arc-list',
+  elementClass: ArcList,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+    onArcItemClick: 'arc-item-click' as EventName<CustomEvent>,
+  },
+});

package/src/content/ListItem.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 { ArcListItem } from '@arclux/arc-ui';
+
+export interface ListItemProps {
+  value?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  href?: string;
+  _hasPrefix?: string;
+  _hasSuffix?: string;
+  _hasDescription?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcItemClick?: (e: CustomEvent) => void;
+}
+
+export const ListItem = createComponent({
+  tagName: 'arc-list-item',
+  elementClass: ArcListItem,
+  react: React,
+  events: {
+    onArcItemClick: 'arc-item-click' as EventName<CustomEvent>,
+  },
+});

package/src/content/ScrollIndicator.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcScrollIndicator } from '@arclux/arc-ui';
+
+export interface ScrollIndicatorProps {
+  target?: string;
+  position?: 'bottom';
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'gradient';
+  _progress?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ScrollIndicator = createComponent({
+  tagName: 'arc-scroll-indicator',
+  elementClass: ArcScrollIndicator,
+  react: React,
+});

package/src/content/Separator.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 { ArcSeparator } from '@arclux/arc-ui';
+
+export interface SeparatorProps {
+  orientation?: 'vertical';
+  label?: string;
+  variant?: 'dashed' | 'dotted' | 'fade';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Separator = createComponent({
+  tagName: 'arc-separator',
+  elementClass: ArcSeparator,
+  react: React,
+});

package/src/content/VirtualList.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcVirtualList } from '@arclux/arc-ui';
+
+export interface VirtualListProps {
+  items?: unknown[];
+  itemHeight?: number;
+  overscan?: number;
+  _startIndex?: string;
+  _visibleCount?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const VirtualList = createComponent({
+  tagName: 'arc-virtual-list',
+  elementClass: ArcVirtualList,
+  react: React,
+});

package/src/content/index.ts

@@ -123,3 +123,18 @@ export type { CtaBannerProps } from './CtaBanner.js';
 
 export { IconLibrary } from './IconLibrary.js';
 export type { IconLibraryProps } from './IconLibrary.js';
+
+export { Image } from './Image.js';
+export type { ImageProps } from './Image.js';
+
+export { ListItem } from './ListItem.js';
+export type { ListItemProps } from './ListItem.js';
+
+export { ScrollIndicator } from './ScrollIndicator.js';
+export type { ScrollIndicatorProps } from './ScrollIndicator.js';
+
+export { Separator } from './Separator.js';
+export type { SeparatorProps } from './Separator.js';
+
+export { VirtualList } from './VirtualList.js';
+export type { VirtualListProps } from './VirtualList.js';

package/src/data/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/data/Badge.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 { ArcBadge } from '@arclux/arc-ui';
+
+export interface BadgeProps {
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'lg';
+  color?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Badge = createComponent({
+  tagName: 'arc-badge',
+  elementClass: ArcBadge,
+  react: React,
+});

package/src/data/DataTable.ts

@@ -0,0 +1,35 @@
+// 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;
+  virtual?: boolean;
+  rowHeight?: number;
+  _columns?: string;
+  _selectedRows?: string;
+  _startIndex?: string;
+  _visibleCount?: 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/data/List.ts

@@ -0,0 +1,28 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcList } from '@arclux/arc-ui';
+
+export interface ListProps {
+  variant?: 'bordered' | 'separated';
+  size?: 'sm' | 'lg';
+  selectable?: boolean;
+  multiple?: boolean;
+  value?: string;
+  _items?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+  onArcItemClick?: (e: CustomEvent) => void;
+}
+
+export const List = createComponent({
+  tagName: 'arc-list',
+  elementClass: ArcList,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+    onArcItemClick: 'arc-item-click' as EventName<CustomEvent>,
+  },
+});

package/src/data/ListItem.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 { ArcListItem } from '@arclux/arc-ui';
+
+export interface ListItemProps {
+  value?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  href?: string;
+  _hasPrefix?: string;
+  _hasSuffix?: string;
+  _hasDescription?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcItemClick?: (e: CustomEvent) => void;
+}
+
+export const ListItem = createComponent({
+  tagName: 'arc-list-item',
+  elementClass: ArcListItem,
+  react: React,
+  events: {
+    onArcItemClick: 'arc-item-click' as EventName<CustomEvent>,
+  },
+});

package/src/data/Meter.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 { ArcMeter } from '@arclux/arc-ui';
+
+export interface MeterProps {
+  value?: number;
+  min?: number;
+  max?: number;
+  low?: number;
+  high?: number;
+  optimum?: number;
+  label?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Meter = createComponent({
+  tagName: 'arc-meter',
+  elementClass: ArcMeter,
+  react: React,
+});

package/src/data/Stat.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 { ArcStat } from '@arclux/arc-ui';
+
+export interface StatProps {
+  value?: string;
+  label?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  change?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Stat = createComponent({
+  tagName: 'arc-stat',
+  elementClass: ArcStat,
+  react: React,
+});

package/src/data/Step.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 { ArcStep } from '@arclux/arc-ui';
+
+export interface StepProps {
+  label?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Step = createComponent({
+  tagName: 'arc-step',
+  elementClass: ArcStep,
+  react: React,
+});

package/src/data/Stepper.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 { ArcStepper } from '@arclux/arc-ui';
+
+export interface StepperProps {
+  active?: number;
+  _steps?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Stepper = createComponent({
+  tagName: 'arc-stepper',
+  elementClass: ArcStepper,
+  react: React,
+});

package/src/data/Table.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 { ArcTable } from '@arclux/arc-ui';
+
+export interface TableProps {
+  columns?: unknown[];
+  rows?: unknown[];
+  striped?: boolean;
+  compact?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Table = createComponent({
+  tagName: 'arc-table',
+  elementClass: ArcTable,
+  react: React,
+});

package/src/data/Tag.ts

@@ -0,0 +1,25 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcTag } from '@arclux/arc-ui';
+
+export interface TagProps {
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+  size?: 'sm' | 'lg';
+  removable?: boolean;
+  disabled?: boolean;
+  color?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcRemove?: (e: CustomEvent) => void;
+}
+
+export const Tag = createComponent({
+  tagName: 'arc-tag',
+  elementClass: ArcTag,
+  react: React,
+  events: {
+    onArcRemove: 'arc-remove' as EventName<CustomEvent>,
+  },
+});

package/src/data/Timeline.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 { ArcTimeline } from '@arclux/arc-ui';
+
+export interface TimelineProps {
+  _items?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Timeline = createComponent({
+  tagName: 'arc-timeline',
+  elementClass: ArcTimeline,
+  react: React,
+});

package/src/data/TimelineItem.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 { ArcTimelineItem } from '@arclux/arc-ui';
+
+export interface TimelineItemProps {
+  heading?: string;
+  date?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const TimelineItem = createComponent({
+  tagName: 'arc-timeline-item',
+  elementClass: ArcTimelineItem,
+  react: React,
+});

package/src/data/ValueCard.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 { ArcValueCard } from '@arclux/arc-ui';
+
+export interface ValueCardProps {
+  icon?: string;
+  heading?: string;
+  description?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ValueCard = createComponent({
+  tagName: 'arc-value-card',
+  elementClass: ArcValueCard,
+  react: React,
+});

package/src/feedback/Announcement.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 { ArcAnnouncement } from '@arclux/arc-ui';
+
+export interface AnnouncementProps {
+  politeness?: string;
+  message?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Announcement = createComponent({
+  tagName: 'arc-announcement',
+  elementClass: ArcAnnouncement,
+  react: React,
+});

package/src/feedback/Banner.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 { ArcBanner } from '@arclux/arc-ui';
+
+export interface BannerProps {
+  variant?: string;
+  dismissible?: boolean;
+  sticky?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcDismiss?: (e: CustomEvent) => void;
+}
+
+export const Banner = createComponent({
+  tagName: 'arc-banner',
+  elementClass: ArcBanner,
+  react: React,
+  events: {
+    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/CommandPalette.ts

@@ -8,7 +8,6 @@ export interface CommandPaletteProps {
   open?: boolean;
   placeholder?: string;
   _query?: string;
-  _focusedIndex?: string;
   _items?: string;
   className?: string;
   children?: React.ReactNode;

package/src/feedback/Confirm.ts

@@ -0,0 +1,26 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcConfirm } from '@arclux/arc-ui';
+
+export interface ConfirmProps {
+  open?: boolean;
+  heading?: string;
+  message?: string;
+  variant?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcConfirm?: (e: CustomEvent) => void;
+  onArcCancel?: (e: CustomEvent) => void;
+}
+
+export const Confirm = createComponent({
+  tagName: 'arc-confirm',
+  elementClass: ArcConfirm,
+  react: React,
+  events: {
+    onArcConfirm: 'arc-confirm' as EventName<CustomEvent>,
+    onArcCancel: 'arc-cancel' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/ConnectionStatus.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 { ArcConnectionStatus } from '@arclux/arc-ui';
+
+export interface ConnectionStatusProps {
+  online?: string;
+  _visible?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcOnline?: (e: CustomEvent) => void;
+  onArcOffline?: (e: CustomEvent) => void;
+}
+
+export const ConnectionStatus = createComponent({
+  tagName: 'arc-connection-status',
+  elementClass: ArcConnectionStatus,
+  react: React,
+  events: {
+    onArcOnline: 'arc-online' as EventName<CustomEvent>,
+    onArcOffline: 'arc-offline' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/Dialog.ts

@@ -8,12 +8,11 @@ export interface DialogProps {
   open?: boolean;
   heading?: string;
   message?: string;
-  variant?: 'danger';
+  variant?: string;
   className?: string;
   children?: React.ReactNode;
   onArcConfirm?: (e: CustomEvent) => void;
   onArcCancel?: (e: CustomEvent) => void;
-  onClick?: (e: Event) => void;
 }
 
 export const Dialog = createComponent({
@@ -23,6 +22,5 @@ export const Dialog = createComponent({
   events: {
     onArcConfirm: 'arc-confirm' as EventName<CustomEvent>,
     onArcCancel: 'arc-cancel' as EventName<CustomEvent>,
-    onClick: 'click' as EventName<Event>,
   },
 });

package/src/feedback/DropdownMenu.ts

@@ -6,7 +6,6 @@ import { ArcDropdownMenu } from '@arclux/arc-ui';
 
 export interface DropdownMenuProps {
   open?: boolean;
-  _focusedIndex?: string;
   _children?: string;
   className?: string;
   children?: React.ReactNode;