@use-voltra/ios 2.0.0 → 2.1.0

package/src/jsx/Toggle.tsx

@@ -0,0 +1,5 @@
+import { createVoltraComponent } from './createVoltraComponent.js'
+import type { ToggleProps } from './props/Toggle.js'
+
+export type { ToggleProps }
+export const Toggle = createVoltraComponent<ToggleProps>('Toggle')

package/src/jsx/VStack.tsx

@@ -0,0 +1,5 @@
+import { createVoltraComponent } from './createVoltraComponent.js'
+import type { VStackProps } from './props/VStack.js'
+
+export type { VStackProps }
+export const VStack = createVoltraComponent<VStackProps>('VStack')

package/src/jsx/View.tsx

@@ -0,0 +1,5 @@
+import { createVoltraComponent } from './createVoltraComponent.js'
+import type { ViewProps } from './props/View.js'
+
+export type { ViewProps }
+export const View = createVoltraComponent<ViewProps>('View')

package/src/jsx/ZStack.tsx

@@ -0,0 +1,5 @@
+import { createVoltraComponent } from './createVoltraComponent.js'
+import type { ZStackProps } from './props/ZStack.js'
+
+export type { ZStackProps }
+export const ZStack = createVoltraComponent<ZStackProps>('ZStack')

package/src/jsx/baseProps.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+import type { VoltraStyleProp } from '../styles/index.js'
+
+export type VoltraBaseProps = {
+  id?: string
+  style?: VoltraStyleProp
+  children?: ReactNode
+}

package/src/jsx/chart-types.ts

@@ -0,0 +1,2 @@
+export type ChartDataPoint = { x: string | number; y: number; series?: string }
+export type SectorDataPoint = { value: number; category: string }

package/src/jsx/createVoltraComponent.ts

@@ -0,0 +1,2 @@
+export { createVoltraComponent, isVoltraComponent, VOLTRA_COMPONENT_TAG } from '@use-voltra/core'
+export type { VoltraComponent, VoltraComponentOptions } from '@use-voltra/core'

package/src/jsx/font.ts

@@ -0,0 +1,45 @@
+export type VoltraFont = {
+  readonly __voltraFontId: string
+  readonly name?: string
+  readonly size: number
+  readonly weight?: string
+  readonly family?: string
+  readonly smallCaps?: boolean
+  readonly monospacedDigit?: boolean
+  readonly italic?: boolean
+}
+
+let fontIdCounter = 0
+
+export function createFont(options: {
+  name?: string
+  size: number
+  weight?: string
+  family?: string
+  smallCaps?: boolean
+  monospacedDigit?: boolean
+  italic?: boolean
+}): VoltraFont {
+  // Use numeric ID (0, 1, 2, ...) for smallest payload size
+  const id = String(fontIdCounter++)
+
+  return {
+    __voltraFontId: id,
+    name: options.name,
+    size: options.size,
+    weight: options.weight,
+    family: options.family,
+    smallCaps: options.smallCaps,
+    monospacedDigit: options.monospacedDigit,
+    italic: options.italic,
+  }
+}
+
+export function isVoltraFont(value: unknown): value is VoltraFont {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    '__voltraFontId' in value &&
+    typeof (value as any).__voltraFontId === 'string'
+  )
+}

package/src/jsx/index.ts

@@ -0,0 +1,2 @@
+export type { VoltraBaseProps } from './baseProps'
+export * from './createVoltraComponent.js'

package/src/jsx/primitives.ts

@@ -0,0 +1,29 @@
+export * from './AreaMark.js'
+export * from './BarMark.js'
+export * from './Button.js'
+export * from './Chart.js'
+export * from './chart-types.js'
+export * from './CircularProgressView.js'
+export * from './Divider.js'
+export * from './Gauge.js'
+export * from './GlassContainer.js'
+export * from './GroupBox.js'
+export * from './HStack.js'
+export * from './Image.js'
+export * from './Label.js'
+export * from './LinearGradient.js'
+export * from './LinearProgressView.js'
+export * from './LineMark.js'
+export * from './Link.js'
+export * from './Mask.js'
+export * from './PointMark.js'
+export * from './RuleMark.js'
+export * from './SectorMark.js'
+export * from './Spacer.js'
+export * from './Symbol.js'
+export * from './Text.js'
+export * from './Timer.js'
+export * from './Toggle.js'
+export * from './View.js'
+export * from './VStack.js'
+export * from './ZStack.js'

package/src/jsx/props/.generated

