@hellboy/ds 0.1.2

package/src/components/header/index.ts

@@ -0,0 +1 @@
+export { Header, type HeaderProps } from './header';

package/src/components/icons/icons.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Icon as IconifyIcon } from '@iconify/react';
+import '../../style/components/icons/icons.css';
+
+export type IconName = string; // Allow any string for famicons icons
+
+export interface IconProps {
+  name: IconName;
+  size?: number;
+  className?: string;
+  /** Render a skeleton placeholder instead of the real icon (useful while downloading/loading) */
+  loading?: boolean;
+  /** aria-label for icon-only buttons etc. */
+  'aria-label'?: string;
+}
+
+export const Icon: React.FC<IconProps> = ({ name, size = 24, className, loading = false, ...rest }) => {
+  // If name already has famicons: prefix, use it as-is, otherwise add the prefix
+  const iconName = name.startsWith('famicons:') ? name : `famicons:${name}`;
+
+  const classes = ['icon', className].filter(Boolean).join(' ');
+
+  if (loading) {
+    const style: React.CSSProperties = { width: size, height: size };
+    return (
+      <span
+        className={`${classes} icon--skeleton`}
+        style={style}
+        aria-hidden={rest['aria-label'] ? 'false' : 'true'}
+        {...(rest['aria-label'] ? { 'aria-label': rest['aria-label'] } : {})}
+      />
+    );
+  }
+
+  return (
+    <IconifyIcon
+      icon={iconName}
+      width={size}
+      height={size}
+      className={classes}
+      {...rest}
+    />
+  );
+};

package/src/components/icons/index.ts

@@ -0,0 +1 @@
+export { Icon, type IconProps, type IconName } from './icons';

package/src/components/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Design System Components
+ * Export all available components
+ */
+
+export * from './button';
+export * from './badge';
+export * from './checkbox';
+export * from './switch';
+export * from './layout';
+export * from './page';
+export * from './header';
+export * from './section';
+export * from './code-block';
+export * from './navbar';
+export * from './icons';
+export * from './theme-control';
+export * from './card';
+export * from './color-control';
+export * from './grid';
+export * from './slider';
+export * from './drag-handle';
+export * from './footer';
+export * from './input';
+export * from './list';
+export * from './radio';
+export * from './select';
+export * from './banner';
+export * from './floating-bar';

