@noya-app/noya-designsystem 0.1.4 → 0.1.6

package/.turbo/turbo-build.log

@@ -5,13 +5,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-ESM dist/index.mjs     182.50 KB
-ESM dist/index.mjs.map 402.42 KB
-ESM ⚡️ Build success in 89ms
-CJS dist/index.js     198.78 KB
-CJS dist/index.js.map 402.70 KB
-CJS ⚡️ Build success in 89ms
+ESM dist/index.mjs     183.12 KB
+ESM dist/index.mjs.map 404.00 KB
+ESM ⚡️ Build success in 111ms
+CJS dist/index.js     199.40 KB
+CJS dist/index.js.map 404.28 KB
+CJS ⚡️ Build success in 112ms
 DTS Build start
-DTS ⚡️ Build success in 5952ms
-DTS dist/index.d.ts  53.87 KB
-DTS dist/index.d.mts 53.87 KB
+DTS ⚡️ Build success in 6149ms
+DTS dist/index.d.ts  54.18 KB
+DTS dist/index.d.mts 54.18 KB

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @noya-app/noya-designsystem
 
+## 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
+
+- @noya-app/noya-colorpicker@0.1.3
+
 ## 0.1.4
 
 ### 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;
@@ -114,6 +114,11 @@ declare const colors$1: {
     activeBackground: string;
     scrollbar: string;
     placeholderDots: string;
+    breadcrumb: {
+        readonly text: string;
+        readonly textHover: string;
+        readonly icon: string;
+    };
     listView: {
         raisedBackground: string;
         editingBackground: string;
@@ -753,7 +758,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>;
@@ -766,7 +771,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;
@@ -878,6 +883,7 @@ interface StyleProps$1 {
     pointerEvents?: CSSProperties["pointerEvents"];
     lineHeight?: CSSProperties["lineHeight"];
     isolation?: CSSProperties["isolation"];
+    backdropFilter?: CSSProperties["backdropFilter"];
 }
 type StackBreakpointList = BreakpointCollection<StyleProps$1>;
 interface Props$4 extends StyleProps$1 {
@@ -1142,6 +1148,11 @@ declare const colors: {
     activeBackground: string;
     scrollbar: string;
     placeholderDots: string;
+    breadcrumb: {
+        readonly text: string;
+        readonly textHover: string;
+        readonly icon: string;
+    };
     listView: {
         raisedBackground: string;
         editingBackground: string;

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;
@@ -114,6 +114,11 @@ declare const colors$1: {
     activeBackground: string;
     scrollbar: string;
     placeholderDots: string;
+    breadcrumb: {
+        readonly text: string;
+        readonly textHover: string;
+        readonly icon: string;
+    };
     listView: {
         raisedBackground: string;
         editingBackground: string;
@@ -753,7 +758,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>;
@@ -766,7 +771,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;
@@ -878,6 +883,7 @@ interface StyleProps$1 {
     pointerEvents?: CSSProperties["pointerEvents"];
     lineHeight?: CSSProperties["lineHeight"];
     isolation?: CSSProperties["isolation"];
+    backdropFilter?: CSSProperties["backdropFilter"];
 }
 type StackBreakpointList = BreakpointCollection<StyleProps$1>;
 interface Props$4 extends StyleProps$1 {
@@ -1142,6 +1148,11 @@ declare const colors: {
     activeBackground: string;
     scrollbar: string;
     placeholderDots: string;
+    breadcrumb: {
+        readonly text: string;
+        readonly textHover: string;
+        readonly icon: string;
+    };
     listView: {
         raisedBackground: string;
         editingBackground: string;

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
@@ -4961,6 +4965,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",
@@ -5365,6 +5370,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"
@@ -5547,6 +5563,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