deskforge 1.0.0

package/packages/ui/src/input/Button.ts

@@ -0,0 +1,104 @@
+// Button.ts
+// The primary interactive component.
+// Every tap, click, and press in DeskForge
+// goes through Button or a component built on it.
+// Micro animations applied automatically by Skia.
+// Press scale, hover brightness — zero developer effort.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+import type { DFEvent } from '@deskforge/state'
+
+// Button visual variants
+type ButtonVariant = 'filled' | 'outline' | 'ghost' | 'danger'
+
+// Button size presets
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+// Icon position relative to label
+type IconPosition = 'left' | 'right'
+
+// Props for the Button component
+interface ButtonProps {
+  // Visual style variant
+  variant?:      ButtonVariant
+
+  // Size preset
+  size?:         ButtonSize
+
+  // Icon name from icon set
+  icon?:         string
+
+  // Icon position relative to label
+  iconPosition?: IconPosition
+
+  // Whether button is disabled
+  disabled?:     boolean
+
+  // Whether to show loading spinner
+  // Disables button and shows spinner automatically
+  loading?:      boolean
+
+  // Whether button fills container width
+  fullWidth?:    boolean
+
+  // Background color override
+  background?:   string
+
+  // Text color override
+  color?:        string
+
+  // Border radius override
+  radius?:       number | string
+
+  // Padding override
+  padding?:      number | string
+
+  // Opacity 0 to 1
+  opacity?:      number
+
+  // Called when button is tapped or clicked
+  onClick?:      (event: DFEvent) => void
+
+  // Tooltip shown on hover
+  tooltip?:      string
+
+  // Flex weight
+  flex?:         number
+}
+
+// Creates a button node
+// label — text displayed on the button
+// props — button configuration
+function Button(
+  label: string,
+  props: ButtonProps = {}
+): DFNode {
+  return createNode('Button', {
+    label:        label,
+    variant:      props.variant       ?? 'filled',
+    size:         props.size          ?? 'md',
+    icon:         props.icon,
+    iconPosition: props.iconPosition  ?? 'left',
+    disabled:     props.disabled      ?? false,
+    loading:      props.loading       ?? false,
+    fullWidth:    props.fullWidth     ?? false,
+    background:   props.background,
+    color:        props.color,
+    radius:       props.radius        ?? 'md',
+    padding:      props.padding,
+    opacity:      props.opacity       ?? 1,
+    onClick:      props.onClick,
+    tooltip:      props.tooltip,
+    flex:         props.flex,
+
+    // Micro animations — handled by renderer automatically
+    // Press scale down — release spring back
+    pressScale:   0.97,
+    hoverScale:   1.02,
+    animDuration: 150,
+  } as Record<string, unknown>, [])
+}
+
+export type { ButtonVariant, ButtonSize, IconPosition, ButtonProps }
+export { Button }

package/packages/ui/src/input/Checkbox.ts

@@ -0,0 +1,58 @@
+// Checkbox.ts
+// Boolean toggle component shown as a checkbox.
+// Checkmark animates in when checked.
+// Supports indeterminate state for select-all patterns.
+// Two-way state binding via the bind prop.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Props for the Checkbox component
+interface CheckboxProps {
+  // Display label next to checkbox
+  label?:         string
+
+  // Two-way state binding key
+  bind?:          string
+
+  // Controlled checked state
+  checked?:       boolean
+
+  // Indeterminate state — shown as dash
+  // Used when some but not all items are selected
+  indeterminate?: boolean
+
+  // Whether checkbox is disabled
+  disabled?:      boolean
+
+  // Checkbox color when checked
+  color?:         string
+
+  // Label position
+  labelPosition?: 'left' | 'right'
+
+  // Called when checked state changes
+  onChange?:      (checked: boolean) => void
+
+  // Size of the checkbox
+  size?:          'sm' | 'md' | 'lg'
+}
+
+// Creates a checkbox node
+// props — checkbox configuration
+function Checkbox(props: CheckboxProps = {}): DFNode {
+  return createNode('Checkbox', {
+    label:         props.label,
+    bind:          props.bind,
+    checked:       props.checked       ?? false,
+    indeterminate: props.indeterminate ?? false,
+    disabled:      props.disabled      ?? false,
+    color:         props.color         ?? 'primary',
+    labelPosition: props.labelPosition ?? 'right',
+    onChange:      props.onChange,
+    size:          props.size          ?? 'md',
+  } as Record<string, unknown>, [])
+}
+
+export type { CheckboxProps }
+export { Checkbox }

