@abstraks-dev/ui-library 1.0.1

package/dist/__tests__/TrashX.test.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _TrashX = require("../icons/TrashX");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Suppress console.error during tests
+let consoleErrorSpy;
+beforeAll(() => {
+  consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+});
+afterAll(() => {
+  consoleErrorSpy.mockRestore();
+});
+describe('TrashX', () => {
+  test('renders trash x icon with default props', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_TrashX.TrashX, null));
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveClass('icon', 'trash-x');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('viewBox', '0 -960 960 960');
+    expect(svg).toHaveAttribute('fill', '#adb5bd');
+  });
+  test('renders with custom component name', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_TrashX.TrashX, {
+      componentName: "delete-icon"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'delete-icon');
+  });
+  test('renders with additional className', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_TrashX.TrashX, {
+      additionalClassName: "danger-icon interactive"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'trash-x', 'danger-icon', 'interactive');
+  });
+  test('renders with custom dimensions', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_TrashX.TrashX, {
+      dimensions: 16
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '16');
+    expect(svg).toHaveAttribute('height', '16');
+  });
+  test('renders with custom viewBox', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_TrashX.TrashX, {
+      viewBox: "0 0 24 24"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
+  });
+  test('renders with custom fill color', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_TrashX.TrashX, {
+      fill: "#dc3545"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('fill', '#dc3545');
+  });
+  test('contains path element', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_TrashX.TrashX, null));
+    const path = container.querySelector('path');
+    expect(path).toBeInTheDocument();
+    expect(path).toHaveAttribute('d');
+  });
+  test('combines all props correctly', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_TrashX.TrashX, {
+      componentName: "remove-button",
+      additionalClassName: "red-hover clickable",
+      dimensions: 22,
+      viewBox: "0 0 32 32",
+      fill: "#e74c3c"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'remove-button', 'red-hover', 'clickable');
+    expect(svg).toHaveAttribute('width', '22');
+    expect(svg).toHaveAttribute('height', '22');
+    expect(svg).toHaveAttribute('viewBox', '0 0 32 32');
+    expect(svg).toHaveAttribute('fill', '#e74c3c');
+  });
+});

