@arclux/arc-ui-preact 1.9.1 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-preact",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "Preact wrappers for ARC UI Web Components.",
   "type": "module",
   "main": "src/index.ts",
@@ -44,7 +44,7 @@
     "preact": ">=10.19.0"
   },
   "dependencies": {
-    "@arclux/arc-ui": "1.9.1"
+    "@arclux/arc-ui": "1.10.0"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Avatar.tsx

@@ -9,12 +9,13 @@ export interface AvatarProps {
   size?: 'sm' | 'md' | 'lg';
   shape?: 'square' | 'rounded';
   status?: 'online' | 'offline' | 'busy' | 'away';
+  _imgState?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Avatar: FunctionComponent<AvatarProps> = ({ src, name, size, shape, status, children, ...rest }) => (
-  <arc-avatar src={src} name={name} size={size} shape={shape} status={status} {...rest}>
+export const Avatar: FunctionComponent<AvatarProps> = ({ src, name, size, shape, status, _imgState, children, ...rest }) => (
+  <arc-avatar src={src} name={name} size={size} shape={shape} status={status} _imgState={_imgState} {...rest}>
     {children}
   </arc-avatar>
 );

package/src/content/DataTable.tsx

@@ -9,14 +9,18 @@ export interface DataTableProps {
   selectable?: boolean;
   sortColumn?: string;
   sortDirection?: string;
+  virtual?: boolean;
+  rowHeight?: number;
   _columns?: string;
   _selectedRows?: string;
+  _startIndex?: string;
+  _visibleCount?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const DataTable: FunctionComponent<DataTableProps> = ({ rows, sortable, selectable, sortColumn, sortDirection, _columns, _selectedRows, children, ...rest }) => (
-  <arc-data-table rows={rows} sortable={sortable} selectable={selectable} sortColumn={sortColumn} sortDirection={sortDirection} _columns={_columns} _selectedRows={_selectedRows} {...rest}>
+export const DataTable: FunctionComponent<DataTableProps> = ({ rows, sortable, selectable, sortColumn, sortDirection, virtual, rowHeight, _columns, _selectedRows, _startIndex, _visibleCount, children, ...rest }) => (
+  <arc-data-table rows={rows} sortable={sortable} selectable={selectable} sortColumn={sortColumn} sortDirection={sortDirection} virtual={virtual} rowHeight={rowHeight} _columns={_columns} _selectedRows={_selectedRows} _startIndex={_startIndex} _visibleCount={_visibleCount} {...rest}>
     {children}
   </arc-data-table>
 );

package/src/content/Image.tsx

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ImageProps {
+  src?: string;
+  alt?: string;
+  aspect?: '1/1' | '4/3' | '16/9' | '21/9' | '3/4' | '9/16';
+  fit?: 'contain' | 'fill' | 'none' | 'scale-down';
+  loading?: string;
+  fallback?: string;
+  _state?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Image: FunctionComponent<ImageProps> = ({ src, alt, aspect, fit, loading, fallback, _state, children, ...rest }) => (
+  <arc-image src={src} alt={alt} aspect={aspect} fit={fit} loading={loading} fallback={fallback} _state={_state} {...rest}>
+    {children}
+  </arc-image>
+);

package/src/content/List.tsx

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ListProps {
+  variant?: 'bordered' | 'separated';
+  size?: 'sm' | 'lg';
+  selectable?: boolean;
+  multiple?: boolean;
+  value?: string;
+  _items?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const List: FunctionComponent<ListProps> = ({ variant, size, selectable, multiple, value, _items, children, ...rest }) => (
+  <arc-list variant={variant} size={size} selectable={selectable} multiple={multiple} value={value} _items={_items} {...rest}>
+    {children}
+  </arc-list>
+);

package/src/content/ListItem.tsx

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ListItemProps {
+  value?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  href?: string;
+  _hasPrefix?: string;
+  _hasSuffix?: string;
+  _hasDescription?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ListItem: FunctionComponent<ListItemProps> = ({ value, selected, disabled, href, _hasPrefix, _hasSuffix, _hasDescription, children, ...rest }) => (
+  <arc-list-item value={value} selected={selected} disabled={disabled} href={href} _hasPrefix={_hasPrefix} _hasSuffix={_hasSuffix} _hasDescription={_hasDescription} {...rest}>
+    {children}
+  </arc-list-item>
+);

package/src/content/ScrollIndicator.tsx

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ScrollIndicatorProps {
+  target?: string;
+  position?: 'bottom';
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'gradient';
+  _progress?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ScrollIndicator: FunctionComponent<ScrollIndicatorProps> = ({ target, position, size, color, _progress, children, ...rest }) => (
+  <arc-scroll-indicator target={target} position={position} size={size} color={color} _progress={_progress} {...rest}>
+    {children}
+  </arc-scroll-indicator>
+);

package/src/content/Separator.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface SeparatorProps {
+  orientation?: 'vertical';
+  label?: string;
+  variant?: 'dashed' | 'dotted' | 'fade';
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Separator: FunctionComponent<SeparatorProps> = ({ orientation, label, variant, children, ...rest }) => (
+  <arc-separator orientation={orientation} label={label} variant={variant} {...rest}>
+    {children}
+  </arc-separator>
+);

package/src/content/VirtualList.tsx

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface VirtualListProps {
+  items?: unknown[];
+  itemHeight?: number;
+  overscan?: number;
+  _startIndex?: string;
+  _visibleCount?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const VirtualList: FunctionComponent<VirtualListProps> = ({ items, itemHeight, overscan, _startIndex, _visibleCount, children, ...rest }) => (
+  <arc-virtual-list items={items} itemHeight={itemHeight} overscan={overscan} _startIndex={_startIndex} _visibleCount={_visibleCount} {...rest}>
+    {children}
+  </arc-virtual-list>
+);

package/src/content/index.ts

@@ -93,3 +93,18 @@ export type { CtaBannerProps } from './CtaBanner.js';
 
 export { IconLibrary } from './IconLibrary.js';
 export type { IconLibraryProps } from './IconLibrary.js';
+
+export { Image } from './Image.js';
+export type { ImageProps } from './Image.js';
+
+export { ListItem } from './ListItem.js';
+export type { ListItemProps } from './ListItem.js';
+
+export { ScrollIndicator } from './ScrollIndicator.js';
+export type { ScrollIndicatorProps } from './ScrollIndicator.js';
+
+export { Separator } from './Separator.js';
+export type { SeparatorProps } from './Separator.js';
+
+export { VirtualList } from './VirtualList.js';
+export type { VirtualListProps } from './VirtualList.js';

package/src/feedback/Announcement.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface AnnouncementProps {
+  politeness?: string;
+  message?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Announcement: FunctionComponent<AnnouncementProps> = ({ politeness, message, children, ...rest }) => (
+  <arc-announcement politeness={politeness} message={message} {...rest}>
+    {children}
+  </arc-announcement>
+);

package/src/feedback/Banner.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface BannerProps {
+  variant?: string;
+  dismissible?: boolean;
+  sticky?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Banner: FunctionComponent<BannerProps> = ({ variant, dismissible, sticky, children, ...rest }) => (
+  <arc-banner variant={variant} dismissible={dismissible} sticky={sticky} {...rest}>
+    {children}
+  </arc-banner>
+);

package/src/feedback/CommandPalette.tsx

@@ -7,14 +7,13 @@ export interface CommandPaletteProps {
   open?: boolean;
   placeholder?: string;
   _query?: string;
-  _focusedIndex?: string;
   _items?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const CommandPalette: FunctionComponent<CommandPaletteProps> = ({ open, placeholder, _query, _focusedIndex, _items, children, ...rest }) => (
-  <arc-command-palette open={open} placeholder={placeholder} _query={_query} _focusedIndex={_focusedIndex} _items={_items} {...rest}>
+export const CommandPalette: FunctionComponent<CommandPaletteProps> = ({ open, placeholder, _query, _items, children, ...rest }) => (
+  <arc-command-palette open={open} placeholder={placeholder} _query={_query} _items={_items} {...rest}>
     {children}
   </arc-command-palette>
 );

package/src/feedback/Confirm.tsx

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ConfirmProps {
+  open?: boolean;
+  heading?: string;
+  message?: string;
+  variant?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Confirm: FunctionComponent<ConfirmProps> = ({ open, heading, message, variant, children, ...rest }) => (
+  <arc-confirm open={open} heading={heading} message={message} variant={variant} {...rest}>
+    {children}
+  </arc-confirm>
+);

package/src/feedback/ConnectionStatus.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ConnectionStatusProps {
+  online?: string;
+  _visible?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ConnectionStatus: FunctionComponent<ConnectionStatusProps> = ({ online, _visible, children, ...rest }) => (
+  <arc-connection-status online={online} _visible={_visible} {...rest}>
+    {children}
+  </arc-connection-status>
+);

package/src/feedback/Dialog.tsx

@@ -7,7 +7,7 @@ export interface DialogProps {
   open?: boolean;
   heading?: string;
   message?: string;
-  variant?: 'danger';
+  variant?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }

package/src/feedback/DropdownMenu.tsx

@@ -5,14 +5,13 @@ import '@arclux/arc-ui';
 
 export interface DropdownMenuProps {
   open?: boolean;
-  _focusedIndex?: string;
   _children?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const DropdownMenu: FunctionComponent<DropdownMenuProps> = ({ open, _focusedIndex, _children, children, ...rest }) => (
-  <arc-dropdown-menu open={open} _focusedIndex={_focusedIndex} _children={_children} {...rest}>
+export const DropdownMenu: FunctionComponent<DropdownMenuProps> = ({ open, _children, children, ...rest }) => (
+  <arc-dropdown-menu open={open} _children={_children} {...rest}>
     {children}
   </arc-dropdown-menu>
 );

package/src/feedback/GuidedTour.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface GuidedTourProps {
+  steps?: string;
+  active?: string;
+  open?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const GuidedTour: FunctionComponent<GuidedTourProps> = ({ steps, active, open, children, ...rest }) => (
+  <arc-guided-tour steps={steps} active={active} open={open} {...rest}>
+    {children}
+  </arc-guided-tour>
+);

package/src/feedback/HoverCard.tsx

@@ -4,7 +4,7 @@ import { type FunctionComponent } from 'preact';
 import '@arclux/arc-ui';
 
 export interface HoverCardProps {
-  position?: 'bottom' | 'top' | 'left' | 'right';
+  position?: string;
   openDelay?: number;
   closeDelay?: number;
   _visible?: string;

package/src/feedback/InlineMessage.tsx

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface InlineMessageProps {
+  variant?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const InlineMessage: FunctionComponent<InlineMessageProps> = ({ variant, children, ...rest }) => (
+  <arc-inline-message variant={variant} {...rest}>
+    {children}
+  </arc-inline-message>
+);

package/src/feedback/LoadingOverlay.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface LoadingOverlayProps {
+  active?: boolean;
+  message?: string;
+  global?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const LoadingOverlay: FunctionComponent<LoadingOverlayProps> = ({ active, message, global, children, ...rest }) => (
+  <arc-loading-overlay active={active} message={message} global={global} {...rest}>
+    {children}
+  </arc-loading-overlay>
+);

package/src/feedback/Popover.tsx

@@ -5,7 +5,7 @@ import '@arclux/arc-ui';
 
 export interface PopoverProps {
   open?: boolean;
-  position?: 'bottom' | 'top' | 'left' | 'right';
+  position?: string;
   trigger?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;

package/src/feedback/ProgressToast.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ProgressToastProps {
+  position?: 'bottom-right' | 'top-right';
+  _toasts?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ProgressToast: FunctionComponent<ProgressToastProps> = ({ position, _toasts, children, ...rest }) => (
+  <arc-progress-toast position={position} _toasts={_toasts} {...rest}>
+    {children}
+  </arc-progress-toast>
+);

package/src/feedback/Snackbar.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface SnackbarProps {
+  position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
+  duration?: number;
+  _snackbars?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Snackbar: FunctionComponent<SnackbarProps> = ({ position, duration, _snackbars, children, ...rest }) => (
+  <arc-snackbar position={position} duration={duration} _snackbars={_snackbars} {...rest}>
+    {children}
+  </arc-snackbar>
+);

package/src/feedback/Spotlight.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface SpotlightProps {
+  target?: string;
+  active?: boolean;
+  padding?: number;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Spotlight: FunctionComponent<SpotlightProps> = ({ target, active, padding, children, ...rest }) => (
+  <arc-spotlight target={target} active={active} padding={padding} {...rest}>
+    {children}
+  </arc-spotlight>
+);

package/src/index.ts

@@ -261,3 +261,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.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ButtonGroupProps {
+  orientation?: 'vertical';
+  size?: string;
+  variant?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({ orientation, size, variant, children, ...rest }) => (
+  <arc-button-group orientation={orientation} size={size} variant={variant} {...rest}>
+    {children}
+  </arc-button-group>
+);

package/src/input/Fieldset.tsx

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface FieldsetProps {
+  legend?: string;
+  description?: string;
+  disabled?: boolean;
+  error?: string;
+  variant?: 'card';
+  _hasLegend?: string;
+  _hasActions?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Fieldset: FunctionComponent<FieldsetProps> = ({ legend, description, disabled, error, variant, _hasLegend, _hasActions, children, ...rest }) => (
+  <arc-fieldset legend={legend} description={description} disabled={disabled} error={error} variant={variant} _hasLegend={_hasLegend} _hasActions={_hasActions} {...rest}>
+    {children}
+  </arc-fieldset>
+);

package/src/input/Hotkey.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface HotkeyProps {
+  keys?: string;
+  disabled?: boolean;
+  global?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Hotkey: FunctionComponent<HotkeyProps> = ({ keys, disabled, global, children, ...rest }) => (
+  <arc-hotkey keys={keys} disabled={disabled} global={global} {...rest}>
+    {children}
+  </arc-hotkey>
+);

package/src/input/InputGroup.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface InputGroupProps {
+  size?: 'sm' | 'lg';
+  _hasPrefix?: string;
+  _hasSuffix?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const InputGroup: FunctionComponent<InputGroupProps> = ({ size, _hasPrefix, _hasSuffix, children, ...rest }) => (
+  <arc-input-group size={size} _hasPrefix={_hasPrefix} _hasSuffix={_hasSuffix} {...rest}>
+    {children}
+  </arc-input-group>
+);

package/src/input/Label.tsx

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface LabelProps {
+  for?: string;
+  required?: boolean;
+  size?: 'sm' | 'lg';
+  disabled?: boolean;
+  _hasDescription?: string;
+  _hasTooltip?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Label: FunctionComponent<LabelProps> = ({ for, required, size, disabled, _hasDescription, _hasTooltip, children, ...rest }) => (
+  <arc-label for={for} required={required} size={size} disabled={disabled} _hasDescription={_hasDescription} _hasTooltip={_hasTooltip} {...rest}>
+    {children}
+  </arc-label>
+);

package/src/input/SwitchGroup.tsx

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface SwitchGroupProps {
+  label?: string;
+  orientation?: 'horizontal';
+  size?: string;
+  disabled?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const SwitchGroup: FunctionComponent<SwitchGroupProps> = ({ label, orientation, size, disabled, children, ...rest }) => (
+  <arc-switch-group label={label} orientation={orientation} size={size} disabled={disabled} {...rest}>
+    {children}
+  </arc-switch-group>
+);

package/src/layout/AspectGrid.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface AspectGridProps {
+  columns?: number;
+  ratio?: string;
+  gap?: 'sm' | 'md' | 'lg';
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const AspectGrid: FunctionComponent<AspectGridProps> = ({ columns, ratio, gap, children, ...rest }) => (
+  <arc-aspect-grid columns={columns} ratio={ratio} gap={gap} {...rest}>
+    {children}
+  </arc-aspect-grid>
+);

package/src/layout/Center.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface CenterProps {
+  maxWidth?: string;
+  intrinsic?: boolean;
+  text?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Center: FunctionComponent<CenterProps> = ({ maxWidth, intrinsic, text, children, ...rest }) => (
+  <arc-center maxWidth={maxWidth} intrinsic={intrinsic} text={text} {...rest}>
+    {children}
+  </arc-center>
+);

package/src/layout/Cluster.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ClusterProps {
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  align?: 'start' | 'center' | 'end';
+  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Cluster: FunctionComponent<ClusterProps> = ({ gap, align, justify, children, ...rest }) => (
+  <arc-cluster gap={gap} align={align} justify={justify} {...rest}>
+    {children}
+  </arc-cluster>
+);

package/src/layout/Dock.tsx

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface DockProps {
+  position?: 'bottom' | 'left' | 'right';
+  autoHide?: boolean;
+  open?: boolean;
+  _hovered?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Dock: FunctionComponent<DockProps> = ({ position, autoHide, open, _hovered, children, ...rest }) => (
+  <arc-dock position={position} autoHide={autoHide} open={open} _hovered={_hovered} {...rest}>
+    {children}
+  </arc-dock>
+);

package/src/layout/FloatBar.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface FloatBarProps {
+  open?: boolean;
+  position?: 'top';
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const FloatBar: FunctionComponent<FloatBarProps> = ({ open, position, children, ...rest }) => (
+  <arc-float-bar open={open} position={position} {...rest}>
+    {children}
+  </arc-float-bar>
+);

package/src/layout/Inset.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface InsetProps {
+  space?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  bleed?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Inset: FunctionComponent<InsetProps> = ({ space, bleed, children, ...rest }) => (
+  <arc-inset space={space} bleed={bleed} {...rest}>
+    {children}
+  </arc-inset>
+);

package/src/layout/Masonry.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface MasonryProps {
+  columns?: number;
+  gap?: 'sm' | 'md' | 'lg';
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Masonry: FunctionComponent<MasonryProps> = ({ columns, gap, children, ...rest }) => (
+  <arc-masonry columns={columns} gap={gap} {...rest}>
+    {children}
+  </arc-masonry>
+);

package/src/layout/ResponsiveSwitcher.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ResponsiveSwitcherProps {
+  threshold?: string;
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ResponsiveSwitcher: FunctionComponent<ResponsiveSwitcherProps> = ({ threshold, gap, children, ...rest }) => (
+  <arc-responsive-switcher threshold={threshold} gap={gap} {...rest}>
+    {children}
+  </arc-responsive-switcher>
+);

package/src/layout/Sticky.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface StickyProps {
+  offset?: string;
+  stuck?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Sticky: FunctionComponent<StickyProps> = ({ offset, stuck, children, ...rest }) => (
+  <arc-sticky offset={offset} stuck={stuck} {...rest}>
+    {children}
+  </arc-sticky>
+);

package/src/navigation/AnchorNav.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface AnchorNavProps {
+  orientation?: 'vertical';
+  value?: string;
+  items?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const AnchorNav: FunctionComponent<AnchorNavProps> = ({ orientation, value, items, children, ...rest }) => (
+  <arc-anchor-nav orientation={orientation} value={value} items={items} {...rest}>
+    {children}
+  </arc-anchor-nav>
+);

package/src/navigation/BottomNav.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface BottomNavProps {
+  items?: string;
+  value?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const BottomNav: FunctionComponent<BottomNavProps> = ({ items, value, children, ...rest }) => (
+  <arc-bottom-nav items={items} value={value} {...rest}>
+    {children}
+  </arc-bottom-nav>
+);

package/src/navigation/BreadcrumbMenu.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface BreadcrumbMenuProps {
+  items?: string;
+  _openIndex?: number;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const BreadcrumbMenu: FunctionComponent<BreadcrumbMenuProps> = ({ items, _openIndex, children, ...rest }) => (
+  <arc-breadcrumb-menu items={items} _openIndex={_openIndex} {...rest}>
+    {children}
+  </arc-breadcrumb-menu>
+);

package/src/navigation/CommandBar.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface CommandBarProps {
+  placeholder?: string;
+  value?: string;
+  icon?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const CommandBar: FunctionComponent<CommandBarProps> = ({ placeholder, value, icon, children, ...rest }) => (
+  <arc-command-bar placeholder={placeholder} value={value} icon={icon} {...rest}>
+    {children}
+  </arc-command-bar>
+);

package/src/navigation/PageIndicator.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface PageIndicatorProps {
+  count?: number;
+  value?: number;
+  clickable?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const PageIndicator: FunctionComponent<PageIndicatorProps> = ({ count, value, clickable, children, ...rest }) => (
+  <arc-page-indicator count={count} value={value} clickable={clickable} {...rest}>
+    {children}
+  </arc-page-indicator>
+);

package/src/navigation/Rail.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface RailProps {
+  items?: string;
+  value?: string;
+  expanded?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Rail: FunctionComponent<RailProps> = ({ items, value, expanded, children, ...rest }) => (
+  <arc-rail items={items} value={value} expanded={expanded} {...rest}>
+    {children}
+  </arc-rail>
+);

package/src/navigation/SkipLink.tsx

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface SkipLinkProps {
+  target?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const SkipLink: FunctionComponent<SkipLinkProps> = ({ target, children, ...rest }) => (
+  <arc-skip-link target={target} {...rest}>
+    {children}
+  </arc-skip-link>
+);

package/src/navigation/SpeedDial.tsx

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface SpeedDialProps {
+  open?: boolean;
+  direction?: 'down' | 'left' | 'right';
+  position?: 'bottom-right' | 'bottom-left';
+  items?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const SpeedDial: FunctionComponent<SpeedDialProps> = ({ open, direction, position, items, children, ...rest }) => (
+  <arc-speed-dial open={open} direction={direction} position={position} items={items} {...rest}>
+    {children}
+  </arc-speed-dial>
+);

package/src/navigation/StepperNav.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface StepperNavProps {
+  steps?: string;
+  active?: number;
+  linear?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const StepperNav: FunctionComponent<StepperNavProps> = ({ steps, active, linear, children, ...rest }) => (
+  <arc-stepper-nav steps={steps} active={active} linear={linear} {...rest}>
+    {children}
+  </arc-stepper-nav>
+);