@fea-ui/styles 0.1.0-alpha.7 → 0.1.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fea-ui/styles",
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.0-alpha.9",
   "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
   "keywords": [
     "fea-ui",
@@ -35,7 +35,8 @@
   ],
   "scripts": {
     "build:css": "bunx @tailwindcss/cli -i src/styles.css -o dist/index.css --minify",
-    "check": "biome check --write"
+    "check": "biome check --write",
+    "gen:exports": "bun run scripts/gen-exports.mjs"
   },
   "dependencies": {
     "tailwindcss": "^4.1.18"

package/src/components/accordion.css

@@ -1,5 +1,5 @@
 .accordion {
-	@apply bg-card text-card-foreground flex w-full max-w-md flex-col justify-center;
+	@apply bg-surface text-surface-foreground flex w-full max-w-md flex-col justify-center;
 }
 
 .accordion__trigger {

package/src/components/alert.css

@@ -0,0 +1,46 @@
+.alert {
+	@apply flex items-start justify-between p-5 rounded border bg-surface shadow;
+
+	@apply w-full;
+}
+
+.alert__indicator {
+	@apply shrink-0 mr-4 mt-1;
+
+	svg {
+		@apply size-5;
+	}
+}
+
+.alert__content {
+	@apply flex-1 flex flex-col gap-1;
+}
+
+.alert__title {
+	@apply font-medium;
+}
+
+.alert__description {
+	@apply text-sm text-muted-foreground;
+}
+
+/* Variants */
+.alert--primary {
+	@apply text-primary;
+}
+
+.alert--danger {
+	@apply text-red-500;
+}
+
+.alert--success {
+	@apply text-green-500;
+}
+
+.alert--warning {
+	@apply text-yellow-500;
+}
+
+.alert--info {
+	@apply text-blue-500;
+}

package/src/components/button.css

@@ -8,22 +8,26 @@
 
 	@apply transition-[scale] motion-reduce:transition-none;
 
-	&:hover:not([data-disabled]) {
+	&[data-hovered] {
 		@apply brightness-90;
 	}
 
-	&:active {
-		@apply scale-95;
+	&[data-focused] {
+		@apply status-focused;
 	}
 
-	&:focus-visible {
-		@apply status-focused;
+	&:active {
+		@apply scale-95;
 	}
 
 	&[data-disabled] {
 		@apply status-disabled;
 	}
 
+	&[data-pending] {
+		@apply status-pending;
+	}
+
 	svg {
 		@apply size-5 shrink-0;
 	}

package/src/components/card.css

@@ -7,7 +7,7 @@
 
 /** Variants */
 .card--default {
-	@apply bg-card text-card-foreground;
+	@apply bg-surface text-surface-foreground;
 }
 
 .card--transparent {

package/src/components/checkbox-group.css

@@ -1,4 +1,4 @@
 /** Base Styling */
 .checkbox-group {
-	@apply flex flex-col items-start gap-4;
+	@apply flex flex-col;
 }

package/src/components/description.css

@@ -0,0 +1,3 @@
+.description {
+	@apply text-muted-foreground text-sm;
+}

package/src/components/drawer.css

@@ -10,9 +10,9 @@
 }
 
 .drawer__popup {
-	@apply box-border fixed p-3;
+	@apply fixed p-3 z-50;
 
-	@apply bg-card text-card-foreground shadow;
+	@apply bg-surface text-surface-foreground shadow;
 
 	@apply transition-[translate] motion-reduce:transition-none;
 }

package/src/components/field-error.css

@@ -0,0 +1,3 @@
+.field-error {
+	@apply text-danger text-sm;
+}

package/src/components/index.css

@@ -1,30 +1,35 @@
-@import "./input.css";
-@import "./textarea.css";
 @import "./meter.css";
+@import "./label.css";
+@import "./toggle-button.css";
 @import "./list.css";
-@import "./navbar.css";
-@import "./checkbox-group.css";
-@import "./card.css";
-@import "./avatar.css";
-@import "./button-group.css";
+@import "./radio.css";
 @import "./accordion.css";
-@import "./label.css";
-@import "./menu.css";
-@import "./chip.css";
 @import "./link.css";
-@import "./container.css";
+@import "./checkbox.css";
 @import "./tabs.css";
-@import "./button.css";
+@import "./drawer.css";
+@import "./fieldset.css";
+@import "./button-group.css";
+@import "./checkbox-group.css";
+@import "./description.css";
+@import "./chip.css";
+@import "./container.css";
+@import "./navbar.css";
+@import "./slider.css";
+@import "./avatar.css";
+@import "./text-field.css";
 @import "./text.css";
-@import "./form.css";
-@import "./separator.css";
 @import "./switch.css";
-@import "./checkbox.css";
-@import "./field.css";
-@import "./toggle-button.css";
+@import "./popover.css";
+@import "./input.css";
 @import "./table.css";
-@import "./dialog.css";
 @import "./alert-dialog.css";
-@import "./fieldset.css";
-@import "./drawer.css";
-@import "./popover.css";
+@import "./progress.css";
+@import "./card.css";
+@import "./form.css";
+@import "./field-error.css";
+@import "./dialog.css";
+@import "./menu.css";
+@import "./button.css";
+@import "./separator.css";
+@import "./alert.css";

package/src/components/input.css

@@ -1,22 +1,24 @@
-/** Base Styling */
-.input {
+.input,
+.textarea {
 	@apply bg-input text-input-foreground rounded border;
 	@apply w-full px-3 py-2;
 
 	@apply transition-[brightness] motion-reduce:transition-none;
 
-	@media (hover: hover) {
-		&:hover:not([data-disabled]) {
-			@apply brightness-90;
-		}
+	&::placeholder {
+		@apply text-muted-foreground;
+	}
+
+	&[data-focused] {
+		@apply status-focused;
 	}
 
 	&:disabled {
 		@apply status-disabled;
 	}
 
-	&:invalid:not(:placeholder-shown) {
-		@apply status-invalid;
+	&[data-invalid] {
+		@apply border-danger;
 	}
 }
 

package/src/components/label.css

@@ -1,4 +1,8 @@
 /** Base Styling */
 .label {
-	@apply flex items-center gap-2 select-none;
+	@apply font-medium text-foreground leading-none;
+}
+
+[data-required="true"] .label {
+	@apply after:content-['*'] after:ml-0.5 after:text-danger;
 }

package/src/components/link.css

@@ -1,6 +1,8 @@
 /** Base Styling */
 .link {
-	@apply text-link underline-offset-2 transition-colors;
+	@apply text-link underline-offset-2 inline-flex items-center;
+
+	@apply transition-[color] motion-reduce:transition-none;
 
 	&:visited {
 		@apply text-link/70;
@@ -18,6 +20,10 @@
 	[data-disabled] {
 		@apply text-muted cursor-not-allowed;
 	}
+
+	svg {
+		@apply size-4 text-muted-foreground;
+	}
 }
 
 .link--underline {

package/src/components/menu.css

@@ -0,0 +1,48 @@
+.menu__positioner {
+	@apply outline-0;
+}
+
+.menu__popup {
+	@apply 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;
+	}
+}
+
+.menu__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;
+	}
+}
+
+.menu__item {
+	@apply select-none relative flex items-center px-3 py-2 rounded text-sm leading-none cursor-pointer;
+
+	&:focus {
+		@apply outline-none bg-secondary text-secondary-foreground;
+	}
+}
+
+.menu__separator {
+	@apply my-2 h-px bg-border;
+}

package/src/components/navbar.css

@@ -1,6 +1,6 @@
 /** Base Styling */
 .navbar {
-	@apply bg-secondary/50 border-border relative z-50 flex h-(--navbar-height) w-full items-center justify-between border-b px-4 py-2;
+	@apply bg-surface/50 border-border relative z-50 flex h-(--navbar-height) w-full items-center justify-between border-b px-4 py-2;
 }
 
 .navbar__container {
@@ -15,12 +15,12 @@
 	@apply md:hidden;
 
 	svg {
-		@apply size-4;
+		@apply size-5 me-2;
 	}
 }
 
 .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

@@ -1,54 +1,11 @@
-.popover__trigger {
-	@apply transition-[scale] motion-reduce:transition-none;
+.popover {
+	@apply bg-overlay text-overlay-foreground rounded shadow;
+	@apply px-3 py-2;
 
-	&[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-[opacity,scale] motion-reduce:transition-none;
 
-	@apply transition-[transform,scale] motion-reduce:transition-none;
-
-	&[data-starting-style],
-	&[data-ending-style] {
+	&[data-entering],
+	&[data-exiting] {
 		@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 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/slider.css

@@ -0,0 +1,25 @@
+.slider__control {
+	@apply flex w-full touch-none select-none items-center py-3;
+}
+
+.slider__track {
+	@apply relative h-1 w-full rounded bg-secondary shadow-inner shadow-secondary select-none;
+}
+
+.slider__indicator {
+	@apply absolute rounded bg-primary select-none;
+}
+
+.slider__thumb {
+	@apply size-4 rounded-full bg-primary outline outline-border select-none;
+
+	@apply transition-[box-shadow,transform,outline] motion-reduce:transition-none;
+
+	&:focus-visible {
+		@apply status-focused;
+	}
+
+	&:active {
+		@apply scale-90;
+	}
+}

package/src/components/table.css

@@ -1 +1,32 @@
 /** Base Styling */
+.table {
+	@apply w-full border-collapse bg-surface text-surface-foreground;
+}
+
+.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;
+}

package/src/components/tabs.css

@@ -1,10 +1,10 @@
 /** Base Styling */
 .tabs {
-	@apply bg-card/50 text-secondary-foreground rounded border;
+	@apply bg-surface/50 text-secondary-foreground rounded border;
 }
 
 .tabs__list {
-	@apply bg-card relative z-0 flex gap-1 rounded-t border-b px-1;
+	@apply bg-surface relative z-0 flex gap-1 rounded-t border-b px-1;
 }
 
 .tabs__tab {

package/src/components/text-field.css

@@ -0,0 +1,4 @@
+/** Base Styling */
+.text-field {
+	@apply flex flex-col gap-1;
+}

package/src/styles.css

@@ -5,11 +5,11 @@
 	--navbar-height: 4rem;
 	--radius: 0.625rem;
 
-	--background: oklch(1 0 0);
+	--background: oklch(0.9702 0 0);
 	--foreground: oklch(0.145 0 0);
 
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
+	--surface: oklch(1 0 0);
+	--surface-foreground: oklch(0.145 0 0);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.145 0 0);
 	--input: oklch(0.922 0 0);
@@ -19,7 +19,7 @@
 
 	--primary: oklch(0.205 0 0);
 	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
+	--secondary: oklch(0.91 0.0013 286.37);
 	--secondary-foreground: oklch(0.205 0 0);
 	--muted: oklch(0.97 0 0);
 	--muted-foreground: oklch(0.556 0 0);
@@ -39,8 +39,10 @@
 	--background: oklch(0.145 0 0);
 	--foreground: oklch(0.985 0 0);
 
-	--card: oklch(0.205 0 0);
-	--card-foreground: oklch(0.985 0 0);
+	--surface: oklch(0.205 0 0);
+	--surface-foreground: oklch(0.985 0 0);
+	--overlay: oklch(0.205 0 0);
+	--overlay-foreground: oklch(0.985 0 0);
 	--popover: oklch(0.205 0 0);
 	--popover-foreground: oklch(0.985 0 0);
 	--input: oklch(1 0 0 / 15%);
@@ -70,8 +72,10 @@
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
 
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
+	--color-surface: var(--surface);
+	--color-surface-foreground: var(--surface-foreground);
+	--color-overlay: var(--overlay);
+	--color-overlay-foreground: var(--overlay-foreground);
 	--color-popover: var(--popover);
 	--color-popover-foreground: var(--popover-foreground);
 	--color-input: var(--input);
@@ -107,14 +111,6 @@
 	@apply cursor-wait opacity-75;
 }
 
-@utility status-valid {
-	@apply border-success;
-}
-
-@utility status-invalid {
-	@apply border-danger;
-}
-
 @layer base {
 	* {
 		@apply border-border outline-ring/50;

package/src/components/field.css

@@ -1,12 +0,0 @@
-/** Base Styling */
-.field {
-	@apply flex flex-col gap-1;
-}
-
-.field__description {
-	@apply text-muted-foreground text-sm;
-}
-
-.field__error {
-	@apply text-danger text-sm;
-}

package/src/components/textarea.css

@@ -1 +0,0 @@
-/** Base Styling */