@skylab-kulubu/skylcn-ui 0.1.0

package/dist/lib/theme-script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-script.js","sourceRoot":"","sources":["../../src/lib/theme-script.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAChD,MAAM,CAAC,MAAM,kBAAkB,GAAG,eAAe,CAAC;AAClD,MAAM,CAAC,MAAM,WAAW,GAAG,+BAA+B,CAAC;AAE3D,MAAM,MAAM,GAAG,8EAA8E,iBAAiB,oDAAoD,WAAW,yEAAyE,kBAAkB,gFAAgF,CAAC;AAEzV;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAsB;IACvD,OAAO,iBAAQ,KAAK,EAAE,KAAK,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAAC;AAC/E,CAAC"}

package/dist/lib/theme.d.ts

@@ -0,0 +1,13 @@
+import { type ThemePreference } from './theme-script.js';
+export type { ThemePreference };
+/**
+ * The reader's theme choice: dark (the default), light, or following the
+ * system. It is remembered, written to `data-theme` on <html>, and changed
+ * with a short cross-fade. Pair it with <ThemeScript /> so pages open in the
+ * right theme without a flash.
+ */
+export declare function useTheme(): {
+    theme: ThemePreference;
+    setTheme: (next: ThemePreference) => void;
+};
+//# sourceMappingURL=theme.d.ts.map

package/dist/lib/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"AAGA,OAAO,EAAkC,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzF,YAAY,EAAE,eAAe,EAAE,CAAC;AA8ChC;;;;;GAKG;AACH,wBAAgB,QAAQ;;qBAiBc,eAAe;EAWpD"}

package/dist/lib/theme.js

@@ -0,0 +1,78 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+import { LIGHT_QUERY, THEME_STORAGE_KEY } from './theme-script.js';
+function readPreference() {
+    try {
+        const saved = window.localStorage.getItem(THEME_STORAGE_KEY);
+        if (saved === 'dark' || saved === 'light' || saved === 'system')
+            return saved;
+    }
+    catch {
+        // Storage can be unavailable; fall back to the default.
+    }
+    return 'dark';
+}
+function resolve(preference) {
+    return preference === 'light' ||
+        (preference === 'system' && window.matchMedia(LIGHT_QUERY).matches)
+        ? 'light'
+        : 'dark';
+}
+/**
+ * Writes the theme to <html>. With `animate`, the page cross-fades through a
+ * view transition where the browser has one and motion is welcome; otherwise
+ * the colours switch at once. Colour transitions are held off either way.
+ */
+function apply(preference, animate) {
+    const root = document.documentElement;
+    const next = resolve(preference);
+    if (root.dataset.theme === next)
+        return;
+    const swap = () => {
+        root.dataset.theme = next;
+    };
+    const settle = () => root.classList.remove('skylcn-theme-switching');
+    root.classList.add('skylcn-theme-switching');
+    const reduce = root.dataset.motion === 'reduced' ||
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (animate && !reduce && typeof document.startViewTransition === 'function') {
+        document.startViewTransition(swap).finished.finally(settle);
+        return;
+    }
+    swap();
+    requestAnimationFrame(() => requestAnimationFrame(settle));
+}
+/**
+ * The reader's theme choice: dark (the default), light, or following the
+ * system. It is remembered, written to `data-theme` on <html>, and changed
+ * with a short cross-fade. Pair it with <ThemeScript /> so pages open in the
+ * right theme without a flash.
+ */
+export function useTheme() {
+    const [theme, setThemeState] = useState('dark');
+    useEffect(() => {
+        const saved = readPreference();
+        setThemeState(saved);
+        apply(saved, false);
+    }, []);
+    useEffect(() => {
+        if (theme !== 'system')
+            return;
+        const query = window.matchMedia(LIGHT_QUERY);
+        const onChange = () => apply('system', true);
+        query.addEventListener('change', onChange);
+        return () => query.removeEventListener('change', onChange);
+    }, [theme]);
+    const setTheme = useCallback((next) => {
+        setThemeState(next);
+        apply(next, true);
+        try {
+            window.localStorage.setItem(THEME_STORAGE_KEY, next);
+        }
+        catch {
+            // Not remembering is fine.
+        }
+    }, []);
+    return { theme, setTheme };
+}
+//# sourceMappingURL=theme.js.map

package/dist/lib/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"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"}

