@arclux/arc-ui-react 2.11.0 → 3.0.0

package/src/feedback/Banner.ts

@@ -10,7 +10,7 @@ export interface BannerProps {
   sticky?: boolean;
   className?: string;
   children?: React.ReactNode;
-  onArcDismiss?: (e: CustomEvent) => void;
+  onArcClose?: (e: CustomEvent) => void;
 }
 
 export const Banner = createComponent({
@@ -18,6 +18,6 @@ export const Banner = createComponent({
   elementClass: ArcBanner,
   react: React,
   events: {
-    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+    onArcClose: 'arc-close' as EventName<CustomEvent>,
   },
 });

package/src/feedback/CommandItem.ts

@@ -8,6 +8,8 @@ export interface CommandItemProps {
   shortcut?: string;
   icon?: string;
   keywords?: string;
+  description?: string;
+  value?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/feedback/CommandPalette.ts

@@ -7,6 +7,7 @@ import { ArcCommandPalette } from '@arclux/arc-ui/command-palette';
 export interface CommandPaletteProps {
   open?: boolean;
   placeholder?: string;
+  maxResults?: number;
   className?: string;
   children?: React.ReactNode;
   onArcSelect?: (e: CustomEvent) => void;

package/src/feedback/Confirm.ts

@@ -10,7 +10,7 @@ export interface ConfirmProps {
   message?: string;
   confirmLabel?: string;
   cancelLabel?: string;
-  variant?: 'default' | 'danger';
+  variant?: 'default' | 'error';
   className?: string;
   children?: React.ReactNode;
   onArcConfirm?: (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/Conversation.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ArcConversation } from '@arclux/arc-ui/conversation';
+
+export interface ConversationProps {
+  autoScroll?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Conversation = createComponent({
+  tagName: 'arc-conversation',
+  elementClass: ArcConversation,
+  react: React,
+});

package/src/feedback/Dialog.ts

@@ -10,7 +10,7 @@ export interface DialogProps {
   message?: string;
   confirmLabel?: string;
   cancelLabel?: string;
-  variant?: 'default' | 'danger';
+  variant?: 'default' | 'error';
   className?: string;
   onArcConfirm?: (e: CustomEvent) => void;
   onArcCancel?: (e: CustomEvent) => void;

package/src/feedback/GuidedTour.ts

@@ -9,7 +9,7 @@ export interface GuidedTourProps {
   className?: string;
   onArcChange?: (e: CustomEvent) => void;
   onArcComplete?: (e: CustomEvent) => void;
-  onArcDismiss?: (e: CustomEvent) => void;
+  onArcClose?: (e: CustomEvent) => void;
 }
 
 export const GuidedTour = createComponent({
@@ -19,6 +19,6 @@ export const GuidedTour = createComponent({
   events: {
     onArcChange: 'arc-change' as EventName<CustomEvent>,
     onArcComplete: 'arc-complete' as EventName<CustomEvent>,
-    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+    onArcClose: 'arc-close' as EventName<CustomEvent>,
   },
 });

package/src/feedback/Message.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ArcMessage } from '@arclux/arc-ui/message';
+
+export interface MessageProps {
+  speaker?: 'user' | 'assistant' | 'system';
+  author?: string;
+  timestamp?: string;
+  pending?: boolean;
+  markdown?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Message = createComponent({
+  tagName: 'arc-message',
+  elementClass: ArcMessage,
+  react: React,
+});

package/src/feedback/Popover.ts

@@ -10,6 +10,7 @@ export interface PopoverProps {
   trigger?: string;
   className?: string;
   children?: React.ReactNode;
+  onArcOpen?: (e: CustomEvent) => void;
   onArcClose?: (e: CustomEvent) => void;
 }
 
@@ -18,6 +19,7 @@ export const Popover = createComponent({
   elementClass: ArcPopover,
   react: React,
   events: {
+    onArcOpen: 'arc-open' as EventName<CustomEvent>,
     onArcClose: 'arc-close' as EventName<CustomEvent>,
   },
 });

package/src/feedback/Snackbar.ts

@@ -9,7 +9,7 @@ export interface SnackbarProps {
   duration?: number;
   className?: string;
   onArcAction?: (e: CustomEvent) => void;
-  onArcDismiss?: (e: CustomEvent) => void;
+  onArcClose?: (e: CustomEvent) => void;
 }
 
 export const Snackbar = createComponent({
@@ -18,6 +18,6 @@ export const Snackbar = createComponent({
   react: React,
   events: {
     onArcAction: 'arc-action' as EventName<CustomEvent>,
-    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+    onArcClose: 'arc-close' as EventName<CustomEvent>,
   },
 });

package/src/feedback/Spotlight.ts

@@ -9,7 +9,7 @@ export interface SpotlightProps {
   active?: boolean;
   padding?: number;
   className?: string;
-  onArcDismiss?: (e: CustomEvent) => void;
+  onArcClose?: (e: CustomEvent) => void;
 }
 
 export const Spotlight = createComponent({
@@ -17,6 +17,6 @@ export const Spotlight = createComponent({
   elementClass: ArcSpotlight,
   react: React,
   events: {
-    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+    onArcClose: 'arc-close' as EventName<CustomEvent>,
   },
 });

package/src/feedback/Toast.ts

@@ -7,8 +7,13 @@ import { ArcToast } from '@arclux/arc-ui/toast';
 export interface ToastProps {
   position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
   duration?: number;
+  maxVisible?: number;
+  dedupe?: boolean;
+  queueLimit?: number;
   className?: string;
-  onArcDismiss?: (e: CustomEvent) => void;
+  onArcQueueOverflow?: (e: CustomEvent) => void;
+  onArcQueueChange?: (e: CustomEvent) => void;
+  onArcClose?: (e: CustomEvent) => void;
 }
 
 export const Toast = createComponent({
@@ -16,6 +21,8 @@ export const Toast = createComponent({
   elementClass: ArcToast,
   react: React,
   events: {
-    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+    onArcQueueOverflow: 'arc-queue-overflow' as EventName<CustomEvent>,
+    onArcQueueChange: 'arc-queue-change' as EventName<CustomEvent>,
+    onArcClose: 'arc-close' as EventName<CustomEvent>,
   },
 });

package/src/feedback/index.ts

@@ -9,6 +9,9 @@ export type { AnnouncementProps } from './Announcement.js';
 export { Banner } from './Banner.js';
 export type { BannerProps } from './Banner.js';
 
+export { CommandGroup } from './CommandGroup.js';
+export type { CommandGroupProps } from './CommandGroup.js';
+
 export { CommandItem } from './CommandItem.js';
 export type { CommandItemProps } from './CommandItem.js';
 
@@ -54,6 +57,9 @@ export type { PopoverProps } from './Popover.js';
 export { ProgressToast } from './ProgressToast.js';
 export type { ProgressToastProps } from './ProgressToast.js';
 
+export { Progress } from './Progress.js';
+export type { ProgressProps } from './Progress.js';
+
 export { Sheet } from './Sheet.js';
 export type { SheetProps } from './Sheet.js';
 
@@ -63,17 +69,14 @@ export type { SnackbarProps } from './Snackbar.js';
 export { Spotlight } from './Spotlight.js';
 export type { SpotlightProps } from './Spotlight.js';
 
+export { Toast } from './Toast.js';
+export type { ToastProps } from './Toast.js';
+
 export { Tooltip } from './Tooltip.js';
 export type { TooltipProps } from './Tooltip.js';
 
-export { ToastManager } from './ToastManager.js';
-export type { ToastManagerProps } from './ToastManager.js';
+export { Conversation } from './Conversation.js';
+export type { ConversationProps } from './Conversation.js';
 
-export { Progress } from './Progress.js';
-export type { ProgressProps } from './Progress.js';
-
-export { Toast } from './Toast.js';
-export type { ToastProps } from './Toast.js';
-
-export { CommandGroup } from './CommandGroup.js';
-export type { CommandGroupProps } from './CommandGroup.js';
+export { Message } from './Message.js';
+export type { MessageProps } from './Message.js';

package/src/index.ts

@@ -57,6 +57,9 @@ export type { InfiniteScrollProps } from './content/InfiniteScroll.js';
 export { Marquee } from './content/Marquee.js';
 export type { MarqueeProps } from './content/Marquee.js';
 
+export { QrCode } from './content/QrCode.js';
+export type { QrCodeProps } from './content/QrCode.js';
+
 export { ScrollArea } from './content/ScrollArea.js';
 export type { ScrollAreaProps } from './content/ScrollArea.js';
 
@@ -84,6 +87,9 @@ export type { AnimatedNumberProps } from './data/AnimatedNumber.js';
 export { Badge } from './data/Badge.js';
 export type { BadgeProps } from './data/Badge.js';
 
+export { Chart } from './data/Chart.js';
+export type { ChartProps } from './data/Chart.js';
+
 export { ComparisonColumn } from './data/ComparisonColumn.js';
 export type { ComparisonColumnProps } from './data/ComparisonColumn.js';
 
@@ -93,6 +99,9 @@ export type { ComparisonProps } from './data/Comparison.js';
 export { CountdownTimer } from './data/CountdownTimer.js';
 export type { CountdownTimerProps } from './data/CountdownTimer.js';
 
+export { DataGrid } from './data/DataGrid.js';
+export type { DataGridProps } from './data/DataGrid.js';
+
 export { DataTable } from './data/DataTable.js';
 export type { DataTableProps } from './data/DataTable.js';
 
@@ -105,6 +114,12 @@ export type { DescriptionListProps } from './data/DescriptionList.js';
 export { Diff } from './data/Diff.js';
 export type { DiffProps } from './data/Diff.js';
 
+export { EventCalendar } from './data/EventCalendar.js';
+export type { EventCalendarProps } from './data/EventCalendar.js';
+
+export { Kanban } from './data/Kanban.js';
+export type { KanbanProps } from './data/Kanban.js';
+
 export { KeyValue } from './data/KeyValue.js';
 export type { KeyValueProps } from './data/KeyValue.js';
 
@@ -150,8 +165,6 @@ export type { ValueCardProps } from './data/ValueCard.js';
 export { Blockquote } from './typography/Blockquote.js';
 export type { BlockquoteProps } from './typography/Blockquote.js';
 
-export { CodeBlock } from './typography/CodeBlock.js';
-export type { CodeBlockProps } from './typography/CodeBlock.js';
 
 export { GradientText } from './typography/GradientText.js';
 export type { GradientTextProps } from './typography/GradientText.js';
@@ -210,6 +223,9 @@ export type { CopyButtonProps } from './input/CopyButton.js';
 export { DatePicker } from './input/DatePicker.js';
 export type { DatePickerProps } from './input/DatePicker.js';
 
+export { DateRangePicker } from './input/DateRangePicker.js';
+export type { DateRangePickerProps } from './input/DateRangePicker.js';
+
 export { Fieldset } from './input/Fieldset.js';
 export type { FieldsetProps } from './input/Fieldset.js';
 
@@ -225,6 +241,9 @@ export type { HotkeyProps } from './input/Hotkey.js';
 export { IconButton } from './input/IconButton.js';
 export type { IconButtonProps } from './input/IconButton.js';
 
+export { ImageCropper } from './input/ImageCropper.js';
+export type { ImageCropperProps } from './input/ImageCropper.js';
+
 export { InputGroup } from './input/InputGroup.js';
 export type { InputGroupProps } from './input/InputGroup.js';
 
@@ -243,6 +262,9 @@ export type { NumberInputProps } from './input/NumberInput.js';
 export { OtpInput } from './input/OtpInput.js';
 export type { OtpInputProps } from './input/OtpInput.js';
 
+export { PasswordInput } from './input/PasswordInput.js';
+export type { PasswordInputProps } from './input/PasswordInput.js';
+
 export { PinInput } from './input/PinInput.js';
 export type { PinInputProps } from './input/PinInput.js';
 
@@ -279,6 +301,9 @@ export type { SuggestionProps } from './input/Suggestion.js';
 export { SwitchGroup } from './input/SwitchGroup.js';
 export type { SwitchGroupProps } from './input/SwitchGroup.js';
 
+export { TagInput } from './input/TagInput.js';
+export type { TagInputProps } from './input/TagInput.js';
+
 export { Textarea } from './input/Textarea.js';
 export type { TextareaProps } from './input/Textarea.js';
 
@@ -291,6 +316,9 @@ export type { TimePickerProps } from './input/TimePicker.js';
 export { Toggle } from './input/Toggle.js';
 export type { ToggleProps } from './input/Toggle.js';
 
+export { TransferList } from './input/TransferList.js';
+export type { TransferListProps } from './input/TransferList.js';
+
 export { AnchorNav } from './navigation/AnchorNav.js';
 export type { AnchorNavProps } from './navigation/AnchorNav.js';
 
@@ -318,6 +346,9 @@ export type { FooterProps } from './navigation/Footer.js';
 export { Link } from './navigation/Link.js';
 export type { LinkProps } from './navigation/Link.js';
 
+export { Menubar } from './navigation/Menubar.js';
+export type { MenubarProps } from './navigation/Menubar.js';
+
 export { NavItem } from './navigation/NavItem.js';
 export type { NavItemProps } from './navigation/NavItem.js';
 
@@ -447,6 +478,9 @@ export type { AnnouncementProps } from './feedback/Announcement.js';
 export { Banner } from './feedback/Banner.js';
 export type { BannerProps } from './feedback/Banner.js';
 
+export { CommandGroup } from './feedback/CommandGroup.js';
+export type { CommandGroupProps } from './feedback/CommandGroup.js';
+
 export { CommandItem } from './feedback/CommandItem.js';
 export type { CommandItemProps } from './feedback/CommandItem.js';
 
@@ -519,41 +553,65 @@ export type { MenuItemProps } from './shared/MenuItem.js';
 export { Option } from './shared/Option.js';
 export type { OptionProps } from './shared/Option.js';
 
-export { QrCode } from './content/QrCode.js';
-export type { QrCodeProps } from './content/QrCode.js';
+export { Clock } from './data/Clock.js';
+export type { ClockProps } from './data/Clock.js';
 
-export { Chart } from './data/Chart.js';
-export type { ChartProps } from './data/Chart.js';
+export { Gauge } from './data/Gauge.js';
+export type { GaugeProps } from './data/Gauge.js';
 
-export { DataGrid } from './data/DataGrid.js';
-export type { DataGridProps } from './data/DataGrid.js';
+export { LevelMeter } from './data/LevelMeter.js';
+export type { LevelMeterProps } from './data/LevelMeter.js';
 
-export { EventCalendar } from './data/EventCalendar.js';
-export type { EventCalendarProps } from './data/EventCalendar.js';
+export { Uptime } from './data/Uptime.js';
+export type { UptimeProps } from './data/Uptime.js';
 
-export { Kanban } from './data/Kanban.js';
-export type { KanbanProps } from './data/Kanban.js';
+export { Waveform } from './data/Waveform.js';
+export type { WaveformProps } from './data/Waveform.js';
 
-export { DateRangePicker } from './input/DateRangePicker.js';
-export type { DateRangePickerProps } from './input/DateRangePicker.js';
+export { Terminal } from './typography/Terminal.js';
+export type { TerminalProps } from './typography/Terminal.js';
 
-export { ImageCropper } from './input/ImageCropper.js';
-export type { ImageCropperProps } from './input/ImageCropper.js';
+export { Knob } from './input/Knob.js';
+export type { KnobProps } from './input/Knob.js';
 
-export { PasswordInput } from './input/PasswordInput.js';
-export type { PasswordInputProps } from './input/PasswordInput.js';
+export { Hotspot } from './content/Hotspot.js';
+export type { HotspotProps } from './content/Hotspot.js';
 
-export { TagInput } from './input/TagInput.js';
-export type { TagInputProps } from './input/TagInput.js';
+export { ImageCompare } from './content/ImageCompare.js';
+export type { ImageCompareProps } from './content/ImageCompare.js';
 
-export { TransferList } from './input/TransferList.js';
-export type { TransferListProps } from './input/TransferList.js';
+export { ImageHotspots } from './content/ImageHotspots.js';
+export type { ImageHotspotsProps } from './content/ImageHotspots.js';
 
-export { Menubar } from './navigation/Menubar.js';
-export type { MenubarProps } from './navigation/Menubar.js';
+export { Lightbox } from './content/Lightbox.js';
+export type { LightboxProps } from './content/Lightbox.js';
 
-export { ToastManager } from './feedback/ToastManager.js';
-export type { ToastManagerProps } from './feedback/ToastManager.js';
+export { Video } from './content/Video.js';
+export type { VideoProps } from './content/Video.js';
 
-export { CommandGroup } from './feedback/CommandGroup.js';
-export type { CommandGroupProps } from './feedback/CommandGroup.js';
+export { ActivityHeatmap } from './data/ActivityHeatmap.js';
+export type { ActivityHeatmapProps } from './data/ActivityHeatmap.js';
+
+export { JsonTree } from './data/JsonTree.js';
+export type { JsonTreeProps } from './data/JsonTree.js';
+
+export { KeyboardMap } from './typography/KeyboardMap.js';
+export type { KeyboardMapProps } from './typography/KeyboardMap.js';
+
+export { InlineEdit } from './input/InlineEdit.js';
+export type { InlineEditProps } from './input/InlineEdit.js';
+
+export { MaskedInput } from './input/MaskedInput.js';
+export type { MaskedInputProps } from './input/MaskedInput.js';
+
+export { SignaturePad } from './input/SignaturePad.js';
+export type { SignaturePadProps } from './input/SignaturePad.js';
+
+export { TreeSelect } from './input/TreeSelect.js';
+export type { TreeSelectProps } from './input/TreeSelect.js';
+
+export { Conversation } from './feedback/Conversation.js';
+export type { ConversationProps } from './feedback/Conversation.js';
+
+export { Message } from './feedback/Message.js';
+export type { MessageProps } from './feedback/Message.js';

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

@@ -5,13 +5,15 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcCalendar } from '@arclux/arc-ui/calendar';
 
 export interface CalendarProps {
+  locale?: string;
+  firstDayOfWeek?: number;
   value?: string;
   min?: string;
   max?: string;
   month?: number;
   year?: number;
   className?: string;
-  onArcNavigate?: (e: CustomEvent) => void;
+  onArcMonthChange?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
   onClick?: (e: Event) => void;
 }
@@ -21,7 +23,7 @@ export const Calendar = createComponent({
   elementClass: ArcCalendar,
   react: React,
   events: {
-    onArcNavigate: 'arc-navigate' as EventName<CustomEvent>,
+    onArcMonthChange: 'arc-month-change' as EventName<CustomEvent>,
     onArcChange: 'arc-change' as EventName<CustomEvent>,
     onClick: 'click' as EventName<Event>,
   },

package/src/input/ColorPicker.ts

@@ -5,12 +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;
+  onArcInput?: (e: CustomEvent) => void;
   onArcChange?: (e: CustomEvent) => void;
 }
 
@@ -19,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/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,6 +13,9 @@ export interface DatePickerProps {
   placeholder?: string;
   disabled?: boolean;
   label?: string;
+  open?: boolean;
+  locale?: string;
+  firstDayOfWeek?: number;
   className?: string;
   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,6 +19,7 @@ export interface DateRangePickerProps {
   disabled?: boolean;
   required?: boolean;
   label?: string;
+  open?: boolean;
   className?: string;
   onArcChange?: (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/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>,
+  },
+});