package/packages/ui/src/input/Dropdown.ts

@@ -0,0 +1,92 @@
+// Dropdown.ts
+// Select one option from a list.
+// Opens a Skia-rendered dropdown panel.
+// Supports search filtering for long lists.
+// Two-way state binding via bind prop.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// A single dropdown option
+interface DropdownOption {
+  // Display label shown in the list
+  label: string
+
+  // Value stored when this option is selected
+  value: unknown
+
+  // Optional icon name
+  icon?:     string
+
+  // Whether this option is disabled
+  disabled?: boolean
+}
+
+// Props for the Dropdown component
+interface DropdownProps {
+  // Available options to choose from
+  options:      DropdownOption[]
+
+  // Two-way state binding key
+  bind?:        string
+
+  // Controlled selected value
+  value?:       unknown
+
+  // Placeholder shown when nothing selected
+  placeholder?: string
+
+  // Label shown above dropdown
+  label?:       string
+
+  // Whether options are searchable
+  searchable?:  boolean
+
+  // Whether dropdown is disabled
+  disabled?:    boolean
+
+  // Error message
+  error?:       string
+
+  // Width of the dropdown
+  width?:       number | string
+
+  // Flex weight
+  flex?:        number
+
+  // Called when selection changes
+  onChange?:    (value: unknown, option: DropdownOption) => void
+
+  // Background color
+  background?:  string
+
+  // Border radius
+  radius?:      number | string
+
+  // Max height of dropdown panel
+  maxHeight?:   number
+}
+
+// Creates a dropdown select node
+// props — dropdown configuration
+function Dropdown(props: DropdownProps): DFNode {
+  return createNode('Dropdown', {
+    options:     props.options,
+    bind:        props.bind,
+    value:       props.value,
+    placeholder: props.placeholder  ?? 'Select...',
+    label:       props.label,
+    searchable:  props.searchable   ?? false,
+    disabled:    props.disabled     ?? false,
+    error:       props.error,
+    width:       props.width        ?? '100%',
+    flex:        props.flex,
+    onChange:    props.onChange,
+    background:  props.background   ?? 'surface',
+    radius:      props.radius       ?? 'md',
+    maxHeight:   props.maxHeight    ?? 300,
+  } as Record<string, unknown>, [])
+}
+
+export type { DropdownOption, DropdownProps }
+export { Dropdown }

package/packages/ui/src/input/Input.ts