package/dist/__tests__/useHeadingAccessibility.test.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _useHeadingAccessibility = require("../utils/useHeadingAccessibility");
+// Suppress console.error during tests
+let consoleErrorSpy;
+beforeAll(() => {
+  consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+});
+afterAll(() => {
+  consoleErrorSpy.mockRestore();
+});
+describe('useHeadingAccessibility', () => {
+  test('returns ref and aria properties', () => {
+    const {
+      result
+    } = (0, _react.renderHook)(() => (0, _useHeadingAccessibility.useHeadingAccessibility)({
+      level: 1
+    }));
+    expect(result.current.headingRef).toBeDefined();
+    expect(result.current.headingRef.current).toBeNull(); // No element attached yet
+    expect(result.current.ariaProps).toMatchObject({
+      'aria-level': 1,
+      tabIndex: undefined,
+      onFocus: undefined
+    });
+  });
+  test('sets banner role for h1', () => {
+    const {
+      result
+    } = (0, _react.renderHook)(() => (0, _useHeadingAccessibility.useHeadingAccessibility)({
+      level: 1
+    }));
+    expect(result.current.ariaProps.role || '').toBe('banner');
+  });
+  test('does not set banner role for other levels', () => {
+    const {
+      result
+    } = (0, _react.renderHook)(() => (0, _useHeadingAccessibility.useHeadingAccessibility)({
+      level: 2
+    }));
+    expect(result.current.ariaProps.role).toBeUndefined();
+  });
+  test('sets tabIndex when autoFocus is enabled', () => {
+    const {
+      result
+    } = (0, _react.renderHook)(() => (0, _useHeadingAccessibility.useHeadingAccessibility)({
+      level: 1,
+      autoFocus: true
+    }));
+    expect(result.current.ariaProps.tabIndex).toBe(0);
+  });
+  test('sets onFocus handler when provided', () => {
+    const onFocus = jest.fn();
+    const {
+      result
+    } = (0, _react.renderHook)(() => (0, _useHeadingAccessibility.useHeadingAccessibility)({
+      level: 1,
+      onFocus
+    }));
+    expect(result.current.ariaProps.onFocus).toBeDefined();
+  });
+});
+describe('useHeadingHierarchy', () => {
+  test('validates proper hierarchy', () => {
+    const {
+      result
+    } = (0, _react.renderHook)(() => (0, _useHeadingAccessibility.useHeadingHierarchy)(2, {
+      existingLevels: [1]
+    }));
+    expect(result.current.isValidHierarchy).toBe(true);
+    expect(result.current.warnings).toHaveLength(0);
+  });
+  test('warns when page does not start with h1', () => {
+    const {
+      result
+    } = (0, _react.renderHook)(() => (0, _useHeadingAccessibility.useHeadingHierarchy)(2, {
+      existingLevels: []
+    }));
+    expect(result.current.isValidHierarchy).toBe(false);
+    expect(result.current.warnings).toContain('Page should start with an h1 heading');
+  });
+  test('warns about heading level gaps', () => {
+    const {
+      result
+    } = (0, _react.renderHook)(() => (0, _useHeadingAccessibility.useHeadingHierarchy)(4, {
+      existingLevels: [1, 2]
+    }));
+    expect(result.current.isValidHierarchy).toBe(false);
+    expect(result.current.warnings[0]).toContain('Heading level gap detected: h2 → h4');
+  });
+  test('allows multiple headings at same level', () => {
+    const {
+      result
+    } = (0, _react.renderHook)(() => (0, _useHeadingAccessibility.useHeadingHierarchy)(2, {
+      existingLevels: [1, 2, 2]
+    }));
+    expect(result.current.isValidHierarchy).toBe(true);
+    expect(result.current.warnings).toHaveLength(0);
+  });
+  test('allows going back to higher level', () => {
+    const {
+      result
+    } = (0, _react.renderHook)(() => (0, _useHeadingAccessibility.useHeadingHierarchy)(2, {
+      existingLevels: [1, 2, 3, 3]
+    }));
+    expect(result.current.isValidHierarchy).toBe(true);
+    expect(result.current.warnings).toHaveLength(0);
+  });
+});
+describe('useHeadingId', () => {
+  test('generates ID from text', () => {
+    const id = (0, _useHeadingAccessibility.useHeadingId)('Getting Started Guide');
+    expect(id).toBe('getting-started-guide');
+  });
+  test('handles special characters', () => {
+    const id = (0, _useHeadingAccessibility.useHeadingId)('API Reference & Examples!');
+    expect(id).toBe('api-reference-examples');
+  });
+  test('handles multiple spaces', () => {
+    const id = (0, _useHeadingAccessibility.useHeadingId)('Multiple    Spaces   Here');
+    expect(id).toBe('multiple-spaces-here');
+  });
+  test('adds prefix when provided', () => {
+    const id = (0, _useHeadingAccessibility.useHeadingId)('Section Title', 'page');
+    expect(id).toBe('page-section-title');
+  });
+  test('handles empty text', () => {
+    const id = (0, _useHeadingAccessibility.useHeadingId)('');
+    expect(id).toBe('');
+  });
+  test('handles numbers in text', () => {
+    const id = (0, _useHeadingAccessibility.useHeadingId)('Step 1: Installation');
+    expect(id).toBe('step-1-installation');
+  });
+  test('removes leading and trailing hyphens', () => {
+    const id = (0, _useHeadingAccessibility.useHeadingId)('---Special Text---');
+    expect(id).toBe('special-text');
+  });
+  test('handles non-string input', () => {
+    const id = (0, _useHeadingAccessibility.useHeadingId)(123);
+    expect(id).toBe('123');
+  });
+});

