@arclux/arc-ui-react 2.1.0 → 2.3.0

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;

package/src/input/TimePicker.ts

@@ -2,10 +2,11 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcTimePicker } from '@arclux/arc-ui';
+import { ArcTimePicker } from '@arclux/arc-ui/time-picker';
 
 export interface TimePickerProps {
   value?: string;
+  name?: string;
   min?: string;
   max?: string;
   step?: number;
@@ -13,11 +14,6 @@ export interface TimePickerProps {
   placeholder?: string;
   disabled?: boolean;
   label?: string;
-  _open?: string;
-  _selectedHour?: string;
-  _selectedMinute?: string;
-  _selectedPeriod?: string;
-  _focusedColumn?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/input/Toggle.ts

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

package/src/input/TransferList.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 { ArcTransferList } from '@arclux/arc-ui/transfer-list';
+
+export interface TransferListProps {
+  options?: unknown[];
+  value?: unknown[];
+  name?: string;
+  disabled?: boolean;
+  searchable?: boolean;
+  sourceLabel?: string;
+  targetLabel?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const TransferList = createComponent({
+  tagName: 'arc-transfer-list',
+  elementClass: ArcTransferList,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/input/index.ts

@@ -1,8 +1,7 @@
-// ARC UI React — Input tier
-// Form controls and interactive input components
+// Auto-generated by @arclux/prism — do not edit manually
 
-export { Button } from './Button.js';
-export type { ButtonProps } from './Button.js';
+export { ButtonGroup } from './ButtonGroup.js';
+export type { ButtonGroupProps } from './ButtonGroup.js';
 
 export { Calendar } from './Calendar.js';
 export type { CalendarProps } from './Calendar.js';
@@ -25,17 +24,26 @@ export type { CopyButtonProps } from './CopyButton.js';
 export { DatePicker } from './DatePicker.js';
 export type { DatePickerProps } from './DatePicker.js';
 
+export { Fieldset } from './Fieldset.js';
+export type { FieldsetProps } from './Fieldset.js';
+
 export { FileUpload } from './FileUpload.js';
 export type { FileUploadProps } from './FileUpload.js';
 
 export { Form } from './Form.js';
 export type { FormProps } from './Form.js';
 
+export { Hotkey } from './Hotkey.js';
+export type { HotkeyProps } from './Hotkey.js';
+
 export { IconButton } from './IconButton.js';
 export type { IconButtonProps } from './IconButton.js';
 
-export { Input } from './Input.js';
-export type { InputProps } from './Input.js';
+export { InputGroup } from './InputGroup.js';
+export type { InputGroupProps } from './InputGroup.js';
+
+export { Label } from './Label.js';
+export type { LabelProps } from './Label.js';
 
 export { MultiSelect } from './MultiSelect.js';
 export type { MultiSelectProps } from './MultiSelect.js';
@@ -49,12 +57,12 @@ export type { OtpInputProps } from './OtpInput.js';
 export { PinInput } from './PinInput.js';
 export type { PinInputProps } from './PinInput.js';
 
-export { Radio } from './Radio.js';
-export type { RadioProps } from './Radio.js';
-
 export { RadioGroup } from './RadioGroup.js';
 export type { RadioGroupProps } from './RadioGroup.js';
 
+export { RangeSlider } from './RangeSlider.js';
+export type { RangeSliderProps } from './RangeSlider.js';
+
 export { Rating } from './Rating.js';
 export type { RatingProps } from './Rating.js';
 
@@ -64,47 +72,53 @@ export type { SearchProps } from './Search.js';
 export { SegmentedControl } from './SegmentedControl.js';
 export type { SegmentedControlProps } from './SegmentedControl.js';
 
-export { Select } from './Select.js';
-export type { SelectProps } from './Select.js';
-
-export { Slider } from './Slider.js';
-export type { SliderProps } from './Slider.js';
-
 export { SortableList } from './SortableList.js';
 export type { SortableListProps } from './SortableList.js';
 
 export { Suggestion } from './Suggestion.js';
 export type { SuggestionProps } from './Suggestion.js';
 
+export { SwitchGroup } from './SwitchGroup.js';
+export type { SwitchGroupProps } from './SwitchGroup.js';
+
 export { Textarea } from './Textarea.js';
 export type { TextareaProps } from './Textarea.js';
 
 export { ThemeToggle } from './ThemeToggle.js';
 export type { ThemeToggleProps } from './ThemeToggle.js';
 
-export { Toggle } from './Toggle.js';
-export type { ToggleProps } from './Toggle.js';
+export { TimePicker } from './TimePicker.js';
+export type { TimePickerProps } from './TimePicker.js';
 
-export { ButtonGroup } from './ButtonGroup.js';
-export type { ButtonGroupProps } from './ButtonGroup.js';
+export { DateRangePicker } from './DateRangePicker.js';
+export type { DateRangePickerProps } from './DateRangePicker.js';
 
-export { Fieldset } from './Fieldset.js';
-export type { FieldsetProps } from './Fieldset.js';
+export { ImageCropper } from './ImageCropper.js';
+export type { ImageCropperProps } from './ImageCropper.js';
 
-export { InputGroup } from './InputGroup.js';
-export type { InputGroupProps } from './InputGroup.js';
+export { PasswordInput } from './PasswordInput.js';
+export type { PasswordInputProps } from './PasswordInput.js';
 
-export { Label } from './Label.js';
-export type { LabelProps } from './Label.js';
+export { TagInput } from './TagInput.js';
+export type { TagInputProps } from './TagInput.js';
 
-export { SwitchGroup } from './SwitchGroup.js';
-export type { SwitchGroupProps } from './SwitchGroup.js';
+export { TransferList } from './TransferList.js';
+export type { TransferListProps } from './TransferList.js';
 
-export { Hotkey } from './Hotkey.js';
-export type { HotkeyProps } from './Hotkey.js';
+export { Button } from './Button.js';
+export type { ButtonProps } from './Button.js';
 
-export { RangeSlider } from './RangeSlider.js';
-export type { RangeSliderProps } from './RangeSlider.js';
+export { Input } from './Input.js';
+export type { InputProps } from './Input.js';
 
-export { TimePicker } from './TimePicker.js';
-export type { TimePickerProps } from './TimePicker.js';
+export { Radio } from './Radio.js';
+export type { RadioProps } from './Radio.js';
+
+export { Select } from './Select.js';
+export type { SelectProps } from './Select.js';
+
+export { Slider } from './Slider.js';
+export type { SliderProps } from './Slider.js';
+
+export { Toggle } from './Toggle.js';
+export type { ToggleProps } from './Toggle.js';

package/src/layout/AppShell.ts

@@ -1,14 +1,12 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcAppShell } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcAppShell } from '@arclux/arc-ui/app-shell';
 
 export interface AppShellProps {
   sidebarOpen?: boolean;
   breakpoint?: number;
-  _mobile?: string;
-  _hasToc?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/layout/AspectGrid.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcAspectGrid } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcAspectGrid } from '@arclux/arc-ui/aspect-grid';
 
 export interface AspectGridProps {
   columns?: number;

package/src/layout/AuthShell.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcAuthShell } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcAuthShell } from '@arclux/arc-ui/auth-shell';
 
 export interface AuthShellProps {
   variant?: string;

package/src/layout/Center.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcCenter } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcCenter } from '@arclux/arc-ui/center';
 
 export interface CenterProps {
   maxWidth?: string;

package/src/layout/Cluster.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcCluster } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcCluster } from '@arclux/arc-ui/cluster';
 
 export interface ClusterProps {
   gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/src/layout/Container.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcContainer } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcContainer } from '@arclux/arc-ui/container';
 
 export interface ContainerProps {
   narrow?: boolean;

package/src/layout/DashboardGrid.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcDashboardGrid } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcDashboardGrid } from '@arclux/arc-ui/dashboard-grid';
 
 export interface DashboardGridProps {
   columns?: number;

package/src/layout/Dock.ts

@@ -1,14 +1,13 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcDock } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcDock } from '@arclux/arc-ui/dock';
 
 export interface DockProps {
   position?: 'bottom' | 'left' | 'right';
   autoHide?: boolean;
   open?: boolean;
-  _hovered?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/layout/FloatBar.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcFloatBar } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcFloatBar } from '@arclux/arc-ui/float-bar';
 
 export interface FloatBarProps {
   open?: boolean;

package/src/layout/Inset.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcInset } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcInset } from '@arclux/arc-ui/inset';
 
 export interface InsetProps {
   space?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

package/src/layout/Masonry.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcMasonry } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcMasonry } from '@arclux/arc-ui/masonry';
 
 export interface MasonryProps {
   columns?: number;

package/src/layout/PageHeader.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcPageHeader } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcPageHeader } from '@arclux/arc-ui/page-header';
 
 export interface PageHeaderProps {
   heading?: string;

package/src/layout/PageLayout.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcPageLayout } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcPageLayout } from '@arclux/arc-ui/page-layout';
 
 export interface PageLayoutProps {
   layout?: string;

package/src/layout/Resizable.ts

@@ -2,14 +2,13 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcResizable } from '@arclux/arc-ui';
+import { ArcResizable } from '@arclux/arc-ui/resizable';
 
 export interface ResizableProps {
   direction?: 'horizontal' | 'vertical';
   minSize?: number;
   maxSize?: number;
   size?: number;
-  _dragging?: string;
   className?: string;
   children?: React.ReactNode;
   onArcResize?: (e: CustomEvent) => void;

package/src/layout/ResponsiveSwitcher.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcResponsiveSwitcher } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcResponsiveSwitcher } from '@arclux/arc-ui/responsive-switcher';
 
 export interface ResponsiveSwitcherProps {
   threshold?: string;

package/src/layout/Section.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcSection } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcSection } from '@arclux/arc-ui/section';
 
 export interface SectionProps {
   label?: string;

package/src/layout/SettingsLayout.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcSettingsLayout } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcSettingsLayout } from '@arclux/arc-ui/settings-layout';
 
 export interface SettingsLayoutProps {
   navPosition?: string;

package/src/layout/SplitPane.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSplitPane } from '@arclux/arc-ui';
+import { ArcSplitPane } from '@arclux/arc-ui/split-pane';
 
 export interface SplitPaneProps {
   orientation?: string;

package/src/layout/StatusBar.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcStatusBar } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcStatusBar } from '@arclux/arc-ui/status-bar';
 
 export interface StatusBarProps {
   position?: string;

package/src/layout/Sticky.ts

@@ -2,11 +2,10 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSticky } from '@arclux/arc-ui';
+import { ArcSticky } from '@arclux/arc-ui/sticky';
 
 export interface StickyProps {
   offset?: string;
-  stuck?: boolean;
   className?: string;
   children?: React.ReactNode;
   onArcStuck?: (e: CustomEvent) => void;

package/src/layout/Toolbar.ts

@@ -2,18 +2,23 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcToolbar } from '@arclux/arc-ui';
+import { ArcToolbar } from '@arclux/arc-ui/toolbar';
 
 export interface ToolbarProps {
   sticky?: boolean;
   size?: string;
   border?: boolean;
+  overflow?: boolean;
   className?: string;
   children?: React.ReactNode;
+  onArcOverflowChange?: (e: CustomEvent) => void;
 }
 
 export const Toolbar = createComponent({
   tagName: 'arc-toolbar',
   elementClass: ArcToolbar,
   react: React,
+  events: {
+    onArcOverflowChange: 'arc-overflow-change' as EventName<CustomEvent>,
+  },
 });

