@abstraks-dev/ui-library 1.0.1

package/dist/index.js

@@ -0,0 +1,332 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Anchor: true,
+  Animation: true,
+  AnimationGroup: true,
+  AnimationToggle: true,
+  Avatar: true,
+  Button: true,
+  Card: true,
+  Checkbox: true,
+  Crud: true,
+  DragAndDrop: true,
+  Error: true,
+  Form: true,
+  Header: true,
+  Heading: true,
+  Hero: true,
+  Label: true,
+  Loader: true,
+  Paragraph: true,
+  Radio: true,
+  Select: true,
+  SideMenu: true,
+  Tabs: true,
+  TextArea: true,
+  TextInput: true,
+  ArrowIcon: true,
+  ArrowRight: true,
+  CheckCircle: true,
+  ChevronDown: true,
+  Close: true,
+  EditSquare: true,
+  Ellipses: true,
+  Hamburger: true,
+  LoadingSpinner: true,
+  PlusCircle: true,
+  SaveIcon: true,
+  TrashX: true
+};
+Object.defineProperty(exports, "Anchor", {
+  enumerable: true,
+  get: function () {
+    return _Anchor.default;
+  }
+});
+Object.defineProperty(exports, "Animation", {
+  enumerable: true,
+  get: function () {
+    return _Animation.default;
+  }
+});
+Object.defineProperty(exports, "AnimationGroup", {
+  enumerable: true,
+  get: function () {
+    return _AnimationGroup.default;
+  }
+});
+Object.defineProperty(exports, "AnimationToggle", {
+  enumerable: true,
+  get: function () {
+    return _AnimationToggle.default;
+  }
+});
+Object.defineProperty(exports, "ArrowIcon", {
+  enumerable: true,
+  get: function () {
+    return _ArrowIcon.ArrowIcon;
+  }
+});
+Object.defineProperty(exports, "ArrowRight", {
+  enumerable: true,
+  get: function () {
+    return _ArrowRight.ArrowRight;
+  }
+});
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function () {
+    return _Avatar.default;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function () {
+    return _Card.default;
+  }
+});
+Object.defineProperty(exports, "CheckCircle", {
+  enumerable: true,
+  get: function () {
+    return _CheckCircle.CheckCircle;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "ChevronDown", {
+  enumerable: true,
+  get: function () {
+    return _ChevronDown.ChevronDown;
+  }
+});
+Object.defineProperty(exports, "Close", {
+  enumerable: true,
+  get: function () {
+    return _Close.Close;
+  }
+});
+Object.defineProperty(exports, "Crud", {
+  enumerable: true,
+  get: function () {
+    return _Crud.default;
+  }
+});
+Object.defineProperty(exports, "DragAndDrop", {
+  enumerable: true,
+  get: function () {
+    return _DragAndDrop.default;
+  }
+});
+Object.defineProperty(exports, "EditSquare", {
+  enumerable: true,
+  get: function () {
+    return _EditSquare.EditSquare;
+  }
+});
+Object.defineProperty(exports, "Ellipses", {
+  enumerable: true,
+  get: function () {
+    return _Ellipses.Ellipses;
+  }
+});
+Object.defineProperty(exports, "Error", {
+  enumerable: true,
+  get: function () {
+    return _Error.default;
+  }
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () {
+    return _Form.default;
+  }
+});
+Object.defineProperty(exports, "Hamburger", {
+  enumerable: true,
+  get: function () {
+    return _Hamburger.Hamburger;
+  }
+});
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function () {
+    return _Header.default;
+  }
+});
+Object.defineProperty(exports, "Heading", {
+  enumerable: true,
+  get: function () {
+    return _Heading.default;
+  }
+});
+Object.defineProperty(exports, "Hero", {
+  enumerable: true,
+  get: function () {
+    return _Hero.default;
+  }
+});
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function () {
+    return _Label.default;
+  }
+});
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function () {
+    return _Loader.default;
+  }
+});
+Object.defineProperty(exports, "LoadingSpinner", {
+  enumerable: true,
+  get: function () {
+    return _LoadingSpinner.LoadingSpinner;
+  }
+});
+Object.defineProperty(exports, "Paragraph", {
+  enumerable: true,
+  get: function () {
+    return _Paragraph.default;
+  }
+});
+Object.defineProperty(exports, "PlusCircle", {
+  enumerable: true,
+  get: function () {
+    return _PlusCircle.PlusCircle;
+  }
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function () {
+    return _Radio.Radio;
+  }
+});
+Object.defineProperty(exports, "SaveIcon", {
+  enumerable: true,
+  get: function () {
+    return _SaveIcon.SaveIcon;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () {
+    return _Select.Select;
+  }
+});
+Object.defineProperty(exports, "SideMenu", {
+  enumerable: true,
+  get: function () {
+    return _SideMenu.SideMenu;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.Tabs;
+  }
+});
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function () {
+    return _TextArea.TextArea;
+  }
+});
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function () {
+    return _TextInput.TextInput;
+  }
+});
+Object.defineProperty(exports, "TrashX", {
+  enumerable: true,
+  get: function () {
+    return _TrashX.TrashX;
+  }
+});
+var _styles = require("./styles");
+Object.keys(_styles).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styles[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _styles[key];
+    }
+  });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+var _animation = require("./constants/animation");
+Object.keys(_animation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _animation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _animation[key];
+    }
+  });
+});
+var _Anchor = _interopRequireDefault(require("./components/Anchor"));
+var _Animation = _interopRequireDefault(require("./components/Animation"));
+var _AnimationGroup = _interopRequireDefault(require("./components/AnimationGroup"));
+var _AnimationToggle = _interopRequireDefault(require("./components/AnimationToggle"));
+var _Avatar = _interopRequireDefault(require("./components/Avatar"));
+var _Button = _interopRequireDefault(require("./components/Button"));
+var _Card = _interopRequireDefault(require("./components/Card"));
+var _Checkbox = _interopRequireDefault(require("./components/Checkbox"));
+var _Crud = _interopRequireDefault(require("./components/Crud"));
+var _DragAndDrop = _interopRequireDefault(require("./components/DragAndDrop"));
+var _Error = _interopRequireDefault(require("./components/Error"));
+var _Form = _interopRequireDefault(require("./components/Form"));
+var _Header = _interopRequireDefault(require("./components/Header"));
+var _Heading = _interopRequireDefault(require("./components/Heading"));
+var _Hero = _interopRequireDefault(require("./components/Hero"));
+var _Label = _interopRequireDefault(require("./components/Label"));
+var _Loader = _interopRequireDefault(require("./components/Loader"));
+var _Paragraph = _interopRequireDefault(require("./components/Paragraph"));
+var _Radio = require("./components/Radio");
+var _Select = require("./components/Select");
+var _SideMenu = require("./components/SideMenu");
+var _Tabs = require("./components/Tabs");
+var _TextArea = require("./components/TextArea");
+var _TextInput = require("./components/TextInput");
+var _ArrowIcon = require("./icons/ArrowIcon");
+var _ArrowRight = require("./icons/ArrowRight");
+var _CheckCircle = require("./icons/CheckCircle");
+var _ChevronDown = require("./icons/ChevronDown");
+var _Close = require("./icons/Close");
+var _EditSquare = require("./icons/EditSquare");
+var _Ellipses = require("./icons/Ellipses");
+var _Hamburger = require("./icons/Hamburger");
+var _LoadingSpinner = require("./icons/LoadingSpinner");
+var _PlusCircle = require("./icons/PlusCircle");
+var _SaveIcon = require("./icons/SaveIcon");
+var _TrashX = require("./icons/TrashX");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/setupTests.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@testing-library/jest-dom");

