@stackloop/ui 4.0.8 → 4.0.10

package/README.md

@@ -47,7 +47,6 @@ If using Tailwind CSS v4 with `@theme`, the library's theme variables are alread
 @theme {
   /* Override library colors */
   --color-primary: #your-color;
-  --color-primary-dark: #your-darker-color;
   --color-border: #your-border-color;
   --color-border-dark: #your-darker-border;
   --color-secondary: #your-secondary-bg;
@@ -88,7 +87,6 @@ The library uses a simplified color system with semantic variables:
 | Variable | Default | Description |
 |----------|---------|-------------|
 | `--color-primary` | `#525252` | Primary brand color |
-| `--color-primary-dark` | `#404040` | Darker primary variant |
 | `--color-border` | `#e5e5e5` | Default border color |
 | `--color-border-dark` | `#d4d4d4` | Darker border variant |
 | `--color-secondary` | `#fafafa` | Secondary background |
@@ -110,7 +108,6 @@ Create a custom theme file or extend the existing one:
 @theme {
   /* Brand colors */
   --color-primary: #3b82f6;
-  --color-primary-dark: #2563eb;
   
   /* Borders */
   --color-border: #e2e8f0;
@@ -228,10 +225,10 @@ Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avo
 **Input**:
 - **Description:** Unified input API with smart type routing. Supports native text/password/email/etc plus `phone`, `country`, and `date` while keeping a consistent `value` + `onChange` pattern.
 - **Props:**
-  - **`type`**: Native HTML input types plus `'phone' | 'country'`.
+  - **`type`**: Native HTML input types plus `'phone' | 'tel' | 'country'`.
     - `type="date"` renders the library `DatePicker`.
     - `type="country"` renders `CountrySelect`.
-    - `type="phone"` renders `PhoneInput`.
+    - `type="phone"` and `type="tel"` render `PhoneInput`.
   - **`value`**: `string | number | readonly string[] | Date`.
   - **`onChange`**: `(value: string | Date) => void` — value-based callback used consistently across smart/native modes.
   - **`onValueChange`**: `(value: string | Date) => void` — optional backward-compatible alias.
@@ -254,10 +251,14 @@ Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avo
   import { Input } from '@stackloop/ui'
 
   <Input label="Email" placeholder="you@example.com" />
+  <Input label="Phone" type="phone" value={phone} onChange={setPhone} />
+  <Input label="Telephone" type="tel" value={phone} onChange={setPhone} />
   
   // Password with automatic toggle
   <Input label="Password" type="password" placeholder="Enter password" />
 
+
+- **Compatibility note:** Regular HTML input types still render a native `<input />`, so existing usage such as `type="email"`, `type="number"`, and `type="text"` remains unchanged.
   // Phone (single combined value)
   <Input
     label="Phone"

package/dist/Input.d.ts

@@ -1,16 +1,39 @@
 import React from 'react';
-type SmartInputType = React.HTMLInputTypeAttribute | 'country' | 'phone';
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
-    type?: SmartInputType;
-    value?: string | number | readonly string[] | Date;
-    onChange?: (value: string | Date) => void;
-    onValueChange?: (value: string | Date) => void;
+import { DatePicker } from './DatePicker';
+import { CountrySelect } from './CountrySelect';
+import { PhoneInput } from './PhoneInput';
+type InputValue = string | Date;
+type NativeInputType = Exclude<React.HTMLInputTypeAttribute, 'date' | 'phone' | 'country' | 'tel'>;
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> & {
+    type?: NativeInputType;
+    value?: string | number | readonly string[];
+    onChange?: (value: InputValue) => void;
+    onValueChange?: (value: InputValue) => void;
     label?: string;
     error?: string;
     hint?: string;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     animate?: boolean;
-}
+};
+type PhoneInputFieldProps = Omit<React.ComponentProps<typeof PhoneInput>, 'value' | 'onChange'> & {
+    type: 'phone' | 'tel';
+    value?: string;
+    onChange?: (value: InputValue) => void;
+    onValueChange?: (value: InputValue) => void;
+};
+type CountrySelectInputProps = Omit<React.ComponentProps<typeof CountrySelect>, 'value' | 'onChange'> & {
+    type: 'country';
+    value?: string;
+    onChange?: (value: InputValue) => void;
+    onValueChange?: (value: InputValue) => void;
+};
+type DatePickerInputProps = Omit<React.ComponentProps<typeof DatePicker>, 'value' | 'onChange'> & {
+    type: 'date';
+    value?: Date;
+    onChange?: (value: InputValue) => void;
+    onValueChange?: (value: InputValue) => void;
+};
+export type InputProps = NativeInputProps | PhoneInputFieldProps | CountrySelectInputProps | DatePickerInputProps;
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};