@abstraks-dev/ui-library 1.0.1

package/dist/components/AnimationGroup.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnimationGroup = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _reactTransitionGroup = require("react-transition-group");
+var _Prompt = _interopRequireDefault(require("./Prompt"));
+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); }
+/**
+ * AnimationGroup Component
+ *
+ * A dynamic list component with smooth add/remove animations using React Transition Group.
+ * Features keyboard navigation, accessibility support, and motion preferences.
+ *
+ * @component
+ * @example
+ * ```jsx
+ * const [items, setItems] = useState([
+ *   { id: '1', text: 'First item' },
+ *   { id: '2', text: 'Second item' }
+ * ]);
+ *
+ * <AnimationGroup
+ *   items={items}
+ *   onItemAdd={() => handleAddItem()}
+ *   onItemRemove={(id) => handleRemoveItem(id)}
+ *   addItem="Add New Item"
+ *   ariaLabel="Todo list with animations"
+ * />
+ * ```
+ *
+ * @param {object} props - Component props
+ * @param {Array} props.items - Array of items with id and text properties
+ * @param {function} [props.onItemAdd] - Callback when add button is clicked
+ * @param {function} [props.onItemRemove] - Callback when remove button is clicked
+ * @param {string} [props.className=''] - Additional CSS classes to apply
+ * @param {string} [props.id] - Unique identifier for the component
+ * @param {React.ReactNode} [props.addItem='Add Item'] - Content for add button
+ * @param {boolean} [props.reduceMotion=false] - Disable animations for accessibility
+ * @returns {JSX.Element} The AnimationGroup component
+ */
+const AnimationGroup = exports.AnimationGroup = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  // Content props
+  addItem = 'Add Item',
+  items = [],
+  // Event props
+  onItemAdd,
+  onItemRemove,
+  // Accessibility props
+  'aria-label': ariaLabel = 'Animated list with add and remove functionality',
+  reduceMotion = false,
+  // Legacy props (for backward compatibility - internal use only)
+  componentName = 'animation-group',
+  additionalClassName = '',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || `animation-group-${Math.random().toString(36).substr(2, 9)}`;
+  const finalClassName = className || additionalClassName;
+  const listRef = (0, _react.useRef)(null);
+  const addButtonRef = (0, _react.useRef)(null);
+
+  // Create refs for each item to avoid findDOMNode issues in React 18
+  const itemRefs = (0, _react.useRef)({});
+  (0, _react.useMemo)(() => {
+    // Ensure we have a ref for each item
+    items.forEach(item => {
+      if (!itemRefs.current[item.id]) {
+        itemRefs.current[item.id] = /*#__PURE__*/(0, _react.createRef)();
+      }
+    });
+    // Clean up refs for items that no longer exist
+    Object.keys(itemRefs.current).forEach(id => {
+      if (!items.find(item => item.id === id)) {
+        delete itemRefs.current[id];
+      }
+    });
+  }, [items]);
+  const [promptOpen, setPromptOpen] = _react.default.useState(false);
+  const [addedText, setAddedText] = _react.default.useState('');
+
+  // Wrap onItemAdd
+  const handleAdd = () => {
+    if (onItemAdd) {
+      const result = onItemAdd();
+      // If result is the new item's text, show prompt
+      if (typeof result === 'string' && result) {
+        setAddedText(result);
+        setPromptOpen(true);
+      } else {
+        setAddedText('Item added!');
+        setPromptOpen(true);
+      }
+    }
+  };
+  const handleDismissPrompt = () => {
+    setPromptOpen(false);
+    setAddedText('');
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    id: finalId,
+    className: `${componentName}-wrapper ${finalClassName}`.trim(),
+    "data-testid": componentName,
+    style: {
+      marginTop: '2rem'
+    },
+    role: "region",
+    "aria-label": ariaLabel
+  }, restProps), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "unordered-list",
+    style: {
+      marginBottom: '1rem'
+    },
+    ref: listRef,
+    role: "list",
+    "aria-live": "polite",
+    "aria-label": `List with ${items.length} items`
+  }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {
+    className: "todo-list",
+    style: reduceMotion ? {
+      transition: 'none'
+    } : undefined
+  }, items.map(({
+    id,
+    text
+  }, index) => /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    key: id,
+    nodeRef: itemRefs.current[id],
+    timeout: reduceMotion ? 0 : 500,
+    classNames: reduceMotion ? '' : 'item'
+  }, /*#__PURE__*/_react.default.createElement("li", {
+    ref: itemRefs.current[id],
+    className: "list-item",
+    role: "listitem",
+    "aria-setsize": items.length,
+    "aria-posinset": index + 1
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "remove-btn",
+    variant: "danger",
+    size: "sm",
+    onClick: () => onItemRemove && onItemRemove(id, text),
+    "aria-label": `Remove item: ${text}`,
+    title: `Remove "${text}"`
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true"
+  }, "\xD7"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, "Remove")), /*#__PURE__*/_react.default.createElement("span", null, text)))))), /*#__PURE__*/_react.default.createElement("button", {
+    ref: addButtonRef,
+    onClick: handleAdd,
+    "aria-label": "Add new item to list",
+    "aria-describedby": items.length === 0 ? 'empty-list-hint' : undefined
+  }, addItem), items.length === 0 && /*#__PURE__*/_react.default.createElement("p", {
+    id: "empty-list-hint",
+    className: "sr-only"
+  }, "List is empty. Click the add button to add your first item."), /*#__PURE__*/_react.default.createElement(_Prompt.default, {
+    open: promptOpen,
+    message: addedText || 'Item added!',
+    onConfirm: handleDismissPrompt,
+    showCancel: false,
+    confirmText: "OK"
+  }));
+});
+
+// Set display name for debugging
+AnimationGroup.displayName = 'AnimationGroup';
+
+// Configure component PropTypes
+AnimationGroup.propTypes = {
+  // Core props
+  /** Unique identifier for the component */
+  id: _propTypes.string,
+  /** Additional CSS classes to apply */
+  className: _propTypes.string,
+  // Content props
+  /** Text or element to display in the add button */
+  addItem: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.node]),
+  /** Array of items to display in the list */
+  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    id: _propTypes.string.isRequired,
+    text: _propTypes.string.isRequired
+  })),
+  // Event props
+  /** Callback function when the add button is clicked */
+  onItemAdd: _propTypes.func,
+  /** Callback function when an item remove button is clicked */
+  onItemRemove: _propTypes.func,
+  // Accessibility props
+  /** ARIA label for the entire component region */
+  'aria-label': _propTypes.string,
+  /** Whether to disable animations for accessibility (prefers-reduced-motion) */
+  reduceMotion: _propTypes.bool,
+  // Legacy props (for backward compatibility - internal use only)
+  /** Base CSS class name for the component */
+  componentName: _propTypes.string,
+  /** Additional CSS classes to apply */
+  additionalClassName: _propTypes.string
+};

