@hellboy/ds 0.1.3 → 0.2.7

package/src/components/header/index.ts

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

package/src/components/icons/icons.tsx

@@ -1,44 +0,0 @@
-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

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

package/src/components/index.ts

@@ -1,29 +0,0 @@
-/**
- * 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

@@ -1,133 +0,0 @@
-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

@@ -1,220 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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';