@fea-ui/styles 0.1.0-alpha.1 → 0.1.0-alpha.10

package/README.md

@@ -1,15 +1,3 @@
-# styles
+# FeaUI Styles
 
-To install dependencies:
-
-```bash
-bun install
-```
-
-To run:
-
-```bash
-bun run index.ts
-```
-
-This project was created using `bun init` in bun v1.3.4. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
+This package contains the core styles and design tokens for the FeaUI component library. It provides a consistent look and feel across all components and can be easily integrated into your projects.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fea-ui/styles",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.10",
   "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
   "keywords": [
     "fea-ui",
@@ -11,7 +11,7 @@
     "styles",
     "react"
   ],
-  "homepage": "https://feaui.aydinthefirst.com",
+  "homepage": "https://ui.aydinthefirst.com",
   "bugs": {
     "url": "https://github.com/aydinthefirst/fea-ui/issues"
   },
@@ -34,17 +34,16 @@
     "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",
+    "gen:exports": "bun run scripts/gen-exports.mjs"
   },
   "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,54 +1,50 @@
-/** Base Styling */
 .accordion {
-	@apply flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center gap-4;
-	@apply bg-accordion text-accordion-foreground;
-}
-
-.accordion__item {
-	@apply border-border border-b;
-}
-
-.accordion__header {
-	@apply m-0;
+	@apply bg-surface text-surface-foreground flex w-full max-w-md flex-col justify-center;
 }
 
 .accordion__trigger {
 	@apply cursor-pointer;
 
-	@apply relative flex w-full items-baseline justify-between gap-4;
+	@apply flex w-full items-center justify-between border-b p-3;
 
-	@media (hover: hover) {
-		&:hover {
-			@apply bg-accordion/90;
-		}
+	@apply transition-colors motion-reduce:transition-none;
+
+	&:hover {
+		@apply bg-primary/10;
 	}
 
-	&:focus-visible {
-		@apply status-focused;
+	&:focus {
+		@apply outline-none;
 	}
 }
 
+.accordion__title {
+	@apply text-left font-medium;
+}
+
 .accordion__trigger-icon {
-	@apply size-4;
+	@apply text-muted-foreground size-5;
 
-	@apply transition-transform motion-reduce:transform-none;
+	@apply transition-transform duration-300 motion-reduce:transition-none;
 
-	[data-panel-open] & {
-		@apply rotate-45;
+	[data-panel-open] > & {
+		@apply rotate-180;
 	}
 }
 
 .accordion__panel {
+	height: var(--accordion-panel-height);
+
 	@apply overflow-hidden;
 
 	@apply transition-[height] motion-reduce:transition-none;
 
-	&[data-starting-style],
-	&[data-ending-style] {
-		height: 0;
+	&[data-ending-style],
+	&[data-starting-style] {
+		@apply h-0;
 	}
 }
 
 .accordion__content {
-	@apply p-2;
+	@apply p-4;
 }

package/src/components/alert-dialog.css

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

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-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,86 @@
 /** 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;
-    }
-  }
+	&[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-disabled] {
+		@apply status-disabled;
+	}
 
-  svg {
-    @apply size-5 shrink-0;
-  }
+	&[data-pending] {
+		@apply status-pending;
+	}
+
+	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/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/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/description.css

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

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] {
@@ -34,5 +34,17 @@
 }
 
 .dialog__close {
+	@apply cursor-pointer;
+
 	@apply absolute top-0 right-0 m-2;
+
+	svg {
+		@apply text-muted-foreground size-5;
+
+		@apply transition-colors motion-reduce:transition-none;
+
+		&: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 fixed p-3 z-50;
+
+	@apply bg-surface text-surface-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/field-error.css

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

package/src/components/fieldset.css

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

package/src/components/index.css

@@ -1,26 +1,36 @@
-@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 "./alert-dialog.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";
+@import "./sidebar.css";