@fea-ui/styles 0.0.2 → 0.0.4

package/src/components/chip.css

@@ -1,40 +1,40 @@
 /** Base Styling */
 .chip {
-	@apply inline-flex items-center justify-center gap-2 rounded-full border px-2 font-medium text-nowrap;
+  @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;
+  @apply h-4 text-sm;
 }
 
 .chip--md {
-	@apply h-6;
+  @apply h-6;
 }
 
 .chip--lg {
-	@apply h-8;
+  @apply h-8;
 }
 
 .chip--primary {
-	@apply bg-primary text-primary-foreground;
+  @apply bg-primary text-primary-foreground;
 }
 
 .chip--secondary {
-	@apply bg-secondary text-secondary-foreground;
+  @apply bg-secondary text-secondary-foreground;
 }
 
 .chip--outline {
-	@apply bg-transparent;
+  @apply bg-transparent;
 }
 
 .chip--danger {
-	@apply bg-danger text-danger-foreground;
+  @apply bg-danger text-danger-foreground;
 }
 
 .chip--ghost {
-	@apply border-none bg-transparent;
+  @apply border-none bg-transparent;
 }
 
 .chip--success {
-	@apply bg-success text-success-foreground;
+  @apply bg-success text-success-foreground;
 }

package/src/components/collapsible.css

@@ -1,37 +1,37 @@
 .collapsible {
-	@apply w-full rounded-md border bg-surface text-surface-foreground;
+  @apply bg-surface text-surface-foreground w-full rounded-md border;
 }
 
 .collapsible__trigger {
-	@apply flex w-full items-center justify-between px-4 py-3 font-medium;
-	@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 flex w-full items-center justify-between px-4 py-3 font-medium;
+  @apply hover-safe:bg-secondary/10 transition-all;
+  @apply ring-offset-surface focus-visible:ring-ring outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
 
-	&[data-disabled] {
-		@apply status-disabled;
-	}
+  &[data-disabled] {
+    @apply status-disabled;
+  }
 
-	& .collapsible__trigger-icon {
-		@apply text-muted-foreground transition-transform duration-200;
-	}
+  & .collapsible__trigger-icon {
+    @apply text-muted-foreground transition-transform duration-200;
+  }
 
-	&[data-state="open"] .collapsible__trigger-icon {
-		@apply rotate-180;
-	}
+  &[data-state="open"] .collapsible__trigger-icon {
+    @apply rotate-180;
+  }
 }
 
 .collapsible__panel {
-	height: var(--collapsible-panel-height);
+  height: var(--collapsible-panel-height);
 
-	@apply overflow-hidden text-sm;
+  @apply overflow-hidden text-sm;
 
-	@apply transition-[height] motion-reduce:transition-none;
+  @apply transition-[height] motion-reduce:transition-none;
 
-	@starting-style {
-		@apply h-0;
-	}
+  @starting-style {
+    @apply h-0;
+  }
 }
 
 .collapsible__content {
-	@apply px-3 py-2;
+  @apply px-3 py-2;
 }

package/src/components/combobox.css

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

package/src/components/container.css

@@ -1,4 +1,4 @@
 /** Base Styling */
 .container {
-	@apply mx-auto px-4;
+  @apply mx-auto px-4;
 }

package/src/components/context-menu.css

@@ -1,34 +1,34 @@
 .context-menu__trigger {
-	@apply select-none;
+  @apply select-none;
 }
 
 .context-menu__positioner {
-	@apply outline-0;
+  @apply outline-0;
 }
 
 .context-menu__popup {
-	transform-origin: var(--transform-origin);
+  transform-origin: var(--transform-origin);
 
-	@apply bg-surface text-surface-foreground rounded border p-3 shadow;
+  @apply bg-surface text-surface-foreground rounded border p-3 shadow;
 
-	@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;
+  }
 }
 
 .context-menu__item {
-	@apply cursor-pointer;
+  @apply cursor-pointer;
 
-	@apply flex items-center gap-2;
+  @apply flex items-center gap-2;
 
-	@apply hover-safe:bg-primary hover-safe:text-primary-foreground;
+  @apply hover-safe:bg-primary hover-safe:text-primary-foreground;
 
-	@apply px-2 py-1 rounded;
+  @apply rounded px-2 py-1;
 }
 
 .context-menu__separator {
-	@apply h-px bg-border my-2;
+  @apply bg-border my-2 h-px;
 }

package/src/components/dialog.css

@@ -1,51 +1,51 @@
 /** Base Styling */
 
 .dialog__backdrop {
-	@apply fixed inset-0 bg-black/50 opacity-20 backdrop-blur-sm;
+  @apply fixed inset-0 bg-black/50 opacity-20 backdrop-blur-sm;
 
-	@apply transition-opacity motion-reduce:transition-none;
+  @apply transition-opacity motion-reduce:transition-none;
 
-	&[data-starting-style],
-	&[data-ending-style] {
-		@apply opacity-0;
-	}
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply opacity-0;
+  }
 }
 
 .dialog__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-96 max-w-[calc(100vw-1rem)];
