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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fea-ui/styles",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.7",
   "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
   "keywords": [
     "fea-ui",
@@ -34,17 +34,15 @@
     "src"
   ],
   "scripts": {
-    "build:css": "bunx @tailwindcss/cli -i src/styles.css -o dist/index.css --minify"
+    "build:css": "bunx @tailwindcss/cli -i src/styles.css -o dist/index.css --minify",
+    "check": "biome check --write"
   },
   "dependencies": {
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.10",
-    "@types/bun": "latest",
-    "prettier": "^3.7.4",
-    "prettier-plugin-packagejson": "^2.5.20",
-    "prettier-plugin-tailwindcss": "^0.7.2"
+    "@types/bun": "^1.3.5"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"

package/src/components/accordion.css

@@ -1,48 +1,50 @@
 .accordion {
-  @apply bg-card text-card-foreground flex w-full max-w-md flex-col justify-center;
+	@apply bg-card text-card-foreground flex w-full max-w-md flex-col justify-center;
 }
 
 .accordion__trigger {
-  @apply flex w-full items-center justify-between border-b p-3;
+	@apply cursor-pointer;
 
-  @apply transition-colors motion-reduce:transition-none;
+	@apply flex w-full items-center justify-between border-b p-3;
 
-  &:hover {
-    @apply bg-primary/10;
-  }
+	@apply transition-colors motion-reduce:transition-none;
 
-  &:focus {
-    @apply outline-none;
-  }
+	&:hover {
+		@apply bg-primary/10;
+	}
+
+	&:focus {
+		@apply outline-none;
+	}
 }
 
 .accordion__title {
-  @apply text-left font-medium;
+	@apply text-left font-medium;
 }
 
 .accordion__trigger-icon {
-  @apply text-muted-foreground size-5;
+	@apply text-muted-foreground size-5;
 
-  @apply transition-transform duration-300 motion-reduce:transition-none;
+	@apply transition-transform duration-300 motion-reduce:transition-none;
 
-  [data-panel-open] > & {
-    @apply rotate-180;
-  }
+	[data-panel-open] > & {
+		@apply rotate-180;
+	}
 }
 
 .accordion__panel {
-  height: var(--accordion-panel-height);
+	height: var(--accordion-panel-height);
 
-  @apply overflow-hidden;
+	@apply overflow-hidden;
 
-  @apply transition-[height] motion-reduce:transition-none;
+	@apply transition-[height] motion-reduce:transition-none;
 
-  &[data-ending-style],
-  &[data-starting-style] {
-    @apply h-0;
-  }
+	&[data-ending-style],
+	&[data-starting-style] {
+		@apply h-0;
+	}
 }
 
 .accordion__content {
-  @apply p-4;
+	@apply p-4;
 }

package/src/components/alert-dialog.css

@@ -1,50 +1,50 @@
 /** Base Styling */
 .alert-dialog__backdrop {
-  @apply fixed inset-0 bg-black/50 opacity-20 backdrop-blur-sm;
+	@apply fixed inset-0 bg-black/50 opacity-20 backdrop-blur-sm;
 
-  @apply transition-opacity motion-reduce:transition-none;
+	@apply transition-opacity motion-reduce:transition-none;
 
-  &[data-starting-style],
-  &[data-ending-style] {
-    @apply opacity-0;
-  }
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply opacity-0;
+	}
 }
 
 .alert-dialog__popup {
-  @apply bg-popover rounded border p-6 shadow;
+	@apply bg-popover rounded border p-6 shadow;
 
-  @apply w-full max-w-lg;
+	@apply w-full max-w-lg;
 
-  @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+	@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] {
-    @apply scale-95 opacity-0;
-  }
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply scale-95 opacity-0;
+	}
 }
 
 .alert-dialog__title {
-  @apply text-lg font-semibold;
+	@apply text-lg font-semibold;
 }
 
 .alert-dialog__description {
-  @apply text-muted-foreground text-sm;
+	@apply text-muted-foreground text-sm;
 }
 
 .alert-dialog__close {
-  @apply cursor-pointer;
+	@apply cursor-pointer;
 
-  @apply absolute top-0 right-0 m-2;
+	@apply absolute top-0 right-0 m-2;
 
-  svg {
-    @apply text-muted-foreground size-5;
+	svg {
+		@apply text-muted-foreground size-5;
 
-    @apply transition-colors motion-reduce:transition-none;
+		@apply transition-colors motion-reduce:transition-none;
 
-    &:hover {
-      @apply text-foreground;
-    }
-  }
+		&:hover {
+			@apply text-foreground;
+		}
+	}
 }

