@fea-ui/styles 0.0.3 → 0.0.4

package/package.json

@@ -1,52 +1,54 @@
 {
   "name": "@fea-ui/styles",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
   "keywords": [
-    "fea-ui",
-    "ui",
-    "design-system",
-    "tailwind",
     "components",
+    "design-system",
+    "fea-ui",
+    "react",
     "styles",
-    "react"
+    "tailwind",
+    "ui"
   ],
   "homepage": "https://ui.aydinthefirst.com",
   "bugs": {
     "url": "https://github.com/aydinthefirst/fea-ui/issues"
   },
+  "license": "MIT",
+  "author": "Halil Aydın <aydinhalil980@gmail.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/aydinthefirst/fea-ui.git",
     "directory": "packages/styles"
   },
-  "license": "MIT",
-  "author": "Halil Aydın <aydinhalil980@gmail.com>",
-  "sideEffects": false,
+  "files": [
+    "src"
+  ],
   "type": "module",
+  "sideEffects": false,
   "exports": {
     ".": {
       "style": "./src/styles.css",
       "default": "./src/styles.css"
     }
   },
-  "files": [
-    "src"
-  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build:css": "bunx @tailwindcss/cli -i src/styles.css -o dist/index.css --minify",
-    "check": "biome check --write",
-    "gen:exports": "bun run scripts/gen-exports.mjs"
+    "format": "oxfmt",
+    "gen:exports": "bun run scripts/gen-exports.mjs",
+    "lint": "oxlint"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.10",
-    "tailwindcss": "^4.1.18",
-    "@types/bun": "^1.3.5"
+    "@types/bun": "^1.3.5",
+    "oxfmt": "^0.24.0",
+    "oxlint": "^1.39.0",
+    "tailwindcss": "^4.1.18"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

package/src/components/accordion.css

@@ -1,49 +1,49 @@
 .accordion {
-	@apply flex w-full max-w-md flex-col justify-center;
-	@apply shadow bg-surface/10;
+  @apply flex w-full max-w-md flex-col justify-center;
+  @apply bg-surface/10 shadow;
 }
 
 .accordion__trigger {
-	@apply cursor-pointer;
+  @apply cursor-pointer;
 
-	@apply bg-surface border-b px-3 py-2 text-left font-medium;
+  @apply bg-surface border-b px-3 py-2 text-left font-medium;
 
-	@apply flex w-full items-center justify-between;
+  @apply flex w-full items-center justify-between;
 
-	@apply transition-colors motion-reduce:transition-none;
+  @apply transition-colors motion-reduce:transition-none;
 
-	&:hover {
-		@apply bg-primary/10;
-	}
+  &:hover {
+    @apply bg-primary/10;
+  }
 
-	&:focus {
-		@apply outline-none;
-	}
+  &:focus {
+    @apply outline-none;
+  }
 }
 
 .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-surface rounded border p-6 shadow text-surface-foreground;
+  @apply bg-surface text-surface-foreground rounded border p-6 shadow;
 
-	@apply w-96 max-w-[calc(100vw-1rem)];
+  @apply w-96 max-w-[calc(100vw-1rem)];
 
-	@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-[scale,opacity] 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/alert.css

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

package/src/components/autocomplete.css

@@ -1,52 +1,52 @@
 .autocomplete__input {
-	@apply bg-input text-input-foreground hover-safe:bg-input/80 rounded border shadow;
-	@apply px-3 py-2 w-fit h-10;
+  @apply bg-input text-input-foreground hover-safe:bg-input/80 rounded border shadow;
+  @apply h-10 w-fit px-3 py-2;
 
-	&::placeholder {
-		@apply text-muted-foreground;
-	}
+  &::placeholder {
+    @apply text-muted-foreground;
+  }
 
-	&:focus-visible {
-		@apply status-focused;
-	}
+  &:focus-visible {
+    @apply status-focused;
+  }
 }
 
 .autocomplete__positioner {
-	@apply outline-0;
+  @apply outline-0;
 }
 
 .autocomplete__popup {
-	width: var(--anchor-width);
-	max-width: var(--available-width);
+  width: var(--anchor-width);
+  max-width: var(--available-width);
 
-	@apply bg-surface text-surface-foreground rounded border shadow;
+  @apply bg-surface text-surface-foreground rounded border shadow;
 
-	@apply px-3 py-2;
+  @apply px-3 py-2;
 
-	@apply transition-[scale,opacity] 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;
+  }
 }
 
 .autocomplete__list {
-	@apply max-h-56 overflow-y-auto overscroll-contain scroll-p-2;
+  @apply max-h-56 scroll-p-2 overflow-y-auto overscroll-contain;
 }
 
 .autocomplete__item {
-	@apply cursor-pointer;
+  @apply cursor-pointer;
 
-	@apply hover-safe:bg-primary hover-safe:text-primary-foreground;
+  @apply hover-safe:bg-primary hover-safe:text-primary-foreground;
 
-	@apply px-2 py-1 rounded;
+  @apply rounded px-2 py-1;
 }
 
 .autocomplete__separator {
-	@apply h-px bg-border my-2;
+  @apply bg-border my-2 h-px;
 }
 
 .autocomplete__empty {
-	@apply px-2 py-1 text-sm text-muted-foreground;
+  @apply text-muted-foreground px-2 py-1 text-sm;
 }