package/dist/components/AnimationToggle.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnimationToggle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _reactTransitionGroup = require("react-transition-group");
+var _animation = require("../constants/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); }
+/**
+ * AnimationToggle - A stateless, accessible toggle component with smooth CSS transitions
+ *
+ * Features:
+ * - Keyboard navigation support (Enter, Space, Escape)
+ * - Screen reader announcements
+ * - Focus management
+ * - High contrast mode support
+ * - ARIA labels and live regions
+ * - Semantic HTML structure
+ *
+ * @component
+ * @example
+ * <AnimationToggle
+ *   childOne="Show Details"
+ *   childTwo={<div>Detailed content here</div>}
+ *   aria-label="Toggle product details"
+ *   isOpen={false}
+ *   showButton={true}
+ *   onOpen={() => {}}
+ *   onClose={() => {}}
+ *   onKeyDown={() => {}}
+ * />
+ */
+const AnimationToggle = exports.AnimationToggle = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  // Content props
+  childOne,
+  childTwo,
+  // Behavior props
+  disabled = false,
+  autoFocus = false,
+  isOpen = false,
+  showButton = true,
+  // Event props
+  onOpen,
+  onClose,
+  onKeyDown,
+  onEnter,
+  onExited,
+  // Accessibility props
+  ariaLabel,
+  ariaDescribedBy,
+  // Legacy props (for backward compatibility - internal use only)
+  componentName = 'animation-toggle',
+  additionalClassName = '',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || `animation-toggle-${Math.random().toString(36).substr(2, 9)}`;
+  const finalClassName = className || additionalClassName;
+  const triggerRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  const closeButtonRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    id: finalId,
+    className: `${componentName}-wrapper ${finalClassName} ${disabled ? 'disabled' : ''}`,
+    "data-testid": componentName,
+    role: "group",
+    "aria-label": ariaLabel || 'Toggle content'
+  }, restProps), showButton && /*#__PURE__*/_react.default.createElement("button", {
+    ref: triggerRef,
+    className: `${componentName}-trigger`,
+    onClick: onOpen,
+    onKeyDown: onKeyDown,
+    disabled: disabled,
+    "aria-expanded": isOpen,
+    "aria-controls": `${componentName}-content`,
+    "aria-label": ariaLabel || `Show ${typeof childOne === 'string' ? childOne : 'content'}`,
+    "aria-describedby": ariaDescribedBy,
+    autoFocus: autoFocus,
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}-trigger-text`
+  }, childOne)), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    in: isOpen,
+    timeout: _animation.TRANSITION_DURATION,
+    classNames: componentName,
+    unmountOnExit: true,
+    nodeRef: contentRef,
+    onEnter: onEnter,
+    onExited: onExited
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: contentRef,
+    className: `${componentName}-content`,
+    id: `${componentName}-content`,
+    role: "region",
+    "aria-label": ariaLabel || 'Expanded content',
+    "aria-describedby": ariaDescribedBy
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}-content-body`
+  }, childTwo), /*#__PURE__*/_react.default.createElement("button", {
+    ref: closeButtonRef,
+    className: `${componentName}-close`,
+    onClick: onClose,
+    onKeyDown: onKeyDown,
+    "aria-label": "Close expanded content",
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}-close-text`
+  }, "Close"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, " (Press Escape to close)")))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sr-only",
+    id: `${componentName}-instructions`
+  }, "Use Enter or Space to toggle content. Press Escape to close when expanded."));
+});
+
+// Set display name for debugging
+AnimationToggle.displayName = 'AnimationToggle';
+AnimationToggle.propTypes = {
+  // ===========================================
+  // Core Props
+  // ===========================================
+  /**
+   * Unique identifier for the component
+   */
+  id: _propTypes.string,
+  /**
+   * Additional CSS classes to apply
+   */
+  className: _propTypes.string,
+  // ===========================================
+  // Content Props
+  // ===========================================
+  /**
+   * Content to display in the trigger button (required)
+   */
+  childOne: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.node]).isRequired,
+  /**
+   * Content to display when expanded (required)
+   */
+  childTwo: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.node]).isRequired,
+  // ===========================================
+  // Behavior Props
+  // ===========================================
+  /**
+   * Whether the toggle is disabled
+   */
+  disabled: _propTypes.bool,
+  /**
+   * Whether to automatically focus the trigger button on mount
+   */
+  autoFocus: _propTypes.bool,
+  /**
+   * Whether the content is currently open
+   */
+  isOpen: _propTypes.bool,
+  /**
+   * Whether to show the trigger button
+   */
+  showButton: _propTypes.bool,
+  // ===========================================
+  // Event Props
+  // ===========================================
+  /**
+   * Callback function called when opening the toggle
+   * @param {Event} event - The triggering event
+   */
+  onOpen: _propTypes.func,
+  /**
+   * Callback function called when closing the toggle
+   * @param {Event} event - The triggering event
+   */
+  onClose: _propTypes.func,
+  /**
+   * Callback function for keyboard interactions
+   * @param {KeyboardEvent} event - The keyboard event
+   */
+  onKeyDown: _propTypes.func,
+  /**
+   * Callback when content transition enters
+   */
+  onEnter: _propTypes.func,
+  /**
+   * Callback when content transition exits
+   */
+  onExited: _propTypes.func,
+  // ===========================================
+  // Accessibility Props
+  // ===========================================
+  /**
+   * Accessible label for the toggle component (recommended)
+   */
+  // aria-label is used as a prop, not ariaLabel
+
+  /**
+   * ID of element that describes the toggle component
+   */
+  ariaDescribedBy: _propTypes.string,
+  /**
+   * Use className instead
+   * Additional CSS class names to apply to the wrapper
+   */
+  additionalClassName: _propTypes.string,
+  /**
+   * Use id for identification
+   * Base CSS class name for the component
+   */
+  componentName: _propTypes.string
+};

package/dist/components/Avatar.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Avatar = 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); } // CLEAN START OF FILE
+const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(({
+  source = '',
+  alt = '',
+  fallbackText = '',
+  className = '',
+  size = 'md',
+  dimensions,
+  isClickable = false,
+  hasHoverEffect = false,
+  tabIndex = 0,
+  isLoading = false,
+  onClick,
+  onHover,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  onError,
+  onLoad,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  role = 'img',
+  additionalClassName = '',
+  componentName = 'avatar',
+  ...restProps
+}, ref) => {
+  const sizeMap = {
+    xs: '24px',
+    sm: '32px',
+    md: '48px',
+    lg: '64px',
+    xl: '96px'
+  };
+  const avatarSize = dimensions || sizeMap[size] || '48px';
+  const getAriaLabel = () => ariaLabel || alt || (fallbackText ? `Avatar for ${fallbackText}` : 'User avatar');
+  const handleKeyDown = event => {
+    if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      onClick?.(event);
+    }
+    onKeyDown?.(event);
+  };
+  const handleMouseEnter = event => {
+    onHover?.(event);
+  };
+  const handleImageError = event => {
+    onError?.(event);
+  };
+  const handleImageLoad = event => {
+    onLoad?.(event);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Animation.AnimatedDiv, {
+    fadingEntrances: "fadeIn",
+    duration: "faster"
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: `${componentName} ${componentName}--${size} ${additionalClassName} ${isClickable ? `${componentName}--clickable` : ''} ${hasHoverEffect ? `${componentName}--hoverable` : ''} ${isLoading ? `${componentName}--loading` : ''} ${className}`.trim(),
+    "data-testid": componentName,
+    role: isClickable ? 'button' : role,
+    tabIndex: isClickable ? tabIndex : -1,
+    "aria-label": getAriaLabel(),
+    "aria-describedby": ariaDescribedBy,
+    onClick: isClickable ? onClick : undefined,
+    onMouseEnter: hasHoverEffect ? handleMouseEnter : undefined,
+    onFocus: isClickable ? onFocus : undefined,
+    onBlur: isClickable ? onBlur : undefined,
+    onKeyDown: isClickable ? handleKeyDown : undefined,
+    ref: ref
+  }, restProps), hasHoverEffect && /*#__PURE__*/_react.default.createElement("div", {
+    className: "hover",
+    style: {
+      width: avatarSize,
+      height: avatarSize
+    },
+    "aria-hidden": "true"
+  }), isLoading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__loading`,
+    style: {
+      width: avatarSize,
+      height: avatarSize
+    }
+  }, /*#__PURE__*/_react.default.createElement(_icons.LoadingSpinner, {
+    componentName: `${componentName}__loading-spinner`,
+    dimensions: Math.min(parseInt(avatarSize) * 0.5, 24)
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "image",
+    style: {
+      backgroundImage: `url(${source})`,
+      borderRadius: '50%',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center center',
+      backgroundSize: 'cover',
+      width: avatarSize,
+      height: avatarSize
+    },
+    role: "img",
+    "aria-label": alt,
+    onError: handleImageError,
+    onLoad: handleImageLoad
+  }), !source && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__fallback`,
+    style: {
+      width: avatarSize,
+      height: avatarSize
+    }
+  }, fallbackText && fallbackText.length > 0 ? /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}__fallback-text`
+  }, fallbackText.charAt(0).toUpperCase()) : /*#__PURE__*/_react.default.createElement("svg", {
+    className: `${componentName}__fallback-icon`,
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+  })))), isClickable && /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, "Press Enter or Space to interact with this avatar")));
+});
+Avatar.propTypes = {
+  source: _propTypes.string,
+  alt: _propTypes.string,
+  fallbackText: _propTypes.string,
+  size: (0, _propTypes.oneOf)(['xs', 'sm', 'md', 'lg', 'xl']),
+  dimensions: _propTypes.string,
+  className: _propTypes.string,
+  isClickable: _propTypes.bool,
+  isLoading: _propTypes.bool,
+  hasHoverEffect: _propTypes.bool,
+  tabIndex: _propTypes.number,
+  onClick: _propTypes.func,
+  onFocus: _propTypes.func,
+  onBlur: _propTypes.func,
+  onKeyDown: _propTypes.func,
+  onHover: _propTypes.func,
+  onError: _propTypes.func,
+  onLoad: _propTypes.func,
+  'aria-label': _propTypes.string,
+  'aria-describedby': _propTypes.string,
+  role: _propTypes.string,
+  additionalClassName: _propTypes.string,
+  componentName: _propTypes.string
+};
+Avatar.displayName = 'Avatar';
+var _default = exports.default = Avatar;