@noya-app/noya-designsystem 0.1.4 → 0.1.6

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
@@ -4982,6 +4986,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",
@@ -5399,6 +5404,17 @@ var colors = {
   activeBackground: "rgba(0,0,0,0.1)",
   scrollbar: "rgba(199,199,199,0.8)",
   placeholderDots: "rgba(0,0,0,0.3)",
+  breadcrumb: {
+    get text() {
+      return colors.textMuted;
+    },
+    get textHover() {
+      return colors.textSubtle;
+    },
+    get icon() {
+      return colors.icon;
+    }
+  },
   listView: {
     raisedBackground: "rgba(0,0,0,0.03)",
     editingBackground: "#fff"
@@ -5581,6 +5597,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