@abstraks-dev/ui-library 1.0.1

package/dist/styles/select.scss

@@ -0,0 +1,363 @@
+@use 'variables' as *;
+
+/* ==========================================================================
+   Select Component Styles
+   ========================================================================== */
+
+/* ==========================================================================
+   SVG Arrow Variables and Mixins
+   ========================================================================== */
+
+// Arrow color variations as URL-encoded hex values
+// These ensure consistency across all select states and make color changes easy
+$select-arrow-normal: '%236c757d'; // Gray (#6c757d) for normal state
+$select-arrow-disabled: '%23adb5bd'; // Light gray (#adb5bd) for disabled state
+$select-arrow-error: '%23dc3545'; // Red (#dc3545) for error state
+$select-arrow-dark: '%23adb5bd'; // Light gray (#adb5bd) for dark mode
+
+/**
+ * Mixin to generate dropdown arrow background with specified color
+ * 
+ * Benefits:
+ * - Eliminates SVG duplication (4+ instances reduced to 1 mixin)
+ * - Centralizes arrow styling for easy maintenance
+ * - Makes color changes simple (just update variables)
+ * - Ensures consistent arrow styling across all states
+ * 
+ * @param {string} $color - URL-encoded hex color (e.g., '%236c757d')
+ */
+@mixin select-dropdown-arrow($color: $select-arrow-normal) {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$color}' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
+	background-position: right $spacing-sm center;
+	background-repeat: no-repeat;
+	background-size: 16px 16px;
+}
+
+/**
+ * Select Wrapper
+ * Container for the entire select component including label, input, and error
+ */
+.select-wrapper {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	width: 100%;
+	font-family: $font-family-body;
+
+	/* Spacing between elements */
+	gap: $spacing-xs;
+
+	/* No label variant */
+	&--no-label {
+		.select__label {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0);
+			white-space: nowrap;
+			border: 0;
+		}
+	}
+
+	/* High contrast mode support */
+	@media (prefers-contrast: high) {
+		.select {
+			border-width: 2px;
+			font-weight: $font-weight-medium;
+		}
+
+		.select:focus {
+			outline: 3px solid currentColor;
+			outline-offset: 2px;
+		}
+	}
+
+	/* Reduced motion support */
+	@media (prefers-reduced-motion: reduce) {
+		.select {
+			transition: none;
+		}
+	}
+}
+
+/**
+ * Select Label
+ * Associated label for the select input
+ */
+.select__label {
+	color: $color-font-body;
+	font-size: $font-size-sm;
+	font-weight: $font-weight-medium;
+	line-height: $line-height-tight;
+	margin-bottom: $spacing-xs;
+
+	/* Required indicator */
+	&--required::after {
+		content: ' *';
+		color: $color-error;
+		font-weight: $font-weight-bold;
+	}
+
+	/* Responsive typography */
+	@media #{$medium} {
+		font-size: $font-size-base;
+	}
+}
+
+/**
+ * Help Text
+ * Descriptive text below the label
+ */
+.select__help-text {
+	color: $color-font-body;
+	font-size: $font-size-xs;
+	line-height: $line-height-base;
+	margin-bottom: $spacing-xs;
+
+	@media #{$medium} {
+		font-size: $font-size-sm;
+	}
+}
+
+/**
+ * Main Select Element
+ * The native select input with custom styling
+ */
+.select {
+	/* Reset and base styles */
+	appearance: none;
+	background-color: $color-white;
+	border: 1px solid $gray-300;
+	border-radius: $border-radius-sm;
+	color: $gray-600;
+	cursor: pointer;
+	font-family: $font-family-body;
+	font-size: $font-size-base;
+	font-weight: $font-weight-normal;
+	line-height: $line-height-base;
+	min-height: 2.5rem;
+	padding: $spacing-sm;
+	position: relative;
+	transition: border-color 0.2s ease, box-shadow 0.2s ease,
+		background-color 0.2s ease;
+	width: 100%;
+
+	/* Custom dropdown arrow */
+	@include select-dropdown-arrow($select-arrow-normal);
+	padding-right: calc(1rem + #{$spacing-lg});
+
+	/* States */
+	&:hover:not(:disabled) {
+		border-color: $gray-500;
+		background-color: $color-white;
+	}
+
+	&:focus {
+		border-color: $color-muted-blue;
+		box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.2);
+		outline: none;
+		background-color: $color-white;
+	}
+
+	&:active:not(:disabled) {
+		border-color: $gray-600;
+	}
+
+	/* Disabled state */
+	&:disabled,
+	&--disabled {
+		background-color: $color-white;
+		border-color: $gray-300;
+		color: $gray-600;
+		cursor: not-allowed;
+		opacity: 0.6;
+
+		/* Custom arrow for disabled state */
+		@include select-dropdown-arrow($select-arrow-disabled);
+
+		&:hover {
+			border-color: $gray-300;
+			background-color: $color-white;
+		}
+	}
+
+	/* 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(244, 67, 54, 0.2);
+		}
+
+		/* Error arrow */
+		@include select-dropdown-arrow($select-arrow-error);
+	}
+
+	/* Multiple select styling */
+	&[multiple] {
+		background-image: none;
+		padding-right: $spacing-sm;
+		min-height: calc(2.5rem * 3);
+		resize: vertical;
+
+		option {
+			padding: $spacing-xs $spacing-sm;
+
+			&:checked {
+				background-color: $color-primary;
+				color: $color-white;
+			}
+		}
+	}
+
+	/* Size variants */
+	&[size] {
+		background-image: none;
+		padding-right: $spacing-sm;
+		min-height: auto;
+		height: auto;
+	}
+
+	/* Option styling */
+	option {
+		color: $gray-600;
+		background-color: $color-white;
+		padding: $spacing-xs $spacing-sm;
+
+		&:disabled {
+			color: $gray-600;
+			opacity: 0.6;
+		}
+
+		&:checked {
+			background-color: $color-primary;
+			color: $color-white;
+		}
+	}
+
+	/* Responsive sizing */
+	@media #{$medium} {
+		font-size: $font-size-base;
+		min-height: 2.75rem;
+		padding: $spacing-sm $spacing-md;
+
+		&[multiple] {
+			min-height: calc(2.75rem * 3);
+		}
+	}
+
+	@media #{$large} {
+		font-size: $font-size-lg;
+		min-height: 3rem;
+		padding: $spacing-md $spacing-lg;
+
+		&[multiple] {
+			min-height: calc(3rem * 3);
+		}
+	}
+
+	@media #{$xlarge} {
+		font-size: $font-size-lg;
+		padding: $spacing-md $spacing-lg;
+	}
+}
+
+/**
+ * Error Message
+ * Error text displayed below the select
+ */
+.select__error {
+	color: $color-error;
+	font-size: $font-size-xs;
+	font-weight: $font-weight-medium;
+	line-height: $line-height-tight;
+	margin-top: $spacing-xs;
+	display: flex;
+	align-items: flex-start;
+	gap: $spacing-xs;
+
+	/* Error icon */
+	&::before {
+		content: '⚠';
+		flex-shrink: 0;
+		font-size: $font-size-sm;
+		line-height: 1;
+	}
+
+	@media #{$medium} {
+		font-size: $font-size-sm;
+	}
+}
+
+/* ==========================================================================
+   High Contrast Mode Support
+   ========================================================================== */
+@media (prefers-contrast: high) {
+	.select-wrapper {
+		.select {
+			border-width: 2px;
+			font-weight: $font-weight-medium;
+
+			&:focus {
+				outline: 3px solid currentColor;
+				outline-offset: 2px;
+				box-shadow: none;
+			}
+
+			&--error {
+				border-color: $color-error;
+				border-width: 3px;
+			}
+		}
+
+		.select__error {
+			font-weight: $font-weight-bold;
+			text-decoration: underline;
+		}
+	}
+}
+
+/* ==========================================================================
+   Dark Mode Support
+   ========================================================================== */
+// @media (prefers-color-scheme: dark) {
+// 	.select-wrapper {
+// 		.select {
+// 			background-color: $gray-800;
+// 			border-color: $gray-600;
+// 			color: $gray-100;
+
+// 			/* Dark mode dropdown arrow */
+// 			@include select-dropdown-arrow($select-arrow-dark);
+
+// 			&:hover:not(:disabled) {
+// 				border-color: $gray-500;
+// 				background-color: $gray-700;
+// 			}
+
+// 			&:focus {
+// 				border-color: $focus-color;
+// 				box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.2);
+// 				background-color: $gray-800;
+// 			}
+
+// 			option {
+// 				background-color: $gray-800;
+// 				color: $gray-100;
+// 			}
+// 		}
+
+// 		.select__label {
+// 			color: $gray-100;
+// 		}
+
+// 		.select__help-text {
+// 			color: $gray-400;
+// 		}
+// 	}
+// }

