@arclux/arc-ui-react 1.11.0 → 2.0.0

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@arclux/arc-ui-react",
-  "version": "1.11.0",
+  "version": "2.0.0",
   "description": "React wrappers for ARC UI Web Components.",
+  "sideEffects": false,
   "type": "module",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -39,14 +40,13 @@
   "files": [
     "src/"
   ],
-  "sideEffects": false,
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@arclux/arc-ui": "1.11.0"
+    "@arclux/arc-ui": "2.0.0"
   },
   "license": "MIT",
   "keywords": [

package/src/data/Comparison.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcComparison } from '@arclux/arc-ui';
+
+export interface ComparisonProps {
+  features?: string;
+  _columns?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Comparison = createComponent({
+  tagName: 'arc-comparison',
+  elementClass: ArcComparison,
+  react: React,
+});

package/src/data/ComparisonColumn.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcComparisonColumn } from '@arclux/arc-ui';
+
+export interface ComparisonColumnProps {
+  heading?: string;
+  highlight?: boolean;
+  values?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ComparisonColumn = createComponent({
+  tagName: 'arc-comparison-column',
+  elementClass: ArcComparisonColumn,
+  react: React,
+});

package/src/data/CountdownTimer.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 { ArcCountdownTimer } from '@arclux/arc-ui';
+
+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;
+}
+
+export const CountdownTimer = createComponent({
+  tagName: 'arc-countdown-timer',
+  elementClass: ArcCountdownTimer,
+  react: React,
+  events: {
+    onArcExpired: 'arc-expired' as EventName<CustomEvent>,
+  },
+});