@@ -0,0 +1,15 @@
+This directory contains auto-generated iOS component props type files.
+DO NOT EDIT MANUALLY.
+
+Generated from: data/components.json
+Schema version: 1.0.0
+
+To regenerate these files, run:
+  pnpm run generate
+
+Users should create component files manually using createVoltraComponent with these types.
+Example:
+  import { createVoltraComponent } from '../createVoltraComponent'
+  import type { ButtonProps } from './props/Button'
+
+  export const Button = createVoltraComponent<ButtonProps>('Button')

package/src/jsx/props/Button.ts

@@ -0,0 +1,10 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type ButtonProps = VoltraBaseProps & {
+  /** Visual style of the button */
+  buttonStyle?: 'automatic' | 'bordered' | 'borderedProminent' | 'plain' | 'borderless'
+}

package/src/jsx/props/Chart.ts

@@ -0,0 +1,22 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type ChartProps = VoltraBaseProps & {
+  /** Compact mark data encoded from children by toJSON */
+  marks?: string
+  /** Show or hide the x-axis */
+  xAxisVisibility?: 'automatic' | 'visible' | 'hidden'
+  /** Configure x-axis grid line style */
+  xAxisGridStyle?: Record<string, any>
+  /** Show or hide the y-axis */
+  yAxisVisibility?: 'automatic' | 'visible' | 'hidden'
+  /** Configure y-axis grid line style */
+  yAxisGridStyle?: Record<string, any>
+  /** Show or hide the chart legend */
+  legendVisibility?: 'automatic' | 'visible' | 'hidden'
+  /** Map of series name to color string */
+  foregroundStyleScale?: Record<string, any>
+}

package/src/jsx/props/CircularProgressView.ts

@@ -0,0 +1,30 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { ReactNode } from 'react'
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type CircularProgressViewProps = VoltraBaseProps & {
+  /** Current progress value */
+  value?: number
+  /** Whether to count down instead of up */
+  countDown?: boolean
+  /** Maximum progress value */
+  maximumValue?: number
+  /** End time in milliseconds since epoch */
+  endAtMs?: number
+  /** Start time in milliseconds since epoch */
+  startAtMs?: number
+  /** Color for the track (background) of the circular progress indicator */
+  trackColor?: string
+  /** Color for the progress fill */
+  progressColor?: string
+  /** Width of the stroke line */
+  lineWidth?: number
+  /** Label content for the progress indicator */
+  label?: ReactNode
+  /** Custom text for current value label */
+  currentValueLabel?: ReactNode
+}

package/src/jsx/props/Divider.ts

@@ -0,0 +1,7 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type DividerProps = VoltraBaseProps

package/src/jsx/props/Gauge.ts

@@ -0,0 +1,36 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { ReactNode } from 'react'
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type GaugeProps = VoltraBaseProps & {
+  /** Current gauge value */
+  value?: number
+  /** Minimum value of the gauge range */
+  minimumValue?: number
+  /** Maximum value of the gauge range */
+  maximumValue?: number
+  /** End time in milliseconds since epoch */
+  endAtMs?: number
+  /** Start time in milliseconds since epoch */
+  startAtMs?: number
+  /** Tint color for the gauge */
+  tintColor?: string
+  /** Visual style of the gauge */
+  gaugeStyle?:
+    | 'automatic'
+    | 'accessoryLinear'
+    | 'accessoryLinearCapacity'
+    | 'accessoryCircular'
+    | 'accessoryCircularCapacity'
+    | 'linearCapacity'
+  /** Custom text for current value label */
+  currentValueLabel?: ReactNode
+  /** Text for minimum value label */
+  minimumValueLabel?: ReactNode
+  /** Text for maximum value label */
+  maximumValueLabel?: ReactNode
+}

package/src/jsx/props/GlassContainer.ts

@@ -0,0 +1,10 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type GlassContainerProps = VoltraBaseProps & {
+  /** Spacing between glass elements */
+  spacing?: number
+}

package/src/jsx/props/GroupBox.ts

@@ -0,0 +1,12 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { ReactNode } from 'react'
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type GroupBoxProps = VoltraBaseProps & {
+  /** Label content for the group box */
+  label?: ReactNode
+}

package/src/jsx/props/HStack.ts

@@ -0,0 +1,14 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type HStackProps = VoltraBaseProps & {
+  /** Vertical alignment */
+  alignment?: 'top' | 'center' | 'bottom'
+  /** Layout mode. 'stack' uses native SwiftUI stacks. 'flex' uses RN-like flexbox. */
+  layout?: 'stack' | 'flex'
+  /** Spacing between children. Takes precedence over gap style property. */
+  spacing?: number
+}

package/src/jsx/props/Image.ts