package/src/layout/index.ts

@@ -1,18 +1,38 @@
-// ARC UI React — Layout tier
-// App shells, containers, and structural layout components
+// Auto-generated by @arclux/prism — do not edit manually
 
 export { AppShell } from './AppShell.js';
 export type { AppShellProps } from './AppShell.js';
 
+export { AspectGrid } from './AspectGrid.js';
+export type { AspectGridProps } from './AspectGrid.js';
+
 export { AuthShell } from './AuthShell.js';
 export type { AuthShellProps } from './AuthShell.js';
 
+export { Center } from './Center.js';
+export type { CenterProps } from './Center.js';
+
+export { Cluster } from './Cluster.js';
+export type { ClusterProps } from './Cluster.js';
+
 export { Container } from './Container.js';
 export type { ContainerProps } from './Container.js';
 
 export { DashboardGrid } from './DashboardGrid.js';
 export type { DashboardGridProps } from './DashboardGrid.js';
 
+export { Dock } from './Dock.js';
+export type { DockProps } from './Dock.js';
+
+export { FloatBar } from './FloatBar.js';
+export type { FloatBarProps } from './FloatBar.js';
+
+export { Inset } from './Inset.js';
+export type { InsetProps } from './Inset.js';
+
+export { Masonry } from './Masonry.js';
+export type { MasonryProps } from './Masonry.js';
+
 export { PageHeader } from './PageHeader.js';
 export type { PageHeaderProps } from './PageHeader.js';
 
