ciderui 0.1.0

package/src/css/components/input-group.css

@@ -0,0 +1,48 @@
+/* ========== INPUT GROUP ========== */
+.input-group {
+  @apply relative;
+  & .input-group-icon {
+    @apply absolute top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground;
+    & svg { @apply size-4; }
+  }
+  & .input-group-icon-left {
+    @apply left-3;
+  }
+  & .input-group-icon-right {
+    @apply right-3;
+  }
+  & .input-group-text {
+    @apply absolute top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-[13px];
+  }
+  & .input-group-text-left {
+    @apply left-3;
+  }
+  & .input-group-text-right {
+    @apply right-3;
+  }
+}
+.input-group-attached {
+  @apply flex items-stretch;
+  & .input-group-addon {
+    @apply flex items-center border px-3 text-[13px] text-muted-foreground;
+    background: var(--muted);
+  }
+  & .input-group-addon:first-child {
+    @apply rounded-l-xl border-r-0;
+  }
+  & .input-group-addon:last-child {
+    @apply rounded-r-xl border-l-0;
+  }
+  & .input, & input {
+    @apply flex-1;
+  }
+  & .input:not(:first-child):not(:last-child), & input:not(:first-child):not(:last-child) {
+    @apply rounded-none;
+  }
+  & .input:first-child, & input:first-child {
+    @apply rounded-r-none;
+  }
+  & .input:last-child, & input:last-child {
+    @apply rounded-l-none;
+  }
+}

package/src/css/components/input-otp.css

@@ -0,0 +1,22 @@
+/* ========== INPUT OTP ========== */
+.input-otp {
+  @apply flex items-center gap-2;
+}
+.input-otp-slot {
+  @apply flex size-12 items-center justify-center rounded-[12px] border text-[17px] font-medium text-foreground;
+  border-color: var(--input-border);
+  background: var(--surface-1);
+  caret-color: transparent;
+  transition: border-color 0.2s var(--apple-ease);
+  &:focus-within, &[data-active] {
+    border-color: var(--primary);
+  }
+}
+.input-otp-separator {
+  @apply flex items-center text-muted-foreground;
+  & span { @apply mx-0.5 text-xl; }
+}
+.input-otp[data-error] .input-otp-slot {
+  border-color: var(--destructive);
+  color: var(--destructive);
+}

package/src/css/components/item.css

@@ -0,0 +1,43 @@
+/* ========== ITEM ========== */
+.item {
+  @apply flex items-center gap-4 rounded-2xl p-4 text-[13px];
+  transition: background-color 0.15s var(--apple-ease);
+  & .item-icon {
+    @apply flex size-9 shrink-0 items-center justify-center rounded-[10px] text-muted-foreground;
+    background: var(--surface-3);
+    & svg { @apply size-4; }
+  }
+  & .item-avatar {
+    @apply size-10 shrink-0 rounded-full object-cover;
+  }
+  & .item-content {
+    @apply flex flex-1 flex-col gap-0.5;
+    & h3 { @apply text-sm font-medium leading-snug; }
+    & p { @apply text-[13px] text-muted-foreground; }
+  }
+  & .item-action {
+    @apply flex items-center gap-2 text-muted-foreground;
+    & svg { @apply size-4; }
+  }
+}
+.item-outline {
+  box-shadow: var(--float-ring);
+}
+.item-muted {
+  background: var(--surface-1);
+}
+a.item, button.item {
+  @apply cursor-pointer;
+  &:hover { background: var(--surface-2); }
+  &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+}
+.item-group {
+  @apply flex flex-col rounded-2xl bg-card;
+  box-shadow: var(--shadow-sm), var(--panel-ring);
+  & .item { @apply rounded-none; }
+  & .item:first-child { @apply rounded-t-2xl; }
+  & .item:last-child { @apply rounded-b-2xl; }
+  & .item + .item {
+    border-top: 1px solid var(--surface-3);
+  }
+}

package/src/css/components/kbd.css

