@arclux/arc-ui-react 2.11.1 → 3.1.0

package/src/input/Checkbox.ts

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

package/src/input/ColorPicker.ts

@@ -5,13 +5,14 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcColorPicker } from '@arclux/arc-ui/color-picker';
 
 export interface ColorPickerProps {
+  size?: 'sm' | 'md' | 'lg';
   value?: string;
   name?: string;
   presets?: string[];
   disabled?: boolean;
   label?: string;
   className?: string;
-  children?: React.ReactNode;
+  onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
 }
 
@@ -20,6 +21,7 @@ export const ColorPicker = createComponent({
   elementClass: ArcColorPicker,
   react: React,
   events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
     onArcChange: 'arc-change' as EventName<CustomEvent>,
   },
 });

package/src/input/Combobox.ts

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcCombobox } from '@arclux/arc-ui/combobox';
 
 export interface ComboboxProps {
+  size?: 'sm' | 'md' | 'lg';
   value?: string;
   placeholder?: string;
   label?: string;
@@ -12,6 +13,7 @@ export interface ComboboxProps {
   disabled?: boolean;
   className?: string;
   children?: React.ReactNode;
+  onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
 }
 
@@ -20,6 +22,7 @@ export const Combobox = createComponent({
   elementClass: ArcCombobox,
   react: React,
   events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
     onArcChange: 'arc-change' as EventName<CustomEvent>,
   },
 });

