@fea-ui/styles 0.0.0-canary.2

package/src/components/link.css

@@ -0,0 +1,35 @@
+/** Base Styling */
+.link {
+	@apply text-link underline-offset-2 inline-flex items-center;
+
+	@apply transition-[color] motion-reduce:transition-none;
+
+	&:visited {
+		@apply text-link/70;
+	}
+
+	&:hover {
+		@apply text-link/80;
+	}
+
+	&[data-active] {
+		@apply font-semibold;
+	}
+
+	&:disabled,
+	[data-disabled] {
+		@apply text-muted cursor-not-allowed;
+	}
+
+	svg {
+		@apply size-4 text-muted-foreground;
+	}
+}
+
+.link--underline {
+	@apply underline;
+}
+
+.link--no-underline {
+	@apply no-underline;
+}

package/src/components/list.css

@@ -0,0 +1,8 @@
+/** Base Styling */
+.list {
+	@apply flex flex-col gap-1;
+}
+
+.list__item {
+	@apply cursor-pointer;
+}

package/src/components/menu.css

@@ -0,0 +1,48 @@
+.menu__positioner {
+	@apply outline-0;
+}
+
+.menu__popup {
+	@apply p-3 rounded;
+
+	@apply bg-overlay text-overlay-foreground shadow;
+
+	@apply transition-[transform,scale] motion-reduce:transition-none;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		@apply opacity-0 scale-90;
+	}
+}
+
+.menu__arrow {
+	@apply flex text-overlay size-6;
+
+	&[data-side="top"] {
+		@apply -bottom-3 rotate-180;
+	}
+
+	&[data-side="right"] {
+		@apply -start-3 rotate-90;
+	}
+
+	&[data-side="bottom"] {
+		@apply -top-3;
+	}
+
+	&[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;
+
+	&:focus {
+		@apply outline-none bg-secondary text-secondary-foreground;
+	}
+}
+
+.menu__separator {
+	@apply my-2 h-px bg-border;
+}

package/src/components/meter.css

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

package/src/components/navbar.css

@@ -0,0 +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;
+}
+
+.navbar__container {
+	@apply mx-auto flex w-full max-w-7xl items-center justify-between;
+}
+
+.navbar__content {
+	@apply flex items-center gap-2;
+}
+
+.navbar__toggle {
+	@apply md:hidden;
+
+	svg {
+		@apply size-5 me-2;
+	}
+}
+
+.navbar__list {
+	@apply flex items-center gap-4;
+}
+
+.navbar__list-item {
+	@apply list-none;
+}
+
+.navbar__menu {
+	@apply flex flex-col gap-1;
+}
+
+.navbar__menu-item {
+	@apply w-full list-none px-4 py-2;
+}

package/src/components/popover.css

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

package/src/components/progress.css

@@ -0,0 +1,72 @@
+/** Base Styling */
+.progress {
+	@apply grid grid-cols-2 items-center gap-1;
+}
+
+.progress__label {
+	@apply font-medium;
+}
+
+.progress__value {
+	@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;
+}
+
+.progress__indicator {
+	@apply block rounded;
+
+	@apply transition-[width] motion-reduce:transition-none;
+}
+
+/** Variants */
+.progress--primary .progress__track {
+	@apply bg-primary/10;
+}
+
+.progress--primary .progress__indicator {
+	@apply bg-primary;
+}
+
+.progress--secondary .progress__track {
+	@apply bg-secondary/10;
+}
+
+.progress--secondary .progress__indicator {
+	@apply bg-secondary;
+}
+
+.progress--success .progress__track {
+	@apply bg-success/10;
+}
+
+.progress--success .progress__indicator {
+	@apply bg-success;
+}
+
+.progress--danger .progress__track {
+	@apply bg-danger/10;
+}
+
+.progress--danger .progress__indicator {
+	@apply bg-danger;
+}
+
+/** Sizes */
+.progress--sm .progress__track {
+	@apply h-2;
+}
+
+.progress--sm .progress__label {
+	@apply text-sm;
+}
+
+.progress--md .progress__track {
+	@apply h-3;
+}
+
+.progress--lg .progress__track {
+	@apply h-4;
+}

package/src/components/radio.css

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

package/src/components/separator.css

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

package/src/components/sidebar.css

@@ -0,0 +1,80 @@
+.sidebar {
+	@apply flex h-full w-full;
+}
+
+.sidebar__panel {
+	@apply fixed top-0 left-0 h-full w-64;
+
+	@apply flex flex-col;
+
+	@apply bg-surface shadow-lg text-surface-foreground;
+
+	@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;
+}
+
+.sidebar__content {
+	@apply flex-1 p-4;
+}
+
+.sidebar__footer {
+	@apply border-t;
+	@apply p-4;
+}
+
+.sidebar__outlet {
+	@apply md:ml-64;
+
+	@apply transition-[margin] duration-300 ease-in-out motion-reduce:transition-none;
+}
+
+.sidebar__menu {
+	@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 transition-[background-color,color] motion-reduce:transition-none;
+
+	&.active {
+		@apply bg-primary/20 text-primary;
+	}
+}
+
+.sidebar__menu-label {
+	@apply py-2;
+	@apply text-sm font-medium text-muted-foreground;
+}
+
+/**
+ * State
+ */
+
+[data-open="false"] {
+	.sidebar__panel {
+		@apply -translate-x-full;
+	}
+
+	.sidebar__outlet {
+		@apply ml-0;
+	}
+}
+
+.sidebar__trigger {
+	@apply cursor-pointer;
+	@apply size-8 flex items-center justify-center;
+	@apply rounded border-border text-muted-foreground hover-safe:text-foreground;
+
+	@apply transition-[color] motion-reduce:transition-none;
+
+	:focus-visible {
+		@apply status-focused;
+	}
+}

package/src/components/slider.css

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

package/src/components/switch.css

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

package/src/components/table.css

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

package/src/components/tabs.css

@@ -0,0 +1,49 @@
+/** Base Styling */
+.tabs {
+	@apply bg-surface/50 text-secondary-foreground rounded border;
+}
+
+.tabs__list {
+	@apply bg-surface relative z-0 flex gap-1 rounded-t border-b px-1;
+}
+
+.tabs__tab {
+	@apply m-0 flex appearance-none items-center justify-center border-0 bg-transparent outline-none;
+	@apply text-muted-foreground break-keep whitespace-nowrap select-none hover-safe:text-foreground;
+	@apply h-8 px-2 py-0;
+
+	&[data-active] {
+		@apply text-foreground;
+	}
+
+	@media (hover: hover) {
+		&:hover {
+			@apply text-foreground;
+		}
+	}
+
+	&:focus-visible {
+		@apply relative;
+
+		&::before {
+			content: "";
+			@apply outline-primary absolute inset-x-0 inset-y-1 rounded outline-2 -outline-offset-1;
+		}
+	}
+}
+
+.tabs__indicator {
+	width: var(--active-tab-width);
+
+	translate: var(--active-tab-left) -50%;
+	@apply bg-primary absolute bottom-0 left-0 -z-10 h-px;
+	@apply transition-[translate,width] motion-reduce:transition-none;
+}
+
+.tabs__panel {
+	@apply relative flex h-32 items-center justify-center outline-none;
+
+	&:focus-visible {
+		@apply status-focused;
+	}
+}

package/src/components/text.css

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

package/src/components/toggle-button.css

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