@abstraks-dev/ui-library 1.1.7 → 1.1.9

package/dist/components/Error.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Error = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
-require("../styles/error.scss");
+require("../styles/error.css");
 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); }
 /**

package/dist/components/Form.js

@@ -7,7 +7,7 @@ exports.default = exports.Form = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _accessibility = require("../utils/accessibility.js");
-require("../styles/form.scss");
+require("../styles/form.css");
 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); }
 /**

package/dist/components/Prompt.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Prompt = void 0;
 var _react = _interopRequireDefault(require("react"));
-require("../styles/prompt.scss");
+require("../styles/prompt.css");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**

package/dist/styles/anchor.css

@@ -0,0 +1,147 @@
+:root {
+  --small: (min-width: 607px);
+  --medium: (min-width: 768px);
+  --large: (min-width: 992px);
+  --xlarge: (min-width: 1200px);
+  --color-primary: #009900;
+  --color-primary-hover: rgba(1, 116, 1, 0.9);
+  --color-secondary: #7086f1;
+  --color-secondary-hover: rgba(83, 100, 185, 0.9);
+  --color-warning: #ff9800;
+  --color-warning-hover: rgba(214, 130, 4, 0.9);
+  --color-success: #57f500;
+  --color-success-hover: rgba(74, 207, 2, 0.9);
+  --color-error: #f44336;
+  --color-error-hover: rgba(216, 58, 47, 0.9);
+  --color-shade: rgba(0, 0, 0, 0.5);
+  --color-tint: rgba(250, 250, 250, 0.5);
+  --color-white: #fff;
+  --color-black: #000;
+  --color-font-body: #333;
+  --color-black-alpha: rgba(0, 0, 0, 0.6);
+  --focus-color: #4d90fe;
+  --shadow-primary: rgba(0, 153, 0, 0.2);
+  --shadow-primary-hover: rgba(0, 153, 0, 0.3);
+  --shadow-primary-strong: rgba(0, 153, 0, 0.4);
+  --shadow-primary-strongest: rgba(0, 153, 0, 0.5);
+  --shadow-secondary: rgba(112, 134, 241, 0.2);
+  --shadow-secondary-hover: rgba(112, 134, 241, 0.3);
+  --shadow-secondary-strong: rgba(112, 134, 241, 0.4);
+  --shadow-secondary-strongest: rgba(112, 134, 241, 0.5);
+  --shadow-success: rgba(87, 245, 0, 0.2);
+  --shadow-success-hover: rgba(87, 245, 0, 0.3);
+  --shadow-success-strong: rgba(87, 245, 0, 0.4);
+  --shadow-success-strongest: rgba(87, 245, 0, 0.5);
+  --shadow-error: rgba(244, 67, 54, 0.2);
+  --shadow-error-hover: rgba(244, 67, 54, 0.3);
+  --shadow-error-strong: rgba(244, 67, 54, 0.4);
+  --shadow-error-strongest: rgba(244, 67, 54, 0.5);
+  --shadow-warning: rgba(255, 152, 0, 0.2);
+  --shadow-warning-hover: rgba(255, 152, 0, 0.3);
+  --shadow-warning-strong: rgba(255, 152, 0, 0.4);
+  --shadow-warning-strongest: rgba(255, 152, 0, 0.5);
+  --border-radius-xs: 4px;
+  --border-radius-sm: 4px;
+  --border-radius-md: 6px;
+  --border-radius-lg: 8px;
+  --border-radius-xl: 10px;
+  --z-index-base: 1;
+  --z-index-low: 10;
+  --z-index-dropdown: 100;
+  --z-index-sticky: 200;
+  --z-index-popover: 300;
+  --z-index-tooltip: 400;
+  --z-index-overlay: 1000;
+  --z-index-modal: 1010;
+  --z-index-notification: 1020;
+  --gray-100: #f8f9fa;
+  --gray-200: #e9ecef;
+  --gray-300: #dee2e6;
+  --gray-400: #ced4da;
+  --gray-500: #adb5bd;
+  --gray-600: #6c757d;
+  --gray-700: #495057;
+  --gray-800: #343a40;
+  --gray-900: #212529;
+  --black: #000;
+  --color-muted-blue: #8793ab;
+  --heading-one: 2.5rem;
+  --heading-two: 2rem;
+  --heading-three: 1.75rem;
+  --heading-four: 1.5rem;
+  --heading-five: 1.25rem;
+  --heading-six: 1rem;
+  --font-family-body: Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --line-height-tight: 1.25;
+  --line-height-base: 1.5;
+  --line-height-relaxed: 1.625;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --text-color: #1f2937;
+  --text-muted: #6b7280;
+  --background-color: #ffffff;
+  --border-color: #d1d5db;
+  --border-color-hover: #9ca3af;
+  --error-text: #dc2626;
+  --error-background: #fef2f2;
+  --error-border: #fecaca;
+  --success-text: #059669;
+  --success-background: #f0fdf4;
+  --success-border: #bbf7d0;
+  --warning-text: #d97706;
+  --warning-background: #fffbeb;
+  --warning-border: #fed7aa;
+  --primary-color: #3b82f6;
+  --focus-ring-color: #3b82f6;
+  --border-radius: 0.375rem;
+}
+
+.anchor {
+  width: 100%;
+  text-decoration: none;
+  color: #7086f1;
+}
+.anchor:hover, .anchor:focus {
+  text-decoration: underline;
+  background-color: rgba(250, 250, 250, 0.5);
+}
+.anchor:focus {
+  outline: 0 auto -webkit-focus-ring-color;
+  outline-offset: 0;
+  border: 0 solid transparent;
+}
+
+.anchor[disabled] {
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.anchor.primary {
+  color: #009900;
+}
+.anchor.primary:hover {
+  color: rgba(1, 116, 1, 0.9);
+}
+
+.anchor.secondary {
+  color: #7086f1;
+}
+.anchor.secondary:hover {
+  color: rgba(83, 100, 185, 0.9);
+}
+
+/*# sourceMappingURL=anchor.css.map */

