@arclux/arc-ui-react 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-react",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "React wrappers for ARC UI Web Components.",
   "sideEffects": false,
   "type": "module",
@@ -16,6 +16,14 @@
       "types": "./src/content/index.ts",
       "default": "./src/content/index.ts"
     },
+    "./data": {
+      "types": "./src/data/index.ts",
+      "default": "./src/data/index.ts"
+    },
+    "./typography": {
+      "types": "./src/typography/index.ts",
+      "default": "./src/typography/index.ts"
+    },
     "./input": {
       "types": "./src/input/index.ts",
       "default": "./src/input/index.ts"
@@ -46,7 +54,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@arclux/arc-ui": "2.1.0"
+    "@arclux/arc-ui": "2.2.0"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Accordion.ts

@@ -2,12 +2,10 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcAccordion } from '@arclux/arc-ui';
+import { ArcAccordion } from '@arclux/arc-ui/accordion';
 
 export interface AccordionProps {
   multiple?: boolean;
-  _items?: string;
-  _openItems?: string;
   className?: string;
   children?: React.ReactNode;
   onClick?: (e: Event) => void;

package/src/content/AccordionItem.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcAccordionItem } from '@arclux/arc-ui';
+import { ArcAccordionItem } from '@arclux/arc-ui/accordion-item';
 
 export interface AccordionItemProps {
   question?: string;

package/src/content/AspectRatio.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcAspectRatio } from '@arclux/arc-ui';
+import { ArcAspectRatio } from '@arclux/arc-ui/aspect-ratio';
 
 export interface AspectRatioProps {
   ratio?: string;

package/src/content/Avatar.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcAvatar } from '@arclux/arc-ui';
+import { ArcAvatar } from '@arclux/arc-ui/avatar';
 
 export interface AvatarProps {
   src?: string;
@@ -10,7 +10,6 @@ export interface AvatarProps {
   size?: 'sm' | 'md' | 'lg';
   shape?: 'square' | 'rounded';
   status?: 'online' | 'offline' | 'busy' | 'away';
-  _imgState?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/AvatarGroup.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcAvatarGroup } from '@arclux/arc-ui';
+import { ArcAvatarGroup } from '@arclux/arc-ui/avatar-group';
 
 export interface AvatarGroupProps {
   max?: number;

package/src/content/Callout.ts

@@ -2,12 +2,11 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCallout } from '@arclux/arc-ui';
+import { ArcCallout } from '@arclux/arc-ui/callout';
 
 export interface CalloutProps {
   variant?: string;
   dismissible?: boolean;
-  _dismissed?: string;
   className?: string;
   children?: React.ReactNode;
   onArcDismiss?: (e: CustomEvent) => void;

package/src/content/Card.ts

@@ -2,13 +2,12 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCard } from '@arclux/arc-ui';
+import { ArcCard } from '@arclux/arc-ui/card';
 
 export interface CardProps {
   href?: string;
   padding?: 'none' | 'sm' | 'lg';
   interactive?: boolean;
-  _hasFooter?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/Carousel.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCarousel } from '@arclux/arc-ui';
+import { ArcCarousel } from '@arclux/arc-ui/carousel';
 
 export interface CarouselProps {
   autoPlay?: boolean;
@@ -10,8 +10,6 @@ export interface CarouselProps {
   loop?: boolean;
   showDots?: boolean;
   showArrows?: boolean;
-  _current?: string;
-  _total?: string;
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;

package/src/content/Collapsible.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCollapsible } from '@arclux/arc-ui';
+import { ArcCollapsible } from '@arclux/arc-ui/collapsible';
 
 export interface CollapsibleProps {
   open?: boolean;

package/src/content/ColorSwatch.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcColorSwatch } from '@arclux/arc-ui';
+import { ArcColorSwatch } from '@arclux/arc-ui/color-swatch';
 
 export interface ColorSwatchProps {
   color?: string;

package/src/content/Column.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcColumn } from '@arclux/arc-ui';
+import { ArcColumn } from '@arclux/arc-ui/column';
 
 export interface ColumnProps {
   key?: string;

package/src/content/CtaBanner.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCtaBanner } from '@arclux/arc-ui';
+import { ArcCtaBanner } from '@arclux/arc-ui/cta-banner';
 
 export interface CtaBannerProps {
   eyebrow?: string;

package/src/content/Divider.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcDivider } from '@arclux/arc-ui';
+import { ArcDivider } from '@arclux/arc-ui/divider';
 
 export interface DividerProps {
   variant?: 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient';

package/src/content/EmptyState.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcEmptyState } from '@arclux/arc-ui';
+import { ArcEmptyState } from '@arclux/arc-ui/empty-state';
 
 export interface EmptyStateProps {
   heading?: string;

package/src/content/FeatureCard.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcFeatureCard } from '@arclux/arc-ui';
+import { ArcFeatureCard } from '@arclux/arc-ui/feature-card';
 
 export interface FeatureCardProps {
   icon?: string;

package/src/content/Icon.ts

@@ -2,13 +2,12 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcIcon } from '@arclux/arc-ui';
+import { ArcIcon } from '@arclux/arc-ui/icon';
 
 export interface IconProps {
   name?: string;
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   label?: string;
-  _svgContent?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/Image.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcImage } from '@arclux/arc-ui';
+import { ArcImage } from '@arclux/arc-ui/image';
 
 export interface ImageProps {
   src?: string;
@@ -11,7 +11,6 @@ export interface ImageProps {
   fit?: 'contain' | 'fill' | 'none' | 'scale-down';
   loading?: string;
   fallback?: string;
-  _state?: string;
   className?: string;
   children?: React.ReactNode;
   onArcLoad?: (e: CustomEvent) => void;

package/src/content/InfiniteScroll.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcInfiniteScroll } from '@arclux/arc-ui';
+import { ArcInfiniteScroll } from '@arclux/arc-ui/infinite-scroll';
 
 export interface InfiniteScrollProps {
   threshold?: number;

package/src/content/Marquee.ts

@@ -2,13 +2,12 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcMarquee } from '@arclux/arc-ui';
+import { ArcMarquee } from '@arclux/arc-ui/marquee';
 
 export interface MarqueeProps {
   speed?: number;
   direction?: string;
   gap?: string;
-  _animDuration?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/{Stat.ts → QrCode.ts}

@@ -2,19 +2,21 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcStat } from '@arclux/arc-ui';
+import { ArcQrCode } from '@arclux/arc-ui/qr-code';
 
-export interface StatProps {
+export interface QrCodeProps {
   value?: string;
+  size?: number;
+  level?: string;
   label?: string;
-  trend?: 'up' | 'down' | 'neutral';
-  change?: string;
+  quietZone?: number;
+  contrast?: boolean;
   className?: string;
   children?: React.ReactNode;
 }
 
-export const Stat = createComponent({
-  tagName: 'arc-stat',
-  elementClass: ArcStat,
+export const QrCode = createComponent({
+  tagName: 'arc-qr-code',
+  elementClass: ArcQrCode,
   react: React,
 });

package/src/content/ScrollArea.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcScrollArea } from '@arclux/arc-ui';
+import { ArcScrollArea } from '@arclux/arc-ui/scroll-area';
 
 export interface ScrollAreaProps {
   maxHeight?: string;

package/src/content/ScrollIndicator.ts

@@ -2,14 +2,13 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcScrollIndicator } from '@arclux/arc-ui';
+import { ArcScrollIndicator } from '@arclux/arc-ui/scroll-indicator';
 
 export interface ScrollIndicatorProps {
   target?: string;
   position?: 'bottom';
   size?: 'sm' | 'md' | 'lg';
   color?: 'gradient';
-  _progress?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/Separator.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSeparator } from '@arclux/arc-ui';
+import { ArcSeparator } from '@arclux/arc-ui/separator';
 
 export interface SeparatorProps {
   orientation?: 'vertical';

package/src/content/Skeleton.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSkeleton } from '@arclux/arc-ui';
+import { ArcSkeleton } from '@arclux/arc-ui/skeleton';
 
 export interface SkeletonProps {
   variant?: 'text' | 'circle' | 'rect';

package/src/content/Spinner.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcSpinner } from '@arclux/arc-ui';
+import { ArcSpinner } from '@arclux/arc-ui/spinner';
 
 export interface SpinnerProps {
   size?: 'sm' | 'md' | 'lg';

package/src/content/Stack.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcStack } from '@arclux/arc-ui';
+import { ArcStack } from '@arclux/arc-ui/stack';
 
 export interface StackProps {
   direction?: 'horizontal' | 'vertical';

package/src/content/VirtualList.ts

@@ -2,14 +2,12 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcVirtualList } from '@arclux/arc-ui';
+import { ArcVirtualList } from '@arclux/arc-ui/virtual-list';
 
 export interface VirtualListProps {
   items?: unknown[];
   itemHeight?: number;
   overscan?: number;
-  _startIndex?: string;
-  _visibleCount?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/content/index.ts

@@ -1,27 +1,14 @@
-// ARC UI React — Content tier
-// Static display components: cards, badges, text, tables, etc.
-
-export { Accordion } from './Accordion.js';
-export type { AccordionProps } from './Accordion.js';
+// Auto-generated by @arclux/prism — do not edit manually
 
 export { AccordionItem } from './AccordionItem.js';
 export type { AccordionItemProps } from './AccordionItem.js';
 
-export { AnimatedNumber } from './AnimatedNumber.js';
-export type { AnimatedNumberProps } from './AnimatedNumber.js';
-
 export { AspectRatio } from './AspectRatio.js';
 export type { AspectRatioProps } from './AspectRatio.js';
 
-export { Avatar } from './Avatar.js';
-export type { AvatarProps } from './Avatar.js';
-
 export { AvatarGroup } from './AvatarGroup.js';
 export type { AvatarGroupProps } from './AvatarGroup.js';
 
-export { Badge } from './Badge.js';
-export type { BadgeProps } from './Badge.js';
-
 export { Callout } from './Callout.js';
 export type { CalloutProps } from './Callout.js';
 
@@ -31,20 +18,17 @@ export type { CardProps } from './Card.js';
 export { Carousel } from './Carousel.js';
 export type { CarouselProps } from './Carousel.js';
 
-export { CodeBlock } from './CodeBlock.js';
-export type { CodeBlockProps } from './CodeBlock.js';
-
 export { Collapsible } from './Collapsible.js';
 export type { CollapsibleProps } from './Collapsible.js';
 
-export { Column } from './Column.js';
-export type { ColumnProps } from './Column.js';
-
 export { ColorSwatch } from './ColorSwatch.js';
 export type { ColorSwatchProps } from './ColorSwatch.js';
 
-export { DataTable } from './DataTable.js';
-export type { DataTableProps } from './DataTable.js';
+export { Column } from './Column.js';
+export type { ColumnProps } from './Column.js';
+
+export { CtaBanner } from './CtaBanner.js';
+export type { CtaBannerProps } from './CtaBanner.js';
 
 export { Divider } from './Divider.js';
 export type { DividerProps } from './Divider.js';
@@ -55,30 +39,27 @@ export type { EmptyStateProps } from './EmptyState.js';
 export { FeatureCard } from './FeatureCard.js';
 export type { FeatureCardProps } from './FeatureCard.js';
 
-export { Highlight } from './Highlight.js';
-export type { HighlightProps } from './Highlight.js';
-
 export { Icon } from './Icon.js';
 export type { IconProps } from './Icon.js';
 
+export { Image } from './Image.js';
+export type { ImageProps } from './Image.js';
+
 export { InfiniteScroll } from './InfiniteScroll.js';
 export type { InfiniteScrollProps } from './InfiniteScroll.js';
 
-export { Kbd } from './Kbd.js';
-export type { KbdProps } from './Kbd.js';
-
-export { Markdown } from './Markdown.js';
-export type { MarkdownProps } from './Markdown.js';
-
 export { Marquee } from './Marquee.js';
 export type { MarqueeProps } from './Marquee.js';
 
-export { Meter } from './Meter.js';
-export type { MeterProps } from './Meter.js';
-
 export { ScrollArea } from './ScrollArea.js';
 export type { ScrollAreaProps } from './ScrollArea.js';
 
+export { ScrollIndicator } from './ScrollIndicator.js';
+export type { ScrollIndicatorProps } from './ScrollIndicator.js';
+
+export { Separator } from './Separator.js';
+export type { SeparatorProps } from './Separator.js';
+
 export { Skeleton } from './Skeleton.js';
 export type { SkeletonProps } from './Skeleton.js';
 
@@ -88,53 +69,8 @@ export type { SpinnerProps } from './Spinner.js';
 export { Stack } from './Stack.js';
 export type { StackProps } from './Stack.js';
 
-export { Stat } from './Stat.js';
-export type { StatProps } from './Stat.js';
-
-export { Step } from './Step.js';
-export type { StepProps } from './Step.js';
-
-export { Stepper } from './Stepper.js';
-export type { StepperProps } from './Stepper.js';
-
-export { Table } from './Table.js';
-export type { TableProps } from './Table.js';
-
-export { Tag } from './Tag.js';
-export type { TagProps } from './Tag.js';
-
-export { Text } from './Text.js';
-export type { TextProps } from './Text.js';
-
-export { Timeline } from './Timeline.js';
-export type { TimelineProps } from './Timeline.js';
-
-export { TimelineItem } from './TimelineItem.js';
-export type { TimelineItemProps } from './TimelineItem.js';
-
-export { Truncate } from './Truncate.js';
-export type { TruncateProps } from './Truncate.js';
-
-export { ValueCard } from './ValueCard.js';
-export type { ValueCardProps } from './ValueCard.js';
-
-export { CtaBanner } from './CtaBanner.js';
-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';
+
+export { QrCode } from './QrCode.js';
+export type { QrCodeProps } from './QrCode.js';

package/src/data/AnimatedNumber.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcAnimatedNumber } from '@arclux/arc-ui';
+import { ArcAnimatedNumber } from '@arclux/arc-ui/animated-number';
 
 export interface AnimatedNumberProps {
   value?: number;

package/src/data/Badge.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcBadge } from '@arclux/arc-ui';
+import { ArcBadge } from '@arclux/arc-ui/badge';
 
 export interface BadgeProps {
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';

package/src/data/Chart.ts

@@ -0,0 +1,29 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcChart } from '@arclux/arc-ui/chart';
+
+export interface ChartProps {
+  type?: string;
+  series?: unknown[];
+  labels?: unknown[];
+  stacked?: boolean;
+  hideLegend?: boolean;
+  hideAxis?: boolean;
+  height?: number;
+  valueFormat?: string;
+  currency?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcMarkClick?: (e: CustomEvent) => void;
+}
+
+export const Chart = createComponent({
+  tagName: 'arc-chart',
+  elementClass: ArcChart,
+  react: React,
+  events: {
+    onArcMarkClick: 'arc-mark-click' as EventName<CustomEvent>,
+  },
+});

package/src/data/Comparison.ts

@@ -2,11 +2,10 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcComparison } from '@arclux/arc-ui';
+import { ArcComparison } from '@arclux/arc-ui/comparison';
 
 export interface ComparisonProps {
   features?: string;
-  _columns?: string;
   className?: string;
   children?: React.ReactNode;
 }

package/src/data/ComparisonColumn.ts

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcComparisonColumn } from '@arclux/arc-ui';
+import { ArcComparisonColumn } from '@arclux/arc-ui/comparison-column';
 
 export interface ComparisonColumnProps {
   heading?: string;

package/src/data/CountdownTimer.ts

@@ -2,18 +2,13 @@
 
 import React from 'react';
 import { createComponent, type EventName } from '@lit/react';
-import { ArcCountdownTimer } from '@arclux/arc-ui';
+import { ArcCountdownTimer } from '@arclux/arc-ui/countdown-timer';
 
 export interface CountdownTimerProps {
   target?: string;
   label?: string;
   expired?: string;
   hideZeroSegments?: boolean;
-  _days?: string;
-  _hours?: string;
-  _minutes?: string;
-  _seconds?: string;
-  _expired?: string;
   className?: string;
   children?: React.ReactNode;
   onArcExpired?: (e: CustomEvent) => void;