@fea-ui/styles 0.1.0-alpha.6 → 0.1.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fea-ui/styles",
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-alpha.8",
   "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
   "keywords": [
     "fea-ui",

package/src/components/alert-dialog.css

@@ -17,7 +17,7 @@
 
 	@apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
 
-	@apply transition-all motion-reduce:transition-none;
+	@apply transition-[scale,opacity] motion-reduce:transition-none;
 
 	&[data-starting-style],
 	&[data-ending-style] {

package/src/components/button.css

@@ -6,12 +6,10 @@
 
 	@apply w-fit px-4 py-4;
 
-	@apply transition-all motion-reduce:transition-none;
+	@apply transition-[scale] motion-reduce:transition-none;
 
-	@media (hover: hover) {
-		&:hover:not([data-disabled]) {
-			@apply brightness-90;
-		}
+	&:hover:not([data-disabled]) {
+		@apply brightness-90;
 	}
 
 	&:active {
@@ -33,6 +31,10 @@
 
 .button--sm {
 	@apply h-8 text-sm;
+
+	svg {
+		@apply size-4;
+	}
 }
 
 .button--md {
@@ -60,7 +62,11 @@
 }
 
 .button--ghost {
-	@apply hover:bg-primary/10 border-0 bg-transparent;
+	@apply border-0 bg-transparent text-foreground;
+
+	&:hover:not([data-disabled]) {
+		@apply bg-secondary/10;
+	}
 }
 
 .button--icon-only {

package/src/components/checkbox.css

@@ -4,7 +4,7 @@
 
 	@apply size-6 outline-none;
 
-	@apply transition-all motion-reduce:transition-none;
+	@apply transition-[visibility] motion-reduce:transition-none;
 
 	&[data-unchecked] {
 		@apply bg-input/50;

package/src/components/dialog.css

@@ -17,7 +17,7 @@
 
 	@apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
 
-	@apply transition-all motion-reduce:transition-none;
+	@apply transition-[scale,opacity] motion-reduce:transition-none;
 
 	&[data-starting-style],
 	&[data-ending-style] {

package/src/components/drawer.css

@@ -14,7 +14,7 @@
 
 	@apply bg-card text-card-foreground shadow;
 
-	@apply transition-all motion-reduce:transition-none;
+	@apply transition-[translate] motion-reduce:transition-none;
 }
 
 .drawer__title {

package/src/components/index.css

@@ -27,3 +27,6 @@
 @import "./alert-dialog.css";
 @import "./fieldset.css";
 @import "./drawer.css";
+@import "./popover.css";
+@import "./progress.css";
+@import "./radio.css";

package/src/components/input.css

@@ -3,7 +3,7 @@
 	@apply bg-input text-input-foreground rounded border;
 	@apply w-full px-3 py-2;
 
-	@apply transition-all motion-reduce:transition-none;
+	@apply transition-[brightness] motion-reduce:transition-none;
 
 	@media (hover: hover) {
 		&:hover:not([data-disabled]) {

package/src/components/meter.css

@@ -18,7 +18,7 @@
 .meter__indicator {
 	@apply block rounded;
 
-	@apply transition-all motion-reduce:transition-none;
+	@apply transition-[width] motion-reduce:transition-none;
 }
 
 /** Variants */

package/src/components/navbar.css

@@ -20,7 +20,7 @@
 }
 
 .navbar__list {
-	@apply hidden md:flex md:items-center md:gap-6;
+	@apply flex items-center gap-4;
 }
 
 .navbar__list-item {

package/src/components/popover.css

@@ -0,0 +1,54 @@
+.popover__trigger {
+	@apply transition-[scale] motion-reduce:transition-none;
+
+	&[data-popup-open] {
+		@apply scale-95;
+	}
+}
+
+.popover__positioner {
+	width: var(--positioner-width);
+	max-width: var(--available-width);
+	height: var(--positioner-width);
+}
+
+.popover__popup {
+	@apply box-border p-3 rounded;
+
+	@apply bg-popover text-popover-foreground shadow;
+
+	@apply transition-[transform,scale] motion-reduce:transition-none;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply opacity-0 scale-90;
+	}
+}
+
+.popover__arrow {
+	@apply flex text-popover size-6;
+
+	&[data-side="top"] {
+		@apply -bottom-3 rotate-180;
+	}
+
+	&[data-side="right"] {
+		@apply -start-3 rotate-90;
+	}
+
+	&[data-side="bottom"] {
+		@apply -top-3;
+	}
+
+	&[data-side="left"] {
+		@apply -end-3 -rotate-90;
+	}
+}
+
+.popover__title {
+	@apply text-lg font-medium;
+}
+
+.popover__description {
+	@apply text-sm text-muted-foreground;
+}

package/src/components/progress.css

@@ -0,0 +1,72 @@
+/** Base Styling */
+.progress {
+	@apply grid grid-cols-2 items-center gap-1;
+}
+
+.progress__label {
+	@apply font-medium;
+}
+
+.progress__value {
+	@apply col-start-2 m-0 text-right text-sm leading-5;
+}
+
+.progress__track {
+	@apply col-span-2 block w-48 overflow-hidden rounded shadow-inner;
+}
+
+.progress__indicator {
+	@apply block rounded;
+
+	@apply transition-[width] motion-reduce:transition-none;
+}
+
+/** Variants */
+.progress--primary .progress__track {
+	@apply bg-primary/10;
+}
+
+.progress--primary .progress__indicator {
+	@apply bg-primary;
+}
+
+.progress--secondary .progress__track {
+	@apply bg-secondary/10;
+}
+
+.progress--secondary .progress__indicator {
+	@apply bg-secondary;
+}
+
+.progress--success .progress__track {
+	@apply bg-success/10;
+}
+
+.progress--success .progress__indicator {
+	@apply bg-success;
+}
+
+.progress--danger .progress__track {
+	@apply bg-danger/10;
+}
+
+.progress--danger .progress__indicator {
+	@apply bg-danger;
+}
+
+/** Sizes */
+.progress--sm .progress__track {
+	@apply h-2;
+}
+
+.progress--sm .progress__label {
+	@apply text-sm;
+}
+
+.progress--md .progress__track {
+	@apply h-3;
+}
+
+.progress--lg .progress__track {
+	@apply h-4;
+}

package/src/components/radio.css

@@ -0,0 +1,31 @@
+.radio__group {
+	@apply flex flex-col gap-4;
+}
+
+.radio {
+	@apply box-border flex size-5 items-center justify-center rounded-full;
+
+	&[data-unchecked] {
+		@apply border-border bg-secondary;
+	}
+
+	&[data-checked] {
+		@apply border-primary bg-primary;
+	}
+
+	&:focus-visible {
+		@apply status-focused;
+	}
+}
+
+.radio__indicator {
+	@apply flex items-center justify-center;
+
+	&[data-unchecked] {
+		@apply hidden;
+	}
+
+	&::before {
+		@apply block size-2 rounded-full bg-background content-[''];
+	}
+}

package/src/components/table.css

@@ -1 +1,32 @@
 /** Base Styling */
+.table {
+	@apply w-full border-collapse bg-card;
+}
+
+.table__thead {
+	@apply bg-secondary text-secondary-foreground;
+}
+
+.table__th {
+	@apply border-border px-4 py-2 text-left font-medium;
+}
+
+.table__tbody {
+	@apply divide-y divide-border;
+}
+
+.table__tr {
+	@apply cursor-pointer;
+
+	&:hover {
+		@apply bg-secondary/50;
+	}
+}
+
+.table__td {
+	@apply border-border px-4 py-2;
+}
+
+.table__caption {
+	@apply mt-2 text-sm text-secondary-foreground;
+}