@fea-ui/styles 0.0.0 → 0.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fea-ui/styles",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
   "keywords": [
     "fea-ui",

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 px-3 py-2 w-fit h-10;
+
+	&::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 overflow-y-auto overscroll-contain scroll-p-2;
+}
+
+.autocomplete__item {
+	@apply cursor-pointer;
+
+	@apply hover-safe:bg-primary hover-safe:text-primary-foreground;
+
+	@apply px-2 py-1 rounded;
+}
+
+.autocomplete__separator {
+	@apply h-px bg-border my-2;
+}
+
+.autocomplete__empty {
+	@apply px-2 py-1 text-sm text-muted-foreground;
+}

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 px-3 py-2 w-fit h-10;
+
+	&::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 overflow-y-auto overscroll-contain scroll-p-2;
+}
+
+.combobox__item {
+	@apply cursor-pointer;
+
+	@apply flex items-center gap-2;
+
+	@apply hover-safe:bg-primary hover-safe:text-primary-foreground;
+
+	@apply px-2 py-1 rounded;
+}
+
+.combobox__separator {
+	@apply h-px bg-border my-2;
+}
+
+.autocomplete__empty {
+	@apply px-2 py-1 text-sm text-muted-foreground;
+}

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 opacity-0 scale-90;
+	}
+}
+
+.context-menu__item {
+	@apply cursor-pointer;
+
+	@apply flex items-center gap-2;
+
+	@apply hover-safe:bg-primary hover-safe:text-primary-foreground;
+
+	@apply px-2 py-1 rounded;
+}
+
+.context-menu__separator {
+	@apply h-px bg-border my-2;
+}

package/src/components/index.css

@@ -8,10 +8,13 @@
 @import "./accordion.css";
 @import "./link.css";
 @import "./checkbox.css";
+@import "./scroll-area.css";
+@import "./spinner.css";
 @import "./tabs.css";
 @import "./drawer.css";
 @import "./fieldset.css";
 @import "./sidebar.css";
+@import "./number-field.css";
 @import "./button-group.css";
 @import "./checkbox-group.css";
 @import "./chip.css";
@@ -19,21 +22,25 @@
 @import "./navbar.css";
 @import "./slider.css";
 @import "./avatar.css";
+@import "./select.css";
 @import "./text.css";
 @import "./switch.css";
 @import "./popover.css";
+@import "./collapsible.css";
+@import "./context-menu.css";
 @import "./input.css";
+@import "./preview-card.css";
 @import "./table.css";
+@import "./navigation-menu.css";
 @import "./alert-dialog.css";
 @import "./progress.css";
 @import "./card.css";
+@import "./tooltip.css";
+@import "./combobox.css";
 @import "./form.css";
+@import "./autocomplete.css";
 @import "./dialog.css";
+@import "./toast.css";
 @import "./menu.css";
 @import "./button.css";
 @import "./separator.css";
-@import "./spinner.css";
-@import "./tooltip.css";
-@import "./toast.css";
-@import "./collapsible.css";
-@import "./select.css";

package/src/components/menu.css

@@ -43,6 +43,6 @@
 	}
 }
 
-.menu__separator {
-	@apply my-2 h-px bg-border;
+.autocomplete__separator {
+	@apply h-px bg-border my-2;
 }

package/src/components/navigation-menu.css

@@ -0,0 +1,45 @@
+.navigation-menu {
+	@apply min-w-max;
+}
+
+.navigation-menu__list {
+	@apply flex items-center gap-4;
+}
+
+.navigation-menu__trigger {
+	@apply cursor-pointer;
+
+	@apply text-muted-foreground hover-safe:text-primary;
+	@apply flex items-center justify-center gap-1;
+}
+
+.navigation-menu__icon {
+	@apply transition-transform motion-reduce:transition-none;
+
+	&[data-popup-open] {
+		@apply rotate-180;
+	}
+
+	& svg {
+		@apply size-4;
+	}
+}
+
+.navigation-menu__popup {
+	@apply bg-surface text-surface-foreground rounded border p-6 shadow;
+
+	@apply w-fit max-w-[calc(100vw-1rem)];
+
+	@apply transition-[scale,opacity] motion-reduce:transition-none;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply scale-95 opacity-0;
+	}
+}
+
+.navigation-menu__arrow {
+	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+	@apply bg-surface;
+	@apply size-4 z-50 -top-3 relative;
+}

package/src/components/number-field.css

