twintrinsic 0.0.1

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

@@ -0,0 +1,78 @@
+export default FileUpload;
+type FileUpload = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * FileUpload - A component for uploading files with drag and drop support.
+ * Provides consistent styling, accessibility features, and various display options.
+ *
+ * Usage:
+ * ```svelte
+ * <FileUpload
+ * onchange={handleFiles}
+ * accept="image/*"
+ * multiple
+ * />
+ *
+ * <FileUpload
+ * value={existingFiles}
+ * maxFiles={5}
+ * maxSize={5242880}
+ * onchange={handleFiles}
+ * onerror={handleError}
+ * >
+ * <div slot="dropzone">
+ *   <p>Drag files here or click to browse</p>
+ * </div>
+ * </FileUpload>
+ * ```
+ */
+declare const FileUpload: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    name: any;
+    value?: any[];
+    accept: any;
+    multiple?: boolean;
+    disabled?: boolean;
+    maxFiles: any;
+    maxSize: any;
+    showPreviews?: boolean;
+    autoUpload?: boolean;
+    uploadUrl: any;
+    uploadHeaders: any;
+    browseLabel?: string;
+    dropzoneLabel?: string;
+    ariaLabel?: string;
+    onchange: any;
+    onerror: any;
+    onprogress: any;
+    onsuccess: any;
+    dropzone: any;
+    previews: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    name: any;
+    value?: any[];
+    accept: any;
+    multiple?: boolean;
+    disabled?: boolean;
+    maxFiles: any;
+    maxSize: any;
+    showPreviews?: boolean;
+    autoUpload?: boolean;
+    uploadUrl: any;
+    uploadHeaders: any;
+    browseLabel?: string;
+    dropzoneLabel?: string;
+    ariaLabel?: string;
+    onchange: any;
+    onerror: any;
+    onprogress: any;
+    onsuccess: any;
+    dropzone: any;
+    previews: any;
+};

package/dist/components/Form/FloatLabel.svelte

