@noya-app/noya-designsystem 0.1.5 → 0.1.7

package/.turbo/turbo-build.log

@@ -5,13 +5,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.js     198.96 KB
-CJS dist/index.js.map 403.34 KB
-CJS ⚡️ Build success in 70ms
-ESM dist/index.mjs     182.68 KB
-ESM dist/index.mjs.map 403.05 KB
-ESM ⚡️ Build success in 70ms
 DTS Build start
-DTS ⚡️ Build success in 5910ms
-DTS dist/index.d.ts  54.16 KB
-DTS dist/index.d.mts 54.16 KB
+CJS dist/index.js     199.65 KB
+CJS dist/index.js.map 404.79 KB
+CJS ⚡️ Build success in 185ms
+ESM dist/index.mjs     183.34 KB
+ESM dist/index.mjs.map 404.50 KB
+ESM ⚡️ Build success in 190ms
+DTS ⚡️ Build success in 6688ms
+DTS dist/index.d.ts  54.34 KB
+DTS dist/index.d.mts 54.34 KB

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @noya-app/noya-designsystem
 
+## 0.1.7
+
+### Patch Changes
+
+- 6a13e8b: Improve multiplayer and design system
+- Updated dependencies [6a13e8b]
+  - @noya-app/noya-colorpicker@0.1.5
+  - @noya-app/noya-geometry@0.1.2
+  - @noya-app/noya-icons@0.1.2
+
+## 0.1.6
+
+### Patch Changes
+
+- 149f2f9: Improve multiplayer
+- Updated dependencies [149f2f9]
+  - @noya-app/noya-icons@0.1.1
+  - @noya-app/noya-colorpicker@0.1.4
+
 ## 0.1.5
 
 ### Patch Changes

package/dist/index.d.mts

@@ -33,7 +33,7 @@ declare function Avatar({ image, name, fallback, size, overflow, }: {
     overflow?: number;
 }): React__default.JSX.Element;
 