@@ -0,0 +1,46 @@
+.number-field {
+	@apply flex flex-col gap-1 items-start;
+}
+
+.number-field__scrub-area {
+	cursor: ew-resize;
+	@apply select-none font-bold;
+}
+
+.number-field__scrub-area-cursor {
+	filter: drop-shadow(0 1px 1px var(--color-primary));
+}
+
+.number-field__group {
+	@apply flex;
+}
+
+.number-field__input {
+	@apply bg-input text-input-foreground hover-safe:bg-input/80 shadow border-y;
+	@apply px-3 py-2 h-10 w-fit;
+
+	&:focus-visible {
+		@apply status-focused;
+	}
+}
+
+.number-field__increment,
+.number-field__decrement {
+	@apply cursor-pointer;
+
+	@apply bg-secondary text-secondary-foreground hover-safe:bg-secondary/80 border shadow;
+	@apply flex items-center justify-center;
+	@apply p-2 size-10;
+
+	&:first-of-type {
+		@apply rounded-l;
+	}
+
+	&:last-of-type {
+		@apply rounded-r;
+	}
+
+	&:focus-visible {
+		@apply status-focused;
+	}
+}

package/src/components/preview-card.css

@@ -0,0 +1,16 @@
+.preview-card__positioner {
+	@apply outline-0;
+}
+
+.preview-card__popup {
+	@apply bg-surface text-surface-foreground rounded border shadow;
+
+	@apply px-3 py-2;
+
+	@apply transition-[transform,scale,opacity] motion-reduce:transition-none;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply opacity-0 scale-90;
+	}
+}

package/src/components/scroll-area.css

@@ -0,0 +1,3 @@
+.scroll-area {
+	@apply relative overflow-auto;
+}

package/src/components/select.css

@@ -1,51 +1,82 @@
-.select {
-	@apply w-full;
-}
-
 .select__trigger {
-	@apply flex w-full items-center justify-between rounded-md border bg-surface px-3 py-2 text-sm text-surface-foreground;
-	@apply hover-safe:bg-secondary/10 transition-all;
-	@apply outline-none ring-offset-surface focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
-	@apply placeholder:text-muted-foreground;
-	@apply disabled:cursor-not-allowed disabled:opacity-50;
-
-	&[data-state="open"] {
-		@apply ring-2 ring-ring ring-offset-2;
+	@apply cursor-pointer;
+	@apply bg-input text-input-foreground hover-safe:bg-input/80;
+	@apply border border-border rounded;
+
+	@apply flex items-center justify-between gap-2;
+	@apply h-10 px-3 py-2 w-fit min-w-56;
+
+	&:focus-visible {
+		@apply status-focused;
 	}
 }
 
 .select__icon {
-	@apply text-muted-foreground h-4 w-4 opacity-50;
+	@apply flex;
+
+	& svg {
+		@apply size-4 text-muted-foreground;
+	}
+}
+
+.select__positioner {
+	@apply outline-none z-10 select-none;
 }
 
 .select__popup {
-	@apply min-w-32 overflow-hidden rounded-md border bg-overlay text-overlay-foreground shadow-md;
-	@apply transition-[transform,scale,opacity] motion-reduce:transition-none;
+	min-width: var(--anchor-width);
+	transform-origin: var(--transform-origin);
+
+	@apply bg-surface text-surface-foreground rounded border-border shadow;
+
+	@apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-3 py-3;
+
+	@apply transition-[scale,opacity] motion-reduce:transition-none;
 
-	@starting-style {
-		@apply opacity-0 scale-95;
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply scale-95 opacity-0;
 	}
 }
 
+.select__list {
+	@apply overflow-y-auto scroll-pb-6 max-h-56;
+}
+
 .select__item {
-	@apply relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none;
-	@apply focus:bg-secondary focus:text-secondary-foreground;
-	@apply data-disabled:pointer-events-none data-disabled:opacity-50;
+	@apply flex items-center gap-2 outline-0;
+	@apply cursor-pointer select-none;
+
+	@apply px-2 py-1 rounded;
+	@apply hover-safe:bg-primary hover-safe:text-primary-foreground;
 }
 
 .select__item-indicator {
-	@apply absolute left-2 flex h-3.5 w-3.5 items-center justify-center;
+	& svg {
+		@apply size-4 block;
+	}
+}
+
+.select__value {
+	@apply flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap;
 }
 
-.select__separator {
-	@apply -mx-1 my-1 h-px bg-muted;
+.select__group {
+	@apply overflow-hidden;
 }
 
 .select__group-label {
-	@apply px-2 py-1.5 text-sm font-semibold;
+	@apply px-2 py-1 text-sm font-medium text-muted-foreground;
+}
+
+.autocomplete__separator {
+	@apply h-px bg-border my-2;
+}
+
+.select__backdrop {
+	@apply fixed inset-0 z-0;
 }
 
-.select__scroll-up-arrow,
-.select__scroll-down-arrow {
-	@apply flex cursor-default items-center justify-center py-1;
+.select__arrow {
+	@apply hidden;
 }

package/src/styles.css

@@ -115,6 +115,10 @@
 	}
 
 	body {
-		@apply bg-background text-foreground;
+		@apply relative bg-background text-foreground;
+	}
+
+	.root {
+		@apply antialiased isolate;
 	}
 }