import { B as Button } from './Button-Byk8IDvI.js';
import { D as Dropdown } from './Dropdown-CJ9m5usm.js';
import { L as Link, I as Icon } from './Link-BxAwzNX6.js';
import { b as attr, a as attr_class, n as clsx } from './index2-CzosXNJA.js';
import './html-FW6Ia4bL.js';
import './context-BZ_07CFR.js';

function defaultSeparator($$renderer) {
  $$renderer.push(`<span class="inline-flex select-none items-center" aria-hidden="true">`);
  Icon($$renderer, { name: "chevron-right" });
  $$renderer.push(`<!----></span>`);
}
function Breadcrumbs($$renderer, $$props) {
  let {
    ariaLabel = "breadcrumb",
    separator = defaultSeparator,
    children,
    class: className = ""
  } = $$props;
  $$renderer.push(`<nav${attr("aria-label", ariaLabel)}${attr_class(clsx(className))}><div role="list" class="flex flex-wrap items-center">`);
  children($$renderer, { separator });
  $$renderer.push(`<!----></div></nav>`);
}
function Crumb($$renderer, $$props) {
  $$renderer.component(($$renderer2) => {
    let {
      href = null,
      current = false,
      class: className = "",
      children,
      dropdown = null,
      dropdownId,
      onClick
    } = $$props;
    let isOpen = false;
    let triggerEl = null;
    const uid = Math.random().toString(36).slice(2, 8);
    const ddId = dropdownId ?? `crumb-dd-${uid}`;
    function close() {
      isOpen = false;
    }
    $$renderer2.push(`<span role="listitem" class="inline-flex items-center">`);
    if (href && !current) {
      $$renderer2.push("<!--[-->");
      $$renderer2.push(`<a${attr("href", href)}${attr("aria-haspopup", dropdown ? "menu" : void 0)}${attr("aria-expanded", dropdown ? isOpen : void 0)}${attr_class("inline-flex items-center gap-1 text-rc-gray-100 hover:text-rc-green-200 focus:text-rc-green-200 focus:outline-none " + className)}>`);
      children($$renderer2);
      $$renderer2.push(`<!----></a>`);
    } else {
      $$renderer2.push("<!--[!-->");
      $$renderer2.push(`<span${attr("role", dropdown ? "button" : void 0)}${attr("tabindex", dropdown ? 0 : void 0)}${attr("aria-current", current ? "page" : void 0)}${attr("aria-haspopup", dropdown ? "menu" : void 0)}${attr("aria-expanded", dropdown ? isOpen : void 0)}${attr_class("inline-flex items-center gap-1 text-rc-green-200 " + className)}>`);
      children($$renderer2);
      $$renderer2.push(`<!----></span>`);
    }
    $$renderer2.push(`<!--]--> `);
    if (dropdown) {
      $$renderer2.push("<!--[-->");
      Dropdown($$renderer2, {
        open: isOpen,
        anchorEl: triggerEl,
        id: ddId,
        onClose: close,
        children: ($$renderer3) => {
          dropdown($$renderer3);
          $$renderer3.push(`<!---->`);
        }
      });
    } else {
      $$renderer2.push("<!--[!-->");
    }
    $$renderer2.push(`<!--]--></span>`);
  });
}
function _page($$renderer) {
  let isOpen = false;
  let triggerEl = null;
  function toggle() {
    isOpen = !isOpen;
  }
  function close() {
    isOpen = false;
  }
  let $$settled = true;
  let $$inner_renderer;
  function $$render_inner($$renderer2) {
    $$renderer2.push(`<div class="m-4 flex w-fit flex-col gap-4">`);
    Button($$renderer2, {
      children: ($$renderer3) => {
        $$renderer3.push(`<!---->Just Click`);
      },
      $$slots: { default: true }
    });
    $$renderer2.push(`<!----> `);
    Button($$renderer2, {
      children: ($$renderer3) => {
        Link($$renderer3, {
          href: "/",
          children: ($$renderer4) => {
            $$renderer4.push(`<!---->Link to Main`);
          },
          $$slots: { default: true }
        });
      },
      $$slots: { default: true }
    });
    $$renderer2.push(`<!----> `);
    Button($$renderer2, {
      onclick: toggle,
      "aria-controls": "check-dropdown",
      "aria-haspopup": "menu",
      "aria-expanded": isOpen,
      get el() {
        return triggerEl;
      },
      set el($$value) {
        triggerEl = $$value;
        $$settled = false;
      },
      children: ($$renderer3) => {
        $$renderer3.push(`<!---->Check Dropdown`);
      },
      $$slots: { default: true }
    });
    $$renderer2.push(`<!----> `);
    {
      let children = function($$renderer3) {
        $$renderer3.push(`<ul role="menu"><li role="menuitem" class="w-full cursor-pointer rounded p-3 text-left text-rc-gray-300 hover:bg-rc-gray-700 focus:bg-rc-gray-700 focus:outline-none">Item 1</li> <li role="menuitem" class="w-full cursor-pointer rounded p-3 text-left text-rc-gray-300 hover:bg-rc-gray-700 focus:bg-rc-gray-700 focus:outline-none">Item 2</li> <li role="menuitem" class="w-full cursor-pointer rounded p-3 text-left text-rc-gray-300 hover:bg-rc-gray-700 focus:bg-rc-gray-700 focus:outline-none">Item 3</li></ul>`);
      };
      Dropdown($$renderer2, {
        open: isOpen,
        id: "check-dropdown",
        placement: "bottom-start",
        offset: [0, 3],
        anchorEl: triggerEl,
        onClose: close,
        children
      });
    }
    $$renderer2.push(`<!----></div> <div class="m-4 p-4"><p>Without Dropdown</p> `);
    {
      let children = function($$renderer3, { separator }) {
        Crumb($$renderer3, {
          href: "/",
          children: ($$renderer4) => {
            $$renderer4.push(`<!---->Chat`);
          }
        });
        $$renderer3.push(`<!----> `);
        separator($$renderer3);
        $$renderer3.push(`<!----> `);
        Crumb($$renderer3, {
          href: "/tests",
          children: ($$renderer4) => {
            $$renderer4.push(`<!---->Tests`);
          }
        });
        $$renderer3.push(`<!----> `);
        separator($$renderer3);
        $$renderer3.push(`<!----> `);
        Crumb($$renderer3, {
          current: true,
          children: ($$renderer4) => {
            $$renderer4.push(`<!---->Breadcrumbs`);
          }
        });
        $$renderer3.push(`<!---->`);
      };
      Breadcrumbs($$renderer2, {
        class: "text-rc-gray-200",
        children
      });
    }
    $$renderer2.push(`<!----></div> <div class="m-4 p-4"><p>With Dropdown</p> `);
    {
      let children = function($$renderer3, { separator }) {
        {
          let children2 = function($$renderer4) {
            $$renderer4.push(`<!---->Chat`);
          }, dropdown = function($$renderer4) {
            $$renderer4.push(`<div class="dropdown-container">`);
            Link($$renderer4, {
              href: "/src",
              class: "dropdown-elements",
              children: ($$renderer5) => {
                $$renderer5.push(`<!---->src`);
              },
              $$slots: { default: true }
            });
            $$renderer4.push(`<!----> `);
            Link($$renderer4, {
              href: "/services",
              class: "dropdown-elements",
              children: ($$renderer5) => {
                $$renderer5.push(`<!---->services`);
              },
              $$slots: { default: true }
            });
            $$renderer4.push(`<!----></div>`);
          };
          Crumb($$renderer3, {
            href: "/",
            children: children2,
            dropdown
          });
        }
        $$renderer3.push(`<!----> `);
        separator($$renderer3);
        $$renderer3.push(`<!----> `);
        {
          let children2 = function($$renderer4) {
            $$renderer4.push(`<!---->Tests`);
          }, dropdown = function($$renderer4) {
            $$renderer4.push(`<div class="dropdown-container">`);
            Link($$renderer4, {
              href: "/tests/components",
              class: "dropdown-elements",
              children: ($$renderer5) => {
                $$renderer5.push(`<!---->components`);
              },
              $$slots: { default: true }
            });
            $$renderer4.push(`<!----> `);
            Link($$renderer4, {
              href: "/tests/foo",
              class: "dropdown-elements",
              children: ($$renderer5) => {
                $$renderer5.push(`<!---->foo`);
              },
              $$slots: { default: true }
            });
            $$renderer4.push(`<!----> `);
            Link($$renderer4, {
              href: "/tests/bar",
              class: "dropdown-elements",
              children: ($$renderer5) => {
                $$renderer5.push(`<!---->bar`);
              },
              $$slots: { default: true }
            });
            $$renderer4.push(`<!----></div>`);
          };
          Crumb($$renderer3, {
            href: "/tests",
            children: children2,
            dropdown
          });
        }
        $$renderer3.push(`<!----> `);
        separator($$renderer3);
        $$renderer3.push(`<!----> `);
        {
          let children2 = function($$renderer4) {
            $$renderer4.push(`<!---->Breadcrumbs`);
          };
          Crumb($$renderer3, { current: true, children: children2 });
        }
        $$renderer3.push(`<!---->`);
      };
      Breadcrumbs($$renderer2, {
        class: "text-rc-gray-200",
        children
      });
    }
    $$renderer2.push(`<!----></div>`);
  }
  do {
    $$settled = true;
    $$inner_renderer = $$renderer.copy();
    $$render_inner($$inner_renderer);
  } while (!$$settled);
  $$renderer.subsume($$inner_renderer);
}

export { _page as default };
//# sourceMappingURL=_page.svelte-Dw4qiUOo.js.map
