@fea-ui/styles 0.0.2 → 0.0.4

package/src/components/sidebar.css

@@ -1,56 +1,56 @@
 .sidebar {
-	@apply flex h-full w-full;
+  @apply flex h-full w-full;
 }
 
 .sidebar__panel {
-	@apply fixed top-0 left-0 h-full w-64;
+  @apply fixed top-0 left-0 h-full w-64;
 
-	@apply flex flex-col;
+  @apply flex flex-col;
 
-	@apply bg-surface shadow-lg text-surface-foreground;
+  @apply bg-surface text-surface-foreground shadow-lg;
 
-	@apply transition-transform duration-300 ease-in-out motion-reduce:transition-none;
+  @apply transition-transform duration-300 ease-in-out motion-reduce:transition-none;
 }
 
 .sidebar__header {
-	@apply flex items-center justify-between gap-3 p-4;
-	@apply border-b;
+  @apply flex items-center justify-between gap-3 p-4;
+  @apply border-b;
 }
 
 .sidebar__content {
-	@apply flex-1 p-4;
+  @apply flex-1 p-4;
 }
 
 .sidebar__footer {
-	@apply border-t;
-	@apply p-4;
+  @apply border-t;
+  @apply p-4;
 }
 
 .sidebar__outlet {
-	@apply md:ml-64;
+  @apply md:ml-64;
 
-	@apply transition-[margin] duration-300 ease-in-out motion-reduce:transition-none;
+  @apply transition-[margin] duration-300 ease-in-out motion-reduce:transition-none;
 }
 
 .sidebar__menu {
-	@apply flex flex-col gap-1;
+  @apply flex flex-col gap-1;
 }
 
 .sidebar__menu-item {
-	@apply cursor-pointer;
-	@apply flex items-center gap-3 rounded px-3 py-2;
-	@apply text-foreground hover-safe:bg-primary/10 hover-safe:text-primary;
+  @apply cursor-pointer;
+  @apply flex items-center gap-3 rounded px-3 py-2;
+  @apply text-foreground hover-safe:bg-primary/10 hover-safe:text-primary;
 
-	@apply transition-[background-color,color] motion-reduce:transition-none;
+  @apply transition-[background-color,color] motion-reduce:transition-none;
 
-	&.active {
-		@apply bg-primary/20 text-primary;
-	}
+  &.active {
+    @apply bg-primary/20 text-primary;
+  }
 }
 
 .sidebar__menu-label {
-	@apply py-2;
-	@apply text-sm font-medium text-muted-foreground;
+  @apply py-2;
+  @apply text-muted-foreground text-sm font-medium;
 }
 
 /**
@@ -58,11 +58,11 @@
  */
 
 [data-open="false"] {
-	.sidebar__panel {
-		@apply -translate-x-full;
-	}
+  .sidebar__panel {
+    @apply -translate-x-full;
+  }
 
-	.sidebar__outlet {
-		@apply ml-0;
-	}
+  .sidebar__outlet {
+    @apply ml-0;
+  }
 }

package/src/components/slider.css

@@ -1,25 +1,25 @@
 .slider__control {
-	@apply flex w-full touch-none select-none items-center py-3;
+  @apply flex w-full touch-none items-center py-3 select-none;
 }
 
 .slider__track {
-	@apply relative h-1 w-full rounded bg-secondary shadow-inner shadow-secondary select-none;
+  @apply bg-secondary shadow-secondary relative h-1 w-full rounded shadow-inner select-none;
 }
 
 .slider__indicator {
-	@apply absolute rounded bg-primary select-none;
+  @apply bg-primary absolute rounded select-none;
 }
 
 .slider__thumb {
-	@apply size-4 rounded-full bg-primary outline outline-border select-none;
+  @apply bg-primary outline-border size-4 rounded-full outline select-none;
 
-	@apply transition-[box-shadow,transform,outline] motion-reduce:transition-none;
+  @apply transition-[box-shadow,transform,outline] motion-reduce:transition-none;
 
-	&:focus-visible {
-		@apply status-focused;
-	}
+  &:focus-visible {
+    @apply status-focused;
+  }
 
-	&:active {
-		@apply scale-90;
-	}
+  &:active {
+    @apply scale-90;
+  }
 }

package/src/components/spinner.css

