@arclux/arc-ui-react 2.0.1 → 2.2.0

package/src/input/Button.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcButton } from '@arclux/arc-ui';
+import { ArcButton } from '@arclux/arc-ui/button';
 
 export interface ButtonProps {
   variant?: 'primary' | 'secondary' | 'ghost';
@@ -11,8 +11,6 @@ export interface ButtonProps {
   disabled?: boolean;
   loading?: boolean;
   type?: string;
-  _hasPrefix?: string;
-  _hasSuffix?: string;
   className?: string;
   children?: React.ReactNode;
   onClick?: (e: Event) => void;

package/src/input/ButtonGroup.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcButtonGroup } from '@arclux/arc-ui';
+import { ArcButtonGroup } from '@arclux/arc-ui/button-group';
 
 export interface ButtonGroupProps {
   orientation?: 'vertical';

package/src/input/Calendar.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCalendar } from '@arclux/arc-ui';
+import { ArcCalendar } from '@arclux/arc-ui/calendar';
 
 export interface CalendarProps {
   value?: string;
@@ -10,7 +10,6 @@ export interface CalendarProps {
   max?: string;
   month?: number;
   year?: number;
-  _focusedDay?: string;
   className?: string;
   children?: React.ReactNode;
   onArcNavigate?: (e: CustomEvent) => void;

package/src/input/Checkbox.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCheckbox } from '@arclux/arc-ui';
+import { ArcCheckbox } from '@arclux/arc-ui/checkbox';
 
 export interface CheckboxProps {
   checked?: boolean;

package/src/input/Chip.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcChip } from '@arclux/arc-ui';
+import { ArcChip } from '@arclux/arc-ui/chip';
 
 export interface ChipProps {
   selected?: boolean;

package/src/input/ColorPicker.ts

@@ -2,19 +2,14 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcColorPicker } from '@arclux/arc-ui';
+import { ArcColorPicker } from '@arclux/arc-ui/color-picker';
 
 export interface ColorPickerProps {
   value?: string;
+  name?: string;
   presets?: unknown[];
   disabled?: boolean;
   label?: string;
-  _hue?: string;
-  _sat?: string;
-  _lit?: string;
-  _hexInput?: string;
-  _draggingArea?: string;
-  _draggingHue?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/Combobox.ts

@@ -2,17 +2,14 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCombobox } from '@arclux/arc-ui';
+import { ArcCombobox } from '@arclux/arc-ui/combobox';
 
 export interface ComboboxProps {
   value?: string;
   placeholder?: string;
   label?: string;
+  name?: string;
   disabled?: boolean;
-  _query?: string;
-  _open?: string;
-  _activeIndex?: string;
-  _options?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/CopyButton.ts

@@ -2,12 +2,11 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCopyButton } from '@arclux/arc-ui';
+import { ArcCopyButton } from '@arclux/arc-ui/copy-button';
 
 export interface CopyButtonProps {
   value?: string;
   disabled?: boolean;
-  _copied?: string;
   className?: string;
   children?: React.ReactNode;
   onArcCopy?: (e: CustomEvent) => void;

package/src/input/DatePicker.ts

@@ -2,19 +2,16 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcDatePicker } from '@arclux/arc-ui';
+import { ArcDatePicker } from '@arclux/arc-ui/date-picker';
 
 export interface DatePickerProps {
   value?: string;
+  name?: string;
   min?: string;
   max?: string;
   placeholder?: string;
   disabled?: boolean;
   label?: string;
-  _open?: string;
-  _viewMonth?: string;
-  _viewYear?: string;
-  _mode?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/DateRangePicker.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 { ArcDateRangePicker } from '@arclux/arc-ui/date-range-picker';
+
+export interface DateRangePickerProps {
+  start?: string;
+  end?: string;
+  name?: string;
+  min?: string;
+  max?: string;
+  months?: number;
+  presets?: unknown[];
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  label?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const DateRangePicker = createComponent({
+  tagName: 'arc-date-range-picker',
+  elementClass: ArcDateRangePicker,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/input/Fieldset.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcFieldset } from '@arclux/arc-ui';
+import { ArcFieldset } from '@arclux/arc-ui/fieldset';
 
 export interface FieldsetProps {
   legend?: string;
@@ -10,8 +10,6 @@ export interface FieldsetProps {
   disabled?: boolean;
   error?: string;
   variant?: 'card';
-  _hasLegend?: string;
-  _hasActions?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/input/FileUpload.ts

@@ -2,16 +2,13 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcFileUpload } from '@arclux/arc-ui';
+import { ArcFileUpload } from '@arclux/arc-ui/file-upload';
 
 export interface FileUploadProps {
   accept?: string;
   multiple?: boolean;
   maxSize?: number;
   disabled?: boolean;
-  _files?: string;
-  _dragOver?: string;
-  _error?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/Form.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcForm } from '@arclux/arc-ui';
+import { ArcForm } from '@arclux/arc-ui/form';
 
 export interface FormProps {
   action?: string;
@@ -11,7 +11,6 @@ export interface FormProps {
   loading?: boolean;
   disabled?: boolean;
   errorSummary?: boolean;
-  _errors?: string;
   className?: string;
   children?: React.ReactNode;
   onArcInvalid?: (e: CustomEvent) => void;

package/src/input/Hotkey.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcHotkey } from '@arclux/arc-ui';
+import { ArcHotkey } from '@arclux/arc-ui/hotkey';
 
 export interface HotkeyProps {
   keys?: string;

package/src/input/IconButton.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcIconButton } from '@arclux/arc-ui';
+import { ArcIconButton } from '@arclux/arc-ui/icon-button';
 
 export interface IconButtonProps {
   name?: string;

package/src/input/ImageCropper.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 { ArcImageCropper } from '@arclux/arc-ui/image-cropper';
+
+export interface ImageCropperProps {
+  src?: string;
+  height?: number;
+  aspect?: number;
+  zoom?: number;
+  className?: string;
+  children?: React.ReactNode;
+  onArcCropChange?: (e: CustomEvent) => void;
+}
+
+export const ImageCropper = createComponent({
+  tagName: 'arc-image-cropper',
+  elementClass: ArcImageCropper,
+  react: React,
+  events: {
+    onArcCropChange: 'arc-crop-change' as EventName<CustomEvent>,
+  },
+});

package/src/input/Input.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcInput } from '@arclux/arc-ui';
+import { ArcInput } from '@arclux/arc-ui/input';
 
 export interface InputProps {
   type?: string;
@@ -16,8 +16,6 @@ export interface InputProps {
   size?: 'sm' | 'lg';
   multiline?: boolean;
   rows?: number;
-  _hasPrefix?: string;
-  _hasSuffix?: string;
   className?: string;
   children?: React.ReactNode;
   onArcInput?: (e: CustomEvent) => void;

package/src/input/InputGroup.ts

@@ -2,12 +2,10 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcInputGroup } from '@arclux/arc-ui';
+import { ArcInputGroup } from '@arclux/arc-ui/input-group';
 
 export interface InputGroupProps {
   size?: 'sm' | 'lg';
-  _hasPrefix?: string;
-  _hasSuffix?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/input/Label.ts

@@ -2,15 +2,13 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcLabel } from '@arclux/arc-ui';
+import { ArcLabel } from '@arclux/arc-ui/label';
 
 export interface LabelProps {
   for?: string;
   required?: boolean;
   size?: 'sm' | 'lg';
   disabled?: boolean;
-  _hasDescription?: string;
-  _hasTooltip?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/input/MultiSelect.ts

@@ -2,17 +2,14 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcMultiSelect } from '@arclux/arc-ui';
+import { ArcMultiSelect } from '@arclux/arc-ui/multi-select';
 
 export interface MultiSelectProps {
   value?: unknown[];
   placeholder?: string;
   label?: string;
+  name?: string;
   disabled?: boolean;
-  _query?: string;
-  _open?: string;
-  _activeIndex?: string;
-  _options?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/NumberInput.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcNumberInput } from '@arclux/arc-ui';
+import { ArcNumberInput } from '@arclux/arc-ui/number-input';
 
 export interface NumberInputProps {
   value?: number;
@@ -10,6 +10,7 @@ export interface NumberInputProps {
   max?: number;
   step?: number;
   label?: string;
+  name?: string;
   disabled?: boolean;
   className?: string;
   children?: React.ReactNode;

package/src/input/OtpInput.ts

@@ -2,11 +2,12 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcOtpInput } from '@arclux/arc-ui';
+import { ArcOtpInput } from '@arclux/arc-ui/otp-input';
 
 export interface OtpInputProps {
   length?: number;
   value?: string;
+  name?: string;
   disabled?: boolean;
   type?: string;
   className?: string;

package/src/input/PasswordInput.ts

@@ -0,0 +1,36 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcPasswordInput } from '@arclux/arc-ui/password-input';
+
+export interface PasswordInputProps {
+  name?: string;
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  disabled?: boolean;
+  required?: boolean;
+  error?: string;
+  size?: 'sm' | 'lg';
+  autocomplete?: string;
+  showStrength?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcStrengthChange?: (e: CustomEvent) => void;
+  onArcInput?: (e: CustomEvent) => void;
+  onArcChange?: (e: CustomEvent) => void;
+  onClick?: (e: Event) => void;
+}
+
+export const PasswordInput = createComponent({
+  tagName: 'arc-password-input',
+  elementClass: ArcPasswordInput,
+  react: React,
+  events: {
+    onArcStrengthChange: 'arc-strength-change' as EventName<CustomEvent>,
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+    onClick: 'click' as EventName<Event>,
+  },
+});

package/src/input/PinInput.ts

@@ -2,11 +2,12 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcPinInput } from '@arclux/arc-ui';
+import { ArcPinInput } from '@arclux/arc-ui/pin-input';
 
 export interface PinInputProps {
   length?: number;
   value?: string;
+  name?: string;
   disabled?: boolean;
   mask?: boolean;
   type?: string;

package/src/input/Radio.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcRadio } from '@arclux/arc-ui';
+import { ArcRadio } from '@arclux/arc-ui/radio';
 
 export interface RadioProps {
   value?: string;

package/src/input/RadioGroup.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcRadioGroup } from '@arclux/arc-ui';
+import { ArcRadioGroup } from '@arclux/arc-ui/radio-group';
 
 export interface RadioGroupProps {
   value?: string;
@@ -10,7 +10,6 @@ export interface RadioGroupProps {
   disabled?: boolean;
   size?: 'sm' | 'lg';
   orientation?: 'horizontal';
-  _radios?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/RangeSlider.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcRangeSlider } from '@arclux/arc-ui';
+import { ArcRangeSlider } from '@arclux/arc-ui/range-slider';
 
 export interface RangeSliderProps {
   min?: number;
@@ -10,10 +10,10 @@ export interface RangeSliderProps {
   step?: number;
   low?: number;
   high?: number;
+  name?: string;
   disabled?: boolean;
   label?: string;
   showValues?: boolean;
-  _dragging?: string;
   className?: string;
   children?: React.ReactNode;
   onArcInput?: (e: CustomEvent) => void;

package/src/input/Rating.ts

@@ -2,11 +2,12 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcRating } from '@arclux/arc-ui';
+import { ArcRating } from '@arclux/arc-ui/rating';
 
 export interface RatingProps {
   value?: number;
   max?: number;
+  name?: string;
   disabled?: boolean;
   readonly?: boolean;
   className?: string;

package/src/input/Search.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSearch } from '@arclux/arc-ui';
+import { ArcSearch } from '@arclux/arc-ui/search';
 
 export interface SearchProps {
   value?: string;
@@ -10,9 +10,6 @@ export interface SearchProps {
   label?: string;
   disabled?: boolean;
   loading?: boolean;
-  _open?: string;
-  _activeIndex?: string;
-  _suggestions?: string;
   className?: string;
   children?: React.ReactNode;
   onArcInput?: (e: CustomEvent) => void;

package/src/input/SegmentedControl.ts

@@ -2,12 +2,11 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSegmentedControl } from '@arclux/arc-ui';
+import { ArcSegmentedControl } from '@arclux/arc-ui/segmented-control';
 
 export interface SegmentedControlProps {
   value?: string;
   disabled?: boolean;
-  _options?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/Select.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSelect } from '@arclux/arc-ui';
+import { ArcSelect } from '@arclux/arc-ui/select';
 
 export interface SelectProps {
   value?: string;
@@ -13,7 +13,6 @@ export interface SelectProps {
   size?: 'sm' | 'lg';
   error?: string;
   open?: boolean;
-  _options?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/Slider.ts

@@ -2,13 +2,14 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSlider } from '@arclux/arc-ui';
+import { ArcSlider } from '@arclux/arc-ui/slider';
 
 export interface SliderProps {
   value?: number;
   min?: number;
   max?: number;
   step?: number;
+  name?: string;
   disabled?: boolean;
   label?: string;
   className?: string;

package/src/input/SortableList.ts

@@ -2,15 +2,10 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSortableList } from '@arclux/arc-ui';
+import { ArcSortableList } from '@arclux/arc-ui/sortable-list';
 
 export interface SortableListProps {
   disabled?: boolean;
-  _items?: string;
-  _dragIndex?: string;
-  _overIndex?: string;
-  _kbSelected?: string;
-  _kbMoving?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/Suggestion.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSuggestion } from '@arclux/arc-ui';
+import { ArcSuggestion } from '@arclux/arc-ui/suggestion';
 
 export interface SuggestionProps {
   value?: string;

package/src/input/SwitchGroup.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSwitchGroup } from '@arclux/arc-ui';
+import { ArcSwitchGroup } from '@arclux/arc-ui/switch-group';
 
 export interface SwitchGroupProps {
   label?: string;

package/src/input/TagInput.ts

@@ -0,0 +1,32 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcTagInput } from '@arclux/arc-ui/tag-input';
+
+export interface TagInputProps {
+  value?: unknown[];
+  suggestions?: unknown[];
+  delimiter?: string;
+  maxTags?: number;
+  allowCustom?: boolean;
+  label?: string;
+  placeholder?: string;
+  name?: string;
+  disabled?: boolean;
+  error?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+  onArcInput?: (e: CustomEvent) => void;
+}
+
+export const TagInput = createComponent({
+  tagName: 'arc-tag-input',
+  elementClass: ArcTagInput,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
+  },
+});

package/src/input/Textarea.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcTextarea } from '@arclux/arc-ui';
+import { ArcTextarea } from '@arclux/arc-ui/textarea';
 
 export interface TextareaProps {
   value?: string;

package/src/input/ThemeToggle.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcThemeToggle } from '@arclux/arc-ui';
+import { ArcThemeToggle } from '@arclux/arc-ui/theme-toggle';
 
 export interface ThemeToggleProps {
   theme?: string;