@fea-ui/styles 0.0.2 → 0.0.4

package/src/components/meter.css

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

package/src/components/navbar.css

@@ -1,36 +1,36 @@
 /** Base Styling */
 .navbar {
-	@apply bg-surface/50 border-border relative z-50 flex h-(--navbar-height) w-full items-center justify-between border-b px-4 py-2;
+  @apply bg-surface/50 border-border relative z-50 flex h-(--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;
+  @apply mx-auto flex w-full max-w-7xl items-center justify-between;
 }
 
 .navbar__content {
-	@apply flex items-center gap-2;
+  @apply flex items-center gap-2;
 }
 
 .navbar__toggle {
-	@apply md:hidden;
+  @apply md:hidden;
 
-	svg {
-		@apply size-5 me-2;
-	}
+  svg {
+    @apply me-2 size-5;
+  }
 }
 
 .navbar__list {
-	@apply flex items-center gap-4;
+  @apply flex items-center gap-4;
 }
 
 .navbar__list-item {
-	@apply list-none;
+  @apply list-none;
 }
 
 .navbar__menu {
-	@apply flex flex-col gap-1;
+  @apply flex flex-col gap-1;
 }
 
 .navbar__menu-item {
-	@apply w-full list-none px-4 py-2;
+  @apply w-full list-none px-4 py-2;
 }

package/src/components/navigation-menu.css

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

package/src/components/number-field.css

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

package/src/components/popover.css

@@ -1,51 +1,51 @@
 .popover__positioner {
-	width: var(--positioner-width);
-	max-width: var(--available-width);
-	height: var(--positioner-height);
+  width: var(--positioner-width);
+  max-width: var(--available-width);
+  height: var(--positioner-height);
 }
 
 .popover__popup {
-	@apply px-3 py-2 rounded relative;
+  @apply relative rounded px-3 py-2;
 
-	@apply bg-overlay text-overlay-foreground shadow;
+  @apply bg-overlay text-overlay-foreground shadow;
 
-	@apply transition-[transform,scale] motion-reduce:transition-none;
+  @apply transition-[transform,scale] motion-reduce:transition-none;
 
-	&[data-starting-style],
-	&[data-ending-style] {
-		@apply opacity-0 scale-90;
-	}
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply scale-90 opacity-0;
+  }
 }
 
 .popover__arrow {
-	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-	@apply size-4 bg-overlay absolute z-50 border-border;
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  @apply bg-overlay border-border absolute z-50 size-4;
 
-	&[data-side="top"] {
-		@apply -bottom-2 rotate-180;
-	}
+  &[data-side="top"] {
+    @apply -bottom-2 rotate-180;
+  }
 
-	&[data-side="right"] {
-		@apply -start-3 rotate-90;
-	}
+  &[data-side="right"] {
+    @apply -start-3 rotate-90;
+  }
 
-	&[data-side="bottom"] {
-		@apply -top-2;
-	}
+  &[data-side="bottom"] {
+    @apply -top-2;
+  }
 
-	&[data-side="left"] {
-		@apply -end-3 -rotate-90;
-	}
+  &[data-side="left"] {
+    @apply -end-3 -rotate-90;
+  }
 }
 
 .popover__title {
-	@apply font-medium;
+  @apply font-medium;
 }
 
 .popover__description {
-	@apply text-sm text-muted-foreground;
+  @apply text-muted-foreground text-sm;
 }
 
 .popover__close {
-	@apply absolute top-0 end-0 m-1;
+  @apply absolute end-0 top-0 m-1;
 }

package/src/components/preview-card.css

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

package/src/components/progress.css

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

package/src/components/radio.css

