@overmap-ai/blocks 1.0.34 → 1.0.35-alpha.0

package/dist/Menu/typings.d.ts

@@ -28,7 +28,7 @@ export interface MenuRootProps extends PropsWithChildren {
     loop?: boolean;
     modal?: boolean;
 }
-export interface MenuContentProps extends ComponentPropsWithRef<"div">, MenuVariantProps {
+export interface MenuContentProps extends ComponentPropsWithRef<"ul">, MenuVariantProps {
 }
 export interface MenuClickTriggerProps {
     children: ReactElement;
@@ -54,7 +54,7 @@ export interface MenuItemMeta {
     selected: boolean;
 }
 type ActiveAndSelectedItemCallback<T> = (meta: MenuItemMeta) => T;
-export interface MenuItemProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+export interface MenuItemProps extends Omit<ComponentPropsWithRef<"li">, "children" | "value"> {
     disabled?: boolean;
     children: ReactNode | ActiveAndSelectedItemCallback<ReactNode>;
     closeOnSelect?: boolean;
@@ -84,7 +84,7 @@ export interface MenuSubProps extends PropsWithChildren {
     loop?: boolean;
     modal?: boolean;
 }
-export interface SubMenuContentProps extends ComponentPropsWithRef<"div"> {
+export interface SubMenuContentProps extends ComponentPropsWithRef<"ul"> {
 }
 export interface MenuSubTriggerProps extends Omit<MenuItemProps, "closeOnSelect" | "disabled"> {
 }

package/dist/SelectContext/typings.d.ts

@@ -4,7 +4,7 @@ type _SingleSelectProps<TValue> = {
     value?: TValue;
 };
 export type SingleSelectRequiredProps<TValue> = _SingleSelectProps<TValue>;
-export type SingleSelectNotRequiredProps<TValue> = _SingleSelectProps<TValue | null>;
+export type SingleSelectNotRequiredProps<TValue> = _SingleSelectProps<TValue | undefined>;
 export type SingleSelectProps<TValue> = (SingleSelectRequiredProps<TValue> & {
     required: true;
 }) | (SingleSelectNotRequiredProps<TValue> & {

package/dist/blocks.js

@@ -118,9 +118,11 @@ const Provider = (props) => {
 const dialogOverlay = cva([
   "fixed",
   "inset-0",
-  "duration-200",
+  // background
   "bg-(--black-a6)",
   "dark:bg-(--black-a8)",
+  // background and border
+  "duration-200",
   "data-[state='open']:animate-in",
   "data-[state='open']:fade-in-0",
   "data-[state='closed']:animate-out",
@@ -128,24 +130,25 @@ const dialogOverlay = cva([
 ]);
 const dialogContent = cva(
   [
-    "flex",
-    "flex-col",
     "h-max",
-    "[scrollbar-width:thin]",
-    "[scrollbar-color:var(--base-6)_transparent]",
     "max-h-3/4",
-    "shadow-md",
     "overflow-hidden",
     "w-full",
+    // background and border
+    "shadow-md",
     "bg-(--color-background)",
     "dark:bg-(--base-2)",
     "ring-1",
     "ring-(--base-a6)",
+    "[scrollbar-width:thin]",
+    "[scrollbar-color:var(--base-6)_transparent]",
+    // positioning
     "fixed",
     "left-[50%]",
     "top-[50%]",
     "translate-x-[-50%]",
     "translate-y-[-50%]",
+    // animation
     "duration-200",
     "data-[state='open']:animate-in",
     "data-[state='open']:fade-in-0",
@@ -222,10 +225,13 @@ ButtonGroup.displayName = "Buttons";
 const useButtonGroup = () => useContext(ButtonGroupContext);
 const buttonCva = cva(
   [
-    "flex",
+    "inline-flex",
     "items-center",
     "justify-center",
     "shrink-0",
+    "whitespace-nowrap",
+    "text-center",
+    "align-top",
     // select
     "cursor-pointer",
     "select-none",
@@ -478,7 +484,7 @@ const AlertDialog = {
   Cancel: RadixAlertDialog.Cancel
 };
 const AvatarContext = createContext({});
-const avatar = cva(["shrink-0", "select-none", "inline-block"], {
+const avatar = cva(["shrink-0", "select-none", "inline-block", "align-middle"], {
   variants: {
     size: {
       xs: ["h-5", "w-5", "text-xs"],
@@ -492,7 +498,7 @@ const avatar = cva(["shrink-0", "select-none", "inline-block"], {
     size: "md"
   }
 });
-const avatarFallback = cva(["flex", "items-center", "justify-center", "w-full", "h-full", "rounded-[inherit]"], {
+const avatarFallback = cva(["flex", "items-center", "justify-center", "size-full", "rounded-[inherit]"], {
   variants: {
     variant: {
       solid: ["bg-(--accent-9)", "text-(--accent-contrast)"],
@@ -551,7 +557,7 @@ const Avatar = {
   Image: AvatarImage,
   Root: AvatarRoot
 };
-const badge = cva(["inline-flex", "items-center", "shrink-0"], {
+const badge = cva(["inline-flex", "items-center", "shrink-0", "whitespace-nowrap"], {
   variants: {
     icon: {
       true: ["justify-center"],
@@ -709,6 +715,7 @@ CheckboxIndicator.displayName = "CheckboxIndicator";
 const checkbox = cva(
   [
     "shrink-0",
+    "align-top",
     // select
     "cursor-pointer",
     "select-none",
@@ -1457,12 +1464,12 @@ const SingleSelectRequiredProvider = genericMemo(function SingleSelectRequiredPr
   return /* @__PURE__ */ jsx(SelectContext, { value: contextValue, children });
 });
 const SingleSelectNotRequiredProvider = genericMemo(function SingleSelectNotRequiredProvider2(props) {
-  const { children, defaultValue = null, value: controlledValue, onValueChange } = props;
+  const { children, defaultValue = void 0, value: controlledValue, onValueChange } = props;
   const [value, setValue] = useControlledState(defaultValue, controlledValue, onValueChange);
   const selected = useCallback((v) => v === value, [value]);
   const selectValue = useCallback(
     (v) => {
-      setValue(selected(v) ? null : v);
+      setValue(selected(v) ? void 0 : v);
     },
     [selected, setValue]
   );
@@ -2768,11 +2775,11 @@ const menuContent = cva(
   {
     variants: {
       size: {
-        xs: ["p-0.5", "text-xs"],
-        sm: ["p-0.75", "text-sm"],
-        md: ["p-1", "text-md"],
-        lg: ["p-1.25", "text-lg"],
-        xl: ["p-1.5", "text-xl"]
+        xs: ["p-0.5", "text-xs", "min-w-30"],
+        sm: ["p-0.75", "text-sm", "min-w-35"],
+        md: ["p-1", "text-md", "min-w-40"],
+        lg: ["p-1.25", "text-lg", "min-w-45"],
+        xl: ["p-1.5", "text-xl", "min-w-50"]
       },
       radius: {
         none: ["rounded-none"],
@@ -3029,7 +3036,7 @@ const MenuContent = memo((props) => {
               "data-floating-content": "",
               ...getFloatingProps(),
               children: /* @__PURE__ */ jsx(
-                "div",
+                "ul",
                 {
                   className: cx(
                     className,
@@ -3176,8 +3183,8 @@ const MenuItem = memo((props) => {
     (e) => {
       e.stopPropagation();
       if (disabled) return;
-      if (onClick) onClick(e);
-      if (onSelect) onSelect();
+      onClick == null ? void 0 : onClick(e);
+      onSelect == null ? void 0 : onSelect();
       if (closeOnSelect) setOpen(false);
       if (closeRoot) rootMenuContext.setOpen(false);
     },
@@ -3186,9 +3193,9 @@ const MenuItem = memo((props) => {
   const handleKeyDown = useCallback(
     (e) => {
       if (disabled) return;
-      if (onKeyDown) onKeyDown(e);
+      onKeyDown == null ? void 0 : onKeyDown(e);
       if (TRIGGER_SELECT_KEYS.includes(e.key)) {
-        if (onSelect) onSelect();
+        onSelect == null ? void 0 : onSelect();
         if (closeOnSelect) setOpen(false);
       }
     },
@@ -3199,7 +3206,7 @@ const MenuItem = memo((props) => {
     return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
   }, [children, isActive]);
   return /* @__PURE__ */ jsx(
-    "div",
+    "li",
     {
       className: cx(className, menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true })),
       ref: mergeRefs2,
@@ -3394,7 +3401,7 @@ const MenuMultiSelectItem = genericMemo(function(props) {
   }, [registerValue, value]);
   const isSelected = selected(value);
   const handleSelect = useCallback(() => {
-    if (onSelect) onSelect();
+    onSelect == null ? void 0 : onSelect();
     selectValue(value);
   }, [onSelect, selectValue, value]);
   const computedChildren = useMemo(() => {
@@ -3434,10 +3441,10 @@ const MenuPageTrigger = memo((props) => {
   const { setActivePage } = usePagesContext();
   const handleSelect = useCallback(() => {
     var _a;
+    onSelect == null ? void 0 : onSelect();
     setActivePage(page);
     (_a = refs.floating.current) == null ? void 0 : _a.focus();
     setActiveIndex(null);
-    if (onSelect) onSelect();
   }, [onSelect, page, refs.floating, setActiveIndex, setActivePage]);
   return /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, closeOnSelect: false, ...rest });
 });
@@ -3497,7 +3504,7 @@ const MenuSelectItem = genericMemo(function(props) {
   const { selected, selectValue } = use(SelectContext);
   const isSelected = useMemo(() => selected(value), [selected, value]);
   const handleSelect = useCallback(() => {
-    if (onSelect) onSelect();
+    onSelect == null ? void 0 : onSelect();
     selectValue(value);
   }, [onSelect, selectValue, value]);
   const computedChildren = useMemo(() => {
@@ -3574,7 +3581,7 @@ const MenuSubContent = memo((props) => {
           style: computedFloatingStyles,
           ...getFloatingProps(),
           children: /* @__PURE__ */ jsx(
-            "div",
+            "ul",
             {
               className: cx(
                 "overmap-menu-sub-content",
@@ -3672,17 +3679,23 @@ const Menu = {
 };
 const RiIcon = memo(
   forwardRef((props, ref) => {
-    const { icon, size: size2, title, color, ...rest } = props;
+    const { icon, size: size2, title, color, className, ...rest } = props;
     const Icon = RiIcons[icon];
     if (!Icon) console.error(`Icon ${icon} not found`);
     return Icon ? (
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      /* @__PURE__ */ jsx(Icon, { ref, title, size: size2, color, ...rest })
-    ) : (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      /* @__PURE__ */ jsx(RiQuestionMark, { ref, title, size: size2, color, ...rest })
+      /* @__PURE__ */ jsx(Icon, { className: cx(className, "shrink-0"), ref, title, size: size2, color, ...rest })
+    ) : /* @__PURE__ */ jsx(
+      RiQuestionMark,
+      {
+        className: cx(className, "shrink-0"),
+        ref,
+        title,
+        size: size2,
+        color,
+        ...rest
+      }
     );
   })
 );
@@ -3782,12 +3795,25 @@ const Popover = {
 };
 const RadioGroupIndicator = forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: cx(className, "flex items-center justify-center"), ref, ...rest });
+  return /* @__PURE__ */ jsx(
+    RadixRadioGroup.Indicator,
+    {
+      className: cx(className, "inline-flex items-center justify-center"),
+      ref,
+      ...rest
+    }
+  );
 });
 RadioGroupIndicator.displayName = "RadioGroupIndicator";
 const RadioGroupContext = createContext({});
 const radioGroupItem = cva(
   [
+    "inline-flex",
+    "justify-center",
+    "items-center",
+    "shrink-0",
+    "align-top",
+    "cursor-pointer",
     "rounded-full",
     "focus-visible:outline-2",
     "focus-visible:outline-(--accent-a8)",
@@ -3827,14 +3853,7 @@ const RadioGroupItem = memo(
   forwardRef((props, ref) => {
     const radioGroupContext = useContext(RadioGroupContext);
     const { className, size: size2 = radioGroupContext.size, variant = radioGroupContext.variant, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      RadixRadioGroup.Item,
-      {
-        className: cx(className, radioGroupItem({ size: size2, variant }), "flex", "justify-center", "items-center"),
-        ref,
-        ...rest
-      }
-    );
+    return /* @__PURE__ */ jsx(RadixRadioGroup.Item, { className: cx(className, radioGroupItem({ size: size2, variant })), ref, ...rest });
   })
 );
 const RadioGroupRoot = memo(
@@ -3856,22 +3875,25 @@ const RadioGroup = {
   Item: RadioGroupItem,
   Root: RadioGroupRoot
 };
-const segmentedControlRootCva = cva(["shrink-0", "transition-colors", "flex", "box-border"], {
-  variants: {
-    variant: {
-      soft: ["bg-(--accent-a3)"],
-      surface: ["bg-(--accent-surface)", "border", "border-(--accent-a6)"],
-      outline: ["bg-transparent", "border", "border-(--accent-a6)"]
-    },
-    size: {
-      xs: ["h-5", "text-xs"],
-      sm: ["h-6", "text-sm"],
-      md: ["h-7", "text-base"],
-      lg: ["h-8", "text-lg"],
-      xl: ["h-9", "text-xl"]
+const segmentedControlRootCva = cva(
+  ["shrink-0", "transition-colors", "inline-flex", "box-border", "min-w-max", "text-center"],
+  {
+    variants: {
+      variant: {
+        soft: ["bg-(--accent-a3)"],
+        surface: ["bg-(--accent-surface)", "border", "border-(--accent-a6)"],
+        outline: ["bg-transparent", "border", "border-(--accent-a6)"]
+      },
+      size: {
+        xs: ["h-5", "text-xs"],
+        sm: ["h-6", "text-sm"],
+        md: ["h-7", "text-base"],
+        lg: ["h-8", "text-lg"],
+        xl: ["h-9", "text-xl"]
+      }
     }
   }
-});
+);
 const segmentedControlItemCva = cva(
   [
     "h-full",
@@ -4051,26 +4073,29 @@ const SegmentedControl = {
   Root: SegmentedControlRoot
 };
 const SegmentedTabsListContext = createContext({});
-const segmentedTabsListCva = cva(["shrink-0", "transition-colors", "flex", "box-border"], {
-  variants: {
-    variant: {
-      soft: ["bg-(--accent-a3)"],
-      surface: ["bg-(--accent-surface)", "border", "border-(--accent-a6)"],
-      outline: ["bg-transparent", "border", "border-(--accent-a6)"]
+const segmentedTabsListCva = cva(
+  ["shrink-0", "transition-colors", "inline-flex", "box-border", "min-w-max", "text-center"],
+  {
+    variants: {
+      variant: {
+        soft: ["bg-(--accent-a3)"],
+        surface: ["bg-(--accent-surface)", "border", "border-(--accent-a6)"],
+        outline: ["bg-transparent", "border", "border-(--accent-a6)"]
+      },
+      size: {
+        xs: ["h-5", "text-xs"],
+        sm: ["h-6", "text-sm"],
+        md: ["h-7", "text-base"],
+        lg: ["h-8", "text-lg"],
+        xl: ["h-9", "text-xl"]
+      }
     },
-    size: {
-      xs: ["h-5", "text-xs"],
-      sm: ["h-6", "text-sm"],
-      md: ["h-7", "text-base"],
-      lg: ["h-8", "text-lg"],
-      xl: ["h-9", "text-xl"]
+    defaultVariants: {
+      variant: "surface",
+      size: "md"
     }
-  },
-  defaultVariants: {
-    variant: "surface",
-    size: "md"
   }
-});
+);
 const segmentedTabsTriggerCva = cva(
   [
     "h-full",