package/dist/components/Anchor.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Anchor = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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); }
+/**
+ * Anchor Component
+ *
+ * A semantic anchor/link component with accessibility features and security enhancements.
+ * Perfect for navigation, external links, and call-to-action elements.
+ *
+ * Features:
+ * - Semantic anchor element with proper attributes
+ * - Disabled state support with accessibility
+ * - Automatic security attributes for external links
+ * - Multiple visual variants
+ * - Screen reader friendly
+ * - Keyboard navigation support
+ *
+ * Security:
+ * - Automatically adds rel="noopener noreferrer" for external links
+ * - Proper disabled state handling
+ *
+ * @component
+ * @example
+ * // Basic link
+ * <Anchor href="https://example.com">
+ *   Visit Example
+ * </Anchor>
+ *
+ * @example
+ * // External link with variant
+ * <Anchor
+ *   href="https://github.com"
+ *   target="_blank"
+ *   variant="primary"
+ * >
+ *   Open GitHub
+ * </Anchor>
+ *
+ * @example
+ * // Disabled link
+ * <Anchor href="/unavailable" disabled>
+ *   Unavailable Link
+ * </Anchor>
+ */
+const Anchor = exports.Anchor = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  href = '',
+  children = null,
+  disabled = false,
+  // Layout props
+  className = '',
+  variant = '',
+  // Navigation props
+  target = '_self',
+  // Legacy props (for backward compatibility - internal use only)
+  additionalClassName = '',
+  componentName = 'anchor',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalClassName = className || additionalClassName;
+
+  // Build CSS classes
+  const anchorClasses = [componentName, variant, finalClassName].filter(Boolean).join(' ').trim();
+
+  // Handle disabled state accessibility
+  const anchorProps = {
+    ref,
+    target,
+    href: disabled ? undefined : href,
+    'data-testid': componentName,
+    className: anchorClasses,
+    'aria-disabled': disabled,
+    tabIndex: disabled ? -1 : undefined,
+    onClick: disabled ? e => e.preventDefault() : undefined,
+    // Add security attributes for external links
+    rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+    ...restProps
+  };
+
+  // Remove invalid HTML attributes using destructuring
+  const {
+    type,
+    ...finalProps
+  } = anchorProps;
+  return /*#__PURE__*/_react.default.createElement("a", finalProps, children);
+});
+
+// Set display name for debugging
+Anchor.displayName = 'Anchor';
+Anchor.propTypes = {
+  // Core Props
+  /**
+   * The URL that the hyperlink points to
+   * @required Essential for functional links
+   */
+  href: _propTypes.string.isRequired,
+  /**
+   * Content to be displayed inside the anchor element
+   * @required Essential for meaningful link text
+   */
+  children: _propTypes.node.isRequired,
+  /**
+   * Whether the anchor should be disabled
+   * Prevents navigation and adds proper accessibility attributes
+   */
+  disabled: _propTypes.bool,
+  // Layout Props
+  /**
+   * Additional CSS class names to apply to the anchor
+   */
+  className: _propTypes.string,
+  /**
+   * Visual variant/style of the anchor
+   * Common values: 'primary', 'secondary', 'danger', 'success'
+   */
+  variant: _propTypes.string,
+  // Navigation Props
+  /**
+   * Specifies where to open the linked document
+   * '_blank' opens in a new tab/window, '_self' opens in the same frame
+   * Note: When target='_blank', rel='noopener noreferrer' is automatically added for security
+   */
+  target: _propTypes.string
+};