@@ -1,5 +1,5 @@
 .spinner {
-	@apply animate-spin;
+  @apply animate-spin;
 }
 
 /**
@@ -7,32 +7,32 @@
  */
 
 .spinner--sm {
-	@apply size-4;
+  @apply size-4;
 }
 
 .spinner--md {
-	@apply size-6;
+  @apply size-6;
 }
 
 .spinner--lg {
-	@apply size-8;
+  @apply size-8;
 }
 
 .spinner--xl {
-	@apply size-10;
+  @apply size-10;
 }
 
 /**
  * Variants
  */
 .spinner--primary {
-	@apply text-primary;
+  @apply text-primary;
 }
 
 .spinner--success {
-	@apply text-success;
+  @apply text-success;
 }
 
 .spinner--danger {
-	@apply text-danger;
+  @apply text-danger;
 }

package/src/components/switch.css

@@ -1,40 +1,40 @@
 /** Base Styling */
 .switch {
-	@apply cursor-pointer;
+  @apply cursor-pointer;
 
-	@apply bg-primary/10 relative flex cursor-pointer rounded-full border-2;
+  @apply bg-primary/10 relative flex cursor-pointer rounded-full border-2;
 
-	&[data-checked] {
-		@apply bg-primary/30;
-	}
+  &[data-checked] {
+    @apply bg-primary/30;
+  }
 
-	&:focus-visible {
-		@apply status-focused;
-	}
+  &:focus-visible {
+    @apply status-focused;
+  }
 
-	&[data-disabled] {
-		@apply status-disabled;
-	}
+  &[data-disabled] {
+    @apply status-disabled;
+  }
 }
 
 .switch__thumb {
-	@apply bg-primary aspect-square h-full rounded-full shadow;
+  @apply bg-primary aspect-square h-full rounded-full shadow;
 
-	@apply transition-[translate] motion-reduce:transition-none;
+  @apply transition-[translate] motion-reduce:transition-none;
 
-	&[data-checked] {
-		@apply translate-x-full;
-	}
+  &[data-checked] {
+    @apply translate-x-full;
+  }
 }
 
 .switch--sm {
-	@apply h-4 w-7;
+  @apply h-4 w-7;
 }
 
 .switch--md {
-	@apply h-6 w-10;
+  @apply h-6 w-10;
 }
 
 .switch--lg {
-	@apply h-8 w-14;
+  @apply h-8 w-14;
 }

package/src/components/table.css

@@ -1,32 +1,32 @@
 /** Base Styling */
 .table {
-	@apply w-full border-collapse bg-surface text-surface-foreground;
+  @apply bg-surface text-surface-foreground w-full border-collapse;
 }
 
 .table__thead {
-	@apply bg-secondary text-secondary-foreground;
+  @apply bg-secondary text-secondary-foreground;
 }
 
 .table__th {
-	@apply border-border px-4 py-2 text-left font-medium;
+  @apply border-border px-4 py-2 text-left font-medium;
 }
 
 .table__tbody {
-	@apply divide-y divide-border;
+  @apply divide-border divide-y;
 }
 
 .table__tr {
-	@apply cursor-pointer;
+  @apply cursor-pointer;
 
-	&:hover {
-		@apply bg-secondary/50;
-	}
+  &:hover {
+    @apply bg-secondary/50;
+  }
 }
 
 .table__td {
-	@apply border-border px-4 py-2;
+  @apply border-border px-4 py-2;
 }
 
 .table__caption {
-	@apply mt-2 text-sm text-secondary-foreground;
+  @apply text-secondary-foreground mt-2 text-sm;
 }

package/src/components/tabs.css

