agnosticui-core 2.0.0-alpha.2

package/dist/components/Sidebar/core/_Sidebar.js

@@ -0,0 +1,629 @@
+import { LitElement as g, css as h, html as d } from "lit";
+import { n as a } from "../../../property-CemaeiRl.js";
+var b = Object.defineProperty, o = (p, e, r, c) => {
+  for (var i = void 0, n = p.length - 1, s; n >= 0; n--)
+    (s = p[n]) && (i = s(e, r, i) || i);
+  return i && b(e, r, i), i;
+};
+const l = class l extends g {
+  constructor() {
+    super(), this._handleBackdropClick = () => {
+      this.open = !1, this._dispatchToggleEvent();
+    }, this._handleToggleClick = () => {
+      this.open = !this.open, this._dispatchToggleEvent();
+    }, this._handleHeaderToggleClick = () => {
+      this.disableCompactMode ? (this.open = !this.open, this._dispatchToggleEvent()) : (this.collapsed = !this.collapsed, this._dispatchCollapseEvent());
+    }, this._handleKeydown = (e) => {
+      e.key === "Escape" && this.open && (e.preventDefault(), this.open = !1, this._dispatchToggleEvent());
+    }, this.open = !1, this.collapsed = !1, this.position = "left", this.ariaLabel = "Navigation", this.variant = "default", this.noTransition = !1, this.width = void 0, this.disableCompactMode = !1, this.showMobileToggle = !0, this.mobileTogglePosition = "top-left", this.showHeaderToggle = !1;
+  }
+  /**
+   * Checks if the current viewport width is below the mobile breakpoint.
+   * 
+   * This helper ensures consistent viewport detection across the component.
+   * Called on-demand rather than using resize listeners to avoid memory overhead.
+   * 
+   * @returns true if viewport width is less than breakpoint, false otherwise
+   * @private
+   */
+  _isMobileViewport() {
+    return window.innerWidth < 1024;
+  }
+  /**
+   * Toggle the collapsed state (desktop rail mode)
+   */
+  toggleCollapse() {
+    this.collapsed = !this.collapsed, this._dispatchCollapseEvent();
+  }
+  /**
+   * Intelligent toggle that handles both mobile and desktop contexts.
+   * 
+   * **Behavior:**
+   * - Mobile (< breakpoint) + sidebar open: closes the sidebar overlay
+   * - Desktop (>= breakpoint): toggles collapsed state (rail mode)
+   * - Mobile (< breakpoint) + sidebar closed: toggles collapsed state
+   * 
+   * **When to use:**
+   * Use this method in custom header buttons when you want the sidebar to close
+   * on mobile when it's already open (dismissing the overlay), but toggle
+   * collapsed state on desktop or when closed on mobile.
+   * 
+   * **Comparison with built-in toggle:**
+   * - Built-in `showHeaderToggle`: Always toggles collapsed state (never closes on mobile)
+   * - `toggleResponsive()`: Closes overlay on mobile when open, otherwise toggles collapsed
+   * 
+   * **Resize awareness:**
+   * Checks viewport width on each invocation, ensuring correct behavior even
+   * after window resizes without requiring resize event listeners.
+   * 
+   * @example
+   * ```html
+   * <ag-sidebar id="sidebar">
+   *   <button slot="header" @click=${() => document.getElementById('sidebar').toggleResponsive()}>
+   *     Toggle
+   *   </button>
+   * </ag-sidebar>
+   * ```
+   * 
+   * @example
+   * ```typescript
+   * // In Lit component
+   * const sidebar = this.shadowRoot.querySelector('ag-sidebar');
+   * sidebar.toggleResponsive();
+   * ```
+   */
+  toggleResponsive() {
+    this.disableCompactMode ? (this.open = !this.open, this._dispatchToggleEvent()) : this._isMobileViewport() && this.open ? (this.open = !1, this._dispatchToggleEvent()) : (this.collapsed = !this.collapsed, this._dispatchCollapseEvent());
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeydown);
+  }
+  willUpdate(e) {
+    e.has("width") && (this.width ? this.style.setProperty("--ag-sidebar-width", this.width) : this.style.removeProperty("--ag-sidebar-width")), e.has("open") && (this.open ? (document.addEventListener("keydown", this._handleKeydown), this.updateComplete.then(() => this._trapFocus())) : (document.removeEventListener("keydown", this._handleKeydown), this._releaseFocus()));
+  }
+  _dispatchToggleEvent() {
+    const e = new CustomEvent("ag-sidebar-toggle", {
+      detail: { open: this.open },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(e), this.onToggle?.(e);
+  }
+  _dispatchCollapseEvent() {
+    const e = new CustomEvent("ag-sidebar-collapse", {
+      detail: { collapsed: this.collapsed },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(e), this.onCollapse?.(e);
+  }
+  _findMainContent() {
+    return this.closest("main") || this.parentElement?.querySelector("main") || document.querySelector("main") || document.body;
+  }
+  _trapFocus() {
+    const e = this._findMainContent();
+    e && e !== this && !e.contains(this) && (e.setAttribute("inert", ""), this._mainContentRef = e), this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector('button:not([disabled]), a[href], input:not([disabled]), [tabindex]:not([tabindex="-1"])')?.focus();
+    });
+  }
+  _releaseFocus() {
+    this._mainContentRef && (this._mainContentRef.removeAttribute("inert"), this._mainContentRef = void 0);
+  }
+  _handleSlotClick(e) {
+    const i = e.composedPath()[0].closest("[aria-expanded]");
+    if (i) {
+      const n = i.getAttribute("aria-expanded") === "true";
+      i.setAttribute("aria-expanded", String(!n));
+      const s = i.nextElementSibling;
+      s && s.tagName === "AG-SIDEBAR-NAV-SUBMENU" && (n ? s.removeAttribute("open") : s.setAttribute("open", ""));
+    }
+  }
+  _renderToggleIcon() {
+    return d`
+      <slot name="ag-toggle-icon">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M13.7314 1.00488C16.109 1.11926 18 2.98393 18 5.2666V12.7334C18 15.0898 15.9853 17 13.5 17H4.5C2.09247 17 0.126505 15.2074 0.00585938 12.9531L0 12.7334V5.2666C3.72355e-05 2.91022 2.01474 1 4.5 1H13.5L13.7314 1.00488ZM4.5 2.33301C2.79139 2.33301 1.40629 3.6466 1.40625 5.2666V12.7334C1.40629 14.3534 2.79139 15.667 4.5 15.667H4.625V2.33301H4.5ZM6.03125 15.667H13.5C15.2086 15.667 16.5937 14.3534 16.5938 12.7334V5.2666C16.5937 3.6466 15.2086 2.33301 13.5 2.33301H6.03125V15.667Z" fill="currentColor"/>
+        </svg>
+      </slot>
+    `;
+  }
+  render() {
+    return d`
+      <div part="ag-sidebar-backdrop" class="backdrop" @click=${this._handleBackdropClick} aria-hidden="true"></div>
+      
+      <button
+        part="ag-sidebar-toggle-button"
+        class="toggle-button ${this.mobileTogglePosition}"
+        @click=${this._handleToggleClick}
+        aria-label="${this.open ? "Close sidebar" : "Open sidebar"}"
+        aria-expanded="${this.open}"
+      >
+        ${this._renderToggleIcon()}
+      </button>
+
+      <aside part="ag-sidebar-container" class="sidebar-container" aria-label=${this.ariaLabel}>
+        <div part="ag-sidebar-header" class="sidebar-header">
+          ${this.showHeaderToggle ? d`
+            <div class="header-wrapper">
+              <div class="header-content">
+                <slot name="ag-header">
+                  <!-- Fallback: if no "header" slot, use composable parts -->
+                  <div class="header-layout">
+                    <div class="header-start">
+                      <slot name="ag-header-start"></slot>
+                    </div>
+                    <div class="header-end">
+                      <slot name="ag-header-end"></slot>
+                    </div>
+                  </div>
+                </slot>
+              </div>
+              <button
+                part="ag-sidebar-header-toggle"
+                class="header-toggle-button"
+                @click=${this._handleHeaderToggleClick}
+                aria-label="${this.collapsed ? "Expand sidebar" : "Close sidebar"}"
+              >
+                ${this._renderToggleIcon()}
+              </button>
+            </div>
+          ` : d`
+            <slot name="ag-header">
+              <!-- Fallback: if no "header" slot, use composable parts -->
+              <div class="header-layout">
+                <div class="header-start">
+                  <slot name="ag-header-start"></slot>
+                </div>
+                <div class="header-end">
+                  <div class="header-end-content">
+                    <slot name="ag-header-end"></slot>
+                  </div>
+                  <slot name="ag-header-toggle"></slot>
+                </div>
+              </div>
+            </slot>
+          `}
+        </div>
+        <div part="ag-sidebar-content" class="sidebar-content" @click=${this._handleSlotClick}>
+          <slot></slot>
+        </div>
+        <div part="ag-sidebar-footer" class="sidebar-footer">
+          <slot name="ag-footer"></slot>
+        </div>
+      </aside>
+    `;
+  }
+};
+l.styles = h`
+    :host {
+      display: block;
+      position: relative;
+      --ag-sidebar-width: 18rem;
+      --ag-sidebar-width-collapsed: 3rem;
+      --ag-sidebar-padding: var(--ag-space-2, 0.5rem);
+      --ag-sidebar-background: var(--ag-background-primary, #ffffff);
+      --ag-sidebar-border: var(--ag-border, #e5e7eb);
+      --ag-sidebar-transition-duration: var(--ag-motion-duration-normal, 200ms);
+      --ag-sidebar-transition-easing: var(--ag-motion-easing-standard, ease-in-out);
+      --ag-sidebar-z-index: var(--ag-z-sidebar, 1000);
+      --ag-sidebar-backdrop-z-index: var(--ag-z-sidebar-backdrop, 999);
+      --ag-sidebar-toggle-z-index: var(--ag-z-sidebar-toggle, 1001);
+
+    }
+
+    .sidebar-container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      background: var(--ag-sidebar-background);
+    }
+    
+    :host([collapsed]) {
+      overflow: visible;
+    }
+      
+    /* Allow popovers to escape sidebar in collapsed mode */
+    :host([collapsed]) .sidebar-content {
+      overflow: visible;
+      /* Center icon button items in the compact sidebar */
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    /* Set collapsed width globally so it applies before media queries kick in */
+    :host([collapsed]) .sidebar-container {
+      width: var(--ag-sidebar-width-collapsed);
+      overflow: visible;
+    }
+
+    /* Variant: Bordered */
+    :host([variant="bordered"]) .sidebar-container {
+      border-inline-end: 1px solid var(--ag-sidebar-border);
+    }
+    
+    :host([variant="bordered"][position="right"]) .sidebar-container {
+      border-inline-end: none;
+      border-inline-start: 1px solid var(--ag-sidebar-border);
+    }
+
+    /* Variant: Elevated */
+    :host([variant="elevated"]) .sidebar-container {
+      box-shadow: var(--ag-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+      z-index: 1;
+      border-inline-end: none;
+    }
+
+    /* No Transition */
+    :host([no-transition]) *,
+    :host([no-transition]) .sidebar-container,
+    :host([no-transition]) .backdrop,
+    :host([no-transition]) .header-content,
+    :host([no-transition]) .toggle-button {
+      transition: none !important;
+    }
+
+    .sidebar-header, .sidebar-footer {
+      padding-block: var(--ag-space-2);
+      padding-inline: var(--ag-space-4);
+      flex-shrink: 0;
+      transition: opacity var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing),
+                  padding var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+    }
+    .sidebar-header {
+      border-bottom: 1px solid var(--ag-sidebar-border);
+    }
+
+    .sidebar-footer {
+      border-top: 1px solid var(--ag-sidebar-border);
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    /* Collapsed state: fade out header content and footer */
+    :host([collapsed]) .header-content,
+    :host([collapsed]) .sidebar-footer {
+      opacity: 0;
+      pointer-events: none;
+    }
+    
+    /* Composable header layout system */
+    .header-layout {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--ag-space-2);
+      width: 100%;
+    }
+    :host([collapsed]) .header-layout {
+      gap: unset;
+    }
+
+    .header-start {
+      flex: 1;
+      min-width: 0; /* Allow text truncation */
+      overflow: hidden;
+      transition: opacity var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+    }
+
+    .header-end {
+      display: flex;
+      align-items: center;
+      gap: var(--ag-space-2);
+      flex-shrink: 0;
+      transition: opacity var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+    }
+
+    /* Collapsed state: hide start content and header-end-content, but keep ag-header-toggle visible */
+    :host([collapsed]) .header-start {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    :host([collapsed]) .header-end-content {
+      display: none;
+    }
+
+    :host([collapsed]) .header-layout {
+      justify-content: center;
+    }
+    
+    /* Header layout wrapper for showHeaderToggle. Base wrapper - no gap */
+    .header-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    /* Gap only when expanded */
+    :host(:not([collapsed])) .header-wrapper {
+      gap: var(--ag-space-2);
+    }
+
+    .header-content {
+      flex: 1;
+      min-width: 0;
+      opacity: 1;
+      transition: opacity var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+    }
+    
+    /* Collapsed state: fade out header content */
+    :host([collapsed]) .header-content {
+      display: none;
+    }
+    
+    /* Collapsed state: center the toggle button */
+    :host([collapsed]) .header-wrapper {
+      justify-content: center;
+    }
+    
+    /* Built-in header toggle button styling */
+    .header-toggle-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--ag-space-7);
+      height: var(--ag-space-7);
+      border: 1px solid var(--ag-border-subtle);
+      border-radius: 0.375rem;
+      background: var(--ag-background-secondary);
+      color: var(--ag-text-primary);
+      cursor: pointer;
+      transition: background 0.15s;
+      flex-shrink: 0;
+    }
+    
+    .header-toggle-button:hover {
+      background: var(--ag-background-tertiary);
+    }
+    
+    .header-toggle-button:active {
+      transform: scale(0.95);
+    }
+    
+    .header-toggle-button svg {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+    }
+    
+
+
+    .sidebar-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--ag-sidebar-padding);
+    }
+
+    .backdrop {
+      display: none;
+    }
+
+    .toggle-button {
+      display: none;
+    }
+
+    /* ===========================================
+       MOBILE: Below breakpoint
+       Overlay drawer that slides in/out
+       =========================================== */
+    @media (max-width: 1023px) {
+      .sidebar-container {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        z-index: var(--ag-sidebar-z-index);
+        transition: transform var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+      }
+      
+      /* Full width in mobile when NOT collapsed */
+      :host(:not([collapsed])) .sidebar-container {
+        width: var(--ag-sidebar-width);
+      }
+      
+      :host([position="left"]) .sidebar-container {
+        inset-inline-start: 0;
+        transform: translateX(-100%);
+      }
+      
+      :host([position="right"]) .sidebar-container {
+        inset-inline-end: 0;
+        transform: translateX(100%);
+      }
+
+      /* RTL Support */
+      :host-context([dir="rtl"]):host([position="left"]) .sidebar-container {
+        transform: translateX(100%);
+      }
+      :host-context([dir="rtl"]):host([position="right"]) .sidebar-container {
+        transform: translateX(-100%);
+      }
+      
+      :host([open]) .sidebar-container {
+        transform: translateX(0);
+      }
+
+      .backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: var(--ag-sidebar-backdrop-z-index);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+      }
+
+      :host([open]) .backdrop {
+        display: block;
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    /* ===========================================
+       GLOBAL: Toggle Button Styles
+       Shared between mobile overlay and desktop disable-compact-mode
+       =========================================== */
+    :host([show-mobile-toggle]) .toggle-button {
+      display: flex;
+      position: fixed;
+      width: var(--ag-space-8);
+      height: var(--ag-space-8);
+      border-radius: 50%;
+      background: var(--ag-sidebar-background);
+      border: 1px solid var(--ag-sidebar-border);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      cursor: pointer;
+      z-index: var(--ag-sidebar-toggle-z-index);
+      align-items: center;
+      justify-content: center;
+      transition: opacity var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+      
+      /* Default hidden on desktop unless disable-compact-mode is active */
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    /* Show toggle on mobile */
+    @media (max-width: 1023px) {
+      :host([show-mobile-toggle]) .toggle-button {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    /* Show toggle on desktop ONLY if disable-compact-mode is active */
+    @media (min-width: 1024px) {
+      :host([disable-compact-mode][show-mobile-toggle]) .toggle-button {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    /* Always hide toggle when sidebar is open - consumer's header button takes over */
+    :host([show-mobile-toggle][open]) .toggle-button {
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+
+    .toggle-button:hover {
+      background: var(--ag-background-hover, #f3f4f6);
+    }
+
+    .toggle-button:active {
+      transform: scale(0.95);
+    }
+
+    .toggle-button svg {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+    }
+    /* Ensure consumer-provided slotted SVGs match the fallback sizing */
+    .toggle-button ::slotted(svg) {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+      display: block;
+    }
+
+    .toggle-button.top-left { top: var(--ag-space-4); inset-inline-start: var(--ag-space-4); }
+    .toggle-button.top-right { top: var(--ag-space-4); inset-inline-end: var(--ag-space-4); }
+    .toggle-button.bottom-left { bottom: var(--ag-space-4); inset-inline-start: var(--ag-space-4); }
+    .toggle-button.bottom-right { bottom: var(--ag-space-4); inset-inline-end: var(--ag-space-4); }
+
+    /* ===========================================
+       DESKTOP: At/above breakpoint
+       Static sidebar with expand/collapse
+       =========================================== */
+    @media (min-width: 1024px) {
+      .sidebar-container {
+        position: relative;
+      }
+      
+      :host(:not([collapsed])) .sidebar-container {
+        width: var(--ag-sidebar-width);
+        transition: width var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+      }
+      
+      :host([collapsed]) .sidebar-container {
+        width: var(--ag-sidebar-width-collapsed);
+        transition: width var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+      }
+      
+      /* When compact mode is disabled, ignore collapsed state on desktop */
+      :host([disable-compact-mode]) .sidebar-container,
+      :host([disable-compact-mode][collapsed]) .sidebar-container {
+        position: fixed;
+        inset-inline-start: 0;
+        top: 0;
+        height: 100%;
+        width: var(--ag-sidebar-width);
+        transform: translateX(0);
+        transition: transform var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+      }
+      
+      :host([disable-compact-mode]:not([open])) .sidebar-container,
+      :host([disable-compact-mode][collapsed]:not([open])) .sidebar-container {
+        transform: translateX(-100%);
+      }
+      
+      :host([disable-compact-mode][position="right"]:not([open])) .sidebar-container,
+      :host([disable-compact-mode][collapsed][position="right"]:not([open])) .sidebar-container {
+        transform: translateX(100%);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .sidebar-container, .backdrop, .toggle-button, .header-content {
+        transition: none !important;
+      }
+    }
+  `;
+let t = l;
+o([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "open");
+o([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "collapsed");
+o([
+  a({ type: String, reflect: !0 })
+], t.prototype, "position");
+o([
+  a({ type: String, attribute: "aria-label" })
+], t.prototype, "ariaLabel");
+o([
+  a({ type: String, reflect: !0 })
+], t.prototype, "variant");
+o([
+  a({ type: Boolean, attribute: "no-transition", reflect: !0 })
+], t.prototype, "noTransition");
+o([
+  a({ type: String })
+], t.prototype, "width");
+o([
+  a({ type: Boolean, attribute: "disable-compact-mode", reflect: !0 })
+], t.prototype, "disableCompactMode");
+o([
+  a({ type: Boolean, attribute: "show-mobile-toggle", reflect: !0 })
+], t.prototype, "showMobileToggle");
+o([
+  a({ type: String, attribute: "mobile-toggle-position" })
+], t.prototype, "mobileTogglePosition");
+o([
+  a({ type: Boolean, attribute: "show-header-toggle", reflect: !0 })
+], t.prototype, "showHeaderToggle");
+o([
+  a({ attribute: !1 })
+], t.prototype, "onToggle");
+o([
+  a({ attribute: !1 })
+], t.prototype, "onCollapse");
+export {
+  t as AgSidebar
+};

package/dist/components/Sidebar/react/ReactSidebar.d.ts

@@ -0,0 +1,10 @@
+import { EventName } from '@lit/react';
+import { AgSidebar, AgSidebarToggleEvent, AgSidebarCollapseEvent, AgSidebarProps } from '../core/Sidebar.js';
+
+export declare const ReactSidebar: import('@lit/react').ReactWebComponent<AgSidebar, {
+    onToggle: EventName<AgSidebarToggleEvent>;
+    onCollapse: EventName<AgSidebarCollapseEvent>;
+}>;
+export type ReactSidebarProps = AgSidebarProps;
+export type { AgSidebarToggleEvent, AgSidebarCollapseEvent };
+//# sourceMappingURL=ReactSidebar.d.ts.map

package/dist/components/Sidebar/react/ReactSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/react/ReactSidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAE7D,OAAO,EACL,SAAS,EACT,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,YAAY;cAKY,SAAS,CAAC,oBAAoB,CAAC;gBAC3B,SAAS,CAAC,sBAAsB,CAAC;EAExE,CAAC;AAGH,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAG/C,YAAY,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/components/Sidebar/react/ReactSidebar.js

@@ -0,0 +1,16 @@
+import { o as e } from "../../../create-component-BPMDMe-q.js";
+import a from "react";
+import "../core/Sidebar.js";
+import { AgSidebar as o } from "../core/_Sidebar.js";
+const l = e({
+  tagName: "ag-sidebar",
+  elementClass: o,
+  react: a,
+  events: {
+    onToggle: "ag-sidebar-toggle",
+    onCollapse: "ag-sidebar-collapse"
+  }
+});
+export {
+  l as ReactSidebar
+};