@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.14

package/dist/ui/src/components/Breadcrumb/BreadcrumbNav.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import useOdeIcons from "../../core/useOdeIcons/useOdeIcons.js";
+const BreadcrumbNav = /* @__PURE__ */ forwardRef(({
+  children,
+  app,
+  className
+}, ref) => {
+  const {
+    t
+  } = useTranslation(), {
+    getIconClass
+  } = useOdeIcons(), classes = clsx("d-flex align-items-center mb-0", getIconClass(app), className), style = {
+    "--edifice-breadcrumb-divider": "-"
+  };
+  return /* @__PURE__ */ jsx("nav", { ref, className: classes, "aria-label": t("breadcrumb"), style, children });
+});
+export {
+  BreadcrumbNav as default
+};

package/dist/ui/src/components/Button/Button.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Loading from "../Loading/Loading.js";
+const Button = /* @__PURE__ */ forwardRef(({
+  color = "primary",
+  type = "button",
+  size = "md",
+  children,
+  isLoading,
+  loadingIcon,
+  loadingPosition,
+  leftIcon,
+  rightIcon,
+  className,
+  variant = "filled",
+  ...restProps
+}, ref) => {
+  const classes = clsx("btn", {
+    [`btn-filled btn-${color}`]: variant === "filled",
+    [`btn-${variant}-${color}`]: variant === "outline" || variant === "ghost",
+    "btn-icon": !children,
+    "btn-loading": isLoading,
+    "btn-lg": size === "lg",
+    "btn-sm": size === "sm"
+  }, className);
+  return /* @__PURE__ */ jsx("button", { ref, className: classes, type, ...restProps, children: isLoading ? /* @__PURE__ */ jsx(Loading, { isLoading: !0, loadingIcon, loadingPosition, children }) : /* @__PURE__ */ jsxs("span", { children: [
+    leftIcon,
+    children,
+    rightIcon
+  ] }) });
+});
+export {
+  Button as default
+};

package/dist/ui/src/components/Button/IconButton.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Button from "./Button.js";
+const IconButton = /* @__PURE__ */ forwardRef(({
+  icon,
+  className,
+  ...restProps
+}, ref) => {
+  const buttonProps = {
+    ...restProps,
+    className: clsx("btn-icon btn-sm", className)
+  };
+  return /* @__PURE__ */ jsx(Button, { ref, ...buttonProps, children: icon });
+}), IconButton$1 = IconButton;
+export {
+  IconButton$1 as default
+};

package/dist/ui/src/components/Button/SearchButton.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { Search as SvgSearch$1 } from "../../../../icons/dist/index.js";
+import IconButton from "./IconButton.js";
+const SearchButton = /* @__PURE__ */ forwardRef(({
+  icon = /* @__PURE__ */ jsx(SvgSearch$1, {}),
+  onClick,
+  className,
+  ...restProps
+}, ref) => {
+  const classes = clsx("btn-search", className);
+  return /* @__PURE__ */ jsx(IconButton, { ref, className: classes, icon, onClick, ...restProps });
+}), SearchButton$1 = SearchButton;
+export {
+  SearchButton$1 as default
+};

package/dist/ui/src/components/Card/Card.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import clsx from "clsx";
+import CardBody from "./CardBody.js";
+import { CardContext } from "./CardContext.js";
+import CardFooter from "./CardFooter.js";
+import CardHeader from "./CardHeader.js";
+import CardImage from "./CardImage.js";
+import CardText from "./CardText.js";
+import CardTitle from "./CardTitle.js";
+import CardUser from "./CardUser.js";
+import useOdeIcons from "../../core/useOdeIcons/useOdeIcons.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  app,
+  isSelectable = !0,
+  isClickable = !0,
+  isSelected = !1,
+  onClick,
+  onSelect,
+  children,
+  className
+}, ref) => {
+  const {
+    getIconCode
+  } = useOdeIcons(), appCode = app ? getIconCode(app) : "placeholder", values = useMemo(() => ({
+    app,
+    appCode,
+    isSelectable,
+    isClickable,
+    onClick,
+    onSelect
+  }), [app, appCode, isSelectable, isClickable, onClick, onSelect]);
+  return /* @__PURE__ */ jsx(CardContext.Provider, { value: values, children: /* @__PURE__ */ jsxs("div", { ref, className: clsx("card", {
+    "is-selected": isSelected,
+    "c-pointer": isClickable
+  }, className), children: [
+    /* @__PURE__ */ jsx(Card.Header, {}),
+    typeof children == "function" ? children(appCode) : children
+  ] }) });
+}), Card = /* @__PURE__ */ Object.assign(Root, {
+  Title: CardTitle,
+  Text: CardText,
+  Image: CardImage,
+  Body: CardBody,
+  User: CardUser,
+  Footer: CardFooter,
+  Header: CardHeader
+}), Card$1 = Card;
+export {
+  Card$1 as default
+};

