import { jsx as x } from "react/jsx-runtime";
import { forwardRef as m, useCallback as o } from "react";
import { c as g } from "../../../../index-BtlgVD4m.js";
const h = m(
  ({ isActive: r = !1, as: s, asProps: n, onClick: a, collapsed: i = !1, "aria-expanded": d, className: p, children: b, ...c }, l) => {
    const f = o((e) => {
      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
    }, []), t = o(
      (e) => {
        a == null || a(e);
      },
      [a]
    ), u = s ?? "div", v = s ? { ...n, onClick: t } : { role: "button", tabIndex: 0, onClick: t, onKeyDown: f };
    return /* @__PURE__ */ x(
      u,
      {
        ref: l,
        ...c,
        ...v,
        "data-active": r,
        "aria-expanded": d,
        className: g(
          "group/sidebar-item",
          "flex",
          "w-full",
          "items-center",
          "gap-[var(--spacing-2)]",
          "h-[var(--height-h-8)]",
          "rounded-[var(--border-radius-md)]",
          "px-[var(--spacing-2)]",
          "text-[length:var(--typography-base-sizes-small-font-size)]",
          "text-[var(--base-sidebar-foreground)]",
          "transition-colors",
          "hover:bg-[var(--base-sidebar-accent)]",
          "focus-visible:outline-1",
          "focus-visible:outline-[var(--base-sidebar-ring)]",
          "cursor-pointer",
          i && "justify-center",
          r && [
            "bg-[var(--base-sidebar-active)]",
            "text-[var(--base-sidebar-accent-foreground)]",
            "shadow-[0px_1px_3px_0px_var(--base-shadow-10),0px_1px_2px_0px_var(--base-shadow-5)]"
          ],
          p
        ),
        children: b
      }
    );
  }
);
h.displayName = "SidebarRow";
export {
  h as default
};
//# sourceMappingURL=SidebarRow.js.map
