twintrinsic 0.0.1

package/dist/components/Form/FormField.svelte

@@ -0,0 +1,218 @@
+<!--
+@component
+FormField - A component for creating form field containers with labels, validation, and help text.
+Provides consistent styling and accessibility features for form inputs.
+
+Usage:
+```svelte
+<FormField 
+  label="Username" 
+  name="username" 
+  required 
+  helpText="Enter your username"
+>
+  <TextInput />
+</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} - Field name (used for form data) */
+  name,
+
+  /** @type {string} - Field label */
+  label,
+
+  /** @type {string} - Help text displayed below the field */
+  helpText,
+
+  /** @type {string} - Error message to display */
+  error,
+
+  /** @type {boolean} - Whether the field is required */
+  required = false,
+
+  /** @type {boolean} - Whether the field is disabled */
+  disabled = false,
+
+  /** @type {boolean} - Whether to hide the label visually (still accessible to screen readers) */
+  hideLabel = false,
+
+  /** @type {string} - Layout direction (vertical or horizontal) */
+  layout,
+
+  children,
+} = $props()
+
+// Get form context if available
+const formContext = getContext("form")
+
+// Use layout from form context if not specified
+const fieldLayout = $derived(layout || (formContext ? formContext.layout : "vertical"))
+
+// Generate unique ID for the field
+const fieldId = $derived(`${id}-field`)
+const errorId = $derived(`${id}-error`)
+const helpId = $derived(`${id}-help`)
+
+// Track field state
+let fieldError = $state("")
+let touched = $state(false)
+let fieldDisabled = $state(false)
+let fieldApi = $state()
+
+// Register with form if available
+$effect(() => {
+  if (formContext && name) {
+    fieldApi = formContext.registerField(name)
+  }
+})
+
+// Update field error when form validation runs
+$effect(() => {
+  if (fieldApi) {
+    const formError = fieldApi.getError()
+    if (formError) {
+      fieldError = formError
+    }
+  } else {
+    fieldError = error || ""
+  }
+})
+
+// Update touched state
+$effect(() => {
+  if (fieldApi) {
+    touched = fieldApi.isTouched()
+  }
+})
+
+// Update disabled state
+$effect(() => {
+  if (fieldApi) {
+    const formDisabled = formContext.disabled()
+    fieldDisabled = disabled || formDisabled
+  } else {
+    fieldDisabled = disabled
+  }
+})
+
+// Determine if we should show an error
+const showError = $derived(!!fieldError && touched)
+
+// Determine the aria-describedby attribute value
+const describedBy = $derived(
+  [helpText ? helpId : null, showError ? errorId : null].filter(Boolean).join(" ")
+)
+</script>
+
+<div 
+  class="
+    form-field
+    {fieldLayout === 'horizontal' ? 'form-field-horizontal' : 'form-field-vertical'}
+    {showError ? 'has-error' : ''}
+    {className}
+  "
+>
+  {#if label}
+    <label 
+      for={fieldId}
+      class="form-label {hideLabel ? 'sr-only' : ''}"
+    >
+      {label}
+      {#if required}
+        <span class="required-indicator" aria-hidden="true">*</span>
+        <span class="sr-only">required</span>
+      {/if}
+    </label>
+  {/if}
+  
+  <div class="form-control-container">
+    <div class="form-control">
+      <!-- Slot for the actual form control -->
+      {@render children({
+        name: fieldName,
+        id: fieldId,
+        disabled: fieldDisabled,
+        'aria-invalid': showError ? 'true' : undefined,
+        'aria-describedby': describedBy || undefined,
+        'aria-required': required ? 'true' : undefined,
+        required
+      })}
+    </div>
+    
+    {#if helpText && !showError}
+      <div class="form-help-text" id={helpId}>
+        {helpText}
+      </div>
+    {/if}
+    
+    {#if showError}
+      <div class="form-error" id={errorId} role="alert">
+        {fieldError}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .form-field {
+    @apply w-full;
+  }
+  
+  .form-field-vertical {
+    @apply flex flex-col gap-1.5;
+  }
+  
+  .form-field-horizontal {
+    @apply grid grid-cols-12 gap-4 items-start;
+  }
+  
+  .form-field-horizontal .form-label {
+    @apply col-span-3 pt-2 text-right;
+  }
+  
+  .form-field-horizontal .form-control-container {
+    @apply col-span-9;
+  }
+  
+  .form-label {
+    @apply block text-sm font-medium text-text dark:text-text;
+  }
+  
+  .required-indicator {
+    @apply ml-1 text-error-500 dark:text-error-400;
+  }
+  
+  .form-control-container {
+    @apply w-full;
+  }
+  
+  .form-control {
+    @apply w-full;
+  }
+  
+  .form-help-text {
+    @apply mt-1 text-xs text-muted dark:text-muted;
+  }
+  
+  .form-error {
+    @apply mt-1 text-xs text-error-600 dark:text-error-400;
+  }
+  
+  .has-error :global(input),
+  .has-error :global(select),
+  .has-error :global(textarea) {
+    @apply border-error-500 dark:border-error-400 focus:ring-error-500 dark:focus:ring-error-400 focus:border-error-500 dark:focus:border-error-400;
+  }
+</style>

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

@@ -0,0 +1,47 @@
+export default FormField;
+type FormField = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * FormField - A component for creating form field containers with labels, validation, and help text.
+ * Provides consistent styling and accessibility features for form inputs.
+ *
+ * Usage:
+ * ```svelte
+ * <FormField
+ * label="Username"
+ * name="username"
+ * required
+ * helpText="Enter your username"
+ * >
+ * <TextInput />
+ * </FormField>
+ * ```
+ */
+declare const FormField: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    name: any;
+    label: any;
+    helpText: any;
+    error: any;
+    required?: boolean;
+    disabled?: boolean;
+    hideLabel?: boolean;
+    layout: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    name: any;
+    label: any;
+    helpText: any;
+    error: any;
+    required?: boolean;
+    disabled?: boolean;
+    hideLabel?: boolean;
+    layout: any;
+    children: any;
+};

package/dist/components/Form/Input.svelte

@@ -0,0 +1,340 @@
+<!--
+@component
+Input - Base component for form inputs with validation, floating labels, and input groups.
+Built with accessibility and customization in mind.
+
+Usage:
+```svelte
+<Input label="Username" />
+
+<Input
+  label="Email"
+  type="email"
+  value="user@example.com"
+  floating={true}
+  required
+  error="Please enter a valid email"
+/>
+
+<Input
+  label="Password"
+  type="password"
+  leftIcon="lock"
+  rightIcon="eye"
+  onrightIconClick={togglePassword}
+/>
+```
+-->
+<script>
+import { slide } from "svelte/transition"
+import Icon from "../Icon/Icon.svelte"
+
+const {
+  /** @type {string} - Input label text */
+  label,
+  /** @type {string} - Input type (text, email, password, etc.) */
+  type = "text",
+  /** @type {string} - Input value */
+  value = "",
+  /** @type {string} - Placeholder text */
+  placeholder = "",
+  /** @type {string} - Name attribute */
+  name = "",
+  /** @type {string} - Id attribute */
+  id = crypto.randomUUID(),
+  /** @type {boolean} - Whether the input is disabled */
+  disabled = false,
+  /** @type {boolean} - Whether the input is required */
+  required = false,
+  /** @type {boolean} - Whether to use floating labels */
+  floating = false,
+  /** @type {boolean} - Whether the input is readonly */
+  readonly = false,
+  /** @type {string} - Error message to display */
+  error = "",
+  /** @type {string} - Help text to display below input */
+  helpText = "",
+  /** @type {string} - Left icon name */
+  leftIcon = "",
+  /** @type {string} - Right icon name */
+  rightIcon = "",
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+  /** @type {string} - Input mask pattern */
+  mask = "",
+  /** @type {string} - ARIA description */
+  ariaDescription = "",
+  /** @type {(event: Event) => void} - Focus event handler */
+  onfocus,
+  /** @type {(event: Event) => void} - Blur event handler */
+  onblur,
+  /** @type {(event: CustomEvent) => void} - Input event handler */
+  oninput,
+  /** @type {() => void} - Left icon click handler */
+  onleftIconClick,
+  /** @type {() => void} - Right icon click handler */
+  onrightIconClick,
+} = $props()
+
+let inputValue = $state(value)
+let focused = $state(false)
+let touched = $state(false)
+
+// Sync input value when prop changes
+$effect(() => {
+  inputValue = value
+})
+
+// Handle input focus
+function handleFocus(event) {
+  focused = true
+  onfocus?.(event)
+}
+
+// Handle input blur
+function handleBlur(event) {
+  focused = false
+  touched = true
+  onblur?.(event)
+}
+
+// Handle input change
+function handleInput(event) {
+  const newValue = event.target.value
+
+  // Apply mask if provided
+  if (mask) {
+    inputValue = applyMask(newValue, mask)
+  } else {
+    inputValue = newValue
+  }
+
+  oninput?.(new CustomEvent("input", { detail: { value: inputValue } }))
+}
+
+// Handle icon clicks
+function handleLeftIconClick() {
+  onleftIconClick?.()
+}
+
+function handleRightIconClick() {
+  onrightIconClick?.()
+}
+
+// Apply input mask
+function applyMask(value, pattern) {
+  let result = ""
+  let valueIndex = 0
+
+  for (let i = 0; i < pattern.length && valueIndex < value.length; i++) {
+    const maskChar = pattern[i]
+    const valueChar = value[valueIndex]
+
+    if (maskChar === "#") {
+      if (/\d/.test(valueChar)) {
+        result += valueChar
+        valueIndex++
+      }
+    } else if (maskChar === "A") {
+      if (/[a-zA-Z]/.test(valueChar)) {
+        result += valueChar
+        valueIndex++
+      }
+    } else if (maskChar === "*") {
+      result += valueChar
+      valueIndex++
+    } else {
+      result += maskChar
+      if (valueChar === maskChar) {
+        valueIndex++
+      }
+    }
+  }
+
+  return result
+}
+
+// Compute classes
+const containerClasses = $derived(`
+    form-input-container
+    ${floating ? "form-input-floating" : ""}
+    ${error ? "form-input-error" : ""}
+    ${disabled ? "form-input-disabled" : ""}
+    ${className}
+  `)
+
+const labelClasses = $derived(`
+    form-input-label
+    ${floating && (focused || inputValue) ? "form-input-label-float" : ""}
+    ${error ? "form-input-label-error" : ""}
+    ${disabled ? "form-input-label-disabled" : ""}
+  `)
+
+const inputClasses = $derived(`
+    form-input
+    ${leftIcon ? "form-input-left-icon" : ""}
+    ${rightIcon ? "form-input-right-icon" : ""}
+    ${error ? "form-input-field-error" : ""}
+  `)
+</script>
+
+<div class={containerClasses}>
+  {#if label}
+    <label for={id} class={labelClasses}>
+      {label}
+      {#if required}
+        <span class="form-input-required">*</span>
+      {/if}
+    </label>
+  {/if}
+
+  <div class="form-input-wrapper">
+    {#if leftIcon}
+      <button
+        type="button"
+        class="form-input-icon form-input-icon-left"
+        onclick={handleLeftIconClick}
+        tabindex="-1"
+        aria-hidden="true"
+      >
+        <Icon name={leftIcon} />
+      </button>
+    {/if}
+
+    <input
+      {type}
+      {id}
+      {name}
+      class={inputClasses}
+      value={inputValue}
+      placeholder={floating ? ' ' : placeholder}
+      {disabled}
+      {readonly}
+      {required}
+      aria-invalid={!!error}
+      aria-describedby={error || helpText ? `${id}-description` : undefined}
+      onfocus={handleFocus}
+      onblur={handleBlur}
+      oninput={handleInput}
+    />
+
+    {#if rightIcon}
+      <button
+        type="button"
+        class="form-input-icon form-input-icon-right"
+        onclick={handleRightIconClick}
+        tabindex="-1"
+        aria-hidden="true"
+      >
+        <Icon name={rightIcon} />
+      </button>
+    {/if}
+  </div>
+
+  {#if (error || helpText) && touched}
+    <div
+      id="{id}-description"
+      class="form-input-description"
+      class:form-input-error-text={!!error}
+      transition:slide={{ duration: 150 }}
+    >
+      {error || helpText}
+    </div>
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+
+  /* Container */
+  .form-input-container {
+    @apply relative space-y-1.5;
+  }
+
+  /* Label */
+  .form-input-label {
+    @apply block text-sm font-medium text-muted transition-all;
+  }
+
+  .form-input-label-error {
+    @apply text-error-bold;
+  }
+
+  .form-input-label-disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .form-input-required {
+    @apply text-error-bold ml-1;
+  }
+
+  /* Input wrapper */
+  .form-input-wrapper {
+    @apply relative;
+  }
+
+  /* Base input */
+  .form-input {
+    @apply block w-full px-3 py-2 bg-surface;
+    @apply border border-border rounded-md shadow-sm;
+    @apply text-base placeholder-muted;
+    @apply transition-colors duration-150;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
+  }
+
+  .form-input-disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .form-input-field-error {
+    @apply border-error-bold;
+    @apply focus:ring-error-bold focus:border-error-bold;
+  }
+
+  /* Icons */
+  .form-input-left-icon {
+    @apply pl-10;
+  }
+
+  .form-input-right-icon {
+    @apply pr-10;
+  }
+
+  .form-input-icon {
+    @apply absolute inset-y-0 flex items-center;
+    @apply p-2 text-muted transition-colors;
+    @apply hover:text-primary-text focus:outline-none;
+  }
+
+  .form-input-icon-left {
+    @apply left-0;
+  }
+
+  .form-input-icon-right {
+    @apply right-0;
+  }
+
+  /* Floating label */
+  .form-input-floating .form-input-label {
+    @apply absolute text-sm text-muted;
+    transform-origin: 0 0;
+    transition: transform 0.15s ease-in-out;
+  }
+
+  .form-input-floating .form-input {
+    @apply pt-4 pb-1;
+  }
+
+  .form-input-label-float {
+    @apply transform -translate-y-3 scale-75 text-primary-500;
+  }
+
+  /* Description/Error text */
+  .form-input-description {
+    @apply mt-1 text-sm;
+  }
+
+  .form-input-error-text {
+    @apply text-error-bold;
+  }
+</style>

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

@@ -0,0 +1,79 @@
+export default Input;
+type Input = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Input - Base component for form inputs with validation, floating labels, and input groups.
+ * Built with accessibility and customization in mind.
+ *
+ * Usage:
+ * ```svelte
+ * <Input label="Username" />
+ *
+ * <Input
+ * label="Email"
+ * type="email"
+ * value="user@example.com"
+ * floating={true}
+ * required
+ * error="Please enter a valid email"
+ * />
+ *
+ * <Input
+ * label="Password"
+ * type="password"
+ * leftIcon="lock"
+ * rightIcon="eye"
+ * onrightIconClick={togglePassword}
+ * />
+ * ```
+ */
+declare const Input: import("svelte").Component<{
+    label: any;
+    type?: string;
+    value?: string;
+    placeholder?: string;
+    name?: string;
+    id?: any;
+    disabled?: boolean;
+    required?: boolean;
+    floating?: boolean;
+    readonly?: boolean;
+    error?: string;
+    helpText?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    class?: string;
+    mask?: string;
+    ariaDescription?: string;
+    onfocus: any;
+    onblur: any;
+    oninput: any;
+    onleftIconClick: any;
+    onrightIconClick: any;
+}, {}, "">;
+type $$ComponentProps = {
+    label: any;
+    type?: string;
+    value?: string;
+    placeholder?: string;
+    name?: string;
+    id?: any;
+    disabled?: boolean;
+    required?: boolean;
+    floating?: boolean;
+    readonly?: boolean;
+    error?: string;
+    helpText?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    class?: string;
+    mask?: string;
+    ariaDescription?: string;
+    onfocus: any;
+    onblur: any;
+    oninput: any;
+    onleftIconClick: any;
+    onrightIconClick: any;
+};