package/dist/styles/_variables.scss

@@ -0,0 +1,286 @@
+// Break points
+$small: '(min-width: 607px)';
+$medium: '(min-width: 768px)';
+$large: '(min-width: 992px)';
+$xlarge: '(min-width: 1200px)';
+
+// Colors
+$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 and interaction colors
+$focus-color: #4d90fe;
+
+// Button shadow variables
+$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 variables
+$border-radius-xs: 4px;
+$border-radius-sm: 4px;
+$border-radius-md: 6px;
+$border-radius-lg: 8px;
+$border-radius-xl: 10px;
+
+// Z-index layer system
+// Base layers (1-99)
+$z-index-base: 1;
+$z-index-low: 10;
+
+// UI elements (100-999)
+$z-index-dropdown: 100;
+$z-index-sticky: 200;
+$z-index-popover: 300;
+$z-index-tooltip: 400;
+
+// Overlays and modals (1000+)
+$z-index-overlay: 1000;
+$z-index-modal: 1010;
+$z-index-notification: 1020;
+
+// Gray color variables
+$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;
+
+// Headings
+$heading-one: 2.5rem;
+$heading-two: 2rem;
+$heading-three: 1.75rem;
+$heading-four: 1.5rem;
+$heading-five: 1.25rem;
+$heading-six: 1rem;
+
+// Typography
+$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;
+$font-size-2xl: 1.5rem;
+$font-size-3xl: 1.875rem;
+
+$line-height-tight: 1.25;
+$line-height-normal: 1.4;
+$line-height-base: 1.5;
+$line-height-relaxed: 1.625;
+$line-height-loose: 1.75;
+
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+// Spacing
+$spacing-xs: 0.25rem;
+$spacing-sm: 0.5rem;
+$spacing-md: 1rem;
+$spacing-lg: 1.5rem;
+$spacing-xl: 2rem;
+$spacing-2xl: 3rem;
+
+// Base colors
+$text-color: #1f2937;
+$text-color-primary: #1f2937;
+$text-color-high-contrast: #000000;
+$text-muted: #6b7280;
+$background-color: #ffffff;
+$border-color: #d1d5db;
+$border-color-hover: #9ca3af;
+
+// State colors
+$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;
+
+// Focus and interaction
+$primary-color: #3b82f6;
+$focus-ring-color: #3b82f6;
+
+// Border radius
+$border-radius: 0.375rem;
+
+// --- Sass map of variables to custom property names ---
+$css-vars: (
+	small: $small,
+	medium: $medium,
+	large: $large,
+	xlarge: $xlarge,
+	color-primary: $color-primary,
+	color-primary-hover: $color-primary-hover,
+	color-secondary: $color-secondary,
+	color-secondary-hover: $color-secondary-hover,
+	color-warning: $color-warning,
+	color-warning-hover: $color-warning-hover,
+	color-success: $color-success,
+	color-success-hover: $color-success-hover,
+	color-error: $color-error,
+	color-error-hover: $color-error-hover,
+	color-shade: $color-shade,
+	color-tint: $color-tint,
+	color-white: $color-white,
+	color-black: $color-black,
+	color-font-body: $color-font-body,
+	color-black-alpha: $color-black-alpha,
+	focus-color: $focus-color,
+	shadow-primary: $shadow-primary,
+	shadow-primary-hover: $shadow-primary-hover,
+	shadow-primary-strong: $shadow-primary-strong,
+	shadow-primary-strongest: $shadow-primary-strongest,
+	shadow-secondary: $shadow-secondary,
+	shadow-secondary-hover: $shadow-secondary-hover,
+	shadow-secondary-strong: $shadow-secondary-strong,
+	shadow-secondary-strongest: $shadow-secondary-strongest,
+	shadow-success: $shadow-success,
+	shadow-success-hover: $shadow-success-hover,
+	shadow-success-strong: $shadow-success-strong,
+	shadow-success-strongest: $shadow-success-strongest,
+	shadow-error: $shadow-error,
+	shadow-error-hover: $shadow-error-hover,
+	shadow-error-strong: $shadow-error-strong,
+	shadow-error-strongest: $shadow-error-strongest,
+	shadow-warning: $shadow-warning,
+	shadow-warning-hover: $shadow-warning-hover,
+	shadow-warning-strong: $shadow-warning-strong,
+	shadow-warning-strongest: $shadow-warning-strongest,
+	border-radius-xs: $border-radius-xs,
+	border-radius-sm: $border-radius-sm,
+	border-radius-md: $border-radius-md,
+	border-radius-lg: $border-radius-lg,
+	border-radius-xl: $border-radius-xl,
+	z-index-base: $z-index-base,
+	z-index-low: $z-index-low,
+	z-index-dropdown: $z-index-dropdown,
+	z-index-sticky: $z-index-sticky,
+	z-index-popover: $z-index-popover,
+	z-index-tooltip: $z-index-tooltip,
+	z-index-overlay: $z-index-overlay,
+	z-index-modal: $z-index-modal,
+	z-index-notification: $z-index-notification,
+	gray-100: $gray-100,
+	gray-200: $gray-200,
+	gray-300: $gray-300,
+	gray-400: $gray-400,
+	gray-500: $gray-500,
+	gray-600: $gray-600,
+	gray-700: $gray-700,
+	gray-800: $gray-800,
+	gray-900: $gray-900,
+	black: $black,
+	color-muted-blue: $color-muted-blue,
+	heading-one: $heading-one,
+	heading-two: $heading-two,
+	heading-three: $heading-three,
+	heading-four: $heading-four,
+	heading-five: $heading-five,
+	heading-six: $heading-six,
+	font-family-body: $font-family-body,
+	font-size-xs: $font-size-xs,
+	font-size-sm: $font-size-sm,
+	font-size-base: $font-size-base,
+	font-size-lg: $font-size-lg,
+	font-size-xl: $font-size-xl,
+	line-height-tight: $line-height-tight,
+	line-height-base: $line-height-base,
+	line-height-relaxed: $line-height-relaxed,
+	font-weight-light: $font-weight-light,
+	font-weight-normal: $font-weight-normal,
+	font-weight-medium: $font-weight-medium,
+	font-weight-semibold: $font-weight-semibold,
+	font-weight-bold: $font-weight-bold,
+	spacing-xs: $spacing-xs,
+	spacing-sm: $spacing-sm,
+	spacing-md: $spacing-md,
+	spacing-lg: $spacing-lg,
+	spacing-xl: $spacing-xl,
+	spacing-2xl: $spacing-2xl,
+	text-color: $text-color,
+	text-muted: $text-muted,
+	background-color: $background-color,
+	border-color: $border-color,
+	border-color-hover: $border-color-hover,
+	error-text: $error-text,
+	error-background: $error-background,
+	error-border: $error-border,
+	success-text: $success-text,
+	success-background: $success-background,
+	success-border: $success-border,
+	warning-text: $warning-text,
+	warning-background: $warning-background,
+	warning-border: $warning-border,
+	primary-color: $primary-color,
+	focus-ring-color: $focus-ring-color,
+	border-radius: $border-radius,
+);
+
+@mixin css-custom-properties($map) {
+	@each $name, $value in $map {
+		--#{$name}: #{$value};
+	}
+}
+
+:root {
+	@include css-custom-properties($css-vars);
+}

package/dist/styles/anchor.scss

@@ -0,0 +1,40 @@
+@use 'variables' as *;
+
+.anchor {
+	width: 100%;
+	text-decoration: none;
+	color: $color-secondary;
+
+	&:hover,
+	&:focus {
+		text-decoration: underline;
+		background-color: $color-tint;
+	}
+
+	&:focus {
+		outline: 0 auto -webkit-focus-ring-color;
+		outline-offset: 0;
+		border: 0 solid transparent;
+	}
+}
+
+.anchor[disabled] {
+	pointer-events: none;
+	color: $color-shade;
+}
+
+.anchor.primary {
+	color: $color-primary;
+
+	&:hover {
+		color: $color-primary-hover;
+	}
+}
+
+.anchor.secondary {
+	color: $color-secondary;
+
+	&:hover {
+		color: $color-secondary-hover;
+	}
+}