-type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "white" | "thin" | "floating" | "none";
+type ButtonVariant = "normal" | "primary" | "primaryGradient" | "secondary" | "secondaryBright" | "white" | "thin" | "floating" | "none";
 type ButtonSize = "normal" | "large";
 declare const ButtonElement: styled_components.StyledComponent<"button", styled_components.DefaultTheme, {
     active: boolean;
@@ -283,8 +283,8 @@ declare const DividerVertical: (props: DividerProps) => React__default.ReactElem
  * A button that opens a menu when clicked, but also allows dragging the
  */
 declare const DraggableMenuButton: <T extends string>(props: {
-    items: MenuItem<T>[];
-    onSelect: (value: T) => void;
+    items?: MenuItem<T>[] | undefined;
+    onSelect?: ((value: T) => void) | undefined;
     isVisible?: boolean | undefined;
 }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
@@ -621,6 +621,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
     onContextMenu?: () => void;
     onMenuOpenChange?: (isOpen: boolean) => void;
     onKeyDown?: (event: React__default.KeyboardEvent) => void;
+    style?: CSSProperties;
 }
 interface IVirtualizedList {
     scrollToIndex(index: number): void;
@@ -636,7 +637,9 @@ type RenderProps<T> = {
     renderItem: (item: T, index: number, info: ListViewItemInfo) => ReactNode;
     keyExtractor: (item: T, index: number) => string;
     /**
-     * Each item must have an `id` in order to be sortable
+     * Each item must have an `id` in order to be sortable.
+     *
+     * Additionally, the key extracted with `keyExtractor` must match the ListItem.Row `id`.
      */
     sortable?: boolean;
     virtualized?: Size;
@@ -758,7 +761,7 @@ declare function Progress({ value, width, height, flex, variant, }: {
     variant?: ProgressVariant;
 }): React__default.JSX.Element;
 
-type RadioGroupColorScheme = 'primary' | 'secondary';
+type RadioGroupColorScheme = "primary" | "secondary";
 declare const StyledRoot: styled_components.StyledComponent<React__default.ForwardRefExoticComponent<(ToggleGroupPrimitive.ToggleGroupSingleProps | ToggleGroupPrimitive.ToggleGroupMultipleProps) & React__default.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {
     colorScheme?: RadioGroupColorScheme | undefined;
 }, never>;
@@ -771,7 +774,7 @@ interface ItemProps {
 interface Props$9 {
     id?: string;
     value?: string;
-    onValueChange?: ComponentProps<typeof StyledRoot>['onValueChange'];
+    onValueChange?: ComponentProps<typeof StyledRoot>["onValueChange"];
     colorScheme?: RadioGroupColorScheme;
     allowEmpty?: boolean;
     children: ReactNode;
@@ -795,7 +798,7 @@ declare const SelectOption: <T extends string>(props: SelectOptionProps<T>) => R
 type ChildrenProps<T> = {
     children: ReactNode;
 } | {
-    options: T[];
+    options: readonly T[];
     getTitle?: (option: T, index: number) => string;
     onChange: (value: T) => void;
 };

package/dist/index.d.ts

@@ -33,7 +33,7 @@ declare function Avatar({ image, name, fallback, size, overflow, }: {
     overflow?: number;
 }): React__default.JSX.Element;
 
-type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "white" | "thin" | "floating" | "none";
+type ButtonVariant = "normal" | "primary" | "primaryGradient" | "secondary" | "secondaryBright" | "white" | "thin" | "floating" | "none";
 type ButtonSize = "normal" | "large";
 declare const ButtonElement: styled_components.StyledComponent<"button", styled_components.DefaultTheme, {
     active: boolean;
@@ -283,8 +283,8 @@ declare const DividerVertical: (props: DividerProps) => React__default.ReactElem
  * A button that opens a menu when clicked, but also allows dragging the
  */
 declare const DraggableMenuButton: <T extends string>(props: {
-    items: MenuItem<T>[];
-    onSelect: (value: T) => void;
+    items?: MenuItem<T>[] | undefined;
+    onSelect?: ((value: T) => void) | undefined;
     isVisible?: boolean | undefined;
 }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
@@ -621,6 +621,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
     onContextMenu?: () => void;
     onMenuOpenChange?: (isOpen: boolean) => void;
     onKeyDown?: (event: React__default.KeyboardEvent) => void;
+    style?: CSSProperties;
 }
 interface IVirtualizedList {
     scrollToIndex(index: number): void;
@@ -636,7 +637,9 @@ type RenderProps<T> = {
     renderItem: (item: T, index: number, info: ListViewItemInfo) => ReactNode;
     keyExtractor: (item: T, index: number) => string;
     /**
-     * Each item must have an `id` in order to be sortable
+     * Each item must have an `id` in order to be sortable.
+     *
+     * Additionally, the key extracted with `keyExtractor` must match the ListItem.Row `id`.
      */
     sortable?: boolean;
     virtualized?: Size;
@@ -758,7 +761,7 @@ declare function Progress({ value, width, height, flex, variant, }: {
     variant?: ProgressVariant;
 }): React__default.JSX.Element;
 
-type RadioGroupColorScheme = 'primary' | 'secondary';
+type RadioGroupColorScheme = "primary" | "secondary";
 declare const StyledRoot: styled_components.StyledComponent<React__default.ForwardRefExoticComponent<(ToggleGroupPrimitive.ToggleGroupSingleProps | ToggleGroupPrimitive.ToggleGroupMultipleProps) & React__default.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {
     colorScheme?: RadioGroupColorScheme | undefined;
 }, never>;
@@ -771,7 +774,7 @@ interface ItemProps {
 interface Props$9 {
     id?: string;
     value?: string;
-    onValueChange?: ComponentProps<typeof StyledRoot>['onValueChange'];
+    onValueChange?: ComponentProps<typeof StyledRoot>["onValueChange"];
     colorScheme?: RadioGroupColorScheme;
     allowEmpty?: boolean;
     children: ReactNode;
@@ -795,7 +798,7 @@ declare const SelectOption: <T extends string>(props: SelectOptionProps<T>) => R
 type ChildrenProps<T> = {
     children: ReactNode;
 } | {
-    options: T[];
+    options: readonly T[];
     getTitle?: (option: T, index: number) => string;
     onChange: (value: T) => void;
 };

package/dist/index.js

@@ -253,17 +253,17 @@ var ButtonElement = import_styled_components4.default.button(({ theme, active, d
     paddingBottom: "12px",
     paddingLeft: "16px"
   },
-  background: active ? theme.colors.primary : variant === "none" || variant === "thin" ? "transparent" : theme.colors.inputBackground,
+  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: theme.colors.inputBackgroundLight
+    background: variant === "primaryGradient" ? theme.colors.primaryLight : theme.colors.inputBackgroundLight
   },
   "&:active": {
-    background: theme.colors.activeBackground
+    background: variant === "primaryGradient" ? theme.colors.primary : theme.colors.activeBackground
   },
   ...variant === "primary" && {
     background: theme.colors.primary,
@@ -654,18 +654,22 @@ var style = {
   flex: "1 0 0",
   flexDirection: "column"
 };
-var AutoSizer = (0, import_react8.memo)(function AutoSizer2({ children }) {
+var AutoSizer = (0, import_react8.memo)(function AutoSizer2({
+  children,
+  className
+}) {
   const containerRef = (0, import_react8.useRef)(null);
   const containerSize = useSize(containerRef);
-  return /* @__PURE__ */ import_react8.default.createElement("div", { ref: containerRef, style }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
+  return /* @__PURE__ */ import_react8.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
 });
 var SingleDimensionAutoSizer = (0, import_react8.memo)(function SingleDimensionAutoSizer2({
   children,
-  dimension
+  dimension,
+  className
 }) {
   const containerRef = (0, import_react8.useRef)(null);
   const containerSize = useSize(containerRef, dimension);
-  return /* @__PURE__ */ import_react8.default.createElement("div", { ref: containerRef, style }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
+  return /* @__PURE__ */ import_react8.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
 });
 
 // ../noya-react-utils/src/components/FileDropTarget.tsx
@@ -2431,7 +2435,7 @@ var DraggableMenuButton = (0, import_react36.memo)(function DraggableMenuButton2
         event.preventDefault();
       }
     },
-    /* @__PURE__ */ import_react36.default.createElement(
+    items && onSelect ? /* @__PURE__ */ import_react36.default.createElement(
       DropdownMenu,
       {
         open,
@@ -2446,6 +2450,11 @@ var DraggableMenuButton = (0, import_react36.memo)(function DraggableMenuButton2
           color: isVisible || open ? color : "transparent"
         }
       ))
+    ) : /* @__PURE__ */ import_react36.default.createElement(
+      import_noya_icons5.DragHandleDots2Icon,
+      {
+        color: isVisible || open ? color : "transparent"
+      }
     )
   );
 });
@@ -3896,7 +3905,8 @@ var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
   onContextMenu,
   onSelectMenuItem,
   onMenuOpenChange,
-  onKeyDown
+  onKeyDown,
+  style: style3
 }, forwardedRef) {
   depth = Math.max(0, depth);
   const {
@@ -3930,13 +3940,14 @@ var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
     },
     [onDoubleClick]
   );
-  const isDraggingStyle = (0, import_react45.useMemo)(() => {
+  const mergedStyle = (0, import_react45.useMemo)(() => {
     return isDragging ? {
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
-      width: `calc(100% + 48px)`
-    } : void 0;
-  }, [isDragging]);
+      width: `calc(100% + 48px)`,
+      ...style3
+    } : style3;
+  }, [isDragging, style3]);
   const renderContent = ({
     relativeDropPosition,
     ...renderProps
@@ -3964,7 +3975,7 @@ var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
         "aria-selected": selected,
         divider: !isDragging && divider,
         onKeyDown,
-        style: isDraggingStyle,
+        style: mergedStyle,
         ...renderProps,
         ...mergeEventHandlers(
           { onPointerDown: renderProps.onPointerDown },
@@ -4961,6 +4972,7 @@ var StyledRoot = (0, import_styled_components31.default)(ToggleGroupPrimitive.Ro
 var StyledItem = (0, import_styled_components31.default)(ToggleGroupPrimitive.Item).withConfig({
   shouldForwardProp: (prop) => !ignoredProps3.has(prop)
 })(({ theme, colorScheme }) => ({
+  ...theme.textStyles.small,
   position: "relative",
   flex: "1 1 0",
   appearance: "none",
@@ -5558,6 +5570,9 @@ var colors2 = (0, import_immer.default)(colors, (colors3) => {
   colors3.activeBackground = "rgba(181,178,255,0.08)";
   colors3.thumbnailBackground = "#1f1d33";
   colors3.thumbnailShadow = "#1f1d3366";
+  colors3.breadcrumb.text = colors3.textMuted;
+  colors3.breadcrumb.textHover = colors3.textSubtle;
+  colors3.breadcrumb.icon = colors3.icon;
 });
 
 // src/utils/createSectionedMenu.ts
@@ -5676,8 +5691,9 @@ var RowLabel = import_styled_components35.default.span(({ theme, textStyle }) =>
     color: theme.colors.textSubtle,
     fontWeight: "bold"
   },
-  lineHeight: "19px"
+  lineHeight: "19px",
   // Button height
+  alignItems: "center"
 }));
 var LabeledRow = (0, import_react56.memo)(function LabeledRow2({
   id,