@arclux/arc-ui-react 2.11.0 → 2.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-react",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "description": "React wrappers for ARC UI Web Components.",
   "sideEffects": false,
   "type": "module",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@arclux/arc-ui": "2.11.0"
+    "@arclux/arc-ui": "2.11.1"
   },
   "license": "MIT",
   "keywords": [

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/Avatar.ts

@@ -11,6 +11,7 @@ export interface AvatarProps {
   shape?: 'circle' | 'square' | 'rounded';
   status?: 'online' | 'offline' | 'busy' | 'away';
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Avatar = createComponent({

package/src/content/ColorSwatch.ts

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

package/src/content/Divider.ts

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

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/Image.ts

@@ -12,6 +12,7 @@ export interface ImageProps {
   loading?: 'lazy' | 'eager';
   fallback?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcLoad?: (e: CustomEvent) => void;
   onArcError?: (e: CustomEvent) => void;
 }

package/src/content/QrCode.ts

@@ -12,6 +12,7 @@ export interface QrCodeProps {
   quietZone?: number;
   contrast?: boolean;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const QrCode = createComponent({

package/src/content/ScrollIndicator.ts

@@ -10,6 +10,7 @@ export interface ScrollIndicatorProps {
   size?: 'sm' | 'md' | 'lg';
   color?: 'accent' | 'gradient';
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const ScrollIndicator = createComponent({

package/src/content/Separator.ts

@@ -9,6 +9,7 @@ export interface SeparatorProps {
   label?: string;
   variant?: 'line' | 'dashed' | 'dotted' | 'fade';
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Separator = createComponent({

package/src/content/Skeleton.ts

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

package/src/content/Spinner.ts

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

package/src/content/VirtualList.ts

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

package/src/data/AnimatedNumber.ts

@@ -13,6 +13,7 @@ export interface AnimatedNumberProps {
   decimals?: number;
   locale?: string;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const AnimatedNumber = createComponent({

package/src/data/Chart.ts

@@ -15,6 +15,7 @@ export interface ChartProps {
   valueFormat?: 'number' | 'percent' | 'currency';
   currency?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcMarkClick?: (e: CustomEvent) => void;
 }
 

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/CountdownTimer.ts

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

package/src/data/DataGrid.ts

@@ -13,6 +13,7 @@ export interface DataGridProps {
   virtual?: boolean;
   rowHeight?: number;
   className?: string;
+  children?: React.ReactNode;
   onArcSort?: (e: CustomEvent) => void;
   onArcSelectionChange?: (e: CustomEvent) => void;
   onArcCellChange?: (e: CustomEvent) => void;

package/src/data/Diff.ts

@@ -9,6 +9,7 @@ export interface DiffProps {
   after?: string;
   mode?: 'inline' | 'side-by-side';
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Diff = createComponent({

package/src/data/EventCalendar.ts

@@ -9,6 +9,7 @@ export interface EventCalendarProps {
   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

@@ -8,6 +8,7 @@ export interface KanbanProps {
   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/ListItem.ts

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

package/src/data/Meter.ts

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

package/src/data/Sparkline.ts

@@ -12,6 +12,7 @@ export interface SparklineProps {
   height?: number;
   fill?: boolean;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Sparkline = createComponent({

package/src/data/Stat.ts

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

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

@@ -10,6 +10,7 @@ export interface TableProps {
   striped?: boolean;
   compact?: boolean;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Table = createComponent({

package/src/feedback/Announcement.ts

@@ -8,6 +8,7 @@ export interface AnnouncementProps {
   politeness?: 'polite' | 'assertive';
   message?: string;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Announcement = createComponent({

package/src/feedback/ConnectionStatus.ts

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

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

package/src/feedback/GuidedTour.ts

@@ -7,6 +7,7 @@ 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/LoadingOverlay.ts

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

package/src/feedback/Progress.ts

@@ -12,6 +12,7 @@ export interface ProgressProps {
   showValue?: boolean;
   label?: string;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Progress = createComponent({

package/src/feedback/ProgressToast.ts

@@ -7,6 +7,7 @@ import { ArcProgressToast } from '@arclux/arc-ui/progress-toast';
 export interface ProgressToastProps {
   position?: 'top-right' | 'bottom-right';
   className?: string;
+  children?: React.ReactNode;
   onArcComplete?: (e: CustomEvent) => void;
   onArcCancel?: (e: CustomEvent) => void;
 }

package/src/feedback/Snackbar.ts

@@ -8,6 +8,7 @@ export interface SnackbarProps {
   position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
   duration?: number;
   className?: string;
+  children?: React.ReactNode;
   onArcAction?: (e: CustomEvent) => void;
   onArcDismiss?: (e: CustomEvent) => void;
 }

package/src/feedback/Spotlight.ts

@@ -9,6 +9,7 @@ export interface SpotlightProps {
   active?: boolean;
   padding?: number;
   className?: string;
+  children?: React.ReactNode;
   onArcDismiss?: (e: CustomEvent) => void;
 }
 

package/src/feedback/Toast.ts

@@ -8,6 +8,7 @@ export interface ToastProps {
   position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
   duration?: number;
   className?: string;
+  children?: React.ReactNode;
   onArcDismiss?: (e: CustomEvent) => void;
 }
 

package/src/feedback/ToastManager.ts

@@ -11,6 +11,7 @@ export interface ToastManagerProps {
   dedupe?: boolean;
   queueLimit?: number;
   className?: string;
+  children?: React.ReactNode;
   onArcQueueOverflow?: (e: CustomEvent) => void;
   onArcDismiss?: (e: CustomEvent) => void;
   onArcQueueChange?: (e: CustomEvent) => void;

package/src/input/Button.ts

@@ -12,6 +12,7 @@ export interface ButtonProps {
   loading?: boolean;
   type?: 'button' | 'submit' | 'reset';
   className?: string;
+  children?: React.ReactNode;
   onClick?: (e: Event) => void;
 }
 

package/src/input/Calendar.ts

@@ -11,6 +11,7 @@ export interface CalendarProps {
   month?: number;
   year?: number;
   className?: string;
+  children?: React.ReactNode;
   onArcNavigate?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;

package/src/input/Checkbox.ts

@@ -13,6 +13,7 @@ export interface CheckboxProps {
   name?: string;
   value?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/ColorPicker.ts

@@ -11,6 +11,7 @@ export interface ColorPickerProps {
   disabled?: boolean;
   label?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/CopyButton.ts

@@ -8,6 +8,7 @@ export interface CopyButtonProps {
   value?: string;
   disabled?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcCopy?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/input/DatePicker.ts

@@ -13,6 +13,7 @@ export interface DatePickerProps {
   disabled?: boolean;
   label?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/DateRangePicker.ts

@@ -17,6 +17,7 @@ export interface DateRangePickerProps {
   required?: boolean;
   label?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/FileUpload.ts

@@ -10,6 +10,7 @@ export interface FileUploadProps {
   maxSize?: number;
   disabled?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onArcRemove?: (e: CustomEvent) => void;
 }

package/src/input/ImageCropper.ts

@@ -10,6 +10,7 @@ export interface ImageCropperProps {
   aspect?: number;
   zoom?: number;
   className?: string;
+  children?: React.ReactNode;
   onArcCropChange?: (e: CustomEvent) => void;
 }
 

package/src/input/MultiSelect.ts

@@ -11,6 +11,7 @@ export interface MultiSelectProps {
   name?: string;
   disabled?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/input/NumberInput.ts

@@ -13,6 +13,7 @@ export interface NumberInputProps {
   name?: string;
   disabled?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/input/OtpInput.ts

@@ -11,6 +11,7 @@ export interface OtpInputProps {
   disabled?: boolean;
   type?: 'number' | 'text';
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/PasswordInput.ts

@@ -16,6 +16,7 @@ export interface PasswordInputProps {
   autocomplete?: string;
   showStrength?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcStrengthChange?: (e: CustomEvent) => void;
   onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/PinInput.ts

@@ -14,6 +14,7 @@ export interface PinInputProps {
   separator?: number;
   label?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onArcComplete?: (e: CustomEvent) => void;
 }

package/src/input/RangeSlider.ts

@@ -15,6 +15,7 @@ export interface RangeSliderProps {
   label?: string;
   showValues?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
 }

package/src/input/Rating.ts

@@ -11,6 +11,7 @@ export interface RatingProps {
   disabled?: boolean;
   readonly?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/SegmentedControl.ts

@@ -8,6 +8,7 @@ export interface SegmentedControlProps {
   value?: string;
   disabled?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/input/Slider.ts

@@ -13,6 +13,7 @@ export interface SliderProps {
   disabled?: boolean;
   label?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
 }

package/src/input/SortableList.ts

@@ -7,6 +7,7 @@ import { ArcSortableList } from '@arclux/arc-ui/sortable-list';
 export interface SortableListProps {
   disabled?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/TagInput.ts

@@ -16,6 +16,7 @@ export interface TagInputProps {
   disabled?: boolean;
   error?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onArcInput?: (e: CustomEvent) => void;
 }

package/src/input/Textarea.ts

@@ -17,6 +17,7 @@ export interface TextareaProps {
   autoResize?: boolean;
   error?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
 }

package/src/input/ThemeToggle.ts

@@ -9,6 +9,7 @@ export interface ThemeToggleProps {
   disabled?: boolean;
   iconOnly?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/input/TimePicker.ts

@@ -15,6 +15,7 @@ export interface TimePickerProps {
   disabled?: boolean;
   label?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/input/Toggle.ts

@@ -11,6 +11,7 @@ export interface ToggleProps {
   label?: string;
   name?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/TransferList.ts

@@ -13,6 +13,7 @@ export interface TransferListProps {
   sourceLabel?: string;
   targetLabel?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/navigation/BottomNav.ts

@@ -8,6 +8,7 @@ export interface BottomNavProps {
   items?: string;
   value?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/navigation/Breadcrumb.ts

@@ -8,6 +8,7 @@ export interface BreadcrumbProps {
   separator?: string;
   label?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcNavigate?: (e: CustomEvent) => void;
 }
 

package/src/navigation/BreadcrumbMenu.ts

@@ -8,6 +8,7 @@ export interface BreadcrumbMenuProps {
   items?: string;
   label?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcNavigate?: (e: CustomEvent) => void;
 }
 

package/src/navigation/Footer.ts

@@ -10,6 +10,7 @@ export interface FooterProps {
   contained?: string;
   align?: 'left' | 'center';
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Footer = createComponent({

package/src/navigation/Menubar.ts

@@ -7,6 +7,7 @@ import { ArcMenubar } from '@arclux/arc-ui/menubar';
 export interface MenubarProps {
   items?: Array<{label:string,disabled?:boolean,items:Array<{label?:string,shortcut?:string,disabled?:boolean,divider?:boolean,items?:Array<{label:string,shortcut?:string,disabled?:boolean}>}>}>;
   className?: string;
+  children?: React.ReactNode;
   onArcSelect?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/navigation/NavigationMenu.ts

@@ -7,6 +7,7 @@ import { ArcNavigationMenu } from '@arclux/arc-ui/navigation-menu';
 export interface NavigationMenuProps {
   label?: string;
   className?: string;
+  children?: React.ReactNode;
   onArcMobileMenuToggle?: (e: CustomEvent) => void;
 }
 

package/src/navigation/PageIndicator.ts

@@ -9,6 +9,7 @@ export interface PageIndicatorProps {
   value?: number;
   clickable?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/navigation/Pagination.ts

@@ -10,6 +10,7 @@ export interface PaginationProps {
   siblings?: number;
   compact?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/navigation/ScrollSpy.ts

@@ -8,6 +8,7 @@ export interface ScrollSpyProps {
   active?: string;
   offset?: number;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/navigation/ScrollToTop.ts

@@ -10,6 +10,7 @@ export interface ScrollToTopProps {
   position?: 'bottom-right' | 'bottom-left';
   offset?: string;
   className?: string;
+  children?: React.ReactNode;
   onClick?: (e: Event) => void;
 }
 

package/src/navigation/Sidebar.ts

@@ -12,6 +12,7 @@ export interface SidebarProps {
   glow?: boolean;
   label?: string;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Sidebar = createComponent({

package/src/typography/CodeBlock.ts

@@ -10,6 +10,7 @@ export interface CodeBlockProps {
   code?: string;
   variant?: 'default' | 'window' | 'basic';
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const CodeBlock = createComponent({

package/src/typography/Highlight.ts

@@ -9,6 +9,7 @@ export interface HighlightProps {
   query?: string;
   caseSensitive?: boolean;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Highlight = createComponent({

package/src/typography/NumberFormat.ts

@@ -12,6 +12,7 @@ export interface NumberFormatProps {
   decimals?: number;
   notation?: 'standard' | 'compact';
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const NumberFormat = createComponent({

package/src/typography/TimeAgo.ts

@@ -9,6 +9,7 @@ export interface TimeAgoProps {
   live?: boolean;
   locale?: string;
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const TimeAgo = createComponent({

package/src/typography/Typewriter.ts

@@ -13,6 +13,7 @@ export interface TypewriterProps {
   nowrap?: boolean;
   pauseEnd?: number;
   className?: string;
+  children?: React.ReactNode;
   onArcComplete?: (e: CustomEvent) => void;
 }