@@ -1,31 +1,31 @@
 .radio__group {
-	@apply flex flex-col gap-4;
+  @apply flex flex-col gap-4;
 }
 
 .radio {
-	@apply flex size-5 items-center justify-center rounded-full;
+  @apply flex size-5 items-center justify-center rounded-full;
 
-	&[data-unchecked] {
-		@apply border-border bg-secondary;
-	}
+  &[data-unchecked] {
+    @apply border-border bg-secondary;
+  }
 
-	&[data-checked] {
-		@apply border-primary bg-primary;
-	}
+  &[data-checked] {
+    @apply border-primary bg-primary;
+  }
 
-	&:focus-visible {
-		@apply status-focused;
-	}
+  &:focus-visible {
+    @apply status-focused;
+  }
 }
 
 .radio__indicator {
-	@apply flex items-center justify-center;
+  @apply flex items-center justify-center;
 
-	&[data-unchecked] {
-		@apply hidden;
-	}
+  &[data-unchecked] {
+    @apply hidden;
+  }
 
-	&::before {
-		@apply block size-2 rounded-full bg-background content-[''];
-	}
+  &::before {
+    @apply bg-background block size-2 rounded-full content-[''];
+  }
 }

package/src/components/scroll-area.css

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

package/src/components/select.css

@@ -1,82 +1,82 @@
 .select__trigger {
-	@apply cursor-pointer;
-	@apply bg-input text-input-foreground hover-safe:bg-input/80;
-	@apply border border-border rounded;
+  @apply cursor-pointer;
+  @apply bg-input text-input-foreground hover-safe:bg-input/80;
+  @apply border-border rounded border;
 
-	@apply flex items-center justify-between gap-2;
-	@apply h-10 px-3 py-2 w-fit min-w-56;
+  @apply flex items-center justify-between gap-2;
+  @apply h-10 w-fit min-w-56 px-3 py-2;
 
-	&:focus-visible {
-		@apply status-focused;
-	}
+  &:focus-visible {
+    @apply status-focused;
+  }
 }
 
 .select__icon {
-	@apply flex;
+  @apply flex;
 
-	& svg {
-		@apply size-4 text-muted-foreground;
-	}
+  & svg {
+    @apply text-muted-foreground size-4;
+  }
 }
 
 .select__positioner {
-	@apply outline-none z-10 select-none;
+  @apply z-10 outline-none select-none;
 }
 
 .select__popup {
-	min-width: var(--anchor-width);
-	transform-origin: var(--transform-origin);
+  min-width: var(--anchor-width);
+  transform-origin: var(--transform-origin);
 
-	@apply bg-surface text-surface-foreground rounded border-border shadow;
+  @apply bg-surface text-surface-foreground border-border rounded shadow;
 
-	@apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-3 py-3;
+  @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;
+  @apply transition-[scale,opacity] motion-reduce:transition-none;
 
-	&[data-starting-style],
-	&[data-ending-style] {
-		@apply scale-95 opacity-0;
-	}
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply scale-95 opacity-0;
+  }
 }
 
 .select__list {
-	@apply overflow-y-auto scroll-pb-6 max-h-56;
+  @apply max-h-56 scroll-pb-6 overflow-y-auto;
 }
 
 .select__item {
-	@apply flex items-center gap-2 outline-0;
-	@apply cursor-pointer select-none;
+  @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;
+  @apply rounded px-2 py-1;
+  @apply hover-safe:bg-primary hover-safe:text-primary-foreground;
 }
 
 .select__item-indicator {
-	& svg {
-		@apply size-4 block;
-	}
+  & svg {
+    @apply block size-4;
+  }
 }
 
 .select__value {
-	@apply flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap;
+  @apply flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap;
 }
 
 .select__group {
-	@apply overflow-hidden;
+  @apply overflow-hidden;
 }
 
 .select__group-label {
-	@apply px-2 py-1 text-sm font-medium text-muted-foreground;
+  @apply text-muted-foreground px-2 py-1 text-sm font-medium;
 }
 
 .autocomplete__separator {
-	@apply h-px bg-border my-2;
+  @apply bg-border my-2 h-px;
 }
 
 .select__backdrop {
-	@apply fixed inset-0 z-0;
+  @apply fixed inset-0 z-0;
 }
 
 .select__arrow {
-	@apply hidden;
+  @apply hidden;
 }

package/src/components/separator.css

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