@neynar/ui 0.1.1 → 0.1.2

package/dist/components/ui/input.d.ts

@@ -1,87 +1,186 @@
 import * as React from "react";
 /**
- * A form input field component that displays text input or input-like elements
+ * Input - Versatile form input component for text, email, password, and other input types
  *
- * A flexible input component based on shadcn/ui patterns that supports all native HTML input types
- * and integrates seamlessly with form libraries like React Hook Form. Provides consistent styling,
- * accessibility features, and error states across different input types.
+ * A flexible and accessible input component built on native HTML input elements with enhanced
+ * styling and form integration capabilities. Supports all HTML input types including text, email,
+ * password, number, file, date, and more. Features consistent design tokens, error states, focus
+ * management, and seamless integration with form libraries like React Hook Form.
  *
  * @example
  * ```tsx
- * // Basic email input
- * <Input type="email" placeholder="Email" />
+ * // Basic text input
+ * <Input type="text" placeholder="Enter your name" />
  * ```
  *
  * @example
  * ```tsx
- * // Input with label for accessibility
- * <div className="space-y-2">
- *   <Label htmlFor="email">Email</Label>
- *   <Input id="email" type="email" placeholder="Enter your email" />
+ * // Email input with validation
+ * <Input
+ *   type="email"
+ *   placeholder="your@email.com"
+ *   required
+ *   aria-describedby="email-error"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Password input with toggle visibility
+ * <div className="relative">
+ *   <Input
+ *     type="password"
+ *     placeholder="Enter password"
+ *     autoComplete="current-password"
+ *   />
+ *   <Button
+ *     type="button"
+ *     variant="ghost"
+ *     size="sm"
+ *     className="absolute right-0 top-0 h-full px-3"
+ *   >
+ *     <Eye className="h-4 w-4" />
+ *   </Button>
  * </div>
  * ```
  *
  * @example
  * ```tsx
+ * // Number input with min/max constraints
+ * <Input
+ *   type="number"
+ *   placeholder="Age"
+ *   min={0}
+ *   max={120}
+ *   step={1}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
  * // File input with proper labeling
  * <div className="grid w-full max-w-sm items-center gap-1.5">
- *   <Label htmlFor="picture">Picture</Label>
- *   <Input id="picture" type="file" />
+ *   <Label htmlFor="picture">Profile Picture</Label>
+ *   <Input
+ *     id="picture"
+ *     type="file"
+ *     accept="image/*"
+ *     aria-describedby="file-help"
+ *   />
+ *   <p id="file-help" className="text-sm text-muted-foreground">
+ *     Upload a PNG, JPG or GIF (max 5MB)
+ *   </p>
  * </div>
  * ```
  *
  * @example
  * ```tsx
- * // Disabled input state
- * <Input disabled type="email" placeholder="Email" />
+ * // Search input with icon
+ * <div className="relative">
+ *   <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground" />
+ *   <Input
+ *     type="search"
+ *     placeholder="Search..."
+ *     className="pl-8"
+ *   />
+ * </div>
  * ```
  *
  * @example
  * ```tsx
- * // Input with button for subscription forms
- * <div className="flex w-full max-w-sm items-center space-x-2">
- *   <Input type="email" placeholder="Email" />
- *   <Button type="submit">Subscribe</Button>
+ * // Input with error state
+ * <div className="space-y-2">
+ *   <Label htmlFor="email">Email</Label>
+ *   <Input
+ *     id="email"
+ *     type="email"
+ *     aria-invalid={true}
+ *     aria-describedby="email-error"
+ *   />
+ *   <p id="email-error" className="text-sm text-destructive">
+ *     Please enter a valid email address
+ *   </p>
  * </div>
  * ```
  *
  * @example
  * ```tsx
  * // Form integration with React Hook Form
- * const form = useForm();
+ * const { register, formState: { errors } } = useForm();
  *
- * <Form>
- *   <FormField
- *     control={form.control}
- *     name="email"
- *     render={({ field }) => (
- *       <FormItem>
- *         <FormLabel>Email</FormLabel>
- *         <FormControl>
- *           <Input placeholder="shadcn" {...field} />
- *         </FormControl>
- *         <FormMessage />
- *       </FormItem>
- *     )}
+ * <div className="space-y-2">
+ *   <Label htmlFor="username">Username</Label>
+ *   <Input
+ *     id="username"
+ *     {...register("username", { required: "Username is required" })}
+ *     aria-invalid={!!errors.username}
+ *     aria-describedby={errors.username ? "username-error" : undefined}
+ *   />
+ *   {errors.username && (
+ *     <p id="username-error" className="text-sm text-destructive">
+ *       {errors.username.message}
+ *     </p>
+ *   )}
+ * </div>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Input with button (subscription form)
+ * <div className="flex w-full max-w-sm items-center space-x-2">
+ *   <Input
+ *     type="email"
+ *     placeholder="Enter your email"
+ *     aria-label="Email for newsletter"
  *   />
- * </Form>
+ *   <Button type="submit">Subscribe</Button>
+ * </div>
  * ```
  *
- * @param className - Additional CSS classes to apply to the input
- * @param type - The input type (text, email, password, file, etc.)
- * @param props - All other standard HTML input attributes
+ * @example
+ * ```tsx
+ * // Disabled input with explanation
+ * <div className="space-y-2">
+ *   <Label htmlFor="readonly-field">System Generated ID</Label>
+ *   <Input
+ *     id="readonly-field"
+ *     value="SYS-12345"
+ *     disabled
+ *     aria-describedby="readonly-help"
+ *   />
+ *   <p id="readonly-help" className="text-sm text-muted-foreground">
+ *     This value is automatically generated and cannot be edited
+ *   </p>
+ * </div>
+ * ```
  *
  * @accessibility
- * - Supports all ARIA attributes including aria-invalid for error states
- * - Focus visible ring with proper contrast for keyboard navigation
+ * - Provides proper focus management with visible focus ring (focus-visible:ring-ring/50)
+ * - Supports all ARIA attributes including aria-invalid for error state indication
  * - Compatible with screen readers and assistive technologies
- * - Proper semantic markup for form fields
- * - Disabled state prevents interaction and indicates unavailability
+ * - Maintains proper tab order and keyboard navigation patterns
+ * - Disabled state prevents interaction and is announced to screen readers
+ * - File inputs provide accessible file selection with proper labeling
+ * - Error states are properly associated with inputs via aria-describedby
+ * - Required fields can be marked with aria-required for screen reader users
+ * - Placeholder text provides input guidance but doesn't replace proper labels
+ * - Text selection has optimized contrast with custom selection colors
+ *
+ * @styling
+ * - Uses consistent design tokens from the design system
+ * - Adaptive height (h-9) with responsive text sizing (md:text-sm)
+ * - Smooth transitions for focus states and interactions
+ * - Custom file input styling that matches the design system
+ * - Error state styling with destructive border and focus ring colors
+ * - Dark mode support with semi-transparent background (dark:bg-input/30)
+ * - Proper spacing and typography hierarchy for form layouts
  *
- * @see {@link https://ui.shadcn.com/docs/components/input} - shadcn/ui Input documentation
- * @see {@link Label} - For accessible input labels
- * @see {@link Button} - Often used alongside inputs in forms
- * @see {@link Form} - For complete form integration with validation
+ * @see {@link https://ui.shadcn.com/docs/components/input} shadcn/ui Input documentation
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input} MDN Input element reference
+ * @see {@link Label} For accessible input labels and proper association
+ * @see {@link Button} Often used alongside inputs in forms and search interfaces
+ * @see {@link Form} Complete form integration with validation and error handling
+ * @see {@link Textarea} For multi-line text input needs
  * @since 1.0.0
  */
 declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAc1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuLG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAc1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/ui/label.d.ts

@@ -80,14 +80,6 @@ import * as LabelPrimitive from "@radix-ui/react-label";
  * @see {@link https://www.w3.org/WAI/tutorials/forms/labels/} - W3C Label best practices
  * @since 1.0.0
  */
-/**
- * Label component props extending Radix UI Label Root props
- *
- * @param className - Additional CSS classes to apply to the label
- * @param htmlFor - The id of the form element this label is associated with
- * @param children - The label content (text, elements, or components)
- * @param ...props - All other props are forwarded to the underlying Radix Label component
- */
 declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 export { Label };
 //# sourceMappingURL=label.d.ts.map

package/dist/components/ui/label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAIxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH;;;;;;;GAOG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAWlD;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAsGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAWlD;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}