@arclux/arc-ui-react 1.9.2 → 1.10.0

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,
+});

package/src/layout/Sticky.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 { ArcSticky } from '@arclux/arc-ui';
+
+export interface StickyProps {
+  offset?: string;
+  stuck?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcStuck?: (e: CustomEvent) => void;
+}
+
+export const Sticky = createComponent({
+  tagName: 'arc-sticky',
+  elementClass: ArcSticky,
+  react: React,
+  events: {
+    onArcStuck: 'arc-stuck' as EventName<CustomEvent>,
+  },
+});

package/src/layout/index.ts

@@ -36,3 +36,30 @@ 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';

package/src/navigation/AnchorNav.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 { ArcAnchorNav } from '@arclux/arc-ui';
+
+export interface AnchorNavProps {
+  orientation?: 'vertical';
+  value?: string;
+  items?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const AnchorNav = createComponent({
+  tagName: 'arc-anchor-nav',
+  elementClass: ArcAnchorNav,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/navigation/BottomNav.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 { ArcBottomNav } from '@arclux/arc-ui';
+
+export interface BottomNavProps {
+  items?: string;
+  value?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const BottomNav = createComponent({
+  tagName: 'arc-bottom-nav',
+  elementClass: ArcBottomNav,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/navigation/BreadcrumbMenu.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 { ArcBreadcrumbMenu } from '@arclux/arc-ui';
+
+export interface BreadcrumbMenuProps {
+  items?: string;
+  _openIndex?: number;
+  className?: string;
+  children?: React.ReactNode;
+  onArcNavigate?: (e: CustomEvent) => void;
+}
+
+export const BreadcrumbMenu = createComponent({
+  tagName: 'arc-breadcrumb-menu',
+  elementClass: ArcBreadcrumbMenu,
+  react: React,
+  events: {
+    onArcNavigate: 'arc-navigate' as EventName<CustomEvent>,
+  },
+});

package/src/navigation/CommandBar.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 { ArcCommandBar } from '@arclux/arc-ui';
+
+export interface CommandBarProps {
+  placeholder?: string;
+  value?: string;
+  icon?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcInput?: (e: CustomEvent) => void;
+  onArcSubmit?: (e: CustomEvent) => void;
+}
+
+export const CommandBar = createComponent({
+  tagName: 'arc-command-bar',
+  elementClass: ArcCommandBar,
+  react: React,
+  events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
+    onArcSubmit: 'arc-submit' as EventName<CustomEvent>,
+  },
+});

package/src/navigation/Drawer.ts

@@ -11,7 +11,6 @@ export interface DrawerProps {
   className?: string;
   children?: React.ReactNode;
   onArcClose?: (e: CustomEvent) => void;
-  onClick?: (e: Event) => void;
 }
 
 export const Drawer = createComponent({
@@ -20,6 +19,5 @@ export const Drawer = createComponent({
   react: React,
   events: {
     onArcClose: 'arc-close' as EventName<CustomEvent>,
-    onClick: 'click' as EventName<Event>,
   },
 });

package/src/navigation/PageIndicator.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 { ArcPageIndicator } from '@arclux/arc-ui';
+
+export interface PageIndicatorProps {
+  count?: number;
+  value?: number;
+  clickable?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const PageIndicator = createComponent({
+  tagName: 'arc-page-indicator',
+  elementClass: ArcPageIndicator,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/navigation/Rail.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 { ArcRail } from '@arclux/arc-ui';
+
+export interface RailProps {
+  items?: string;
+  value?: string;
+  expanded?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const Rail = createComponent({
+  tagName: 'arc-rail',
+  elementClass: ArcRail,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/navigation/SkipLink.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 { ArcSkipLink } from '@arclux/arc-ui';
+
+export interface SkipLinkProps {
+  target?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const SkipLink = createComponent({
+  tagName: 'arc-skip-link',
+  elementClass: ArcSkipLink,
+  react: React,
+});