@arclux/arc-ui-preact 1.10.2 → 2.0.0

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@arclux/arc-ui-preact",
-  "version": "1.10.2",
+  "version": "2.0.0",
   "description": "Preact wrappers for ARC UI Web Components.",
+  "sideEffects": false,
   "type": "module",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -39,12 +40,11 @@
   "files": [
     "src/"
   ],
-  "sideEffects": false,
   "peerDependencies": {
     "preact": ">=10.19.0"
   },
   "dependencies": {
-    "@arclux/arc-ui": "1.10.2"
+    "@arclux/arc-ui": "2.0.0"
   },
   "license": "MIT",
   "keywords": [

package/src/data/Comparison.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ComparisonProps {
+  features?: string;
+  _columns?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Comparison: FunctionComponent<ComparisonProps> = ({ features, _columns, children, ...rest }) => (
+  <arc-comparison features={features} _columns={_columns} {...rest}>
+    {children}
+  </arc-comparison>
+);

package/src/data/ComparisonColumn.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ComparisonColumnProps {
+  heading?: string;
+  highlight?: boolean;
+  values?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ComparisonColumn: FunctionComponent<ComparisonColumnProps> = ({ heading, highlight, values, children, ...rest }) => (
+  <arc-comparison-column heading={heading} highlight={highlight} values={values} {...rest}>
+    {children}
+  </arc-comparison-column>
+);

package/src/data/CountdownTimer.tsx

@@ -0,0 +1,24 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface CountdownTimerProps {
+  target?: string;
+  label?: string;
+  expired?: string;
+  hideZeroSegments?: boolean;
+  _days?: string;
+  _hours?: string;
+  _minutes?: string;
+  _seconds?: string;
+  _expired?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const CountdownTimer: FunctionComponent<CountdownTimerProps> = ({ target, label, expired, hideZeroSegments, _days, _hours, _minutes, _seconds, _expired, children, ...rest }) => (
+  <arc-countdown-timer target={target} label={label} expired={expired} hideZeroSegments={hideZeroSegments} _days={_days} _hours={_hours} _minutes={_minutes} _seconds={_seconds} _expired={_expired} {...rest}>
+    {children}
+  </arc-countdown-timer>
+);

package/src/data/DescriptionItem.tsx

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface DescriptionItemProps {
+  term?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const DescriptionItem: FunctionComponent<DescriptionItemProps> = ({ term, children, ...rest }) => (
+  <arc-description-item term={term} {...rest}>
+    {children}
+  </arc-description-item>
+);

package/src/data/DescriptionList.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface DescriptionListProps {
+  columns?: number;
+  dividers?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const DescriptionList: FunctionComponent<DescriptionListProps> = ({ columns, dividers, children, ...rest }) => (
+  <arc-description-list columns={columns} dividers={dividers} {...rest}>
+    {children}
+  </arc-description-list>
+);

package/src/data/Diff.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface DiffProps {
+  before?: string;
+  after?: string;
+  mode?: 'side-by-side';
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Diff: FunctionComponent<DiffProps> = ({ before, after, mode, children, ...rest }) => (
+  <arc-diff before={before} after={after} mode={mode} {...rest}>
+    {children}
+  </arc-diff>
+);

package/src/data/KeyValue.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface KeyValueProps {
+  layout?: 'horizontal' | 'stacked';
+  dividers?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const KeyValue: FunctionComponent<KeyValueProps> = ({ layout, dividers, children, ...rest }) => (
+  <arc-key-value layout={layout} dividers={dividers} {...rest}>
+    {children}
+  </arc-key-value>
+);

package/src/data/KvPair.tsx

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface KvPairProps {
+  label?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const KvPair: FunctionComponent<KvPairProps> = ({ label, children, ...rest }) => (
+  <arc-kv-pair label={label} {...rest}>
+    {children}
+  </arc-kv-pair>
+);

package/src/data/Sparkline.tsx

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface SparklineProps {
+  data?: string;
+  type?: string;
+  color?: string;
+  width?: number;
+  height?: number;
+  fill?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Sparkline: FunctionComponent<SparklineProps> = ({ data, type, color, width, height, fill, children, ...rest }) => (
+  <arc-sparkline data={data} type={type} color={color} width={width} height={height} fill={fill} {...rest}>
+    {children}
+  </arc-sparkline>
+);

package/src/index.ts

@@ -381,3 +381,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/RangeSlider.tsx

@@ -0,0 +1,24 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface RangeSliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  low?: number;
+  high?: number;
+  disabled?: boolean;
+  label?: string;
+  showValues?: boolean;
+  _dragging?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const RangeSlider: FunctionComponent<RangeSliderProps> = ({ min, max, step, low, high, disabled, label, showValues, _dragging, children, ...rest }) => (
+  <arc-range-slider min={min} max={max} step={step} low={low} high={high} disabled={disabled} label={label} showValues={showValues} _dragging={_dragging} {...rest}>
+    {children}
+  </arc-range-slider>
+);

package/src/input/TimePicker.tsx

@@ -0,0 +1,28 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@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;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const TimePicker: FunctionComponent<TimePickerProps> = ({ value, min, max, step, format, placeholder, disabled, label, _open, _selectedHour, _selectedMinute, _selectedPeriod, _focusedColumn, children, ...rest }) => (
+  <arc-time-picker value={value} min={min} max={max} step={step} format={format} placeholder={placeholder} disabled={disabled} label={label} _open={_open} _selectedHour={_selectedHour} _selectedMinute={_selectedMinute} _selectedPeriod={_selectedPeriod} _focusedColumn={_focusedColumn} {...rest}>
+    {children}
+  </arc-time-picker>
+);

package/src/navigation/Footer.tsx

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

package/src/navigation/SidebarLink.tsx

@@ -6,12 +6,13 @@ import '@arclux/arc-ui';
 export interface SidebarLinkProps {
   href?: string;
   active?: boolean;
+  level?: number;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const SidebarLink: FunctionComponent<SidebarLinkProps> = ({ href, active, children, ...rest }) => (
-  <arc-sidebar-link href={href} active={active} {...rest}>
+export const SidebarLink: FunctionComponent<SidebarLinkProps> = ({ href, active, level, children, ...rest }) => (
+  <arc-sidebar-link href={href} active={active} level={level} {...rest}>
     {children}
   </arc-sidebar-link>
 );

package/src/navigation/SpyLink.tsx

@@ -5,12 +5,13 @@ import '@arclux/arc-ui';
 
 export interface SpyLinkProps {
   target?: string;
+  level?: number;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const SpyLink: FunctionComponent<SpyLinkProps> = ({ target, children, ...rest }) => (
-  <arc-spy-link target={target} {...rest}>
+export const SpyLink: FunctionComponent<SpyLinkProps> = ({ target, level, children, ...rest }) => (
+  <arc-spy-link target={target} level={level} {...rest}>
     {children}
   </arc-spy-link>
 );

package/src/navigation/Tabs.tsx

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

package/src/typography/Blockquote.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface BlockquoteProps {
+  cite?: string;
+  variant?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Blockquote: FunctionComponent<BlockquoteProps> = ({ cite, variant, children, ...rest }) => (
+  <arc-blockquote cite={cite} variant={variant} {...rest}>
+    {children}
+  </arc-blockquote>
+);

package/src/typography/GradientText.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface GradientTextProps {
+  variant?: 'accent' | 'display' | 'sunset' | 'ocean';
+  gradient?: string;
+  animate?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const GradientText: FunctionComponent<GradientTextProps> = ({ variant, gradient, animate, children, ...rest }) => (
+  <arc-gradient-text variant={variant} gradient={gradient} animate={animate} {...rest}>
+    {children}
+  </arc-gradient-text>
+);

package/src/typography/NumberFormat.tsx

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface NumberFormatProps {
+  value?: number;
+  type?: string;
+  locale?: string;
+  currency?: string;
+  decimals?: number;
+  notation?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const NumberFormat: FunctionComponent<NumberFormatProps> = ({ value, type, locale, currency, decimals, notation, children, ...rest }) => (
+  <arc-number-format value={value} type={type} locale={locale} currency={currency} decimals={decimals} notation={notation} {...rest}>
+    {children}
+  </arc-number-format>
+);

package/src/typography/Prose.tsx

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ProseProps {
+  size?: 'sm' | 'md' | 'lg';
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Prose: FunctionComponent<ProseProps> = ({ size, children, ...rest }) => (
+  <arc-prose size={size} {...rest}>
+    {children}
+  </arc-prose>
+);

package/src/typography/TimeAgo.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface TimeAgoProps {
+  datetime?: string;
+  live?: boolean;
+  locale?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const TimeAgo: FunctionComponent<TimeAgoProps> = ({ datetime, live, locale, children, ...rest }) => (
+  <arc-time-ago datetime={datetime} live={live} locale={locale} {...rest}>
+    {children}
+  </arc-time-ago>
+);

package/src/typography/Typewriter.tsx

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface TypewriterProps {
+  text?: string;
+  speed?: number;
+  delay?: number;
+  cursor?: boolean;
+  loop?: boolean;
+  _displayText?: string;
+  _complete?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Typewriter: FunctionComponent<TypewriterProps> = ({ text, speed, delay, cursor, loop, _displayText, _complete, children, ...rest }) => (
+  <arc-typewriter text={text} speed={speed} delay={delay} cursor={cursor} loop={loop} _displayText={_displayText} _complete={_complete} {...rest}>
+    {children}
+  </arc-typewriter>
+);