@abstraks-dev/ui-library 1.0.1

package/dist/styles/text-area.scss

@@ -0,0 +1,388 @@
+@use 'variables' as *;
+
+/* ==========================================================================
+   TextArea Component Styles
+   ========================================================================== */
+
+/**
+ * TextArea Wrapper
+ * Main container for the entire textarea component
+ */
+.text-area-wrapper {
+	display: flex;
+	flex-direction: column;
+	font-family: $font-family-body;
+	width: 100%;
+	gap: $spacing-xs;
+
+	/* Variant styles */
+	&--outline {
+		.text-area {
+			border: 2px solid $gray-300;
+			background-color: transparent;
+		}
+	}
+
+	&--filled {
+		.text-area {
+			background-color: $gray-100;
+			border: 1px solid transparent;
+
+			&:focus {
+				background-color: $color-white;
+				border-color: $color-primary;
+			}
+		}
+	}
+
+	/* Size variants */
+	&--small {
+		font-size: $font-size-sm;
+
+		.text-area {
+			padding: $spacing-sm;
+			min-height: 4rem;
+		}
+	}
+
+	&--medium {
+		font-size: $font-size-base;
+
+		.text-area {
+			padding: $spacing-md;
+			min-height: 6rem;
+		}
+	}
+
+	&--large {
+		font-size: $font-size-lg;
+
+		.text-area {
+			padding: $spacing-lg;
+			min-height: 8rem;
+		}
+	}
+
+	/* State variants */
+	&--error {
+		.text-area {
+			border-color: $color-error;
+			box-shadow: inset 0 1px 2px rgba($color-error, 0.1);
+
+			&:focus {
+				border-color: $color-error;
+				box-shadow: 0 0 0 2px rgba($color-error, 0.2);
+			}
+		}
+	}
+
+	&--disabled {
+		opacity: 0.6;
+		pointer-events: none;
+
+		.text-area {
+			background-color: $gray-100;
+			cursor: not-allowed;
+		}
+	}
+
+	&--readonly {
+		.text-area {
+			background-color: $gray-100;
+			cursor: default;
+		}
+	}
+
+	/* Responsive adjustments */
+	@media #{$medium} {
+		&--small .text-area {
+			padding: $spacing-xs;
+			min-height: 3.5rem;
+		}
+
+		&--medium .text-area {
+			padding: $spacing-sm;
+			min-height: 5rem;
+		}
+
+		&--large .text-area {
+			padding: $spacing-md;
+			min-height: 7rem;
+		}
+	}
+
+	@media #{$large} {
+		gap: $spacing-sm;
+
+		&--small .text-area {
+			min-height: 4rem;
+		}
+
+		&--medium .text-area {
+			min-height: 6rem;
+		}
+
+		&--large .text-area {
+			min-height: 8rem;
+		}
+	}
+
+	@media #{$xlarge} {
+		&--large {
+			font-size: $font-size-xl;
+
+			.text-area {
+				padding: $spacing-xl;
+				min-height: 10rem;
+			}
+		}
+	}
+}
+
+/**
+ * Label Styles
+ */
+.text-area__label {
+	color: $gray-700;
+	font-weight: $font-weight-medium;
+	margin-bottom: $spacing-xs;
+	display: block;
+
+	/* Required indicator */
+	&--required::after {
+		content: ' *';
+		color: $color-error;
+	}
+
+	/* Size variants */
+	.text-area-wrapper--small & {
+		font-size: $font-size-sm;
+	}
+
+	.text-area-wrapper--large & {
+		font-size: $font-size-lg;
+	}
+}
+
+/**
+ * Main TextArea Element
+ */
+.text-area {
+	/* Reset and base styles */
+	appearance: none;
+	background-color: $color-white;
+	border: 1px solid $gray-300;
+	border-radius: $border-radius-sm;
+	color: $gray-700;
+	font-family: $font-family-body;
+	font-size: inherit;
+	font-weight: $font-weight-normal;
+	line-height: $line-height-relaxed;
+	padding: $spacing-md;
+	transition: border-color 0.2s ease, box-shadow 0.2s ease,
+		background-color 0.2s ease;
+	width: 100%;
+	min-height: 6rem;
+
+	/* Resize behavior */
+	&--resize-none {
+		resize: none;
+	}
+
+	&--resize-both {
+		resize: both;
+	}
+
+	&--resize-horizontal {
+		resize: horizontal;
+	}
+
+	&--resize-vertical {
+		resize: vertical;
+	}
+
+	/* States */
+	&:hover:not(:disabled):not(:read-only) {
+		border-color: $gray-500;
+	}
+
+	&:focus {
+		border-color: $color-primary;
+		box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
+		outline: none;
+	}
+
+	&:focus-visible {
+		outline: 2px solid $focus-color;
+		outline-offset: 2px;
+	}
+
+	/* Placeholder styling */
+	&::placeholder {
+		color: $gray-500;
+		opacity: 1;
+	}
+
+	/* Disabled state */
+	&:disabled,
+	&--disabled {
+		background-color: $gray-100;
+		border-color: $gray-300;
+		color: $gray-600;
+		cursor: not-allowed;
+		opacity: 0.6;
+
+		&:hover {
+			border-color: $gray-300;
+		}
+
+		&::placeholder {
+			color: $gray-400;
+		}
+	}
+
+	/* Read-only state */
+	&:read-only,
+	&--readonly {
+		background-color: $gray-100;
+		cursor: default;
+
+		&:focus {
+			border-color: $gray-400;
+			box-shadow: 0 0 0 2px rgba($gray-400, 0.2);
+		}
+	}
+
+	/* Error state */
+	&--error {
+		border-color: $color-error;
+		box-shadow: inset 0 1px 2px rgba($color-error, 0.1);
+
+		&:focus {
+			border-color: $color-error;
+			box-shadow: 0 0 0 2px rgba($color-error, 0.2);
+		}
+	}
+
+	/* Responsive adjustments */
+	@media #{$medium} {
+		font-size: $font-size-sm;
+		padding: $spacing-sm;
+		min-height: 5rem;
+	}
+
+	@media #{$large} {
+		font-size: $font-size-base;
+		padding: $spacing-md;
+		min-height: 6rem;
+	}
+
+	@media #{$xlarge} {
+		font-size: $font-size-lg;
+		padding: $spacing-lg;
+		min-height: 7rem;
+	}
+}
+
+/**
+ * Character Count Indicator
+ */
+.text-area__char-count {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-size: $font-size-sm;
+	color: $gray-600;
+	margin-top: $spacing-xs;
+
+	&--warning {
+		color: $color-warning;
+	}
+
+	&--error {
+		color: $color-error;
+	}
+
+	&-text {
+		flex: 1;
+	}
+
+	&-numbers {
+		font-weight: $font-weight-medium;
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* Responsive adjustments */
+	@media #{$medium} {
+		font-size: $font-size-xs;
+	}
+
+	@media #{$large} {
+		font-size: $font-size-sm;
+	}
+
+	@media #{$xlarge} {
+		font-size: $font-size-base;
+	}
+}
+
+/**
+ * Error Message
+ */
+.text-area__error {
+	color: $color-error;
+	font-size: $font-size-sm;
+	margin-top: $spacing-xs;
+	display: flex;
+	align-items: flex-start;
+	gap: $spacing-xs;
+
+	/* Error icon (if added) */
+	&::before {
+		content: '⚠';
+		flex-shrink: 0;
+		margin-top: 1px;
+	}
+
+	/* Responsive adjustments */
+	@media #{$medium} {
+		font-size: $font-size-xs;
+	}
+
+	@media #{$large} {
+		font-size: $font-size-sm;
+	}
+
+	@media #{$xlarge} {
+		font-size: $font-size-base;
+	}
+}
+
+/* ==========================================================================
+   High Contrast Mode Support
+   ========================================================================== */
+@media (prefers-contrast: high) {
+	.text-area {
+		border-width: 2px;
+
+		&:focus {
+			outline: 3px solid currentColor;
+			outline-offset: 2px;
+		}
+	}
+
+	.text-area__char-count--warning,
+	.text-area__char-count--error,
+	.text-area__error {
+		font-weight: $font-weight-bold;
+	}
+}
+
+/* ==========================================================================
+   Reduced Motion Support
+   ========================================================================== */
+@media (prefers-reduced-motion: reduce) {
+	.text-area {
+		transition: none;
+	}
+}