@@ -0,0 +1,7 @@
+/* ========== KBD ========== */
+.kbd {
+  @apply inline-flex h-5 min-w-5 items-center justify-center rounded-[5px] px-1.5 text-[11px] font-medium text-muted-foreground;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
+  background: var(--surface-3);
+  box-shadow: 0 1px 0 var(--panel-border), var(--float-ring);
+}

package/src/css/components/label.css

@@ -0,0 +1,4 @@
+/* ========== LABEL ========== */
+.label {
+  @apply block text-[13px] font-medium text-foreground;
+}

package/src/css/components/pagination.css

@@ -0,0 +1,15 @@
+/* ========== PAGINATION ========== */
+.pagination {
+  @apply flex items-center gap-0.5;
+}
+.pagination-item {
+  @apply inline-flex h-9 min-w-9 items-center justify-center rounded-[10px] text-[13px] font-medium text-muted-foreground cursor-pointer;
+  transition: all 0.2s var(--apple-ease);
+  &:hover { background: var(--surface-3); }
+  &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; }
+  &[data-active] {
+    @apply bg-primary text-primary-foreground;
+    box-shadow: var(--shadow-sm);
+  }
+  &:disabled { @apply pointer-events-none opacity-50; }
+}

package/src/css/components/popover.css

@@ -0,0 +1,19 @@
+/* ========== POPOVER ========== */
+.popover {
+  @apply relative inline-block;
+}
+.popover-content {
+  @apply absolute z-50 mt-2 min-w-[220px] rounded-2xl p-4;
+  display: none;
+  background: var(--glass-bg-opaque);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--shadow-lg), var(--float-ring);
+  animation: slideUp 0.2s var(--apple-spring);
+  &[data-open] { display: block; }
+}
+.popover-top {
+  & .popover-content {
+    @apply bottom-full top-auto mb-2 mt-0;
+  }
+}

package/src/css/components/progress.css

@@ -0,0 +1,18 @@
+/* ========== PROGRESS ========== */
+.progress {
+  @apply h-1.5 w-full overflow-hidden rounded-full;
+  background: var(--surface-4);
+  & .progress-bar {
+    @apply h-full rounded-full bg-primary;
+    transition: width 0.5s var(--apple-spring);
+  }
+}
+.progress-sm {
+  @apply h-1;
+}
+.progress-indeterminate {
+  & .progress-bar {
+    @apply w-1/3;
+    animation: indeterminate 1.5s ease-in-out infinite;
+  }
+}

package/src/css/components/radio.css

@@ -0,0 +1,13 @@
+/* ========== RADIO ========== */
+.radio {
+  @apply appearance-none size-[18px] shrink-0 rounded-full border bg-card cursor-pointer;
+  border-color: var(--input-border);
+  transition: all 0.2s var(--apple-ease);
+  &:checked {
+    border-color: var(--primary);
+    border-width: 5px;
+  }
+  &:hover:not(:focus-visible):not(:checked) { border-color: var(--input-border-hover); }
+  &:focus-visible { box-shadow: 0 0 0 4px oklch(from var(--primary) l c h / 0.15); }
+  &:disabled { @apply cursor-not-allowed opacity-50; }
+}

package/src/css/components/scroll-area.css

@@ -0,0 +1,24 @@
+/* ========== SCROLL AREA ========== */
+.scroll-area {
+  overflow: auto;
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background: var(--surface-6);
+    border: 1px solid transparent;
+    background-clip: content-box;
+    &:hover { background: var(--surface-7); background-clip: content-box; }
+  }
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface-6) transparent;
+}
+.scroll-area-horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+}

package/src/css/components/separator.css

@@ -0,0 +1,19 @@
+/* ========== SEPARATOR ========== */
+.separator {
+  @apply shrink-0;
+  background: var(--panel-border);
+}
+.separator:not(.separator-vertical) {
+  @apply h-px w-full;
+}
+.separator-vertical {
+  @apply w-px self-stretch;
+}
+.separator-label {
+  @apply flex items-center gap-3 text-xs text-muted-foreground;
+  &::before, &::after {
+    content: "";
+    @apply h-px flex-1;
+    background: var(--panel-border);
+  }
+}