@@ -1,45 +1,45 @@
 .tabs {
-	@apply flex flex-col gap-4;
+  @apply flex flex-col gap-4;
 }
 
 .tabs__list {
-	@apply flex items-center;
+  @apply flex items-center;
 }
 
 .tabs__tab {
-	@apply cursor-pointer;
+  @apply cursor-pointer;
 
-	@apply bg-secondary text-secondary-foreground hover-safe:bg-secondary/80;
-	@apply inline-flex items-center justify-center;
-	@apply h-10 px-3 py-2 w-fit;
+  @apply bg-secondary text-secondary-foreground hover-safe:bg-secondary/80;
+  @apply inline-flex items-center justify-center;
+  @apply h-10 w-fit px-3 py-2;
 
-	@apply transition-colors motion-reduce:transition-none;
+  @apply transition-colors motion-reduce:transition-none;
 
-	&[data-active] {
-		@apply bg-primary text-primary-foreground hover-safe:bg-primary/90;
-	}
+  &[data-active] {
+    @apply bg-primary text-primary-foreground hover-safe:bg-primary/90;
+  }
 
-	&:focus-visible {
-		@apply status-focused;
-	}
+  &:focus-visible {
+    @apply status-focused;
+  }
 
-	&:first-of-type {
-		@apply rounded-l;
-	}
+  &:first-of-type {
+    @apply rounded-l;
+  }
 
-	&:last-of-type {
-		@apply rounded-r;
-	}
+  &:last-of-type {
+    @apply rounded-r;
+  }
 }
 
 .tabs__panel {
-	@apply flex;
+  @apply flex;
 
-	&:focus-visible {
-		@apply status-focused;
-	}
+  &:focus-visible {
+    @apply status-focused;
+  }
 
-	&[hidden] {
-		@apply hidden;
-	}
+  &[hidden] {
+    @apply hidden;
+  }
 }

package/src/components/text.css

@@ -1,4 +1,4 @@
 /** Base Styling */
 .text {
-	@apply text-danger;
+  @apply text-danger;
 }

package/src/components/toggle-button.css

@@ -1,8 +1,8 @@
 /** Base Styling */
 .toggle-button {
-	@apply brightness-50;
+  @apply brightness-50;
 
-	&[data-pressed] {
-		@apply brightness-100;
-	}
+  &[data-pressed] {
+    @apply brightness-100;
+  }
 }

package/src/components/tooltip.css

@@ -1,41 +1,41 @@
 .tooltip__positioner {
-	z-index: 50;
-	width: var(--positioner-width);
-	max-width: var(--available-width);
-	height: var(--positioner-height);
-	pointer-events: none;
+  z-index: 50;
+  width: var(--positioner-width);
+  max-width: var(--available-width);
+  height: var(--positioner-height);
+  pointer-events: none;
 }
 
 .tooltip__popup {
-	@apply px-2 py-1 rounded text-xs leading-none font-medium;
+  @apply rounded px-2 py-1 text-xs leading-none font-medium;
 
-	@apply bg-overlay-foreground text-overlay;
+  @apply bg-overlay-foreground text-overlay;
 
-	@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;
+  }
 }
 
 .tooltip__arrow {
-	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-	@apply size-2 bg-overlay-foreground absolute z-50;
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  @apply bg-overlay-foreground absolute z-50 size-2;
 
-	&[data-side="top"] {
-		@apply -bottom-1 rotate-180;
-	}
+  &[data-side="top"] {
+    @apply -bottom-1 rotate-180;
+  }
 
-	&[data-side="right"] {
-		@apply -start-1.5 rotate-90;
-	}
+  &[data-side="right"] {
+    @apply -start-1.5 rotate-90;
+  }
 
-	&[data-side="bottom"] {
-		@apply -top-1;
-	}
+  &[data-side="bottom"] {
+    @apply -top-1;
+  }
 
-	&[data-side="left"] {
-		@apply -end-1.5 -rotate-90;
-	}
+  &[data-side="left"] {
+    @apply -end-1.5 -rotate-90;
+  }
 }

package/src/styles.css