package/src/components/button-group.css

@@ -1,16 +1,16 @@
 /** Base Styling */
 .button-group {
-  @apply inline-flex items-center;
+	@apply inline-flex items-center;
 }
 
 .button-group .button {
-  @apply rounded-none;
+	@apply rounded-none;
 }
 
 .button-group .button:first-child {
-  @apply rounded-l;
+	@apply rounded-l;
 }
 
 .button-group .button:last-child {
-  @apply rounded-r;
+	@apply rounded-r;
 }

package/src/components/button.css

@@ -1,76 +1,82 @@
 /** Base Styling */
 .button {
-  @apply cursor-pointer;
+	@apply cursor-pointer;
 
-  @apply inline-flex items-center justify-center gap-2 rounded border font-medium text-nowrap;
+	@apply inline-flex items-center justify-center gap-2 rounded border font-medium text-nowrap;
 
-  @apply w-fit px-4 py-4;
+	@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 {
-    @apply scale-95;
-  }
+	&:active {
+		@apply scale-95;
+	}
 
-  &:focus-visible {
-    @apply status-focused;
-  }
+	&:focus-visible {
+		@apply status-focused;
+	}
 
-  &[data-disabled] {
-    @apply status-disabled;
-  }
+	&[data-disabled] {
+		@apply status-disabled;
+	}
 
-  svg {
-    @apply size-5 shrink-0;
-  }
+	svg {
+		@apply size-5 shrink-0;
+	}
 }
 
 .button--sm {
-  @apply h-8 text-sm;
+	@apply h-8 text-sm;
+
+	svg {
+		@apply size-4;
+	}
 }
 
 .button--md {
-  @apply h-10;
+	@apply h-10;
 }
 
 .button--lg {
-  @apply h-12;
+	@apply h-12;
 }
 
 .button--primary {
-  @apply bg-primary text-primary-foreground;
+	@apply bg-primary text-primary-foreground;
 }
 
 .button--secondary {
-  @apply bg-secondary text-secondary-foreground;
+	@apply bg-secondary text-secondary-foreground;
 }
 
 .button--outline {
-  @apply bg-background text-foreground;
+	@apply bg-background text-foreground;
 }
 
 .button--danger {
-  @apply bg-danger text-danger-foreground;
+	@apply bg-danger text-danger-foreground;
 }
 
 .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 {
-  @apply size-10;
+	@apply size-10;
 }
 
 .button--icon-only.button--sm {
-  @apply size-8;
+	@apply size-8;
 }
 
 .button--icon-only.button--lg {
-  @apply size-12;
+	@apply size-12;
 }

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/chip.css

@@ -1,40 +1,40 @@
 /** Base Styling */
 .chip {
-  @apply inline-flex items-center justify-center gap-2 rounded-full border px-2 font-medium text-nowrap;
+	@apply inline-flex items-center justify-center gap-2 rounded-full border px-2 font-medium text-nowrap;
 }
 
 .chip--sm {
-  @apply h-4 text-sm;
+	@apply h-4 text-sm;
 }
 
 .chip--md {
-  @apply h-6;
+	@apply h-6;
 }
 
 .chip--lg {
-  @apply h-8;
+	@apply h-8;
 }
 
 .chip--primary {
-  @apply bg-primary text-primary-foreground;
+	@apply bg-primary text-primary-foreground;
 }
 
 .chip--secondary {
-  @apply bg-secondary text-secondary-foreground;
+	@apply bg-secondary text-secondary-foreground;
 }
 
 .chip--outline {
-  @apply bg-transparent;
+	@apply bg-transparent;
 }
 
 .chip--danger {
-  @apply bg-danger text-danger-foreground;
+	@apply bg-danger text-danger-foreground;
 }
 
 .chip--ghost {
-  @apply border-none bg-transparent;
+	@apply border-none bg-transparent;
 }
 
 .chip--success {
-  @apply bg-success text-success-foreground;
+	@apply bg-success text-success-foreground;
 }

