@noya-app/noya-designsystem 0.1.8 → 0.1.10

package/.turbo/turbo-build.log

@@ -5,13 +5,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-ESM dist/index.mjs     183.55 KB
-ESM dist/index.mjs.map 407.50 KB
-ESM ⚡️ Build success in 103ms
-CJS dist/index.js     199.76 KB
-CJS dist/index.js.map 407.69 KB
-CJS ⚡️ Build success in 103ms
+ESM dist/index.mjs     186.07 KB
+ESM dist/index.mjs.map 412.81 KB
+ESM ⚡️ Build success in 109ms
+CJS dist/index.js     202.28 KB
+CJS dist/index.js.map 413.01 KB
+CJS ⚡️ Build success in 112ms
 DTS Build start
-DTS ⚡️ Build success in 5984ms
-DTS dist/index.d.ts  54.34 KB
-DTS dist/index.d.mts 54.34 KB
+DTS ⚡️ Build success in 6370ms
+DTS dist/index.d.ts  54.64 KB
+DTS dist/index.d.mts 54.64 KB

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @noya-app/noya-designsystem
 
+## 0.1.10
+
+### Patch Changes
+
+- c93caa1: Improve menu style
+- Updated dependencies [c93caa1]
+  - @noya-app/noya-keymap@0.1.1
+
+## 0.1.9
+
+### Patch Changes
+
+- @noya-app/noya-colorpicker@0.1.7
+
 ## 0.1.8
 
 ### Patch Changes

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import React__default, { CSSProperties, ReactNode, ReactElement, ComponentProps,
 import * as styled_components from 'styled-components';
 import { CSSObject, CSSProperties as CSSProperties$1 } from 'styled-components';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Sketch } from '@noya-app/noya-file-format';
 import * as csstype from 'csstype';
 import { Property } from 'csstype';
@@ -40,6 +41,7 @@ declare const ButtonElement: styled_components.StyledComponent<"button", styled_
     variant: ButtonVariant;
     size: ButtonSize;
     flex?: CSSProperties["flex"];