package/src/css/components/sheet.css

@@ -0,0 +1,46 @@
+/* ========== SHEET ========== */
+dialog.sheet,
+.sheet {
+  @apply fixed m-0 h-full bg-card text-card-foreground;
+  max-height: 100vh;
+  max-width: min(420px, 85vw);
+  box-shadow: var(--shadow-xl);
+  &::backdrop {
+    background: var(--backdrop-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+  }
+  &[open] { animation: sheetSlideIn 0.35s var(--apple-spring); }
+  /* Right (default) */
+  &:not(.sheet-left) {
+    @apply right-0 top-0;
+    border-left: 1px solid var(--panel-border);
+    &[open] { animation-name: sheetSlideInRight; }
+  }
+  /* Left */
+  &.sheet-left {
+    @apply left-0 top-0;
+    border-right: 1px solid var(--panel-border);
+    &[open] { animation-name: sheetSlideInLeft; }
+  }
+  & > header {
+    @apply px-6 py-5;
+    border-bottom: 1px solid var(--panel-border);
+    & h2 { @apply text-[20px] font-semibold tracking-tight text-foreground; }
+    & p { @apply mt-1 text-[13px] text-muted-foreground; }
+  }
+  & > section {
+    @apply overflow-y-auto px-6 py-5;
+  }
+  & > footer {
+    @apply px-6 py-4;
+    border-top: 1px solid var(--panel-border);
+  }
+  & .sheet-close {
+    @apply absolute right-4 top-4 rounded-full p-1.5 text-muted-foreground cursor-pointer;
+    transition: all 0.2s var(--apple-ease);
+    &:hover { @apply text-foreground bg-accent; }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; }
+    & svg { @apply size-4; }
+  }
+}

package/src/css/components/sidebar.css

@@ -0,0 +1,32 @@
+/* ========== SIDEBAR ========== */
+.sidebar {
+  @apply fixed left-0 top-0 flex h-full w-[260px] flex-col;
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border-right: 1px solid var(--panel-border);
+  & .sidebar-header {
+    @apply flex items-center gap-2.5 px-5 py-4;
+    border-bottom: 1px solid var(--panel-border);
+    & h2 { @apply text-[13px] font-semibold tracking-tight; }
+  }
+  & .sidebar-content {
+    @apply flex-1 overflow-y-auto px-3 py-3;
+  }
+  & .sidebar-section {
+    @apply mb-4;
+    & h3 { @apply mb-1 px-2 text-[11px] font-semibold text-muted-foreground; }
+  }
+  & .sidebar-item {
+    @apply flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[13px] text-foreground/70 cursor-pointer;
+    transition: all 0.15s var(--apple-ease);
+    & svg { @apply size-4 text-muted-foreground; }
+    &:hover { background: var(--surface-3); @apply text-foreground; }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+    &[data-active] { background: var(--surface-4); @apply text-foreground font-medium; }
+  }
+  & .sidebar-footer {
+    @apply px-5 py-4;
+    border-top: 1px solid var(--panel-border);
+  }
+}

package/src/css/components/skeleton.css

@@ -0,0 +1,9 @@
+/* ========== SKELETON ========== */
+.skeleton,
+.skeleton-circle {
+  @apply animate-pulse rounded-lg;
+  background: var(--surface-4);
+}
+.skeleton-circle {
+  @apply rounded-full;
+}

package/src/css/components/slider.css