package/src/input/CopyButton.ts

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

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcDatePicker } from '@arclux/arc-ui/date-picker';
 
 export interface DatePickerProps {
+  size?: 'sm' | 'md' | 'lg';
   value?: string;
   name?: string;
   min?: string;
@@ -12,8 +13,10 @@ export interface DatePickerProps {
   placeholder?: string;
   disabled?: boolean;
   label?: string;
+  open?: boolean;
+  locale?: string;
+  firstDayOfWeek?: number;
   className?: string;
-  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/DateRangePicker.ts

@@ -5,6 +5,9 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcDateRangePicker } from '@arclux/arc-ui/date-range-picker';
 
 export interface DateRangePickerProps {
+  size?: 'sm' | 'md' | 'lg';
+  locale?: string;
+  firstDayOfWeek?: number;
   start?: string;
   end?: string;
   name?: string;
@@ -16,8 +19,8 @@ export interface DateRangePickerProps {
   disabled?: boolean;
   required?: boolean;
   label?: string;
+  open?: boolean;
   className?: string;
-  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/FileUpload.ts

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

package/src/input/Hotkey.ts

@@ -9,7 +9,6 @@ export interface HotkeyProps {
   disabled?: boolean;
   global?: boolean;
   className?: string;
-  children?: React.ReactNode;
   onArcHotkeyTrigger?: (e: CustomEvent) => void;
 }
 

package/src/input/ImageCropper.ts

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

package/src/input/InlineEdit.ts

@@ -0,0 +1,30 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcInlineEdit } from '@arclux/arc-ui/inline-edit';
+
+export interface InlineEditProps {
+  value?: string;
+  label?: string;
+  name?: string;
+  placeholder?: string;
+  multiline?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+  onArcCancel?: (e: CustomEvent) => void;
+  onArcInput?: (e: CustomEvent) => void;
+}
+
+export const InlineEdit = createComponent({
+  tagName: 'arc-inline-edit',
+  elementClass: ArcInlineEdit,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+    onArcCancel: 'arc-cancel' as EventName<CustomEvent>,
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
+  },
+});

package/src/input/Knob.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 { ArcKnob } from '@arclux/arc-ui/knob';
+
+export interface KnobProps {
+  size?: 'sm' | 'md' | 'lg';
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  name?: string;
+  disabled?: boolean;
+  label?: string;
+  detents?: number[] | string;
+  format?: Function;
+  className?: string;
+  onArcInput?: (e: CustomEvent) => void;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const Knob = createComponent({
+  tagName: 'arc-knob',
+  elementClass: ArcKnob,
+  react: React,
+  events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/input/MaskedInput.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 { ArcMaskedInput } from '@arclux/arc-ui/masked-input';
+
+export interface MaskedInputProps {
+  mask?: string;
+  value?: string;
+  placeholderChar?: string;
+  label?: string;
+  name?: string;
+  disabled?: boolean;
+  required?: boolean;
+  autocomplete?: string;
+  error?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  onArcInput?: (e: CustomEvent) => void;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const MaskedInput = createComponent({
+  tagName: 'arc-masked-input',
+  elementClass: ArcMaskedInput,
+  react: React,
+  events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/input/MultiSelect.ts

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcMultiSelect } from '@arclux/arc-ui/multi-select';
 
 export interface MultiSelectProps {
+  size?: 'sm' | 'md' | 'lg';
   value?: string[];
   placeholder?: string;
   label?: string;
@@ -13,7 +14,7 @@ export interface MultiSelectProps {
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
-  onClick?: (e: Event) => void;
+  onArcInput?: (e: CustomEvent) => void;
 }
 
 export const MultiSelect = createComponent({
@@ -22,6 +23,6 @@ export const MultiSelect = createComponent({
   react: React,
   events: {
     onArcChange: 'arc-change' as EventName<CustomEvent>,
-    onClick: 'click' as EventName<Event>,
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
   },
 });

package/src/input/NumberInput.ts

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcNumberInput } from '@arclux/arc-ui/number-input';
 
 export interface NumberInputProps {
+  size?: 'sm' | 'md' | 'lg';
   value?: number;
   min?: number;
   max?: number;
@@ -13,7 +14,7 @@ export interface NumberInputProps {
   name?: string;
   disabled?: boolean;
   className?: string;
-  children?: React.ReactNode;
+  onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }
@@ -23,6 +24,7 @@ export const NumberInput = createComponent({
   elementClass: ArcNumberInput,
   react: React,
   events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
     onArcChange: 'arc-change' as EventName<CustomEvent>,
     onClick: 'click' as EventName<Event>,
   },

package/src/input/OtpInput.ts

@@ -5,13 +5,14 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcOtpInput } from '@arclux/arc-ui/otp-input';
 
 export interface OtpInputProps {
+  size?: 'sm' | 'md' | 'lg';
   length?: number;
   value?: string;
   name?: string;
   disabled?: boolean;
   type?: 'number' | 'text';
   className?: string;
-  children?: React.ReactNode;
+  onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
 }
 
@@ -20,6 +21,7 @@ export const OtpInput = createComponent({
   elementClass: ArcOtpInput,
   react: React,
   events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
     onArcChange: 'arc-change' as EventName<CustomEvent>,
   },
 });

package/src/input/PasswordInput.ts

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

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcPinInput } from '@arclux/arc-ui/pin-input';
 
 export interface PinInputProps {
+  size?: 'sm' | 'md' | 'lg';
   length?: number;
   value?: string;
   name?: string;
@@ -14,7 +15,7 @@ export interface PinInputProps {
   separator?: number;
   label?: string;
   className?: string;
-  children?: React.ReactNode;
+  onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
   onArcComplete?: (e: CustomEvent) => void;
 }
@@ -24,6 +25,7 @@ export const PinInput = createComponent({
   elementClass: ArcPinInput,
   react: React,
   events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
     onArcChange: 'arc-change' as EventName<CustomEvent>,
     onArcComplete: 'arc-complete' as EventName<CustomEvent>,
   },

package/src/input/RangeSlider.ts

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcRangeSlider } from '@arclux/arc-ui/range-slider';
 
 export interface RangeSliderProps {
+  size?: 'sm' | 'md' | 'lg';
   min?: number;
   max?: number;
   step?: number;
@@ -15,7 +16,6 @@ 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

@@ -5,13 +5,13 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcRating } from '@arclux/arc-ui/rating';
 
 export interface RatingProps {
+  size?: 'sm' | 'md' | 'lg';
   value?: number;
   max?: number;
   name?: string;
   disabled?: boolean;
   readonly?: boolean;
   className?: string;
-  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/Search.ts

@@ -10,6 +10,7 @@ export interface SearchProps {
   label?: string;
   disabled?: boolean;
   loading?: boolean;
+  open?: boolean;
   className?: string;
   children?: React.ReactNode;
   onArcInput?: (e: CustomEvent) => void;

package/src/input/SignaturePad.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 { ArcSignaturePad } from '@arclux/arc-ui/signature-pad';
+
+export interface SignaturePadProps {
+  value?: string;
+  name?: string;
+  label?: string;
+  disabled?: boolean;
+  penColor?: string;
+  penWidth?: number;
+  className?: string;
+  onArcClear?: (e: CustomEvent) => void;
+  onArcInput?: (e: CustomEvent) => void;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const SignaturePad = createComponent({
+  tagName: 'arc-signature-pad',
+  elementClass: ArcSignaturePad,
+  react: React,
+  events: {
+    onArcClear: 'arc-clear' as EventName<CustomEvent>,
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/input/Slider.ts

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcSlider } from '@arclux/arc-ui/slider';
 
 export interface SliderProps {
+  size?: 'sm' | 'md' | 'lg';
   value?: number;
   min?: number;
   max?: number;
@@ -13,7 +14,6 @@ export interface SliderProps {
   disabled?: boolean;
   label?: string;
   className?: string;
-  children?: React.ReactNode;
   onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
 }

package/src/input/TagInput.ts

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcTagInput } from '@arclux/arc-ui/tag-input';
 
 export interface TagInputProps {
+  size?: 'sm' | 'md' | 'lg';
   value?: string[];
   suggestions?: string[];
   delimiter?: string;
@@ -16,7 +17,6 @@ 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

@@ -6,6 +6,7 @@ import { ArcTextarea } from '@arclux/arc-ui/textarea';
 
 export interface TextareaProps {
   value?: string;
+  name?: string;
   placeholder?: string;
   label?: string;
   rows?: number;
@@ -17,7 +18,6 @@ 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

@@ -8,8 +8,8 @@ export interface ThemeToggleProps {
   theme?: 'dark' | 'light' | 'auto';
   disabled?: boolean;
   iconOnly?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   className?: string;
-  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/input/TimePicker.ts

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcTimePicker } from '@arclux/arc-ui/time-picker';
 
 export interface TimePickerProps {
+  size?: 'sm' | 'md' | 'lg';
   value?: string;
   name?: string;
   min?: string;
@@ -14,8 +15,8 @@ export interface TimePickerProps {
   placeholder?: string;
   disabled?: boolean;
   label?: string;
+  open?: boolean;
   className?: string;
-  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }

package/src/input/Toggle.ts

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

package/src/input/TransferList.ts

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcTransferList } from '@arclux/arc-ui/transfer-list';
 
 export interface TransferListProps {
+  size?: 'sm' | 'md' | 'lg';
   options?: Array<{value:string,label:string,disabled?:boolean}>;
   value?: string[];
   name?: string;
@@ -13,7 +14,6 @@ export interface TransferListProps {
   sourceLabel?: string;
   targetLabel?: string;
   className?: string;
-  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/input/TreeSelect.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 { ArcTreeSelect } from '@arclux/arc-ui/tree-select';
+
+export interface TreeSelectProps {
+  items?: Array<{value: string, label: string, children?: Array<object>, disabled?: boolean}>;
+  value?: string;
+  expandedValues?: string[];
+  placeholder?: string;
+  label?: string;
+  name?: string;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  error?: string;
+  open?: boolean;
+  className?: string;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const TreeSelect = createComponent({
+  tagName: 'arc-tree-select',
+  elementClass: ArcTreeSelect,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/input/index.ts

@@ -122,3 +122,18 @@ export type { SliderProps } from './Slider.js';
 
 export { Toggle } from './Toggle.js';
 export type { ToggleProps } from './Toggle.js';
+
+export { Knob } from './Knob.js';
+export type { KnobProps } from './Knob.js';
+
+export { InlineEdit } from './InlineEdit.js';
+export type { InlineEditProps } from './InlineEdit.js';
+
+export { MaskedInput } from './MaskedInput.js';
+export type { MaskedInputProps } from './MaskedInput.js';
+
+export { SignaturePad } from './SignaturePad.js';
+export type { SignaturePadProps } from './SignaturePad.js';
+
+export { TreeSelect } from './TreeSelect.js';
+export type { TreeSelectProps } from './TreeSelect.js';

package/src/layout/AppShell.ts

@@ -1,7 +1,7 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent, type EventName } from '@lit/react';
 import { ArcAppShell } from '@arclux/arc-ui/app-shell';
 
 export interface AppShellProps {
@@ -9,10 +9,14 @@ export interface AppShellProps {
   breakpoint?: number;
   className?: string;
   children?: React.ReactNode;
+  onArcSidebarToggle?: (e: CustomEvent) => void;
 }
 
 export const AppShell = createComponent({
   tagName: 'arc-app-shell',
   elementClass: ArcAppShell,
   react: React,
+  events: {
+    onArcSidebarToggle: 'arc-sidebar-toggle' as EventName<CustomEvent>,
+  },
 });

package/src/navigation/AnchorNav.ts

@@ -7,7 +7,7 @@ import { ArcAnchorNav } from '@arclux/arc-ui/anchor-nav';
 export interface AnchorNavProps {
   orientation?: 'vertical' | 'horizontal';
   value?: string;
-  items?: string;
+  items?: Array<{label: string, value: string}>;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/navigation/BottomNav.ts

@@ -5,10 +5,9 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcBottomNav } from '@arclux/arc-ui/bottom-nav';
 
 export interface BottomNavProps {
-  items?: string;
+  items?: Array<{label: string, icon?: string, value: string}>;
   value?: string;
   className?: string;
-  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
 }
 

package/src/navigation/BreadcrumbMenu.ts

@@ -5,10 +5,9 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcBreadcrumbMenu } from '@arclux/arc-ui/breadcrumb-menu';
 
 export interface BreadcrumbMenuProps {
-  items?: string;
+  items?: Array<{label: string, href?: string, siblings?: Array<{label: string, href?: string}>}>;
   label?: string;
   className?: string;
-  children?: React.ReactNode;
   onArcNavigate?: (e: CustomEvent) => void;
 }
 

package/src/navigation/Footer.ts

@@ -5,7 +5,7 @@ import { createComponent } from '@lit/react';
 import { ArcFooter } from '@arclux/arc-ui/footer';
 
 export interface FooterProps {
-  compact?: boolean;
+  density?: 'default' | 'compact';
   border?: boolean;
   contained?: string;
   align?: 'left' | 'center';

package/src/navigation/Menubar.ts

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

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

package/src/navigation/Pagination.ts

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