package/dist/ui/src/components/Card/CardBody.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const CardBody = ({
+  children,
+  space = null,
+  flexDirection = "row"
+}) => {
+  const cardbody = clsx("card-body", {
+    [`p-${space}`]: space,
+    [`gap-${space}`]: space,
+    "align-items-start": flexDirection === "column",
+    "flex-column": flexDirection === "column"
+  });
+  return /* @__PURE__ */ jsx("div", { className: cardbody, children });
+};
+export {
+  CardBody as default
+};

package/dist/ui/src/components/Card/CardContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+const CardContext = /* @__PURE__ */ createContext(null), useCardContext = () => {
+  const context = useContext(CardContext);
+  if (!context)
+    throw new Error("Cannot be rendered outside the Card component");
+  return context;
+};
+export {
+  CardContext,
+  useCardContext
+};

package/dist/ui/src/components/Card/CardFooter.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+const CardFooter = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: "card-footer gap-16", children });
+export {
+  CardFooter as default
+};

package/dist/ui/src/components/Card/CardHeader.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Options as SvgOptions$1 } from "../../../../icons/dist/index.js";
+import { useCardContext } from "./CardContext.js";
+import IconButton from "../Button/IconButton.js";
+const CardHeader = () => {
+  const {
+    isSelectable,
+    isClickable,
+    onClick,
+    onSelect
+  } = useCardContext();
+  return isSelectable || isClickable ? /* @__PURE__ */ jsxs("div", { className: "card-header", children: [
+    isSelectable ? /* @__PURE__ */ jsx(IconButton, { "aria-label": "Open Action Bar", className: "z-3 bg-white", color: "secondary", icon: /* @__PURE__ */ jsx(SvgOptions$1, {}), onClick: onSelect, variant: "ghost" }) : null,
+    isClickable ? /* @__PURE__ */ jsx("button", { onClick, className: "position-absolute bottom-0 end-0 top-0 start-0 opacity-0 z-1 w-100", "aria-label": "Open resource" }) : null
+  ] }) : null;
+};
+export {
+  CardHeader as default
+};

package/dist/ui/src/components/Card/CardImage.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCardContext } from "./CardContext.js";
+import Image from "../Image/Image.js";
+import { AppIcon } from "../AppIcon/AppIcon.js";
+const CardImage = ({
+  imageSrc,
+  className,
+  variant = "medium"
+}) => {
+  const {
+    app
+  } = useCardContext(), style = variant === "landscape" ? {
+    width: "100%",
+    height: "auto"
+  } : null;
+  return /* @__PURE__ */ jsx("div", { className: clsx("card-image", variant), children: imageSrc ? /* @__PURE__ */ jsx(Image, { alt: "", src: imageSrc, objectFit: "cover", className: clsx("h-full w-100", className) }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "80", variant: "rounded", ...style }) });
+};
+export {
+  CardImage as default
+};

package/dist/ui/src/components/Card/CardText.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const CardText = ({
+  children,
+  className
+}) => {
+  const text = clsx("card-text small text-break text-truncate text-truncate-1", className);
+  return /* @__PURE__ */ jsx("p", { className: text, children });
+};
+export {
+  CardText as default
+};

package/dist/ui/src/components/Card/CardTitle.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const CardTitle = ({
+  children,
+  className
+}) => {
+  const title = clsx("card-title body text-break text-truncate text-truncate-2", className);
+  return /* @__PURE__ */ jsx("h3", { className: title, children: /* @__PURE__ */ jsx("strong", { children }) });
+};
+export {
+  CardTitle as default
+};

package/dist/ui/src/components/Card/CardUser.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { OneProfile } from "@edifice.io/icons/nav";
+import Avatar from "../Avatar/Avatar.js";
+const CardUser = ({
+  userSrc,
+  creatorName
+}) => userSrc ? /* @__PURE__ */ jsx(Avatar, { alt: creatorName || "", size: "xs", src: userSrc, variant: "circle", width: "24", height: "24" }) : /* @__PURE__ */ jsx(OneProfile, {});
+export {
+  CardUser as default
+};

