@abstraks-dev/ui-library 1.0.1

package/dist/components/Paragraph.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Paragraph = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Animation = require("./Animation");
+var _propTypes = require("prop-types");
+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); }
+/**
+ * Paragraph - Accessible paragraph component with semantic HTML
+ *
+ * Features:
+ * - Semantic paragraph element with proper typography
+ * - Multiple size variants for design hierarchy
+ * - Screen reader accessible
+ * - Responsive typography
+ * - High contrast mode support
+ * - Customizable styling through CSS classes
+ *
+ * Accessibility:
+ * - Uses semantic <p> element
+ * - Proper text contrast ratios
+ * - Supports high contrast mode
+ * - Responsive and readable typography
+ *
+ * @component
+ * @example
+ * // Basic paragraph
+ * <Paragraph>
+ *   This is a standard paragraph with default styling.
+ * </Paragraph>
+ *
+ * @example
+ * // Large paragraph for emphasis
+ * <Paragraph size="large">
+ *   This is a larger paragraph for emphasis or lead text.
+ * </Paragraph>
+ *
+ * @example
+ * // Small paragraph for secondary content
+ * <Paragraph size="small">
+ *   This is smaller text for captions or secondary information.
+ * </Paragraph>
+ */
+const Paragraph = exports.Paragraph = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  children = null,
+  // Layout props
+  className = '',
+  size = 'medium',
+  // Accessibility props
+  id,
+  // Legacy props (for backward compatibility - internal use only)
+  additionalClassName = '',
+  componentName = 'paragraph',
+  testId,
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalClassName = className || additionalClassName;
+  const finalComponentName = componentName || 'paragraph';
+  const finalId = id || (testId ? `${testId}` : undefined);
+
+  // Build CSS classes: root class is componentName, then size, then className
+  const paragraphClasses = [finalComponentName, size !== 'medium' && `${finalComponentName}--${size}`, finalClassName].filter(Boolean).join(' ').trim();
+  return /*#__PURE__*/_react.default.createElement(_Animation.AnimatedDiv, {
+    fadingEntrances: "fadeIn",
+    duration: "faster"
+  }, /*#__PURE__*/_react.default.createElement("p", _extends({
+    ref: ref,
+    id: finalId,
+    className: paragraphClasses,
+    "data-testid": testId || 'paragraph'
+  }, restProps), children));
+});
+
+// Set display name for debugging
+Paragraph.displayName = 'Paragraph';
+Paragraph.propTypes = {
+  // ============================================================================
+  // CORE PROPS
+  // ============================================================================
+
+  /**
+   * Unique identifier for the paragraph
+   */
+  id: _propTypes.string,
+  /**
+   * Additional CSS classes to apply to the paragraph element
+   */
+  className: _propTypes.string,
+  // ============================================================================
+  // CONTENT PROPS
+  // ============================================================================
+
+  /**
+   * Content to display in the paragraph
+   * @required Essential for meaningful paragraph content
+   */
+  children: _propTypes.node.isRequired,
+  // ============================================================================
+  // APPEARANCE PROPS
+  // ============================================================================
+
+  /**
+   * Size variant for typography hierarchy
+   * - 'small': For captions, fine print, or secondary information
+   * - 'medium': Default paragraph size for body text
+   * - 'large': For emphasis, lead paragraphs, or important content
+   */
+  size: (0, _propTypes.oneOf)(['small', 'medium', 'large']),
+  /**
+   * Use 'className' instead. Additional CSS classes to apply
+   */
+  additionalClassName: _propTypes.string,
+  /**
+   * Use 'id' instead. Base CSS class name for the component
+   */
+  componentName: _propTypes.string,
+  /**
+   * Use 'id' instead. Test identifier for the paragraph
+   */
+  testId: _propTypes.string
+};
+var _default = exports.default = Paragraph;

package/dist/components/Prompt.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Prompt = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("../styles/prompt.scss");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Prompt Component
+ * A simple modal-like prompt for confirmations and notifications.
+ *
+ * @param {string} message - The prompt message to display
+ * @param {function} onConfirm - Called when user confirms (optional)
+ * @param {function} onCancel - Called when user cancels/dismisses (optional)
+ * @param {string} confirmText - Text for confirm button (default: 'Yes')
+ * @param {string} cancelText - Text for cancel button (default: 'Cancel')
+ * @param {boolean} showCancel - Whether to show cancel button (default: true)
+ * @param {boolean} open - Whether the prompt is visible
+ */
+const Prompt = ({
+  message,
+  onConfirm,
+  onCancel,
+  confirmText = 'Yes',
+  cancelText = 'Cancel',
+  showCancel = true,
+  open = false
+}) => {
+  if (!open) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "prompt-overlay",
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-label": message
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "prompt-box"
+  }, /*#__PURE__*/_react.default.createElement("p", null, message), /*#__PURE__*/_react.default.createElement("div", {
+    className: "prompt-actions"
+  }, onConfirm && /*#__PURE__*/_react.default.createElement("button", {
+    className: "prompt-confirm",
+    onClick: onConfirm,
+    autoFocus: true
+  }, confirmText), showCancel && /*#__PURE__*/_react.default.createElement("button", {
+    className: "prompt-cancel",
+    onClick: onCancel
+  }, cancelText))));
+};
+exports.Prompt = Prompt;
+Prompt.propTypes = {
+  message: _propTypes.default.string.isRequired,
+  onConfirm: _propTypes.default.func,
+  onCancel: _propTypes.default.func,
+  confirmText: _propTypes.default.string,
+  cancelText: _propTypes.default.string,
+  showCancel: _propTypes.default.bool,
+  open: _propTypes.default.bool
+};
+var _default = exports.default = Prompt;