@@ -22,6 +42,9 @@ export type { PageLayoutProps } from './PageLayout.js';
 export { Resizable } from './Resizable.js';
 export type { ResizableProps } from './Resizable.js';
 
+export { ResponsiveSwitcher } from './ResponsiveSwitcher.js';
+export type { ResponsiveSwitcherProps } from './ResponsiveSwitcher.js';
+
 export { Section } from './Section.js';
 export type { SectionProps } from './Section.js';
 
@@ -34,32 +57,8 @@ export type { SplitPaneProps } from './SplitPane.js';
 export { StatusBar } from './StatusBar.js';
 export type { StatusBarProps } from './StatusBar.js';
 
-export { Toolbar } from './Toolbar.js';
-export type { ToolbarProps } from './Toolbar.js';
-
-export { AspectGrid } from './AspectGrid.js';
-export type { AspectGridProps } from './AspectGrid.js';
-
-export { Center } from './Center.js';
-export type { CenterProps } from './Center.js';
-
-export { Cluster } from './Cluster.js';
-export type { ClusterProps } from './Cluster.js';
-
-export { Dock } from './Dock.js';
-export type { DockProps } from './Dock.js';
-
-export { FloatBar } from './FloatBar.js';
-export type { FloatBarProps } from './FloatBar.js';
-
-export { Inset } from './Inset.js';
-export type { InsetProps } from './Inset.js';
-
-export { Masonry } from './Masonry.js';
-export type { MasonryProps } from './Masonry.js';
-
-export { ResponsiveSwitcher } from './ResponsiveSwitcher.js';
-export type { ResponsiveSwitcherProps } from './ResponsiveSwitcher.js';
-
 export { Sticky } from './Sticky.js';
 export type { StickyProps } from './Sticky.js';