package/src/components/container.css

@@ -1,4 +1,4 @@
 /** Base Styling */
 .container {
-  @apply mx-auto px-4;
+	@apply mx-auto px-4;
 }

package/src/components/dialog.css

@@ -1,50 +1,50 @@
 /** Base Styling */
 .dialog__backdrop {
-  @apply fixed inset-0 bg-black/50 opacity-20 backdrop-blur-sm;
+	@apply fixed inset-0 bg-black/50 opacity-20 backdrop-blur-sm;
 
-  @apply transition-opacity motion-reduce:transition-none;
+	@apply transition-opacity motion-reduce:transition-none;
 
-  &[data-starting-style],
-  &[data-ending-style] {
-    @apply opacity-0;
-  }
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply opacity-0;
+	}
 }
 
 .dialog__popup {
-  @apply bg-popover rounded border p-6 shadow;
+	@apply bg-popover rounded border p-6 shadow;
 
-  @apply w-full max-w-lg;
+	@apply w-full max-w-lg;
 
-  @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+	@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] {
-    @apply scale-95 opacity-0;
-  }
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply scale-95 opacity-0;
+	}
 }
 
 .dialog__title {
-  @apply text-lg font-semibold;
+	@apply text-lg font-semibold;
 }
 
 .dialog__description {
-  @apply text-muted-foreground text-sm;
+	@apply text-muted-foreground text-sm;
 }
 
 .dialog__close {
-  @apply cursor-pointer;
+	@apply cursor-pointer;
 
-  @apply absolute top-0 right-0 m-2;
+	@apply absolute top-0 right-0 m-2;
 
-  svg {
-    @apply text-muted-foreground size-5;
+	svg {
+		@apply text-muted-foreground size-5;
 
-    @apply transition-colors motion-reduce:transition-none;
+		@apply transition-colors motion-reduce:transition-none;
 
-    &:hover {
-      @apply text-foreground;
-    }
-  }
+		&:hover {
+			@apply text-foreground;
+		}
+	}
 }

package/src/components/drawer.css

@@ -0,0 +1,84 @@
+.drawer__backdrop {
+	@apply fixed inset-0 bg-black/50 opacity-50;
+
+	@apply transition-opacity motion-reduce:transition-none;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply opacity-0;
+	}
+}
+
+.drawer__popup {
+	@apply box-border fixed p-3;
+
+	@apply bg-card text-card-foreground shadow;
+
+	@apply transition-[translate] motion-reduce:transition-none;
+}
+
+.drawer__title {
+	@apply text-lg font-medium;
+}
+
+.drawer__description {
+	@apply text-sm text-muted-foreground;
+}
+
+.drawer__close {
+	@apply cursor-pointer;
+
+	@apply absolute top-0 end-0 m-3 rounded-full;
+
+	@apply text-muted-foreground;
+
+	@apply transition-colors motion-reduce:transition-none;
+
+	&:hover {
+		@apply bg-secondary/10;
+	}
+
+	&:focus {
+		@apply outline-none;
+	}
+}
+
+/**
+ * Variants
+ */
+
+.drawer--right.drawer__popup {
+	@apply end-0 top-0 w-96 max-w-[calc(100vw-2rem)] h-full rounded-l;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply translate-x-full;
+	}
+}
+
+.drawer--left.drawer__popup {
+	@apply start-0 top-0 w-96 h-full rounded-r max-w-[calc(100vw-2rem)];
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply -translate-x-full;
+	}
+}
+
+.drawer--top.drawer__popup {
+	@apply top-0 start-0 w-full h-96 rounded-b;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply -translate-y-full;
+	}
+}
+
+.drawer--bottom.drawer__popup {
+	@apply bottom-0 start-0 w-full h-96 rounded-t;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply translate-y-full;
+	}
+}

package/src/components/fieldset.css

@@ -1,9 +1,9 @@
 .fieldset {
-  @apply flex w-full max-w-md flex-col gap-1;
+	@apply flex w-full max-w-md flex-col gap-1;
 }
 
 .fieldset__legend {
-  @apply border-b pb-4;
+	@apply border-b pb-4;
 
-  @apply text-lg font-semibold;
+	@apply text-lg font-semibold;
 }

package/src/components/index.css

