twintrinsic 0.0.1

package/dist/components/Form/InputSwitch.svelte

@@ -0,0 +1,189 @@
+<!--
+@component
+InputSwitch - A toggle switch component that provides an alternative to checkboxes.
+Supports labels, disabled states, and integrates with the Form component.
+
+Usage:
+```svelte
+<InputSwitch 
+  name="darkMode" 
+  label="Enable dark mode" 
+  checked={true} 
+/>
+
+<FormField label="Notifications">
+  <InputSwitch name="notifications" />
+</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} - Input name */
+  name,
+
+  /** @type {string} - Label text */
+  label,
+
+  /** @type {boolean} - Whether the switch is checked */
+  checked = false,
+
+  /** @type {boolean} - Whether the switch is required */
+  required = false,
+
+  /** @type {boolean} - Whether the switch is disabled */
+  disabled = false,
+
+  /** @type {string} - Size of the switch (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")
+
+// Switch state
+let isChecked = $state(checked)
+
+// Register with form if available
+let fieldApi = $state()
+if (formContext && name) {
+  fieldApi = formContext.registerField(name, checked)
+
+  // Update value when form field changes
+  $effect(() => {
+    const formValue = fieldApi.getValue()
+    if (formValue !== undefined && formValue !== isChecked) {
+      isChecked = !!formValue
+    }
+  })
+}
+
+// Update internal state when prop changes
+$effect(() => {
+  if (checked !== isChecked) {
+    isChecked = checked
+  }
+})
+
+/**
+ * Handles switch toggle
+ * @param {Event} event - Change event
+ */
+function handleChange(event) {
+  isChecked = event.target.checked
+
+  // Update form field if available
+  if (fieldApi) {
+    fieldApi.setValue(isChecked)
+  }
+
+  onchange?.(new CustomEvent("change", { detail: { checked: isChecked } }))
+}
+
+// Determine switch size classes
+const switchSizeClasses = $derived(
+  {
+    sm: "w-8 h-4",
+    md: "w-10 h-5",
+    lg: "w-12 h-6",
+  }[size] || "w-10 h-5"
+)
+
+const thumbSizeClasses = $derived(
+  {
+    sm: "w-3 h-3",
+    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="input-switch-wrapper {className} {labelSizeClasses} {disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+>
+  <div class="input-switch-container">
+    <input
+      type="checkbox"
+      {id}
+      {name}
+      checked={isChecked}
+      {required}
+      disabled={disabled || (fieldApi && fieldApi.isDisabled())}
+      aria-label={ariaLabel || label}
+      class="input-switch-input"
+      onchange={handleChange}
+      {...restProps}
+    />
+    
+    <span class="input-switch-track {switchSizeClasses}" aria-hidden="true">
+      <span 
+        class="input-switch-thumb {thumbSizeClasses}"
+        class:translate-x-full={isChecked}
+      ></span>
+    </span>
+  </div>
+  
+  {#if label}
+    <span class="input-switch-label">{label}</span>
+  {/if}
+</label>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .input-switch-wrapper {
+    @apply inline-flex items-center gap-2;
+  }
+  
+  .input-switch-container {
+    @apply relative;
+  }
+  
+  .input-switch-input {
+    @apply sr-only;
+  }
+  
+  .input-switch-track {
+    @apply block rounded-full bg-muted dark:bg-muted transition-colors duration-200 ease-in-out;
+    @apply flex items-center px-0.5;
+  }
+  
+  .input-switch-input:checked + .input-switch-track {
+    @apply bg-primary-500 dark:bg-primary-400;
+  }
+  
+  .input-switch-input:focus + .input-switch-track {
+    @apply ring-2 ring-offset-2 ring-primary-500 dark:ring-primary-400;
+  }
+  
+  .input-switch-thumb {
+    @apply rounded-full bg-white dark:bg-white transform transition-transform duration-200 ease-in-out;
+  }
+  
+  .input-switch-label {
+    @apply text-text dark:text-text;
+  }
+</style>

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

@@ -0,0 +1,46 @@
+export default InputSwitch;
+type InputSwitch = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * InputSwitch - A toggle switch component that provides an alternative to checkboxes.
+ * Supports labels, disabled states, and integrates with the Form component.
+ *
+ * Usage:
+ * ```svelte
+ * <InputSwitch
+ * name="darkMode"
+ * label="Enable dark mode"
+ * checked={true}
+ * />
+ *
+ * <FormField label="Notifications">
+ * <InputSwitch name="notifications" />
+ * </FormField>
+ * ```
+ */
+declare const InputSwitch: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    name: any;
+    label: any;
+    checked?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    size?: string;
+    ariaLabel: any;
+    onchange: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    name: any;
+    label: any;
+    checked?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    size?: string;
+    ariaLabel: any;
+    onchange: any;
+} & Record<string, any>;

package/dist/components/Form/InvalidState.svelte

@@ -0,0 +1,97 @@
+<!--
+@component
+InvalidState - A component for displaying validation errors in forms.
+Provides consistent styling and accessibility features for error messages.
+
+Usage:
+```svelte
+<InvalidState message="This field is required" />
+
+<FormField>
+  <TextInput name="email" />
+  {#if errors.email}
+    <InvalidState message={errors.email} />
+  {/if}
+</FormField>
+```
+-->
+<script>
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - Error message to display */
+  message,
+
+  /** @type {string} - Icon to display (HTML or SVG string) */
+  icon,
+
+  /** @type {boolean} - Whether to show the default icon */
+  showIcon = true,
+
+  /** @type {boolean} - Whether to animate the message */
+  animated = true,
+
+  children,
+} = $props()
+</script>
+
+<div 
+  class="invalid-state {className}"
+  role="alert"
+  aria-live="assertive"
+>
+  <div class="invalid-state-content">
+    {#if showIcon}
+      <div class="invalid-state-icon">
+        {#if icon}
+          {@html icon}
+        {:else}
+          <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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+        {/if}
+      </div>
+    {/if}
+    
+    <div class="invalid-state-message">
+      {#if message}
+        {message}
+      {:else}
+        {@render children?.()}
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .invalid-state {
+    @apply mt-1 text-xs text-error-600 dark:text-error-400;
+    animation: invalid-state-appear 0.2s ease-in-out;
+  }
+  
+  .invalid-state-content {
+    @apply flex items-start gap-1.5;
+  }
+  
+  .invalid-state-icon {
+    @apply flex-shrink-0 mt-0.5;
+  }
+  
+  .invalid-state-message {
+    @apply flex-grow;
+  }
+  
+  @keyframes invalid-state-appear {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

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

@@ -0,0 +1,37 @@
+export default InvalidState;
+type InvalidState = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * InvalidState - A component for displaying validation errors in forms.
+ * Provides consistent styling and accessibility features for error messages.
+ *
+ * Usage:
+ * ```svelte
+ * <InvalidState message="This field is required" />
+ *
+ * <FormField>
+ * <TextInput name="email" />
+ * {#if errors.email}
+ *   <InvalidState message={errors.email} />
+ * {/if}
+ * </FormField>
+ * ```
+ */
+declare const InvalidState: import("svelte").Component<{
+    class?: string;
+    message: any;
+    icon: any;
+    showIcon?: boolean;
+    animated?: boolean;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    message: any;
+    icon: any;
+    showIcon?: boolean;
+    animated?: boolean;
+    children: any;
+};