@abstraks-dev/ui-library 1.0.1

package/dist/components/TextArea.js

@@ -0,0 +1,370 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextArea = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _Label = require("./Label");
+var _Error = require("./Error");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /*eslint-disable no-unused-vars*/ // components
+/**
+ * TextArea Component
+ *
+ * A fully accessible, modern textarea component following WCAG 2.1 AA guidelines.
+ * Features keyboard navigation, screen reader support, character counting, and validation.
+ *
+ * This is a stateless component - state management should be handled externally.
+ * Use with the useTextAreaAccessibility hook for complete functionality.
+ *
+ * @component
+ * @example
+ * <TextArea
+ *   id="description"
+ *   label="Description"
+ *   value={description}
+ *   onChange={handleChange}
+ *   maxLength={500}
+ *   required
+ *   rows={4}
+ * />
+ */
+const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  name,
+  label,
+  value = '',
+  onChange,
+  onFocus,
+  onBlur,
+  // Validation props
+  required = false,
+  error = false,
+  errorText = '',
+  maxLength,
+  minLength,
+  // Appearance props
+  rows = 4,
+  cols,
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  resize = 'vertical',
+  // Layout props
+  className = '',
+  variant = 'default',
+  size = 'medium',
+  // Accessibility props
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  'aria-describedby': ariaDescribedby,
+  'aria-invalid': ariaInvalid,
+  // Character count props
+  showCharacterCount = false,
+  characterCountThreshold = 0.8,
+  // Legacy props (for backward compatibility - internal use only)
+  componentName = 'text-area',
+  additionalClassName = '',
+  noLabel = false,
+  setName,
+  inputValue,
+  onChangeFunc,
+  focus,
+  blur,
+  placeHolder,
+  inputEl
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || setName;
+  const finalName = name || setName;
+  const finalLabel = label || setName;
+  const finalValue = value || inputValue || '';
+  const finalOnChange = onChange || onChangeFunc;
+  const finalOnFocus = onFocus || focus;
+  const finalOnBlur = onBlur || blur;
+  const finalPlaceholder = placeholder || placeHolder;
+  const finalClassName = className || additionalClassName;
+  const showLabel = !noLabel;
+
+  // Generate unique IDs for accessibility
+  const textareaId = finalId || `textarea-${Math.random().toString(36).substr(2, 9)}`;
+  const errorId = `${textareaId}-error`;
+  const charCountId = `${textareaId}-char-count`;
+  const helpTextId = `${textareaId}-help`;
+
+  // Calculate character count info
+  const charCount = finalValue.length;
+  const remainingChars = maxLength ? maxLength - charCount : null;
+  const isOverLimit = maxLength && charCount > maxLength;
+  const isNearLimit = maxLength && charCount >= maxLength * characterCountThreshold;
+
+  // Build aria-describedby
+  const describedByIds = [];
+  if (ariaDescribedby) describedByIds.push(ariaDescribedby);
+  if (error && errorText) describedByIds.push(errorId);
+  if (showCharacterCount && maxLength) describedByIds.push(charCountId);
+  const finalAriaDescribedby = describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
+
+  // Determine aria-invalid
+  const finalAriaInvalid = ariaInvalid || (error ? 'true' : undefined);
+
+  // Build CSS classes
+  const wrapperClasses = [`${componentName}-wrapper`, finalClassName, `${componentName}-wrapper--${variant}`, `${componentName}-wrapper--${size}`, error && `${componentName}-wrapper--error`, disabled && `${componentName}-wrapper--disabled`, readOnly && `${componentName}-wrapper--readonly`].filter(Boolean).join(' ');
+  const textareaClasses = ['text-area', `text-area--${variant}`, `text-area--${size}`, `text-area--resize-${resize}`, error && 'text-area--error', disabled && 'text-area--disabled', readOnly && 'text-area--readonly'].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClasses,
+    "data-testid": `${componentName}-wrapper`
+  }, showLabel && finalLabel && /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    htmlFor: textareaId,
+    required: required,
+    labelText: finalLabel,
+    className: `${componentName}__label`
+  }), /*#__PURE__*/_react.default.createElement("textarea", _extends({
+    ref: ref,
+    id: textareaId,
+    name: finalName,
+    value: finalValue,
+    onChange: finalOnChange,
+    onFocus: finalOnFocus,
+    onBlur: finalOnBlur,
+    className: textareaClasses,
+    "data-testid": "text-area"
+    // Validation attributes
+    ,
+    required: required,
+    maxLength: maxLength,
+    minLength: minLength
+    // Appearance attributes
+    ,
+    rows: rows,
+    cols: cols,
+    placeholder: finalPlaceholder,
+    disabled: disabled,
+    readOnly: readOnly
+    // Accessibility attributes
+    ,
+    "aria-label": ariaLabel
+  }, !showLabel && {
+    'aria-labelledby': ariaLabelledby
+  }, {
+    "aria-describedby": finalAriaDescribedby,
+    "aria-invalid": finalAriaInvalid,
+    "aria-required": required || undefined
+  })), showCharacterCount && maxLength && /*#__PURE__*/_react.default.createElement("div", {
+    id: charCountId,
+    className: `${componentName}__char-count ${isOverLimit ? `${componentName}__char-count--error` : isNearLimit ? `${componentName}__char-count--warning` : ''}`,
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}__char-count-text`
+  }, isOverLimit ? `${Math.abs(remainingChars)} characters over limit` : `${remainingChars} characters remaining`), /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}__char-count-numbers`
+  }, charCount, "/", maxLength)), error && errorText && /*#__PURE__*/_react.default.createElement(_Error.Error, {
+    id: errorId,
+    className: `${componentName}__error`,
+    role: "alert",
+    "aria-live": "polite"
+  }, errorText));
+});
+
+// Set display name for debugging
+TextArea.displayName = 'TextArea';
+TextArea.propTypes = {
+  // ====================
+  // Core Props
+  // ====================
+
+  /**
+   * Unique identifier for the textarea
+   */
+  id: _propTypes.string,
+  /**
+   * Additional CSS classes to apply to the component
+   */
+  className: _propTypes.string,
+  /**
+   * Name attribute for the textarea (used for form submission)
+   */
+  name: _propTypes.string,
+  // ====================
+  // Content Props
+  // ====================
+
+  /**
+   * Label text for the textarea
+   */
+  label: _propTypes.string,
+  /**
+   * Current value of the textarea
+   */
+  value: _propTypes.string,
+  /**
+   * Placeholder text to display when empty
+   */
+  placeholder: _propTypes.string,
+  // ====================
+  // Appearance Props
+  // ====================
+
+  /**
+   * Visual style variant
+   * @default 'default'
+   */
+  variant: (0, _propTypes.oneOf)(['default', 'outline', 'filled']),
+  /**
+   * Size of the textarea
+   * @default 'medium'
+   */
+  size: (0, _propTypes.oneOf)(['small', 'medium', 'large']),
+  /**
+   * Number of visible text rows
+   * @default 4
+   */
+  rows: _propTypes.number,
+  /**
+   * Number of visible text columns
+   */
+  cols: _propTypes.number,
+  /**
+   * How the textarea can be resized
+   * @default 'vertical'
+   */
+  resize: (0, _propTypes.oneOf)(['none', 'both', 'horizontal', 'vertical']),
+  // ====================
+  // Behavior Props
+  // ====================
+
+  /**
+   * Whether the textarea is required
+   * @default false
+   */
+  required: _propTypes.bool,
+  /**
+   * Whether the textarea is disabled
+   * @default false
+   */
+  disabled: _propTypes.bool,
+  /**
+   * Whether the textarea is read-only
+   * @default false
+   */
+  readOnly: _propTypes.bool,
+  /**
+   * Whether to show character count
+   * @default false
+   */
+  showCharacterCount: _propTypes.bool,
+  // ====================
+  // Validation Props
+  // ====================
+
+  /**
+   * Whether the field has an error
+   * @default false
+   */
+  error: _propTypes.bool,
+  /**
+   * Error message to display when error is true
+   */
+  errorText: _propTypes.string,
+  /**
+   * Maximum number of characters allowed
+   */
+  maxLength: _propTypes.number,
+  /**
+   * Minimum number of characters required
+   */
+  minLength: _propTypes.number,
+  /**
+   * Threshold (0-1) at which to show character count warning
+   * @default 0.8
+   */
+  characterCountThreshold: _propTypes.number,
+  // ====================
+  // Event Props
+  // ====================
+
+  /**
+   * Change handler function - called when textarea value changes
+   * @param {Event} event - The change event
+   */
+  onChange: _propTypes.func,
+  /**
+   * Focus handler function
+   * @param {Event} event - The focus event
+   */
+  onFocus: _propTypes.func,
+  /**
+   * Blur handler function
+   * @param {Event} event - The blur event
+   */
+  onBlur: _propTypes.func,
+  // ====================
+  // Accessibility Props
+  // ====================
+
+  /**
+   * Accessible label (alternative to label prop)
+   */
+  'aria-label': _propTypes.string,
+  /**
+   * ID of element that labels this textarea
+   */
+  'aria-labelledby': _propTypes.string,
+  /**
+   * ID(s) of elements that describe this textarea
+   */
+  'aria-describedby': _propTypes.string,
+  /**
+   * Whether the textarea value is invalid
+   */
+  'aria-invalid': (0, _propTypes.oneOf)(['true', 'false', 'grammar', 'spelling']),
+  /**
+   * Use `className` instead
+   * Additional CSS classes
+   */
+  additionalClassName: _propTypes.string,
+  /**
+   * Use external label management instead
+   * Whether to hide the label
+   */
+  noLabel: _propTypes.bool,
+  /**
+   * Use `id` and `name` instead
+   * Legacy name prop
+   */
+  setName: _propTypes.string,
+  /**
+   * Use `value` instead
+   * Legacy input value prop
+   */
+  inputValue: _propTypes.string,
+  /**
+   * Use `onChange` instead
+   * Legacy change handler
+   */
+  onChangeFunc: _propTypes.func,
+  /**
+   * Use `onFocus` instead
+   * Legacy focus handler
+   */
+  focus: _propTypes.func,
+  /**
+   * Use `onBlur` instead
+   * Legacy blur handler
+   */
+  blur: _propTypes.func,
+  /**
+   * Use `placeholder` instead
+   * Legacy placeholder prop
+   */
+  placeHolder: _propTypes.string,
+  /**
+   * Internal prop for CSS class generation
+   * Base component name for CSS classes
+   */
+  componentName: _propTypes.string
+};