@@ -2,123 +2,123 @@
 @import "./components/index.css" layer(components);
 
 :root {
-	--navbar-height: 4rem;
-	--radius: 0.625rem;
-
-	--background: oklch(0.9702 0 0);
-	--foreground: oklch(0.145 0 0);
-
-	--surface: oklch(1 0 0);
-	--surface-foreground: oklch(0.145 0 0);
-	--overlay: oklch(1 0 0 / 90%);
-	--overlay-foreground: oklch(0.145 0 0);
-	--input: oklch(0.922 0 0);
-	--input-foreground: oklch(0.205 0 0);
-
-	--primary: oklch(0.205 0 0);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.91 0.0013 286.37);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--danger: oklch(0.577 0.245 27.325);
-	--danger-foreground: oklch(0.985 0 0);
-	--success: oklch(0.623 0.17 145);
-	--success-foreground: oklch(0.985 0 0);
-
-	--border: oklch(0.922 0 0);
-	--ring: oklch(62% 0.18 250);
+  --navbar-height: 4rem;
+  --radius: 0.625rem;
+
+  --background: oklch(0.9702 0 0);
+  --foreground: oklch(0.145 0 0);
+
+  --surface: oklch(1 0 0);
+  --surface-foreground: oklch(0.145 0 0);
+  --overlay: oklch(1 0 0 / 90%);
+  --overlay-foreground: oklch(0.145 0 0);
+  --input: oklch(0.922 0 0);
+  --input-foreground: oklch(0.205 0 0);
+
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.91 0.0013 286.37);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --danger: oklch(0.577 0.245 27.325);
+  --danger-foreground: oklch(0.985 0 0);
+  --success: oklch(0.623 0.17 145);
+  --success-foreground: oklch(0.985 0 0);
+
+  --border: oklch(0.922 0 0);
+  --ring: oklch(62% 0.18 250);
 }
 
 .dark {
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
-
-	--surface: oklch(0.205 0 0);
-	--surface-foreground: oklch(0.985 0 0);
-	--overlay: oklch(0.205 0 0);
-	--overlay-foreground: oklch(0.985 0 0);
-	--input: oklch(1 0 0 / 15%);
-	--input-foreground: oklch(0.985 0 0);
-
-	--primary: oklch(0.922 0 0);
-	--primary-foreground: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--danger: oklch(0.704 0.191 22.216);
-	--danger-foreground: oklch(0.985 0 0);
-	--success: oklch(0.7017 0.3225 145);
-	--success-foreground: oklch(0.205 0 0);
-
-	--border: oklch(1 0 0 / 10%);
-	--ring: oklch(62% 0.18 250);
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+
+  --surface: oklch(0.205 0 0);
+  --surface-foreground: oklch(0.985 0 0);
+  --overlay: oklch(0.205 0 0);
+  --overlay-foreground: oklch(0.985 0 0);
+  --input: oklch(1 0 0 / 15%);
+  --input-foreground: oklch(0.985 0 0);
+
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --danger: oklch(0.704 0.191 22.216);
+  --danger-foreground: oklch(0.985 0 0);
+  --success: oklch(0.7017 0.3225 145);
+  --success-foreground: oklch(0.205 0 0);
+
+  --border: oklch(1 0 0 / 10%);
+  --ring: oklch(62% 0.18 250);
 }
 
 @theme inline {
-	--radius: var(--radius);
-
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-
-	--color-surface: var(--surface);
-	--color-surface-foreground: var(--surface-foreground);
-	--color-overlay: var(--overlay);
-	--color-overlay-foreground: var(--overlay-foreground);
-	--color-input: var(--input);
-	--color-input-foreground: var(--input-foreground);
-
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-danger: var(--danger);
-	--color-danger-foreground: var(--danger-foreground);
-	--color-success: var(--success);
-	--color-success-foreground: var(--success-foreground);
-
-	--color-border: var(--border);
-	--color-ring: var(--ring);
+  --radius: var(--radius);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-overlay: var(--overlay);
+  --color-overlay-foreground: var(--overlay-foreground);
+  --color-input: var(--input);
+  --color-input-foreground: var(--input-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-border: var(--border);
+  --color-ring: var(--ring);
 }
 
 @utility status-focused {
-	@apply ring-offset-background ring-2 ring-offset-2 outline-none;
+  @apply ring-offset-background ring-2 ring-offset-2 outline-none;
 }
 
 @utility status-disabled {
-	@apply cursor-not-allowed opacity-50;
+  @apply cursor-not-allowed opacity-50;
 }
 
 @utility status-pending {
-	@apply cursor-wait opacity-75;
+  @apply cursor-wait opacity-75;
 }
 
 @custom-variant hover-safe {
-	@media (hover: hover) and (pointer: fine) {
-		&:hover {
-			@slot;
-		}
-
-		&:hover::before,
-		&:hover::after {
-			@slot;
-		}
-	}
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @slot;
+    }
+
+    &:hover::before,
+    &:hover::after {
+      @slot;
+    }
+  }
 }
 
 @layer base {
-	* {
-		@apply border-border outline-ring/50;
-	}
+  * {
+    @apply border-border outline-ring/50;
+  }
 
-	body {
-		@apply relative bg-background text-foreground;
-	}
+  body {
+    @apply bg-background text-foreground relative;
+  }
 
-	.root {
-		@apply antialiased isolate;
-	}
+  .root {
+    @apply isolate antialiased;
+  }
 }