@fea-ui/styles 0.0.0-canary.2

package/README.md

@@ -0,0 +1,3 @@
+# FeaUI Styles
+
+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

@@ -0,0 +1,54 @@
+{
+  "name": "@fea-ui/styles",
+  "version": "0.0.0-canary.2",
+  "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
+  "keywords": [
+    "fea-ui",
+    "ui",
+    "design-system",
+    "tailwind",
+    "components",
+    "styles",
+    "react"
+  ],
+  "homepage": "https://ui.aydinthefirst.com",
+  "bugs": {
+    "url": "https://github.com/aydinthefirst/fea-ui/issues"
+  },
+  "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,
+  "type": "module",
+  "exports": {
+    ".": {
+      "style": "./src/styles.css",
+      "default": "./src/styles.css"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "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"
+  },
+  "dependencies": {
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.10",
+    "@types/bun": "^1.3.5"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/accordion.css

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

@@ -0,0 +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;
+}
+
+.avatar--sm {
+	@apply size-10;
+}
+
+.avatar--md {
+	@apply size-12;
+}
+
+.avatar--lg {
+	@apply size-14;
+}
+
+.avatar__image {
+	@apply h-full w-full object-cover;
+}
+
+.avatar__fallback {
+	@apply flex h-full w-full items-center justify-center;
+}

package/src/components/button-group.css

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

package/src/components/button.css

@@ -0,0 +1,78 @@
+/** Base Styling */
+.button {
+	@apply cursor-pointer;
+
+	@apply inline-flex items-center justify-center gap-2 rounded border font-medium text-nowrap;
+
+	@apply w-fit px-4 py-4;
+
+	@apply transition-[scale,background-color] motion-reduce:transition-none;
+
+	&[data-focused] {
+		@apply status-focused;
+	}
+
+	&:active {
+		@apply scale-95;
+	}
+
+	&[data-disabled] {
+		@apply status-disabled;
+	}
+
+	&[data-pending] {
+		@apply status-pending;
+	}
+
+	svg {
+		@apply size-5 shrink-0;
+	}
+}
+
+.button--sm {
+	@apply h-8 text-sm;
+
+	svg {
+		@apply size-4;
+	}
+}
+
+.button--md {
+	@apply h-10;
+}
+
+.button--lg {
+	@apply h-12;
+}
+
+.button--primary {
+	@apply bg-primary text-primary-foreground hover-safe:bg-primary/90;
+}
+
+.button--secondary {
+	@apply bg-secondary text-secondary-foreground hover-safe:bg-secondary/90;
+}
+
+.button--outline {
+	@apply bg-background text-foreground hover-safe:bg-secondary/10;
+}
+
+.button--danger {
+	@apply bg-danger text-danger-foreground hover-safe:bg-danger/90;
+}
+
+.button--ghost {
+	@apply border-0 bg-transparent text-foreground hover-safe:bg-secondary/10;
+}
+
+.button--icon-only {
+	@apply size-10;
+}
+
+.button--icon-only.button--sm {
+	@apply size-8;
+}
+
+.button--icon-only.button--lg {
+	@apply size-12;
+}

package/src/components/card.css

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

package/src/components/checkbox-group.css

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

package/src/components/checkbox.css

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

package/src/components/chip.css

@@ -0,0 +1,40 @@
+/** Base Styling */
+.chip {
+	@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;
+}
+
+.chip--md {
+	@apply h-6;
+}
+
+.chip--lg {
+	@apply h-8;
+}
+
+.chip--primary {
+	@apply bg-primary text-primary-foreground;
+}
+
+.chip--secondary {
+	@apply bg-secondary text-secondary-foreground;
+}
+
+.chip--outline {
+	@apply bg-transparent;
+}
+
+.chip--danger {
+	@apply bg-danger text-danger-foreground;
+}
+
+.chip--ghost {
+	@apply border-none bg-transparent;
+}
+
+.chip--success {
+	@apply bg-success text-success-foreground;
+}

package/src/components/container.css

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

package/src/components/dialog.css

@@ -0,0 +1,50 @@
+/** Base Styling */
+.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;
+	}
+}
+
+.dialog__popup {
+	@apply bg-overlay text-overlay-foreground 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;
+	}
+}
+
+.dialog__title {
+	@apply text-lg font-semibold;
+}
+
+.dialog__description {
+	@apply text-muted-foreground text-sm;
+}
+
+.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.css

@@ -0,0 +1,12 @@
+/** Base Styling */
+.field {
+	@apply flex flex-col gap-1;
+}
+
+.field__description {
+	@apply text-sm text-gray-500;
+}
+
+.field__error {
+	@apply text-sm text-red-600;
+}

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

@@ -0,0 +1,4 @@
+/** Base Styling */
+.form {
+	@apply flex w-full flex-col gap-4;
+}

package/src/components/index.css

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

package/src/components/input.css

@@ -0,0 +1,35 @@
+.input,
+.textarea {
+	@apply bg-input text-input-foreground rounded border;
+	@apply w-full px-3 py-2;
+
+	@apply transition-[brightness] motion-reduce:transition-none;
+
+	&::placeholder {
+		@apply text-muted-foreground;
+	}
+
+	&[data-focused] {
+		@apply status-focused;
+	}
+
+	&:disabled {
+		@apply status-disabled;
+	}
+
+	&[data-invalid] {
+		@apply border-danger;
+	}
+}
+
+.input--sm {
+	@apply h-8 text-sm;
+}
+
+.input--md {
+	@apply h-10;
+}
+
+.input--lg {
+	@apply h-12;
+}

package/src/components/label.css

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