@@ -0,0 +1,138 @@
+// Input.ts
+// Text input component.
+// Supports single line and multiline modes.
+// Two-way state binding via the bind prop.
+// Validation built in — no external library needed.
+// Label floats up on focus automatically.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Input field types
+type InputType =
+  | 'text'
+  | 'password'
+  | 'number'
+  | 'email'
+  | 'phone'
+  | 'url'
+  | 'search'
+
+// Props for the Input component
+interface InputProps {
+  // Two-way state binding key
+  // e.g. bind: 'noteText' binds to state.noteText
+  bind?:        string
+
+  // Controlled value — use with onChange
+  value?:       string | number
+
+  // Placeholder text shown when empty
+  placeholder?: string
+
+  // Label shown above or floating
+  label?:       string
+
+  // Hint text shown below input
+  hint?:        string
+
+  // Error message — shown in red below input
+  error?:       string
+
+  // Input type
+  type?:        InputType
+
+  // Whether input accepts multiple lines
+  multiline?:   boolean
+
+  // Number of visible rows in multiline mode
+  rows?:        number
+
+  // Prefix shown inside input on left
+  prefix?:      string
+
+  // Suffix shown inside input on right
+  suffix?:      string
+
+  // Icon name shown inside input
+  icon?:        string
+
+  // Whether input is disabled
+  disabled?:    boolean
+
+  // Whether input is read only
+  readonly?:    boolean
+
+  // Whether input is required
+  required?:    boolean
+
+  // Validation function
+  // Return true if valid or error string if invalid
+  validate?:    (value: string) => boolean | string
+
+  // Max character length
+  maxLength?:   number
+
+  // Called when value changes
+  onChange?:    (value: string) => void
+
+  // Called when input receives focus
+  onFocus?:     () => void
+
+  // Called when input loses focus
+  onBlur?:      () => void
+
+  // Called when Enter key pressed
+  onSubmit?:    () => void
+
+  // Background color
+  background?:  string
+
+  // Border radius
+  radius?:      number | string
+
+  // Width
+  width?:       number | string
+
+  // Flex weight
+  flex?:        number
+
+  // Auto focus on mount
+  autoFocus?:   boolean
+}
+
+// Creates a text input node
+// props — input configuration
+function Input(props: InputProps = {}): DFNode {
+  return createNode('Input', {
+    bind:        props.bind,
+    value:       props.value,
+    placeholder: props.placeholder,
+    label:       props.label,
+    hint:        props.hint,
+    error:       props.error,
+    type:        props.type        ?? 'text',
+    multiline:   props.multiline   ?? false,
+    rows:        props.rows        ?? 4,
+    prefix:      props.prefix,
+    suffix:      props.suffix,
+    icon:        props.icon,
+    disabled:    props.disabled    ?? false,
+    readonly:    props.readonly    ?? false,
+    required:    props.required    ?? false,
+    validate:    props.validate,
+    maxLength:   props.maxLength,
+    onChange:    props.onChange,
+    onFocus:     props.onFocus,
+    onBlur:      props.onBlur,
+    onSubmit:    props.onSubmit,
+    background:  props.background  ?? 'surface',
+    radius:      props.radius      ?? 'md',
+    width:       props.width       ?? '100%',
+    flex:        props.flex,
+    autoFocus:   props.autoFocus   ?? false,
+  } as Record<string, unknown>, [])
+}
+
+export type { InputType, InputProps }
+export { Input }

package/packages/ui/src/input/SearchBar.ts

@@ -0,0 +1,77 @@
+// SearchBar.ts
+// Dedicated search input component.
+// Shows search icon and clear button automatically.
+// Debounces input so search does not fire on every keystroke.
+// Two-way state binding via bind prop.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Props for the SearchBar component
+interface SearchBarProps {
+  // Two-way state binding key
+  bind?:         string
+
+  // Controlled value
+  value?:        string
+
+  // Placeholder text
+  placeholder?:  string
+
+  // Debounce delay in milliseconds
+  // Default 300ms — waits before calling onSearch
+  debounce?:     number
+
+  // Whether search bar is disabled
+  disabled?:     boolean
+
+  // Background color
+  background?:   string
+
+  // Border radius
+  radius?:       number | string
+
+  // Width
+  width?:        number | string
+
+  // Flex weight
+  flex?:         number
+
+  // Called when search value changes after debounce
+  onSearch?:     (query: string) => void
+
+  // Called when clear button is tapped
+  onClear?:      () => void
+
+  // Whether to show clear button when value exists
+  clearable?:    boolean
+
+  // Auto focus on mount
+  autoFocus?:    boolean
+}
+
+// Creates a search input node
+// props — search bar configuration
+function SearchBar(props: SearchBarProps = {}): DFNode {
+  return createNode('SearchBar', {
+    bind:        props.bind,
+    value:       props.value        ?? '',
+    placeholder: props.placeholder  ?? 'Search...',
+    debounce:    props.debounce     ?? 300,
+    disabled:    props.disabled     ?? false,
+    background:  props.background   ?? 'surface',
+    radius:      props.radius       ?? 'full',
+    width:       props.width        ?? '100%',
+    flex:        props.flex,
+    onSearch:    props.onSearch,
+    onClear:     props.onClear,
+    clearable:   props.clearable    ?? true,
+    autoFocus:   props.autoFocus    ?? false,
+
+    // Search icon shown on left automatically
+    icon:        'search',
+  } as Record<string, unknown>, [])
+}
+
+export type { SearchBarProps }
+export { SearchBar }

package/packages/ui/src/input/Slider.ts