@@ -0,0 +1,18 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { ReactNode } from 'react'
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type ImageProps = VoltraBaseProps & {
+  /** Image source - either { assetName: string } for asset catalog images or { base64: string } for base64 encoded images */
+  source?: Record<string, any>
+  /** How the image should be resized to fit its container */
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center'
+  /** iOS 18+ Home Screen widgets only. Controls how the image is rendered when the widget is in an accented (tinted) or vibrant rendering mode. Use 'fullColor' to opt the image out of the system's desaturation so it keeps its original colors on top of the tinted backdrop. No-op outside of accented/vibrant rendering modes. */
+  accentedRenderingMode?: 'fullColor' | 'accented' | 'accentedDesaturated' | 'desaturated'
+  /** Custom fallback content rendered when the image is missing */
+  fallback?: ReactNode
+}

package/src/jsx/props/Label.ts

@@ -0,0 +1,12 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type LabelProps = VoltraBaseProps & {
+  /** Text content for the label */
+  title?: string
+  /** SF Symbol name for the label icon */
+  systemImage?: string
+}

package/src/jsx/props/LinearGradient.ts

@@ -0,0 +1,18 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type LinearGradientProps = VoltraBaseProps & {
+  /** Pipe-separated color list (e.g., '#ff0000|#00ff00|#0000ff') */
+  colors?: string
+  /** Pipe-separated gradient stops (e.g., 'red@0|orange@0.5|yellow@1') */
+  stops?: string
+  /** Start point (e.g., 'topLeading', 'center', or 'x,y') */
+  startPoint?: string
+  /** End point (e.g., 'bottomTrailing', 'center', or 'x,y') */
+  endPoint?: string
+  /** Enable dithering (system-controlled) */
+  dither?: boolean
+}

package/src/jsx/props/LinearProgressView.ts

@@ -0,0 +1,34 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { ReactNode } from 'react'
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type LinearProgressViewProps = VoltraBaseProps & {
+  /** Current progress value */
+  value?: number
+  /** Whether to count down instead of up */
+  countDown?: boolean
+  /** Maximum progress value */
+  maximumValue?: number
+  /** End time in milliseconds since epoch */
+  endAtMs?: number
+  /** Start time in milliseconds since epoch */
+  startAtMs?: number
+  /** Color for the track (background) of the progress bar */
+  trackColor?: string
+  /** Color for the progress fill */
+  progressColor?: string
+  /** Corner radius for the progress bar */
+  cornerRadius?: number
+  /** Explicit height for the progress bar */
+  height?: number
+  /** Custom thumb component to display at progress position */
+  thumb?: ReactNode
+  /** Label content for the progress indicator */
+  label?: ReactNode
+  /** Custom text for current value label */
+  currentValueLabel?: ReactNode
+}

package/src/jsx/props/Link.ts

@@ -0,0 +1,10 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type LinkProps = VoltraBaseProps & {
+  /** URL to navigate to when the link is tapped */
+  destination: string
+}

package/src/jsx/props/Mask.ts

@@ -0,0 +1,12 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { ReactNode } from 'react'
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type MaskProps = VoltraBaseProps & {
+  /** Voltra element used as the mask - alpha channel determines visibility */
+  maskElement: ReactNode
+}

package/src/jsx/props/Spacer.ts

@@ -0,0 +1,10 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type SpacerProps = VoltraBaseProps & {
+  /** Minimum length */
+  minLength?: number
+}

package/src/jsx/props/Symbol.ts

@@ -0,0 +1,34 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type SymbolProps = VoltraBaseProps & {
+  /** SF Symbol name */
+  name?: string
+  /** Symbol rendering type */
+  type?: 'monochrome' | 'hierarchical' | 'palette' | 'multicolor'
+  /** Symbol scale */
+  scale?: 'default' | 'unspecified' | 'small' | 'medium' | 'large'
+  /** Symbol weight */
+  weight?:
+    | 'unspecified'
+    | 'ultraLight'
+    | 'thin'
+    | 'light'
+    | 'regular'
+    | 'medium'
+    | 'semibold'
+    | 'bold'
+    | 'heavy'
+    | 'black'
+  /** Symbol size in points */
+  size?: number
+  /** Tint color for the symbol */
+  tintColor?: string
+  /** Pipe-separated colors for palette type */
+  colors?: string
+  /** Image resize mode */
+  resizeMode?: string
+}

package/src/jsx/props/Text.ts

@@ -0,0 +1,12 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type TextProps = VoltraBaseProps & {
+  /** Maximum number of lines to display */
+  numberOfLines?: number
+  /** Text alignment for multiline text */
+  multilineTextAlignment?: 'left' | 'center' | 'right' | 'auto'
+}

package/src/jsx/props/Timer.ts