package/dist/lib/use-pending-indicator.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether to show a busy indicator for work that may finish at once: it
+ * appears only after `delay` ms, and once shown stays for at least `minimum`
+ * ms, so quick actions never flash a loader.
+ */
+export declare function usePendingIndicator(pending: boolean, delay?: number, minimum?: number): boolean;
+//# sourceMappingURL=use-pending-indicator.d.ts.map

package/dist/lib/use-pending-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pending-indicator.d.ts","sourceRoot":"","sources":["../../src/lib/use-pending-indicator.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,SAAM,EAAE,OAAO,SAAM,WAoB/E"}

package/dist/lib/use-pending-indicator.js

@@ -0,0 +1,27 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+/**
+ * Whether to show a busy indicator for work that may finish at once: it
+ * appears only after `delay` ms, and once shown stays for at least `minimum`
+ * ms, so quick actions never flash a loader.
+ */
+export function usePendingIndicator(pending, delay = 150, minimum = 400) {
+    const [shown, setShown] = useState(false);
+    const shownAt = useRef(0);
+    useEffect(() => {
+        if (pending && !shown) {
+            const timer = setTimeout(() => {
+                shownAt.current = Date.now();
+                setShown(true);
+            }, delay);
+            return () => clearTimeout(timer);
+        }
+        if (!pending && shown) {
+            const left = minimum - (Date.now() - shownAt.current);
+            const timer = setTimeout(() => setShown(false), Math.max(0, left));
+            return () => clearTimeout(timer);
+        }
+    }, [pending, shown, delay, minimum]);
+    return shown;
+}
+//# sourceMappingURL=use-pending-indicator.js.map

package/dist/lib/use-pending-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pending-indicator.js","sourceRoot":"","sources":["../../src/lib/use-pending-indicator.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,OAAgB,EAAE,KAAK,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG;IAC9E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACtB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;gBAC7B,QAAQ,CAAC,IAAI,CAAC,CAAC;YACjB,CAAC,EAAE,KAAK,CAAC,CAAC;YACV,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,CAAC,OAAO,IAAI,KAAK,EAAE,CAAC;YACtB,MAAM,IAAI,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;YACtD,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;YACnE,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAErC,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/lib/use-reduced-motion.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether motion should be reduced, from the system setting or the in-product
+ * one (`data-motion="reduced"`). For motion driven from script, such as chart
+ * drawing; CSS motion follows the tokens on its own.
+ */
+export declare function useReducedMotion(): boolean;
+//# sourceMappingURL=use-reduced-motion.d.ts.map

package/dist/lib/use-reduced-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reduced-motion.d.ts","sourceRoot":"","sources":["../../src/lib/use-reduced-motion.ts"],"names":[],"mappings":"AAwBA;;;;GAIG;AACH,wBAAgB,gBAAgB,YAE/B"}

package/dist/lib/use-reduced-motion.js

@@ -0,0 +1,28 @@
+'use client';
+import { useSyncExternalStore } from 'react';
+const QUERY = '(prefers-reduced-motion: reduce)';
+function subscribe(onChange) {
+    const query = window.matchMedia(QUERY);
+    query.addEventListener('change', onChange);
+    const observer = new MutationObserver(onChange);
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-motion'],
+    });
+    return () => {
+        query.removeEventListener('change', onChange);
+        observer.disconnect();
+    };
+}
+function read() {
+    return document.documentElement.dataset.motion === 'reduced' || window.matchMedia(QUERY).matches;
+}
+/**
+ * Whether motion should be reduced, from the system setting or the in-product
+ * one (`data-motion="reduced"`). For motion driven from script, such as chart
+ * drawing; CSS motion follows the tokens on its own.
+ */
+export function useReducedMotion() {
+    return useSyncExternalStore(subscribe, read, () => false);
+}
+//# sourceMappingURL=use-reduced-motion.js.map

package/dist/lib/use-reduced-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reduced-motion.js","sourceRoot":"","sources":["../../src/lib/use-reduced-motion.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7C,MAAM,KAAK,GAAG,kCAAkC,CAAC;AAEjD,SAAS,SAAS,CAAC,QAAoB;IACrC,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACvC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3C,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAChD,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;QACzC,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,aAAa,CAAC;KACjC,CAAC,CAAC;IACH,OAAO,GAAG,EAAE;QACV,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC9C,QAAQ,CAAC,UAAU,EAAE,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,IAAI;IACX,OAAO,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;AACnG,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,oBAAoB,CAAC,SAAS,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}