+    defaultBackground?: string | undefined;
 }, never>;
 interface ButtonRootProps {
     id?: string;
@@ -56,6 +58,7 @@ interface ButtonRootProps {
     onClick?: (event: React__default.MouseEvent) => void;
     onPointerDown?: (event: React__default.PointerEvent) => void;
     contentStyle?: CSSProperties;
+    defaultBackground?: string;
     as?: React__default.ElementType;
     href?: string;
     target?: string;
@@ -291,7 +294,7 @@ declare const DraggableMenuButton: <T extends string>(props: {
 declare const DropdownMenu: <T extends string>(props: MenuProps<T> & {
     open?: boolean | undefined;
     onCloseAutoFocus?: ((event: React__default.SyntheticEvent<unknown, Event>) => void) | undefined;
-} & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+} & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const SUPPORTED_IMAGE_UPLOAD_TYPES: ("image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
 declare const SUPPORTED_CANVAS_UPLOAD_TYPES: ("" | "image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import React__default, { CSSProperties, ReactNode, ReactElement, ComponentProps,
 import * as styled_components from 'styled-components';
 import { CSSObject, CSSProperties as CSSProperties$1 } from 'styled-components';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Sketch } from '@noya-app/noya-file-format';
 import * as csstype from 'csstype';
 import { Property } from 'csstype';
@@ -40,6 +41,7 @@ declare const ButtonElement: styled_components.StyledComponent<"button", styled_
     variant: ButtonVariant;
     size: ButtonSize;
     flex?: CSSProperties["flex"];
+    defaultBackground?: string | undefined;
 }, never>;
 interface ButtonRootProps {
     id?: string;
@@ -56,6 +58,7 @@ interface ButtonRootProps {
     onClick?: (event: React__default.MouseEvent) => void;
     onPointerDown?: (event: React__default.PointerEvent) => void;
     contentStyle?: CSSProperties;
+    defaultBackground?: string;
     as?: React__default.ElementType;
     href?: string;
     target?: string;
@@ -291,7 +294,7 @@ declare const DraggableMenuButton: <T extends string>(props: {
 declare const DropdownMenu: <T extends string>(props: MenuProps<T> & {
     open?: boolean | undefined;
     onCloseAutoFocus?: ((event: React__default.SyntheticEvent<unknown, Event>) => void) | undefined;
-} & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+} & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const SUPPORTED_IMAGE_UPLOAD_TYPES: ("image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
 declare const SUPPORTED_CANVAS_UPLOAD_TYPES: ("" | "image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];

package/dist/index.js

@@ -230,94 +230,104 @@ var Tooltip = (0, import_react3.memo)(function Tooltip2({ children, content }) {
 });
 
 // src/components/Button.tsx
-var ButtonElement = import_styled_components4.default.button(({ theme, active, disabled, variant, size: size2, flex }) => ({
-  ...size2 === "large" ? theme.textStyles.heading4 : theme.textStyles.small,
-  textDecoration: "none",
-  lineHeight: "1",
-  flex: flex ?? "0 0 auto",
-  position: "relative",
-  border: "0",
-  outline: "none",
-  WebkitAppRegion: "no-drag",
-  userSelect: "none",
-  minWidth: variant === "normal" ? "31px" : void 0,
-  textAlign: "left",
-  borderRadius: "4px",
-  paddingTop: variant === "none" ? "0px" : "4px",
-  paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
-  paddingBottom: variant === "none" ? "0px" : "4px",
-  paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
-  ...size2 === "large" && {
-    paddingTop: "12px",
-    paddingRight: "16px",
-    paddingBottom: "12px",
-    paddingLeft: "16px"
-  },
-  background: active ? theme.colors.primary : variant === "primaryGradient" ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})` : variant === "none" || variant === "thin" ? "transparent" : theme.colors.inputBackground,
-  color: active ? "white" : theme.colors.text,
-  opacity: disabled ? 0.25 : 1,
-  "&:focus": {
-    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`
-  },
-  "&:hover": {
-    background: variant === "primaryGradient" || active ? theme.colors.primaryLight : theme.colors.inputBackgroundLight
-  },
-  "&:active": {
-    background: variant === "primaryGradient" ? theme.colors.primary : theme.colors.activeBackground
-  },
-  ...variant === "primary" && {
-    background: theme.colors.primary,
-    color: "white",
-    "&:hover": {
-      background: theme.colors.primaryLight
+var ButtonElement = import_styled_components4.default.button(
+  ({
+    theme,
+    active,
+    disabled,
+    variant,
+    size: size2,
+    flex,
+    defaultBackground = theme.colors.inputBackground
+  }) => ({
+    ...size2 === "large" ? theme.textStyles.heading4 : theme.textStyles.small,
+    textDecoration: "none",
+    lineHeight: "1",
+    flex: flex ?? "0 0 auto",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    WebkitAppRegion: "no-drag",
+    userSelect: "none",
+    minWidth: variant === "normal" ? "31px" : void 0,
+    textAlign: "left",
+    borderRadius: "4px",
+    paddingTop: variant === "none" ? "0px" : "4px",
+    paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
+    paddingBottom: variant === "none" ? "0px" : "4px",
+    paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
+    ...size2 === "large" && {
+      paddingTop: "12px",
+      paddingRight: "16px",
+      paddingBottom: "12px",
+      paddingLeft: "16px"
     },
-    "&:active": {
-      background: theme.colors.primary
-    }
-  },
-  ...variant === "secondary" && {
-    background: theme.colors.secondary,
-    color: "white",
-    "&:hover": {
-      background: theme.colors.secondaryLight
+    background: active ? theme.colors.primary : variant === "primaryGradient" ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})` : variant === "none" || variant === "thin" ? "transparent" : defaultBackground,
+    color: active ? "white" : theme.colors.text,
+    opacity: disabled ? 0.25 : 1,
+    "&:focus": {
+      boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`
     },
-    "&:active": {
-      background: theme.colors.secondary
-    }
-  },
-  ...variant === "secondaryBright" && {
-    background: "#0ab557",
-    color: "white",
     "&:hover": {
-      opacity: 0.8
+      background: variant === "primaryGradient" || active ? theme.colors.primaryLight : theme.colors.inputBackgroundLight
     },
     "&:active": {
-      opacity: 0.9
-    }
-  },
-  ...variant === "white" && {
-    background: "white",
-    "&:hover": {
-      opacity: 0.8
+      background: variant === "primaryGradient" || active ? theme.colors.primary : theme.colors.activeBackground
     },
-    "&:active": {
-      opacity: 0.9
+    ...variant === "primary" && {
+      background: theme.colors.primary,
+      color: "white",
+      "&:hover": {
+        background: theme.colors.primaryLight
+      },
+      "&:active": {
+        background: theme.colors.primary
+      }
+    },
+    ...variant === "secondary" && {
+      background: theme.colors.secondary,
+      color: "white",
+      "&:hover": {
+        background: theme.colors.secondaryLight
+      },
+      "&:active": {
+        background: theme.colors.secondary
+      }
+    },
+    ...variant === "secondaryBright" && {
+      background: "#0ab557",
+      color: "white",
+      "&:hover": {
+        opacity: 0.8
+      },
+      "&:active": {
+        opacity: 0.9
+      }
+    },
+    ...variant === "white" && {
+      background: "white",
+      "&:hover": {
+        opacity: 0.8
+      },
+      "&:active": {
+        opacity: 0.9
+      }
+    },
+    ...variant === "floating" && {
+      background: "white",
+      color: theme.colors.text,
+      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+      fontSize: "12px",
+      padding: "0px 4px"
+    },
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "& *": {
+      pointerEvents: "none"
     }
-  },
-  ...variant === "floating" && {
-    background: "white",
-    color: theme.colors.text,
-    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-    fontSize: "12px",
-    padding: "0px 4px"
-  },
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  "& *": {
-    pointerEvents: "none"
-  }
-}));
+  })
+);
 var ButtonContent = import_styled_components4.default.span(({ theme }) => ({
   // Line height of small text - maybe figure out better way to ensure
   // icons don't have a smaller height
@@ -341,6 +351,7 @@ var Button = (0, import_react4.forwardRef)(function Button2({
   variant = "normal",
   size: size2 = "normal",
   contentStyle,
+  defaultBackground,
   onClick,
   children,
   ...rest
@@ -359,6 +370,7 @@ var Button = (0, import_react4.forwardRef)(function Button2({
       disabled,
       variant,
       size: size2,
+      defaultBackground,
       onClick,
       onDoubleClick: (0, import_react4.useCallback)((event) => {
         event.stopPropagation();
@@ -791,6 +803,85 @@ var import_react22 = require("react");
 var import_noya_utils4 = require("@noya-app/noya-utils");
 var import_react23 = require("react");
 
+// ../emitter/src/index.ts
+var Emitter = class {
+  constructor(options = {}) {
+    this.bufferEventsIfNoListeners = options.bufferEventsIfNoListeners ?? false;
+  }
+  bufferEventsIfNoListeners;
+  listeners = [];
+  addListener = (f, options = {}) => {
+    if (options.once) {
+      const handler = (...args) => {
+        this.removeListener(handler);
+        return f(...args);
+      };
+      this.listeners.push(handler);
+    } else {
+      this.listeners.push(f);
+    }
+    if (this.bufferedEvents.length > 0) {
+      const eventsToEmit = this.bufferedEvents;
+      this.bufferedEvents = [];
+      eventsToEmit.forEach((event) => {
+        this.emit(...event);
+      });
+    }
+    return () => this.removeListener(f);
+  };
+  removeListener = (f) => {
+    const index = this.listeners.indexOf(f);
+    if (index === -1)
+      return;
+    this.listeners.splice(index, 1);
+  };
+  emit = (...args) => {
+    if (this.bufferEventsIfNoListeners && this.listeners.length === 0) {
+      this.bufferedEvents.push(args);
+      return;
+    }
+    this.listeners.forEach((l) => l(...args));
+  };
+  bufferedEvents = [];
+};
+
+// ../noya-react-utils/src/utils/ClientStorage.ts
+var ClientStorage = class {
+  getItem(storageKey) {
+    if (typeof localStorage === "undefined") {
+      return null;
+    }
+    return localStorage.getItem(storageKey);
+  }
+  setItem(storageKey, value) {
+    if (typeof localStorage === "undefined") {
+      return;
+    }
+    if (value === null) {
+      localStorage.removeItem(storageKey);
+    } else {
+      localStorage.setItem(storageKey, value);
+    }
+    this.emitter.emit(storageKey, value);
+  }
+  emitter = new Emitter();
+  _isListening = false;
+  addListener(storageKey, listener) {
+    if (!this._isListening && typeof window !== "undefined") {
+      this._isListening = true;
+      window.addEventListener("storage", (event) => {
+        this.emitter.emit(event.key, event.newValue);
+      });
+    }
+    return this.emitter.addListener((key, value) => {
+      if (key === storageKey) {
+        listener(value);
+      }
+    });
+  }
+};
+var clientStorage = new ClientStorage();
+
 // ../noya-react-utils/src/utils/assignRef.ts
 function assignRef(ref, value) {
   if (typeof ref === "function") {
@@ -867,7 +958,7 @@ var styles = {
   separatorStyle: ({ theme }) => ({
     height: "1px",
     backgroundColor: theme.colors.divider,
-    margin: "4px 8px"
+    margin: "4px -4px"
   }),
   itemStyle: ({
     theme,
@@ -880,7 +971,7 @@ var styles = {
     userSelect: "none",
     cursor: "pointer",
     borderRadius: "3px",
-    padding: "4px 8px",
+    padding: "6px 8px",
     ...disabled && {
       color: theme.colors.textDisabled
     },
@@ -1011,7 +1102,16 @@ var DropdownMenuItem = (0, import_react26.memo)(function ContextMenuItem({
   }
   const element = /* @__PURE__ */ import_react26.default.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, icon, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react26.default.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react26.default.createElement(import_noya_icons.ChevronRightIcon, null)));
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react26.default.createElement(DropdownMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ import_react26.default.createElement(
+      DropdownMenuRoot,
+      {
+        isNested: true,
+        items,
+        onSelect,
+        alignOffset: -5
+      },
+      element
+    );
   } else {
     return element;
   }
@@ -1026,7 +1126,12 @@ var DropdownMenuRoot = (0, import_react26.forwardRef)(function DropdownMenuRoot2
   shouldBindKeyboardShortcuts,
   onOpenChange,
   open,
-  onCloseAutoFocus
+  onCloseAutoFocus,
+  side,
+  sideOffset = 4,
+  align,
+  alignOffset,
+  collisionPadding = 8
 }, forwardedRef) {
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
@@ -1043,9 +1148,12 @@ var DropdownMenuRoot = (0, import_react26.forwardRef)(function DropdownMenuRoot2
   return /* @__PURE__ */ import_react26.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react26.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ import_react26.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react26.default.createElement(
     ContentComponent,
     {
-      sideOffset: 4,
+      side,
+      sideOffset,
+      align,
+      alignOffset,
       style: contentStyle,
-      collisionPadding: 8,
+      collisionPadding,
       ...{ onCloseAutoFocus }
     },
     items.map(