@adn-ui/styles 0.0.0-canary-20260117164310

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

package/src/components/accordion.css

@@ -0,0 +1,49 @@
+.accordion {
+  @apply flex w-full max-w-md flex-col justify-center;
+  @apply bg-surface/10 shadow;
+}
+
+.accordion__trigger {
+  @apply cursor-pointer;
+
+  @apply bg-surface border-b px-3 py-2 text-left font-medium;
+
+  @apply flex w-full items-center justify-between;
+
+  @apply transition-colors motion-reduce:transition-none;
+
+  &:hover {
+    @apply bg-primary/10;
+  }
+
+  &:focus {
+    @apply outline-none;
+  }
+}
+
+.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,52 @@
+/** 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 w-full max-w-lg px-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;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply scale-95 opacity-0;
+  }
+}
+
+.alert-dialog__content {
+  @apply bg-surface text-surface-foreground rounded border p-4 shadow;
+}
+
+.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-3 right-5;
+
+  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 bg-surface/10 flex items-start justify-between rounded border p-5 shadow;
+
+  @apply w-full;
+}
+
+.alert__indicator {
+  @apply mt-1 mr-4 shrink-0;
+
+  svg {
+    @apply size-5;
+  }
+}
+
+.alert__content {
+  @apply flex flex-1 flex-col gap-1;
+}
+
+.alert__title {
+  @apply font-medium;
+}
+
+.alert__description {
+  @apply text-muted-foreground text-sm;
+}
+
+/* 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/autocomplete.css

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

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

package/src/components/button.css

@@ -0,0 +1,78 @@
+/** Base Styling */
+.button {
+  @apply cursor-pointer;
+
+  @apply border-border inline-flex items-center justify-center gap-2 rounded font-medium text-nowrap;
+
+  @apply w-fit px-3 py-2;
+
+  @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/80;
+}
+
+.button--outline {
+  @apply bg-background text-foreground hover-safe:bg-secondary;
+}
+
+.button--danger {
+  @apply bg-danger text-danger-foreground hover-safe:bg-danger/90;
+}
+
+.button--ghost {
+  @apply text-foreground hover-safe:bg-secondary 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,31 @@
+/** Base Styling */
+.card {
+  @apply w-full max-w-md rounded shadow;
+  @apply flex flex-col gap-4 p-5;
+}
+
+/** Slots */
+.card__header {
+  @apply flex flex-col gap-1;
+}
+
+.card__title {
+  @apply text-xl font-bold;
+}
+
+.card__description {
+  @apply text-muted-foreground text-base;
+}
+
+.card__content {
+  @apply flex flex-1 flex-col gap-3;
+}
+
+/** Variants */
+.card--default {
+  @apply bg-surface text-surface-foreground;
+}
+
+.card--transparent {
+  @apply bg-transparent;
+}

package/src/components/checkbox-group.css

@@ -0,0 +1,4 @@
+/** Base Styling */
+.checkbox-group {
+  @apply flex flex-col 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-[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;
+  }
+
+  & svg {
+    @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/collapsible.css

@@ -0,0 +1,36 @@
+.collapsible {
+  @apply w-full max-w-md;
+}
+
+.collapsible__trigger {
+  @apply cursor-pointer;
+
+  @apply flex items-center gap-1;
+}
+
+.collapsible__trigger-icon {
+  @apply text-muted-foreground size-5;
+
+  @apply transition-transform motion-reduce:transition-none;
+
+  .collapsible__trigger[data-panel-open] & {
+    @apply rotate-90;
+  }
+}
+
+.collapsible__panel {
+  height: var(--collapsible-panel-height);
+
+  @apply overflow-hidden;
+
+  @apply transition-[height] motion-reduce:transition-none;
+
+  &[hidden]:not([hidden="until-found"]) {
+    @apply hidden;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    height: 0;
+  }
+}

package/src/components/combobox.css

@@ -0,0 +1,54 @@
+.combobox__input {
+  @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;
+  }
+
+  &:focus-visible {
+    @apply status-focused;
+  }
+}
+
+.combobox__positioner {
+  @apply outline-0;
+}
+
+.combobox__popup {
+  width: var(--anchor-width);
+  max-width: var(--available-width);
+
+  @apply bg-surface text-surface-foreground rounded border shadow;
+
+  @apply px-3 py-2;
+
+  @apply transition-[scale,opacity] motion-reduce:transition-none;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply scale-95 opacity-0;
+  }
+}
+
+.combobox__list {
+  @apply max-h-56 scroll-p-2 overflow-y-auto overscroll-contain;
+}
+
+.combobox__item {
+  @apply cursor-pointer;
+
+  @apply flex items-center gap-2;
+
+  @apply hover-safe:bg-primary hover-safe:text-primary-foreground;
+
+  @apply rounded px-2 py-1;
+}
+
+.combobox__separator {
+  @apply bg-border my-2 h-px;
+}
+
+.autocomplete__empty {
+  @apply text-muted-foreground px-2 py-1 text-sm;
+}

package/src/components/context-menu.css

@@ -0,0 +1,34 @@
+.context-menu__trigger {
+  @apply select-none;
+}
+
+.context-menu__positioner {
+  @apply outline-0;
+}
+
+.context-menu__popup {
+  transform-origin: var(--transform-origin);
+
+  @apply bg-surface text-surface-foreground rounded border p-3 shadow;
+
+  @apply transition-[transform,scale,opacity] motion-reduce:transition-none;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply scale-90 opacity-0;
+  }
+}
+
+.context-menu__item {
+  @apply cursor-pointer;
+
+  @apply flex items-center gap-2;
+
+  @apply hover-safe:bg-primary hover-safe:text-primary-foreground;
+
+  @apply rounded px-2 py-1;
+}
+
+.context-menu__separator {
+  @apply bg-border my-2 h-px;
+}

package/src/components/dialog.css

@@ -0,0 +1,53 @@
+/** 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 w-full max-w-lg px-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;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply scale-95 opacity-0;
+  }
+}
+
+.dialog__content {
+  @apply bg-surface text-surface-foreground rounded border p-4 shadow;
+}
+
+.dialog__title {
+  @apply text-lg font-semibold;
+}
+
+.dialog__description {
+  @apply text-muted-foreground text-sm;
+}
+
+.dialog__close {
+  @apply cursor-pointer;
+
+  @apply absolute top-3 right-5;
+
+  svg {
+    @apply text-muted-foreground size-5;
+
+    @apply transition-colors motion-reduce:transition-none;
+
+    &:hover {
+      @apply text-foreground;
+    }
+  }
+}