@@ -0,0 +1,48 @@
+/* ========== SLIDER ========== */
+.slider {
+  @apply w-full cursor-pointer appearance-none rounded-full;
+  height: 4px;
+  background: var(--surface-5);
+  accent-color: var(--primary);
+  &::-webkit-slider-thumb {
+    @apply appearance-none rounded-full bg-white;
+    width: 22px;
+    height: 22px;
+    box-shadow: 0 1px 4px oklch(0 0 0 / 0.15), 0 0 0 1px oklch(0 0 0 / 0.04);
+    transition: box-shadow 0.2s var(--apple-ease), transform 0.2s var(--apple-ease);
+  }
+  &::-webkit-slider-thumb:hover {
+    box-shadow: 0 2px 8px oklch(0 0 0 / 0.2), 0 0 0 1px oklch(0 0 0 / 0.04);
+    transform: scale(1.05);
+  }
+  &::-webkit-slider-thumb:active {
+    box-shadow: 0 1px 3px oklch(0 0 0 / 0.2), 0 0 0 1px oklch(0 0 0 / 0.04);
+    transform: scale(0.95);
+  }
+  &::-moz-range-thumb {
+    @apply rounded-full bg-white;
+    width: 22px;
+    height: 22px;
+    border: none;
+    box-shadow: 0 1px 4px oklch(0 0 0 / 0.15), 0 0 0 1px oklch(0 0 0 / 0.04);
+    transition: box-shadow 0.2s var(--apple-ease), transform 0.2s var(--apple-ease);
+  }
+  &::-moz-range-thumb:hover {
+    box-shadow: 0 2px 8px oklch(0 0 0 / 0.2), 0 0 0 1px oklch(0 0 0 / 0.04);
+    transform: scale(1.05);
+  }
+  &::-moz-range-thumb:active {
+    box-shadow: 0 1px 3px oklch(0 0 0 / 0.2), 0 0 0 1px oklch(0 0 0 / 0.04);
+    transform: scale(0.95);
+  }
+  &:focus-visible {
+    outline: none;
+    &::-webkit-slider-thumb {
+      box-shadow: 0 0 0 4px oklch(from var(--primary) l c h / 0.15), 0 1px 4px oklch(0 0 0 / 0.15), 0 0 0 1px oklch(0 0 0 / 0.04);
+    }
+    &::-moz-range-thumb {
+      box-shadow: 0 0 0 4px oklch(from var(--primary) l c h / 0.15), 0 1px 4px oklch(0 0 0 / 0.15), 0 0 0 1px oklch(0 0 0 / 0.04);
+    }
+  }
+  &:disabled { @apply cursor-not-allowed opacity-50; }
+}

package/src/css/components/spinner.css

@@ -0,0 +1,12 @@
+/* ========== SPINNER ========== */
+.spinner {
+  @apply inline-block size-5;
+  border-radius: 50%;
+  color: var(--muted-foreground);
+  background: conic-gradient(transparent 150deg, currentColor);
+  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
+  mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
+  animation: spin 1s linear infinite;
+}
+.spinner-sm { @apply size-4; }
+.spinner-lg { @apply size-8; }

package/src/css/components/switch.css

@@ -0,0 +1,28 @@
+/* ========== SWITCH ========== */
+.switch {
+  @apply appearance-none relative shrink-0 rounded-full cursor-pointer;
+  width: 51px;
+  height: 31px;
+  background: oklch(0.862 0.007 286.02);
+  transition: background-color 0.25s var(--apple-ease);
+  &::after {
+    content: "";
+    @apply absolute rounded-full bg-white;
+    top: 2px;
+    left: 2px;
+    width: 27px;
+    height: 27px;
+    box-shadow: 0 2px 4px oklch(0 0 0 / 0.15), 0 1px 2px oklch(0 0 0 / 0.1);
+    transition: transform 0.25s var(--apple-spring);
+  }
+  &:checked {
+    background: var(--primary);
+    &::after { transform: translateX(20px); }
+  }
+  &:focus-visible { box-shadow: 0 0 0 4px oklch(from var(--primary) l c h / 0.15); }
+  &:disabled { @apply cursor-not-allowed opacity-50; }
+  &:is(.dark *) {
+    background: oklch(0.350 0.004 285.99);
+    &:checked { background: var(--primary); }
+  }
+}

package/src/css/components/table.css