package/dist/styles/text-input.scss

@@ -0,0 +1,171 @@
+@use 'variables' as *;
+
+// Text Input Component Styles
+.text-input-wrapper {
+	display: flex;
+	width: 100%;
+	flex-direction: column;
+	position: relative;
+
+	// Label styles
+	.label {
+		flex-direction: row;
+		margin-bottom: 0.5rem;
+	}
+
+	// Base input styles
+	.text-input {
+		line-height: normal;
+		background-color: $color-white;
+		width: 100%;
+		padding: 0.75rem;
+		border: 1px solid $gray-300;
+		border-radius: 0.25rem;
+		font-size: 1rem;
+		font-weight: normal;
+		color: $gray-700;
+		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+		// Focus states
+		&:focus {
+			outline: none;
+			border-color: $color-muted-blue;
+			box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+		}
+		box-shadow: none;
+
+		// Hover states
+		&:hover:not(:disabled):not(:focus) {
+			border-color: $gray-500;
+		}
+	}
+
+	// Size variants
+	&--small .text-input {
+		padding: 0.5rem;
+		font-size: 0.875rem;
+	}
+
+	&--large .text-input {
+		padding: 1rem;
+		font-size: 1.125rem;
+	}
+
+	// Style variants
+	&--outline .text-input {
+		background-color: transparent;
+		border-width: 2px;
+	}
+
+	&--filled .text-input {
+		background-color: $gray-100;
+		border-color: transparent;
+
+		&:focus {
+			background-color: $color-white;
+			border-color: $color-muted-blue;
+		}
+	}
+
+	// Error states
+	&--error .text-input {
+		border-color: $color-error;
+		box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+
+		&:focus {
+			border-color: $color-error;
+			box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+		}
+	}
+
+	// Error message
+	&__error {
+		margin-top: 0.25rem;
+		font-size: 0.875rem;
+		color: $color-error;
+	}
+
+	// Type-specific styles
+	.text-input--type-email,
+	.text-input--type-url {
+		font-family: monospace;
+	}
+
+	.text-input--type-number {
+		text-align: right;
+	}
+
+	// Responsive design
+	@media #{$medium} {
+		.text-input {
+			font-size: 1rem;
+			padding: 0.75rem 1rem;
+		}
+
+		&--small .text-input {
+			padding: 0.5rem 0.75rem;
+			font-size: 0.875rem;
+		}
+
+		&--large .text-input {
+			padding: 1rem 1.25rem;
+			font-size: 1.125rem;
+		}
+	}
+
+	@media #{$large} {
+		.text-input {
+			font-size: 1.125rem;
+			padding: 0.875rem 1rem;
+		}
+
+		&--small .text-input {
+			padding: 0.625rem 0.75rem;
+			font-size: 1rem;
+		}
+
+		&--large .text-input {
+			padding: 1.125rem 1.5rem;
+			font-size: 1.25rem;
+		}
+	}
+
+	@media #{$xlarge} {
+		.text-input {
+			max-width: 500px;
+		}
+
+		&--small .text-input {
+			max-width: 300px;
+		}
+
+		&--large .text-input {
+			max-width: 700px;
+		}
+	}
+
+	// High contrast mode support
+	@media (prefers-contrast: high) {
+		.text-input {
+			border-width: 2px;
+			border-color: $gray-700;
+
+			&:focus {
+				border-color: $color-muted-blue;
+				box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.5);
+			}
+		}
+
+		&--error .text-input {
+			border-color: $color-error;
+			border-width: 3px;
+		}
+	}
+
+	// Reduced motion support
+	@media (prefers-reduced-motion: reduce) {
+		.text-input {
+			transition: none;
+		}
+	}
+}