package/dist/ui/src/components/Checkbox/Checkbox.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useEffect, useId } from "react";
+import clsx from "clsx";
+const Checkbox = /* @__PURE__ */ forwardRef(({
+  label,
+  disabled = !1,
+  checked = !1,
+  indeterminate = !1,
+  ...restProps
+}, ref) => {
+  const refCheckbox = useRef(null);
+  useImperativeHandle(ref, () => ({
+    ...refCheckbox.current
+  })), useEffect(() => {
+    refCheckbox.current.indeterminate = indeterminate;
+  }, [refCheckbox, indeterminate]);
+  const id = useId(), checkboxProps = {
+    type: "checkbox",
+    checked,
+    disabled,
+    ref: refCheckbox,
+    className: clsx(restProps.className, "form-check-input c-pointer"),
+    id
+  }, inputProps = {
+    ...restProps,
+    ...checkboxProps
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "form-check d-flex align-items-center gap-8", children: [
+    /* @__PURE__ */ jsx("input", { ...inputProps }),
+    label && /* @__PURE__ */ jsx("label", { className: "form-check-label", htmlFor: inputProps.id, children: label })
+  ] });
+});
+export {
+  Checkbox as default
+};

package/dist/ui/src/components/ColorPicker/ColorPalette.js

@@ -0,0 +1,171 @@
+const DefaultPalette = {
+  className: "fw-bold",
+  label: "defaultPalette",
+  colors: [
+    /* Paint It Black */
+    [{
+      value: "#4A4A4A",
+      description: "color.gray.darkest"
+    }, {
+      value: "#909090",
+      description: "color.gray.dark"
+    }, {
+      value: "#C7C7C7",
+      description: "color.gray.medium"
+    }, {
+      value: "#F2F2F2",
+      description: "color.gray.light",
+      hue: "light"
+    }, {
+      value: "#FFFFFF",
+      description: "color.white",
+      hue: "light"
+    }],
+    /* Blue Sunday */
+    [{
+      value: "#005A8A",
+      description: "color.blue.darkest"
+    }, {
+      value: "#2F7EA7",
+      description: "color.blue.dark"
+    }, {
+      value: "#46AFE6",
+      description: "color.blue.medium"
+    }, {
+      value: "#B9E3F8",
+      description: "color.blue.light",
+      hue: "light"
+    }, {
+      value: "#E5F5FF",
+      description: "color.blue.lightest",
+      hue: "light"
+    }],
+    /* Purple haze */
+    [{
+      value: "#550070",
+      description: "color.purple.darkest"
+    }, {
+      value: "#7C2C96",
+      description: "color.purple.dark"
+    }, {
+      value: "#A348C0",
+      description: "color.purple.medium"
+    }, {
+      value: "#D7B5E2",
+      description: "color.purple.light",
+      hue: "light"
+    }, {
+      value: "#F6ECF9",
+      description: "color.purple.lightest",
+      hue: "light"
+    }],
+    /* Red House */
+    [{
+      value: "#9E0016",
+      description: "color.red.darkest"
+    }, {
+      value: "#C6253B",
+      description: "color.red.dark"
+    }, {
+      value: "#FF3A55",
+      description: "color.red.medium"
+    }, {
+      value: "#FFB6C0",
+      description: "color.red.light",
+      hue: "light"
+    }, {
+      value: "#FFECEE",
+      description: "color.red.lightest",
+      hue: "light"
+    }],
+    /* The Brown Album */
+    [{
+      value: "#9E4800",
+      description: "color.brown.darkest"
+    }, {
+      value: "#DA6A0B",
+      description: "color.brown.dark"
+    }, {
+      value: "#FF8D2E",
+      description: "color.brown.medium"
+    }, {
+      value: "#FFCBA0",
+      description: "color.brown.light",
+      hue: "light"
+    }, {
+      value: "#FFEFE3",
+      description: "color.brown.lightest",
+      hue: "light"
+    }],
+    /* Yellow Submarine */
+    [{
+      value: "#A89400",
+      description: "color.yellow.darkest"
+    }, {
+      value: "#D1AF00",
+      description: "color.yellow.dark"
+    }, {
+      value: "#F1CA00",
+      description: "color.yellow.medium"
+    }, {
+      value: "#FAEA9C",
+      description: "color.yellow.light",
+      hue: "light"
+    }, {
+      value: "#FBF4D5",
+      description: "color.yellow.lightest",
+      hue: "light"
+    }],
+    /* Green Naugahyde */
+    [{
+      value: "#2E6105",
+      description: "color.green.darkest"
+    }, {
+      value: "#4E9019",
+      description: "color.green.dark"
+    }, {
+      value: "#5AC235",
+      description: "color.green.medium"
+    }, {
+      value: "#C8E4AF",
+      description: "color.green.light",
+      hue: "light"
+    }, {
+      value: "#EAF7E4",
+      description: "color.green.lightest",
+      hue: "light"
+    }]
+  ]
+}, AccessiblePalette = {
+  label: "accessiblePalette",
+  tooltip: {
+    message: "Veni, vidi, vici"
+  },
+  colors: [[{
+    value: "#4A4A4A",
+    description: "color.gray"
+  }], [{
+    value: "#648FFF",
+    description: "color.blue"
+  }], [{
+    value: "#785EF0",
+    description: "color.purple"
+  }], [{
+    value: "#DC267F",
+    description: "color.red"
+  }], [{
+    value: "#FE6100",
+    description: "color.brown"
+  }], [{
+    value: "#FFB000",
+    description: "color.orange"
+  }], [{
+    value: "#F3EA14",
+    description: "color.yellow"
+  }]],
+  className: "mt-16"
+};
+export {
+  AccessiblePalette,
+  DefaultPalette
+};