@@ -0,0 +1,39 @@
+/* ========== TABLE ========== */
+.table {
+  @apply overflow-x-auto rounded-2xl bg-card;
+  box-shadow: var(--shadow-sm), var(--panel-ring);
+  & table {
+    @apply w-full text-left text-[13px];
+  }
+  & thead tr {
+    border-bottom: 1px solid var(--panel-border);
+    background: var(--surface-1);
+  }
+  & th {
+    @apply px-4 py-3 text-xs font-semibold text-muted-foreground;
+  }
+  & tbody {
+    & tr + tr {
+      border-top: 1px solid var(--surface-3);
+    }
+  }
+  & td {
+    @apply px-4 py-3;
+  }
+  & tbody tr {
+    transition: background-color 0.15s var(--apple-ease);
+    &:hover {
+      background: var(--surface-1);
+    }
+  }
+  & tfoot tr {
+    border-top: 1px solid var(--panel-border);
+    background: var(--surface-1);
+  }
+}
+.table-striped {
+  & tbody tr:hover { background: inherit; }
+  & tbody tr:nth-child(even) {
+    background: var(--surface-1);
+  }
+}

package/src/css/components/tabs.css

@@ -0,0 +1,44 @@
+/* ========== TABS ========== */
+.tabs {
+  /* wrapper */
+}
+.tabs-list {
+  @apply flex;
+  border-bottom: 1px solid var(--panel-border);
+}
+.tabs-trigger {
+  @apply relative px-4 py-2.5 text-[13px] font-medium text-muted-foreground cursor-pointer;
+  transition: color 0.2s var(--apple-ease);
+  &:hover { @apply text-foreground; }
+  &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+  &[data-active] {
+    color: var(--primary);
+    &::after {
+      content: "";
+      @apply absolute bottom-0 left-0 h-0.5 w-full;
+      border-radius: 1px 1px 0 0;
+      background: var(--primary);
+    }
+  }
+}
+.tabs-content {
+  @apply py-4;
+  &:not([data-active]) { @apply hidden; }
+}
+/* Pill variant — Apple segmented control */
+.tabs-pill {
+  & .tabs-list {
+    @apply inline-flex rounded-[10px] border-0 p-1;
+    background: var(--surface-4);
+  }
+  & .tabs-trigger {
+    @apply rounded-[7px] px-3.5 py-1.5 text-[13px];
+    transition: all 0.2s var(--apple-spring);
+    &[data-active] {
+      @apply text-foreground;
+      background: var(--card);
+      box-shadow: var(--shadow-sm);
+      &::after { display: none; }
+    }
+  }
+}

package/src/css/components/theme-switcher.css

@@ -0,0 +1,17 @@
+/* ========== THEME SWITCHER ========== */
+.theme-switcher {
+  @apply inline-flex items-center rounded-[10px] p-0.5;
+  background: var(--surface-4);
+  & button {
+    @apply flex size-8 items-center justify-center rounded-[7px] text-muted-foreground cursor-pointer;
+    transition: all 0.2s var(--apple-spring);
+    & svg { @apply size-4; }
+    &:hover { @apply text-foreground; }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; }
+    &[data-active] {
+      @apply text-foreground;
+      background: var(--card);
+      box-shadow: var(--shadow-sm);
+    }
+  }
+}

package/src/css/components/toast.css

@@ -0,0 +1,22 @@
+/* ========== TOAST ========== */
+.toast {
+  @apply flex w-[360px] items-start gap-3 rounded-2xl p-4;
+  background: var(--glass-bg-opaque);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--shadow-lg), var(--float-ring);
+  animation: slideUp 0.3s var(--apple-spring);
+  & svg:first-child { @apply mt-0.5 size-5 shrink-0; }
+  & .toast-title { @apply text-[13px] font-semibold text-foreground; }
+  & .toast-message { @apply mt-0.5 text-[13px] text-muted-foreground; }
+  & .toast-close {
+    @apply shrink-0 text-muted-foreground cursor-pointer;
+    transition: color 0.15s var(--apple-ease);
+    &:hover { @apply text-foreground; }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; border-radius: 4px; }
+    & svg { @apply size-4; }
+  }
+}
+.toast-container {
+  @apply fixed bottom-4 right-4 z-[100] flex flex-col gap-2.5;
+}