package/dist/components/Radio.js

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Radio = 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
+/**
+ * Radio Component
+ *
+ * A fully accessible, modern radio button component following WCAG 2.1 AA guidelines.
+ * Features proper keyboard navigation, screen reader support, and form integration.
+ *
+ * This is a stateless component - state management should be handled externally.
+ * Radio buttons should always be used in groups with the same name attribute.
+ *
+ * @component
+ * @example
+ * // Basic radio group (stateless)
+ * <Radio
+ *   id="color-red"
+ *   name="color"
+ *   value="red"
+ *   checked={selectedColor === 'red'}
+ *   onChange={handleColorChange}
+ *   required
+ * >
+ *   Red
+ * </Radio>
+ *
+ * @example
+ * // Required radio with error state
+ * <Radio
+ *   id="agreement-accept"
+ *   name="agreement"
+ *   value="accept"
+ *   checked={agreement === 'accept'}
+ *   onChange={handleAgreementChange}
+ *   required
+ *   error={hasError}
+ *   errorText="You must accept the terms"
+ * >
+ *   I accept the terms and conditions
+ * </Radio>
+ */
+const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  name,
+  value,
+  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 = 'radio',
+  additionalClassName = '',
+  labelText = '',
+  testId,
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || testId || `radio-${name}-${value}-${Math.random().toString(36).substr(2, 9)}`.replace(/\s+/g, '-').toLowerCase();
+  const finalLabel = children || label || labelText || value;
+  const finalClassName = className || additionalClassName;
+
+  // Generate unique IDs for accessibility
+  const radioId = finalId;
+  const errorId = `${radioId}-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`, required && `${componentName}-wrapper--required`].filter(Boolean).join(' ');
+  const radioClasses = [componentName, `${componentName}--${variant}`, `${componentName}--${size}`, error && `${componentName}--error`, disabled && `${componentName}--disabled`, checked && `${componentName}--checked`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClasses,
+    "data-testid": testId || `${componentName}-wrapper`
+  }, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    htmlFor: radioId,
+    required: required,
+    labelText: finalLabel,
+    className: `${componentName}__label`
+  }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    ref: ref,
+    id: radioId,
+    name: name,
+    type: "radio",
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    className: radioClasses,
+    disabled: disabled,
+    "data-testid": testId || `${componentName}-input`
+    // Accessibility attributes
+    ,
+    "aria-label": !finalLabel ? ariaLabel : undefined,
+    "aria-labelledby": !finalLabel ? ariaLabelledby : undefined,
+    "aria-describedby": finalAriaDescribedby,
+    "aria-invalid": finalAriaInvalid,
+    "aria-required": required || undefined
+  }, restProps)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "custom-radio"
+  }), finalLabel && /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}__label-text`
+  }, finalLabel)), error && errorText && /*#__PURE__*/_react.default.createElement(_Error.Error, {
+    id: errorId,
+    className: `${componentName}__error`,
+    role: "alert",
+    "aria-live": "polite"
+  }, errorText));
+});
+
+// Set display name for debugging
+Radio.displayName = 'Radio';
+Radio.propTypes = {
+  // ===========================================
+  // Core Props
+  // ===========================================
+  /**
+   * Unique identifier for the radio button
+   */
+  id: _propTypes.string,
+  /**
+   * Additional CSS classes
+   */
+  className: _propTypes.string,
+  /**
+   * Name attribute for the radio group (required for proper grouping)
+   * All radios in the same group must have the same name
+   */
+  name: _propTypes.string.isRequired,
+  /**
+   * Value for this radio option (required)
+   * Should be unique within the radio group
+   */
+  value: _propTypes.string.isRequired,
+  // ===========================================
+  // Content Props
+  // ===========================================
+  /**
+   * Label content (can be string or JSX)
+   */
+  children: _propTypes.node,
+  /**
+   * Alternative label prop
+   */
+  label: _propTypes.string,
+  // ===========================================
+  // Appearance Props
+  // ===========================================
+  /**
+   * Visual style variant
+   */
+  variant: _propTypes.string,
+  /**
+   * Size of the radio button
+   */
+  size: _propTypes.string,
+  // ===========================================
+  // Behavior Props
+  // ===========================================
+  /**
+   * Whether this radio is currently selected
+   */
+  checked: _propTypes.bool,
+  /**
+   * Whether the radio is required
+   */
+  required: _propTypes.bool,
+  /**
+   * Whether the radio is disabled
+   */
+  disabled: _propTypes.bool,
+  // ===========================================
+  // Validation Props
+  // ===========================================
+  /**
+   * Whether the field has an error
+   */
+  error: _propTypes.bool,
+  /**
+   * Error message to display when error is true
+   */
+  errorText: _propTypes.string,
+  // ===========================================
+  // Event Props
+  // ===========================================
+  /**
+   * Change handler function - called when radio is selected
+   * @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 radio
+   */
+  'aria-labelledby': _propTypes.string,
+  /**
+   * ID(s) of elements that describe this radio
+   */
+  'aria-describedby': _propTypes.string,
+  /**
+   * Whether the radio value is invalid
+   */
+  'aria-invalid': _propTypes.string
+};