package/dist/ui/src/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { InfoCircle as SvgInfoCircle$1, DeleteColor as SvgDeleteColor$1 } from "../../../../icons/dist/index.js";
+import { DefaultPalette, AccessiblePalette } from "./ColorPalette.js";
+import ColorPickerItem from "./ColorPickerItem.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+const ColorPicker = /* @__PURE__ */ forwardRef(({
+  palettes = [DefaultPalette, AccessiblePalette],
+  model = "#4A4A4A",
+  onSuccess,
+  ...restProps
+}, ref) => {
+  const {
+    t
+  } = useTranslation(), handleClick = (item) => {
+    item && (onSuccess == null || onSuccess(item));
+  };
+  return /* @__PURE__ */ jsx("div", { ref, ...restProps, children: palettes.map((palette, paletteIdx) => /* @__PURE__ */ jsxs("div", { className: clsx("color-picker mx-8", palette.className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "color-picker-label small mt-4 mb-8", children: [
+      t(palette.label),
+      palette.tooltip && /* @__PURE__ */ jsx(Tooltip, { message: "", placement: "auto", ...palette.tooltip, children: /* @__PURE__ */ jsx(SvgInfoCircle$1, { width: 18, height: 18, className: "mx-4 position-relative", style: {
+        top: "4px"
+      } }) })
+    ] }),
+    // Show/hide the reset option
+    palette.reset && /* @__PURE__ */ jsxs("button", { className: "color-picker-reset small my-8 gap-4", onClick: () => handleClick(palette.reset), children: [
+      /* @__PURE__ */ jsx(SvgDeleteColor$1, { width: 20, height: 20 }),
+      palette.reset.description
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "color-picker-palette d-flex gap-2 justify-content-between", children: palette.colors.map((hues, hueIndex) => /* @__PURE__ */ jsx("div", { className: "color-picker-hue d-flex gap-2 justify-content-between flex-column ", children: hues.map((color) => /* @__PURE__ */ jsx("button", { "aria-label": color.description, className: "color-picker-hue-color", onClick: () => handleClick(color), children: /* @__PURE__ */ jsx(ColorPickerItem, { ...restProps, model: color, selected: model === color.value }) }, color.value)) }, hueIndex)) })
+  ] }, paletteIdx)) });
+}), ColorPicker$1 = ColorPicker;
+export {
+  ColorPicker$1 as default
+};

package/dist/ui/src/components/ColorPicker/ColorPickerItem.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { DeleteColor as SvgDeleteColor$1 } from "../../../../icons/dist/index.js";
+const ColorPickerItem = ({
+  model,
+  selected,
+  className
+}) => model.isReset ? /* @__PURE__ */ jsx(SvgDeleteColor$1, {}) : /* @__PURE__ */ jsx("div", { "aria-label": model.description, className: clsx("color-picker-hue-color-item rounded-1", className, model.hue === "light" ? "light" : "dark", selected && "selected"), style: {
+  backgroundColor: model.value
+} }), ColorPickerItem$1 = ColorPickerItem;
+export {
+  ColorPickerItem$1 as default
+};

