@fea-ui/styles 0.0.1-canary.0 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fea-ui/styles",
-  "version": "0.0.1-canary.0",
+  "version": "0.0.2",
   "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,22 +22,24 @@
 @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 "./menu.css";
 @import "./button.css";
 @import "./separator.css";
-@import "./spinner.css";
-@import "./tooltip.css";
-@import "./toast.css";
-@import "./collapsible.css";
-@import "./select.css";
-@import "./navigation-menu.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/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

@@ -69,8 +69,8 @@
 	@apply px-2 py-1 text-sm font-medium text-muted-foreground;
 }
 
-.select__separator {
-	@apply my-1 h-px bg-border;
+.autocomplete__separator {
+	@apply h-px bg-border my-2;
 }
 
 .select__backdrop {