@fea-ui/styles 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,15 @@
+# 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.

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@fea-ui/styles",
+  "version": "0.1.0-alpha.0",
+  "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
+  "keywords": [
+    "fea-ui",
+    "ui",
+    "design-system",
+    "tailwind",
+    "components",
+    "styles",
+    "react"
+  ],
+  "homepage": "https://orbis.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"
+  },
+  "dependencies": {
+    "tailwindcss": "^4.0.0"
+  },
+  "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"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/accordion.css

@@ -0,0 +1,54 @@
+/** 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;
+}
+
+.accordion__trigger {
+	@apply cursor-pointer;
+
+	@apply relative flex w-full items-baseline justify-between gap-4;
+
+	@media (hover: hover) {
+		&:hover {
+			@apply bg-accordion/90;
+		}
+	}
+
+	&:focus-visible {
+		@apply status-focused;
+	}
+}
+
+.accordion__trigger-icon {
+	@apply size-4;
+
+	@apply transition-transform motion-reduce:transform-none;
+
+	[data-panel-open] & {
+		@apply rotate-45;
+	}
+}
+
+.accordion__panel {
+	@apply overflow-hidden;
+
+	@apply transition-[height] motion-reduce:transition-none;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		height: 0;
+	}
+}
+
+.accordion__content {
+	@apply p-2;
+}

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,76 @@
+/** 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-all motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      @apply brightness-90;
+    }
+  }
+
+  &:active {
+    @apply scale-95;
+  }
+
+  &:focus-visible {
+    @apply status-focused;
+  }
+
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+
+  svg {
+    @apply size-5 shrink-0;
+  }
+}
+
+.button--sm {
+  @apply h-8 text-sm;
+}
+
+.button--md {
+  @apply h-10;
+}
+
+.button--lg {
+  @apply h-12;
+}
+
+.button--primary {
+  @apply bg-primary text-primary-foreground;
+}
+
+.button--secondary {
+  @apply bg-secondary text-secondary-foreground;
+}
+
+.button--outline {
+  @apply bg-background text-foreground;
+}
+
+.button--danger {
+  @apply bg-danger text-danger-foreground;
+}
+
+.button--ghost {
+  @apply hover:bg-primary/10 border-0 bg-transparent;
+}
+
+.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-card text-card-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 items-start gap-4;
+}

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-all 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,38 @@
+/** 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-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-all 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 absolute top-0 right-0 m-2;
+}

package/src/components/field.css

@@ -0,0 +1,12 @@
+/** 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/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,26 @@
+@import "./input.css";
+@import "./textarea.css";
+@import "./meter.css";
+@import "./list.css";
+@import "./navbar.css";
+@import "./checkbox-group.css";
+@import "./card.css";
+@import "./avatar.css";
+@import "./button-group.css";
+@import "./accordion.css";
+@import "./label.css";
+@import "./menu.css";
+@import "./chip.css";
+@import "./link.css";
+@import "./container.css";
+@import "./tabs.css";
+@import "./button.css";
+@import "./text.css";
+@import "./form.css";
+@import "./separator.css";
+@import "./switch.css";
+@import "./checkbox.css";
+@import "./field.css";
+@import "./toggle-button.css";
+@import "./table.css";
+@import "./dialog.css";

package/src/components/input.css

@@ -0,0 +1,37 @@
+/** Base Styling */
+.input {
+  @apply bg-input text-input-foreground rounded border;
+  @apply w-full px-3 py-2;
+
+  @apply transition-all motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      @apply brightness-90;
+    }
+  }
+
+  &:disabled {
+    @apply status-disabled;
+  }
+
+  &:valid {
+    @apply status-valid;
+  }
+
+  &:invalid:not(:placeholder-shown) {
+    @apply status-invalid;
+  }
+}
+
+.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,4 @@
+/** Base Styling */
+.label {
+	@apply flex items-center gap-2 select-none;
+}

