@noya-app/noya-designsystem 0.1.24 → 0.1.25

package/.turbo/turbo-build.log

@@ -5,13 +5,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
+ESM dist/index.mjs     216.08 KB
+ESM dist/index.mjs.map 471.92 KB
+ESM ⚡️ Build success in 141ms
+CJS dist/index.js     234.49 KB
+CJS dist/index.js.map 471.82 KB
+CJS ⚡️ Build success in 141ms
 DTS Build start
-ESM dist/index.mjs     213.95 KB
-ESM dist/index.mjs.map 468.02 KB
-ESM ⚡️ Build success in 297ms
-CJS dist/index.js     232.25 KB
-CJS dist/index.js.map 467.92 KB
-CJS ⚡️ Build success in 336ms
-DTS ⚡️ Build success in 10367ms
-DTS dist/index.d.ts  61.69 KB
-DTS dist/index.d.mts 61.69 KB
+DTS ⚡️ Build success in 11480ms
+DTS dist/index.d.ts  62.01 KB
+DTS dist/index.d.mts 62.01 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @noya-app/noya-designsystem
 
+## 0.1.25
+
+### Patch Changes
+
+- b1903d5: Update json editor and improve multiplayer sync
+
 ## 0.1.24
 
 ### Patch Changes

package/dist/index.d.mts

