@arclux/arc-ui-react 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-react",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "React wrappers for ARC UI Web Components.",
   "type": "module",
   "main": "src/index.ts",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@arclux/arc-ui": "1.3.0"
+    "@arclux/arc-ui": "1.5.0"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Accordion.ts

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcAccordion } from '@arclux/arc-ui';
 
 export interface AccordionProps {
+  multiple?: boolean;
   _items?: string;
   _openItems?: string;
   className?: string;

package/src/content/Avatar.ts

@@ -8,6 +8,8 @@ export interface AvatarProps {
   src?: string;
   name?: string;
   size?: 'sm' | 'md' | 'lg';
+  shape?: 'square' | 'rounded';
+  status?: 'online' | 'offline' | 'busy' | 'away';
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/Badge.ts

@@ -6,6 +6,7 @@ import { ArcBadge } from '@arclux/arc-ui';
 
 export interface BadgeProps {
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'lg';
   color?: string;
   className?: string;
   children?: React.ReactNode;

package/src/content/Callout.ts

@@ -5,13 +5,19 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcCallout } from '@arclux/arc-ui';
 
 export interface CalloutProps {
-  variant?: 'info' | 'warning' | 'tip' | 'danger';
+  variant?: string;
+  dismissible?: boolean;
+  _dismissed?: string;
   className?: string;
   children?: React.ReactNode;
+  onArcDismiss?: (e: CustomEvent) => void;
 }
 
 export const Callout = createComponent({
   tagName: 'arc-callout',
   elementClass: ArcCallout,
   react: React,
+  events: {
+    onArcDismiss: 'arc-dismiss' as EventName<CustomEvent>,
+  },
 });

package/src/content/Card.ts

@@ -6,6 +6,8 @@ import { ArcCard } from '@arclux/arc-ui';
 
 export interface CardProps {
   href?: string;
+  padding?: 'none' | 'sm' | 'lg';
+  interactive?: boolean;
   _hasFooter?: string;
   className?: string;
   children?: React.ReactNode;

package/src/content/Divider.ts

@@ -8,6 +8,7 @@ export interface DividerProps {
   variant?: 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient';
   align?: 'left' | 'right';
   vertical?: boolean;
+  label?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/Skeleton.ts

@@ -8,6 +8,7 @@ export interface SkeletonProps {
   variant?: 'text' | 'circle' | 'rect';
   width?: string;
   height?: string;
+  count?: number;
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/Stat.ts

@@ -7,6 +7,8 @@ import { ArcStat } from '@arclux/arc-ui';
 export interface StatProps {
   value?: string;
   label?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  change?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/Tag.ts

@@ -6,6 +6,7 @@ import { ArcTag } from '@arclux/arc-ui';
 
 export interface TagProps {
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+  size?: 'sm' | 'lg';
   removable?: boolean;
   disabled?: boolean;
   color?: string;

package/src/feedback/Alert.ts

@@ -5,7 +5,8 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcAlert } from '@arclux/arc-ui';
 
 export interface AlertProps {
-  variant?: 'info' | 'success' | 'warning' | 'error';
+  variant?: string;
+  compact?: boolean;
   dismissible?: boolean;
   heading?: string;
   className?: string;

package/src/feedback/Modal.ts

@@ -8,6 +8,7 @@ export interface ModalProps {
   open?: boolean;
   heading?: string;
   size?: 'sm' | 'md' | 'lg';
+  fullscreen?: boolean;
   closable?: boolean;
   className?: string;
   children?: React.ReactNode;

package/src/feedback/Progress.ts

@@ -9,6 +9,7 @@ export interface ProgressProps {
   variant?: string;
   size?: 'sm' | 'md' | 'lg';
   indeterminate?: boolean;
+  showValue?: boolean;
   label?: string;
   className?: string;
   children?: React.ReactNode;

package/src/input/Button.ts

@@ -9,6 +9,7 @@ export interface ButtonProps {
   size?: 'sm' | 'md' | 'lg';
   href?: string;
   disabled?: boolean;
+  loading?: boolean;
   type?: string;
   _hasPrefix?: string;
   _hasSuffix?: string;

package/src/input/Checkbox.ts

@@ -8,6 +8,7 @@ export interface CheckboxProps {
   checked?: boolean;
   indeterminate?: boolean;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   label?: string;
   name?: string;
   value?: string;

package/src/input/Input.ts

@@ -12,6 +12,8 @@ export interface InputProps {
   value?: string;
   disabled?: boolean;
   required?: boolean;
+  error?: string;
+  size?: 'sm' | 'lg';
   multiline?: boolean;
   rows?: number;
   _hasPrefix?: string;

package/src/input/RadioGroup.ts

@@ -8,6 +8,7 @@ export interface RadioGroupProps {
   value?: string;
   name?: string;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   orientation?: 'horizontal';
   _radios?: string;
   className?: string;

package/src/input/Select.ts

@@ -10,6 +10,8 @@ export interface SelectProps {
   label?: string;
   name?: string;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
+  error?: string;
   open?: boolean;
   _options?: string;
   className?: string;

package/src/input/Textarea.ts

@@ -13,6 +13,8 @@ export interface TextareaProps {
   disabled?: boolean;
   readonly?: boolean;
   resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+  size?: 'sm' | 'lg';
+  autoResize?: boolean;
   error?: string;
   className?: string;
   children?: React.ReactNode;

package/src/input/Toggle.ts

@@ -7,6 +7,7 @@ import { ArcToggle } from '@arclux/arc-ui';
 export interface ToggleProps {
   checked?: boolean;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   label?: string;
   name?: string;
   className?: string;

package/src/layout/Container.ts

@@ -6,6 +6,8 @@ import { ArcContainer } from '@arclux/arc-ui';
 
 export interface ContainerProps {
   narrow?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  padding?: 'none' | 'sm' | 'lg';
   className?: string;
   children?: React.ReactNode;
 }

package/src/navigation/Breadcrumb.ts

@@ -5,6 +5,7 @@ import { createComponent, type EventName } from '@lit/react';
 import { ArcBreadcrumb } from '@arclux/arc-ui';
 
 export interface BreadcrumbProps {
+  separator?: string;
   _items?: string;
   className?: string;
   children?: React.ReactNode;

package/src/navigation/Footer.ts

@@ -7,6 +7,7 @@ import { ArcFooter } from '@arclux/arc-ui';
 export interface FooterProps {
   compact?: boolean;
   border?: boolean;
+  align?: 'center';
   className?: string;
   children?: React.ReactNode;
 }

package/src/navigation/Link.ts

@@ -7,6 +7,7 @@ import { ArcLink } from '@arclux/arc-ui';
 export interface LinkProps {
   href?: string;
   variant?: 'muted' | 'nav';
+  underline?: 'always' | 'never';
   active?: boolean;
   external?: boolean;
   className?: string;

package/src/navigation/Pagination.ts

@@ -8,6 +8,7 @@ export interface PaginationProps {
   total?: number;
   current?: number;
   siblings?: number;
+  compact?: boolean;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/navigation/Sidebar.ts

@@ -7,6 +7,7 @@ import { ArcSidebar } from '@arclux/arc-ui';
 export interface SidebarProps {
   active?: string;
   collapsed?: boolean;
+  position?: 'right';
   width?: string;
   glow?: boolean;
   _sections?: string;

package/src/navigation/Tabs.ts

@@ -7,6 +7,8 @@ import { ArcTabs } from '@arclux/arc-ui';
 export interface TabsProps {
   items?: unknown[];
   selected?: number;
+  align?: 'center' | 'end';
+  variant?: 'pills';
   _tabs?: string;
   className?: string;
   children?: React.ReactNode;

package/src/navigation/TopBar.ts

@@ -10,6 +10,7 @@ export interface TopBarProps {
   menuOpen?: boolean;
   mobileMenu?: string;
   menuPosition?: string;
+  navAlign?: string;
   className?: string;
   children?: React.ReactNode;
 }