package/src/components/link.css

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

package/src/components/list.css

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

package/src/components/meter.css

@@ -0,0 +1,72 @@
+/** Base Styling */
+.meter {
+	@apply grid grid-cols-2 items-center gap-1;
+}
+
+.meter__label {
+	@apply font-medium;
+}
+
+.meter__value {
+	@apply col-start-2 m-0 text-right text-sm leading-5;
+}
+
+.meter__track {
+	@apply col-span-2 block w-48 overflow-hidden rounded shadow-inner;
+}
+
+.meter__indicator {
+	@apply block rounded;
+
+	@apply transition-all motion-reduce:transition-none;
+}
+
+/** Variants */
+.meter--primary .meter__track {
+	@apply bg-primary/10;
+}
+
+.meter--primary .meter__indicator {
+	@apply bg-primary;
+}
+
+.meter--secondary .meter__track {
+	@apply bg-secondary/10;
+}
+
+.meter--secondary .meter__indicator {
+	@apply bg-secondary;
+}
+
+.meter--success .meter__track {
+	@apply bg-success/10;
+}
+
+.meter--success .meter__indicator {
+	@apply bg-success;
+}
+
+.meter--danger .meter__track {
+	@apply bg-danger/10;
+}
+
+.meter--danger .meter__indicator {
+	@apply bg-danger;
+}
+
+/** Sizes */
+.meter--sm .meter__track {
+	@apply h-2;
+}
+
+.meter--sm .meter__label {
+	@apply text-sm;
+}
+
+.meter--md .meter__track {
+	@apply h-3;
+}
+
+.meter--lg .meter__track {
+	@apply h-4;
+}

package/src/components/navbar.css

@@ -0,0 +1,38 @@
+/** 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;
+}
+
+.navbar__container {
+  @apply mx-auto flex w-full max-w-7xl items-center justify-between;
+}
+
+.navbar__content {
+  @apply flex items-center gap-2;
+}
+
+.navbar__toggle {
+  @apply md:hidden;
+}
+
+.navbar__list {
+  @apply hidden md:flex md:items-center md:gap-6;
+}
+
+.navbar__list-item {
+  @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;
+  }
+}
+
+.navbar__menu-item {
+  @apply w-full list-none px-4 py-2;
+}

package/src/components/separator.css

@@ -0,0 +1,12 @@
+/** Base Styling */
+.separator {
+	@apply border;
+}
+
+.separator--horizontal {
+	@apply my-2 h-px w-full;
+}
+
+.separator--vertical {
+	@apply mx-2 h-full w-px;
+}

package/src/components/switch.css

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

package/src/components/table.css

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

package/src/components/tabs.css

@@ -0,0 +1,49 @@
+/** Base Styling */
+.tabs {
+  @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;
+}
+
+.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;
+    }
+  }
+}
+
+.tabs__indicator {
+  @apply bg-primary absolute bottom-0 left-0 -z-10 h-px;
+  @apply transition-[translate,width] motion-reduce:transition-none;
+
+  translate: var(--active-tab-left) -50%;
+  width: var(--active-tab-width);
+}
+
+.tabs__panel {
+  @apply relative flex h-32 items-center justify-center outline-none;
+
+  &:focus-visible {
+    @apply status-focused;
+  }
+}

package/src/components/text.css

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

package/src/components/textarea.css

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

package/src/components/toggle-button.css

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

package/src/styles.css

@@ -0,0 +1,127 @@
+@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);
+}
+
+.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);
+}
+
+@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;
+  }
+}
+
+@utility status-focused {
+  @apply ring-offset-background ring-2 ring-offset-2 outline-none;
+}
+
+@utility status-disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+@utility status-pending {
+  @apply cursor-wait opacity-75;
+}
+
+@utility status-valid {
+  @apply border-success;
+}
+
+@utility status-invalid {
+  @apply border-danger;
+}