@arclux/arc-ui-react 2.11.0 → 3.0.0

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,14 +5,16 @@ 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;
   name?: string;
   disabled?: boolean;
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
-  onClick?: (e: Event) => void;
+  onArcInput?: (e: CustomEvent) => void;
 }
 
 export const MultiSelect = createComponent({
@@ -21,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,6 +14,7 @@ export interface NumberInputProps {
   name?: string;
   disabled?: boolean;
   className?: string;
+  onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }
@@ -22,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,12 +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;
+  onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
 }
 
@@ -19,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/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,6 +15,7 @@ export interface PinInputProps {
   separator?: number;
   label?: string;
   className?: string;
+  onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
   onArcComplete?: (e: CustomEvent) => void;
 }
@@ -23,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;

package/src/input/Rating.ts

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

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/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/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;

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

@@ -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;

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;

package/src/input/ThemeToggle.ts

@@ -8,6 +8,7 @@ export interface ThemeToggleProps {
   theme?: 'dark' | 'light' | 'auto';
   disabled?: boolean;
   iconOnly?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   className?: string;
   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,6 +15,7 @@ export interface TimePickerProps {
   placeholder?: string;
   disabled?: boolean;
   label?: string;
+  open?: boolean;
   className?: string;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => 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;

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,7 +5,7 @@ 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;
   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

@@ -5,7 +5,7 @@ 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;
   onArcNavigate?: (e: CustomEvent) => void;

package/src/navigation/Footer.ts

@@ -5,11 +5,12 @@ 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';
   className?: string;
+  children?: React.ReactNode;
 }
 
 export const Footer = createComponent({

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

@@ -5,7 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcRail } from '@arclux/arc-ui/rail';
 
 export interface RailProps {
-  items?: string;
+  items?: Array<{icon: string, label: string, value: string}>;
   value?: string;
   expanded?: boolean;
   className?: string;

package/src/navigation/ScrollSpy.ts

@@ -7,9 +7,10 @@ import { ArcScrollSpy } from '@arclux/arc-ui/scroll-spy';
 export interface ScrollSpyProps {
   active?: string;
   offset?: number;
+  progress?: 'none' | 'ring' | 'read' | 'both';
   className?: string;
+  children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
-  onClick?: (e: Event) => void;
 }
 
 export const ScrollSpy = createComponent({
@@ -18,6 +19,5 @@ export const ScrollSpy = createComponent({
   react: React,
   events: {
     onArcChange: 'arc-change' as EventName<CustomEvent>,
-    onClick: 'click' as EventName<Event>,
   },
 });

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/navigation/SidebarLink.ts

@@ -8,6 +8,8 @@ export interface SidebarLinkProps {
   href?: string;
   active?: boolean;
   level?: number;
+  icon?: string;
+  external?: boolean;
   className?: string;
   children?: React.ReactNode;
 }

package/src/navigation/SidebarSection.ts

@@ -8,6 +8,7 @@ export interface SidebarSectionProps {
   heading?: string;
   collapsible?: boolean;
   open?: boolean;
+  icon?: string;
   className?: string;
   children?: React.ReactNode;
   onArcToggle?: (e: CustomEvent) => void;

package/src/navigation/SpeedDial.ts

@@ -8,10 +8,11 @@ export interface SpeedDialProps {
   open?: boolean;
   direction?: 'up' | 'down' | 'left' | 'right';
   position?: 'bottom-right' | 'bottom-left';
-  items?: string;
+  items?: Array<{icon: string, label: string, value?: string}>;
   className?: string;
-  onArcAction?: (e: CustomEvent) => void;
   onArcClose?: (e: CustomEvent) => void;
+  onArcOpen?: (e: CustomEvent) => void;
+  onArcAction?: (e: CustomEvent) => void;
 }
 
 export const SpeedDial = createComponent({
@@ -19,7 +20,8 @@ export const SpeedDial = createComponent({
   elementClass: ArcSpeedDial,
   react: React,
   events: {
-    onArcAction: 'arc-action' as EventName<CustomEvent>,
     onArcClose: 'arc-close' as EventName<CustomEvent>,
+    onArcOpen: 'arc-open' as EventName<CustomEvent>,
+    onArcAction: 'arc-action' as EventName<CustomEvent>,
   },
 });

package/src/navigation/TopBar.ts

@@ -6,12 +6,15 @@ import { ArcTopBar } from '@arclux/arc-ui/top-bar';
 
 export interface TopBarProps {
   heading?: string;
+  homeHref?: string;
+  scrolled?: boolean;
+  immersive?: boolean;
   fixed?: boolean;
   contained?: string;
   menuOpen?: boolean;
   mobileMenu?: string;
   menuPosition?: string;
-  navAlign?: string;
+  navAlign?: 'left' | 'center' | 'right';
   className?: string;
 }
 

package/src/shared/MenuDivider.ts

@@ -6,7 +6,6 @@ import { ArcMenuDivider } from '@arclux/arc-ui/menu-divider';
 
 export interface MenuDividerProps {
   className?: string;
-  children?: React.ReactNode;
 }
 
 export const MenuDivider = createComponent({

package/src/shared/MenuItem.ts

@@ -8,6 +8,7 @@ export interface MenuItemProps {
   shortcut?: string;
   disabled?: boolean;
   icon?: string;
+  value?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/typography/GradientText.ts

@@ -7,7 +7,7 @@ import { ArcGradientText } from '@arclux/arc-ui/gradient-text';
 export interface GradientTextProps {
   variant?: 'accent' | 'display' | 'sunset' | 'ocean' | 'custom';
   gradient?: string;
-  animate?: boolean;
+  animated?: boolean;
   className?: string;
   children?: React.ReactNode;
 }

package/src/typography/KeyboardMap.ts

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ArcKeyboardMap } from '@arclux/arc-ui/keyboard-map';
+
+export interface KeyboardMapProps {
+  layout?: string;
+  highlight?: string|string[];
+  labels?: boolean;
+  platform?: string;
+  caption?: string;
+  className?: string;
+}
+
+export const KeyboardMap = createComponent({
+  tagName: 'arc-keyboard-map',
+  elementClass: ArcKeyboardMap,
+  react: React,
+});

package/src/typography/Terminal.ts

@@ -0,0 +1,25 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcTerminal } from '@arclux/arc-ui/terminal';
+
+export interface TerminalProps {
+  lines?: string;
+  prompt?: string;
+  title?: string;
+  speed?: number;
+  autoplay?: boolean;
+  loop?: boolean;
+  className?: string;
+  onArcComplete?: (e: CustomEvent) => void;
+}
+
+export const Terminal = createComponent({
+  tagName: 'arc-terminal',
+  elementClass: ArcTerminal,
+  react: React,
+  events: {
+    onArcComplete: 'arc-complete' as EventName<CustomEvent>,
+  },
+});

package/src/typography/index.ts

@@ -3,8 +3,6 @@
 export { Blockquote } from './Blockquote.js';
 export type { BlockquoteProps } from './Blockquote.js';
 
-export { CodeBlock } from './CodeBlock.js';
-export type { CodeBlockProps } from './CodeBlock.js';
 
 export { GradientText } from './GradientText.js';
 export type { GradientTextProps } from './GradientText.js';
@@ -35,3 +33,9 @@ export type { TypewriterProps } from './Typewriter.js';
 
 export { Text } from './Text.js';
 export type { TextProps } from './Text.js';
+
+export { Terminal } from './Terminal.js';
+export type { TerminalProps } from './Terminal.js';
+
+export { KeyboardMap } from './KeyboardMap.js';
+export type { KeyboardMapProps } from './KeyboardMap.js';

package/src/feedback/ToastManager.ts

@@ -1,28 +0,0 @@
-// Auto-generated by @arclux/prism — do not edit manually
-
-import React from 'react';
-import { createComponent, type EventName } from '@lit/react';
-import { ArcToastManager } from '@arclux/arc-ui/toast-manager';
-
-export interface ToastManagerProps {
-  position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
-  duration?: number;
-  maxVisible?: number;
-  dedupe?: boolean;
-  queueLimit?: number;
-  className?: string;
-  onArcQueueOverflow?: (e: CustomEvent) => void;
-  onArcDismiss?: (e: CustomEvent) => void;
-  onArcQueueChange?: (e: CustomEvent) => void;
-}
-
-export const ToastManager = createComponent({
-  tagName: 'arc-toast-manager',
-  elementClass: ArcToastManager,
-  react: React,
-  events: {
-    onArcQueueOverflow: 'arc-queue-overflow' as EventName<CustomEvent>,
-    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
-    onArcQueueChange: 'arc-queue-change' as EventName<CustomEvent>,
-  },
-});