@abstraks-dev/ui-library 1.0.1

package/dist/components/Checkbox.js

@@ -0,0 +1,305 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = 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
+/**
+ * Checkbox Component
+ *
+ * A fully accessible, modern checkbox component following WCAG 2.1 AA guidelines.
+ * Features keyboard navigation, screen reader support, and proper form integration.
+ *
+ * This is a stateless component - state management should be handled externally.
+ *
+ * @component
+ * @example
+ * <Checkbox
+ *   id="agreement"
+ *   name="agreement"
+ *   checked={agreed}
+ *   onChange={handleAgreementChange}
+ *   required
+ * >
+ *   I agree to the terms and conditions
+ * </Checkbox>
+ */
+const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  name,
+  checked = false,
+  onChange,
+  onFocus,
+  onBlur,
+  // Content props
+  children,
+  label,
+  // Validation props
+  required = false,
+  disabled = false,
+  error = false,
+  errorText = '',
+  // 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 = 'checkbox',
+  additionalClassName = '',
+  labelText = '',
+  noLabel = false,
+  setName,
+  handleChecked,
+  setField,
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || setName || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+  const finalName = name || setName || finalId;
+  const finalLabel = children || label || labelText;
+  const finalOnChange = onChange || handleChecked;
+  const finalClassName = className || additionalClassName;
+  const showLabel = !noLabel && finalLabel;
+
+  // Generate unique IDs for accessibility
+  const checkboxId = finalId;
+  const errorId = `${checkboxId}-error`;
+
+  // 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`].filter(Boolean).join(' ');
+  const checkboxClasses = [componentName, `${componentName}--${variant}`, `${componentName}--${size}`, error && `${componentName}--error`, disabled && `${componentName}--disabled`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClasses,
+    "data-testid": `${componentName}-wrapper`
+  }, showLabel ? /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    htmlFor: checkboxId,
+    required: false // Prevent Label from rendering its own required indicator
+    ,
+    className: `${componentName}__label`
+  }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    ref: ref,
+    id: checkboxId,
+    name: finalName,
+    type: "checkbox",
+    checked: checked,
+    onChange: finalOnChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    className: checkboxClasses,
+    disabled: disabled,
+    "data-testid": `${componentName}-input`
+    // Accessibility attributes
+    ,
+    "aria-label": !showLabel ? ariaLabel : undefined,
+    "aria-labelledby": !showLabel ? ariaLabelledby : undefined,
+    "aria-describedby": finalAriaDescribedby,
+    "aria-invalid": finalAriaInvalid,
+    "aria-required": required || undefined
+  }, restProps)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "custom-checkbox"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "label-text"
+  }, finalLabel, required && /*#__PURE__*/_react.default.createElement("span", {
+    className: "required",
+    "aria-label": "required"
+  }, "*"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", _extends({
+    ref: ref,
+    id: checkboxId,
+    name: finalName,
+    type: "checkbox",
+    checked: checked,
+    onChange: finalOnChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    className: checkboxClasses,
+    disabled: disabled,
+    "data-testid": `${componentName}-input`
+    // Accessibility attributes
+    ,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": finalAriaDescribedby,
+    "aria-invalid": finalAriaInvalid,
+    "aria-required": required || undefined
+  }, restProps)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "custom-checkbox"
+  })), error && errorText && /*#__PURE__*/_react.default.createElement(_Error.Error, {
+    id: errorId,
+    className: `${componentName}__error`,
+    role: "alert",
+    "aria-live": "polite"
+  }, errorText));
+});
+
+// Set display name for debugging
+Checkbox.displayName = 'Checkbox';
+Checkbox.propTypes = {
+  // ====================
+  // Core Props
+  // ====================
+
+  /**
+   * Unique identifier for the checkbox
+   */
+  id: _propTypes.string,
+  /**
+   * Additional CSS classes to apply to the component
+   */
+  className: _propTypes.string,
+  /**
+   * Name attribute for the checkbox (used for form submission)
+   */
+  name: _propTypes.string,
+  // ====================
+  // Content Props
+  // ====================
+
+  /**
+   * Label content (can be string or JSX)
+   */
+  children: _propTypes.node,
+  /**
+   * Alternative label prop
+   */
+  label: _propTypes.string,
+  // ====================
+  // Appearance Props
+  // ====================
+
+  /**
+   * Visual style variant
+   * @default 'default'
+   */
+  variant: _propTypes.string,
+  /**
+   * Size of the checkbox
+   * @default 'medium'
+   */
+  size: _propTypes.string,
+  // ====================
+  // Behavior Props
+  // ====================
+
+  /**
+   * Whether the checkbox is checked
+   */
+  checked: _propTypes.bool,
+  /**
+   * Whether the checkbox is required
+   * @default false
+   */
+  required: _propTypes.bool,
+  /**
+   * Whether the checkbox is disabled
+   * @default false
+   */
+  disabled: _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,
+  // ====================
+  // Event Props
+  // ====================
+
+  /**
+   * Change handler function - called when checkbox is toggled
+   * @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 children/label prop)
+   */
+  'aria-label': _propTypes.string,
+  /**
+   * ID of element that labels this checkbox
+   */
+  'aria-labelledby': _propTypes.string,
+  /**
+   * ID(s) of elements that describe this checkbox
+   */
+  'aria-describedby': _propTypes.string,
+  /**
+   * Whether the checkbox value is invalid
+   */
+  'aria-invalid': _propTypes.string,
+  /**
+   * Use `className` instead
+   * Additional CSS classes
+   */
+  additionalClassName: _propTypes.string,
+  /**
+   * Use `children` or `label` instead
+   * Label text content
+   */
+  labelText: _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 `onChange` instead
+   * Legacy change handler
+   */
+  handleChecked: _propTypes.func,
+  /**
+   * Internal prop for field handling
+   * Legacy field setter
+   */
+  setField: _propTypes.func,
+  /**
+   * Internal prop for CSS class generation
+   * Base component name for CSS classes
+   */
+  componentName: _propTypes.string
+};