@arclux/arc-ui-react 1.9.2 → 1.10.1

package/src/feedback/GuidedTour.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 { ArcGuidedTour } from '@arclux/arc-ui';
+
+export interface GuidedTourProps {
+  steps?: string;
+  active?: string;
+  open?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+  onArcComplete?: (e: CustomEvent) => void;
+  onArcDismiss?: (e: CustomEvent) => void;
+}
+
+export const GuidedTour = createComponent({
+  tagName: 'arc-guided-tour',
+  elementClass: ArcGuidedTour,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+    onArcComplete: 'arc-complete' as EventName<CustomEvent>,
+    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/HoverCard.ts

@@ -5,7 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcHoverCard } from '@arclux/arc-ui';
 
 export interface HoverCardProps {
-  position?: 'bottom' | 'top' | 'left' | 'right';
+  position?: string;
   openDelay?: number;
   closeDelay?: number;
   _visible?: string;

package/src/feedback/InlineMessage.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcInlineMessage } from '@arclux/arc-ui';
+
+export interface InlineMessageProps {
+  variant?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const InlineMessage = createComponent({
+  tagName: 'arc-inline-message',
+  elementClass: ArcInlineMessage,
+  react: React,
+});

package/src/feedback/LoadingOverlay.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcLoadingOverlay } from '@arclux/arc-ui';
+
+export interface LoadingOverlayProps {
+  active?: boolean;
+  message?: string;
+  global?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const LoadingOverlay = createComponent({
+  tagName: 'arc-loading-overlay',
+  elementClass: ArcLoadingOverlay,
+  react: React,
+});

package/src/feedback/Popover.ts

@@ -6,7 +6,7 @@ import { ArcPopover } from '@arclux/arc-ui';
 
 export interface PopoverProps {
   open?: boolean;
-  position?: 'bottom' | 'top' | 'left' | 'right';
+  position?: string;
   trigger?: string;
   className?: string;
   children?: React.ReactNode;

package/src/feedback/ProgressToast.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 { ArcProgressToast } from '@arclux/arc-ui';
+
+export interface ProgressToastProps {
+  position?: 'bottom-right' | 'top-right';
+  _toasts?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcComplete?: (e: CustomEvent) => void;
+  onArcCancel?: (e: CustomEvent) => void;
+}
+
+export const ProgressToast = createComponent({
+  tagName: 'arc-progress-toast',
+  elementClass: ArcProgressToast,
+  react: React,
+  events: {
+    onArcComplete: 'arc-complete' as EventName<CustomEvent>,
+    onArcCancel: 'arc-cancel' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/Sheet.ts

@@ -12,7 +12,6 @@ export interface SheetProps {
   children?: React.ReactNode;
   onArcClose?: (e: CustomEvent) => void;
   onArcOpen?: (e: CustomEvent) => void;
-  onClick?: (e: Event) => void;
 }
 
 export const Sheet = createComponent({
@@ -22,6 +21,5 @@ export const Sheet = createComponent({
   events: {
     onArcClose: 'arc-close' as EventName<CustomEvent>,
     onArcOpen: 'arc-open' as EventName<CustomEvent>,
-    onClick: 'click' as EventName<Event>,
   },
 });

package/src/feedback/Snackbar.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 { ArcSnackbar } from '@arclux/arc-ui';
+
+export interface SnackbarProps {
+  position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
+  duration?: number;
+  _snackbars?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcAction?: (e: CustomEvent) => void;
+  onArcDismiss?: (e: CustomEvent) => void;
+}
+
+export const Snackbar = createComponent({
+  tagName: 'arc-snackbar',
+  elementClass: ArcSnackbar,
+  react: React,
+  events: {
+    onArcAction: 'arc-action' as EventName<CustomEvent>,
+    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/Spotlight.ts

@@ -0,0 +1,23 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcSpotlight } from '@arclux/arc-ui';
+
+export interface SpotlightProps {
+  target?: string;
+  active?: boolean;
+  padding?: number;
+  className?: string;
+  children?: React.ReactNode;
+  onArcDismiss?: (e: CustomEvent) => void;
+}
+
+export const Spotlight = createComponent({
+  tagName: 'arc-spotlight',
+  elementClass: ArcSpotlight,
+  react: React,
+  events: {
+    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+  },
+});

package/src/feedback/index.ts

@@ -42,3 +42,33 @@ export type { ToastProps } from './Toast.js';
 
 export { Tooltip } from './Tooltip.js';
 export type { TooltipProps } from './Tooltip.js';
+
+export { Announcement } from './Announcement.js';
+export type { AnnouncementProps } from './Announcement.js';
+
+export { Banner } from './Banner.js';
+export type { BannerProps } from './Banner.js';
+
+export { Confirm } from './Confirm.js';
+export type { ConfirmProps } from './Confirm.js';
+
+export { ConnectionStatus } from './ConnectionStatus.js';
+export type { ConnectionStatusProps } from './ConnectionStatus.js';
+
+export { GuidedTour } from './GuidedTour.js';
+export type { GuidedTourProps } from './GuidedTour.js';
+
+export { InlineMessage } from './InlineMessage.js';
+export type { InlineMessageProps } from './InlineMessage.js';
+
+export { LoadingOverlay } from './LoadingOverlay.js';
+export type { LoadingOverlayProps } from './LoadingOverlay.js';
+
+export { ProgressToast } from './ProgressToast.js';
+export type { ProgressToastProps } from './ProgressToast.js';
+
+export { Snackbar } from './Snackbar.js';
+export type { SnackbarProps } from './Snackbar.js';
+
+export { Spotlight } from './Spotlight.js';
+export type { SpotlightProps } from './Spotlight.js';

package/src/index.ts

@@ -358,3 +358,123 @@ export type { CtaBannerProps } from './content/CtaBanner.js';
 
 export { IconLibrary } from './content/IconLibrary.js';
 export type { IconLibraryProps } from './content/IconLibrary.js';
+
+export { Image } from './content/Image.js';
+export type { ImageProps } from './content/Image.js';
+
+export { ListItem } from './content/ListItem.js';
+export type { ListItemProps } from './content/ListItem.js';
+
+export { List } from './content/List.js';
+export type { ListProps } from './content/List.js';
+
+export { ScrollIndicator } from './content/ScrollIndicator.js';
+export type { ScrollIndicatorProps } from './content/ScrollIndicator.js';
+
+export { Separator } from './content/Separator.js';
+export type { SeparatorProps } from './content/Separator.js';
+
+export { VirtualList } from './content/VirtualList.js';
+export type { VirtualListProps } from './content/VirtualList.js';
+
+export { ButtonGroup } from './input/ButtonGroup.js';
+export type { ButtonGroupProps } from './input/ButtonGroup.js';
+
+export { Fieldset } from './input/Fieldset.js';
+export type { FieldsetProps } from './input/Fieldset.js';
+
+export { InputGroup } from './input/InputGroup.js';
+export type { InputGroupProps } from './input/InputGroup.js';
+
+export { Label } from './input/Label.js';
+export type { LabelProps } from './input/Label.js';
+
+export { SwitchGroup } from './input/SwitchGroup.js';
+export type { SwitchGroupProps } from './input/SwitchGroup.js';
+
+export { Hotkey } from './input/Hotkey.js';
+export type { HotkeyProps } from './input/Hotkey.js';
+
+export { AnchorNav } from './navigation/AnchorNav.js';
+export type { AnchorNavProps } from './navigation/AnchorNav.js';
+
+export { BottomNav } from './navigation/BottomNav.js';
+export type { BottomNavProps } from './navigation/BottomNav.js';
+
+export { BreadcrumbMenu } from './navigation/BreadcrumbMenu.js';
+export type { BreadcrumbMenuProps } from './navigation/BreadcrumbMenu.js';
+
+export { CommandBar } from './navigation/CommandBar.js';
+export type { CommandBarProps } from './navigation/CommandBar.js';
+
+export { PageIndicator } from './navigation/PageIndicator.js';
+export type { PageIndicatorProps } from './navigation/PageIndicator.js';
+
+export { Rail } from './navigation/Rail.js';
+export type { RailProps } from './navigation/Rail.js';
+
+export { SkipLink } from './navigation/SkipLink.js';
+export type { SkipLinkProps } from './navigation/SkipLink.js';
+
+export { SpeedDial } from './navigation/SpeedDial.js';
+export type { SpeedDialProps } from './navigation/SpeedDial.js';
+
+export { StepperNav } from './navigation/StepperNav.js';
+export type { StepperNavProps } from './navigation/StepperNav.js';
+
+export { AspectGrid } from './layout/AspectGrid.js';
+export type { AspectGridProps } from './layout/AspectGrid.js';
+
+export { Center } from './layout/Center.js';
+export type { CenterProps } from './layout/Center.js';
+
+export { Cluster } from './layout/Cluster.js';
+export type { ClusterProps } from './layout/Cluster.js';
+
+export { Dock } from './layout/Dock.js';
+export type { DockProps } from './layout/Dock.js';
+
+export { FloatBar } from './layout/FloatBar.js';
+export type { FloatBarProps } from './layout/FloatBar.js';
+
+export { Inset } from './layout/Inset.js';
+export type { InsetProps } from './layout/Inset.js';
+
+export { Masonry } from './layout/Masonry.js';
+export type { MasonryProps } from './layout/Masonry.js';
+
+export { ResponsiveSwitcher } from './layout/ResponsiveSwitcher.js';
+export type { ResponsiveSwitcherProps } from './layout/ResponsiveSwitcher.js';
+
+export { Sticky } from './layout/Sticky.js';
+export type { StickyProps } from './layout/Sticky.js';
+
+export { Announcement } from './feedback/Announcement.js';
+export type { AnnouncementProps } from './feedback/Announcement.js';
+
+export { Banner } from './feedback/Banner.js';
+export type { BannerProps } from './feedback/Banner.js';
+
+export { Confirm } from './feedback/Confirm.js';
+export type { ConfirmProps } from './feedback/Confirm.js';
+
+export { ConnectionStatus } from './feedback/ConnectionStatus.js';
+export type { ConnectionStatusProps } from './feedback/ConnectionStatus.js';
+
+export { GuidedTour } from './feedback/GuidedTour.js';
+export type { GuidedTourProps } from './feedback/GuidedTour.js';
+
+export { InlineMessage } from './feedback/InlineMessage.js';
+export type { InlineMessageProps } from './feedback/InlineMessage.js';
+
+export { LoadingOverlay } from './feedback/LoadingOverlay.js';
+export type { LoadingOverlayProps } from './feedback/LoadingOverlay.js';
+
+export { ProgressToast } from './feedback/ProgressToast.js';
+export type { ProgressToastProps } from './feedback/ProgressToast.js';
+
+export { Snackbar } from './feedback/Snackbar.js';
+export type { SnackbarProps } from './feedback/Snackbar.js';
+
+export { Spotlight } from './feedback/Spotlight.js';
+export type { SpotlightProps } from './feedback/Spotlight.js';

package/src/input/ButtonGroup.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcButtonGroup } from '@arclux/arc-ui';
+
+export interface ButtonGroupProps {
+  orientation?: 'vertical';
+  size?: string;
+  variant?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ButtonGroup = createComponent({
+  tagName: 'arc-button-group',
+  elementClass: ArcButtonGroup,
+  react: React,
+});

package/src/input/Fieldset.ts

@@ -0,0 +1,23 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcFieldset } from '@arclux/arc-ui';
+
+export interface FieldsetProps {
+  legend?: string;
+  description?: string;
+  disabled?: boolean;
+  error?: string;
+  variant?: 'card';
+  _hasLegend?: string;
+  _hasActions?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Fieldset = createComponent({
+  tagName: 'arc-fieldset',
+  elementClass: ArcFieldset,
+  react: React,
+});

package/src/input/Hotkey.ts

@@ -0,0 +1,23 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcHotkey } from '@arclux/arc-ui';
+
+export interface HotkeyProps {
+  keys?: string;
+  disabled?: boolean;
+  global?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcTrigger?: (e: CustomEvent) => void;
+}
+
+export const Hotkey = createComponent({
+  tagName: 'arc-hotkey',
+  elementClass: ArcHotkey,
+  react: React,
+  events: {
+    onArcTrigger: 'arc-trigger' as EventName<CustomEvent>,
+  },
+});

package/src/input/InputGroup.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcInputGroup } from '@arclux/arc-ui';
+
+export interface InputGroupProps {
+  size?: 'sm' | 'lg';
+  _hasPrefix?: string;
+  _hasSuffix?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const InputGroup = createComponent({
+  tagName: 'arc-input-group',
+  elementClass: ArcInputGroup,
+  react: React,
+});

package/src/input/Label.ts

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcLabel } from '@arclux/arc-ui';
+
+export interface LabelProps {
+  for?: string;
+  required?: boolean;
+  size?: 'sm' | 'lg';
+  disabled?: boolean;
+  _hasDescription?: string;
+  _hasTooltip?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Label = createComponent({
+  tagName: 'arc-label',
+  elementClass: ArcLabel,
+  react: React,
+});

package/src/input/SwitchGroup.ts

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcSwitchGroup } from '@arclux/arc-ui';
+
+export interface SwitchGroupProps {
+  label?: string;
+  orientation?: 'horizontal';
+  size?: string;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const SwitchGroup = createComponent({
+  tagName: 'arc-switch-group',
+  elementClass: ArcSwitchGroup,
+  react: React,
+});

package/src/input/index.ts

@@ -84,3 +84,21 @@ export type { ThemeToggleProps } from './ThemeToggle.js';
 
 export { Toggle } from './Toggle.js';
 export type { ToggleProps } from './Toggle.js';
+
+export { ButtonGroup } from './ButtonGroup.js';
+export type { ButtonGroupProps } from './ButtonGroup.js';
+
+export { Fieldset } from './Fieldset.js';
+export type { FieldsetProps } from './Fieldset.js';
+
+export { InputGroup } from './InputGroup.js';
+export type { InputGroupProps } from './InputGroup.js';
+
+export { Label } from './Label.js';
+export type { LabelProps } from './Label.js';
+
+export { SwitchGroup } from './SwitchGroup.js';
+export type { SwitchGroupProps } from './SwitchGroup.js';
+
+export { Hotkey } from './Hotkey.js';
+export type { HotkeyProps } from './Hotkey.js';

package/src/layout/AspectGrid.ts

@@ -0,0 +1,19 @@
+// 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';
+
+export interface AspectGridProps {
+  columns?: number;
+  ratio?: string;
+  gap?: 'sm' | 'md' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const AspectGrid = createComponent({
+  tagName: 'arc-aspect-grid',
+  elementClass: ArcAspectGrid,
+  react: React,
+});

package/src/layout/Center.ts

@@ -0,0 +1,19 @@
+// 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';
+
+export interface CenterProps {
+  maxWidth?: string;
+  intrinsic?: boolean;
+  text?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Center = createComponent({
+  tagName: 'arc-center',
+  elementClass: ArcCenter,
+  react: React,
+});

package/src/layout/Cluster.ts

@@ -0,0 +1,19 @@
+// 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';
+
+export interface ClusterProps {
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  align?: 'start' | 'center' | 'end';
+  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Cluster = createComponent({
+  tagName: 'arc-cluster',
+  elementClass: ArcCluster,
+  react: React,
+});

package/src/layout/Dock.ts

@@ -0,0 +1,20 @@
+// 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';
+
+export interface DockProps {
+  position?: 'bottom' | 'left' | 'right';
+  autoHide?: boolean;
+  open?: boolean;
+  _hovered?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Dock = createComponent({
+  tagName: 'arc-dock',
+  elementClass: ArcDock,
+  react: React,
+});

package/src/layout/FloatBar.ts

@@ -0,0 +1,18 @@
+// 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';
+
+export interface FloatBarProps {
+  open?: boolean;
+  position?: 'top';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const FloatBar = createComponent({
+  tagName: 'arc-float-bar',
+  elementClass: ArcFloatBar,
+  react: React,
+});

package/src/layout/Inset.ts

@@ -0,0 +1,18 @@
+// 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';
+
+export interface InsetProps {
+  space?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  bleed?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Inset = createComponent({
+  tagName: 'arc-inset',
+  elementClass: ArcInset,
+  react: React,
+});

package/src/layout/Masonry.ts

@@ -0,0 +1,18 @@
+// 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';
+
+export interface MasonryProps {
+  columns?: number;
+  gap?: 'sm' | 'md' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Masonry = createComponent({
+  tagName: 'arc-masonry',
+  elementClass: ArcMasonry,
+  react: React,
+});

package/src/layout/ResponsiveSwitcher.ts

@@ -0,0 +1,18 @@
+// 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';
+
+export interface ResponsiveSwitcherProps {
+  threshold?: string;
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ResponsiveSwitcher = createComponent({
+  tagName: 'arc-responsive-switcher',
+  elementClass: ArcResponsiveSwitcher,
+  react: React,
+});