package/dist/ui/src/components/Combobox/Combobox.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import ComboboxTrigger from "./ComboboxTrigger.js";
+import Dropdown from "../Dropdown/Dropdown.js";
+import Loading from "../Loading/Loading.js";
+const Combobox = ({
+  onSearchResultsChange,
+  onSearchInputChange,
+  options,
+  value,
+  isLoading,
+  noResult,
+  searchMinLength,
+  placeholder
+}) => {
+  const {
+    t
+  } = useTranslation(), [localValue, setLocalValue] = useState([]);
+  useEffect(() => {
+    onSearchResultsChange(localValue);
+  }, [localValue]);
+  const handleOptionClick = (value2) => {
+    setLocalValue([value2]);
+  }, renderContent = () => isLoading ? /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center p-4", children: [
+    /* @__PURE__ */ jsx(Loading, { isLoading }),
+    /* @__PURE__ */ jsx("span", { className: "ps-4", children: t("explorer.search.pending") })
+  ] }) : noResult ? /* @__PURE__ */ jsx("div", { className: "p-4", children: t("portal.no.result") }) : options.map((option, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dropdown.Item, { type: "select", icon: option.icon, onClick: () => handleOptionClick(option.value), children: option.label }),
+    index < options.length - 1 && /* @__PURE__ */ jsx(Dropdown.Separator, {})
+  ] }, index));
+  return /* @__PURE__ */ jsxs(Dropdown, { block: !0, children: [
+    /* @__PURE__ */ jsx(Combobox.Trigger, { placeholder, searchMinLength, handleSearchInputChange: onSearchInputChange, value }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { children: renderContent() })
+  ] });
+};
+Combobox.Trigger = ComboboxTrigger;
+export {
+  Combobox as default
+};

package/dist/ui/src/components/Combobox/ComboboxTrigger.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useDropdownContext } from "../Dropdown/DropdownContext.js";
+import Input from "../Input/Input.js";
+import FormControl from "../Form/FormControl.js";
+const ComboboxTrigger = ({
+  placeholder,
+  value = "",
+  searchMinLength = 3,
+  handleSearchInputChange
+}) => {
+  const {
+    triggerProps,
+    itemProps,
+    setVisible
+  } = useDropdownContext(), inputProps = {
+    ...triggerProps,
+    role: "combobox",
+    onClick: () => {
+      value.length >= searchMinLength && setVisible(!0);
+    },
+    onChange: handleSearchInputChange
+  };
+  return useEffect(() => {
+    setVisible(value.length >= searchMinLength);
+  }, [setVisible, value, searchMinLength]), /* @__PURE__ */ jsx(FormControl, { className: "d-flex align-items-center", id: "search", children: /* @__PURE__ */ jsx(Input, { ...inputProps, className: "max-w-512", noValidationIcon: !0, placeholder, size: "md", type: "search", onKeyDown: itemProps.onMenuItemKeyDown }) });
+};
+export {
+  ComboboxTrigger as default
+};

package/dist/ui/src/components/Dropdown/Dropdown.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useEffect } from "react";
+import clsx from "clsx";
+import DropdownCheckboxItem from "./DropdownCheckboxItem.js";
+import { DropdownContext } from "./DropdownContext.js";
+import DropdownItem from "./DropdownItem.js";
+import DropdownMenu from "./DropdownMenu.js";
+import DropdownMenuGroup from "./DropdownMenuGroup.js";
+import DropdownRadioItem from "./DropdownRadioItem.js";
+import DropdownSeparator from "./DropdownSeparator.js";
+import DropdownTrigger from "./DropdownTrigger.js";
+import useDropdown from "../../hooks/useDropdown/useDropdown.js";
+import useClickOutside from "../../hooks/useClickOutside/useClickOutside.js";
+const Root = ({
+  children,
+  block,
+  overflow = !0,
+  placement = "bottom-start",
+  extraTriggerKeyDownHandler,
+  onToggle,
+  isTriggerHovered = !1
+}) => {
+  const {
+    visible,
+    isFocused,
+    triggerProps,
+    menuProps,
+    itemProps,
+    itemRefs,
+    setVisible
+  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered), ref = useClickOutside(() => {
+    setVisible(!1);
+  }), value = useMemo(() => ({
+    visible,
+    isFocused,
+    triggerProps,
+    menuProps,
+    itemProps,
+    itemRefs,
+    block,
+    setVisible
+  }), [visible, isFocused, triggerProps, menuProps, itemProps, itemRefs, block, setVisible]), dropdown = clsx("dropdown", {
+    "w-100": block,
+    overflow
+  });
+  return useEffect(() => {
+    onToggle == null || onToggle(visible);
+  }, [visible]), /* @__PURE__ */ jsx(DropdownContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: dropdown, children: typeof children == "function" ? children(triggerProps, itemRefs) : children }) });
+}, Dropdown = /* @__PURE__ */ Object.assign(Root, {
+  Trigger: DropdownTrigger,
+  Menu: DropdownMenu,
+  Item: DropdownItem,
+  Separator: DropdownSeparator,
+  CheckboxItem: DropdownCheckboxItem,
+  RadioItem: DropdownRadioItem,
+  MenuGroup: DropdownMenuGroup
+}), Dropdown$1 = Dropdown;
+export {
+  Dropdown$1 as default
+};