@@ -0,0 +1,82 @@
+// Slider.ts
+// Range input component.
+// Drag thumb to select a value between min and max.
+// Supports step increments.
+// Value label shown above thumb optionally.
+// Two-way state binding via bind prop.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Props for the Slider component
+interface SliderProps {
+  // Minimum value
+  min?:          number
+
+  // Maximum value
+  max?:          number
+
+  // Step increment between values
+  step?:         number
+
+  // Two-way state binding key
+  bind?:         string
+
+  // Controlled value
+  value?:        number
+
+  // Whether to show value label above thumb
+  showValue?:    boolean
+
+  // Whether slider is disabled
+  disabled?:     boolean
+
+  // Track color
+  color?:        string
+
+  // Track background color
+  trackColor?:   string
+
+  // Track height in pixels
+  trackHeight?:  number
+
+  // Thumb size in pixels
+  thumbSize?:    number
+
+  // Width of the slider
+  width?:        number | string
+
+  // Called when value changes
+  onChange?:     (value: number) => void
+
+  // Called when user finishes dragging
+  onRelease?:    (value: number) => void
+
+  // Format function for displayed value
+  format?:       (value: number) => string
+}
+
+// Creates a range slider node
+// props — slider configuration
+function Slider(props: SliderProps = {}): DFNode {
+  return createNode('Slider', {
+    min:         props.min         ?? 0,
+    max:         props.max         ?? 100,
+    step:        props.step        ?? 1,
+    bind:        props.bind,
+    value:       props.value       ?? 0,
+    showValue:   props.showValue   ?? false,
+    disabled:    props.disabled    ?? false,
+    color:       props.color       ?? 'primary',
+    trackColor:  props.trackColor  ?? 'border',
+    trackHeight: props.trackHeight ?? 4,
+    thumbSize:   props.thumbSize   ?? 20,
+    width:       props.width       ?? '100%',
+    onChange:    props.onChange,
+    onRelease:   props.onRelease,
+    format:      props.format,
+  } as Record<string, unknown>, [])
+}
+
+export type { SliderProps }
+export { Slider }

package/packages/ui/src/input/Toggle.ts

@@ -0,0 +1,65 @@
+// Toggle.ts
+// On/off switch component.
+// Thumb slides smoothly when toggled.
+// Spring physics applied automatically by renderer.
+// Two-way state binding via the bind prop.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Props for the Toggle component
+interface ToggleProps {
+  // Display label next to toggle
+  label?:         string
+
+  // Two-way state binding key
+  bind?:          string
+
+  // Controlled checked state
+  checked?:       boolean
+
+  // Whether toggle is disabled
+  disabled?:      boolean
+
+  // Color when toggled on
+  color?:         string
+
+  // Color when toggled off
+  offColor?:      string
+
+  // Label position
+  labelPosition?: 'left' | 'right'
+
+  // Size preset
+  size?:          'sm' | 'md' | 'lg'
+
+  // Called when toggle state changes
+  onChange?:      (checked: boolean) => void
+
+  // Hint text shown below toggle
+  hint?:          string
+}
+
+// Creates a toggle switch node
+// props — toggle configuration
+function Toggle(props: ToggleProps = {}): DFNode {
+  return createNode('Toggle', {
+    label:         props.label,
+    bind:          props.bind,
+    checked:       props.checked       ?? false,
+    disabled:      props.disabled      ?? false,
+    color:         props.color         ?? 'primary',
+    offColor:      props.offColor      ?? 'border',
+    labelPosition: props.labelPosition ?? 'right',
+    size:          props.size          ?? 'md',
+    onChange:      props.onChange,
+    hint:          props.hint,
+
+    // Spring physics for thumb slide animation
+    springStiffness: 300,
+    springDamping:   25,
+  } as Record<string, unknown>, [])
+}
+
+export type { ToggleProps }
+export { Toggle }

package/packages/ui/src/input/index.ts

@@ -0,0 +1,10 @@
+// index.ts
+// Public door into the input components.
+
+export * from './Button'
+export * from './Input'
+export * from './Checkbox'
+export * from './Toggle'
+export * from './Slider'
+export * from './Dropdown'
+export * from './SearchBar'