@@ -26,3 +26,5 @@
 @import "./dialog.css";
 @import "./alert-dialog.css";
 @import "./fieldset.css";
+@import "./drawer.css";
+@import "./popover.css";

package/src/components/input.css

@@ -1,37 +1,33 @@
 /** Base Styling */
 .input {
-  @apply bg-input text-input-foreground rounded border;
-  @apply w-full px-3 py-2;
+	@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]) {
-      @apply brightness-90;
-    }
-  }
+	@media (hover: hover) {
+		&:hover:not([data-disabled]) {
+			@apply brightness-90;
+		}
+	}
 
-  &:disabled {
-    @apply status-disabled;
-  }
+	&:disabled {
+		@apply status-disabled;
+	}
 
-  &:valid {
-    @apply status-valid;
-  }
-
-  &:invalid:not(:placeholder-shown) {
-    @apply status-invalid;
-  }
+	&:invalid:not(:placeholder-shown) {
+		@apply status-invalid;
+	}
 }
 
 .input--sm {
-  @apply h-8 text-sm;
+	@apply h-8 text-sm;
 }
 
 .input--md {
-  @apply h-10;
+	@apply h-10;
 }
 
 .input--lg {
-  @apply h-12;
+	@apply h-12;
 }

package/src/components/link.css

@@ -1,29 +1,29 @@
 /** Base Styling */
 .link {
-  @apply text-link underline-offset-2 transition-colors;
+	@apply text-link underline-offset-2 transition-colors;
 
-  &:visited {
-    @apply text-link/70;
-  }
+	&:visited {
+		@apply text-link/70;
+	}
 
-  &:hover {
-    @apply text-link/80;
-  }
+	&:hover {
+		@apply text-link/80;
+	}
 
-  &[data-active] {
-    @apply font-semibold;
-  }
+	&[data-active] {
+		@apply font-semibold;
+	}
 
-  &:disabled,
-  [data-disabled] {
-    @apply text-muted cursor-not-allowed;
-  }
+	&:disabled,
+	[data-disabled] {
+		@apply text-muted cursor-not-allowed;
+	}
 }
 
 .link--underline {
-  @apply underline;
+	@apply underline;
 }
 
 .link--no-underline {
-  @apply no-underline;
+	@apply no-underline;
 }

package/src/components/list.css

@@ -1,8 +1,8 @@
 /** Base Styling */
 .list {
-  @apply flex flex-col gap-1;
+	@apply flex flex-col gap-1;
 }
 
 .list__item {
-  @apply cursor-pointer;
+	@apply cursor-pointer;
 }

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

@@ -1,38 +1,36 @@
 /** Base Styling */
 .navbar {
-  @apply bg-secondary/50 border-border relative z-50 flex h-[var(--navbar-height)] w-full items-center justify-between border-b px-4 py-2;
+	@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;
 }
 
 .navbar__container {
-  @apply mx-auto flex w-full max-w-7xl items-center justify-between;
+	@apply mx-auto flex w-full max-w-7xl items-center justify-between;
 }
 
 .navbar__content {
-  @apply flex items-center gap-2;
+	@apply flex items-center gap-2;
 }
 
 .navbar__toggle {
-  @apply md:hidden;
+	@apply md:hidden;
+
+	svg {
+		@apply size-4;
+	}
 }
 
 .navbar__list {
-  @apply hidden md:flex md:items-center md:gap-6;
+	@apply hidden md:flex md:items-center md:gap-6;
 }
 
 .navbar__list-item {
-  @apply list-none;
+	@apply list-none;
 }
 
 .navbar__menu {
-  @apply bg-secondary/50 absolute top-16 left-0 hidden w-full flex-col border border-b py-4 md:hidden;
-
-  @apply transition-[height] motion-reduce:transition-none;
-
-  &[data-expanded="true"] {
-    @apply flex;
-  }
+	@apply flex flex-col gap-1;
 }
 
 .navbar__menu-item {
-  @apply w-full list-none px-4 py-2;
+	@apply w-full list-none px-4 py-2;
 }

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/switch.css