@@ -0,0 +1,245 @@
+<!--
+@component
+FloatLabel - A component for creating form inputs with animated floating labels.
+Provides a modern, space-efficient input with improved user experience.
+
+Usage:
+```svelte
+<FloatLabel label="Username">
+  <TextInput name="username" />
+</FloatLabel>
+
+<FloatLabel label="Email" required>
+  <TextInput type="email" name="email" />
+</FloatLabel>
+
+<FloatLabel label="Message">
+  <Textarea name="message" rows={3} />
+</FloatLabel>
+```
+-->
+<script>
+import { onMount } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Label text */
+  label,
+
+  /** @type {boolean} - Whether the input is required */
+  required = false,
+
+  /** @type {boolean} - Whether the input is disabled */
+  disabled = false,
+
+  /** @type {string} - Error message to display */
+  error,
+
+  /** @type {string} - Help text to display below the input */
+  helpText,
+
+  children,
+} = $props()
+
+// Component state
+let inputElement
+let isFocused = $state(false)
+let hasValue = $state(false)
+let isFloating = $state(false)
+
+/**
+ * Checks if the input has a value
+ */
+function checkValue() {
+  if (!inputElement) return
+
+  // Find the actual input element (could be nested)
+  const input = findInputElement(inputElement)
+
+  if (input) {
+    hasValue = !!input.value
+  }
+
+  // Update floating state
+  isFloating = isFocused || hasValue
+}
+
+/**
+ * Recursively finds an input element
+ * @param {HTMLElement} element - Element to search in
+ * @returns {HTMLElement|null} - Found input element or null
+ */
+function findInputElement(element) {
+  // Check if this is an input, textarea, or select
+  if (
+    element.tagName === "INPUT" ||
+    element.tagName === "TEXTAREA" ||
+    element.tagName === "SELECT"
+  ) {
+    return element
+  }
+
+  // Check children
+  const inputs = element.querySelectorAll("input, textarea, select")
+  if (inputs.length > 0) {
+    return inputs[0]
+  }
+
+  return null
+}
+
+/**
+ * Handles focus event
+ */
+function handleFocus() {
+  isFocused = true
+  isFloating = true
+}
+
+/**
+ * Handles blur event
+ */
+function handleBlur() {
+  isFocused = false
+  checkValue()
+}
+
+/**
+ * Handles input event
+ */
+function handleInput() {
+  checkValue()
+}
+
+// Initialize component
+onMount(() => {
+  if (inputElement) {
+    // Find the actual input element
+    const input = findInputElement(inputElement)
+
+    if (input) {
+      // Add event listeners
+      input.addEventListener("focus", handleFocus)
+      input.addEventListener("blur", handleBlur)
+      input.addEventListener("input", handleInput)
+
+      // Initial check
+      checkValue()
+
+      // Clean up
+      return () => {
+        input.removeEventListener("focus", handleFocus)
+        input.removeEventListener("blur", handleBlur)
+        input.removeEventListener("input", handleInput)
+      }
+    }
+  }
+})
+</script>
+
+<div
+  class="
+    float-label-wrapper
+    {isFocused ? 'is-focused' : ''}
+    {isFloating ? 'is-floating' : ''}
+    {hasValue ? 'has-value' : ''}
+    {error ? 'has-error' : ''}
+    {disabled ? 'is-disabled' : ''}
+    {className}
+  "
+>
+  <div class="float-label-container">
+    {#if label}
+      <label
+        for={id}
+        class="float-label"
+      >
+        {label}
+        {#if required}
+          <span class="required-indicator" aria-hidden="true">*</span>
+          <span class="sr-only">required</span>
+        {/if}
+      </label>
+    {/if}
+    
+    <div class="float-label-input" bind:this={inputElement}>
+      {@render children?.()}
+    </div>
+  </div>
+  
+  {#if error}
+    <div class="float-label-error" role="alert">
+      {error}
+    </div>
+  {/if}
+  
+  {#if helpText && !error}
+    <div class="float-label-help">
+      {helpText}
+    </div>
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .float-label-wrapper {
+    @apply w-full;
+  }
+  
+  .float-label-container {
+    @apply relative;
+  }
+  
+  .float-label {
+    @apply absolute left-3 top-1/2 -translate-y-1/2;
+    @apply text-muted dark:text-muted;
+    @apply pointer-events-none transition-all duration-200;
+    @apply text-base;
+  }
+  
+  .is-floating .float-label {
+    @apply text-xs top-0 -translate-y-1/2;
+    @apply bg-background dark:bg-background px-1;
+  }
+  
+  .is-focused .float-label {
+    @apply text-primary-500 dark:text-primary-400;
+  }
+  
+  .has-error .float-label {
+    @apply text-error-500 dark:text-error-400;
+  }
+  
+  .float-label-input {
+    @apply w-full;
+  }
+  
+  /* Style child inputs */
+  .float-label-input :global(input),
+  .float-label-input :global(textarea),
+  .float-label-input :global(select) {
+    @apply pt-4 pb-2;
+  }
+  
+  .required-indicator {
+    @apply ml-1 text-error-500 dark:text-error-400;
+  }
+  
+  .float-label-error {
+    @apply mt-1 text-xs text-error-600 dark:text-error-400;
+  }
+  
+  .float-label-help {
+    @apply mt-1 text-xs text-muted dark:text-muted;
+  }
+  
+  .is-disabled {
+    @apply opacity-60 pointer-events-none;
+  }
+</style>

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

@@ -0,0 +1,44 @@
+export default FloatLabel;
+type FloatLabel = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * FloatLabel - A component for creating form inputs with animated floating labels.
+ * Provides a modern, space-efficient input with improved user experience.
+ *
+ * Usage:
+ * ```svelte
+ * <FloatLabel label="Username">
+ * <TextInput name="username" />
+ * </FloatLabel>
+ *
+ * <FloatLabel label="Email" required>
+ * <TextInput type="email" name="email" />
+ * </FloatLabel>
+ *
+ * <FloatLabel label="Message">
+ * <Textarea name="message" rows={3} />
+ * </FloatLabel>
+ * ```
+ */
+declare const FloatLabel: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    label: any;
+    required?: boolean;
+    disabled?: boolean;
+    error: any;
+    helpText: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    label: any;
+    required?: boolean;
+    disabled?: boolean;
+    error: any;
+    helpText: any;
+    children: any;
+};

package/dist/components/Form/Form.svelte

@@ -0,0 +1,281 @@
+<!--
+@component
+Form - A component for creating accessible, styled forms with validation support.
+Handles form submission, validation, and provides context for form controls.
+
+Usage:
+```svelte
+<Form onsubmit={handleSubmit}>
+  <FormField label="Username" name="username" required>
+    <TextInput />
+  </FormField>
+  
+  <FormField label="Email" name="email" required type="email">
+    <TextInput type="email" />
+  </FormField>
+  
+  <Button type="submit">Submit</Button>
+</Form>
+```
+-->
+<script>
+import { setContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Form method (get or post) */
+  method = "post",
+
+  /** @type {string} - Form action URL */
+  action = "",
+
+  /** @type {boolean} - Whether to validate the form on submission */
+  validate = true,
+
+  /** @type {boolean} - Whether to use the browser's built-in validation UI */
+  useNativeValidation = true,
+
+  /** @type {string} - Layout direction (vertical or horizontal) */
+  layout = "vertical",
+
+  /** @type {boolean} - Whether to disable all form controls */
+  disabled = false,
+
+  /** @type {boolean} - Whether the form is in a loading state */
+  loading = false,
+
+  /** @type {(event: CustomEvent) => void} - Submit event handler */
+  onsubmit,
+  /** @type {(event: CustomEvent) => void} - Change event handler */
+  onchange,
+  /** @type {(event: CustomEvent) => void} - Error event handler */
+  onerror,
+
+  children,
+} = $props()
+
+// Form state
+let formElement
+let formData = $state({})
+let errors = $state({})
+let touched = $state({})
+let isSubmitting = $state(false)
+let isValid = $state(true)
+
+/**
+ * Updates a field's value in the form data
+ * @param {string} name - Field name
+ * @param {any} value - Field value
+ */
+function updateField(name, value) {
+  formData[name] = value
+  touched[name] = true
+
+  // Validate the field if needed
+  if (validate) {
+    validateField(name, value)
+  }
+}
+
+/**
+ * Validates a single field
+ * @param {string} name - Field name
+ * @param {any} value - Field value
+ * @returns {boolean} - Whether the field is valid
+ */
+function validateField(name, value) {
+  const field = formElement?.elements[name]
+
+  if (!field) return true
+
+  // Clear existing errors for this field
+  delete errors[name]
+
+  // Use HTML5 validation API
+  if (field.validity) {
+    if (!field.validity.valid) {
+      errors[name] = field.validationMessage
+      return false
+    }
+  }
+
+  return true
+}
+
+/**
+ * Validates the entire form
+ * @returns {boolean} - Whether the form is valid
+ */
+function validateForm() {
+  // Reset errors
+  errors = {}
+
+  // Check all fields
+  let valid = true
+
+  if (formElement) {
+    const formControls = Array.from(formElement.elements)
+
+    formControls.forEach((field) => {
+      if (field.name) {
+        const fieldValid = validateField(field.name, field.value)
+        if (!fieldValid) {
+          valid = false
+        }
+      }
+    })
+  }
+
+  isValid = valid
+  return valid
+}
+
+/**
+ * Handles form submission
+ * @param {Event} event - Submit event
+ */
+function handleSubmit(event) {
+  // Prevent default form submission
+  event.preventDefault()
+
+  // Mark all fields as touched
+  if (formElement) {
+    const formControls = Array.from(formElement.elements)
+    formControls.forEach((field) => {
+      if (field.name) {
+        touched[field.name] = true
+      }
+    })
+  }
+
+  // Validate if needed
+  if (validate) {
+    if (!validateForm()) {
+      // If validation fails, don't submit
+      onerror?.(new CustomEvent("invalid", { detail: { errors } }))
+      return
+    }
+  }
+
+  // Set submitting state
+  isSubmitting = true
+
+  // Get form data
+  const formDataObj = new FormData(formElement)
+  const dataObj = {}
+
+  for (const [key, value] of formDataObj.entries()) {
+    dataObj[key] = value
+  }
+
+  // Dispatch submit event with form data
+  onsubmit?.(new CustomEvent("submit", { detail: {
+    data: dataObj,
+    formData: formDataObj,
+    form: formElement,
+  } }))
+
+  // Reset submitting state after a short delay
+  setTimeout(() => {
+    isSubmitting = false
+  }, 100)
+}
+
+/**
+ * Resets the form to its initial state
+ */
+function resetForm() {
+  if (formElement) {
+    formElement.reset()
+    formData = {}
+    errors = {}
+    touched = {}
+    isValid = true
+  }
+}
+
+// Provide form context to child components
+$effect(() => {
+  setContext("form", {
+    registerField: (name, initialValue) => {
+      if (initialValue !== undefined && formData[name] === undefined) {
+        formData[name] = initialValue
+      }
+
+      return {
+        getValue: () => formData[name],
+        setValue: (value) => updateField(name, value),
+        getError: () => errors[name],
+        isTouched: () => !!touched[name],
+        isDisabled: () => disabled || loading || isSubmitting,
+      }
+    },
+    layout,
+    disabled: () => disabled || loading || isSubmitting,
+  })
+})
+
+// Expose form API to parent components
+const formApi = {
+  reset: resetForm,
+  validate: validateForm,
+  setValues: (values) => {
+    formData = { ...formData, ...values }
+  },
+  getValues: () => ({ ...formData }),
+  setErrors: (newErrors) => {
+    errors = { ...errors, ...newErrors }
+    isValid = Object.keys(errors).length === 0
+  },
+  clearErrors: () => {
+    errors = {}
+    isValid = true
+  },
+}
+
+// Expose form API to parent
+dispatch("ready", { form: formApi })
+</script>
+
+<form
+  {id}
+  class="form {layout === 'horizontal' ? 'form-horizontal' : 'form-vertical'} {className}"
+  class:disabled
+  class:loading={loading || isSubmitting}
+  {method}
+  {action}
+  novalidate={!useNativeValidation}
+  onsubmit={handleSubmit}
+  bind:this={formElement}
+>
+  {@render children?.()}
+</form>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .form {
+    @apply w-full;
+  }
+  
+  .form-vertical {
+    @apply space-y-4;
+  }
+  
+  .form-horizontal {
+    @apply grid gap-4;
+  }
+  
+  .form.disabled {
+    @apply opacity-70 pointer-events-none;
+  }
+  
+  .form.loading {
+    @apply opacity-70;
+  }
+</style>

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

@@ -0,0 +1,54 @@
+export default Form;
+type Form = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Form - A component for creating accessible, styled forms with validation support.
+ * Handles form submission, validation, and provides context for form controls.
+ *
+ * Usage:
+ * ```svelte
+ * <Form onsubmit={handleSubmit}>
+ * <FormField label="Username" name="username" required>
+ *   <TextInput />
+ * </FormField>
+ *
+ * <FormField label="Email" name="email" required type="email">
+ *   <TextInput type="email" />
+ * </FormField>
+ *
+ * <Button type="submit">Submit</Button>
+ * </Form>
+ * ```
+ */
+declare const Form: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    method?: string;
+    action?: string;
+    validate?: boolean;
+    useNativeValidation?: boolean;
+    layout?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    onsubmit: any;
+    onchange: any;
+    onerror: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    method?: string;
+    action?: string;
+    validate?: boolean;
+    useNativeValidation?: boolean;
+    layout?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    onsubmit: any;
+    onchange: any;
+    onerror: any;
+    children: any;
+};