@@ -0,0 +1,22 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type TimerProps = VoltraBaseProps & {
+  /** End time in milliseconds since epoch */
+  endAtMs?: number
+  /** Start time in milliseconds since epoch */
+  startAtMs?: number
+  /** Duration in milliseconds */
+  durationMs?: number
+  /** Count direction */
+  direction?: 'up' | 'down'
+  /** Text formatting style */
+  textStyle?: 'timer' | 'relative'
+  /** JSON-encoded TextTemplates object with running/completed templates */
+  textTemplates?: string
+  /** Whether to show hours component when duration exceeds 60 minutes. If false, minutes will exceed 60 (e.g., 94:00 instead of 1:34:00) */
+  showHours?: boolean
+}

package/src/jsx/props/Toggle.ts

@@ -0,0 +1,10 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type ToggleProps = VoltraBaseProps & {
+  /** Initial toggle state */
+  defaultValue?: boolean
+}

package/src/jsx/props/VStack.ts

@@ -0,0 +1,14 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type VStackProps = VoltraBaseProps & {
+  /** Horizontal alignment */
+  alignment?: 'leading' | 'center' | 'trailing'
+  /** Layout mode. 'stack' uses native SwiftUI stacks. 'flex' uses RN-like flexbox. */
+  layout?: 'stack' | 'flex'
+  /** Spacing between children. Takes precedence over gap style property. */
+  spacing?: number
+}

package/src/jsx/props/View.ts

@@ -0,0 +1,7 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type ViewProps = VoltraBaseProps

package/src/jsx/props/ZStack.ts

@@ -0,0 +1,10 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type ZStackProps = VoltraBaseProps & {
+  /** Child alignment */
+  alignment?: string
+}

package/src/live-activity/renderer.ts

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react'
+
+import { createVoltraRenderer } from '../renderer/index.js'
+import type { LiveActivityJson, LiveActivityVariants } from './types.js'
+
+/**
+ * Renders Live Activity variants to JSON.
+ * Handles non-JSX properties like keylineTint and activityBackgroundTint separately.
+ */
+export const renderLiveActivityToJson = (variants: LiveActivityVariants): LiveActivityJson => {
+  const renderer = createVoltraRenderer()
+
+  // Add lock screen variant
+  if (variants.lockScreen) {
+    const lockScreenVariant = variants.lockScreen
+    if (typeof lockScreenVariant === 'object' && lockScreenVariant !== null && 'content' in lockScreenVariant) {
+      if (lockScreenVariant.content) {
+        renderer.addRootNode('ls', lockScreenVariant.content)
+      }
+    } else {
+      renderer.addRootNode('ls', lockScreenVariant as ReactNode)
+    }
+  }
+
+  // Add island variants
+  if (variants.island) {
+    if (variants.island.expanded) {
+      if (variants.island.expanded.center) {
+        renderer.addRootNode('isl_exp_c', variants.island.expanded.center)
+      }
+      if (variants.island.expanded.leading) {
+        renderer.addRootNode('isl_exp_l', variants.island.expanded.leading)
+      }
+      if (variants.island.expanded.trailing) {
+        renderer.addRootNode('isl_exp_t', variants.island.expanded.trailing)
+      }
+      if (variants.island.expanded.bottom) {
+        renderer.addRootNode('isl_exp_b', variants.island.expanded.bottom)
+      }
+    }
+    if (variants.island.compact) {
+      if (variants.island.compact.leading) {
+        renderer.addRootNode('isl_cmp_l', variants.island.compact.leading)
+      }
+      if (variants.island.compact.trailing) {
+        renderer.addRootNode('isl_cmp_t', variants.island.compact.trailing)
+      }
+    }
+    if (variants.island.minimal) {
+      renderer.addRootNode('isl_min', variants.island.minimal)
+    }
+  }
+
+  // Add supplemental activity family variants (iOS 18+)
+  if (variants.supplementalActivityFamilies?.small) {
+    renderer.addRootNode('saf_sm', variants.supplementalActivityFamilies.small)
+  }
+
+  // Render all variants
+  const result = renderer.render() as LiveActivityJson
+
+  // Add non-JSX properties after rendering
+  if (
+    variants.lockScreen &&
+    typeof variants.lockScreen === 'object' &&
+    'activityBackgroundTint' in variants.lockScreen
+  ) {
+    if (variants.lockScreen.activityBackgroundTint) {
+      result.ls_background_tint = variants.lockScreen.activityBackgroundTint
+    }
+  }
+
+  if (variants.island?.keylineTint) {
+    result.isl_keyline_tint = variants.island.keylineTint
+  }
+
+  return result
+}
+
+/**
+ * Renders Live Activity variants to a JSON string.
+ */
+export const renderLiveActivityToString = (variants: LiveActivityVariants): string => {
+  return JSON.stringify(renderLiveActivityToJson(variants))
+}