@@ -1,40 +1,40 @@
 /** Base Styling */
 .switch {
-  @apply cursor-pointer;
+	@apply cursor-pointer;
 
-  @apply bg-secondary/50 relative flex cursor-pointer rounded-full border-2;
+	@apply bg-secondary/50 relative flex cursor-pointer rounded-full border-2;
 
-  &:active {
-    @apply bg-secondary;
-  }
+	&:active {
+		@apply bg-secondary;
+	}
 
-  &:focus-visible {
-    @apply status-focused;
-  }
+	&:focus-visible {
+		@apply status-focused;
+	}
 
-  &[data-disabled] {
-    @apply status-disabled;
-  }
+	&[data-disabled] {
+		@apply status-disabled;
+	}
 }
 
 .switch__thumb {
-  @apply bg-primary aspect-square h-full rounded-full shadow;
+	@apply bg-primary aspect-square h-full rounded-full shadow;
 
-  @apply transition-[translate] motion-reduce:transition-none;
+	@apply transition-[translate] motion-reduce:transition-none;
 
-  &[data-checked] {
-    @apply translate-x-full;
-  }
+	&[data-checked] {
+		@apply translate-x-full;
+	}
 }
 
 .switch--sm {
-  @apply h-4 w-7;
+	@apply h-4 w-7;
 }
 
 .switch--md {
-  @apply h-6 w-10;
+	@apply h-6 w-10;
 }
 
 .switch--lg {
-  @apply h-8 w-14;
+	@apply h-8 w-14;
 }

package/src/components/tabs.css

@@ -1,49 +1,49 @@
 /** Base Styling */
 .tabs {
-  @apply bg-card/50 text-secondary-foreground rounded border;
+	@apply bg-card/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-card relative z-0 flex gap-1 rounded-t border-b px-1;
 }
 
 .tabs__tab {
-  @apply m-0 flex appearance-none items-center justify-center border-0 bg-transparent outline-none;
-  @apply text-muted-foreground break-keep whitespace-nowrap select-none;
-  @apply h-8 px-2 py-0;
-
-  &[data-active] {
-    @apply text-foreground;
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      @apply text-foreground;
-    }
-  }
-
-  &:focus-visible {
-    @apply relative;
-
-    &::before {
-      content: "";
-      @apply outline-primary absolute inset-x-0 inset-y-1 rounded outline-2 -outline-offset-1;
-    }
-  }
+	@apply m-0 flex appearance-none items-center justify-center border-0 bg-transparent outline-none;
+	@apply text-muted-foreground break-keep whitespace-nowrap select-none;
+	@apply h-8 px-2 py-0;
+
+	&[data-active] {
+		@apply text-foreground;
+	}
+
+	@media (hover: hover) {
+		&:hover {
+			@apply text-foreground;
+		}
+	}
+
+	&:focus-visible {
+		@apply relative;
+
+		&::before {
+			content: "";
+			@apply outline-primary absolute inset-x-0 inset-y-1 rounded outline-2 -outline-offset-1;
+		}
+	}
 }
 
 .tabs__indicator {
-  @apply bg-primary absolute bottom-0 left-0 -z-10 h-px;
-  @apply transition-[translate,width] motion-reduce:transition-none;
+	width: var(--active-tab-width);
 
-  translate: var(--active-tab-left) -50%;
-  width: var(--active-tab-width);
+	translate: var(--active-tab-left) -50%;
+	@apply bg-primary absolute bottom-0 left-0 -z-10 h-px;
+	@apply transition-[translate,width] motion-reduce:transition-none;
 }
 
 .tabs__panel {
-  @apply relative flex h-32 items-center justify-center outline-none;
+	@apply relative flex h-32 items-center justify-center outline-none;
 
-  &:focus-visible {
-    @apply status-focused;
-  }
+	&:focus-visible {
+		@apply status-focused;
+	}
 }

package/src/components/text.css

@@ -1,4 +1,4 @@
 /** Base Styling */
 .text {
-  @apply text-danger;
+	@apply text-danger;
 }

package/src/components/toggle-button.css

@@ -1,8 +1,8 @@
 /** Base Styling */
 .toggle-button {
-  @apply brightness-50;
+	@apply brightness-50;
 
-  &[data-pressed] {
-    @apply brightness-100;
-  }
+	&[data-pressed] {
+		@apply brightness-100;
+	}
 }

package/src/styles.css

@@ -1,127 +1,126 @@
 @import "tailwindcss";
