@arclux/arc-ui-react 2.11.0 → 3.0.0

package/src/content/Accordion.ts

@@ -7,6 +7,7 @@ import { ArcAccordion } from '@arclux/arc-ui/accordion';
 export interface AccordionProps {
   multiple?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onClick?: (e: Event) => void;
 }
 

package/src/content/Callout.ts

@@ -5,11 +5,11 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcCallout } from '@arclux/arc-ui/callout';
 
 export interface CalloutProps {
-  variant?: 'info' | 'warning' | 'tip' | 'danger';
+  variant?: 'info' | 'tip' | 'warning' | 'error';
   dismissible?: boolean;
   className?: string;
   children?: React.ReactNode;
-  onArcDismiss?: (e: CustomEvent) => void;
+  onArcClose?: (e: CustomEvent) => void;
 }
 
 export const Callout = createComponent({
@@ -17,6 +17,6 @@ export const Callout = createComponent({
   elementClass: ArcCallout,
   react: React,
   events: {
-    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+    onArcClose: 'arc-close' as EventName<CustomEvent>,
   },
 });

package/src/content/Hotspot.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 { ArcHotspot } from '@arclux/arc-ui/hotspot';
+
+export interface HotspotProps {
+  x?: number;
+  y?: number;
+  label?: string;
+  open?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcOpen?: (e: CustomEvent) => void;
+  onArcClose?: (e: CustomEvent) => void;
+  onClick?: (e: Event) => void;
+}
+
+export const Hotspot = createComponent({
+  tagName: 'arc-hotspot',
+  elementClass: ArcHotspot,
+  react: React,
+  events: {
+    onArcOpen: 'arc-open' as EventName<CustomEvent>,
+    onArcClose: 'arc-close' as EventName<CustomEvent>,
+    onClick: 'click' as EventName<Event>,
+  },
+});

package/src/content/Icon.ts

@@ -9,6 +9,7 @@ export interface IconProps {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   label?: string;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Icon = createComponent({

package/src/content/ImageCompare.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 { ArcImageCompare } from '@arclux/arc-ui/image-compare';
+
+export interface ImageCompareProps {
+  position?: number;
+  orientation?: 'horizontal' | 'vertical';
+  beforeLabel?: string;
+  afterLabel?: string;
+  label?: string;
+  className?: string;
+  onArcInput?: (e: CustomEvent) => void;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const ImageCompare = createComponent({
+  tagName: 'arc-image-compare',
+  elementClass: ArcImageCompare,
+  react: React,
+  events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/content/ImageHotspots.ts

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

package/src/content/Lightbox.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 { ArcLightbox } from '@arclux/arc-ui/lightbox';
+
+export interface LightboxProps {
+  images?: string;
+  index?: number;
+  open?: boolean;
+  className?: string;
+  onArcChange?: (e: CustomEvent) => void;
+  onArcClose?: (e: CustomEvent) => void;
+  onArcOpen?: (e: CustomEvent) => void;
+}
+
+export const Lightbox = createComponent({
+  tagName: 'arc-lightbox',
+  elementClass: ArcLightbox,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+    onArcClose: 'arc-close' as EventName<CustomEvent>,
+    onArcOpen: 'arc-open' as EventName<CustomEvent>,
+  },
+});

package/src/content/Video.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 { ArcVideo } from '@arclux/arc-ui/video';
+
+export interface VideoProps {
+  src?: string;
+  poster?: string;
+  label?: string;
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  controls?: boolean;
+  preload?: 'none' | 'metadata' | 'auto';
+  className?: string;
+  onArcPlay?: (e: CustomEvent) => void;
+  onArcPause?: (e: CustomEvent) => void;
+  onArcEnded?: (e: CustomEvent) => void;
+}
+
+export const Video = createComponent({
+  tagName: 'arc-video',
+  elementClass: ArcVideo,
+  react: React,
+  events: {
+    onArcPlay: 'arc-play' as EventName<CustomEvent>,
+    onArcPause: 'arc-pause' as EventName<CustomEvent>,
+    onArcEnded: 'arc-ended' as EventName<CustomEvent>,
+  },
+});

package/src/content/VirtualList.ts

@@ -1,18 +1,83 @@
-// Auto-generated by @arclux/prism — do not edit manually
+// Hand-authored — NOT generated by prism, and prism will not overwrite it
+// (it only replaces files carrying its header).
+//
+// Every other wrapper in this package is a thin pass-through, because every
+// other component needs nothing more. Virtualization does: the whole point is
+// that rows don't exist until they're on screen, and only React can create a
+// React row. A generated wrapper can pass the element's `renderItem` callback
+// through, but that callback has to return DOM — so a React consumer building
+// React rows cannot use it.
+//
+// This wrapper does what a React virtualizer does instead: it listens for the
+// element's `arc-range-change`, keeps the visible range in state, and renders
+// exactly those rows as light-DOM children carrying `slot="item-N"`. The
+// element owns the scroll geometry; React owns the rows.
+//
+// Stays a .ts file (no JSX) deliberately: prism writes `VirtualList.ts` for
+// this component, and a `.tsx` here would leave a generated `.ts` beside it
+// exporting the same name. Nothing is lost — this package has no JSX anywhere.
+import { createElement, useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
+import '@arclux/arc-ui/virtual-list';
 
-import React from 'react';
-import { createComponent } from '@lit/react';
-import { ArcVirtualList } from '@arclux/arc-ui/virtual-list';
-
-export interface VirtualListProps {
-  items?: unknown[];
+export interface VirtualListProps<T = unknown> {
+  /** The full data array. Only the visible slice is rendered. */
+  items: T[];
+  /** Renders one row. Called only for rows currently on screen. */
+  renderItem: (item: T, index: number) => ReactNode;
+  /** Row height in pixels. Must match what actually renders. */
   itemHeight?: number;
+  /** Rows rendered above and below the viewport, to cover fast scrolling. */
   overscan?: number;
+  /** Called when the visible range changes. `end` is exclusive. */
+  onRangeChange?: (range: { start: number; end: number }) => void;
   className?: string;
+  style?: CSSProperties;
+  id?: string;
 }
 
-export const VirtualList = createComponent({
-  tagName: 'arc-virtual-list',
-  elementClass: ArcVirtualList,
-  react: React,
-});
+type ListElement = HTMLElement & {
+  items?: unknown[];
+  visibleRange?: { start: number; end: number };
+};
+
+export function VirtualList<T = unknown>({
+  items,
+  renderItem,
+  itemHeight = 40,
+  overscan = 5,
+  onRangeChange,
+  ...rest
+}: VirtualListProps<T>) {
+  const ref = useRef<ListElement>(null);
+  const [range, setRange] = useState({ start: 0, end: 0 });
+
+  // `items` is an array, so it has to be set as a property — as an attribute it
+  // would stringify.
+  useEffect(() => {
+    const el = ref.current;
+    if (el) el.items = items;
+  }, [items]);
+
+  const onRange = useCallback((e: Event) => {
+    const { start, end } = (e as CustomEvent).detail;
+    setRange({ start, end });
+    onRangeChange?.({ start, end });
+  }, [onRangeChange]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.addEventListener('arc-range-change', onRange);
+    // The element may have measured before this effect ran, in which case its
+    // first range event is already spent.
+    if (el.visibleRange) setRange({ ...el.visibleRange });
+    return () => el.removeEventListener('arc-range-change', onRange);
+  }, [onRange]);
+
+  const rows: ReactNode[] = [];
+  for (let i = range.start; i < Math.min(range.end, items.length); i++) {
+    rows.push(createElement('div', { key: i, slot: `item-${i}` }, renderItem(items[i], i)));
+  }
+
+  return createElement('arc-virtual-list', { ref, 'item-height': itemHeight, overscan, ...rest }, rows);
+}

package/src/content/index.ts

@@ -80,3 +80,18 @@ export type { AccordionProps } from './Accordion.js';
 
 export { Avatar } from './Avatar.js';
 export type { AvatarProps } from './Avatar.js';
+
+export { Hotspot } from './Hotspot.js';
+export type { HotspotProps } from './Hotspot.js';
+
+export { ImageCompare } from './ImageCompare.js';
+export type { ImageCompareProps } from './ImageCompare.js';
+
+export { ImageHotspots } from './ImageHotspots.js';
+export type { ImageHotspotsProps } from './ImageHotspots.js';
+
+export { Lightbox } from './Lightbox.js';
+export type { LightboxProps } from './Lightbox.js';
+
+export { Video } from './Video.js';
+export type { VideoProps } from './Video.js';

package/src/data/ActivityHeatmap.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ArcActivityHeatmap } from '@arclux/arc-ui/activity-heatmap';
+
+export interface ActivityHeatmapProps {
+  data?: Array<{date: string, value: number, label?: string}>;
+  endDate?: string;
+  weeks?: number;
+  weekStart?: string;
+  max?: number;
+  legend?: boolean;
+  className?: string;
+}
+
+export const ActivityHeatmap = createComponent({
+  tagName: 'arc-activity-heatmap',
+  elementClass: ArcActivityHeatmap,
+  react: React,
+});

package/src/data/Clock.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ArcClock } from '@arclux/arc-ui/clock';
+
+export interface ClockProps {
+  variant?: 'digital' | 'analog';
+  timezone?: string;
+  label?: string;
+  showSeconds?: boolean;
+  hour12?: boolean;
+  showTimezone?: boolean;
+  className?: string;
+}
+
+export const Clock = createComponent({
+  tagName: 'arc-clock',
+  elementClass: ArcClock,
+  react: React,
+});

package/src/data/Comparison.ts

@@ -7,6 +7,7 @@ import { ArcComparison } from '@arclux/arc-ui/comparison';
 export interface ComparisonProps {
   features?: string;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Comparison = createComponent({

package/src/data/ComparisonColumn.ts

@@ -9,7 +9,6 @@ export interface ComparisonColumnProps {
   highlight?: boolean;
   values?: string;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const ComparisonColumn = createComponent({

package/src/data/DataGrid.ts

@@ -14,7 +14,7 @@ export interface DataGridProps {
   rowHeight?: number;
   className?: string;
   onArcSort?: (e: CustomEvent) => void;
-  onArcSelectionChange?: (e: CustomEvent) => void;
+  onArcSelect?: (e: CustomEvent) => void;
   onArcCellChange?: (e: CustomEvent) => void;
 }
 
@@ -24,7 +24,7 @@ export const DataGrid = createComponent({
   react: React,
   events: {
     onArcSort: 'arc-sort' as EventName<CustomEvent>,
-    onArcSelectionChange: 'arc-selection-change' as EventName<CustomEvent>,
+    onArcSelect: 'arc-select' as EventName<CustomEvent>,
     onArcCellChange: 'arc-cell-change' as EventName<CustomEvent>,
   },
 });

package/src/data/DataTable.ts

@@ -15,8 +15,7 @@ export interface DataTableProps {
   className?: string;
   children?: React.ReactNode;
   onArcSort?: (e: CustomEvent) => void;
-  onArcSelectAll?: (e: CustomEvent) => void;
-  onArcRowSelect?: (e: CustomEvent) => void;
+  onArcSelect?: (e: CustomEvent) => void;
 }
 
 export const DataTable = createComponent({
@@ -25,7 +24,6 @@ export const DataTable = createComponent({
   react: React,
   events: {
     onArcSort: 'arc-sort' as EventName<CustomEvent>,
-    onArcSelectAll: 'arc-select-all' as EventName<CustomEvent>,
-    onArcRowSelect: 'arc-row-select' as EventName<CustomEvent>,
+    onArcSelect: 'arc-select' as EventName<CustomEvent>,
   },
 });

package/src/data/Diff.ts

@@ -5,8 +5,8 @@ import { createComponent } from '@lit/react';
 import { ArcDiff } from '@arclux/arc-ui/diff';
 
 export interface DiffProps {
-  before?: string;
-  after?: string;
+  original?: string;
+  revised?: string;
   mode?: 'inline' | 'side-by-side';
   className?: string;
 }

package/src/data/EventCalendar.ts

@@ -5,6 +5,8 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcEventCalendar } from '@arclux/arc-ui/event-calendar';
 
 export interface EventCalendarProps {
+  locale?: string;
+  firstDayOfWeek?: number;
   events?: Array<{date:string,end?:string,label:string,color?:number}>;
   view?: 'month' | 'week';
   date?: string;

package/src/data/Gauge.ts

@@ -0,0 +1,25 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ArcGauge } from '@arclux/arc-ui/gauge';
+
+export interface GaugeProps {
+  value?: number;
+  min?: number;
+  max?: number;
+  low?: number;
+  high?: number;
+  optimum?: number;
+  label?: string;
+  unit?: string;
+  variant?: 'full' | 'half';
+  showValue?: boolean;
+  className?: string;
+}
+
+export const Gauge = createComponent({
+  tagName: 'arc-gauge',
+  elementClass: ArcGauge,
+  react: React,
+});

package/src/data/JsonTree.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 { ArcJsonTree } from '@arclux/arc-ui/json-tree';
+
+export interface JsonTreeProps {
+  data?: Record<string, unknown>;
+  json?: string;
+  expanded?: number | boolean;
+  keysQuoted?: boolean;
+  className?: string;
+  onArcToggle?: (e: CustomEvent) => void;
+}
+
+export const JsonTree = createComponent({
+  tagName: 'arc-json-tree',
+  elementClass: ArcJsonTree,
+  react: React,
+  events: {
+    onArcToggle: 'arc-toggle' as EventName<CustomEvent>,
+  },
+});

package/src/data/LevelMeter.ts

@@ -0,0 +1,24 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ArcLevelMeter } from '@arclux/arc-ui/level-meter';
+
+export interface LevelMeterProps {
+  value?: number;
+  min?: number;
+  max?: number;
+  peak?: number;
+  orientation?: 'vertical' | 'horizontal';
+  segments?: number;
+  warn?: number;
+  clip?: number;
+  label?: string;
+  className?: string;
+}
+
+export const LevelMeter = createComponent({
+  tagName: 'arc-level-meter',
+  elementClass: ArcLevelMeter,
+  react: React,
+});

package/src/data/List.ts

@@ -14,7 +14,7 @@ export interface ListProps {
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
-  onArcItemSelect?: (e: CustomEvent) => void;
+  onArcSelect?: (e: CustomEvent) => void;
 }
 
 export const List = createComponent({
@@ -23,6 +23,6 @@ export const List = createComponent({
   react: React,
   events: {
     onArcChange: 'arc-change' as EventName<CustomEvent>,
-    onArcItemSelect: 'arc-item-select' as EventName<CustomEvent>,
+    onArcSelect: 'arc-select' as EventName<CustomEvent>,
   },
 });

package/src/data/ListItem.ts

@@ -10,7 +10,8 @@ export interface ListItemProps {
   disabled?: boolean;
   href?: string;
   className?: string;
-  onArcItemSelect?: (e: CustomEvent) => void;
+  children?: React.ReactNode;
+  onArcSelect?: (e: CustomEvent) => void;
 }
 
 export const ListItem = createComponent({
@@ -18,6 +19,6 @@ export const ListItem = createComponent({
   elementClass: ArcListItem,
   react: React,
   events: {
-    onArcItemSelect: 'arc-item-select' as EventName<CustomEvent>,
+    onArcSelect: 'arc-select' as EventName<CustomEvent>,
   },
 });

package/src/data/Stepper.ts

@@ -7,6 +7,7 @@ import { ArcStepper } from '@arclux/arc-ui/stepper';
 export interface StepperProps {
   active?: number;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Stepper = createComponent({

package/src/data/Table.ts

@@ -8,7 +8,7 @@ export interface TableProps {
   columns?: string[];
   rows?: string[][];
   striped?: boolean;
-  compact?: boolean;
+  density?: 'default' | 'compact';
   className?: string;
 }
 

package/src/data/Tag.ts

@@ -5,7 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcTag } from '@arclux/arc-ui/tag';
 
 export interface TagProps {
-  variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+  variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
   size?: 'sm' | 'md' | 'lg';
   removable?: boolean;
   disabled?: boolean;

package/src/data/Uptime.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ArcUptime } from '@arclux/arc-ui/uptime';
+
+export interface UptimeProps {
+  data?: Array<number | {value?: number, status?: 'up' | 'degraded' | 'down' | 'none', label?: string}>;
+  startLabel?: string;
+  endLabel?: string;
+  summary?: boolean;
+  className?: string;
+}
+
+export const Uptime = createComponent({
+  tagName: 'arc-uptime',
+  elementClass: ArcUptime,
+  react: React,
+});

package/src/data/Waveform.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 { ArcWaveform } from '@arclux/arc-ui/waveform';
+
+export interface WaveformProps {
+  peaks?: string;
+  position?: number;
+  duration?: number;
+  interactive?: boolean;
+  variant?: 'bars' | 'mirror';
+  label?: string;
+  className?: string;
+  onArcInput?: (e: CustomEvent) => void;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const Waveform = createComponent({
+  tagName: 'arc-waveform',
+  elementClass: ArcWaveform,
+  react: React,
+  events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/data/index.ts

@@ -80,3 +80,24 @@ export type { TableProps } from './Table.js';
 
 export { Timeline } from './Timeline.js';
 export type { TimelineProps } from './Timeline.js';
+
+export { Clock } from './Clock.js';
+export type { ClockProps } from './Clock.js';
+
+export { Gauge } from './Gauge.js';
+export type { GaugeProps } from './Gauge.js';
+
+export { LevelMeter } from './LevelMeter.js';
+export type { LevelMeterProps } from './LevelMeter.js';
+
+export { Uptime } from './Uptime.js';
+export type { UptimeProps } from './Uptime.js';
+
+export { Waveform } from './Waveform.js';
+export type { WaveformProps } from './Waveform.js';
+
+export { ActivityHeatmap } from './ActivityHeatmap.js';
+export type { ActivityHeatmapProps } from './ActivityHeatmap.js';
+
+export { JsonTree } from './JsonTree.js';
+export type { JsonTreeProps } from './JsonTree.js';

package/src/feedback/Alert.ts

@@ -6,12 +6,12 @@ import { ArcAlert } from '@arclux/arc-ui/alert';
 
 export interface AlertProps {
   variant?: 'info' | 'success' | 'warning' | 'error';
-  compact?: boolean;
+  density?: 'default' | 'compact';
   dismissible?: boolean;
   heading?: string;
   className?: string;
   children?: React.ReactNode;
-  onArcDismiss?: (e: CustomEvent) => void;
+  onArcClose?: (e: CustomEvent) => void;
 }
 
 export const Alert = createComponent({
@@ -19,6 +19,6 @@ export const Alert = createComponent({
   elementClass: ArcAlert,
   react: React,
   events: {
-    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+    onArcClose: 'arc-close' as EventName<CustomEvent>,
   },
 });