package/src/css/components/toggle.css

@@ -0,0 +1,34 @@
+/* ========== TOGGLE ========== */
+.toggle {
+  @apply inline-flex size-9 items-center justify-center rounded-[8px] text-muted-foreground cursor-pointer;
+  transition: all 0.2s var(--apple-ease);
+  &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; }
+  &:hover {
+    @apply text-foreground;
+    background: var(--surface-3);
+  }
+  &:active { transform: scale(var(--apple-press-scale)); }
+  &[data-active], &[aria-pressed="true"] {
+    @apply text-foreground;
+    background: var(--surface-4);
+  }
+  &:disabled, &[disabled] { @apply pointer-events-none opacity-50; }
+  & svg { @apply size-4; }
+}
+.toggle-sm { @apply size-8; & svg { @apply size-3.5; } }
+.toggle-lg { @apply size-10; & svg { @apply size-5; } }
+.toggle-outline {
+  box-shadow: inset 0 0 0 1px var(--border-solid);
+  &[data-active], &[aria-pressed="true"] {
+    @apply text-primary;
+    background: oklch(from var(--primary) l c h / 0.06);
+    box-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.2);
+  }
+}
+.toggle-group {
+  @apply inline-flex items-center gap-0.5 rounded-[10px] p-0.5;
+  background: var(--surface-3);
+  & .toggle {
+    @apply rounded-[7px];
+  }
+}

package/src/css/components/tooltip.css

@@ -0,0 +1,66 @@
+/* ========== TOOLTIP ========== */
+.tooltip {
+  @apply relative inline-block;
+}
+.tooltip-content {
+  @apply pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-medium;
+  --tooltip-bg: oklch(0.200 0.004 285.99);
+  --tooltip-fg: white;
+  background: var(--tooltip-bg);
+  color: var(--tooltip-fg);
+  box-shadow: var(--shadow-md);
+  opacity: 0;
+  transform: translateX(-50%) translateY(2px);
+  transition: opacity 0.15s var(--apple-ease), transform 0.15s var(--apple-ease);
+  .tooltip:hover > & {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  &::after {
+    content: "";
+    @apply absolute left-1/2 top-full -translate-x-1/2;
+    border: 4px solid transparent;
+    border-top-color: var(--tooltip-bg);
+  }
+  &:is(.dark *) {
+    --tooltip-bg: oklch(0.940 0.003 285.66);
+    --tooltip-fg: oklch(0.200 0.004 285.99);
+  }
+}
+.tooltip-bottom {
+  & .tooltip-content {
+    @apply bottom-auto top-full mb-0 mt-2;
+    transform: translateX(-50%) translateY(-2px);
+    .tooltip:hover > & { transform: translateX(-50%) translateY(0); }
+    &::after {
+      @apply top-auto bottom-full;
+      border-top-color: transparent;
+      border-bottom-color: var(--tooltip-bg);
+    }
+  }
+}
+
+.tooltip-right {
+  & .tooltip-content {
+    @apply bottom-auto left-full top-1/2 mb-0 ml-2 -translate-y-1/2 translate-x-0;
+    transform: translateY(-50%) translateX(-2px);
+    .tooltip:hover > & { transform: translateY(-50%) translateX(0); }
+    &::after {
+      @apply left-auto right-full top-1/2 -translate-y-1/2;
+      border-top-color: transparent;
+      border-right-color: var(--tooltip-bg);
+    }
+  }
+}
+.tooltip-left {
+  & .tooltip-content {
+    @apply bottom-auto right-full left-auto top-1/2 mb-0 mr-2 -translate-y-1/2 translate-x-0;
+    transform: translateY(-50%) translateX(2px);
+    .tooltip:hover > & { transform: translateY(-50%) translateX(0); }
+    &::after {
+      @apply right-auto left-full top-1/2 -translate-y-1/2;
+      border-top-color: transparent;
+      border-left-color: var(--tooltip-bg);
+    }
+  }
+}