@oardi/css-utils 0.56.0 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.56.0",
+	"version": "0.57.0",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/scss/components/form.scss

@@ -222,7 +222,7 @@
 				border-color: var(--form-check-input-checked-border-color);
 			}
 
-			&:checked::after {
+			&[type='checkbox']:checked::after {
 				content: '';
 				position: absolute;
 				inset-inline-start: 0.25rem;
@@ -234,6 +234,23 @@
 				transform: rotate(45deg);
 			}
 
+			&[type='radio'] {
+				border-radius: 9999px;
+			}
+
+			&[type='radio']:checked::after {
+				content: '';
+				position: absolute;
+				inset-block-start: 50%;
+				inset-inline-start: 50%;
+				width: 0.5rem;
+				height: 0.5rem;
+				background-color: var(--form-check-input-checked-color);
+				border: 0;
+				border-radius: 9999px;
+				transform: translate(-50%, -50%);
+			}
+
 			&:focus-visible {
 				border-color: var(--primary-hover);
 				outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
@@ -291,3 +308,122 @@
 		color: var(--error);
 	}
 }
+
+@layer components {
+	.form-switch {
+		--form-switch-gap: var(--spacer-2);
+
+		--form-switch-input-width: 2.5rem;
+		--form-switch-input-height: 1.25rem;
+		--form-switch-input-padding: 0.125rem;
+
+		--form-switch-input-bg-color: var(--bg-highlight);
+		--form-switch-input-border-width: var(--border-width);
+		--form-switch-input-border-color: var(--border-color);
+		--form-switch-input-border-radius: 9999px;
+
+		--form-switch-input-checked-bg-color: var(--primary);
+		--form-switch-input-checked-border-color: var(--primary);
+
+		--form-switch-thumb-size: 1rem;
+		--form-switch-thumb-bg-color: var(--bg-surface);
+		--form-switch-thumb-box-shadow: var(--shadow-sm);
+
+		--form-switch-disabled-bg-color: var(--disabled-bg-color);
+		--form-switch-disabled-border-color: var(--disabled-border-color);
+		--form-switch-disabled-thumb-bg-color: var(--disabled-text-color);
+
+		--form-switch-focus-outline-width: var(--focus-outline-width);
+		--form-switch-focus-outline-style: var(--focus-outline-style);
+		--form-switch-focus-outline-color: var(--focus-outline-color);
+		--form-switch-focus-outline-offset: var(--focus-offset);
+
+		--form-switch-transition-duration: var(--transition-duration);
+		--form-switch-transition-easing: var(--transition-easing);
+
+		display: flex;
+		align-items: center;
+		gap: var(--form-switch-gap);
+
+		.form-switch-input {
+			box-sizing: border-box;
+			display: inline-flex;
+			align-items: center;
+			flex-shrink: 0;
+			width: var(--form-switch-input-width);
+			height: var(--form-switch-input-height);
+			margin: 0;
+			padding: var(--form-switch-input-padding);
+			appearance: none;
+			cursor: pointer;
+			background-color: var(--form-switch-input-bg-color);
+			border: var(--form-switch-input-border-width) solid var(--form-switch-input-border-color);
+			border-radius: var(--form-switch-input-border-radius);
+
+			transition:
+				background-color var(--form-switch-transition-duration) var(--form-switch-transition-easing),
+				border-color var(--form-switch-transition-duration) var(--form-switch-transition-easing),
+				box-shadow var(--form-switch-transition-duration) var(--form-switch-transition-easing);
+
+			&::after {
+				content: '';
+				display: block;
+				flex: 0 0 var(--form-switch-thumb-size);
+				width: var(--form-switch-thumb-size);
+				height: var(--form-switch-thumb-size);
+				background-color: var(--form-switch-thumb-bg-color);
+				border-radius: 9999px;
+				box-shadow: var(--form-switch-thumb-box-shadow);
+				transform: translateX(0);
+
+				transition:
+					transform var(--form-switch-transition-duration) var(--form-switch-transition-easing),
+					background-color var(--form-switch-transition-duration) var(--form-switch-transition-easing);
+			}
+
+			&:checked {
+				background-color: var(--form-switch-input-checked-bg-color);
+				border-color: var(--form-switch-input-checked-border-color);
+
+				&::after {
+					transform: translateX(
+						calc(
+							var(--form-switch-input-width) - var(--form-switch-thumb-size) -
+								(var(--form-switch-input-padding) * 2) - (var(--form-switch-input-border-width) * 2)
+						)
+					);
+				}
+			}
+
+			&:focus-visible {
+				outline: var(--form-switch-focus-outline-width) var(--form-switch-focus-outline-style)
+					var(--form-switch-focus-outline-color);
+				outline-offset: var(--form-switch-focus-outline-offset);
+			}
+
+			&.is-invalid {
+				border-color: var(--error);
+
+				&:focus-visible {
+					outline: var(--focus-outline-error);
+					outline-offset: var(--form-switch-focus-outline-offset);
+				}
+			}
+
+			&:disabled,
+			&[disabled] {
+				cursor: not-allowed;
+				background-color: var(--form-switch-disabled-bg-color);
+				border-color: var(--form-switch-disabled-border-color);
+
+				&::after {
+					background-color: var(--form-switch-disabled-thumb-bg-color);
+				}
+			}
+		}
+
+		.form-label {
+			margin-bottom: 0;
+		}
+	}
+}