@arclux/arc-ui-react 1.9.2 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-react",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "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.0"
   },
   "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/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;

package/src/feedback/GuidedTour.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 { ArcGuidedTour } from '@arclux/arc-ui';
+
+export interface GuidedTourProps {
+  steps?: string;
+  active?: string;
+  open?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+  onArcComplete?: (e: CustomEvent) => void;
+  onArcDismiss?: (e: CustomEvent) => void;
+}
+
+export const GuidedTour = createComponent({
+  tagName: 'arc-guided-tour',
+  elementClass: ArcGuidedTour,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+    onArcComplete: 'arc-complete' as EventName<CustomEvent>,
+    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/HoverCard.ts

@@ -5,7 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcHoverCard } from '@arclux/arc-ui';
 
 export interface HoverCardProps {
-  position?: 'bottom' | 'top' | 'left' | 'right';
+  position?: string;
   openDelay?: number;
   closeDelay?: number;
   _visible?: string;

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

package/src/feedback/LoadingOverlay.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 { ArcLoadingOverlay } from '@arclux/arc-ui';
+
+export interface LoadingOverlayProps {
+  active?: boolean;
+  message?: string;
+  global?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const LoadingOverlay = createComponent({
+  tagName: 'arc-loading-overlay',
+  elementClass: ArcLoadingOverlay,
+  react: React,
+});

package/src/feedback/Popover.ts

@@ -6,7 +6,7 @@ import { ArcPopover } from '@arclux/arc-ui';
 
 export interface PopoverProps {
   open?: boolean;
-  position?: 'bottom' | 'top' | 'left' | 'right';
+  position?: string;
   trigger?: string;
   className?: string;
   children?: React.ReactNode;

package/src/feedback/ProgressToast.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 { ArcProgressToast } from '@arclux/arc-ui';
+
+export interface ProgressToastProps {
+  position?: 'bottom-right' | 'top-right';
+  _toasts?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcComplete?: (e: CustomEvent) => void;
+  onArcCancel?: (e: CustomEvent) => void;
+}
+
+export const ProgressToast = createComponent({
+  tagName: 'arc-progress-toast',
+  elementClass: ArcProgressToast,
+  react: React,
+  events: {
+    onArcComplete: 'arc-complete' as EventName<CustomEvent>,
+    onArcCancel: 'arc-cancel' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/Sheet.ts

@@ -12,7 +12,6 @@ export interface SheetProps {
   children?: React.ReactNode;
   onArcClose?: (e: CustomEvent) => void;
   onArcOpen?: (e: CustomEvent) => void;
-  onClick?: (e: Event) => void;
 }
 
 export const Sheet = createComponent({
@@ -22,6 +21,5 @@ export const Sheet = createComponent({
   events: {
     onArcClose: 'arc-close' as EventName<CustomEvent>,
     onArcOpen: 'arc-open' as EventName<CustomEvent>,
-    onClick: 'click' as EventName<Event>,
   },
 });

package/src/feedback/Snackbar.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 { ArcSnackbar } from '@arclux/arc-ui';
+
+export interface SnackbarProps {
+  position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
+  duration?: number;
+  _snackbars?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcAction?: (e: CustomEvent) => void;
+  onArcDismiss?: (e: CustomEvent) => void;
+}
+
+export const Snackbar = createComponent({
+  tagName: 'arc-snackbar',
+  elementClass: ArcSnackbar,
+  react: React,
+  events: {
+    onArcAction: 'arc-action' as EventName<CustomEvent>,
+    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/Spotlight.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 { ArcSpotlight } from '@arclux/arc-ui';
+
+export interface SpotlightProps {
+  target?: string;
+  active?: boolean;
+  padding?: number;
+  className?: string;
+  children?: React.ReactNode;
+  onArcDismiss?: (e: CustomEvent) => void;
+}
+
+export const Spotlight = createComponent({
+  tagName: 'arc-spotlight',
+  elementClass: ArcSpotlight,
+  react: React,
+  events: {
+    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/index.ts

@@ -42,3 +42,33 @@ export type { ToastProps } from './Toast.js';
 
 export { Tooltip } from './Tooltip.js';
 export type { TooltipProps } from './Tooltip.js';
+
+export { Announcement } from './Announcement.js';
+export type { AnnouncementProps } from './Announcement.js';
+
+export { Banner } from './Banner.js';
+export type { BannerProps } from './Banner.js';
+
+export { Confirm } from './Confirm.js';
+export type { ConfirmProps } from './Confirm.js';
+
+export { ConnectionStatus } from './ConnectionStatus.js';
+export type { ConnectionStatusProps } from './ConnectionStatus.js';
+
+export { GuidedTour } from './GuidedTour.js';
+export type { GuidedTourProps } from './GuidedTour.js';
+
+export { InlineMessage } from './InlineMessage.js';
+export type { InlineMessageProps } from './InlineMessage.js';
+
+export { LoadingOverlay } from './LoadingOverlay.js';
+export type { LoadingOverlayProps } from './LoadingOverlay.js';
+
+export { ProgressToast } from './ProgressToast.js';
+export type { ProgressToastProps } from './ProgressToast.js';
+
+export { Snackbar } from './Snackbar.js';
+export type { SnackbarProps } from './Snackbar.js';
+
+export { Spotlight } from './Spotlight.js';
+export type { SpotlightProps } from './Spotlight.js';