package/src/components/input/DatePicker.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+
+interface DatePickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+const MONTHS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+];
+
+const DAYS_OF_WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+export const DatePicker: React.FC<DatePickerProps> = ({ value, onChange, disabled }) => {
+  const parseDate = (dateStr: string) => {
+    if (!dateStr) {
+      const today = new Date();
+      return { year: today.getFullYear(), month: today.getMonth(), day: today.getDate() };
+    }
+    const [year, month, day] = dateStr.split('-').map(Number);
+    return { year, month: month - 1, day };
+  };
+
+  const { year: initialYear, month: initialMonth, day: selectedDay } = parseDate(value);
+  const [currentYear, setCurrentYear] = React.useState(initialYear);
+  const [currentMonth, setCurrentMonth] = React.useState(initialMonth);
+
+  const getDaysInMonth = (year: number, month: number) => {
+    return new Date(year, month + 1, 0).getDate();
+  };
+
+  const getFirstDayOfMonth = (year: number, month: number) => {
+    return new Date(year, month, 1).getDay();
+  };
+
+  const handleDateSelect = (day: number) => {
+    if (disabled) return;
+    const formattedDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    onChange(formattedDate);
+  };
+
+  const handlePrevMonth = () => {
+    if (currentMonth === 0) {
+      setCurrentMonth(11);
+      setCurrentYear(currentYear - 1);
+    } else {
+      setCurrentMonth(currentMonth - 1);
+    }
+  };
+
+  const handleNextMonth = () => {
+    if (currentMonth === 11) {
+      setCurrentMonth(0);
+      setCurrentYear(currentYear + 1);
+    } else {
+      setCurrentMonth(currentMonth + 1);
+    }
+  };
+
+  const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+  const firstDay = getFirstDayOfMonth(currentYear, currentMonth);
+  const days: (number | null)[] = [
+    ...Array(firstDay).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1)
+  ];
+
+  return (
+    <div className="date-picker">
+      <div className="date-picker__header">
+        <button
+          type="button"
+          className="date-picker__nav"
+          onClick={handlePrevMonth}
+          disabled={disabled}
+          aria-label="Previous month"
+        >
+          ‹
+        </button>
+        <div className="date-picker__title">
+          <select
+            className="date-picker__select"
+            value={currentMonth}
+            onChange={(e) => setCurrentMonth(Number(e.target.value))}
+            disabled={disabled}
+          >
+            {MONTHS.map((month, idx) => (
+              <option key={month} value={idx}>{month}</option>
+            ))}
+          </select>
+          <select
+            className="date-picker__select"
+            value={currentYear}
+            onChange={(e) => setCurrentYear(Number(e.target.value))}
+            disabled={disabled}
+          >
+            {Array.from({ length: 100 }, (_, i) => currentYear - 50 + i).map(year => (
+              <option key={year} value={year}>{year}</option>
+            ))}
+          </select>
+        </div>
+        <button
+          type="button"
+          className="date-picker__nav"
+          onClick={handleNextMonth}
+          disabled={disabled}
+          aria-label="Next month"
+        >
+          ›
+        </button>
+      </div>
+      <div className="date-picker__weekdays">
+        {DAYS_OF_WEEK.map(day => (
+          <div key={day} className="date-picker__weekday">{day}</div>
+        ))}
+      </div>
+      <div className="date-picker__days">
+        {days.map((day, idx) => (
+          <button
+            key={idx}
+            type="button"
+            className={`date-picker__day ${day === selectedDay ? 'date-picker__day--selected' : ''} ${!day ? 'date-picker__day--empty' : ''}`}
+            onClick={() => day && handleDateSelect(day)}
+            disabled={!day || disabled}
+          >
+            {day || ''}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/input/Input.tsx

@@ -0,0 +1,220 @@
+import * as React from 'react';
+import { InputField, InputFieldProps } from './InputField';
+import { Popover } from '../popover/popover';
+import { DatePicker } from './DatePicker';
+import { TimePicker } from './TimePicker';
+import '../../style/components/input/input.css';
+
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
+
+export interface InputProps extends Omit<InputFieldProps, 'type' | 'iconRight' | 'onRightIconClick'> {
+  /**
+   * Input type with extended support for date/time pickers
+   * @default 'text'
+   */
+  type?: InputType;
+
+  /**
+   * Show milliseconds in time picker (only for time type)
+   * @default false
+   */
+  showMilliseconds?: boolean;
+
+  /**
+   * Minute step in time picker (only for time type)
+   * @default 1
+   */
+  minuteStep?: 1 | 5 | 15 | 30;
+
+  /**
+   * Show clear button for search inputs when they have value
+   * @default true
+   */
+  showClear?: boolean;
+}
+
+const TYPE_ICON_MAP: Record<string, string> = {
+  email: 'mail',
+  password: 'lock-closed',
+  search: 'search',
+  date: 'calendar',
+  time: 'time',
+  'datetime-local': 'calendar',
+  tel: 'call',
+  url: 'link',
+};
+
+const formatDisplayValue = (val: string, inputType: InputType) => {
+  if (!val) return '';
+  if (inputType === 'date') {
+    const [year, month, day] = val.split('-');
+    return `${day}/${month}/${year}`;
+  }
+  if (inputType === 'time') {
+    return val; // Já vem formatado como HH:MM:SS
+  }
+  if (inputType === 'datetime-local') {
+    const [datePart, timePart] = val.split('T');
+    if (datePart && timePart) {
+      const [year, month, day] = datePart.split('-');
+      return `${day}/${month}/${year} ${timePart}`;
+    }
+    return val;
+  }
+  return val;
+};
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      type = 'text',
+      label,
+      helperText,
+      error,
+      icon,
+      fullWidth = false,
+      size = 'md',
+      className = '',
+      disabled,
+      id,
+      showMilliseconds = false,
+      minuteStep = 1,
+      showClear = true,
+      ...props
+    },
+    ref
+  ) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    const [showDateTimePicker, setShowDateTimePicker] = React.useState(false);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    // Determine icons
+    const leftIcon = icon || TYPE_ICON_MAP[type];
+    const isPasswordType = type === 'password';
+    const actualType = isPasswordType && showPassword ? 'text' : (type !== 'date' && type !== 'time' && type !== 'datetime-local' ? type : 'text');
+
+    // Right icon - either custom, password toggle, date/time picker, clear button, or type-based
+    const isDateTimeType = type === 'date' || type === 'time' || type === 'datetime-local';
+    const isSearchType = type === 'search';
+    const hasValue = props.value && String(props.value).length > 0;
+
+    const rightIconName = isPasswordType
+      ? showPassword
+        ? 'eye-off'
+        : 'eye'
+      : isDateTimeType
+      ? 'chevron-down'
+      : isSearchType && hasValue && showClear
+      ? 'x'
+      : undefined;
+
+    const handleRightIconClick = () => {
+      if (isPasswordType) {
+        setShowPassword(!showPassword);
+      } else if (isDateTimeType) {
+        setShowDateTimePicker(!showDateTimePicker);
+      } else if (isSearchType && hasValue && showClear) {
+        if (props.onChange) {
+          props.onChange({ target: { value: '' } } as any);
+        }
+      }
+    };
+
+    const handleDateTimeChange = (newValue: string) => {
+      if (props.onChange) {
+        props.onChange({ target: { value: newValue } } as any);
+      }
+    };
+
+    if (!isDateTimeType) {
+      return (
+        <InputField
+          ref={ref || inputRef}
+          type={actualType}
+          label={label}
+          helperText={helperText}
+          error={error}
+          icon={leftIcon}
+          iconRight={rightIconName}
+          onRightIconClick={handleRightIconClick}
+          fullWidth={fullWidth}
+          size={size}
+          className={className}
+          disabled={disabled}
+          id={id}
+          {...props}
+        />
+      );
+    }
+
+    // Date/Time picker rendering
+    return (
+      <div className={`input-container ${fullWidth ? 'input-container--full-width' : ''} ${className}`.trim()}>
+        {label && (
+          <label htmlFor={id} className="input__label">
+            {label}
+          </label>
+        )}
+        <Popover
+          trigger={
+            <InputField
+              ref={ref || inputRef}
+              type="text"
+              icon={leftIcon}
+              iconRight={rightIconName}
+              onRightIconClick={() => setShowDateTimePicker(!showDateTimePicker)}
+              fullWidth={fullWidth}
+              size={size}
+              disabled={disabled}
+              id={id}
+              value={formatDisplayValue(String(props.value || ''), type)}
+              placeholder={props.placeholder}
+              readOnly
+            />
+          }
+          isOpen={showDateTimePicker}
+          onToggle={() => setShowDateTimePicker(!showDateTimePicker)}
+          placement="bottom"
+        >
+          <div style={{ padding: '1rem' }}>
+            {(type === 'date' || type === 'datetime-local') && (
+              <DatePicker
+                value={(String(props.value || '')).split('T')[0]}
+                onChange={(newDate) => {
+                  if (type === 'datetime-local') {
+                    const time = (String(props.value || '')).split('T')[1] || '00:00:00';
+                    handleDateTimeChange(`${newDate}T${time}`);
+                  } else {
+                    handleDateTimeChange(newDate);
+                    setShowDateTimePicker(false);
+                  }
+                }}
+                disabled={disabled}
+              />
+            )}
+            {(type === 'time' || type === 'datetime-local') && (
+              <TimePicker
+                value={(String(props.value || '')).split('T')[1] || '00:00:00'}
+                onChange={(newTime) => {
+                  if (type === 'datetime-local') {
+                    const date = (String(props.value || '')).split('T')[0] || new Date().toISOString().split('T')[0];
+                    handleDateTimeChange(`${date}T${newTime}`);
+                  } else {
+                    handleDateTimeChange(newTime);
+                  }
+                }}
+                disabled={disabled}
+                showMilliseconds={showMilliseconds}
+                minuteStep={minuteStep}
+              />
+            )}
+          </div>
+        </Popover>
+        {error && <p className="input__message input__message--error">{error}</p>}
+        {helperText && !error && <p className="input__message">{helperText}</p>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/src/components/input/InputDate.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, InputProps } from './Input';
+
+export interface InputDateProps extends Omit<InputProps, 'type'> {}
+
+export const InputDate = React.forwardRef<HTMLInputElement, InputDateProps>((props, ref) => {
+  return <Input ref={ref} {...props} type="date" />;
+});
+
+InputDate.displayName = 'InputDate';

package/src/components/input/InputDateTime.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, InputProps } from './Input';
+
+export interface InputDateTimeProps extends Omit<InputProps, 'type'> {}
+
+export const InputDateTime = React.forwardRef<HTMLInputElement, InputDateTimeProps>((props, ref) => {
+  return <Input ref={ref} {...props} type="datetime-local" />;
+});
+
+InputDateTime.displayName = 'InputDateTime';

package/src/components/input/InputEmail.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, InputProps } from './Input';
+
+export interface InputEmailProps extends Omit<InputProps, 'type'> {}
+
+export const InputEmail = React.forwardRef<HTMLInputElement, InputEmailProps>((props, ref) => {
+  return <Input ref={ref} {...props} type="email" />;
+});
+
+InputEmail.displayName = 'InputEmail';

package/src/components/input/InputField.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { Icon } from '../icons/icons';
+import '../../style/components/input/input.css';
+
+export interface InputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+  /**
+   * Input native type (text, email, password, etc.)
+   */
+  type?: string;
+
+  /**
+   * Label text
+   */
+  label?: string;
+
+  /**
+   * Helper text shown below the input
+   */
+  helperText?: string;
+
+  /**
+   * Error message - when present, input is in error state
+   */
+  error?: string;
+
+  /**
+   * Icon name from our icon library (shown on the left)
+   */
+  icon?: string;
+
+  /**
+   * Icon name for the right side
+   */
+  iconRight?: string;
+
+  /**
+   * Full width input
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Size variant
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Custom class name
+   */
+  className?: string;
+
+  /**
+   * Right icon click handler
+   */
+  onRightIconClick?: () => void;
+}
+
+export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
+  (
+    {
+      type = 'text',
+      label,
+      helperText,
+      error,
+      icon,
+      iconRight,
+      fullWidth = false,
+      size = 'md',
+      className = '',
+      disabled,
+      id,
+      onRightIconClick,
+      ...props
+    },
+    ref
+  ) => {
+    const inputId = id || `input-${React.useId()}`;
+
+    const containerClasses = [
+      'input-container',
+      fullWidth && 'input-container--full-width',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const inputClasses = [
+      'input',
+      `input--${size}`,
+      error && 'input--error',
+      disabled && 'input--disabled',
+      icon && 'input--has-icon-left',
+      iconRight && 'input--has-icon-right',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <div className={containerClasses}>
+        {label && (
+          <label htmlFor={inputId} className="input__label">
+            {label}
+          </label>
+        )}
+        <div className="input__wrapper">
+          {icon && (
+            <span className="input__icon input__icon--left" aria-hidden="true">
+              <Icon name={icon as any} size={16} />
+            </span>
+          )}
+          <input
+            ref={ref}
+            type={type}
+            id={inputId}
+            className={inputClasses}
+            disabled={disabled}
+            {...props}
+          />
+          {iconRight && (
+            <button
+              type="button"
+              className="input__icon input__icon--right"
+              onClick={onRightIconClick}
+              tabIndex={-1}
+              aria-label="Icon action"
+            >
+              <Icon name={iconRight as any} size={16} />
+            </button>
+          )}
+        </div>
+        {error && <p className="input__message input__message--error">{error}</p>}
+        {helperText && !error && <p className="input__message">{helperText}</p>}
+      </div>
+    );
+  }
+);