package/dist/styles/anchor.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/anchor.scss"],"names":[],"mappings":"AA2RA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ACrRF;EACC;EACA;EACA,ODKiB;;ACHjB;EAEC;EACA,kBDaW;;ACVZ;EACC;EACA;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC,ODnBe;;ACqBf;EACC,ODrBoB;;;ACyBtB;EACC,ODxBiB;;AC0BjB;EACC,OD1BsB","file":"anchor.css"}

package/dist/styles/animation-accessibility.css

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+/* Animation Accessibility Utilities */
+/* 
+ * Utility class for testing reduced motion preferences
+ * Add this class to test how animations behave with motion reduction
+ */
+.motion-reduced {
+  animation: none !important;
+  transition: none !important;
+  transform: none !important;
+}
+
+/* 
+ * High contrast mode support for animations
+ * Ensures animations remain visible in high contrast themes
+ */
+@media (prefers-contrast: high) {
+  .animate__animated {
+    /* Enhance visibility in high contrast mode */
+    border: 1px solid;
+    /* Reduce complex animations that may be hard to see */
+  }
+  .animate__animated.animate__flip, .animate__animated.animate__flipInX, .animate__animated.animate__flipInY, .animate__animated.animate__flipOutX, .animate__animated.animate__flipOutY {
+    animation-duration: 0.3s;
+  }
+}
+/* 
+ * Utility for focus-visible animations
+ * Use for keyboard navigation and screen reader users
+ */
+.animate__animated:focus-visible {
+  outline: 3px solid #0066cc;
+  outline-offset: 2px;
+  animation-play-state: paused;
+}
+
+/* 
+ * Safe animation defaults for accessibility
+ * These provide gentle alternatives to intense animations
+ */
+.animate__gentle-fade {
+  animation-name: gentleFadeIn;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-out;
+}
+
+.animate__gentle-slide {
+  animation-name: gentleSlideIn;
+  animation-duration: 0.4s;
+  animation-timing-function: ease-out;
+}
+
+/* Gentle animation keyframes */
+@keyframes gentleFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes gentleSlideIn {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+/* 
+ * Animation guidelines for developers
+ * Use these comments as reference for accessible animations:
+ * 
+ * ✅ DO:
+ * - Keep animations under 3 seconds
+ * - Provide pause/stop controls for infinite animations  
+ * - Use subtle movements (under 100px displacement)
+ * - Test with prefers-reduced-motion enabled
+ * - Ensure keyboard focus is visible during animations
+ * 
+ * ❌ DON'T:
+ * - Use rapid flashing (more than 3 flashes per second)
+ * - Create animations that move continuously without user control
+ * - Use animations that cover important content
+ * - Ignore focus management during animated state changes
+ */
+
+/*# sourceMappingURL=animation-accessibility.css.map */

package/dist/styles/animation-accessibility.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/styles/animation-accessibility.scss"],"names":[],"mappings":";AAAA;AAEA;AAAA;AAAA;AAAA;AAIA;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAIA;EACC;AACC;IACA;AAEA;;EACA;IAKC;;;AAKH;AAAA;AAAA;AAAA;AAIA;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAIA;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AACA;EACC;IACC;;EAED;IACC;;;AAIF;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"animation-accessibility.css"}

package/dist/styles/animation-toggle.css