package/dist/styles/unordered-list.scss

@@ -0,0 +1,8 @@
+
+.unordered-list {
+	padding-left: 0;
+	list-style: none;
+	margin-block-start: 0;
+	margin-block-end: 0;
+	padding-inline-start: 0;
+}

package/dist/utils/ScrollHandler.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactRouterDom = require("react-router-dom");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ScrollHandler = ({
+  location
+}) => {
+  (0, _react.useEffect)(() => {
+    const element = document.getElementById(location.hash);
+    setTimeout(() => {
+      window.scrollTo({
+        behavior: element ? 'smooth' : 'auto',
+        top: element ? element.offsetTop : 0
+      });
+    }, 100);
+  }, [location]);
+  return null;
+};
+ScrollHandler.propTypes = {
+  location: _propTypes.default.shape({
+    hash: _propTypes.default.string
+  }).isRequired
+};
+var _default = exports.default = (0, _reactRouterDom.withRouter)(ScrollHandler);

package/dist/utils/accessibility.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.safeFocus = exports.createLiveRegion = exports.announceToScreenReader = void 0;
+/**
+ * Accessibility utility functions for screen readers and ARIA support
+ */
+
+/**
+ * Announces a message to screen readers using ARIA live regions
+ * This is a safer alternative to direct DOM manipulation
+ *
+ * @param {string} message - The message to announce
+ * @param {'polite'|'assertive'} priority - The announcement priority level
+ * @param {number} timeout - How long to keep the announcement (default: 1000ms)
+ * @returns {Function} Cleanup function to remove the announcement early
+ *
+ * @example
+ * // Announce an error assertively
+ * const cleanup = announceToScreenReader('Form validation failed', 'assertive');
+ *
+ * // Announce info politely
+ * announceToScreenReader('Data saved automatically', 'polite');
+ */
+const announceToScreenReader = (message, priority = 'polite', timeout = 1000) => {
+  // Ensure we're in a browser environment
+  if (typeof document === 'undefined') {
+    return () => {}; // Return no-op cleanup function for SSR
+  }
+  const announcement = document.createElement('div');
+  announcement.setAttribute('aria-live', priority);
+  announcement.setAttribute('aria-atomic', 'true');
+  announcement.className = 'sr-only'; // Use CSS class instead of inline styles
+  announcement.textContent = message;
+
+  // Add to document body
+  document.body.appendChild(announcement);
+
+  // Set up cleanup
+  const cleanup = () => {
+    if (document.body.contains(announcement)) {
+      document.body.removeChild(announcement);
+    }
+  };
+
+  // Auto cleanup after timeout
+  setTimeout(cleanup, timeout);
+
+  // Return cleanup function for manual cleanup if needed
+  return cleanup;
+};
+
+/**
+ * Creates a live region element that can be reused for announcements
+ * This is more efficient for multiple announcements
+ *
+ * @param {'polite'|'assertive'} priority - The announcement priority level
+ * @returns {Object} Object with announce and destroy methods
+ *
+ * @example
+ * const liveRegion = createLiveRegion('assertive');
+ * liveRegion.announce('First message');
+ * liveRegion.announce('Second message');
+ * liveRegion.destroy(); // Clean up when done
+ */
+exports.announceToScreenReader = announceToScreenReader;
+const createLiveRegion = (priority = 'polite') => {
+  // Ensure we're in a browser environment
+  if (typeof document === 'undefined') {
+    return {
+      announce: () => {},
+      destroy: () => {}
+    };
+  }
+  const liveRegion = document.createElement('div');
+  liveRegion.setAttribute('aria-live', priority);
+  liveRegion.setAttribute('aria-atomic', 'true');
+  liveRegion.className = 'sr-only';
+  liveRegion.setAttribute('role', priority === 'assertive' ? 'alert' : 'status');
+  document.body.appendChild(liveRegion);
+  return {
+    /**
+     * Announce a message in this live region
+     * @param {string} message - The message to announce
+     */
+    announce: message => {
+      liveRegion.textContent = message;
+      // Clear after a short delay to allow for new announcements
+      setTimeout(() => {
+        if (liveRegion.textContent === message) {
+          liveRegion.textContent = '';
+        }
+      }, 1000);
+    },
+    /**
+     * Clean up the live region
+     */
+    destroy: () => {
+      if (document.body.contains(liveRegion)) {
+        document.body.removeChild(liveRegion);
+      }
+    }
+  };
+};
+
+/**
+ * Utility to focus an element safely with fallback
+ * @param {HTMLElement|string} element - Element or selector to focus
+ * @param {Object} options - Focus options
+ * @returns {boolean} Whether focus was successful
+ */
+exports.createLiveRegion = createLiveRegion;
+const safeFocus = (element, options = {}) => {
+  try {
+    const el = typeof element === 'string' ? document.querySelector(element) : element;
+    if (el && typeof el.focus === 'function') {
+      el.focus(options);
+      return document.activeElement === el;
+    }
+    return false;
+  } catch (error) {
+    console.warn('Failed to focus element:', error);
+    return false;
+  }
+};
+exports.safeFocus = safeFocus;