@arclux/arc-ui-react 2.9.0 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-react",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "description": "React wrappers for ARC UI Web Components.",
   "sideEffects": false,
   "type": "module",
@@ -43,6 +43,10 @@
     "./shared": {
       "types": "./src/shared/index.ts",
       "default": "./src/shared/index.ts"
+    },
+    "./*": {
+      "types": "./src/*.ts",
+      "default": "./src/*.ts"
     }
   },
   "files": [
@@ -54,7 +58,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@arclux/arc-ui": "2.9.0"
+    "@arclux/arc-ui": "2.11.0"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Accordion.ts

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

package/src/content/Avatar.ts

@@ -8,10 +8,9 @@ export interface AvatarProps {
   src?: string;
   name?: string;
   size?: 'sm' | 'md' | 'lg';
-  shape?: 'square' | 'rounded';
+  shape?: 'circle' | 'square' | 'rounded';
   status?: 'online' | 'offline' | 'busy' | 'away';
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Avatar = createComponent({

package/src/content/AvatarGroup.ts

@@ -6,7 +6,7 @@ import { ArcAvatarGroup } from '@arclux/arc-ui/avatar-group';
 
 export interface AvatarGroupProps {
   max?: number;
-  overlap?: 'sm' | 'lg';
+  overlap?: 'sm' | 'md' | 'lg';
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/Callout.ts

@@ -5,7 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcCallout } from '@arclux/arc-ui/callout';
 
 export interface CalloutProps {
-  variant?: string;
+  variant?: 'info' | 'warning' | 'tip' | 'danger';
   dismissible?: boolean;
   className?: string;
   children?: React.ReactNode;

package/src/content/Card.ts

@@ -6,7 +6,7 @@ import { ArcCard } from '@arclux/arc-ui/card';
 
 export interface CardProps {
   href?: string;
-  padding?: 'none' | 'sm' | 'lg';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
   interactive?: boolean;
   className?: string;
   children?: React.ReactNode;

package/src/content/ColorSwatch.ts

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

package/src/content/Column.ts

@@ -5,6 +5,7 @@ import { createComponent } from '@lit/react';
 import { ArcColumn } from '@arclux/arc-ui/column';
 
 export interface ColumnProps {
+  field?: string;
   key?: string;
   label?: string;
   sortable?: boolean;

package/src/content/Divider.ts

@@ -10,7 +10,6 @@ export interface DividerProps {
   vertical?: boolean;
   label?: string;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Divider = createComponent({

package/src/content/EmptyState.ts

@@ -8,7 +8,6 @@ export interface EmptyStateProps {
   heading?: string;
   description?: string;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const EmptyState = createComponent({

package/src/content/FeatureCard.ts

@@ -11,7 +11,6 @@ export interface FeatureCardProps {
   href?: string;
   action?: string;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const FeatureCard = createComponent({

package/src/content/Icon.ts

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

package/src/content/Image.ts

@@ -8,11 +8,10 @@ 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;
+  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+  loading?: 'lazy' | 'eager';
   fallback?: string;
   className?: string;
-  children?: React.ReactNode;
   onArcLoad?: (e: CustomEvent) => void;
   onArcError?: (e: CustomEvent) => void;
 }

package/src/content/Marquee.ts

@@ -6,7 +6,7 @@ import { ArcMarquee } from '@arclux/arc-ui/marquee';
 
 export interface MarqueeProps {
   speed?: number;
-  direction?: string;
+  direction?: 'left' | 'right';
   pauseOnHover?: boolean;
   gap?: string;
   className?: string;

package/src/content/QrCode.ts

@@ -7,12 +7,11 @@ import { ArcQrCode } from '@arclux/arc-ui/qr-code';
 export interface QrCodeProps {
   value?: string;
   size?: number;
-  level?: string;
+  level?: 'L' | 'M' | 'Q' | 'H';
   label?: string;
   quietZone?: number;
   contrast?: boolean;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const QrCode = createComponent({

package/src/content/ScrollIndicator.ts

@@ -6,11 +6,10 @@ import { ArcScrollIndicator } from '@arclux/arc-ui/scroll-indicator';
 
 export interface ScrollIndicatorProps {
   target?: string;
-  position?: 'bottom';
+  position?: 'top' | 'bottom';
   size?: 'sm' | 'md' | 'lg';
-  color?: 'gradient';
+  color?: 'accent' | 'gradient';
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const ScrollIndicator = createComponent({

package/src/content/Separator.ts

@@ -5,11 +5,10 @@ import { createComponent } from '@lit/react';
 import { ArcSeparator } from '@arclux/arc-ui/separator';
 
 export interface SeparatorProps {
-  orientation?: 'vertical';
+  orientation?: 'horizontal' | 'vertical';
   label?: string;
-  variant?: 'dashed' | 'dotted' | 'fade';
+  variant?: 'line' | 'dashed' | 'dotted' | 'fade';
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Separator = createComponent({

package/src/content/Skeleton.ts

@@ -10,7 +10,6 @@ export interface SkeletonProps {
   height?: string;
   count?: number;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Skeleton = createComponent({

package/src/content/Spinner.ts

@@ -8,7 +8,6 @@ export interface SpinnerProps {
   size?: 'sm' | 'md' | 'lg';
   variant?: 'primary' | 'secondary' | 'white';
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Spinner = createComponent({

package/src/content/Stack.ts

@@ -5,7 +5,7 @@ import { createComponent } from '@lit/react';
 import { ArcStack } from '@arclux/arc-ui/stack';
 
 export interface StackProps {
-  direction?: 'horizontal' | 'vertical';
+  direction?: 'vertical' | 'horizontal';
   gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   align?: 'start' | 'center' | 'end' | 'stretch';
   justify?: 'start' | 'center' | 'end' | 'between' | 'around';

package/src/content/VirtualList.ts

@@ -9,7 +9,6 @@ export interface VirtualListProps {
   itemHeight?: number;
   overscan?: number;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const VirtualList = createComponent({

package/src/data/AnimatedNumber.ts

@@ -7,13 +7,12 @@ import { ArcAnimatedNumber } from '@arclux/arc-ui/animated-number';
 export interface AnimatedNumberProps {
   value?: number;
   duration?: number;
-  format?: string;
+  format?: 'number' | 'currency' | 'percent';
   prefix?: string;
   suffix?: string;
   decimals?: number;
   locale?: string;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const AnimatedNumber = createComponent({

package/src/data/Badge.ts

@@ -5,8 +5,8 @@ import { createComponent } from '@lit/react';
 import { ArcBadge } from '@arclux/arc-ui/badge';
 
 export interface BadgeProps {
-  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
-  size?: 'sm' | 'lg';
+  variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'md' | 'lg';
   color?: string;
   className?: string;
   children?: React.ReactNode;

package/src/data/Chart.ts

@@ -5,17 +5,16 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcChart } from '@arclux/arc-ui/chart';
 
 export interface ChartProps {
-  type?: string;
-  series?: unknown[];
-  labels?: unknown[];
+  type?: 'line' | 'area' | 'bar' | 'donut';
+  series?: Array<{label:string,data:number[]}>;
+  labels?: string[];
   stacked?: boolean;
   hideLegend?: boolean;
   hideAxis?: boolean;
   height?: number;
-  valueFormat?: string;
+  valueFormat?: 'number' | 'percent' | 'currency';
   currency?: string;
   className?: string;
-  children?: React.ReactNode;
   onArcMarkClick?: (e: CustomEvent) => void;
 }
 

package/src/data/Comparison.ts

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

package/src/data/CountdownTimer.ts

@@ -10,7 +10,6 @@ export interface CountdownTimerProps {
   expired?: string;
   hideZeroSegments?: boolean;
   className?: string;
-  children?: React.ReactNode;
   onArcExpired?: (e: CustomEvent) => void;
 }
 

package/src/data/DataGrid.ts

@@ -5,15 +5,14 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcDataGrid } from '@arclux/arc-ui/data-grid';
 
 export interface DataGridProps {
-  columns?: unknown[];
-  rows?: unknown[];
-  sort?: unknown[];
+  columns?: Array<{key:string,label:string,sortable?:boolean,editable?:boolean,pinned?:boolean,width?:string,align?:string}>;
+  rows?: Array<Record<string, any>>;
+  sort?: Array<{key:string,direction:'asc'|'desc'}>;
   manualSort?: boolean;
   selectable?: boolean;
   virtual?: boolean;
   rowHeight?: number;
   className?: string;
-  children?: React.ReactNode;
   onArcSort?: (e: CustomEvent) => void;
   onArcSelectionChange?: (e: CustomEvent) => void;
   onArcCellChange?: (e: CustomEvent) => void;

package/src/data/DataTable.ts

@@ -5,11 +5,11 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcDataTable } from '@arclux/arc-ui/data-table';
 
 export interface DataTableProps {
-  rows?: unknown[];
+  rows?: Array<Record<string, any>>;
   sortable?: boolean;
   selectable?: boolean;
   sortColumn?: string;
-  sortDirection?: string;
+  sortDirection?: 'asc' | 'desc';
   virtual?: boolean;
   rowHeight?: number;
   className?: string;

package/src/data/Diff.ts

@@ -7,9 +7,8 @@ import { ArcDiff } from '@arclux/arc-ui/diff';
 export interface DiffProps {
   before?: string;
   after?: string;
-  mode?: 'side-by-side';
+  mode?: 'inline' | 'side-by-side';
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Diff = createComponent({

package/src/data/EventCalendar.ts

@@ -5,11 +5,10 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcEventCalendar } from '@arclux/arc-ui/event-calendar';
 
 export interface EventCalendarProps {
-  events?: unknown[];
-  view?: 'week';
+  events?: Array<{date:string,end?:string,label:string,color?:number}>;
+  view?: 'month' | 'week';
   date?: string;
   className?: string;
-  children?: React.ReactNode;
   onArcPeriodChange?: (e: CustomEvent) => void;
   onArcDateClick?: (e: CustomEvent) => void;
   onArcEventClick?: (e: CustomEvent) => void;

package/src/data/Kanban.ts

@@ -5,10 +5,9 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcKanban } from '@arclux/arc-ui/kanban';
 
 export interface KanbanProps {
-  columns?: unknown[];
+  columns?: Array<{id:string,title?:string,limit?:number,items:Array<{id:string,label:string,description?:string,tag?:string,variant?:string}>}>;
   disabled?: boolean;
   className?: string;
-  children?: React.ReactNode;
   onArcCardMove?: (e: CustomEvent) => void;
   onArcCardClick?: (e: CustomEvent) => void;
 }

package/src/data/List.ts

@@ -5,8 +5,8 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcList } from '@arclux/arc-ui/list';
 
 export interface ListProps {
-  variant?: 'bordered' | 'separated';
-  size?: 'sm' | 'lg';
+  variant?: 'default' | 'bordered' | 'separated';
+  size?: 'sm' | 'md' | 'lg';
   selectable?: boolean;
   multiple?: boolean;
   value?: string;

package/src/data/ListItem.ts

@@ -10,7 +10,6 @@ export interface ListItemProps {
   disabled?: boolean;
   href?: string;
   className?: string;
-  children?: React.ReactNode;
   onArcItemSelect?: (e: CustomEvent) => void;
 }
 

package/src/data/Meter.ts

@@ -13,7 +13,6 @@ export interface MeterProps {
   optimum?: number;
   label?: string;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Meter = createComponent({

package/src/data/Sparkline.ts

@@ -6,13 +6,12 @@ import { ArcSparkline } from '@arclux/arc-ui/sparkline';
 
 export interface SparklineProps {
   data?: string;
-  type?: string;
+  type?: 'line' | 'bar';
   color?: string;
   width?: number;
   height?: number;
   fill?: boolean;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Sparkline = createComponent({

package/src/data/Stat.ts

@@ -10,7 +10,6 @@ export interface StatProps {
   trend?: 'up' | 'down' | 'neutral';
   change?: string;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Stat = createComponent({

package/src/data/Stepper.ts

@@ -7,7 +7,6 @@ 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

@@ -5,12 +5,11 @@ import { createComponent } from '@lit/react';
 import { ArcTable } from '@arclux/arc-ui/table';
 
 export interface TableProps {
-  columns?: unknown[];
-  rows?: unknown[];
+  columns?: string[];
+  rows?: string[][];
   striped?: boolean;
   compact?: boolean;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Table = createComponent({

package/src/data/Tag.ts

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

package/src/data/ValueCard.ts

@@ -9,7 +9,6 @@ export interface ValueCardProps {
   heading?: string;
   description?: string;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const ValueCard = createComponent({

package/src/feedback/Alert.ts

@@ -5,7 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcAlert } from '@arclux/arc-ui/alert';
 
 export interface AlertProps {
-  variant?: string;
+  variant?: 'info' | 'success' | 'warning' | 'error';
   compact?: boolean;
   dismissible?: boolean;
   heading?: string;

package/src/feedback/Announcement.ts

@@ -5,10 +5,9 @@ import { createComponent } from '@lit/react';
 import { ArcAnnouncement } from '@arclux/arc-ui/announcement';
 
 export interface AnnouncementProps {
-  politeness?: string;
+  politeness?: 'polite' | 'assertive';
   message?: string;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Announcement = createComponent({

package/src/feedback/Banner.ts

@@ -5,7 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcBanner } from '@arclux/arc-ui/banner';
 
 export interface BannerProps {
-  variant?: string;
+  variant?: 'info' | 'success' | 'warning' | 'error';
   dismissible?: boolean;
   sticky?: boolean;
   className?: string;

package/src/feedback/Confirm.ts

@@ -10,7 +10,7 @@ export interface ConfirmProps {
   message?: string;
   confirmLabel?: string;
   cancelLabel?: string;
-  variant?: string;
+  variant?: 'default' | 'danger';
   className?: string;
   children?: React.ReactNode;
   onArcConfirm?: (e: CustomEvent) => void;

package/src/feedback/ConnectionStatus.ts

@@ -6,7 +6,6 @@ import { ArcConnectionStatus } from '@arclux/arc-ui/connection-status';
 
 export interface ConnectionStatusProps {
   className?: string;
-  children?: React.ReactNode;
   onArcOnline?: (e: CustomEvent) => void;
   onArcOffline?: (e: CustomEvent) => void;
 }

package/src/feedback/ContextMenu.ts

@@ -7,7 +7,6 @@ import { ArcContextMenu } from '@arclux/arc-ui/context-menu';
 export interface ContextMenuProps {
   open?: boolean;
   className?: string;
-  children?: React.ReactNode;
   onArcOpen?: (e: CustomEvent) => void;
   onArcClose?: (e: CustomEvent) => void;
   onArcSelect?: (e: CustomEvent) => void;

package/src/feedback/Dialog.ts

@@ -10,9 +10,8 @@ export interface DialogProps {
   message?: string;
   confirmLabel?: string;
   cancelLabel?: string;
-  variant?: string;
+  variant?: 'default' | 'danger';
   className?: string;
-  children?: React.ReactNode;
   onArcConfirm?: (e: CustomEvent) => void;
   onArcCancel?: (e: CustomEvent) => void;
 }

package/src/feedback/GuidedTour.ts

@@ -7,7 +7,6 @@ import { ArcGuidedTour } from '@arclux/arc-ui/guided-tour';
 export interface GuidedTourProps {
   open?: boolean;
   className?: string;
-  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onArcComplete?: (e: CustomEvent) => void;
   onArcDismiss?: (e: CustomEvent) => void;

package/src/feedback/HoverCard.ts

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

package/src/feedback/InlineMessage.ts

@@ -5,7 +5,7 @@ import { createComponent } from '@lit/react';
 import { ArcInlineMessage } from '@arclux/arc-ui/inline-message';
 
 export interface InlineMessageProps {
-  variant?: string;
+  variant?: 'info' | 'success' | 'warning' | 'error';
   className?: string;
   children?: React.ReactNode;
 }

package/src/feedback/LoadingOverlay.ts

@@ -9,7 +9,6 @@ export interface LoadingOverlayProps {
   message?: string;
   global?: boolean;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const LoadingOverlay = createComponent({

package/src/feedback/NotificationPanel.ts

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

package/src/feedback/Popover.ts

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

package/src/feedback/Progress.ts

@@ -6,13 +6,12 @@ import { ArcProgress } from '@arclux/arc-ui/progress';
 
 export interface ProgressProps {
   value?: number;
-  variant?: string;
+  variant?: 'bar' | 'spinner';
   size?: 'sm' | 'md' | 'lg';
   indeterminate?: boolean;
   showValue?: boolean;
   label?: string;
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const Progress = createComponent({