@nori-ui/core 1.1.0 → 1.3.0

package/dist/index.cjs

@@ -6590,6 +6590,745 @@ var Checkbox = /* @__PURE__ */ __name(({
     }
   );
 }, "Checkbox");
+var MenuContext = React.createContext(null);
+var MenuContextProvider = /* @__PURE__ */ __name(({
+  open,
+  toggle,
+  close,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: { open, toggle: toggle ?? close, close }, children }), "MenuContextProvider");
+function useMenuContext(caller) {
+  const ctx = React.useContext(MenuContext);
+  if (!ctx) {
+    throw new Error(`<${caller}> must be rendered inside a <DropdownMenu> or <ContextMenu>.`);
+  }
+  return ctx;
+}
+__name(useMenuContext, "useMenuContext");
+var MenuContent = /* @__PURE__ */ __name(({
+  children,
+  className,
+  testID,
+  side = "bottom",
+  align = "start",
+  "aria-label": ariaLabel
+}) => {
+  const colors = useThemeColors();
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    if (typeof document === "undefined") {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const getItems = /* @__PURE__ */ __name(() => Array.from(container.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')), "getItems");
+    const onKeyDown = /* @__PURE__ */ __name((e) => {
+      const items = getItems();
+      if (items.length === 0) {
+        return;
+      }
+      const focused = document.activeElement;
+      const idx = focused ? items.indexOf(focused) : -1;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          items[idx < items.length - 1 ? idx + 1 : 0]?.focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          items[idx > 0 ? idx - 1 : items.length - 1]?.focus();
+          break;
+        case "Home":
+          e.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+      }
+    }, "onKeyDown");
+    container.addEventListener("keydown", onKeyDown);
+    return () => container.removeEventListener("keydown", onKeyDown);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Content,
+    {
+      side,
+      align,
+      ...testID !== void 0 ? { testID } : {},
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      ...className !== void 0 ? { className } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          ref: containerRef,
+          ...{
+            role: "menu",
+            ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {}
+          },
+          style: {
+            minWidth: 160,
+            paddingVertical: px(colors.spacing["1"]),
+            margin: -px(colors.spacing["4"]),
+            borderRadius: px(colors.radius.lg),
+            overflow: "hidden"
+          },
+          children
+        }
+      )
+    }
+  );
+}, "MenuContent");
+MenuContent.displayName = "MenuContent";
+var MenuItem = /* @__PURE__ */ __name(({
+  onSelect,
+  disabled = false,
+  destructive = false,
+  icon,
+  shortcut,
+  children,
+  className,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const menu = useMenuContext("MenuItem");
+  const handlePress = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    onSelect?.();
+    menu.close();
+  }, [disabled, onSelect, menu]);
+  const textColor = destructive ? colors.color.danger : disabled ? colors.semantic.text.muted : colors.semantic.text.default;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      onPress: handlePress,
+      disabled,
+      ...{
+        role: "menuitem",
+        "aria-disabled": disabled ? "true" : void 0,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: /* @__PURE__ */ __name((e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handlePress();
+          }
+        }, "onKeyDown")
+      },
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-row items-center gap-2 px-3 py-2", className),
+      style: { opacity: disabled ? 0.4 : 1 },
+      accessibilityRole: "menuitem",
+      accessibilityState: { disabled },
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { width: 16, height: 16, alignItems: "center", justifyContent: "center" }, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              flex: 1,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              color: textColor
+            },
+            children
+          }
+        ),
+        shortcut !== void 0 && reactNative.Platform.OS === "web" && /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            ...{ "aria-hidden": "true" },
+            style: {
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.xs),
+              color: colors.semantic.text.muted
+            },
+            children: shortcut
+          }
+        )
+      ]
+    }
+  );
+}, "MenuItem");
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = /* @__PURE__ */ __name(({ className, testID }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...{ role: "separator" },
+      accessibilityRole: "none",
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("mx-1 my-1", className),
+      style: {
+        height: 1,
+        marginVertical: 4,
+        marginHorizontal: 4,
+        backgroundColor: colors.semantic.border.default
+      }
+    }
+  );
+}, "MenuSeparator");
+MenuSeparator.displayName = "MenuSeparator";
+var MenuLabel = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...{ role: "presentation" },
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("px-3 pt-2 pb-1", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.xs),
+            color: colors.semantic.text.muted,
+            textTransform: "uppercase",
+            letterSpacing: 0.6,
+            fontWeight: "600"
+          },
+          children
+        }
+      )
+    }
+  );
+}, "MenuLabel");
+MenuLabel.displayName = "MenuLabel";
+var DropdownMenuRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [inner, setInner] = React.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = React.useCallback(() => setOpen(!current), [setOpen, current]);
+  const close = React.useCallback(() => setOpen(false), [setOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContextProvider, { open: current, toggle, close, children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { open: current, onOpenChange: setOpen, children }) });
+}, "DropdownMenuRoot");
+var DropdownMenuTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const menu = useMenuContext("DropdownMenu.Trigger");
+  const popover = usePopoverContext("DropdownMenu.Trigger");
+  const onPress = React.useCallback(() => {
+    popover.measureTrigger();
+    popover.setOpen(!popover.open);
+  }, [popover]);
+  if (React.isValidElement(children)) {
+    const child = children;
+    const fire = /* @__PURE__ */ __name((existing) => (event) => {
+      existing?.(event);
+      popover.measureTrigger();
+      popover.setOpen(!popover.open);
+    }, "fire");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ref: (node) => {
+          popover.triggerRef.current = node;
+        },
+        onClick: fire(child.props.onClick),
+        onPress: fire(child.props.onPress),
+        ...{
+          "aria-haspopup": "menu",
+          "aria-expanded": menu.open,
+          "aria-controls": popover.contentId
+        },
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        popover.triggerRef.current = node;
+      },
+      onPress,
+      ...{
+        "aria-haspopup": "menu",
+        "aria-expanded": menu.open,
+        "aria-controls": popover.contentId
+      },
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+    }
+  );
+}, "DropdownMenuTrigger");
+var DropdownMenuContent = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(MenuContent, { ...props }), "DropdownMenuContent");
+var DropdownMenu = Object.assign(DropdownMenuRoot, {
+  Trigger: DropdownMenuTrigger,
+  Content: DropdownMenuContent,
+  Item: MenuItem,
+  Separator: MenuSeparator,
+  Label: MenuLabel
+});
+var ContextMenuCtx = React.createContext(null);
+var useContextMenuCtx = /* @__PURE__ */ __name(() => {
+  const ctx = React.useContext(ContextMenuCtx);
+  if (!ctx) {
+    throw new Error("ContextMenu compound parts must be rendered inside a <ContextMenu>.");
+  }
+  return ctx;
+}, "useContextMenuCtx");
+var ContextMenuRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [inner, setInner] = React.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuCtx.Provider, { value: { open: current, setOpen }, children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { open: current, onOpenChange: setOpen, children }) });
+}, "ContextMenuRoot");
+var ContextMenuTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useContextMenuCtx();
+  const popover = usePopoverContext("ContextMenu.Trigger");
+  const openMenu = React.useCallback(() => {
+    popover.measureTrigger();
+    ctx.setOpen(true);
+  }, [ctx, popover]);
+  if (reactNative.Platform.OS === "web") {
+    if (React.isValidElement(children)) {
+      const child = children;
+      const existing = child.props.onContextMenu;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Slot,
+        {
+          ref: (node) => {
+            popover.triggerRef.current = node;
+          },
+          onContextMenu: (e) => {
+            e.preventDefault();
+            existing?.(e);
+            openMenu();
+          },
+          ...{
+            "aria-haspopup": "menu",
+            "aria-expanded": ctx.open,
+            "aria-controls": popover.contentId
+          },
+          ...testID !== void 0 ? { "data-testid": testID } : {},
+          ...className !== void 0 ? { className } : {},
+          children: child
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        ref: (node) => {
+          popover.triggerRef.current = node;
+        },
+        ...{
+          onContextMenu: /* @__PURE__ */ __name((e) => {
+            e.preventDefault();
+            openMenu();
+          }, "onContextMenu"),
+          "aria-haspopup": "menu",
+          "aria-expanded": ctx.open,
+          "aria-controls": popover.contentId
+        },
+        ...testID !== void 0 ? { testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+      }
+    );
+  }
+  if (React.isValidElement(children)) {
+    const child = children;
+    const existing = child.props.onLongPress;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ref: (node) => {
+          popover.triggerRef.current = node;
+        },
+        onLongPress: (e) => {
+          existing?.(e);
+          openMenu();
+        },
+        accessibilityRole: "button",
+        ...testID !== void 0 ? { testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        popover.triggerRef.current = node;
+      },
+      onLongPress: openMenu,
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+    }
+  );
+}, "ContextMenuTrigger");
+var ContextMenuContent = /* @__PURE__ */ __name((props) => {
+  const ctx = useContextMenuCtx();
+  const close = React.useCallback(() => ctx.setOpen(false), [ctx]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContextProvider, { open: ctx.open, close, children: /* @__PURE__ */ jsxRuntime.jsx(MenuContent, { ...props }) });
+}, "ContextMenuContent");
+var ContextMenu = Object.assign(ContextMenuRoot, {
+  Trigger: ContextMenuTrigger,
+  Content: ContextMenuContent,
+  Item: MenuItem,
+  Separator: MenuSeparator,
+  Label: MenuLabel
+});
+function formatDate(date$1, locale) {
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date$1.toDate(date.getLocalTimeZone()));
+  } catch {
+    return `${date$1.year}-${String(date$1.month).padStart(2, "0")}-${String(date$1.day).padStart(2, "0")}`;
+  }
+}
+__name(formatDate, "formatDate");
+function CalendarIcon({ size = 16, color = "currentColor" }) {
+  const colors = useThemeColors();
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" })
+      }
+    );
+  }
+  const resolvedColor = color === "currentColor" ? colors.semantic.text.muted : color;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: { fontSize: size, lineHeight: size, color: resolvedColor },
+      children: "\u{1F4C5}"
+    }
+  );
+}
+__name(CalendarIcon, "CalendarIcon");
+function buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek) {
+  const out = {};
+  if (minValue !== void 0) {
+    out.minValue = minValue;
+  }
+  if (maxValue !== void 0) {
+    out.maxValue = maxValue;
+  }
+  if (isDateUnavailable !== void 0) {
+    out.isDateUnavailable = isDateUnavailable;
+  }
+  if (firstDayOfWeek !== void 0) {
+    out.firstDayOfWeek = firstDayOfWeek;
+  }
+  return out;
+}
+__name(buildCalendarOptional, "buildCalendarOptional");
+function buildTriggerAriaProps(ariaProps) {
+  const out = {};
+  if (ariaProps["aria-labelledby"] !== void 0) {
+    out["aria-labelledby"] = ariaProps["aria-labelledby"];
+  }
+  if (ariaProps["aria-describedby"] !== void 0) {
+    out["aria-describedby"] = ariaProps["aria-describedby"];
+  }
+  if (ariaProps["aria-invalid"] !== void 0) {
+    out["aria-invalid"] = ariaProps["aria-invalid"];
+  }
+  if (ariaProps["aria-required"] !== void 0) {
+    out["aria-required"] = ariaProps["aria-required"];
+  }
+  return out;
+}
+__name(buildTriggerAriaProps, "buildTriggerAriaProps");
+var DatePickerRoot = /* @__PURE__ */ __name(({
+  value,
+  defaultValue: defaultValue2,
+  onChange,
+  locale: localeProp,
+  minValue,
+  maxValue,
+  isDateUnavailable,
+  firstDayOfWeek,
+  placeholder,
+  disabled = false,
+  id,
+  name: _name,
+  className,
+  testID,
+  ...ariaProps
+}) => {
+  const providerLocale = useLocale();
+  const locale = localeProp ?? providerLocale;
+  const [open, setOpen] = React.useState(false);
+  const isControlled = value !== void 0;
+  const [inner, setInner] = React.useState(defaultValue2 ?? null);
+  const current = isControlled ? value ?? null : inner;
+  const handleChange = React.useCallback(
+    (date) => {
+      if (!isControlled) {
+        setInner(date);
+      }
+      onChange?.(date);
+      setOpen(false);
+    },
+    [isControlled, onChange]
+  );
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!disabled) {
+        setOpen(next);
+      }
+    },
+    [disabled]
+  );
+  const displayValue = current ? formatDate(current, locale) : null;
+  const calendarOptional = buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek);
+  const triggerAriaProps = buildTriggerAriaProps(ariaProps);
+  const colors = useThemeColors();
+  const hasError = ariaProps["aria-invalid"] === true || ariaProps["aria-invalid"] === "true";
+  const pressableStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: px(colors.radius.md),
+    paddingHorizontal: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["2"]),
+    backgroundColor: colors.semantic.background.elevated,
+    borderColor: hasError ? colors.color.danger : colors.semantic.border.default,
+    opacity: disabled ? 0.6 : 1
+  };
+  const textStyle = {
+    flex: 1,
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.md),
+    color: displayValue ? colors.semantic.text.default : colors.semantic.text.muted
+  };
+  const triggerExtraProps = {
+    role: "combobox",
+    accessibilityRole: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    ...triggerAriaProps
+  };
+  if (id !== void 0) {
+    triggerExtraProps.id = id;
+    triggerExtraProps.nativeID = id;
+  }
+  if (testID !== void 0) {
+    triggerExtraProps.testID = testID;
+  }
+  if (hasError) {
+    triggerExtraProps["aria-invalid"] = true;
+  }
+  if (ariaProps["aria-required"]) {
+    triggerExtraProps["aria-required"] = true;
+  }
+  if (disabled) {
+    triggerExtraProps["aria-disabled"] = true;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: false, className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        onPress: disabled ? void 0 : () => setOpen(!open),
+        disabled,
+        className: cn(
+          "flex-row items-center rounded-md border px-3 py-2",
+          hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
+          disabled ? "opacity-60" : void 0,
+          className
+        ),
+        style: pressableStyle,
+        ...triggerExtraProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, numberOfLines: 1, children: displayValue ?? placeholder ?? "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: px(colors.spacing["2"]) }, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: 16, color: colors.semantic.text.muted }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { "aria-label": "Date picker", side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Calendar,
+      {
+        mode: "single",
+        value: current,
+        onChange: (date) => {
+          handleChange(date);
+        },
+        locale,
+        ...calendarOptional
+      }
+    ) })
+  ] });
+}, "DatePickerRoot");
+var DatePickerRange = /* @__PURE__ */ __name(({
+  value,
+  defaultValue: defaultValue2,
+  onChange,
+  locale: localeProp,
+  minValue,
+  maxValue,
+  isDateUnavailable,
+  firstDayOfWeek,
+  placeholder,
+  disabled = false,
+  id,
+  name: _name,
+  className,
+  testID,
+  ...ariaProps
+}) => {
+  const providerLocale = useLocale();
+  const locale = localeProp ?? providerLocale;
+  const [open, setOpen] = React.useState(false);
+  const isControlled = value !== void 0;
+  const [inner, setInner] = React.useState(defaultValue2 ?? { start: null, end: null });
+  const current = isControlled ? value ?? { start: null, end: null } : inner;
+  const calendarValue = current.start !== null ? { start: current.start, end: current.end } : null;
+  const handleChange = React.useCallback(
+    (calRange) => {
+      const next = {
+        start: calRange?.start ?? null,
+        end: calRange?.end ?? null
+      };
+      if (!isControlled) {
+        setInner(next);
+      }
+      onChange?.(next);
+      if (next.start !== null && next.end !== null) {
+        setOpen(false);
+      }
+    },
+    [isControlled, onChange]
+  );
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!disabled) {
+        setOpen(next);
+      }
+    },
+    [disabled]
+  );
+  let displayValue = null;
+  if (current.start !== null) {
+    const startStr = formatDate(current.start, locale);
+    const endStr = current.end !== null ? formatDate(current.end, locale) : "";
+    displayValue = `${startStr} \u2013 ${endStr}`;
+  }
+  const calendarOptional = buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek);
+  const triggerAriaProps = buildTriggerAriaProps(ariaProps);
+  const colors = useThemeColors();
+  const hasError = ariaProps["aria-invalid"] === true || ariaProps["aria-invalid"] === "true";
+  const pressableStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: px(colors.radius.md),
+    paddingHorizontal: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["2"]),
+    backgroundColor: colors.semantic.background.elevated,
+    borderColor: hasError ? colors.color.danger : colors.semantic.border.default,
+    opacity: disabled ? 0.6 : 1
+  };
+  const textStyle = {
+    flex: 1,
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.md),
+    color: displayValue ? colors.semantic.text.default : colors.semantic.text.muted
+  };
+  const triggerExtraProps = {
+    role: "combobox",
+    accessibilityRole: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    ...triggerAriaProps
+  };
+  if (id !== void 0) {
+    triggerExtraProps.id = id;
+    triggerExtraProps.nativeID = id;
+  }
+  if (testID !== void 0) {
+    triggerExtraProps.testID = testID;
+  }
+  if (hasError) {
+    triggerExtraProps["aria-invalid"] = true;
+  }
+  if (ariaProps["aria-required"]) {
+    triggerExtraProps["aria-required"] = true;
+  }
+  if (disabled) {
+    triggerExtraProps["aria-disabled"] = true;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: false, className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        onPress: disabled ? void 0 : () => setOpen(!open),
+        disabled,
+        className: cn(
+          "flex-row items-center rounded-md border px-3 py-2",
+          hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
+          disabled ? "opacity-60" : void 0,
+          className
+        ),
+        style: pressableStyle,
+        ...triggerExtraProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, numberOfLines: 1, children: displayValue ?? placeholder ?? "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: px(colors.spacing["2"]) }, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: 16, color: colors.semantic.text.muted }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { "aria-label": "Date range picker", side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Calendar,
+      {
+        mode: "range",
+        value: calendarValue,
+        onChange: (range2) => {
+          handleChange(range2);
+        },
+        locale,
+        ...calendarOptional
+      }
+    ) })
+  ] });
+}, "DatePickerRange");
+var DatePicker = Object.assign(DatePickerRoot, {
+  Range: DatePickerRange
+});
 var DialogContext = React.createContext(null);
 var useDialogContext = /* @__PURE__ */ __name((label) => {
   const ctx = React.useContext(DialogContext);
@@ -12133,13 +12872,20 @@ exports.Button = Button;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.ContextMenu = ContextMenu;
+exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
+exports.DropdownMenu = DropdownMenu;
 exports.Field = Field;
 exports.FloatButton = FloatButton;
 exports.HStack = HStack;
 exports.Icon = Icon;
 exports.InputGroup = InputGroup;
 exports.Label = Label;
+exports.MenuContent = MenuContent;
+exports.MenuItem = MenuItem;
+exports.MenuLabel = MenuLabel;
+exports.MenuSeparator = MenuSeparator;
 exports.PAGINATION_COMPACT_BREAKPOINT = PAGINATION_COMPACT_BREAKPOINT;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
@@ -12173,6 +12919,7 @@ exports.themeDark = themeDark;
 exports.toast = toast2;
 exports.useCalendarCaption = useCalendarCaption;
 exports.usePagination = usePagination;
+exports.usePopoverContext = usePopoverContext;
 exports.useSliderInteractionActive = useSliderInteractionActive;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map