package/dist/styles/theme.css

@@ -0,0 +1,368 @@
+/*
+ * skylcn-ui Tailwind 4 theme. Apps import it right after Tailwind:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@skylab-kulubu/skylcn-ui/theme.css';
+ *
+ * It brings the tokens, maps them onto Tailwind's theme, and points Tailwind at
+ * the package's compiled components so their classes are generated.
+ */
+
+@import 'tw-animate-css';
+@import './tokens.css';
+
+@source '../';
+
+@custom-variant dark (&:not(:where([data-theme='light'], [data-theme='light'] *)));
+
+/* motion-reduce also answers the in-product setting, data-motion="reduced" on <html> */
+@custom-variant motion-reduce {
+  @media (prefers-reduced-motion: reduce) {
+    @slot;
+  }
+  &:where([data-motion='reduced'] *) {
+    @slot;
+  }
+}
+@custom-variant light (&:where([data-theme='light'], [data-theme='light'] *));
+
+/* Base UI state attributes, matched the same way shadcn's base styles do */
+@custom-variant data-open {
+  &:where([data-state='open']),
+  &:where([data-open]:not([data-open='false'])) {
+    @slot;
+  }
+}
+@custom-variant data-closed {
+  &:where([data-state='closed']),
+  &:where([data-closed]:not([data-closed='false'])) {
+    @slot;
+  }
+}
+@custom-variant data-checked {
+  &:where([data-state='checked']),
+  &:where([data-checked]:not([data-checked='false'])) {
+    @slot;
+  }
+}
+@custom-variant data-unchecked {
+  &:where([data-state='unchecked']),
+  &:where([data-unchecked]:not([data-unchecked='false'])) {
+    @slot;
+  }
+}
+@custom-variant data-selected {
+  &:where([data-selected='true']),
+  &:where([data-selected]:not([data-selected='false'])) {
+    @slot;
+  }
+}
+@custom-variant data-highlighted {
+  &:where([data-highlighted]:not([data-highlighted='false'])) {
+    @slot;
+  }
+}
+@custom-variant data-disabled {
+  &:where([data-disabled='true']),
+  &:where([data-disabled]:not([data-disabled='false'])) {
+    @slot;
+  }
+}
+@custom-variant data-pressed {
+  &:where([data-pressed]:not([data-pressed='false'])) {
+    @slot;
+  }
+}
+@custom-variant data-horizontal {
+  &:where([data-orientation='horizontal']) {
+    @slot;
+  }
+}
+@custom-variant data-vertical {
+  &:where([data-orientation='vertical']) {
+    @slot;
+  }
+}
+
+@theme inline {
+  --color-skylab-300: var(--skylab-300);
+  --color-skylab-400: var(--skylab-400);
+  --color-skylab-500: var(--skylab-500);
+  --color-skylab-600: var(--skylab-600);
+  --color-skylab-700: var(--skylab-700);
+  --color-skylab-800: var(--skylab-800);
+  --color-skylab-900: var(--skylab-900);
+
+  --color-sidebar: var(--sidebar);
+  --color-background: var(--background);
+  --color-sheet: var(--sheet);
+  --color-popover: var(--popover);
+  --color-card: var(--card);
+
+  --color-foreground: var(--foreground);
+  --color-foreground-strong: var(--foreground-strong);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle-foreground: var(--subtle-foreground);
+  --color-faint-foreground: var(--faint-foreground);
+  --color-popover-foreground: var(--foreground);
+  --color-card-foreground: var(--foreground);
+
+  --color-muted: var(--muted);
+  --color-accent: var(--accent);
+  --color-accent-strong: var(--accent-strong);
+  --color-accent-foreground: var(--foreground-strong);
+  --color-secondary: var(--muted);
+  --color-border: var(--border);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-strong: var(--border-strong);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-ring: var(--ring);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+  --color-chart-grid: var(--chart-grid);
+  --color-chart-axis: var(--chart-axis);
+  --color-chart-surface: var(--chart-surface);
+
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+
+  --text-2xs: var(--type-2xs);
+  --text-2xs--line-height: var(--type-2xs-leading);
+  --text-3xs: var(--type-3xs);
+  --text-3xs--line-height: var(--type-3xs-leading);
+  --tracking-label: var(--letter-spacing-label);
+
+  --ease-enter: var(--motion-ease-enter);
+  --ease-exit: var(--motion-ease-exit);
+  --ease-spring: var(--motion-ease-spring);
+
+  --shadow-overlay: var(--elevation-overlay);
+}
+
+@keyframes skylcn-shimmer-block {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes skylcn-shimmer-text {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+/* Entrances. The travel comes from the motion tokens, so reduced motion leaves a plain fade. */
+@keyframes skylcn-enter {
+  from {
+    opacity: 0;
+    translate: 0 var(--skylcn-enter-shift, var(--motion-shift));
+  }
+}
+
+@utility enter-rise {
+  animation: skylcn-enter var(--motion-duration-base) var(--motion-ease-enter) backwards;
+}
+
+@utility enter-rise-lg {
+  --skylcn-enter-shift: var(--motion-shift-lg);
+  animation: skylcn-enter var(--motion-duration-slow) var(--motion-ease-enter) backwards;
+}
+
+@utility enter-fade {
+  --skylcn-enter-shift: 0px;
+  animation: skylcn-enter var(--motion-duration-base) var(--motion-ease-enter) backwards;
+}
+
+/*
+ * useTheme swaps the theme inside a view transition: the page cross-fades as a
+ * whole, and per-element colour transitions are held off so nothing lags behind.
+ */
+:root.skylcn-theme-switching,
+:root.skylcn-theme-switching * {
+  transition: none !important;
+}
+:root.skylcn-theme-switching::view-transition-old(root),
+:root.skylcn-theme-switching::view-transition-new(root) {
+  animation-duration: var(--motion-duration-slow);
+  animation-timing-function: var(--motion-ease-exit);
+}
+
+/* Keyboard focus scrolled into view stays clear of AppShell's sticky phone bar and list header */
+@media (width < 48rem) {
+  html:has([data-slot='app-shell']) {
+    scroll-padding-top: 6.5rem;
+  }
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+  html {
+    font-family: var(--font-family-sans);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  /* Tailwind 4 leaves buttons on the default arrow; every product here points at what it can press */
+  :where(
+    button,
+    [role='button'],
+    [role='switch'],
+    [role='checkbox'],
+    [role='radio'],
+    [role='tab'],
+    [role='combobox'],
+    [role='option'],
+    [role='menuitem'],
+    [role='menuitemcheckbox'],
+    [role='menuitemradio'],
+    summary,
+    select,
+    a[href],
+    input[type='file']
+  ):not(:disabled, [aria-disabled='true'], [data-disabled]) {
+    cursor: pointer;
+  }
+  :where(button, [role='button'], [role='option'], [role='menuitem'], select, input):is(
+    :disabled,
+    [aria-disabled='true'],
+    [data-disabled]
+  ) {
+    cursor: not-allowed;
+  }
+}
+
+/* The crisp SKY LAB mark lighting up from its centre; SkylabLoader sets each path's delay */
+@layer components {
+  .skylcn-mark-radiate path {
+    opacity: 0.22;
+    animation: skylcn-mark-radiate 1.6s var(--motion-ease-enter) infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skylcn-mark-radiate path {
+      animation: none;
+      opacity: 1;
+    }
+  }
+  [data-motion='reduced'] .skylcn-mark-radiate path {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+@keyframes skylcn-mark-radiate {
+  0%,
+  100% {
+    opacity: 0.22;
+  }
+  35% {
+    opacity: 1;
+  }
+}
+
+/* A placeholder block for content that is loading (skeleton rows, avatars) */
+@utility shimmer-block {
+  background-color: var(--muted);
+  background-image: linear-gradient(
+    110deg,
+    transparent 0%,
+    color-mix(in oklab, var(--foreground) 12%, transparent) 45%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: skylcn-shimmer-block 1.8s ease-in-out infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background-image: none;
+  }
+  &:where([data-motion='reduced'] *) {
+    animation: none;
+    background-image: none;
+  }
+}
+
+/* A light band travelling across text, for "loading…" labels */
+@utility shimmer-text {
+  background-image: linear-gradient(
+    100deg,
+    currentColor 35%,
+    color-mix(in oklab, currentColor 35%, var(--foreground-strong)) 50%,
+    currentColor 65%
+  );
+  background-size: 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: skylcn-shimmer-text 2s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+  &:where([data-motion='reduced'] *) {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+@utility scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) transparent;
+
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border: 2px solid transparent;
+    border-radius: 9999px;
+    background-clip: padding-box;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover);
+  }
+}
+
+@utility scrollbar-hidden {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}