@arclux/arc-ui-solid 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-solid",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Solid wrappers for ARC UI Web Components.",
   "type": "module",
   "main": "src/index.ts",
@@ -44,7 +44,7 @@
     "solid-js": ">=1.8.0"
   },
   "dependencies": {
-    "@arclux/arc-ui": "1.3.0"
+    "@arclux/arc-ui": "1.5.0"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Accordion.tsx

@@ -4,6 +4,7 @@ import { splitProps, type Component, type JSX } from 'solid-js';
 import '@arclux/arc-ui';
 
 export interface AccordionProps {
+  multiple?: boolean;
   _items?: string;
   _openItems?: string;
   children?: JSX.Element;
@@ -11,9 +12,9 @@ export interface AccordionProps {
 }
 
 export const Accordion: Component<AccordionProps> = (props) => {
-  const [local, rest] = splitProps(props, ['_items', '_openItems', 'children']);
+  const [local, rest] = splitProps(props, ['multiple', '_items', '_openItems', 'children']);
   return (
-    <arc-accordion _items={local._items} _openItems={local._openItems} {...rest}>
+    <arc-accordion multiple={local.multiple} _items={local._items} _openItems={local._openItems} {...rest}>
       {local.children}
     </arc-accordion>
   );

package/src/content/Avatar.tsx

@@ -7,14 +7,16 @@ export interface AvatarProps {
   src?: string;
   name?: string;
   size?: 'sm' | 'md' | 'lg';
+  shape?: 'square' | 'rounded';
+  status?: 'online' | 'offline' | 'busy' | 'away';
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Avatar: Component<AvatarProps> = (props) => {
-  const [local, rest] = splitProps(props, ['src', 'name', 'size', 'children']);
+  const [local, rest] = splitProps(props, ['src', 'name', 'size', 'shape', 'status', 'children']);
   return (
-    <arc-avatar src={local.src} name={local.name} size={local.size} {...rest}>
+    <arc-avatar src={local.src} name={local.name} size={local.size} shape={local.shape} status={local.status} {...rest}>
       {local.children}
     </arc-avatar>
   );

package/src/content/Badge.tsx

@@ -5,15 +5,16 @@ import '@arclux/arc-ui';
 
 export interface BadgeProps {
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'lg';
   color?: string;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Badge: Component<BadgeProps> = (props) => {
-  const [local, rest] = splitProps(props, ['variant', 'color', 'children']);
+  const [local, rest] = splitProps(props, ['variant', 'size', 'color', 'children']);
   return (
-    <arc-badge variant={local.variant} color={local.color} {...rest}>
+    <arc-badge variant={local.variant} size={local.size} color={local.color} {...rest}>
       {local.children}
     </arc-badge>
   );

package/src/content/Callout.tsx

@@ -4,15 +4,17 @@ import { splitProps, type Component, type JSX } from 'solid-js';
 import '@arclux/arc-ui';
 
 export interface CalloutProps {
-  variant?: 'info' | 'warning' | 'tip' | 'danger';
+  variant?: string;
+  dismissible?: boolean;
+  _dismissed?: string;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Callout: Component<CalloutProps> = (props) => {
-  const [local, rest] = splitProps(props, ['variant', 'children']);
+  const [local, rest] = splitProps(props, ['variant', 'dismissible', '_dismissed', 'children']);
   return (
-    <arc-callout variant={local.variant} {...rest}>
+    <arc-callout variant={local.variant} dismissible={local.dismissible} _dismissed={local._dismissed} {...rest}>
       {local.children}
     </arc-callout>
   );

package/src/content/Card.tsx

@@ -5,15 +5,17 @@ import '@arclux/arc-ui';
 
 export interface CardProps {
   href?: string;
+  padding?: 'none' | 'sm' | 'lg';
+  interactive?: boolean;
   _hasFooter?: string;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Card: Component<CardProps> = (props) => {
-  const [local, rest] = splitProps(props, ['href', '_hasFooter', 'children']);
+  const [local, rest] = splitProps(props, ['href', 'padding', 'interactive', '_hasFooter', 'children']);
   return (
-    <arc-card href={local.href} _hasFooter={local._hasFooter} {...rest}>
+    <arc-card href={local.href} padding={local.padding} interactive={local.interactive} _hasFooter={local._hasFooter} {...rest}>
       {local.children}
     </arc-card>
   );

package/src/content/Divider.tsx

@@ -7,14 +7,15 @@ export interface DividerProps {
   variant?: 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient';
   align?: 'left' | 'right';
   vertical?: boolean;
+  label?: string;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Divider: Component<DividerProps> = (props) => {
-  const [local, rest] = splitProps(props, ['variant', 'align', 'vertical', 'children']);
+  const [local, rest] = splitProps(props, ['variant', 'align', 'vertical', 'label', 'children']);
   return (
-    <arc-divider variant={local.variant} align={local.align} vertical={local.vertical} {...rest}>
+    <arc-divider variant={local.variant} align={local.align} vertical={local.vertical} label={local.label} {...rest}>
       {local.children}
     </arc-divider>
   );

package/src/content/Skeleton.tsx

@@ -7,14 +7,15 @@ export interface SkeletonProps {
   variant?: 'text' | 'circle' | 'rect';
   width?: string;
   height?: string;
+  count?: number;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Skeleton: Component<SkeletonProps> = (props) => {
-  const [local, rest] = splitProps(props, ['variant', 'width', 'height', 'children']);
+  const [local, rest] = splitProps(props, ['variant', 'width', 'height', 'count', 'children']);
   return (
-    <arc-skeleton variant={local.variant} width={local.width} height={local.height} {...rest}>
+    <arc-skeleton variant={local.variant} width={local.width} height={local.height} count={local.count} {...rest}>
       {local.children}
     </arc-skeleton>
   );

package/src/content/Stat.tsx

@@ -6,14 +6,16 @@ import '@arclux/arc-ui';
 export interface StatProps {
   value?: string;
   label?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  change?: string;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Stat: Component<StatProps> = (props) => {
-  const [local, rest] = splitProps(props, ['value', 'label', 'children']);
+  const [local, rest] = splitProps(props, ['value', 'label', 'trend', 'change', 'children']);
   return (
-    <arc-stat value={local.value} label={local.label} {...rest}>
+    <arc-stat value={local.value} label={local.label} trend={local.trend} change={local.change} {...rest}>
       {local.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;
@@ -13,9 +14,9 @@ export interface TagProps {
 }
 
 export const Tag: Component<TagProps> = (props) => {
-  const [local, rest] = splitProps(props, ['variant', 'removable', 'disabled', 'color', 'children']);
+  const [local, rest] = splitProps(props, ['variant', 'size', 'removable', 'disabled', 'color', 'children']);
   return (
-    <arc-tag variant={local.variant} removable={local.removable} disabled={local.disabled} color={local.color} {...rest}>
+    <arc-tag variant={local.variant} size={local.size} removable={local.removable} disabled={local.disabled} color={local.color} {...rest}>
       {local.children}
     </arc-tag>
   );

package/src/feedback/Alert.tsx

@@ -4,7 +4,8 @@ import { splitProps, type Component, type JSX } from 'solid-js';
 import '@arclux/arc-ui';
 
 export interface AlertProps {
-  variant?: 'info' | 'success' | 'warning' | 'error';
+  variant?: string;
+  compact?: boolean;
   dismissible?: boolean;
   heading?: string;
   children?: JSX.Element;
@@ -12,9 +13,9 @@ export interface AlertProps {
 }
 
 export const Alert: Component<AlertProps> = (props) => {
-  const [local, rest] = splitProps(props, ['variant', 'dismissible', 'heading', 'children']);
+  const [local, rest] = splitProps(props, ['variant', 'compact', 'dismissible', 'heading', 'children']);
   return (
-    <arc-alert variant={local.variant} dismissible={local.dismissible} heading={local.heading} {...rest}>
+    <arc-alert variant={local.variant} compact={local.compact} dismissible={local.dismissible} heading={local.heading} {...rest}>
       {local.children}
     </arc-alert>
   );

package/src/feedback/Modal.tsx

@@ -7,15 +7,16 @@ export interface ModalProps {
   open?: boolean;
   heading?: string;
   size?: 'sm' | 'md' | 'lg';
+  fullscreen?: boolean;
   closable?: boolean;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Modal: Component<ModalProps> = (props) => {
-  const [local, rest] = splitProps(props, ['open', 'heading', 'size', 'closable', 'children']);
+  const [local, rest] = splitProps(props, ['open', 'heading', 'size', 'fullscreen', 'closable', 'children']);
   return (
-    <arc-modal open={local.open} heading={local.heading} size={local.size} closable={local.closable} {...rest}>
+    <arc-modal open={local.open} heading={local.heading} size={local.size} fullscreen={local.fullscreen} closable={local.closable} {...rest}>
       {local.children}
     </arc-modal>
   );

package/src/feedback/Progress.tsx

@@ -8,15 +8,16 @@ export interface ProgressProps {
   variant?: string;
   size?: 'sm' | 'md' | 'lg';
   indeterminate?: boolean;
+  showValue?: boolean;
   label?: string;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Progress: Component<ProgressProps> = (props) => {
-  const [local, rest] = splitProps(props, ['value', 'variant', 'size', 'indeterminate', 'label', 'children']);
+  const [local, rest] = splitProps(props, ['value', 'variant', 'size', 'indeterminate', 'showValue', 'label', 'children']);
   return (
-    <arc-progress value={local.value} variant={local.variant} size={local.size} indeterminate={local.indeterminate} label={local.label} {...rest}>
+    <arc-progress value={local.value} variant={local.variant} size={local.size} indeterminate={local.indeterminate} showValue={local.showValue} label={local.label} {...rest}>
       {local.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;
@@ -16,9 +17,9 @@ export interface ButtonProps {
 }
 
 export const Button: Component<ButtonProps> = (props) => {
-  const [local, rest] = splitProps(props, ['variant', 'size', 'href', 'disabled', 'type', '_hasPrefix', '_hasSuffix', 'children']);
+  const [local, rest] = splitProps(props, ['variant', 'size', 'href', 'disabled', 'loading', 'type', '_hasPrefix', '_hasSuffix', 'children']);
   return (
-    <arc-button variant={local.variant} size={local.size} href={local.href} disabled={local.disabled} type={local.type} _hasPrefix={local._hasPrefix} _hasSuffix={local._hasSuffix} {...rest}>
+    <arc-button variant={local.variant} size={local.size} href={local.href} disabled={local.disabled} loading={local.loading} type={local.type} _hasPrefix={local._hasPrefix} _hasSuffix={local._hasSuffix} {...rest}>
       {local.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;
@@ -15,9 +16,9 @@ export interface CheckboxProps {
 }
 
 export const Checkbox: Component<CheckboxProps> = (props) => {
-  const [local, rest] = splitProps(props, ['checked', 'indeterminate', 'disabled', 'label', 'name', 'value', 'children']);
+  const [local, rest] = splitProps(props, ['checked', 'indeterminate', 'disabled', 'size', 'label', 'name', 'value', 'children']);
   return (
-    <arc-checkbox checked={local.checked} indeterminate={local.indeterminate} disabled={local.disabled} label={local.label} name={local.name} value={local.value} {...rest}>
+    <arc-checkbox checked={local.checked} indeterminate={local.indeterminate} disabled={local.disabled} size={local.size} label={local.label} name={local.name} value={local.value} {...rest}>
       {local.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;
@@ -20,9 +22,9 @@ export interface InputProps {
 }
 
 export const Input: Component<InputProps> = (props) => {
-  const [local, rest] = splitProps(props, ['type', 'name', 'label', 'placeholder', 'value', 'disabled', 'required', 'multiline', 'rows', '_hasPrefix', '_hasSuffix', 'children']);
+  const [local, rest] = splitProps(props, ['type', 'name', 'label', 'placeholder', 'value', 'disabled', 'required', 'error', 'size', 'multiline', 'rows', '_hasPrefix', '_hasSuffix', 'children']);
   return (
-    <arc-input type={local.type} name={local.name} label={local.label} placeholder={local.placeholder} value={local.value} disabled={local.disabled} required={local.required} multiline={local.multiline} rows={local.rows} _hasPrefix={local._hasPrefix} _hasSuffix={local._hasSuffix} {...rest}>
+    <arc-input type={local.type} name={local.name} label={local.label} placeholder={local.placeholder} value={local.value} disabled={local.disabled} required={local.required} error={local.error} size={local.size} multiline={local.multiline} rows={local.rows} _hasPrefix={local._hasPrefix} _hasSuffix={local._hasSuffix} {...rest}>
       {local.children}
     </arc-input>
   );

package/src/input/RadioGroup.tsx

@@ -7,6 +7,7 @@ export interface RadioGroupProps {
   value?: string;
   name?: string;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   orientation?: 'horizontal';
   _radios?: string;
   children?: JSX.Element;
@@ -14,9 +15,9 @@ export interface RadioGroupProps {
 }
 
 export const RadioGroup: Component<RadioGroupProps> = (props) => {
-  const [local, rest] = splitProps(props, ['value', 'name', 'disabled', 'orientation', '_radios', 'children']);
+  const [local, rest] = splitProps(props, ['value', 'name', 'disabled', 'size', 'orientation', '_radios', 'children']);
   return (
-    <arc-radio-group value={local.value} name={local.name} disabled={local.disabled} orientation={local.orientation} _radios={local._radios} {...rest}>
+    <arc-radio-group value={local.value} name={local.name} disabled={local.disabled} size={local.size} orientation={local.orientation} _radios={local._radios} {...rest}>
       {local.children}
     </arc-radio-group>
   );

package/src/input/Select.tsx

@@ -9,6 +9,8 @@ export interface SelectProps {
   label?: string;
   name?: string;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
+  error?: string;
   open?: boolean;
   _options?: string;
   children?: JSX.Element;
@@ -16,9 +18,9 @@ export interface SelectProps {
 }
 
 export const Select: Component<SelectProps> = (props) => {
-  const [local, rest] = splitProps(props, ['value', 'placeholder', 'label', 'name', 'disabled', 'open', '_options', 'children']);
+  const [local, rest] = splitProps(props, ['value', 'placeholder', 'label', 'name', 'disabled', 'size', 'error', 'open', '_options', 'children']);
   return (
-    <arc-select value={local.value} placeholder={local.placeholder} label={local.label} name={local.name} disabled={local.disabled} open={local.open} _options={local._options} {...rest}>
+    <arc-select value={local.value} placeholder={local.placeholder} label={local.label} name={local.name} disabled={local.disabled} size={local.size} error={local.error} open={local.open} _options={local._options} {...rest}>
       {local.children}
     </arc-select>
   );

package/src/input/Textarea.tsx

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

package/src/input/Toggle.tsx

@@ -6,6 +6,7 @@ import '@arclux/arc-ui';
 export interface ToggleProps {
   checked?: boolean;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   label?: string;
   name?: string;
   children?: JSX.Element;
@@ -13,9 +14,9 @@ export interface ToggleProps {
 }
 
 export const Toggle: Component<ToggleProps> = (props) => {
-  const [local, rest] = splitProps(props, ['checked', 'disabled', 'label', 'name', 'children']);
+  const [local, rest] = splitProps(props, ['checked', 'disabled', 'size', 'label', 'name', 'children']);
   return (
-    <arc-toggle checked={local.checked} disabled={local.disabled} label={local.label} name={local.name} {...rest}>
+    <arc-toggle checked={local.checked} disabled={local.disabled} size={local.size} label={local.label} name={local.name} {...rest}>
       {local.children}
     </arc-toggle>
   );

package/src/layout/Container.tsx

@@ -5,14 +5,16 @@ import '@arclux/arc-ui';
 
 export interface ContainerProps {
   narrow?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  padding?: 'none' | 'sm' | 'lg';
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Container: Component<ContainerProps> = (props) => {
-  const [local, rest] = splitProps(props, ['narrow', 'children']);
+  const [local, rest] = splitProps(props, ['narrow', 'size', 'padding', 'children']);
   return (
-    <arc-container narrow={local.narrow} {...rest}>
+    <arc-container narrow={local.narrow} size={local.size} padding={local.padding} {...rest}>
       {local.children}
     </arc-container>
   );

package/src/navigation/Breadcrumb.tsx

@@ -4,15 +4,16 @@ import { splitProps, type Component, type JSX } from 'solid-js';
 import '@arclux/arc-ui';
 
 export interface BreadcrumbProps {
+  separator?: string;
   _items?: string;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Breadcrumb: Component<BreadcrumbProps> = (props) => {
-  const [local, rest] = splitProps(props, ['_items', 'children']);
+  const [local, rest] = splitProps(props, ['separator', '_items', 'children']);
   return (
-    <arc-breadcrumb _items={local._items} {...rest}>
+    <arc-breadcrumb separator={local.separator} _items={local._items} {...rest}>
       {local.children}
     </arc-breadcrumb>
   );

package/src/navigation/Footer.tsx

@@ -6,14 +6,15 @@ import '@arclux/arc-ui';
 export interface FooterProps {
   compact?: boolean;
   border?: boolean;
+  align?: 'center';
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Footer: Component<FooterProps> = (props) => {
-  const [local, rest] = splitProps(props, ['compact', 'border', 'children']);
+  const [local, rest] = splitProps(props, ['compact', 'border', 'align', 'children']);
   return (
-    <arc-footer compact={local.compact} border={local.border} {...rest}>
+    <arc-footer compact={local.compact} border={local.border} align={local.align} {...rest}>
       {local.children}
     </arc-footer>
   );

package/src/navigation/Link.tsx

@@ -6,6 +6,7 @@ import '@arclux/arc-ui';
 export interface LinkProps {
   href?: string;
   variant?: 'muted' | 'nav';
+  underline?: 'always' | 'never';
   active?: boolean;
   external?: boolean;
   children?: JSX.Element;
@@ -13,9 +14,9 @@ export interface LinkProps {
 }
 
 export const Link: Component<LinkProps> = (props) => {
-  const [local, rest] = splitProps(props, ['href', 'variant', 'active', 'external', 'children']);
+  const [local, rest] = splitProps(props, ['href', 'variant', 'underline', 'active', 'external', 'children']);
   return (
-    <arc-link href={local.href} variant={local.variant} active={local.active} external={local.external} {...rest}>
+    <arc-link href={local.href} variant={local.variant} underline={local.underline} active={local.active} external={local.external} {...rest}>
       {local.children}
     </arc-link>
   );

package/src/navigation/Pagination.tsx

@@ -7,14 +7,15 @@ export interface PaginationProps {
   total?: number;
   current?: number;
   siblings?: number;
+  compact?: boolean;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Pagination: Component<PaginationProps> = (props) => {
-  const [local, rest] = splitProps(props, ['total', 'current', 'siblings', 'children']);
+  const [local, rest] = splitProps(props, ['total', 'current', 'siblings', 'compact', 'children']);
   return (
-    <arc-pagination total={local.total} current={local.current} siblings={local.siblings} {...rest}>
+    <arc-pagination total={local.total} current={local.current} siblings={local.siblings} compact={local.compact} {...rest}>
       {local.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;
@@ -14,9 +15,9 @@ export interface SidebarProps {
 }
 
 export const Sidebar: Component<SidebarProps> = (props) => {
-  const [local, rest] = splitProps(props, ['active', 'collapsed', 'width', 'glow', '_sections', 'children']);
+  const [local, rest] = splitProps(props, ['active', 'collapsed', 'position', 'width', 'glow', '_sections', 'children']);
   return (
-    <arc-sidebar active={local.active} collapsed={local.collapsed} width={local.width} glow={local.glow} _sections={local._sections} {...rest}>
+    <arc-sidebar active={local.active} collapsed={local.collapsed} position={local.position} width={local.width} glow={local.glow} _sections={local._sections} {...rest}>
       {local.children}
     </arc-sidebar>
   );

package/src/navigation/Tabs.tsx

@@ -6,15 +6,17 @@ import '@arclux/arc-ui';
 export interface TabsProps {
   items?: unknown[];
   selected?: number;
+  align?: 'center' | 'end';
+  variant?: 'pills';
   _tabs?: string;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const Tabs: Component<TabsProps> = (props) => {
-  const [local, rest] = splitProps(props, ['items', 'selected', '_tabs', 'children']);
+  const [local, rest] = splitProps(props, ['items', 'selected', 'align', 'variant', '_tabs', 'children']);
   return (
-    <arc-tabs items={local.items} selected={local.selected} _tabs={local._tabs} {...rest}>
+    <arc-tabs items={local.items} selected={local.selected} align={local.align} variant={local.variant} _tabs={local._tabs} {...rest}>
       {local.children}
     </arc-tabs>
   );

package/src/navigation/TopBar.tsx

@@ -9,14 +9,15 @@ export interface TopBarProps {
   menuOpen?: boolean;
   mobileMenu?: string;
   menuPosition?: string;
+  navAlign?: string;
   children?: JSX.Element;
   [key: string]: unknown;
 }
 
 export const TopBar: Component<TopBarProps> = (props) => {
-  const [local, rest] = splitProps(props, ['heading', 'fixed', 'menuOpen', 'mobileMenu', 'menuPosition', 'children']);
+  const [local, rest] = splitProps(props, ['heading', 'fixed', 'menuOpen', 'mobileMenu', 'menuPosition', 'navAlign', 'children']);
   return (
-    <arc-top-bar heading={local.heading} fixed={local.fixed} menuOpen={local.menuOpen} mobileMenu={local.mobileMenu} menuPosition={local.menuPosition} {...rest}>
+    <arc-top-bar heading={local.heading} fixed={local.fixed} menuOpen={local.menuOpen} mobileMenu={local.mobileMenu} menuPosition={local.menuPosition} navAlign={local.navAlign} {...rest}>
       {local.children}
     </arc-top-bar>
   );