@arclux/arc-ui-preact 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-preact",
-  "version": "1.3.0",
+  "version": "1.5.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.3.0"
+    "@arclux/arc-ui": "1.5.0"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Accordion.tsx

@@ -4,14 +4,15 @@ import { type FunctionComponent } from 'preact';
 import '@arclux/arc-ui';
 
 export interface AccordionProps {
+  multiple?: boolean;
   _items?: string;
   _openItems?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Accordion: FunctionComponent<AccordionProps> = ({ _items, _openItems, children, ...rest }) => (
-  <arc-accordion _items={_items} _openItems={_openItems} {...rest}>
+export const Accordion: FunctionComponent<AccordionProps> = ({ multiple, _items, _openItems, children, ...rest }) => (
+  <arc-accordion multiple={multiple} _items={_items} _openItems={_openItems} {...rest}>
     {children}
   </arc-accordion>
 );

package/src/content/Avatar.tsx

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

package/src/content/Badge.tsx

@@ -5,13 +5,14 @@ import '@arclux/arc-ui';
 
 export interface BadgeProps {
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'lg';
   color?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Badge: FunctionComponent<BadgeProps> = ({ variant, color, children, ...rest }) => (
-  <arc-badge variant={variant} color={color} {...rest}>
+export const Badge: FunctionComponent<BadgeProps> = ({ variant, size, color, children, ...rest }) => (
+  <arc-badge variant={variant} size={size} color={color} {...rest}>
     {children}
   </arc-badge>
 );

package/src/content/Callout.tsx

@@ -4,13 +4,15 @@ import { type FunctionComponent } from 'preact';
 import '@arclux/arc-ui';
 
 export interface CalloutProps {
-  variant?: 'info' | 'warning' | 'tip' | 'danger';
+  variant?: string;
+  dismissible?: boolean;
+  _dismissed?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Callout: FunctionComponent<CalloutProps> = ({ variant, children, ...rest }) => (
-  <arc-callout variant={variant} {...rest}>
+export const Callout: FunctionComponent<CalloutProps> = ({ variant, dismissible, _dismissed, children, ...rest }) => (
+  <arc-callout variant={variant} dismissible={dismissible} _dismissed={_dismissed} {...rest}>
     {children}
   </arc-callout>
 );

package/src/content/Card.tsx

@@ -5,13 +5,15 @@ import '@arclux/arc-ui';
 
 export interface CardProps {
   href?: string;
+  padding?: 'none' | 'sm' | 'lg';
+  interactive?: boolean;
   _hasFooter?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Card: FunctionComponent<CardProps> = ({ href, _hasFooter, children, ...rest }) => (
-  <arc-card href={href} _hasFooter={_hasFooter} {...rest}>
+export const Card: FunctionComponent<CardProps> = ({ href, padding, interactive, _hasFooter, children, ...rest }) => (
+  <arc-card href={href} padding={padding} interactive={interactive} _hasFooter={_hasFooter} {...rest}>
     {children}
   </arc-card>
 );

package/src/content/Divider.tsx

@@ -7,12 +7,13 @@ export interface DividerProps {
   variant?: 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient';
   align?: 'left' | 'right';
   vertical?: boolean;
+  label?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Divider: FunctionComponent<DividerProps> = ({ variant, align, vertical, children, ...rest }) => (
-  <arc-divider variant={variant} align={align} vertical={vertical} {...rest}>
+export const Divider: FunctionComponent<DividerProps> = ({ variant, align, vertical, label, children, ...rest }) => (
+  <arc-divider variant={variant} align={align} vertical={vertical} label={label} {...rest}>
     {children}
   </arc-divider>
 );

package/src/content/Skeleton.tsx

@@ -7,12 +7,13 @@ export interface SkeletonProps {
   variant?: 'text' | 'circle' | 'rect';
   width?: string;
   height?: string;
+  count?: number;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Skeleton: FunctionComponent<SkeletonProps> = ({ variant, width, height, children, ...rest }) => (
-  <arc-skeleton variant={variant} width={width} height={height} {...rest}>
+export const Skeleton: FunctionComponent<SkeletonProps> = ({ variant, width, height, count, children, ...rest }) => (
+  <arc-skeleton variant={variant} width={width} height={height} count={count} {...rest}>
     {children}
   </arc-skeleton>
 );

package/src/content/Stat.tsx

@@ -6,12 +6,14 @@ import '@arclux/arc-ui';
 export interface StatProps {
   value?: string;
   label?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  change?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Stat: FunctionComponent<StatProps> = ({ value, label, children, ...rest }) => (
-  <arc-stat value={value} label={label} {...rest}>
+export const Stat: FunctionComponent<StatProps> = ({ value, label, trend, change, children, ...rest }) => (
+  <arc-stat value={value} label={label} trend={trend} change={change} {...rest}>
     {children}
   </arc-stat>
 );

package/src/content/Tag.tsx

@@ -5,6 +5,7 @@ import '@arclux/arc-ui';
 
 export interface TagProps {
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+  size?: 'sm' | 'lg';
   removable?: boolean;
   disabled?: boolean;
   color?: string;
@@ -12,8 +13,8 @@ export interface TagProps {
   [key: string]: unknown;
 }
 
-export const Tag: FunctionComponent<TagProps> = ({ variant, removable, disabled, color, children, ...rest }) => (
-  <arc-tag variant={variant} removable={removable} disabled={disabled} color={color} {...rest}>
+export const Tag: FunctionComponent<TagProps> = ({ variant, size, removable, disabled, color, children, ...rest }) => (
+  <arc-tag variant={variant} size={size} removable={removable} disabled={disabled} color={color} {...rest}>
     {children}
   </arc-tag>
 );

package/src/feedback/Alert.tsx

@@ -4,15 +4,16 @@ import { type FunctionComponent } from 'preact';
 import '@arclux/arc-ui';
 
 export interface AlertProps {
-  variant?: 'info' | 'success' | 'warning' | 'error';
+  variant?: string;
+  compact?: boolean;
   dismissible?: boolean;
   heading?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Alert: FunctionComponent<AlertProps> = ({ variant, dismissible, heading, children, ...rest }) => (
-  <arc-alert variant={variant} dismissible={dismissible} heading={heading} {...rest}>
+export const Alert: FunctionComponent<AlertProps> = ({ variant, compact, dismissible, heading, children, ...rest }) => (
+  <arc-alert variant={variant} compact={compact} dismissible={dismissible} heading={heading} {...rest}>
     {children}
   </arc-alert>
 );

package/src/feedback/Modal.tsx

@@ -7,13 +7,14 @@ export interface ModalProps {
   open?: boolean;
   heading?: string;
   size?: 'sm' | 'md' | 'lg';
+  fullscreen?: boolean;
   closable?: boolean;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Modal: FunctionComponent<ModalProps> = ({ open, heading, size, closable, children, ...rest }) => (
-  <arc-modal open={open} heading={heading} size={size} closable={closable} {...rest}>
+export const Modal: FunctionComponent<ModalProps> = ({ open, heading, size, fullscreen, closable, children, ...rest }) => (
+  <arc-modal open={open} heading={heading} size={size} fullscreen={fullscreen} closable={closable} {...rest}>
     {children}
   </arc-modal>
 );

package/src/feedback/Progress.tsx

@@ -8,13 +8,14 @@ export interface ProgressProps {
   variant?: string;
   size?: 'sm' | 'md' | 'lg';
   indeterminate?: boolean;
+  showValue?: boolean;
   label?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Progress: FunctionComponent<ProgressProps> = ({ value, variant, size, indeterminate, label, children, ...rest }) => (
-  <arc-progress value={value} variant={variant} size={size} indeterminate={indeterminate} label={label} {...rest}>
+export const Progress: FunctionComponent<ProgressProps> = ({ value, variant, size, indeterminate, showValue, label, children, ...rest }) => (
+  <arc-progress value={value} variant={variant} size={size} indeterminate={indeterminate} showValue={showValue} label={label} {...rest}>
     {children}
   </arc-progress>
 );

package/src/input/Button.tsx

@@ -8,6 +8,7 @@ export interface ButtonProps {
   size?: 'sm' | 'md' | 'lg';
   href?: string;
   disabled?: boolean;
+  loading?: boolean;
   type?: string;
   _hasPrefix?: string;
   _hasSuffix?: string;
@@ -15,8 +16,8 @@ export interface ButtonProps {
   [key: string]: unknown;
 }
 
-export const Button: FunctionComponent<ButtonProps> = ({ variant, size, href, disabled, type, _hasPrefix, _hasSuffix, children, ...rest }) => (
-  <arc-button variant={variant} size={size} href={href} disabled={disabled} type={type} _hasPrefix={_hasPrefix} _hasSuffix={_hasSuffix} {...rest}>
+export const Button: FunctionComponent<ButtonProps> = ({ variant, size, href, disabled, loading, type, _hasPrefix, _hasSuffix, children, ...rest }) => (
+  <arc-button variant={variant} size={size} href={href} disabled={disabled} loading={loading} type={type} _hasPrefix={_hasPrefix} _hasSuffix={_hasSuffix} {...rest}>
     {children}
   </arc-button>
 );

package/src/input/Checkbox.tsx

@@ -7,6 +7,7 @@ export interface CheckboxProps {
   checked?: boolean;
   indeterminate?: boolean;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   label?: string;
   name?: string;
   value?: string;
@@ -14,8 +15,8 @@ export interface CheckboxProps {
   [key: string]: unknown;
 }
 
-export const Checkbox: FunctionComponent<CheckboxProps> = ({ checked, indeterminate, disabled, label, name, value, children, ...rest }) => (
-  <arc-checkbox checked={checked} indeterminate={indeterminate} disabled={disabled} label={label} name={name} value={value} {...rest}>
+export const Checkbox: FunctionComponent<CheckboxProps> = ({ checked, indeterminate, disabled, size, label, name, value, children, ...rest }) => (
+  <arc-checkbox checked={checked} indeterminate={indeterminate} disabled={disabled} size={size} label={label} name={name} value={value} {...rest}>
     {children}
   </arc-checkbox>
 );

package/src/input/Input.tsx

@@ -11,6 +11,8 @@ export interface InputProps {
   value?: string;
   disabled?: boolean;
   required?: boolean;
+  error?: string;
+  size?: 'sm' | 'lg';
   multiline?: boolean;
   rows?: number;
   _hasPrefix?: string;
@@ -19,8 +21,8 @@ export interface InputProps {
   [key: string]: unknown;
 }
 
-export const Input: FunctionComponent<InputProps> = ({ type, name, label, placeholder, value, disabled, required, multiline, rows, _hasPrefix, _hasSuffix, children, ...rest }) => (
-  <arc-input type={type} name={name} label={label} placeholder={placeholder} value={value} disabled={disabled} required={required} multiline={multiline} rows={rows} _hasPrefix={_hasPrefix} _hasSuffix={_hasSuffix} {...rest}>
+export const Input: FunctionComponent<InputProps> = ({ type, name, label, placeholder, value, disabled, required, error, size, multiline, rows, _hasPrefix, _hasSuffix, children, ...rest }) => (
+  <arc-input type={type} name={name} label={label} placeholder={placeholder} value={value} disabled={disabled} required={required} error={error} size={size} multiline={multiline} rows={rows} _hasPrefix={_hasPrefix} _hasSuffix={_hasSuffix} {...rest}>
     {children}
   </arc-input>
 );

package/src/input/RadioGroup.tsx

@@ -7,14 +7,15 @@ export interface RadioGroupProps {
   value?: string;
   name?: string;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   orientation?: 'horizontal';
   _radios?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const RadioGroup: FunctionComponent<RadioGroupProps> = ({ value, name, disabled, orientation, _radios, children, ...rest }) => (
-  <arc-radio-group value={value} name={name} disabled={disabled} orientation={orientation} _radios={_radios} {...rest}>
+export const RadioGroup: FunctionComponent<RadioGroupProps> = ({ value, name, disabled, size, orientation, _radios, children, ...rest }) => (
+  <arc-radio-group value={value} name={name} disabled={disabled} size={size} orientation={orientation} _radios={_radios} {...rest}>
     {children}
   </arc-radio-group>
 );

package/src/input/Select.tsx

@@ -9,14 +9,16 @@ export interface SelectProps {
   label?: string;
   name?: string;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
+  error?: string;
   open?: boolean;
   _options?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Select: FunctionComponent<SelectProps> = ({ value, placeholder, label, name, disabled, open, _options, children, ...rest }) => (
-  <arc-select value={value} placeholder={placeholder} label={label} name={name} disabled={disabled} open={open} _options={_options} {...rest}>
+export const Select: FunctionComponent<SelectProps> = ({ value, placeholder, label, name, disabled, size, error, open, _options, children, ...rest }) => (
+  <arc-select value={value} placeholder={placeholder} label={label} name={name} disabled={disabled} size={size} error={error} open={open} _options={_options} {...rest}>
     {children}
   </arc-select>
 );

package/src/input/Textarea.tsx

@@ -12,13 +12,15 @@ export interface TextareaProps {
   disabled?: boolean;
   readonly?: boolean;
   resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+  size?: 'sm' | 'lg';
+  autoResize?: boolean;
   error?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Textarea: FunctionComponent<TextareaProps> = ({ value, placeholder, label, rows, maxlength, disabled, readonly, resize, error, children, ...rest }) => (
-  <arc-textarea value={value} placeholder={placeholder} label={label} rows={rows} maxlength={maxlength} disabled={disabled} readonly={readonly} resize={resize} error={error} {...rest}>
+export const Textarea: FunctionComponent<TextareaProps> = ({ value, placeholder, label, rows, maxlength, disabled, readonly, resize, size, autoResize, error, children, ...rest }) => (
+  <arc-textarea value={value} placeholder={placeholder} label={label} rows={rows} maxlength={maxlength} disabled={disabled} readonly={readonly} resize={resize} size={size} autoResize={autoResize} error={error} {...rest}>
     {children}
   </arc-textarea>
 );

package/src/input/Toggle.tsx

@@ -6,14 +6,15 @@ import '@arclux/arc-ui';
 export interface ToggleProps {
   checked?: boolean;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   label?: string;
   name?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Toggle: FunctionComponent<ToggleProps> = ({ checked, disabled, label, name, children, ...rest }) => (
-  <arc-toggle checked={checked} disabled={disabled} label={label} name={name} {...rest}>
+export const Toggle: FunctionComponent<ToggleProps> = ({ checked, disabled, size, label, name, children, ...rest }) => (
+  <arc-toggle checked={checked} disabled={disabled} size={size} label={label} name={name} {...rest}>
     {children}
   </arc-toggle>
 );

package/src/layout/Container.tsx

@@ -5,12 +5,14 @@ import '@arclux/arc-ui';
 
 export interface ContainerProps {
   narrow?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  padding?: 'none' | 'sm' | 'lg';
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Container: FunctionComponent<ContainerProps> = ({ narrow, children, ...rest }) => (
-  <arc-container narrow={narrow} {...rest}>
+export const Container: FunctionComponent<ContainerProps> = ({ narrow, size, padding, children, ...rest }) => (
+  <arc-container narrow={narrow} size={size} padding={padding} {...rest}>
     {children}
   </arc-container>
 );

package/src/navigation/Breadcrumb.tsx

@@ -4,13 +4,14 @@ import { type FunctionComponent } from 'preact';
 import '@arclux/arc-ui';
 
 export interface BreadcrumbProps {
+  separator?: string;
   _items?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({ _items, children, ...rest }) => (
-  <arc-breadcrumb _items={_items} {...rest}>
+export const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({ separator, _items, children, ...rest }) => (
+  <arc-breadcrumb separator={separator} _items={_items} {...rest}>
     {children}
   </arc-breadcrumb>
 );

package/src/navigation/Footer.tsx

@@ -6,12 +6,13 @@ import '@arclux/arc-ui';
 export interface FooterProps {
   compact?: boolean;
   border?: boolean;
+  align?: 'center';
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Footer: FunctionComponent<FooterProps> = ({ compact, border, children, ...rest }) => (
-  <arc-footer compact={compact} border={border} {...rest}>
+export const Footer: FunctionComponent<FooterProps> = ({ compact, border, align, children, ...rest }) => (
+  <arc-footer compact={compact} border={border} align={align} {...rest}>
     {children}
   </arc-footer>
 );

package/src/navigation/Link.tsx

@@ -6,14 +6,15 @@ import '@arclux/arc-ui';
 export interface LinkProps {
   href?: string;
   variant?: 'muted' | 'nav';
+  underline?: 'always' | 'never';
   active?: boolean;
   external?: boolean;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Link: FunctionComponent<LinkProps> = ({ href, variant, active, external, children, ...rest }) => (
-  <arc-link href={href} variant={variant} active={active} external={external} {...rest}>
+export const Link: FunctionComponent<LinkProps> = ({ href, variant, underline, active, external, children, ...rest }) => (
+  <arc-link href={href} variant={variant} underline={underline} active={active} external={external} {...rest}>
     {children}
   </arc-link>
 );

package/src/navigation/Pagination.tsx

@@ -7,12 +7,13 @@ export interface PaginationProps {
   total?: number;
   current?: number;
   siblings?: number;
+  compact?: boolean;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Pagination: FunctionComponent<PaginationProps> = ({ total, current, siblings, children, ...rest }) => (
-  <arc-pagination total={total} current={current} siblings={siblings} {...rest}>
+export const Pagination: FunctionComponent<PaginationProps> = ({ total, current, siblings, compact, children, ...rest }) => (
+  <arc-pagination total={total} current={current} siblings={siblings} compact={compact} {...rest}>
     {children}
   </arc-pagination>
 );

package/src/navigation/Sidebar.tsx

@@ -6,6 +6,7 @@ import '@arclux/arc-ui';
 export interface SidebarProps {
   active?: string;
   collapsed?: boolean;
+  position?: 'right';
   width?: string;
   glow?: boolean;
   _sections?: string;
@@ -13,8 +14,8 @@ export interface SidebarProps {
   [key: string]: unknown;
 }
 
-export const Sidebar: FunctionComponent<SidebarProps> = ({ active, collapsed, width, glow, _sections, children, ...rest }) => (
-  <arc-sidebar active={active} collapsed={collapsed} width={width} glow={glow} _sections={_sections} {...rest}>
+export const Sidebar: FunctionComponent<SidebarProps> = ({ active, collapsed, position, width, glow, _sections, children, ...rest }) => (
+  <arc-sidebar active={active} collapsed={collapsed} position={position} width={width} glow={glow} _sections={_sections} {...rest}>
     {children}
   </arc-sidebar>
 );

package/src/navigation/Tabs.tsx

@@ -6,13 +6,15 @@ import '@arclux/arc-ui';
 export interface TabsProps {
   items?: unknown[];
   selected?: number;
+  align?: 'center' | 'end';
+  variant?: 'pills';
   _tabs?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Tabs: FunctionComponent<TabsProps> = ({ items, selected, _tabs, children, ...rest }) => (
-  <arc-tabs items={items} selected={selected} _tabs={_tabs} {...rest}>
+export const Tabs: FunctionComponent<TabsProps> = ({ items, selected, align, variant, _tabs, children, ...rest }) => (
+  <arc-tabs items={items} selected={selected} align={align} variant={variant} _tabs={_tabs} {...rest}>
     {children}
   </arc-tabs>
 );

package/src/navigation/TopBar.tsx

@@ -9,12 +9,13 @@ export interface TopBarProps {
   menuOpen?: boolean;
   mobileMenu?: string;
   menuPosition?: string;
+  navAlign?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const TopBar: FunctionComponent<TopBarProps> = ({ heading, fixed, menuOpen, mobileMenu, menuPosition, children, ...rest }) => (
-  <arc-top-bar heading={heading} fixed={fixed} menuOpen={menuOpen} mobileMenu={mobileMenu} menuPosition={menuPosition} {...rest}>
+export const TopBar: FunctionComponent<TopBarProps> = ({ heading, fixed, menuOpen, mobileMenu, menuPosition, navAlign, children, ...rest }) => (
+  <arc-top-bar heading={heading} fixed={fixed} menuOpen={menuOpen} mobileMenu={mobileMenu} menuPosition={menuPosition} navAlign={navAlign} {...rest}>
     {children}
   </arc-top-bar>
 );