package/src/components/avatar.css

@@ -1,24 +1,24 @@
 /** Base Styling */
 .avatar {
-	@apply bg-secondary text-secondary-foreground inline-flex items-center justify-center overflow-hidden rounded-full align-middle select-none;
+  @apply bg-secondary text-secondary-foreground inline-flex items-center justify-center overflow-hidden rounded-full align-middle select-none;
 }
 
 .avatar--sm {
-	@apply size-10;
+  @apply size-10;
 }
 
 .avatar--md {
-	@apply size-12;
+  @apply size-12;
 }
 
 .avatar--lg {
-	@apply size-14;
+  @apply size-14;
 }
 
 .avatar__image {
-	@apply h-full w-full object-cover;
+  @apply h-full w-full object-cover;
 }
 
 .avatar__fallback {
-	@apply flex h-full w-full items-center justify-center;
+  @apply flex h-full w-full items-center justify-center;
 }

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;
 
-	&:first-child {
-		@apply rounded-l;
-	}
+  &:first-child {
+    @apply rounded-l;
+  }
 
-	&:last-child {
-		@apply rounded-r;
-	}
+  &:last-child {
+    @apply rounded-r;
+  }
 }

package/src/components/button.css

@@ -1,78 +1,78 @@
 /** 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-3 py-2;
+  @apply w-fit px-3 py-2;
 
-	@apply transition-[scale,background-color] motion-reduce:transition-none;
+  @apply transition-[scale,background-color] motion-reduce:transition-none;
 
-	&[data-focused] {
-		@apply status-focused;
-	}
+  &[data-focused] {
+    @apply status-focused;
+  }
 
-	&:active {
-		@apply scale-95;
-	}
+  &:active {
+    @apply scale-95;
+  }
 
-	&[data-disabled] {
-		@apply status-disabled;
-	}
+  &[data-disabled] {
+    @apply status-disabled;
+  }
 
-	&[data-pending] {
-		@apply status-pending;
-	}
+  &[data-pending] {
+    @apply status-pending;
+  }
 
-	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;
-	}
+  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 hover-safe:bg-primary/90;
+  @apply bg-primary text-primary-foreground hover-safe:bg-primary/90;
 }
 
 .button--secondary {
-	@apply bg-secondary text-secondary-foreground hover-safe:bg-secondary/90;
+  @apply bg-secondary text-secondary-foreground hover-safe:bg-secondary/90;
 }
 
 .button--outline {
-	@apply bg-background text-foreground hover-safe:bg-secondary;
+  @apply bg-background text-foreground hover-safe:bg-secondary;
 }
 
 .button--danger {
-	@apply bg-danger text-danger-foreground hover-safe:bg-danger/90;
+  @apply bg-danger text-danger-foreground hover-safe:bg-danger/90;
 }
 
 .button--ghost {
-	@apply border-0 bg-transparent text-foreground hover-safe:bg-secondary;
+  @apply text-foreground hover-safe:bg-secondary border-0 bg-transparent;
 }
 
 .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/card.css

@@ -1,31 +1,31 @@
 /** Base Styling */
 .card {
-	@apply w-full max-w-md rounded shadow;
-	@apply flex flex-col p-5 gap-4;
+  @apply w-full max-w-md rounded shadow;
+  @apply flex flex-col gap-4 p-5;
 }
 
 /** Variants */
 .card--default {
-	@apply bg-surface text-surface-foreground;
+  @apply bg-surface text-surface-foreground;
 }
 
 .card--transparent {
-	@apply bg-transparent;
+  @apply bg-transparent;
 }
 
 /** Slots */
 .card__header {
-	@apply flex flex-col gap-1;
+  @apply flex flex-col gap-1;
 }
 
 .card__title {
-	@apply text-2xl font-bold;
+  @apply text-2xl font-bold;
 }
 
 .card__description {
-	@apply text-muted-foreground text-base;
+  @apply text-muted-foreground text-base;
 }
 
 .card__content {
-	@apply flex-1 flex flex-col gap-3;
+  @apply flex flex-1 flex-col gap-3;
 }

package/src/components/checkbox-group.css

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

package/src/components/checkbox.css

@@ -1,32 +1,32 @@
 /** Base Styling */
 .checkbox {
-	@apply flex items-center justify-center rounded border;
+  @apply flex items-center justify-center rounded border;
 
-	@apply size-6 outline-none;
+  @apply size-6 outline-none;
 
-	@apply transition-[visibility] motion-reduce:transition-none;
+  @apply transition-[visibility] motion-reduce:transition-none;
 
-	&[data-unchecked] {
-		@apply bg-input/50;
-	}
+  &[data-unchecked] {
+    @apply bg-input/50;
+  }
 
-	&[data-checked] {
-		@apply bg-input;
-	}
+  &[data-checked] {
+    @apply bg-input;
+  }
 
-	&:focus-visible {
-		@apply status-focused;
-	}
+  &:focus-visible {
+    @apply status-focused;
+  }
 }
 
 .checkbox__indicator {
-	@apply text-input-foreground flex;
+  @apply text-input-foreground flex;
 
-	&[data-unchecked] {
-		@apply hidden;
-	}
+  &[data-unchecked] {
+    @apply hidden;
+  }
 
-	& svg {
-		@apply size-4;
-	}
+  & svg {
+    @apply size-4;
+  }
 }