package/dist/styles/side-menu.scss

@@ -0,0 +1,334 @@
+@use 'variables' as *;
+
+.side-menu {
+	.overlay,
+	.menu {
+		height: 100%;
+		right: 0;
+		top: 0;
+		visibility: hidden;
+		z-index: $z-index-overlay;
+		position: fixed;
+	}
+
+	.overlay {
+		background-color: rgba(0, 0, 0, 0.5);
+		opacity: 0;
+		transition: visibility 0s linear 0.3s, opacity 0.3s ease-in-out;
+		width: 100%;
+		left: 0;
+
+		/* Enhanced backdrop for better accessibility */
+		backdrop-filter: blur(2px);
+
+		&.active {
+			opacity: 1;
+			visibility: visible;
+			transition: opacity 0.3s ease-in-out;
+		}
+	}
+
+	/* Direction-specific transforms */
+	.menu-x {
+		transform: translateX(100%);
+		transition: transform 0.3s ease-in-out;
+
+		&.active {
+			transform: translateX(0);
+		}
+
+		/* Horizontal position variants */
+		&.menu-x-left {
+			transform: translateX(-100%);
+			right: auto;
+			left: 0;
+
+			&.active {
+				transform: translateX(0);
+			}
+		}
+	}
+
+	.menu-y {
+		transform: translateY(-100%);
+		transition: transform 0.3s ease-in-out;
+		right: auto;
+		left: 0;
+		top: 0;
+		width: 100%;
+
+		&.active {
+			transform: translateY(0);
+		}
+
+		/* Vertical position variants */
+		&.menu-y-bottom {
+			transform: translateY(100%);
+			top: auto;
+			bottom: 0;
+
+			&.active {
+				transform: translateY(0);
+			}
+		}
+	}
+
+	.menu {
+		align-items: flex-end;
+		flex-direction: column;
+		width: 100%;
+		transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
+		overflow-x: hidden;
+		background: #ffffff;
+		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+
+		/* Mobile-first responsive design */
+		@media #{$medium} {
+			width: 60%;
+			max-width: 400px;
+		}
+
+		@media #{$large} {
+			width: 50%;
+			max-width: 450px;
+		}
+
+		@media #{$xlarge} {
+			width: 40%;
+			max-width: 500px;
+		}
+
+		.wrapper-header,
+		.wrapper-content {
+			width: 100%;
+			padding: 16px;
+
+			@media #{$medium} {
+				padding: 20px;
+			}
+
+			@media #{$large} {
+				padding: 24px;
+			}
+
+			@media #{$xlarge} {
+				padding: 28px;
+			}
+		}
+
+		.wrapper-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			border-bottom: 1px solid #e0e0e0;
+			background: #f8f9fa;
+			min-height: 60px;
+
+			.menu-title {
+				margin: 0;
+				font-size: 1.1rem;
+				font-weight: 600;
+				color: #333;
+				flex: 1;
+				text-align: center;
+
+				@media #{$medium} {
+					font-size: 1.2rem;
+				}
+
+				@media #{$large} {
+					font-size: 1.3rem;
+				}
+			}
+
+			.icon-left,
+			.icon-right {
+				background: none;
+				border: none;
+				cursor: pointer;
+				padding: 8px;
+				border-radius: 4px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				color: #666;
+				transition: background-color 0.2s, color 0.2s;
+				min-width: 40px;
+				min-height: 40px;
+
+				&:hover {
+					background-color: rgba(0, 0, 0, 0.1);
+					color: #333;
+				}
+
+				&:focus {
+					outline: 2px solid #007bff;
+					outline-offset: 2px;
+				}
+
+				/* Enhanced touch targets for mobile */
+				@media #{$medium} {
+					min-width: 44px;
+					min-height: 44px;
+				}
+			}
+
+			.icon-right {
+				margin-left: auto;
+			}
+		}
+
+		.wrapper-content {
+			height: calc(100% - 60px);
+			overflow-y: auto;
+			flex: 1;
+
+			/* Custom scrollbar for better UX */
+			&::-webkit-scrollbar {
+				width: 6px;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: #f1f1f1;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: #c1c1c1;
+				border-radius: 3px;
+
+				&:hover {
+					background: #a1a1a1;
+				}
+			}
+		}
+	}
+
+	/* Trigger styling */
+	.trigger {
+		cursor: pointer;
+		display: inline-block;
+
+		&:focus-within {
+			outline: 2px solid #007bff;
+			outline-offset: 2px;
+			border-radius: 4px;
+		}
+	}
+
+	/* Active state handling */
+	.active {
+		visibility: visible;
+		display: flex;
+	}
+
+	/* Accessibility and reduced motion support */
+	@media (prefers-reduced-motion: reduce) {
+		.overlay,
+		.menu-x,
+		.menu-y {
+			transition: none;
+		}
+
+		.overlay {
+			backdrop-filter: none;
+		}
+	}
+
+	/* High contrast mode support */
+	@media (prefers-contrast: high) {
+		.menu {
+			border: 2px solid #000;
+			box-shadow: none;
+		}
+
+		.wrapper-header {
+			border-bottom: 2px solid #000;
+			background: #fff;
+
+			.menu-title {
+				font-weight: bold;
+				color: #000;
+			}
+
+			.icon-left,
+			.icon-right {
+				border: 2px solid #000;
+				color: #000;
+
+				&:hover,
+				&:focus {
+					background: #000;
+					color: #fff;
+				}
+			}
+		}
+
+		.overlay {
+			background-color: rgba(0, 0, 0, 0.8);
+		}
+	}
+
+	/* Dark mode considerations */
+	@media (prefers-color-scheme: dark) {
+		.menu {
+			background: #1a1a1a;
+			color: #ffffff;
+			box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
+		}
+
+		.wrapper-header {
+			background: #2a2a2a;
+			border-bottom-color: #404040;
+
+			.menu-title {
+				color: #ffffff;
+			}
+
+			.icon-left,
+			.icon-right {
+				color: #cccccc;
+
+				&:hover {
+					background-color: rgba(255, 255, 255, 0.1);
+					color: #ffffff;
+				}
+			}
+		}
+
+		.wrapper-content {
+			&::-webkit-scrollbar-track {
+				background: #2a2a2a;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: #666;
+
+				&:hover {
+					background: #888;
+				}
+			}
+		}
+	}
+
+	/* Focus trap styling */
+	&:focus-within {
+		.menu {
+			&:focus {
+				outline: none;
+			}
+		}
+	}
+}
+
+/* Screen reader only utility class */
+.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;
+}