+
+export { Toolbar } from './Toolbar.js';
+export type { ToolbarProps } from './Toolbar.js';

package/src/navigation/AnchorNav.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcAnchorNav } from '@arclux/arc-ui';
+import { ArcAnchorNav } from '@arclux/arc-ui/anchor-nav';
 
 export interface AnchorNavProps {
   orientation?: 'vertical';

package/src/navigation/BottomNav.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcBottomNav } from '@arclux/arc-ui';
+import { ArcBottomNav } from '@arclux/arc-ui/bottom-nav';
 
 export interface BottomNavProps {
   items?: string;

package/src/navigation/Breadcrumb.ts

@@ -2,11 +2,11 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcBreadcrumb } from '@arclux/arc-ui';
+import { ArcBreadcrumb } from '@arclux/arc-ui/breadcrumb';
 
 export interface BreadcrumbProps {
   separator?: string;
-  _items?: string;
+  label?: string;
   className?: string;
   children?: React.ReactNode;
   onArcNavigate?: (e: CustomEvent) => void;

package/src/navigation/BreadcrumbItem.ts

@@ -1,8 +1,8 @@
 // Auto-generated by @arclux/prism — do not edit manually
 
 import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcBreadcrumbItem } from '@arclux/arc-ui';
+import { createComponent } from '@lit/react';
+import { ArcBreadcrumbItem } from '@arclux/arc-ui/breadcrumb-item';
 
 export interface BreadcrumbItemProps {
   href?: string;

package/src/navigation/BreadcrumbMenu.ts

@@ -2,11 +2,11 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcBreadcrumbMenu } from '@arclux/arc-ui';
+import { ArcBreadcrumbMenu } from '@arclux/arc-ui/breadcrumb-menu';
 
 export interface BreadcrumbMenuProps {
   items?: string;
-  _openIndex?: number;
+  label?: string;
   className?: string;
   children?: React.ReactNode;
   onArcNavigate?: (e: CustomEvent) => void;

package/src/navigation/CommandBar.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCommandBar } from '@arclux/arc-ui';
+import { ArcCommandBar } from '@arclux/arc-ui/command-bar';
 
 export interface CommandBarProps {
   placeholder?: string;