package/src/data/DescriptionItem.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcDescriptionItem } from '@arclux/arc-ui';
+
+export interface DescriptionItemProps {
+  term?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const DescriptionItem = createComponent({
+  tagName: 'arc-description-item',
+  elementClass: ArcDescriptionItem,
+  react: React,
+});

package/src/data/DescriptionList.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcDescriptionList } from '@arclux/arc-ui';
+
+export interface DescriptionListProps {
+  columns?: number;
+  dividers?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const DescriptionList = createComponent({
+  tagName: 'arc-description-list',
+  elementClass: ArcDescriptionList,
+  react: React,
+});

package/src/data/Diff.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcDiff } from '@arclux/arc-ui';
+
+export interface DiffProps {
+  before?: string;
+  after?: string;
+  mode?: 'side-by-side';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Diff = createComponent({
+  tagName: 'arc-diff',
+  elementClass: ArcDiff,
+  react: React,
+});

package/src/data/KeyValue.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcKeyValue } from '@arclux/arc-ui';
+
+export interface KeyValueProps {
+  layout?: 'horizontal' | 'stacked';
+  dividers?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const KeyValue = createComponent({
+  tagName: 'arc-key-value',
+  elementClass: ArcKeyValue,
+  react: React,
+});

package/src/data/KvPair.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcKvPair } from '@arclux/arc-ui';
+
+export interface KvPairProps {
+  label?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const KvPair = createComponent({
+  tagName: 'arc-kv-pair',
+  elementClass: ArcKvPair,
+  react: React,
+});

package/src/data/List.ts

@@ -14,7 +14,7 @@ export interface ListProps {
   className?: string;
   children?: React.ReactNode;
   onArcChange?: (e: CustomEvent) => void;
-  onArcItemClick?: (e: CustomEvent) => void;
+  onArcItemSelect?: (e: CustomEvent) => void;
 }
 
 export const List = createComponent({
@@ -23,6 +23,6 @@ export const List = createComponent({
   react: React,
   events: {
     onArcChange: 'arc-change' as EventName<CustomEvent>,
-    onArcItemClick: 'arc-item-click' as EventName<CustomEvent>,
+    onArcItemSelect: 'arc-item-select' as EventName<CustomEvent>,
   },
 });

package/src/data/ListItem.ts

@@ -14,7 +14,7 @@ export interface ListItemProps {
   _hasDescription?: string;
   className?: string;
   children?: React.ReactNode;
-  onArcItemClick?: (e: CustomEvent) => void;
+  onArcItemSelect?: (e: CustomEvent) => void;
 }
 
 export const ListItem = createComponent({
@@ -22,6 +22,6 @@ export const ListItem = createComponent({
   elementClass: ArcListItem,
   react: React,
   events: {
-    onArcItemClick: 'arc-item-click' as EventName<CustomEvent>,
+    onArcItemSelect: 'arc-item-select' as EventName<CustomEvent>,
   },
 });

package/src/data/Sparkline.ts

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcSparkline } from '@arclux/arc-ui';
+
+export interface SparklineProps {
+  data?: string;
+  type?: string;
+  color?: string;
+  width?: number;
+  height?: number;
+  fill?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Sparkline = createComponent({
+  tagName: 'arc-sparkline',
+  elementClass: ArcSparkline,
+  react: React,
+});

package/src/index.ts

@@ -478,3 +478,54 @@ export type { SnackbarProps } from './feedback/Snackbar.js';
 
 export { Spotlight } from './feedback/Spotlight.js';
 export type { SpotlightProps } from './feedback/Spotlight.js';
+
+export { ComparisonColumn } from './data/ComparisonColumn.js';
+export type { ComparisonColumnProps } from './data/ComparisonColumn.js';
+
+export { CountdownTimer } from './data/CountdownTimer.js';
+export type { CountdownTimerProps } from './data/CountdownTimer.js';
+
+export { DescriptionItem } from './data/DescriptionItem.js';
+export type { DescriptionItemProps } from './data/DescriptionItem.js';
+
+export { Diff } from './data/Diff.js';
+export type { DiffProps } from './data/Diff.js';
+
+export { KvPair } from './data/KvPair.js';
+export type { KvPairProps } from './data/KvPair.js';
+
+export { Sparkline } from './data/Sparkline.js';
+export type { SparklineProps } from './data/Sparkline.js';
+
+export { Blockquote } from './typography/Blockquote.js';
+export type { BlockquoteProps } from './typography/Blockquote.js';
+
+export { GradientText } from './typography/GradientText.js';
+export type { GradientTextProps } from './typography/GradientText.js';
+
+export { NumberFormat } from './typography/NumberFormat.js';
+export type { NumberFormatProps } from './typography/NumberFormat.js';
+
+export { Prose } from './typography/Prose.js';
+export type { ProseProps } from './typography/Prose.js';
+
+export { TimeAgo } from './typography/TimeAgo.js';
+export type { TimeAgoProps } from './typography/TimeAgo.js';
+
+export { Typewriter } from './typography/Typewriter.js';
+export type { TypewriterProps } from './typography/Typewriter.js';
+
+export { Comparison } from './data/Comparison.js';
+export type { ComparisonProps } from './data/Comparison.js';
+
+export { DescriptionList } from './data/DescriptionList.js';
+export type { DescriptionListProps } from './data/DescriptionList.js';
+
+export { KeyValue } from './data/KeyValue.js';
+export type { KeyValueProps } from './data/KeyValue.js';
+
+export { RangeSlider } from './input/RangeSlider.js';
+export type { RangeSliderProps } from './input/RangeSlider.js';
+
+export { TimePicker } from './input/TimePicker.js';
+export type { TimePickerProps } from './input/TimePicker.js';

package/src/input/Hotkey.ts

@@ -10,7 +10,7 @@ export interface HotkeyProps {
   global?: boolean;
   className?: string;
   children?: React.ReactNode;
-  onArcTrigger?: (e: CustomEvent) => void;
+  onArcHotkeyTrigger?: (e: CustomEvent) => void;
 }
 
 export const Hotkey = createComponent({
@@ -18,6 +18,6 @@ export const Hotkey = createComponent({
   elementClass: ArcHotkey,
   react: React,
   events: {
-    onArcTrigger: 'arc-trigger' as EventName<CustomEvent>,
+    onArcHotkeyTrigger: 'arc-hotkey-trigger' as EventName<CustomEvent>,
   },
 });

package/src/input/RangeSlider.ts

@@ -0,0 +1,31 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcRangeSlider } from '@arclux/arc-ui';
+
+export interface RangeSliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  low?: number;
+  high?: number;
+  disabled?: boolean;
+  label?: string;
+  showValues?: boolean;
+  _dragging?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcInput?: (e: CustomEvent) => void;
+  onArcChange?: (e: CustomEvent) => void;
+}
+
+export const RangeSlider = createComponent({
+  tagName: 'arc-range-slider',
+  elementClass: ArcRangeSlider,
+  react: React,
+  events: {
+    onArcInput: 'arc-input' as EventName<CustomEvent>,
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+  },
+});

package/src/input/TimePicker.ts

@@ -0,0 +1,35 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcTimePicker } from '@arclux/arc-ui';
+
+export interface TimePickerProps {
+  value?: string;
+  min?: string;
+  max?: string;
+  step?: number;
+  format?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  label?: string;
+  _open?: string;
+  _selectedHour?: string;
+  _selectedMinute?: string;
+  _selectedPeriod?: string;
+  _focusedColumn?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcChange?: (e: CustomEvent) => void;
+  onClick?: (e: Event) => void;
+}
+
+export const TimePicker = createComponent({
+  tagName: 'arc-time-picker',
+  elementClass: ArcTimePicker,
+  react: React,
+  events: {
+    onArcChange: 'arc-change' as EventName<CustomEvent>,
+    onClick: 'click' as EventName<Event>,
+  },
+});

package/src/input/index.ts

@@ -102,3 +102,9 @@ export type { SwitchGroupProps } from './SwitchGroup.js';
 
 export { Hotkey } from './Hotkey.js';
 export type { HotkeyProps } from './Hotkey.js';
+
+export { RangeSlider } from './RangeSlider.js';
+export type { RangeSliderProps } from './RangeSlider.js';
+
+export { TimePicker } from './TimePicker.js';
+export type { TimePickerProps } from './TimePicker.js';

package/src/navigation/SidebarLink.ts

@@ -7,6 +7,7 @@ import { ArcSidebarLink } from '@arclux/arc-ui';
 export interface SidebarLinkProps {
   href?: string;
   active?: boolean;
+  level?: number;
   className?: string;
   children?: React.ReactNode;
 }

package/src/navigation/SpyLink.ts

@@ -6,6 +6,7 @@ import { ArcSpyLink } from '@arclux/arc-ui';
 
 export interface SpyLinkProps {
   target?: string;
+  level?: number;
   className?: string;
   children?: React.ReactNode;
 }

package/src/navigation/Tabs.ts

@@ -8,6 +8,7 @@ export interface TabsProps {
   selected?: number;
   align?: 'center' | 'end';
   variant?: 'pills';
+  orientation?: 'vertical';
   _tabs?: string;
   className?: string;
   children?: React.ReactNode;

package/src/typography/Blockquote.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcBlockquote } from '@arclux/arc-ui';
+
+export interface BlockquoteProps {
+  cite?: string;
+  variant?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Blockquote = createComponent({
+  tagName: 'arc-blockquote',
+  elementClass: ArcBlockquote,
+  react: React,
+});

package/src/typography/GradientText.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcGradientText } from '@arclux/arc-ui';
+
+export interface GradientTextProps {
+  variant?: 'accent' | 'display' | 'sunset' | 'ocean';
+  gradient?: string;
+  animate?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const GradientText = createComponent({
+  tagName: 'arc-gradient-text',
+  elementClass: ArcGradientText,
+  react: React,
+});

package/src/typography/NumberFormat.ts

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcNumberFormat } from '@arclux/arc-ui';
+
+export interface NumberFormatProps {
+  value?: number;
+  type?: string;
+  locale?: string;
+  currency?: string;
+  decimals?: number;
+  notation?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const NumberFormat = createComponent({
+  tagName: 'arc-number-format',
+  elementClass: ArcNumberFormat,
+  react: React,
+});

package/src/typography/Prose.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcProse } from '@arclux/arc-ui';
+
+export interface ProseProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Prose = createComponent({
+  tagName: 'arc-prose',
+  elementClass: ArcProse,
+  react: React,
+});

package/src/typography/TimeAgo.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcTimeAgo } from '@arclux/arc-ui';
+
+export interface TimeAgoProps {
+  datetime?: string;
+  live?: boolean;
+  locale?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const TimeAgo = createComponent({
+  tagName: 'arc-time-ago',
+  elementClass: ArcTimeAgo,
+  react: React,
+});

package/src/typography/Typewriter.ts

@@ -0,0 +1,27 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { ArcTypewriter } from '@arclux/arc-ui';
+
+export interface TypewriterProps {
+  text?: string;
+  speed?: number;
+  delay?: number;
+  cursor?: boolean;
+  loop?: boolean;
+  _displayText?: string;
+  _complete?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onArcComplete?: (e: CustomEvent) => void;
+}
+
+export const Typewriter = createComponent({
+  tagName: 'arc-typewriter',
+  elementClass: ArcTypewriter,
+  react: React,
+  events: {
+    onArcComplete: 'arc-complete' as EventName<CustomEvent>,
+  },
+});