@noya-app/noya-designsystem 0.1.5 → 0.1.7

package/dist/index.mjs

@@ -137,17 +137,17 @@ var ButtonElement = styled4.button(({ theme, active, disabled, variant, size: si
     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,
@@ -558,18 +558,22 @@ var style = {
   flex: "1 0 0",
   flexDirection: "column"
 };
-var AutoSizer = memo4(function AutoSizer2({ children }) {
+var AutoSizer = memo4(function AutoSizer2({
+  children,
+  className
+}) {
   const containerRef = useRef2(null);
   const containerSize = useSize(containerRef);
-  return /* @__PURE__ */ React9.createElement("div", { ref: containerRef, style }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
+  return /* @__PURE__ */ React9.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
 });
 var SingleDimensionAutoSizer = memo4(function SingleDimensionAutoSizer2({
   children,
-  dimension
+  dimension,
+  className
 }) {
   const containerRef = useRef2(null);
   const containerSize = useSize(containerRef, dimension);
-  return /* @__PURE__ */ React9.createElement("div", { ref: containerRef, style }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
+  return /* @__PURE__ */ React9.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
 });
 
 // ../noya-react-utils/src/components/FileDropTarget.tsx
@@ -2370,7 +2374,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
         event.preventDefault();
       }
     },
-    /* @__PURE__ */ React23.createElement(
+    items && onSelect ? /* @__PURE__ */ React23.createElement(
       DropdownMenu,
       {
         open,
@@ -2385,6 +2389,11 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
           color: isVisible || open ? color : "transparent"
         }
       ))
+    ) : /* @__PURE__ */ React23.createElement(
+      DragHandleDots2Icon,
+      {
+        color: isVisible || open ? color : "transparent"
+      }
     )
   );
 });
@@ -3901,7 +3910,8 @@ var ListViewRow = forwardRef10(function ListViewRow2({
   onContextMenu,
   onSelectMenuItem,
   onMenuOpenChange,
-  onKeyDown
+  onKeyDown,
+  style: style3
 }, forwardedRef) {
   depth = Math.max(0, depth);
   const {
@@ -3935,13 +3945,14 @@ var ListViewRow = forwardRef10(function ListViewRow2({
     },
     [onDoubleClick]
   );
-  const isDraggingStyle = useMemo16(() => {
+  const mergedStyle = useMemo16(() => {
     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
@@ -3969,7 +3980,7 @@ var ListViewRow = forwardRef10(function ListViewRow2({
         "aria-selected": selected,
         divider: !isDragging && divider,
         onKeyDown,
-        style: isDraggingStyle,
+        style: mergedStyle,
         ...renderProps,
         ...mergeEventHandlers(
           { onPointerDown: renderProps.onPointerDown },
@@ -4982,6 +4993,7 @@ var StyledRoot = styled29(ToggleGroupPrimitive.Root).withConfig({
 var StyledItem = styled29(ToggleGroupPrimitive.Item).withConfig({
   shouldForwardProp: (prop) => !ignoredProps3.has(prop)
 })(({ theme, colorScheme }) => ({
+  ...theme.textStyles.small,
   position: "relative",
   flex: "1 1 0",
   appearance: "none",
@@ -5592,6 +5604,9 @@ var colors2 = produce(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
@@ -5710,8 +5725,9 @@ var RowLabel = styled33.span(({ theme, textStyle }) => ({
     color: theme.colors.textSubtle,
     fontWeight: "bold"
   },
-  lineHeight: "19px"
+  lineHeight: "19px",
   // Button height
+  alignItems: "center"
 }));
 var LabeledRow = memo29(function LabeledRow2({
   id,