@wpmoo/ui 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/js/sidebar.js

@@ -1,3 +1,8 @@
+/*!
+ * Moo UI sidebar.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
+ * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
 const instances = new WeakMap();
 
 export default class Sidebar {
@@ -39,7 +44,8 @@ export default class Sidebar {
     instances.set(element, this);
     this._bindEvents();
     this._restoreState();
-    this._element.setAttribute("data-moo-sidebar-ready", "");
+    this._scrollActiveItemIntoView();
+    this._element.setAttribute("data-sidebar-ready", "");
     this._observeDirection();
   }
 
@@ -51,15 +57,15 @@ export default class Sidebar {
     this._directionObserver?.disconnect();
     this._closeFlyouts();
     this._element
-      .querySelectorAll("[data-moo-sidebar-dropdown-positioned]")
+      .querySelectorAll("[data-sidebar-dropdown-positioned]")
       .forEach((item) => this._clearDropdownPosition(item));
     this._element
-      .querySelectorAll("[data-moo-sidebar-tooltip]")
+      .querySelectorAll("[data-sidebar-tooltip]")
       .forEach((control) => this._disposeTooltip(control));
     this._offcanvas?.dispose();
     this._offcanvas = null;
     this._offcanvasTrigger = null;
-    this._element.removeAttribute("data-moo-sidebar-ready");
+    this._element.removeAttribute("data-sidebar-ready");
     instances.delete(this._element);
   }
 
@@ -79,7 +85,7 @@ export default class Sidebar {
   }
 
   _isCollapsed() {
-    return this._isDesktop() && this._element.dataset.mooSidebarState === "collapsed";
+    return this._isDesktop() && this._element.dataset.sidebarState === "collapsed";
   }
 
   _trigger(name, detail = {}) {
@@ -108,7 +114,7 @@ export default class Sidebar {
   }
 
   _restoreState() {
-    const key = this._element.dataset.mooSidebarKey;
+    const key = this._element.dataset.sidebarKey;
     let stored = null;
     if (key) {
       try {
@@ -120,19 +126,55 @@ export default class Sidebar {
     const initial =
       stored === "collapsed" || stored === "expanded"
         ? stored
-        : this._element.dataset.mooSidebarState === "collapsed"
+        : this._element.dataset.sidebarState === "collapsed"
           ? "collapsed"
           : "expanded";
     this._setState(initial, false, false);
   }
 
+  _scrollActiveItemIntoView() {
+    const activeRoute = this._element.querySelector(
+      '[data-slot="sidebar-content"] a[data-slot="sidebar-menu-button"][aria-current="page"], ' +
+        '[data-slot="sidebar-content"] a.sidebar-menu-button[aria-current="page"], ' +
+        '[data-slot="sidebar-content"] a.sidebar-menu-button.active'
+    );
+    const active = activeRoute || this._element.querySelector(
+      '[data-slot="sidebar-content"] [data-slot="sidebar-menu-button"][aria-current="page"], ' +
+        '[data-slot="sidebar-content"] .sidebar-menu-button[aria-current="page"], ' +
+        '[data-slot="sidebar-content"] .sidebar-menu-button.active'
+    );
+    const content = active?.closest?.('[data-slot="sidebar-content"]');
+    if (!active || !content || content.clientHeight <= 0) {
+      return;
+    }
+    const maxScrollTop = content.scrollHeight - content.clientHeight;
+    if (maxScrollTop <= 0) {
+      return;
+    }
+
+    const contentRect = content.getBoundingClientRect();
+    const activeRect = active.getBoundingClientRect();
+    if (contentRect.height <= 0 || activeRect.height <= 0) {
+      return;
+    }
+
+    const targetScrollTop =
+      content.scrollTop +
+      activeRect.top -
+      contentRect.top -
+      (content.clientHeight - activeRect.height) / 2;
+    content.scrollTop = Math.round(
+      Math.min(Math.max(targetScrollTop, 0), maxScrollTop)
+    );
+  }
+
   _setState(state, persist = true, emit = true) {
     const next = state === "collapsed" ? "collapsed" : "expanded";
-    const previous = this._element.dataset.mooSidebarState;
-    this._element.dataset.mooSidebarState = next;
-    const key = this._element.dataset.mooSidebarKey;
+    const previous = this._element.dataset.sidebarState;
+    this._element.dataset.sidebarState = next;
+    const key = this._element.dataset.sidebarKey;
     if (key === "catalog-shell") {
-      this._root.dataset.mooSidebarCatalogState = next;
+      this._root.dataset.sidebarCatalogState = next;
     }
     if (persist && key) {
       try {
@@ -155,16 +197,16 @@ export default class Sidebar {
 
   _toggle() {
     this._setState(
-      this._element.dataset.mooSidebarState === "collapsed" ? "expanded" : "collapsed"
+      this._element.dataset.sidebarState === "collapsed" ? "expanded" : "collapsed"
     );
   }
 
   _syncControls() {
     const expanded = this._isDesktop()
-      ? this._element.dataset.mooSidebarState === "expanded"
+      ? this._element.dataset.sidebarState === "expanded"
       : this._sidebar?.classList.contains("show") || false;
     this._element
-      .querySelectorAll("[data-moo-sidebar-trigger], [data-moo-sidebar-rail]")
+      .querySelectorAll("[data-sidebar-trigger], [data-sidebar-rail]")
       .forEach((control) => control.setAttribute("aria-expanded", String(expanded)));
   }
 
@@ -186,7 +228,7 @@ export default class Sidebar {
     if (!item) {
       return;
     }
-    delete item.dataset.mooSidebarDropdownPositioned;
+    delete item.dataset.sidebarDropdownPositioned;
     item.style.removeProperty("--moo-sidebar-dropdown-block-start");
     item.style.removeProperty("--moo-sidebar-dropdown-inline-start");
   }
@@ -237,7 +279,7 @@ export default class Sidebar {
       "--moo-sidebar-dropdown-inline-start",
       `${Math.round(inlineStart)}px`
     );
-    item.dataset.mooSidebarDropdownPositioned = "";
+    item.dataset.sidebarDropdownPositioned = "";
   }
 
   _removeFlyoutPortal() {
@@ -281,7 +323,7 @@ export default class Sidebar {
     flyout.removeAttribute("id");
     flyout.classList.remove("collapse", "show", "collapsing");
     flyout.classList.add("sidebar-menu-flyout");
-    flyout.dataset.mooSidebarFlyout = "";
+    flyout.dataset.sidebarFlyout = "";
     flyout.removeAttribute("style");
     flyout.style.setProperty("--moo-sidebar-flyout-block-start", `${Math.round(rect.top)}px`);
     flyout.style.setProperty(
@@ -328,7 +370,7 @@ export default class Sidebar {
     }
     const collapsed = this._isCollapsed();
     const placement = this._root.dir === "rtl" ? "left" : "right";
-    this._element.querySelectorAll("[data-moo-sidebar-tooltip]").forEach((control) => {
+    this._element.querySelectorAll("[data-sidebar-tooltip]").forEach((control) => {
       this._disposeTooltip(control);
       if (
         !collapsed ||
@@ -343,7 +385,7 @@ export default class Sidebar {
       // state-driven Sidebar tooltip instead.
       const anchor = this._tooltipAnchor(control);
       new Tooltip(anchor, {
-        title: control.getAttribute("data-moo-sidebar-tooltip"),
+        title: control.getAttribute("data-sidebar-tooltip"),
         placement,
         container: "body",
         trigger: "hover focus",
@@ -386,7 +428,7 @@ export default class Sidebar {
     this._listen(this._window, "resize", () => {
       this._closeFlyouts();
       this._element
-        .querySelectorAll("[data-moo-sidebar-dropdown-positioned]")
+        .querySelectorAll("[data-sidebar-dropdown-positioned]")
         .forEach((item) => this._clearDropdownPosition(item));
       this._syncControls();
       this._syncTooltips();
@@ -397,18 +439,18 @@ export default class Sidebar {
     if (!(target instanceof this._window.Element) || !this._element.contains(target)) {
       return null;
     }
-    if (target.matches('[data-bs-toggle="dropdown"][data-moo-sidebar-tooltip]')) {
+    if (target.matches('[data-bs-toggle="dropdown"][data-sidebar-tooltip]')) {
       return target;
     }
     return target.querySelector?.(
-      '[data-bs-toggle="dropdown"][data-moo-sidebar-tooltip]'
+      '[data-bs-toggle="dropdown"][data-sidebar-tooltip]'
     ) || null;
   }
 
   _handleControlClick(event) {
     const target = event.target;
     const control = target instanceof this._window.Element
-      ? target.closest("[data-moo-sidebar-trigger], [data-moo-sidebar-rail]")
+      ? target.closest("[data-sidebar-trigger], [data-sidebar-rail]")
       : null;
     if (!control || !this._element.contains(control)) {
       return;
@@ -419,7 +461,7 @@ export default class Sidebar {
       this._toggle();
       return;
     }
-    if (!control.matches("[data-moo-sidebar-trigger]")) {
+    if (!control.matches("[data-sidebar-trigger]")) {
       return;
     }
     const sidebar = this._document.getElementById(control.getAttribute("aria-controls"));
@@ -478,7 +520,7 @@ export default class Sidebar {
     }
     const preferred =
       this._document.querySelector(
-        '[data-slot="sidebar-wrapper"][data-moo-sidebar-key]'
+        '[data-slot="sidebar-wrapper"][data-sidebar-key]'
       ) || this._document.querySelector('[data-slot="sidebar-wrapper"]');
     if (preferred !== this._element) {
       return;

package/dist/js/slider.js

@@ -0,0 +1,324 @@
+/*!
+ * Moo UI slider.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
+ * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+const instances = new WeakMap();
+
+function asNumber(value, fallback) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+
+function inputMinimum(input) {
+  return asNumber(input.min, 0);
+}
+
+function inputMaximum(input) {
+  return asNumber(input.max, 100);
+}
+
+function inputStep(input) {
+  if (!input.step || input.step === "any") {
+    return 1;
+  }
+  const step = Number(input.step);
+  return Number.isFinite(step) && step > 0 ? step : 1;
+}
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function decimalPlaces(value) {
+  const text = String(value);
+  if (!text.includes(".")) {
+    return 0;
+  }
+  return text.split(".").at(-1).length;
+}
+
+function snapToStep(value, input) {
+  const min = inputMinimum(input);
+  const max = inputMaximum(input);
+  if (input.step === "any") {
+    return Number(clamp(value, min, max).toFixed(4));
+  }
+  const step = inputStep(input);
+  const snapped = min + Math.round((value - min) / step) * step;
+  const precision = Math.max(decimalPlaces(step), decimalPlaces(min));
+  return clamp(Number(snapped.toFixed(precision)), min, max);
+}
+
+function valuePercent(input) {
+  const min = inputMinimum(input);
+  const max = inputMaximum(input);
+  if (max <= min) {
+    return 0;
+  }
+  return ((asNumber(input.value, min) - min) / (max - min)) * 100;
+}
+
+function displayValue(input) {
+  return input.value || String(inputMinimum(input));
+}
+
+export default class MooSlider {
+  static getInstance(element) {
+    return element?.nodeType === 1 ? instances.get(element) || null : null;
+  }
+
+  static getOrCreateInstance(element, config = {}) {
+    return MooSlider.getInstance(element) || new MooSlider(element, config);
+  }
+
+  constructor(element, config = {}) {
+    if (element?.nodeType !== 1 || !element.matches("[data-slider]")) {
+      throw new TypeError("MooSlider requires a [data-slider] root element.");
+    }
+    const existing = instances.get(element);
+    if (existing) {
+      return existing;
+    }
+
+    this._element = element;
+    this._document = element.ownerDocument;
+    this._window = this._document.defaultView;
+    this._config = { ...config };
+    this._listeners = [];
+    this._dragListeners = [];
+    this._draggingInput = null;
+    this._disposed = false;
+    this._inputs = Array.from(
+      element.querySelectorAll(':scope input[type="range"][data-slider-input]')
+    );
+    this._track = element.querySelector("[data-slider-track]");
+    this._output = element.querySelector("[data-slider-output]");
+
+    if (this._inputs.length < 1 || this._inputs.length > 2) {
+      throw new TypeError("MooSlider requires one or two native range inputs.");
+    }
+    if (!this._track) {
+      throw new TypeError("MooSlider requires a [data-slider-track] element.");
+    }
+
+    instances.set(element, this);
+    this._bindEvents();
+    this._sync();
+  }
+
+  dispose() {
+    if (this._disposed) return;
+    this._disposed = true;
+    this._clearDragListeners();
+    this._clearPointerFocus();
+    this._listeners.forEach(({ target, type, handler, options }) => {
+      target.removeEventListener(type, handler, options);
+    });
+    this._listeners = [];
+    if (instances.get(this._element) === this) {
+      instances.delete(this._element);
+    }
+  }
+
+  _listen(target, type, handler, options) {
+    if (!target) {
+      return;
+    }
+    target.addEventListener(type, handler, options);
+    this._listeners.push({ target, type, handler, options });
+  }
+
+  _listenDuringDrag(target, type, handler, options) {
+    if (!target) {
+      return;
+    }
+    target.addEventListener(type, handler, options);
+    this._dragListeners.push({ target, type, handler, options });
+  }
+
+  _clearDragListeners() {
+    this._dragListeners.forEach(({ target, type, handler, options }) => {
+      target.removeEventListener(type, handler, options);
+    });
+    this._dragListeners = [];
+    this._draggingInput = null;
+    this._element.removeAttribute("data-slider-dragging");
+  }
+
+  _bindEvents() {
+    this._inputs.forEach((input) => {
+      this._listen(input, "input", () => this._sync(input));
+      this._listen(input, "change", () => {
+        this._sync(input);
+        this._trigger("change");
+      });
+      this._listen(input, "keydown", () => this._clearPointerFocus());
+      this._listen(input, "focusout", () => this._clearPointerFocus());
+    });
+    const forms = new Set(
+      this._inputs
+        .map((input) => input.form || input.closest?.("form"))
+        .filter(Boolean),
+    );
+    forms.forEach((form) => {
+      this._listen(form, "reset", () => {
+        this._window.setTimeout(() => this._sync(), 0);
+      });
+    });
+    this._listen(this._track, "pointerdown", (event) => this._handleTrackPointer(event));
+  }
+
+  _trigger(name) {
+    this._element.dispatchEvent(
+      new this._window.CustomEvent(`${name}.moo.slider`, {
+        bubbles: true,
+      })
+    );
+  }
+
+  _isRange() {
+    return this._inputs.length === 2;
+  }
+
+  _sync(changedInput = null) {
+    if (this._isRange()) {
+      const [startInput, endInput] = this._inputs;
+      const start = asNumber(startInput.value, inputMinimum(startInput));
+      const end = asNumber(endInput.value, inputMaximum(endInput));
+      if (start > end) {
+        if (changedInput === endInput) {
+          endInput.value = startInput.value;
+        } else {
+          startInput.value = endInput.value;
+        }
+      }
+      this._writeFill(valuePercent(startInput), valuePercent(endInput));
+      this._writeOutput(`${displayValue(startInput)} - ${displayValue(endInput)}`);
+      this._syncAria(startInput);
+      this._syncAria(endInput);
+      return;
+    }
+
+    const input = this._inputs[0];
+    this._writeFill(0, valuePercent(input));
+    this._writeOutput(displayValue(input));
+    this._syncAria(input);
+  }
+
+  _syncAria(input) {
+    input.setAttribute("aria-valuemin", String(inputMinimum(input)));
+    input.setAttribute("aria-valuemax", String(inputMaximum(input)));
+    input.setAttribute("aria-valuenow", displayValue(input));
+  }
+
+  _writeFill(start, end) {
+    const clampedStart = clamp(start, 0, 100);
+    const clampedEnd = clamp(end, 0, 100);
+    this._element.style.setProperty("--moo-slider-start", `${Math.min(clampedStart, clampedEnd)}%`);
+    this._element.style.setProperty("--moo-slider-end", `${Math.max(clampedStart, clampedEnd)}%`);
+  }
+
+  _writeOutput(value) {
+    if (this._output) {
+      this._output.textContent = value;
+    }
+  }
+
+  _handleTrackPointer(event) {
+    if (event.button !== undefined && event.button !== 0) {
+      return;
+    }
+    const enabledInputs = this._inputs.filter((input) => !input.disabled);
+    if (!enabledInputs.length) {
+      return;
+    }
+    event.preventDefault?.();
+    const percent = this._pointerPercent(event);
+    const target = this._nearestInput(percent * 100, enabledInputs);
+    this._setPointerFocus();
+    this._startDrag(target, event);
+    this._setInputFromPointer(target, event);
+  }
+
+  _setPointerFocus() {
+    this._element.setAttribute("data-slider-pointer-focus", "true");
+  }
+
+  _clearPointerFocus() {
+    this._element.removeAttribute("data-slider-pointer-focus");
+  }
+
+  _startDrag(input, event) {
+    this._clearDragListeners();
+    this._draggingInput = input;
+    this._element.setAttribute("data-slider-dragging", "true");
+    this._track.setPointerCapture?.(event.pointerId);
+
+    const pointerId = event.pointerId;
+    const samePointer = (nextEvent) => pointerId === undefined || nextEvent.pointerId === pointerId;
+    const onMove = (moveEvent) => {
+      if (!samePointer(moveEvent) || this._draggingInput !== input) {
+        return;
+      }
+      moveEvent.preventDefault?.();
+      this._setInputFromPointer(input, moveEvent);
+    };
+    const onEnd = (endEvent) => {
+      if (!samePointer(endEvent) || this._draggingInput !== input) {
+        return;
+      }
+      endEvent.preventDefault?.();
+      this._setInputFromPointer(input, endEvent, false);
+      input.dispatchEvent(new this._window.Event("change", { bubbles: true }));
+      this._track.releasePointerCapture?.(pointerId);
+      this._clearDragListeners();
+    };
+
+    this._listenDuringDrag(this._document, "pointermove", onMove);
+    this._listenDuringDrag(this._document, "pointerup", onEnd);
+    this._listenDuringDrag(this._document, "pointercancel", onEnd);
+  }
+
+  _setInputFromPointer(input, event, emitInput = true) {
+    const percent = this._pointerPercent(event);
+    const min = inputMinimum(input);
+    const max = inputMaximum(input);
+    input.value = String(snapToStep(min + percent * (max - min), input));
+    input.focus({ preventScroll: true });
+    this._sync(input);
+    if (emitInput) {
+      input.dispatchEvent(new this._window.Event("input", { bubbles: true }));
+    }
+  }
+
+  _pointerPercent(event) {
+    const rect = this._track.getBoundingClientRect();
+    const orientation = this._element.dataset.sliderOrientation || "horizontal";
+    if (orientation === "vertical") {
+      return clamp((rect.bottom - event.clientY) / (rect.height || 1), 0, 1);
+    }
+    return this._horizontalPointerPercent(event, rect);
+  }
+
+  _horizontalPointerPercent(event, rect) {
+    const direction = this._window.getComputedStyle?.(this._element).direction;
+    const offset = direction === "rtl" ? rect.right - event.clientX : event.clientX - rect.left;
+    return clamp(offset / (rect.width || 1), 0, 1);
+  }
+
+  _nearestInput(percent, inputs) {
+    if (inputs.length === 1) {
+      return inputs[0];
+    }
+    const [startInput, endInput] = inputs;
+    const startPercent = valuePercent(startInput);
+    const endPercent = valuePercent(endInput);
+    const startDistance = Math.abs(startPercent - percent);
+    const endDistance = Math.abs(endPercent - percent);
+    if (startDistance === endDistance) {
+      return percent >= startPercent ? endInput : startInput;
+    }
+    return endDistance < startDistance ? endInput : startInput;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -27,11 +27,22 @@
     "./moo-ui.min.css": "./dist/assets/css/moo-ui.min.css",
     "./moo.css": "./dist/assets/css/moo.css",
     "./moo.min.css": "./dist/assets/css/moo.min.css",
+    "./moo-ui.js": "./dist/js/moo-ui.js",
+    "./moo-ui.min.js": "./dist/js/moo-ui.min.js",
     "./combobox.js": "./dist/js/combobox.js",
     "./sidebar.js": "./dist/js/sidebar.js",
     "./context-menu.js": "./dist/js/context-menu.js",
     "./datatable.js": "./dist/js/datatable.js",
-    "./scss/facade-settings": "./scss/_facade-settings.scss",
+    "./slider.js": "./dist/js/slider.js",
+    "./chart.js": "./dist/js/chart.js",
+    "./chart.min.js": "./dist/js/chart.min.js",
+    "./datepicker.js": "./dist/js/datepicker.js",
+    "./datepicker.min.js": "./dist/js/datepicker.min.js",
+    "./scss/config": "./scss/_config.scss",
+    "./scss/moo-ui": "./scss/moo-ui.scss",
+    "./scss/moo-core": "./scss/moo-core.scss",
+    "./scss/components": "./scss/_components.scss",
+    "./scss/settings": "./scss/_settings.scss",
     "./certification.json": "./certification.json",
     "./package.json": "./package.json"
   },
@@ -40,12 +51,19 @@
     "dist/assets/css/moo-ui.min.css",
     "dist/assets/css/moo.css",
     "dist/assets/css/moo.min.css",
+    "dist/js/moo-ui.js",
+    "dist/js/moo-ui.min.js",
     "dist/js/combobox.js",
     "dist/js/sidebar.js",
     "dist/js/context-menu.js",
     "dist/js/datatable.js",
-    "scss/_facade-settings.scss",
-    "scss/settings/_facade_public.scss",
+    "dist/js/slider.js",
+    "dist/js/chart.js",
+    "dist/js/chart.min.js",
+    "dist/js/datepicker.js",
+    "dist/js/datepicker.min.js",
+    "scss/*.scss",
+    "scss/**/*.scss",
     "certification.json",
     "README.md",
     "LICENSE",