@@ -73,7 +73,7 @@ interface ButtonRootProps {
 declare const Button: (props: ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type ChipColorScheme = "primary" | "secondary" | "error";
-type ChipSize = "small" | "medium";
+type ChipSize = "small" | "medium" | "large";
 type ChipVariant = "solid" | "outlined" | "ghost";
 interface ChipProps {
     id?: string;
@@ -539,6 +539,7 @@ declare namespace InputField {
         onClick?: (() => void) | undefined;
     }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
     const Label: (props: InputFieldLabelProps & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const PrimitiveElement: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 }
 
 declare function fuzzyScore({ item, query }: {
@@ -871,6 +872,8 @@ type Props$8<T extends string> = {
     value: T;
     onSelect?: (value: T) => void;
     placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
 };
 declare const SelectMenu: <T extends string = string>(props: Props$8<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
@@ -975,8 +978,9 @@ interface Props$4 {
     value: boolean;
     onChange: (value: boolean) => void;
     colorScheme?: SwitchColorScheme;
+    disabled?: boolean;
 }
-declare const Switch: ({ value, onChange, colorScheme, }: Props$4) => React__default.JSX.Element;
+declare const Switch: ({ value, onChange, colorScheme, disabled, }: Props$4) => React__default.JSX.Element;
 
 type StyleProps = {
     flex?: CSSProperties$1["flex"];

package/dist/index.d.ts

@@ -73,7 +73,7 @@ interface ButtonRootProps {
 declare const Button: (props: ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type ChipColorScheme = "primary" | "secondary" | "error";
-type ChipSize = "small" | "medium";
+type ChipSize = "small" | "medium" | "large";
 type ChipVariant = "solid" | "outlined" | "ghost";
 interface ChipProps {
     id?: string;
@@ -539,6 +539,7 @@ declare namespace InputField {
         onClick?: (() => void) | undefined;
     }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
     const Label: (props: InputFieldLabelProps & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const PrimitiveElement: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 }
 
 declare function fuzzyScore({ item, query }: {
@@ -871,6 +872,8 @@ type Props$8<T extends string> = {
     value: T;
     onSelect?: (value: T) => void;
     placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
 };
 declare const SelectMenu: <T extends string = string>(props: Props$8<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
@@ -975,8 +978,9 @@ interface Props$4 {
     value: boolean;
     onChange: (value: boolean) => void;
     colorScheme?: SwitchColorScheme;
+    disabled?: boolean;
 }
-declare const Switch: ({ value, onChange, colorScheme, }: Props$4) => React__default.JSX.Element;
+declare const Switch: ({ value, onChange, colorScheme, disabled, }: Props$4) => React__default.JSX.Element;
 
 type StyleProps = {
     flex?: CSSProperties$1["flex"];

package/dist/index.js

@@ -2306,6 +2306,35 @@ function InputFieldRoot({
     measuredWidth && /* @__PURE__ */ import_react33.default.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
+var PrimitiveInputField = import_styled_components13.default.input(({ theme, readOnly, disabled }) => {
+  return {
+    // placeholder
+    "&::placeholder": {
+      color: theme.colors.textDisabled
+    },
+    ...theme.textStyles.small,
+    color: readOnly ? theme.colors.textMuted : disabled ? theme.colors.textDisabled : theme.colors.text,
+    width: "0px",
+    // Reset intrinsic width
+    flex: "1 1 0px",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    minWidth: "0",
+    alignSelf: "stretch",
+    borderRadius: "4px",
+    paddingTop: "4px",
+    paddingBottom: "4px",
+    paddingLeft: "6px",
+    paddingRight: "6px",
+    background: theme.colors.inputBackground,
+    "&:focus": {
+      boxShadow: `0 0 0 2px ${theme.colors.primary}`
+    },
+    userSelect: "all",
+    pointerEvents: "all"
+  };
+});
 var InputField;
 ((InputField2) => {
   InputField2.Root = (0, import_react33.memo)(InputFieldRoot);
@@ -2315,6 +2344,7 @@ var InputField;
   InputField2.DropdownMenu = InputFieldDropdownMenu;
   InputField2.Button = InputFieldButton;
   InputField2.Label = InputFieldLabel;
+  InputField2.PrimitiveElement = PrimitiveInputField;
 })(InputField || (InputField = {}));
 
 // src/contexts/DialogContext.tsx
@@ -2660,9 +2690,12 @@ var ChipElement = import_styled_components16.default.span(({ theme, $colorScheme
     // lineHeight: "1.4",
     lineHeight: "15px",
     whiteSpace: "pre",
-    ...$size === "medium" ? {
+    ...$size === "large" ? {
       fontSize: "11px",
       padding: "4px 8px"
+    } : $size === "medium" ? {
+      fontSize: "10px",
+      padding: "2px 6px"
     } : {
       fontSize: "9px",
       padding: "0px 4px"
@@ -2697,7 +2730,7 @@ var DeleteElement = (0, import_styled_components16.default)(import_noya_icons3.C
   marginRight: "-2px",
   cursor: "pointer",
   opacity: 0.5,
-  ...size2 === "medium" ? {
+  ...size2 === "large" ? {
     marginLeft: "2px",
     // top: '-1px',
     transform: "scale(0.75)"
@@ -2716,7 +2749,7 @@ var AddElement = (0, import_styled_components16.default)(import_noya_icons3.Plus
   marginLeft: "-2px",
   cursor: "pointer",
   opacity: 0.5,
-  ...size2 === "medium" ? {
+  ...size2 === "large" ? {
     marginRight: "2px",
     top: "-1px",
     transform: "scale(0.75)"
@@ -2736,7 +2769,7 @@ var Chip = (0, import_react37.memo)(
     addable,
     clickable,
     style: style3,
-    size: size2 = "medium",
+    size: size2 = "large",
     variant = "solid",
     monospace = false,
     tabIndex,
@@ -4580,9 +4613,10 @@ var Sortable;
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var DraggingContext = (0, import_react50.createContext)({
+var ListViewDraggingContext = (0, import_react50.createContext)({
   indentation: 12
 });
+ListViewDraggingContext.displayName = "ListViewDraggingContext";
 var ListRowContext = (0, import_react50.createContext)({
   marginType: "none",
   selectedPosition: "only",
@@ -4596,6 +4630,7 @@ var ListRowContext = (0, import_react50.createContext)({
   isSectionHeader: false,
   colorScheme: "primary"
 });
+ListRowContext.displayName = "ListRowContext";
 var ListViewRowTitle = import_styled_components25.default.span(({ theme }) => ({
   flex: "1 1 0",
   overflow: "hidden",
@@ -4783,7 +4818,7 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = (0, import_react50.useContext)(DraggingContext);
+  const { indentation, isDragging } = (0, import_react50.useContext)(ListViewDraggingContext);
   const handlePress = (0, import_react50.useCallback)(
     (event) => {
       event.preventDefault();
@@ -4885,6 +4920,7 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
 var RenderItemContext = (0, import_react50.createContext)(
   () => null
 );
+RenderItemContext.displayName = "RenderItemContext";
 var VirtualizedListRow = (0, import_react50.memo)(function VirtualizedListRow2({
   index,
   style: style3
@@ -5009,8 +5045,26 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
+  const defaultContextValue = (0, import_react50.useMemo)(
+    () => ({
+      colorScheme,
+      marginType: "none",
+      selectedPosition: "only",
+      sortable,
+      expandable,
+      divider,
+      pressEventName,
+      variant,
+      gap,
+      sectionHeaderVariant: "normal",
+      isSectionHeader: false
+    }),
+    [colorScheme, sortable, expandable, divider, pressEventName, variant, gap]
+  );
   const getItemContextValue = (0, import_react50.useCallback)(
     (i) => {
+      if (variant === "bare" || variant === "normal")
+        return defaultContextValue;
       const current = renderChild(i);
       if (!(0, import_react50.isValidElement)(current))
         return;
@@ -5057,6 +5111,8 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
       };
     },
     [
+      variant,
+      defaultContextValue,
       renderChild,
       data.length,
       colorScheme,
@@ -5064,7 +5120,6 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
       expandable,
       divider,
       pressEventName,
-      variant,
       sectionHeaderVariant,
       gap
     ]
@@ -5074,7 +5129,7 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     [indentation]
   );
   const renderOverlay = (0, import_react50.useCallback)(
-    (index) => /* @__PURE__ */ import_react50.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react50.default.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+    (index) => /* @__PURE__ */ import_react50.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react50.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
   const renderWrappedChild = (0, import_react50.useCallback)(
@@ -5113,7 +5168,7 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     [data, keyExtractor]
   );
   const draggingContextValue = (0, import_react50.useMemo)(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ import_react50.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react50.default.createElement(
     RootContainer2,
     {
       id,
@@ -6092,6 +6147,10 @@ var import_noya_icons6 = require("@noya-app/noya-icons");
 var Select3 = __toESM(require("@radix-ui/react-select"));
 var import_react59 = __toESM(require("react"));
 var import_styled_components33 = require("styled-components");
+var readOnlyStyle = {
+  justifyContent: "flex-start",
+  textAlign: "left"
+};
 var SelectMenu = (0, import_react59.memo)(function SelectMenu2({
   id,
   style: style3,
@@ -6099,13 +6158,29 @@ var SelectMenu = (0, import_react59.memo)(function SelectMenu2({
   menuItems,
   value,
   onSelect,
-  placeholder
+  placeholder,
+  disabled,
+  readOnly
 }) {
   const selectedItem = menuItems.find(
     (item) => typeof item !== "string" && item.value === value
   );
   const icon = selectedItem?.icon;
-  return /* @__PURE__ */ import_react59.default.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ import_react59.default.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react59.default.createElement(Button, { id, style: style3, className }, icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react59.default.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react59.default.createElement(import_noya_icons6.DropdownChevronIcon, null))), /* @__PURE__ */ import_react59.default.createElement(Select3.Portal, null, /* @__PURE__ */ import_react59.default.createElement(SelectContent, null, /* @__PURE__ */ import_react59.default.createElement(SelectViewport, null, menuItems.map((menuItem) => {
+  if (readOnly) {
+    return /* @__PURE__ */ import_react59.default.createElement(
+      Button,
+      {
+        id,
+        style: style3,
+        contentStyle: readOnlyStyle,
+        className,
+        disabled
+      },
+      icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 8 })),
+      selectedItem?.title ?? value
+    );
+  }
+  return /* @__PURE__ */ import_react59.default.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ import_react59.default.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react59.default.createElement(Button, { id, style: style3, className, disabled }, icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react59.default.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react59.default.createElement(import_noya_icons6.DropdownChevronIcon, null))), /* @__PURE__ */ import_react59.default.createElement(Select3.Portal, null, /* @__PURE__ */ import_react59.default.createElement(SelectContent, null, /* @__PURE__ */ import_react59.default.createElement(SelectViewport, null, menuItems.map((menuItem) => {
     if (typeof menuItem === "string") {
       return /* @__PURE__ */ import_react59.default.createElement(StyledSeparator, null);
     }
@@ -6229,13 +6304,15 @@ var SwitchThumb = (0, import_styled_components35.default)(SwitchPrimitive.Thumb)
 var Switch = function Switch2({
   value,
   onChange,
-  colorScheme = "normal"
+  colorScheme = "normal",
+  disabled
 }) {
   return /* @__PURE__ */ import_react61.default.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
       checked: value,
+      disabled,
       onCheckedChange: (newValue) => {
         onChange(newValue);
       }