MicroClub Input

1'use client';
2 
3import * as React from 'react';
4import { Input as InputPrimitive } from '@base-ui/react/input';
5 
6import { cn } from '@/lib/utils';
7 
8export interface McInputProps extends React.ComponentProps<'input'> {
9  /** Label rendered above the input. */
10  label?: React.ReactNode;
11  /** Help text below the input. Replaced by error when present. */
12  description?: React.ReactNode;
13  /** Truthy = error state. ReactNode = renders the message. `true` = red border only. */
14  error?: React.ReactNode;
15  /** Inline-start addon (icons, text, dropdowns). */
16  addonStart?: React.ReactNode;
17  /** Inline-end addon (buttons, badges, spinners). */
18  addonEnd?: React.ReactNode;
19  /** Block-start addon (toolbar, controls above the input row). */
20  addonTop?: React.ReactNode;
21  /** Block-end addon (character count, status bar below the input row). */
22  addonBottom?: React.ReactNode;
23}
24 
25function McInput({
26  className,
27  label,
28  description,
29  error,
30  addonStart,
31  addonEnd,
32  addonTop,
33  addonBottom,
34  type,
35  id,
36  disabled,
37  required,
38  ...props
39}: McInputProps) {
40  const generatedId = React.useId();
41  const inputId = id ?? generatedId;
42 
43  const hasError = !!error;
44  const errorMessage = typeof error === 'boolean' ? null : error;
45  const showError = hasError && !!errorMessage;
46  const showDescription = !hasError && !!description;
47  const messageId = showError
48    ? `${inputId}-error`
49    : showDescription
50      ? `${inputId}-description`
51      : undefined;
52 
53  const handleGroupClick = (e: React.MouseEvent<HTMLDivElement>) => {
54    const target = e.target as HTMLElement;
55    if (!target.closest('button, a, input, select, textarea, [tabindex]')) {
56      e.currentTarget.querySelector<HTMLInputElement>('[data-slot="input"]')?.focus();
57    }
58  };
59 
60  return (
61    <div data-slot="input-root" className={cn('flex flex-col gap-1.5', className)}>
62      {label && (
63        <label
64          data-slot="input-label"
65          htmlFor={inputId}
66          className="text-sm font-medium text-muted-foreground"
67        >
68          {label}
69        </label>
70      )}
71 
72      <div
73        data-slot="input-group"
74        data-error={hasError || undefined}
75        data-disabled={disabled || undefined}
76        data-has-top={!!addonTop || undefined}
77        data-has-bottom={!!addonBottom || undefined}
78        role="group"
79        onClick={handleGroupClick}
80        className={cn(
81          // Structure
82// … truncated