@abstraks-dev/ui-library 1.0.1

package/dist/components/Button.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Animation = require("./Animation");
+var _propTypes = require("prop-types");
+var _icons = require("../icons");
+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); }
+/**
+ * Button - A stateless, accessible button component for user interactions
+ *
+ * Features:
+ * - Multiple variants (primary, secondary, success, error, warning)
+ * - Multiple sizes (xs, sm, md, lg, xl)
+ * - Accessible with proper ARIA labels and keyboard support
+ * - Loading states with built-in spinner
+ * - Icon support (leading and trailing)
+ * - Full width and outline variants
+ * - Keyboard navigation and focus management
+ * - High contrast mode support
+ *
+ * @component
+ * @example
+ * <Button
+ *   variant="primary"
+ *   size="md"
+ *   onClick={(event) => console.log('Button clicked')}
+ *   disabled={false}
+ *   isLoading={false}
+ *   ariaLabel="Save changes"
+ * >
+ *   Save Changes
+ * </Button>
+ */
+const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  // Appearance props
+  variant = 'primary',
+  size = 'md',
+  isOutline = false,
+  isFullWidth = false,
+  // Content props
+  type = 'button',
+  children = null,
+  iconLeading = null,
+  iconTrailing = null,
+  loadingText = 'Loading...',
+  // Behavior props
+  disabled = false,
+  isLoading = false,
+  tabIndex = 0,
+  // Event props
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  onMouseEnter,
+  onMouseLeave,
+  // Accessibility props
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHaspopup,
+  'aria-pressed': ariaPressed,
+  role = 'button',
+  // Legacy props (for backward compatibility - internal use only)
+  componentName = 'button',
+  additionalClassName = '',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || `button-${Math.random().toString(36).substr(2, 9)}`;
+  const finalClassName = className || additionalClassName;
+
+  // Handle keyboard navigation
+  const handleKeyDown = event => {
+    // Call custom handler first
+    onKeyDown?.(event);
+
+    // Prevent default for space key to avoid page scroll
+    if (event.key === ' ') {
+      event.preventDefault();
+      onClick?.(event);
+    }
+    // Enter key should trigger click
+    if (event.key === 'Enter') {
+      onClick?.(event);
+    }
+    onKeyDown?.(event);
+  };
+
+  // Generate comprehensive class names
+  const getClassNames = () => {
+    const classes = [componentName, `${componentName}--${variant}`, `${componentName}--${size}`];
+    if (isOutline) classes.push(`${componentName}--outline`);
+    if (isFullWidth) classes.push(`${componentName}--full-width`);
+    if (isLoading) classes.push(`${componentName}--loading`);
+    if (disabled) classes.push(`${componentName}--disabled`);
+    if (finalClassName) classes.push(finalClassName);
+    return classes.join(' ');
+  };
+
+  // Determine button content
+  const buttonContent = isLoading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_icons.LoadingSpinner, {
+    componentName: `${componentName}__loading-spinner`,
+    dimensions: 16
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}__loading-text`
+  }, loadingText)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconLeading && /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}__icon ${componentName}__icon--leading`
+  }, iconLeading), children && /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}__text`
+  }, children), iconTrailing && /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}__icon ${componentName}__icon--trailing`
+  }, iconTrailing));
+  return /*#__PURE__*/_react.default.createElement(_Animation.AnimatedDiv, {
+    fadingEntrances: "fadeIn",
+    duration: "faster"
+  }, /*#__PURE__*/_react.default.createElement("button", _extends({}, restProps, {
+    ref: ref,
+    id: finalId,
+    className: getClassNames(),
+    "data-testid": componentName,
+    type: type,
+    disabled: disabled || isLoading,
+    tabIndex: disabled ? -1 : tabIndex,
+    onClick: !disabled && !isLoading ? onClick : undefined,
+    onFocus: !disabled ? onFocus : undefined,
+    onBlur: !disabled ? onBlur : undefined,
+    onKeyDown: !disabled && !isLoading ? handleKeyDown : undefined,
+    onMouseEnter: !disabled ? onMouseEnter : undefined,
+    onMouseLeave: !disabled ? onMouseLeave : undefined,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHaspopup,
+    "aria-pressed": ariaPressed,
+    "aria-disabled": disabled || isLoading,
+    "aria-busy": isLoading,
+    role: role
+  }), buttonContent, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, isLoading ? 'Button is loading, please wait' : 'Press Enter or Space to activate this button')));
+});
+
+// Configure component PropTypes
+Button.propTypes = {
+  // Core props
+  /** Unique identifier for the component */
+  id: _propTypes.string,
+  /** Additional CSS classes to apply */
+  className: _propTypes.string,
+  // Appearance props
+  /** Button color variant */
+  variant: (0, _propTypes.oneOf)(['primary', 'secondary', 'success', 'error', 'warning']),
+  /** Button size variant */
+  size: (0, _propTypes.oneOf)(['xs', 'sm', 'md', 'lg', 'xl']),
+  /** Whether to use outline variant styling */
+  isOutline: _propTypes.bool,
+  /** Whether the button should take full width of its container */
+  isFullWidth: _propTypes.bool,
+  // Content props
+  /** HTML button type attribute */
+  type: (0, _propTypes.oneOf)(['button', 'submit', 'reset']),
+  /** Button content */
+  children: _propTypes.node,
+  /** Icon to display before the button text */
+  iconLeading: _propTypes.node,
+  /** Icon to display after the button text */
+  iconTrailing: _propTypes.node,
+  /** Text to display when button is loading */
+  loadingText: _propTypes.string,
+  // Behavior props
+  /** Whether the button is disabled */
+  disabled: _propTypes.bool,
+  /** Whether the button is in a loading state */
+  isLoading: _propTypes.bool,
+  /** Tab index for keyboard navigation */
+  tabIndex: _propTypes.number,
+  // Event props
+  /** Click event handler */
+  onClick: _propTypes.func,
+  /** Focus event handler */
+  onFocus: _propTypes.func,
+  /** Blur event handler */
+  onBlur: _propTypes.func,
+  /** Key down event handler */
+  onKeyDown: _propTypes.func,
+  /** Mouse enter event handler */
+  onMouseEnter: _propTypes.func,
+  /** Mouse leave event handler */
+  onMouseLeave: _propTypes.func,
+  // Accessibility props
+  /** Accessible label for the button */
+  'aria-label': _propTypes.string,
+  /** ID of element that describes the button */
+  'aria-describedby': _propTypes.string,
+  /** Whether the button controls an expanded element */
+  'aria-expanded': _propTypes.bool,
+  /** Whether the button has a popup */
+  'aria-haspopup': _propTypes.bool,
+  /** Whether the button is pressed (for toggle buttons) */
+  'aria-pressed': _propTypes.bool,
+  /** ARIA role for the button */
+  role: _propTypes.string,
+  // Legacy props (for backward compatibility - internal use only)
+  /** Base CSS class name for the component */
+  componentName: _propTypes.string,
+  /** Additional CSS class names to apply to the button */
+  additionalClassName: _propTypes.string
+};
+Button.displayName = 'Button';