@@ -0,0 +1,223 @@
+/* Animation Toggle Component Styles */
+/* Accessible and high contrast mode compatible */
+.animation-toggle-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.animation-toggle-wrapper.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Trigger Button Styles */
+.animation-toggle-trigger {
+  background: var(--button-bg, #007bff);
+  color: var(--button-text, #ffffff);
+  border: 2px solid var(--button-border, transparent);
+  border-radius: var(--button-radius, 4px);
+  padding: var(--button-padding, 8px 16px);
+  font-size: var(--button-font-size, 14px);
+  font-weight: var(--button-font-weight, 500);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  position: relative;
+  min-height: 44px; /* Touch target size */
+  min-width: 44px; /* Touch target size */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.animation-toggle-trigger:hover {
+  background: var(--button-bg-hover, #0056b3);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.animation-toggle-trigger:focus {
+  outline: 3px solid var(--focus-color, #4d90fe);
+  outline-offset: 2px;
+  background: var(--button-bg-focus, #0056b3);
+}
+
+.animation-toggle-trigger:active {
+  transform: translateY(0);
+  background: var(--button-bg-active, #004085);
+}
+
+.animation-toggle-trigger:disabled {
+  background: var(--button-bg-disabled, #6c757d);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+/* Content Container */
+.animation-toggle-content {
+  background: var(--content-bg, #ffffff);
+  border: 2px solid var(--content-border, #dee2e6);
+  border-radius: var(--content-radius, 8px);
+  padding: var(--content-padding, 16px);
+  margin-top: var(--content-margin-top, 8px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  max-width: 400px;
+  min-width: 200px;
+}
+
+.animation-toggle-content-body {
+  margin-bottom: 12px;
+}
+
+/* Close Button */
+.animation-toggle-close {
+  background: var(--close-bg, #dc3545);
+  color: var(--close-text, #ffffff);
+  border: 2px solid var(--close-border, transparent);
+  border-radius: var(--close-radius, 4px);
+  padding: var(--close-padding, 6px 12px);
+  font-size: var(--close-font-size, 12px);
+  font-weight: var(--close-font-weight, 500);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  min-height: 32px;
+  min-width: 60px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.animation-toggle-close:hover {
+  background: var(--close-bg-hover, #c82333);
+  transform: translateY(-1px);
+}
+
+.animation-toggle-close:focus {
+  outline: 3px solid var(--focus-color, #4d90fe);
+  outline-offset: 2px;
+  background: var(--close-bg-focus, #c82333);
+}
+
+.animation-toggle-close:active {
+  transform: translateY(0);
+  background: var(--close-bg-active, #bd2130);
+}
+
+/* Animation Classes */
+.animation-toggle-enter {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+
+.animation-toggle-enter-active {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  transition: opacity 300ms ease-out, transform 300ms ease-out;
+}
+
+.animation-toggle-exit {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.animation-toggle-exit-active {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+  transition: opacity 300ms ease-in, transform 300ms ease-in;
+}
+
+/* Screen Reader Only Content */
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/* High Contrast Mode Support */
+@media (forced-colors: active) {
+  .animation-toggle-trigger,
+  .animation-toggle-close {
+    border: 2px solid ButtonText;
+    background: ButtonFace;
+    color: ButtonText;
+  }
+  .animation-toggle-trigger:focus,
+  .animation-toggle-close:focus {
+    outline: 3px solid Highlight;
+    outline-offset: 2px;
+    background: Highlight;
+    color: HighlightText;
+  }
+  .animation-toggle-trigger:hover,
+  .animation-toggle-close:hover {
+    background: Highlight;
+    color: HighlightText;
+    border-color: HighlightText;
+  }
+  .animation-toggle-content {
+    border: 2px solid WindowText;
+    background: Window;
+    color: WindowText;
+  }
+  .animation-toggle-trigger:disabled {
+    border-color: GrayText;
+    background: Canvas;
+    color: GrayText;
+  }
+}
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .animation-toggle-trigger,
+  .animation-toggle-close {
+    transition: none;
+  }
+  .animation-toggle-enter-active,
+  .animation-toggle-exit-active {
+    transition: none;
+  }
+  .animation-toggle-enter {
+    opacity: 1;
+    transform: none;
+  }
+  .animation-toggle-exit {
+    opacity: 0;
+    transform: none;
+  }
+}
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .animation-toggle-wrapper {
+    --button-bg: #0d6efd;
+    --button-bg-hover: #0b5ed7;
+    --button-bg-focus: #0b5ed7;
+    --button-bg-active: #0a58ca;
+    --button-text: #ffffff;
+    --content-bg: #212529;
+    --content-border: #495057;
+    --close-bg: #dc3545;
+    --close-bg-hover: #bb2d3b;
+    --close-bg-focus: #bb2d3b;
+    --close-bg-active: #b02a37;
+    --close-text: #ffffff;
+    --focus-color: #86b7fe;
+  }
+}
+/* Focus Visible Support */
+.animation-toggle-trigger:focus:not(:focus-visible),
+.animation-toggle-close:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.animation-toggle-trigger:focus-visible,
+.animation-toggle-close:focus-visible {
+  outline: 3px solid var(--focus-color, #4d90fe);
+  outline-offset: 2px;
+}
+
+/*# sourceMappingURL=animation-toggle.css.map */

package/dist/styles/animation-toggle.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/styles/animation-toggle.scss"],"names":[],"mappings":"AAAA;AACA;AAEA;EACC;EACA;;AAEA;EACC;EACA;;;AAIF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;AACA;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;AAAA;IAEC;IACA;IACA;;EAGD;AAAA;IAEC;IACA;IACA;IACA;;EAGD;AAAA;IAEC;IACA;IACA;;EAGD;IACC;IACA;IACA;;EAGD;IACC;IACA;IACA;;;AAIF;AACA;EACC;AAAA;IAEC;;EAGD;AAAA;IAEC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAIF;AACA;EACC;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIF;AACA;AAAA;EAEC;;;AAGD;AAAA;EAEC;EACA","file":"animation-toggle.css"}