+  @apply w-96 max-w-[calc(100vw-1rem)];
 
-	@apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/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;
+  @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;
+  }
 }
 
 .dialog__title {
-	@apply text-lg font-semibold;
+  @apply text-lg font-semibold;
 }
 
 .dialog__description {
-	@apply text-muted-foreground text-sm;
+  @apply text-muted-foreground text-sm;
 }
 
 .dialog__close {
-	@apply cursor-pointer;
+  @apply cursor-pointer;
 
-	@apply absolute top-0 right-0 m-2;
+  @apply absolute top-0 right-0 m-2;
 
-	svg {
-		@apply text-muted-foreground size-5;
+  svg {
+    @apply text-muted-foreground size-5;
 
-		@apply transition-colors motion-reduce:transition-none;
+    @apply transition-colors motion-reduce:transition-none;
 
-		&:hover {
-			@apply text-foreground;
-		}
-	}
+    &:hover {
+      @apply text-foreground;
+    }
+  }
 }

package/src/components/drawer.css

@@ -1,46 +1,46 @@
 .drawer__backdrop {
-	@apply fixed inset-0 bg-black/50 opacity-50;
+  @apply fixed inset-0 bg-black/50 opacity-50;
 
-	@apply transition-opacity motion-reduce:transition-none;
+  @apply transition-opacity motion-reduce:transition-none;
 
-	&[data-starting-style],
-	&[data-ending-style] {
-		@apply opacity-0;
-	}
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply opacity-0;
+  }
 }
 
 .drawer__popup {
-	@apply fixed p-3 z-50;
+  @apply fixed z-50 p-3;
 
-	@apply bg-surface text-surface-foreground shadow;
+  @apply bg-surface text-surface-foreground shadow;
 
-	@apply transition-[translate] motion-reduce:transition-none;
+  @apply transition-[translate] motion-reduce:transition-none;
 }
 
 .drawer__title {
-	@apply text-lg font-medium;
+  @apply text-lg font-medium;
 }
 
 .drawer__description {
-	@apply text-sm text-muted-foreground;
+  @apply text-muted-foreground text-sm;
 }
 
 .drawer__close {
-	@apply cursor-pointer;
+  @apply cursor-pointer;
 
-	@apply absolute top-0 end-0 m-3 rounded-full;
+  @apply absolute end-0 top-0 m-3 rounded-full;
 
-	@apply text-muted-foreground;
+  @apply text-muted-foreground;
 
-	@apply transition-colors motion-reduce:transition-none;
+  @apply transition-colors motion-reduce:transition-none;
 
-	&:hover {
-		@apply bg-secondary/10;
-	}
+  &:hover {
+    @apply bg-secondary/10;
+  }
 
-	&:focus {
-		@apply outline-none;
-	}
+  &:focus {
+    @apply outline-none;
+  }
 }
 
 /**
@@ -48,37 +48,37 @@
  */
 
 .drawer--right.drawer__popup {
-	@apply end-0 top-0 w-96 max-w-[calc(100vw-2rem)] h-full rounded-l;
+  @apply end-0 top-0 h-full w-96 max-w-[calc(100vw-2rem)] rounded-l;
 
-	&[data-starting-style],
-	&[data-ending-style] {
-		@apply translate-x-full;
-	}
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply translate-x-full;
+  }
 }
 
 .drawer--left.drawer__popup {
-	@apply start-0 top-0 w-96 h-full rounded-r max-w-[calc(100vw-2rem)];
+  @apply start-0 top-0 h-full w-96 max-w-[calc(100vw-2rem)] rounded-r;
 
-	&[data-starting-style],
-	&[data-ending-style] {
-		@apply -translate-x-full;
-	}
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply -translate-x-full;
+  }
 }
 
 .drawer--top.drawer__popup {
-	@apply top-0 start-0 w-full h-96 rounded-b;
+  @apply start-0 top-0 h-96 w-full rounded-b;
 
-	&[data-starting-style],
-	&[data-ending-style] {
-		@apply -translate-y-full;
-	}
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply -translate-y-full;
+  }
 }
 
 .drawer--bottom.drawer__popup {
-	@apply bottom-0 start-0 w-full h-96 rounded-t;
+  @apply start-0 bottom-0 h-96 w-full rounded-t;
 
-	&[data-starting-style],
-	&[data-ending-style] {
-		@apply translate-y-full;
-	}
+  &[data-starting-style],
+  &[data-ending-style] {
+    @apply translate-y-full;
+  }
 }

package/src/components/field.css

@@ -1,12 +1,12 @@
 /** Base Styling */
 .field {
-	@apply flex flex-col gap-1;
+  @apply flex flex-col gap-1;
 }
 
 .field__description {
-	@apply text-sm text-gray-500;
+  @apply text-sm text-gray-500;
 }
 
 .field__error {
-	@apply text-sm text-red-600;
+  @apply text-sm text-red-600;
 }