-
 @import "./components/index.css" layer(components);
 
 :root {
-  --navbar-height: 4rem;
-  --radius: 0.625rem;
-
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --input: oklch(0.922 0 0);
-  --input-foreground: oklch(0.205 0 0);
-  --accordion: oklch(1 0 0);
-  --accordion-foreground: oklch(0.145 0 0);
-
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --danger: oklch(0.577 0.245 27.325);
-  --danger-foreground: oklch(0.985 0 0);
-  --success: oklch(0.623 0.17 145);
-  --success-foreground: oklch(0.985 0 0);
-
-  --border: oklch(0.922 0 0);
-  --ring: oklch(62% 0.18 250);
-  --link: oklch(0.205 0 0);
+	--navbar-height: 4rem;
+	--radius: 0.625rem;
+
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--input: oklch(0.922 0 0);
+	--input-foreground: oklch(0.205 0 0);
+	--accordion: oklch(1 0 0);
+	--accordion-foreground: oklch(0.145 0 0);
+
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--danger: oklch(0.577 0.245 27.325);
+	--danger-foreground: oklch(0.985 0 0);
+	--success: oklch(0.623 0.17 145);
+	--success-foreground: oklch(0.985 0 0);
+
+	--border: oklch(0.922 0 0);
+	--ring: oklch(62% 0.18 250);
+	--link: oklch(0.205 0 0);
 }
 
 .dark {
-  --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);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --input: oklch(1 0 0 / 15%);
-  --input-foreground: oklch(0.985 0 0);
-  --accordion: oklch(0.205 0 0);
-  --accordion-foreground: oklch(0.985 0 0);
-
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --danger: oklch(0.704 0.191 22.216);
-  --danger-foreground: oklch(0.985 0 0);
-  --success: oklch(0.7017 0.3225 145);
-  --success-foreground: oklch(0.205 0 0);
-
-  --border: oklch(1 0 0 / 10%);
-  --ring: oklch(62% 0.18 250);
-  --link: oklch(0.922 0 0);
+	--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);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--input: oklch(1 0 0 / 15%);
+	--input-foreground: oklch(0.985 0 0);
+	--accordion: oklch(0.205 0 0);
+	--accordion-foreground: oklch(0.985 0 0);
+
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--danger: oklch(0.704 0.191 22.216);
+	--danger-foreground: oklch(0.985 0 0);
+	--success: oklch(0.7017 0.3225 145);
+	--success-foreground: oklch(0.205 0 0);
+
+	--border: oklch(1 0 0 / 10%);
+	--ring: oklch(62% 0.18 250);
+	--link: oklch(0.922 0 0);
 }
 
 @theme inline {
-  --radius: var(--radius);
-
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-input: var(--input);
-  --color-input-foreground: var(--input-foreground);
-  --color-accordion: var(--accordion);
-  --color-accordion-foreground: var(--accordion-foreground);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-danger: var(--danger);
-  --color-danger-foreground: var(--danger-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-
-  --color-border: var(--border);
-  --color-ring: var(--ring);
-  --color-link: var(--link);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
+	--radius: var(--radius);
+
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-input: var(--input);
+	--color-input-foreground: var(--input-foreground);
+	--color-accordion: var(--accordion);
+	--color-accordion-foreground: var(--accordion-foreground);
+
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-danger: var(--danger);
+	--color-danger-foreground: var(--danger-foreground);
+	--color-success: var(--success);
+	--color-success-foreground: var(--success-foreground);
+
+	--color-border: var(--border);
+	--color-ring: var(--ring);
+	--color-link: var(--link);
 }
 
 @utility status-focused {
-  @apply ring-offset-background ring-2 ring-offset-2 outline-none;
+	@apply ring-offset-background ring-2 ring-offset-2 outline-none;
 }
 
 @utility status-disabled {
-  @apply cursor-not-allowed opacity-50;
+	@apply cursor-not-allowed opacity-50;
 }
 
 @utility status-pending {
-  @apply cursor-wait opacity-75;
+	@apply cursor-wait opacity-75;
 }
 
 @utility status-valid {
-  @apply border-success;
+	@apply border-success;
 }
 
 @utility status-invalid {
-  @apply border-danger;
+	@apply border-danger;
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+
+	body {
+		@apply bg-background text-foreground;
+	}
 }