@@ -75,6 +93,8 @@
   },
   "devDependencies": {
     "axe-core": "4.13.0",
+    "chart.js": "4.5.1",
+    "esbuild": "0.28.1",
     "wrangler": "^4.120.0"
   }
 }

package/scss/_components.scss

@@ -0,0 +1,73 @@
+// Bootstrap components
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms/labels";
+@import "bootstrap/scss/forms/form-text";
+@import "bootstrap/scss/forms/form-control";
+@import "bootstrap/scss/forms/form-select";
+@import "bootstrap/scss/forms/form-check";
+@import "bootstrap/scss/forms/input-group";
+@import "bootstrap/scss/forms/validation";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/helpers/color-bg";
+
+// Moo component support
+@import "foundations/focus";
+@import "utilities/scroll_fade";
+
+// Moo components
+@import "components/kbd";
+@import "components/input";
+@import "components/textarea";
+@import "components/select";
+@import "components/input_group";
+@import "components/button";
+@import "components/close_button";
+@import "components/button_group";
+@import "components/toggle_group";
+@import "components/card";
+@import "components/table";
+@import "components/dropdown";
+@import "components/menubar";
+@import "components/avatar";
+@import "components/navigation";
+@import "components/skeleton";
+@import "components/sidebar";
+@import "components/alert";
+@import "components/breadcrumb";
+@import "components/pagination";
+@import "components/badge";
+@import "components/progress";
+@import "components/slider";
+@import "components/separator";
+@import "components/checkbox";
+@import "components/radio_group";
+@import "components/switch";
+@import "components/spinner";
+@import "components/accordion";
+@import "components/tabs";
+@import "components/collapsible";
+@import "components/tooltip";
+@import "components/popover";
+@import "components/dialog";
+@import "components/sheet";
+@import "components/toast";
+@import "components/field";
+@import "components/datepicker";
+@import "components/combobox";
+@import "components/context-menu";
+@import "components/datatable";