package/dist/components/TextInput.js

@@ -0,0 +1,286 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _Label = require("./Label");
+var _Error = require("./Error");
+var _Animation = require("./Animation");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /*eslint-disable no-unused-vars*/ // components
+/**
+ * TextInput Component
+ *
+ * A fully accessible, modern text input component following WCAG 2.1 AA guidelines.
+ * Features keyboard navigation, screen reader support, validation, and various input types.
+ *
+ * This is a stateless component - state management should be handled externally.
+ * Use with the useTextInputAccessibility hook for complete functionality.
+ *
+ * @component
+ * @example
+ * <TextInput
+ *   id="email"
+ *   label="Email Address"
+ *   type="email"
+ *   value={email}
+ *   onChange={handleChange}
+ *   required
+ * />
+ */
+const TextInput = exports.TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  name,
+  label,
+  type = 'text',
+  value = '',
+  onChange,
+  onFocus,
+  onBlur,
+  // Validation props
+  required = false,
+  error = false,
+  errorText = '',
+  maxLength,
+  minLength,
+  // Appearance props
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  autoComplete,
+  autoFocus = false,
+  // Layout props
+  className = '',
+  variant = 'default',
+  size = 'medium',
+  // Accessibility props
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  'aria-describedby': ariaDescribedby,
+  'aria-invalid': ariaInvalid,
+  // Legacy props (for backward compatibility - internal use only)
+  componentName = 'text-input',
+  additionalClassName = '',
+  noLabel = false,
+  setName,
+  inputValue,
+  onChangeFunc,
+  focus,
+  blur,
+  placeHolder,
+  inputEl,
+  inputType,
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || setName;
+  const finalName = name || setName;
+  const finalLabel = label || setName;
+  const finalType = type || inputType || 'text';
+  // Fix: Only use inputValue if value is strictly undefined (not empty string)
+  const finalValue = value !== undefined ? value : inputValue !== undefined ? inputValue : '';
+  // Always use onChange if provided, fallback to onChangeFunc
+  const finalOnChange = onChange ? onChange : onChangeFunc;
+  const finalOnFocus = onFocus || focus;
+  const finalOnBlur = onBlur || blur;
+  const finalPlaceholder = placeholder || placeHolder;
+  const finalClassName = className || additionalClassName;
+  const showLabel = !noLabel;
+
+  // Generate unique IDs for accessibility
+  const inputId = finalId || `input-${Math.random().toString(36).substr(2, 9)}`;
+  const errorId = `${inputId}-error`;
+  const helpTextId = `${inputId}-help`;
+
+  // Build aria-describedby
+  const describedByIds = [];
+  if (ariaDescribedby) describedByIds.push(ariaDescribedby);
+  if (error && errorText) describedByIds.push(errorId);
+  const finalAriaDescribedby = describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
+
+  // Determine aria-invalid
+  const finalAriaInvalid = ariaInvalid || (error ? 'true' : undefined);
+
+  // Build CSS classes
+  const wrapperClasses = [`${componentName}-wrapper`, finalClassName, `${componentName}-wrapper--${variant}`, `${componentName}-wrapper--${size}`, error && `${componentName}-wrapper--error`, disabled && `${componentName}-wrapper--disabled`, readOnly && `${componentName}-wrapper--readonly`].filter(Boolean).join(' ');
+  const inputClasses = ['input', 'text-input', `text-input--${variant}`, `text-input--${size}`, `text-input--type-${finalType}`, error && 'text-input--error', disabled && 'text-input--disabled', readOnly && 'text-input--readonly'].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react.default.createElement(_Animation.AnimatedDiv, {
+    fadingEntrances: "fadeIn",
+    duration: "faster"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClasses,
+    "data-testid": `${componentName}-wrapper`
+  }, showLabel && finalLabel && /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    htmlFor: inputId,
+    required: required,
+    labelText: finalLabel,
+    className: `${componentName}__label`
+  }), /*#__PURE__*/_react.default.createElement("input", _extends({
+    ref: ref,
+    id: inputId,
+    name: finalName,
+    type: finalType,
+    value: finalValue,
+    onChange: finalOnChange,
+    onFocus: finalOnFocus,
+    onBlur: finalOnBlur,
+    className: inputClasses,
+    "data-testid": "input"
+    // Validation attributes
+    ,
+    required: required,
+    maxLength: maxLength,
+    minLength: minLength
+    // Appearance attributes
+    ,
+    placeholder: finalPlaceholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    autoComplete: autoComplete,
+    autoFocus: autoFocus
+    // Accessibility attributes
+    ,
+    "aria-label": ariaLabel
+  }, !showLabel && {
+    'aria-labelledby': ariaLabelledby
+  }, {
+    "aria-describedby": finalAriaDescribedby,
+    "aria-invalid": finalAriaInvalid,
+    "aria-required": required || undefined
+  }, restProps)), error && errorText && /*#__PURE__*/_react.default.createElement(_Error.Error, {
+    id: errorId,
+    className: `${componentName}__error`,
+    role: "alert",
+    "aria-live": "polite"
+  }, errorText)));
+});
+
+// Set display name for debugging
+TextInput.displayName = 'TextInput';
+TextInput.propTypes = {
+  // ===========================================
+  // Core Props
+  // ===========================================
+  /**
+   * Unique identifier for the input
+   */
+  id: _propTypes.string,
+  /**
+   * Name attribute for the input (used for form submission)
+   */
+  name: _propTypes.string,
+  // ===========================================
+  // Content Props
+  // ===========================================
+  /**
+   * Label text for the input
+   */
+  label: _propTypes.string,
+  /**
+   * Placeholder text shown when input is empty
+   */
+  placeholder: _propTypes.string,
+  // ===========================================
+  // Appearance Props
+  // ===========================================
+  /**
+   * Additional CSS classes
+   */
+  className: _propTypes.string,
+  /**
+   * Visual style variant
+   */
+  variant: (0, _propTypes.oneOf)(['default', 'outline', 'filled']),
+  /**
+   * Size of the input
+   */
+  size: (0, _propTypes.oneOf)(['small', 'medium', 'large']),
+  // ===========================================
+  // Behavior Props
+  // ===========================================
+  /**
+   * Input type (text, email, password, etc.)
+   */
+  type: (0, _propTypes.oneOf)(['text', 'email', 'password', 'tel', 'url', 'search', 'number', 'date', 'time', 'datetime-local', 'month', 'week']),
+  /**
+   * Current value of the input
+   */
+  value: _propTypes.string,
+  /**
+   * Whether the field is required
+   */
+  required: _propTypes.bool,
+  /**
+   * Whether the field has an error
+   */
+  error: _propTypes.bool,
+  /**
+   * Error message to display when error is true
+   */
+  errorText: _propTypes.string,
+  /**
+   * Maximum number of characters allowed
+   */
+  maxLength: _propTypes.number,
+  /**
+   * Minimum number of characters required
+   */
+  minLength: _propTypes.number,
+  /**
+   * Whether the input is disabled
+   */
+  disabled: _propTypes.bool,
+  /**
+   * Whether the input is read-only
+   */
+  readOnly: _propTypes.bool,
+  /**
+   * Autocomplete attribute for browser assistance
+   */
+  autoComplete: _propTypes.string,
+  /**
+   * Whether the input should be focused on mount
+   */
+  autoFocus: _propTypes.bool,
+  // ===========================================
+  // Event Props
+  // ===========================================
+  /**
+   * Change handler function - called when user types
+   * @param {Event} event - The change event
+   */
+  onChange: _propTypes.func.isRequired,
+  /**
+   * Focus handler function
+   * @param {Event} event - The focus event
+   */
+  onFocus: _propTypes.func,
+  /**
+   * Blur handler function
+   * @param {Event} event - The blur event
+   */
+  onBlur: _propTypes.func,
+  // ===========================================
+  // Accessibility Props
+  // ===========================================
+  /**
+   * Accessible label (alternative to label prop)
+   */
+  'aria-label': _propTypes.string,
+  /**
+   * ID of element that labels this input
+   */
+  'aria-labelledby': _propTypes.string,
+  /**
+   * ID(s) of elements that describe this input
+   */
+  'aria-describedby': _propTypes.string,
+  /**
+   * Whether the input value is invalid
+   */
+  'aria-invalid': (0, _propTypes.oneOf)(['true', 'false', 'grammar', 'spelling'])
+};