package/src/components/fieldset.css

@@ -1,9 +1,9 @@
 .fieldset {
-	@apply flex w-full max-w-md flex-col gap-1;
+  @apply flex w-full max-w-md flex-col gap-1;
 }
 
 .fieldset__legend {
-	@apply border-b pb-4;
+  @apply border-b pb-4;
 
-	@apply text-lg font-semibold;
+  @apply text-lg font-semibold;
 }

package/src/components/form.css

@@ -1,4 +1,4 @@
 /** Base Styling */
 .form {
-	@apply flex w-full flex-col gap-4;
+  @apply flex w-full flex-col gap-4;
 }

package/src/components/input.css

@@ -1,35 +1,35 @@
 .input,
 .textarea {
-	@apply bg-input text-input-foreground rounded border;
-	@apply w-full px-3 py-2;
+  @apply bg-input text-input-foreground rounded border;
+  @apply w-full px-3 py-2;
 
-	@apply transition-[brightness] motion-reduce:transition-none;
+  @apply transition-[brightness] motion-reduce:transition-none;
 
-	&::placeholder {
-		@apply text-muted-foreground;
-	}
+  &::placeholder {
+    @apply text-muted-foreground;
+  }
 
-	&[data-focused] {
-		@apply status-focused;
-	}
+  &[data-focused] {
+    @apply status-focused;
+  }
 
-	&:disabled {
-		@apply status-disabled;
-	}
+  &:disabled {
+    @apply status-disabled;
+  }
 
-	&[data-invalid] {
-		@apply border-danger;
-	}
+  &[data-invalid] {
+    @apply border-danger;
+  }
 }
 
 .input--sm {
-	@apply h-8 text-sm;
+  @apply h-8 text-sm;
 }
 
 .input--md {
-	@apply h-10;
+  @apply h-10;
 }
 
 .input--lg {
-	@apply h-12;
+  @apply h-12;
 }

package/src/components/label.css

@@ -1,9 +1,9 @@
 /** Base Styling */
 .label {
-	@apply inline-flex items-center gap-2;
-	@apply font-medium text-foreground leading-none;
+  @apply inline-flex items-center gap-2;
+  @apply text-foreground leading-none font-medium;
 }
 
 [data-required="true"] .label {
-	@apply after:content-['*'] after:ml-0.5 after:text-danger;
+  @apply after:text-danger after:ml-0.5 after:content-['*'];
 }

package/src/components/link.css

@@ -1,18 +1,18 @@
 /** Base Styling */
 .link {
-	@apply text-muted-foreground hover-safe:text-primary;
-	@apply inline-flex items-center gap-1;
-	@apply transition-colors motion-reduce:transition-none;
+  @apply text-muted-foreground hover-safe:text-primary;
+  @apply inline-flex items-center gap-1;
+  @apply transition-colors motion-reduce:transition-none;
 
-	&svg {
-		@apply size-4;
-	}
+  &svg {
+    @apply size-4;
+  }
 }
 
 .link--underline {
-	@apply underline;
+  @apply underline;
 }
 
 .link--no-underline {
-	@apply no-underline;
+  @apply no-underline;
 }

package/src/components/list.css

@@ -1,4 +1,4 @@
 /** Base Styling */
 .list {
-	@apply flex flex-col gap-1;
+  @apply flex flex-col gap-1;
 }

package/src/components/menu.css

@@ -1,48 +1,48 @@
 .menu__positioner {
-	@apply outline-0;
+  @apply outline-0;
 }
 
 .menu__popup {
-	@apply p-3 rounded;
+  @apply rounded p-3;
 
-	@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;
+  }
 }
 
 .menu__arrow {
-	@apply flex text-overlay size-6;
+  @apply text-overlay flex size-6;
 
-	&[data-side="top"] {
-		@apply -bottom-3 rotate-180;
-	}
+  &[data-side="top"] {
+    @apply -bottom-3 rotate-180;
+  }
 
-	&[data-side="right"] {
-		@apply -start-3 rotate-90;
-	}
+  &[data-side="right"] {
+    @apply -start-3 rotate-90;
+  }
 
-	&[data-side="bottom"] {
-		@apply -top-3;
-	}
+  &[data-side="bottom"] {
+    @apply -top-3;
+  }
 
-	&[data-side="left"] {
-		@apply -end-3 -rotate-90;
-	}
+  &[data-side="left"] {
+    @apply -end-3 -rotate-90;
+  }
 }
 
 .menu__item {
-	@apply select-none relative flex items-center px-3 py-2 rounded text-sm leading-none cursor-pointer;
+  @apply relative flex cursor-pointer items-center rounded px-3 py-2 text-sm leading-none select-none;
 
-	&:focus {
-		@apply outline-none bg-secondary text-secondary-foreground;
-	}
+  &:focus {
+    @apply bg-secondary text-secondary-foreground outline-none;
+  }
 }
 
 .autocomplete__separator {
-	@apply h-px bg-border my-2;
+  @apply bg-border my-2 h-px;
 }