package/src/components/input/InputNumber.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, InputProps } from './Input';
+
+export interface InputNumberProps extends Omit<InputProps, 'type'> {}
+
+export const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
+  return <Input ref={ref} {...props} type="number" />;
+});
+
+InputNumber.displayName = 'InputNumber';

package/src/components/input/InputPassword.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, InputProps } from './Input';
+
+export interface InputPasswordProps extends Omit<InputProps, 'type'> {}
+
+export const InputPassword = React.forwardRef<HTMLInputElement, InputPasswordProps>((props, ref) => {
+  return <Input ref={ref} {...props} type="password" />;
+});
+
+InputPassword.displayName = 'InputPassword';

package/src/components/input/InputSearch.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, InputProps } from './Input';
+
+export interface InputSearchProps extends Omit<InputProps, 'type'> {}
+
+export const InputSearch = React.forwardRef<HTMLInputElement, InputSearchProps>((props, ref) => {
+  return <Input ref={ref} {...props} type="search" />;
+});
+
+InputSearch.displayName = 'InputSearch';

package/src/components/input/InputTel.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, InputProps } from './Input';
+
+export interface InputTelProps extends Omit<InputProps, 'type'> {}
+
+export const InputTel = React.forwardRef<HTMLInputElement, InputTelProps>((props, ref) => {
+  return <Input ref={ref} {...props} type="tel" />;
+});
+
+InputTel.displayName = 'InputTel';

package/src/components/input/InputText.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, InputProps } from './Input';
+
+export interface InputTextProps extends Omit<InputProps, 'type'> {}
+
+export const InputText = React.forwardRef<HTMLInputElement, InputTextProps>((props, ref) => {
+  return <Input ref={ref} {...props} type="text" />;
+});
+
+InputText.displayName = 'InputText';

package/src/components/input/InputTime.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, InputProps } from './Input';
+
+export interface InputTimeProps extends Omit<InputProps, 'type'> {}
+
+export const InputTime = React.forwardRef<HTMLInputElement, InputTimeProps>((props, ref) => {
+  return <Input ref={ref} {...props} type="time" />;
+});
+
+InputTime.displayName = 'InputTime';

package/src/components/input/InputUrl.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, InputProps } from './Input';
+
+export interface InputUrlProps extends Omit<InputProps, 'type'> {}
+
+export const InputUrl = React.forwardRef<HTMLInputElement, InputUrlProps>((props, ref) => {
+  return <Input ref={ref} {...props} type="url" />;
+});
+
+InputUrl.displayName = 'InputUrl';