package/dist/components/Animation.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AnimatedDiv = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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); }
+const AnimatedDiv = exports.AnimatedDiv = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Content props
+  children = null,
+  // Animation behavior props
+  attentionSeekers = '',
+  backEntrances = '',
+  backExits = '',
+  bouncingEntrances = '',
+  bouncingExits = '',
+  fadingEntrances = '',
+  fadingExits = '',
+  flippers = '',
+  lightSpeed = '',
+  rotatingEntrances = '',
+  rotatingExits = '',
+  specials = '',
+  zoomingEntrances = '',
+  zoomingExits = '',
+  slidingEntrances = '',
+  slidingExits = '',
+  iteration = '',
+  delay = '',
+  duration = '',
+  // Accessibility props
+  reduceMotion = false,
+  // Legacy props (for backward compatibility - internal use only)
+  componentName = 'animation',
+  additionalClassName = '',
+  // Core props
+  id,
+  className = '',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || `animation-${Math.random().toString(36).substr(2, 9)}`;
+  const finalClassName = className || additionalClassName;
+
+  // Build animation classes
+  const animationType = attentionSeekers || backEntrances || backExits || bouncingEntrances || bouncingExits || fadingEntrances || fadingExits || flippers || lightSpeed || rotatingEntrances || rotatingExits || specials || zoomingEntrances || zoomingExits || slidingEntrances || slidingExits;
+  const animationClasses = [componentName, 'animate__animated', iteration && `animate__${iteration}`, delay && `animate__${delay}`, duration && `animate__${duration}`, animationType && `animate__${animationType}`, finalClassName].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    id: finalId,
+    "data-testid": "animation",
+    className: animationClasses
+    // Respect user's motion preferences for accessibility
+    ,
+    style: reduceMotion ? {
+      animation: 'none'
+    } : undefined
+    // Add accessibility attributes for screen readers
+    ,
+    "aria-live": animationType ? 'polite' : undefined,
+    role: animationType ? 'region' : undefined,
+    "aria-label": animationType ? `Animated content: ${animationType}` : undefined
+  }, restProps), children);
+});
+
+// Set display name for debugging
+AnimatedDiv.displayName = 'AnimatedDiv';
+// Configure component PropTypes
+AnimatedDiv.propTypes = {
+  // Core props
+  /** Unique identifier for the component */
+  id: _propTypes.string,
+  /** Additional CSS classes to apply */
+  className: _propTypes.string,
+  /** Content to be animated */
+  children: _propTypes.node.isRequired,
+  // Animation behavior props
+  /** Animation iteration count - how many times the animation should repeat */
+
+  iteration: (0, _propTypes.oneOf)(['', 'infinite', 'repeat-1', 'repeat-2', 'repeat-3']),
+  /** Animation delay before starting */
+  delay: (0, _propTypes.oneOf)(['', 'delay-1s', 'delay-2s', 'delay-3s', 'delay-4s', 'delay-5s']),
+  /** Animation duration speed */
+  duration: (0, _propTypes.oneOf)(['', 'faster', 'fast', 'slow', 'slower']),
+  /** Attention-seeking animations (recommended for important notifications) */
+  attentionSeekers: (0, _propTypes.oneOf)(['', 'bounce', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat']),
+  /** Back entrance animations - elements entering from behind */
+  backEntrances: (0, _propTypes.oneOf)(['', 'backInDown', 'backInLeft', 'backInRight', 'backInUp']),
+  /** Back exit animations - elements exiting behind */
+  backExits: (0, _propTypes.oneOf)(['', 'backOutDown', 'backOutLeft', 'backOutRight', 'backOutUp']),
+  /** Bouncing entrance animations - playful entrance effects */
+  bouncingEntrances: (0, _propTypes.oneOf)(['', 'bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp']),
+  /** Bouncing exit animations - playful exit effects */
+  bouncingExits: (0, _propTypes.oneOf)(['', 'bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp']),
+  /** Fading entrance animations - smooth appearance effects */
+  fadingEntrances: (0, _propTypes.oneOf)(['', 'fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInLeft', 'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', 'fadeInUp', 'fadeInUpBig', 'fadeInTopLeft', 'fadeInTopRight', 'fadeInBottomLeft', 'fadeInBottomRight']),
+  /** Fading exit animations - smooth disappearance effects */
+  fadingExits: (0, _propTypes.oneOf)(['', 'fadeOut', 'fadeOutDown', 'fadeOutDownBig', 'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig', 'fadeOutUp', 'fadeOutUpBig', 'fadeOutTopLeft', 'fadeOutTopRight', 'fadeOutBottomRight', 'fadeOutBottomLeft']),
+  /** Flip animations - 3D rotation effects */
+  flippers: (0, _propTypes.oneOf)(['', 'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY']),
+  /** Light speed animations - ultra-fast movement effects */
+  lightSpeed: (0, _propTypes.oneOf)(['', 'lightSpeedInRight', 'lightSpeedInLeft', 'lightSpeedOutRight', 'lightSpeedOutLeft']),
+  /** Rotating entrance animations - spinning entrance effects */
+  rotatingEntrances: (0, _propTypes.oneOf)(['', 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight']),
+  /** Rotating exit animations - spinning exit effects */
+  rotatingExits: (0, _propTypes.oneOf)(['', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight']),
+  /** Special animations - unique and distinctive effects */
+  specials: (0, _propTypes.oneOf)(['', 'hinge', 'jackInTheBox', 'rollIn', 'rollOut']),
+  /** Zooming entrance animations - scaling entrance effects */
+  zoomingEntrances: (0, _propTypes.oneOf)(['', 'zoomIn', 'zoomInDown', 'zoomInLeft', 'zoomInRight', 'zoomInUp']),
+  /** Zooming exit animations - scaling exit effects */
+  zoomingExits: (0, _propTypes.oneOf)(['', 'zoomOut', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'zoomOutUp']),
+  /** Sliding entrance animations - directional entrance effects */
+  slidingEntrances: (0, _propTypes.oneOf)(['', 'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp']),
+  /** Sliding exit animations - directional exit effects */
+  slidingExits: (0, _propTypes.oneOf)(['', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp']),
+  // Accessibility props
+  /** Respect user's reduced motion preference for accessibility */
+  reduceMotion: _propTypes.bool,
+  // Legacy props (for backward compatibility - internal use only)
+  /** Base component name for CSS classes */
+  componentName: _propTypes.string,
+  /** Additional CSS class names to apply to the animation container */
+  additionalClassName: _propTypes.string
+};
+var _default = exports.default = AnimatedDiv;