package/dist/components/Card.js

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Card = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Animation = require("./Animation");
+var _propTypes = require("prop-types");
+var _Heading = _interopRequireDefault(require("./Heading"));
+var _Avatar = _interopRequireDefault(require("./Avatar"));
+var _Ellipses = require("../icons/Ellipses");
+var _Paragraph = require("./Paragraph");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); } // components
+// styles
+
+/**
+ * Card Component
+ *
+ * A flexible, accessible card container for displaying structured content.
+ * Perfect for user profiles, product displays, articles, and content previews.
+ *
+ * Features:
+ * - Stateless design for maximum flexibility
+ * - Built-in avatar and header sections
+ * - Dropdown menu support with keyboard navigation
+ * - Full-width image support
+ * - Comprehensive accessibility features
+ * - Customizable content areas
+ *
+ * @component
+ * @example
+ * // Basic card with title and content
+ * <Card
+ *   title="John Doe"
+ *   subTitle="Software Engineer"
+ *   bodyCopy="Passionate about creating accessible web experiences..."
+ *   avatarSrc="/path/to/avatar.jpg"
+ * />
+ *
+ * @example
+ * // Interactive card with menu
+ * <Card
+ *   title="Project Alpha"
+ *   ellipsesList={[<MenuItem key="edit">Edit</MenuItem>]}
+ *   isEllipsesOpen={menuOpen}
+ *   onEllipsesToggle={() => setMenuOpen(!menuOpen)}
+ *   role="article"
+ * />
+ */
+const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Content props
+  bodyCopy = '',
+  title = '',
+  subTitle = '',
+  titleSize = 'h3',
+  // Image props
+  avatarSrc = '',
+  fullImage = '',
+  imgComponent = null,
+  // Menu props
+  ellipsesList = [],
+  isEllipsesOpen = false,
+  onEllipsesToggle = null,
+  onEllipsesKeyDown = null,
+  // Layout props
+  className = '',
+  // Accessibility props
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy = null,
+  role = null,
+  tabIndex = null,
+  // Legacy props (for backward compatibility - internal use only)
+  additionalClassName = '',
+  componentName = 'card',
+  children = null,
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalClassName = className || additionalClassName;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: `${componentName} ${isEllipsesOpen ? 'open' : ''} ${finalClassName}`.trim(),
+    "data-testid": componentName,
+    role: role,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    tabIndex: tabIndex
+  }, restProps), avatarSrc && /*#__PURE__*/_react.default.createElement("div", {
+    className: "head"
+  }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    dimensions: "50px",
+    source: avatarSrc,
+    alt: title ? `${title} avatar` : 'User avatar'
+  }), ellipsesList.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ellipses"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "ellipses-trigger",
+    onClick: onEllipsesToggle,
+    onKeyDown: onEllipsesKeyDown,
+    "aria-expanded": isEllipsesOpen,
+    "aria-haspopup": "menu",
+    "aria-label": "Card options menu"
+  }, /*#__PURE__*/_react.default.createElement(_Ellipses.Ellipses, null)), isEllipsesOpen && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ellipses-content",
+    role: "menu",
+    "aria-label": "Card options"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "unordered-list",
+    role: "none"
+  }, ellipsesList)))), fullImage && imgComponent ? imgComponent : fullImage && /*#__PURE__*/_react.default.createElement("img", {
+    src: fullImage,
+    alt: title ? `${title} image` : 'Card image',
+    className: "card-image"
+  }), title && /*#__PURE__*/_react.default.createElement(_Heading.default, {
+    variant: titleSize,
+    style: {
+      marginTop: avatarSrc && '0'
+    },
+    componentName: "card-title"
+  }, title), subTitle && /*#__PURE__*/_react.default.createElement(_Paragraph.Paragraph, {
+    componentName: "card-subtitle"
+  }, subTitle), bodyCopy && /*#__PURE__*/_react.default.createElement(_Animation.AnimatedDiv, {
+    fadingEntrances: "fadeIn",
+    duration: "faster"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__body`
+  }, /*#__PURE__*/_react.default.createElement(_Paragraph.Paragraph, {
+    className: `${componentName}__body-copy`
+  }, bodyCopy), children)));
+});
+
+// Set display name for debugging
+Card.displayName = 'Card';
+Card.propTypes = {
+  // ===========================================
+  // Core Props
+  // ===========================================
+  /**
+   * Card title text for the header
+   */
+  title: _propTypes.string,
+  /**
+   * Card subtitle text displayed below title
+   */
+  subTitle: _propTypes.string,
+  // ===========================================
+  // Content Props
+  // ===========================================
+  /**
+   * Main content text for the card body
+   */
+  bodyCopy: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.node]),
+  /**
+   * Heading size variant for the title
+   */
+  titleSize: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.node]),
+  // ===========================================
+  // Image Props
+  // ===========================================
+  /**
+   * URL for avatar image in card header
+   */
+  avatarSrc: _propTypes.string,
+  /**
+   * URL for full-width card image
+   */
+  fullImage: _propTypes.string,
+  /**
+   * Custom image component to render instead of default img tag
+   */
+  imgComponent: _propTypes.node,
+  // ===========================================
+  // Menu & Interaction Props
+  // ===========================================
+  /**
+   * Array of menu items for ellipses dropdown
+   */
+  ellipsesList: (0, _propTypes.arrayOf)(_propTypes.node),
+  /**
+   * Whether the ellipses dropdown menu is open (controlled by parent)
+   */
+  isEllipsesOpen: _propTypes.bool,
+  /**
+   * Callback function for ellipses dropdown toggle
+   */
+  onEllipsesToggle: _propTypes.func,
+  /**
+   * Callback function for ellipses keyboard navigation
+   */
+  onEllipsesKeyDown: _propTypes.func,
+  // ===========================================
+  // Appearance Props
+  // ===========================================
+  /**
+   * Additional CSS classes to apply to the card
+   */
+  className: _propTypes.string,
+  // ===========================================
+  // Accessibility Props
+  // ===========================================
+  /**
+   * Accessible label for the entire card
+   */
+  'aria-label': _propTypes.string,
+  /**
+   * ID of element that describes the card content
+   */
+  'aria-describedby': _propTypes.string,
+  /**
+   * ARIA role for the card (e.g., 'article', 'region')
+   */
+  role: _propTypes.string,
+  /**
+   * Tab index for keyboard navigation (-1 to remove from tab order)
+   */
+  tabIndex: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.node])
+};
+var _default = exports.default = Card;