twintrinsic 0.0.1

package/dist/components/Form/NumberInput.svelte

@@ -0,0 +1,452 @@
+<!--
+@component
+NumberInput - A specialized input for numeric values with formatting, units, and increment controls.
+Provides consistent styling, accessibility features, and integration with the Form component.
+
+Usage:
+```svelte
+<NumberInput 
+  name="quantity" 
+  value={1} 
+  min={0} 
+  max={100} 
+  step={1} 
+/>
+
+<NumberInput 
+  name="price" 
+  value={29.99} 
+  prefix="$" 
+  decimalPlaces={2} 
+/>
+
+<NumberInput 
+  name="percentage" 
+  value={75} 
+  suffix="%" 
+  verticalButtons 
+/>
+```
+-->
+<script>
+import { getContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Input name */
+  name,
+
+  /** @type {number} - Input value */
+  value = 0,
+
+  /** @type {string} - Placeholder text */
+  placeholder = "",
+
+  /** @type {number} - Minimum allowed value */
+  min,
+
+  /** @type {number} - Maximum allowed value */
+  max,
+
+  /** @type {number} - Step increment/decrement amount */
+  step = 1,
+
+  /** @type {number} - Number of decimal places to display */
+  decimalPlaces,
+
+  /** @type {string} - Text to display before the number */
+  prefix,
+
+  /** @type {string} - Text to display after the number */
+  suffix,
+
+  /** @type {boolean} - Whether to show increment/decrement buttons */
+  showButtons = true,
+
+  /** @type {boolean} - Whether to arrange buttons vertically */
+  verticalButtons = false,
+
+  /** @type {boolean} - Whether the input is required */
+  required = false,
+
+  /** @type {boolean} - Whether the input is disabled */
+  disabled = false,
+
+  /** @type {boolean} - Whether the input is readonly */
+  readonly = false,
+
+  /** @type {string} - Size of the input (sm, md, lg) */
+  size = "md",
+
+  /** @type {string} - ARIA label for accessibility */
+  ariaLabel,
+
+  /** @type {(event: CustomEvent) => void} - Change event handler */
+  onchange,
+  /** @type {(event: CustomEvent) => void} - Input event handler */
+  oninput,
+  /** @type {(event: Event) => void} - Focus event handler */
+  onfocus,
+  /** @type {(event: Event) => void} - Blur event handler */
+  onblur,
+} = $props()
+
+// Get form context if available
+const formContext = getContext("form")
+
+// Generate unique ID if not provided
+const inputId = id || `number-input-${crypto.randomUUID()}`
+
+// Input state
+let inputValue = $state(formatValue(value))
+let numericValue = $state(value)
+let isFocused = $state(false)
+let inputEl
+
+// Register with form if available
+let fieldApi = $state()
+
+$effect(() => {
+  if (formContext && name) {
+    fieldApi = formContext.registerField(name, value)
+  }
+})
+
+// Update value when form field changes
+$effect(() => {
+  if (fieldApi) {
+    const formValue = fieldApi.getValue()
+    if (formValue !== undefined && formValue !== numericValue) {
+      numericValue = formValue
+      inputValue = formatValue(formValue)
+    }
+  }
+})
+
+// Update internal value when prop changes
+$effect(() => {
+  if (value !== numericValue) {
+    numericValue = value
+    inputValue = formatValue(value)
+  }
+})
+
+/**
+ * Formats a numeric value for display
+ * @param {number} val - Value to format
+ * @returns {string} - Formatted value
+ */
+function formatValue(val) {
+  if (val === undefined || val === null) return ""
+
+  let formatted = decimalPlaces !== undefined ? val.toFixed(decimalPlaces) : val.toString()
+
+  return formatted
+}
+
+/**
+ * Parses a string value to a number
+ * @param {string} val - Value to parse
+ * @returns {number} - Parsed number
+ */
+function parseValue(val) {
+  if (!val) return 0
+
+  // Remove non-numeric characters except decimal point
+  const numericString = val.replace(/[^\d.-]/g, "")
+  return parseFloat(numericString)
+}
+
+/**
+ * Constrains a value to min/max bounds
+ * @param {number} val - Value to constrain
+ * @returns {number} - Constrained value
+ */
+function constrainValue(val) {
+  let constrained = val
+
+  if (min !== undefined && constrained < min) {
+    constrained = min
+  }
+
+  if (max !== undefined && constrained > max) {
+    constrained = max
+  }
+
+  return constrained
+}
+
+/**
+ * Increments the current value
+ */
+function increment() {
+  if (disabled || readonly) return
+
+  const currentValue = parseValue(inputValue)
+  const newValue = constrainValue(currentValue + step)
+
+  numericValue = newValue
+  inputValue = formatValue(newValue)
+
+  // Update form field if available
+  if (fieldApi) {
+    fieldApi.setValue(newValue)
+  }
+
+  onchange?.(new CustomEvent("change", { detail: { value: newValue } }))
+}
+
+/**
+ * Decrements the current value
+ */
+function decrement() {
+  if (disabled || readonly) return
+
+  const currentValue = parseValue(inputValue)
+  const newValue = constrainValue(currentValue - step)
+
+  numericValue = newValue
+  inputValue = formatValue(newValue)
+
+  // Update form field if available
+  if (fieldApi) {
+    fieldApi.setValue(newValue)
+  }
+
+  onchange?.(new CustomEvent("change", { detail: { value: newValue } }))
+}
+
+/**
+ * Handles input change
+ * @param {Event} event - Input event
+ */
+function handleInput(event) {
+  const rawValue = event.target.value
+  inputValue = rawValue
+
+  // Only update numeric value if it's a valid number
+  const parsed = parseValue(rawValue)
+  if (!isNaN(parsed)) {
+    numericValue = parsed
+
+    // Update form field if available
+    if (fieldApi) {
+      fieldApi.setValue(parsed)
+    }
+
+    oninput?.(new CustomEvent("input", { detail: { value: parsed } }))
+  }
+}
+
+/**
+ * Handles blur event
+ */
+function handleBlur(event) {
+  // Format and constrain the value on blur
+  const parsed = parseValue(inputValue)
+  const constrained = constrainValue(parsed)
+
+  numericValue = constrained
+  inputValue = formatValue(constrained)
+
+  // Update form field if available
+  if (fieldApi) {
+    fieldApi.setValue(constrained)
+  }
+
+  isFocused = false
+  onblur?.(event)
+  onchange?.(new CustomEvent("change", { detail: { value: constrained } }))
+}
+
+/**
+ * Handles focus event
+ */
+function handleFocus(event) {
+  isFocused = true
+  onfocus?.(event)
+}
+
+/**
+ * Handles keydown event
+ * @param {KeyboardEvent} event - Keydown event
+ */
+function handleKeydown(event) {
+  if (disabled || readonly) return
+
+  if (event.key === "ArrowUp") {
+    event.preventDefault()
+    increment()
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault()
+    decrement()
+  }
+}
+
+// Determine size classes
+const sizeClasses = $derived(
+  {
+    sm: "h-8 text-sm",
+    md: "h-10 text-base",
+    lg: "h-12 text-lg",
+  }[size] || "h-10 text-base"
+)
+
+// Determine button size classes
+const buttonSizeClasses = $derived(
+  {
+    sm: "w-6 h-6",
+    md: "w-8 h-8",
+    lg: "w-10 h-10",
+  }[size] || "w-8 h-8"
+)
+</script>
+
+<div
+  class="
+    number-input
+    {verticalButtons ? 'number-input-vertical' : 'number-input-horizontal'}
+    {className}
+  "
+>
+  <div class="number-input-container {sizeClasses}">
+    {#if prefix}
+      <span class="number-input-prefix">{prefix}</span>
+    {/if}
+    
+    <input
+      {id}
+      {name}
+      type="text"
+      inputmode="decimal"
+      class="number-input-field"
+      {placeholder}
+      value={inputValue}
+      {required}
+      {disabled}
+      {readonly}
+      min={min !== undefined ? min : undefined}
+      max={max !== undefined ? max : undefined}
+      step={step}
+      aria-label={ariaLabel || name}
+      aria-valuemin={min !== undefined ? min : undefined}
+      aria-valuemax={max !== undefined ? max : undefined}
+      aria-valuenow={numericValue}
+      bind:this={inputEl}
+      oninput={handleInput}
+      onblur={handleBlur}
+      onfocus={handleFocus}
+      onkeydown={handleKeydown}
+    />
+    
+    {#if suffix}
+      <span class="number-input-suffix">{suffix}</span>
+    {/if}
+    
+    {#if showButtons}
+      <div class="number-input-buttons {verticalButtons ? 'number-input-buttons-vertical' : ''}">
+        <button
+          type="button"
+          class="number-input-button number-input-increment {buttonSizeClasses}"
+          aria-label="Increase value"
+          tabindex="-1"
+          disabled={disabled || readonly || (max !== undefined && numericValue >= max)}
+          onclick={increment}
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
+          </svg>
+        </button>
+        
+        <button
+          type="button"
+          class="number-input-button number-input-decrement {buttonSizeClasses}"
+          aria-label="Decrease value"
+          tabindex="-1"
+          disabled={disabled || readonly || (min !== undefined && numericValue <= min)}
+          onclick={decrement}
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+        </button>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .number-input {
+    @apply w-full;
+  }
+  
+  .number-input-container {
+    @apply relative flex items-center;
+    @apply bg-background dark:bg-background;
+    @apply border border-border dark:border-border rounded-md;
+    @apply focus-within:ring-2 focus-within:ring-primary-500 dark:focus-within:ring-primary-400 focus-within:border-primary-500 dark:focus-within:border-primary-400;
+    @apply transition-colors duration-200;
+  }
+  
+  .number-input-field {
+    @apply w-full h-full px-3 bg-transparent border-none outline-none;
+    @apply text-text dark:text-text placeholder:text-muted dark:placeholder:text-muted;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  
+  .number-input-prefix {
+    @apply pl-3 text-muted dark:text-muted;
+  }
+  
+  .number-input-suffix {
+    @apply pr-3 text-muted dark:text-muted;
+  }
+  
+  .number-input-buttons {
+    @apply flex;
+  }
+  
+  .number-input-buttons-vertical {
+    @apply flex-col absolute right-0 top-0 h-full;
+  }
+  
+  .number-input-horizontal .number-input-field {
+    @apply pr-16;
+  }
+  
+  .number-input-horizontal .number-input-buttons {
+    @apply absolute right-0 h-full border-l border-border dark:border-border;
+  }
+  
+  .number-input-button {
+    @apply flex items-center justify-center;
+    @apply text-muted dark:text-muted;
+    @apply hover:bg-hover dark:hover:bg-hover hover:text-text dark:hover:text-text;
+    @apply focus:outline-none focus:bg-hover dark:focus:bg-hover;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent dark:disabled:hover:bg-transparent;
+    @apply transition-colors duration-150;
+  }
+  
+  .number-input-vertical .number-input-increment {
+    @apply rounded-tr-md border-b border-border dark:border-border;
+  }
+  
+  .number-input-vertical .number-input-decrement {
+    @apply rounded-br-md;
+  }
+  
+  .number-input-horizontal .number-input-increment {
+    @apply border-r border-border dark:border-border;
+  }
+  
+  .number-input-horizontal .number-input-decrement {
+    @apply rounded-r-md;
+  }
+</style>

package/dist/components/Form/NumberInput.svelte.d.ts

@@ -0,0 +1,82 @@
+export default NumberInput;
+type NumberInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * NumberInput - A specialized input for numeric values with formatting, units, and increment controls.
+ * Provides consistent styling, accessibility features, and integration with the Form component.
+ *
+ * Usage:
+ * ```svelte
+ * <NumberInput
+ * name="quantity"
+ * value={1}
+ * min={0}
+ * max={100}
+ * step={1}
+ * />
+ *
+ * <NumberInput
+ * name="price"
+ * value={29.99}
+ * prefix="$"
+ * decimalPlaces={2}
+ * />
+ *
+ * <NumberInput
+ * name="percentage"
+ * value={75}
+ * suffix="%"
+ * verticalButtons
+ * />
+ * ```
+ */
+declare const NumberInput: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    name: any;
+    value?: number;
+    placeholder?: string;
+    min: any;
+    max: any;
+    step?: number;
+    decimalPlaces: any;
+    prefix: any;
+    suffix: any;
+    showButtons?: boolean;
+    verticalButtons?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: string;
+    ariaLabel: any;
+    onchange: any;
+    oninput: any;
+    onfocus: any;
+    onblur: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    name: any;
+    value?: number;
+    placeholder?: string;
+    min: any;
+    max: any;
+    step?: number;
+    decimalPlaces: any;
+    prefix: any;
+    suffix: any;
+    showButtons?: boolean;
+    verticalButtons?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: string;
+    ariaLabel: any;
+    onchange: any;
+    oninput: any;
+    onfocus: any;
+    onblur: any;
+};

package/dist/components/Form/Radio.svelte

@@ -0,0 +1,192 @@
+<!--
+@component
+Radio - A styled radio button component.
+Provides consistent styling, accessibility features, and integration with the Form component.
+
+Usage:
+```svelte
+<Radio 
+  name="theme" 
+  value="light"
+  label="Light theme" 
+  checked={theme === 'light'} 
+/>
+
+<FormField label="Select theme">
+  <div class="flex gap-4">
+    <Radio name="theme" value="light" label="Light" />
+    <Radio name="theme" value="dark" label="Dark" />
+    <Radio name="theme" value="system" label="System" />
+  </div>
+</FormField>
+```
+-->
+<script>
+import { getContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Radio name (for grouping) */
+  name,
+
+  /** @type {string} - Radio value */
+  value,
+
+  /** @type {string} - Label text */
+  label,
+
+  /** @type {boolean} - Whether the radio is checked */
+  checked = false,
+
+  /** @type {boolean} - Whether the radio is required */
+  required = false,
+
+  /** @type {boolean} - Whether the radio is disabled */
+  disabled = false,
+
+  /** @type {string} - Size of the radio (sm, md, lg) */
+  size = "md",
+
+  /** @type {string} - ARIA label for accessibility */
+  ariaLabel,
+  /** @type {(event: CustomEvent) => void} - Change event handler */
+  onchange,
+  ...restProps
+} = $props()
+
+// Get form context if available
+const formContext = getContext("form")
+
+// Radio state
+let isChecked = $state(checked)
+
+// Update checked state when prop changes
+$effect(() => {
+  isChecked = checked
+})
+
+// Register with form if available
+let fieldApi = $state()
+
+$effect(() => {
+  if (formContext && name) {
+    fieldApi = formContext.registerField(name, checked ? value : undefined)
+  }
+})
+
+// Update checked state when form field changes
+$effect(() => {
+  if (fieldApi) {
+    const formValue = fieldApi.getValue()
+    isChecked = formValue === value
+  }
+})
+
+/**
+ * Handles radio change
+ * @param {Event} event - Change event
+ */
+function handleChange(event) {
+  isChecked = event.target.checked
+
+  // Update form field if available
+  if (fieldApi && isChecked) {
+    fieldApi.setValue(value)
+  }
+
+  onchange?.(new CustomEvent("change", { detail: { checked: isChecked, value } }))
+}
+
+// Determine radio size classes
+const radioSizeClasses = $derived(
+  {
+    sm: "w-3.5 h-3.5",
+    md: "w-4 h-4",
+    lg: "w-5 h-5",
+  }[size] || "w-4 h-4"
+)
+
+const labelSizeClasses = $derived(
+  {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+  }[size] || "text-sm"
+)
+</script>
+
+<label 
+  class="radio-wrapper {className} {labelSizeClasses} {disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+>
+  <div class="radio-container">
+    <input
+      type="radio"
+      {id}
+      {name}
+      {value}
+      checked={isChecked}
+      {required}
+      disabled={disabled || (fieldApi && fieldApi.isDisabled())}
+      aria-label={ariaLabel || label}
+      class="radio-input"
+      onchange={handleChange}
+      {...restProps}
+    />
+    
+    <span class="radio-control {radioSizeClasses}" aria-hidden="true">
+      <span class="radio-dot"></span>
+    </span>
+  </div>
+  
+  {#if label}
+    <span class="radio-label">{label}</span>
+  {/if}
+</label>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .radio-wrapper {
+    @apply inline-flex items-center gap-2;
+  }
+  
+  .radio-container {
+    @apply relative flex items-center justify-center;
+  }
+  
+  .radio-input {
+    @apply sr-only;
+  }
+  
+  .radio-control {
+    @apply rounded-full border-2 border-border dark:border-border bg-background dark:bg-background;
+    @apply flex items-center justify-center;
+    @apply transition-colors duration-200;
+  }
+  
+  .radio-input:checked + .radio-control {
+    @apply border-primary-500 dark:border-primary-400;
+  }
+  
+  .radio-input:focus + .radio-control {
+    @apply ring-2 ring-offset-2 ring-primary-500 dark:ring-primary-400;
+  }
+  
+  .radio-dot {
+    @apply rounded-full bg-primary-500 dark:bg-primary-400;
+    @apply w-0 h-0 opacity-0 transition-all duration-200;
+  }
+  
+  .radio-input:checked + .radio-control .radio-dot {
+    @apply w-1/2 h-1/2 opacity-100;
+  }
+  
+  .radio-label {
+    @apply text-text dark:text-text;
+  }
+</style>