@noya-app/noya-designsystem 0.1.25 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,7 +13,7 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.10",
+    "@noya-app/noya-colorpicker": "0.1.11",
     "@noya-app/noya-utils": "0.1.2",
     "@noya-app/noya-geometry": "0.1.4",
     "@noya-app/noya-icons": "0.1.4",

package/src/components/Button.tsx

@@ -137,6 +137,12 @@ export const ButtonElement = styled.button<{
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
       fontSize: "12px",
       padding: "0px 4px",
+      "&:hover": {
+        opacity: 0.8,
+      },
+      "&:active": {
+        opacity: 0.9,
+      },
     }),
     display: "flex",
     alignItems: "center",
@@ -186,6 +192,7 @@ export interface ButtonRootProps {
   contentStyle?: CSSProperties;
   defaultBackground?: string;
   as?: React.ElementType;
+  htmlFor?: string;
   href?: string;
   target?: string;
   rel?: string;

package/src/components/Chip.tsx

@@ -24,9 +24,9 @@ const ChipElement = styled.span<{
 
   const backgroundColor =
     $colorScheme === "primary"
-      ? "rgb(238, 229, 255)"
+      ? theme.colors.primaryPastel
       : $colorScheme === "secondary"
-        ? "rgb(205, 238, 231)"
+        ? theme.colors.secondaryPastel
         : $colorScheme === "error"
           ? "rgb(255, 219, 219)"
           : theme.colors.inputBackground;

package/src/components/InputField.tsx

@@ -370,40 +370,46 @@ const InputFieldInput = forwardRef(function InputFieldInput(
   );
 });
 
-const InputFieldTypeahead = (props: { value: string }) => {
+const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
   const {
     labelPosition,
     labelSize,
     hasDropdown,
     hasLabel,
     size,
-    onFocusChange,
+    // onFocusChange,
   } = useContext(InputFieldContext);
 
   return (
     <InputElement
+      as="span"
       $labelPosition={labelPosition}
       $labelSize={labelSize}
       $hasLabel={hasLabel}
       $hasDropdown={hasDropdown}
       $size={size}
-      onFocusChange={onFocusChange}
-      readOnly
-      placeholder={props.value}
+      // onFocusChange={onFocusChange}
+      // readOnly
+      // placeholder={props.value}
       value=""
       style={{
         position: "absolute",
-        top: -1,
+        top: 0,
         left: 0,
         right: 0,
-        bottom: -1,
+        bottom: 0,
         width: "100%",
         height: "100%",
         pointerEvents: "none",
         background: "transparent",
         boxShadow: "none",
       }}
-    />
+    >
+      <span style={{ opacity: 0 }}>{props.prefix}</span>
+      <span style={{ opacity: 0.5 }}>
+        {props.value.slice(props.prefix.length)}
+      </span>
+    </InputElement>
   );
 };
 

package/src/components/InputFieldWithCompletions.tsx

@@ -468,9 +468,11 @@ export const InputFieldWithCompletions = memo(
           aria-expanded={isFocused && display !== "none"}
           aria-controls="component-listbox"
         />
-        {filter && typeaheadValue && typeaheadValue.startsWith(filter) && (
-          <InputField.Typeahead value={typeaheadValue} />
-        )}
+        {filter &&
+          typeaheadValue &&
+          typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && (
+            <InputField.Typeahead value={typeaheadValue} prefix={filter} />
+          )}
         {(!isFocused || !hideChildrenWhenFocused) && children}
         {loading && isFocused && (
           <InputField.Label>

package/src/components/InspectorPrimitives.tsx

@@ -31,7 +31,7 @@ export const Title = styled.div<{
       }
     : {
         ...theme.textStyles.label,
-        color: theme.colors.textSubtle,
+        color: theme.colors.textMuted,
         fontWeight: "bold",
       }),
 }));

package/src/components/ListView.tsx

@@ -335,6 +335,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   onMenuOpenChange?: (isOpen: boolean) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   style?: CSSProperties;
+  className?: string;
   dragIndicatorStyle?:
     | CSSProperties
     | ((props: {
@@ -369,6 +370,7 @@ const ListViewRow = forwardRef(function ListViewRow<
     onKeyDown,
     style,
     dragIndicatorStyle,
+    className,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -465,6 +467,7 @@ const ListViewRow = forwardRef(function ListViewRow<
           { [pressEventName]: handlePress }
         )}
         tabIndex={tabIndex}
+        className={className}
       >
         {relativeDropPosition && (
           <ListViewDragIndicatorElement

package/src/components/SelectMenu.tsx

@@ -24,6 +24,10 @@ const readOnlyStyle: CSSProperties = {
   textAlign: "left",
 };
 
+const flexStyle: CSSProperties = {
+  flex: 1,
+};
+
 export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   id,
   style,
@@ -53,10 +57,10 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
         {icon && (
           <>
             {renderIcon(icon)}
-            <Spacer.Horizontal size={8} />
+            <Spacer.Horizontal inline size={6} />
           </>
         )}
-        {selectedItem?.title ?? value}
+        <span style={flexStyle}>{selectedItem?.title ?? value}</span>
       </Button>
     );
   }
@@ -68,11 +72,13 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
           {icon && (
             <>
               {renderIcon(icon)}
-              <Spacer.Horizontal size={8} />
+              <Spacer.Horizontal inline size={6} />
             </>
           )}
-          <Select.Value placeholder={placeholder} />
-          <Spacer.Horizontal />
+          <span style={flexStyle}>
+            <Select.Value placeholder={placeholder} />
+          </span>
+          <Spacer.Horizontal inline size={6} />
           <DropdownChevronIcon />
         </Button>
       </Select.SelectTrigger>

package/src/components/Text.tsx

@@ -55,6 +55,7 @@ interface Props extends StyleProps {
   as?: keyof ReactHTML;
   href?: string;
   className?: string;
+  style?: React.CSSProperties;
   variant: keyof Theme["textStyles"];
   breakpoints?: BreakpointCollection<StyleProps> | null | false;
   color?: ThemeColorName;
@@ -89,6 +90,7 @@ export const Text = forwardRef(function Text(
     tabIndex,
     onClick,
     onKeyDown,
+    style,
     ...rest
   }: Props,
   forwardedRef: ForwardedRef<HTMLElement>
@@ -100,6 +102,7 @@ export const Text = forwardRef(function Text(
       ref={forwardedRef}
       as={element}
       className={className}
+      style={style}
       tabIndex={tabIndex}
       $variant={variant}
       $breakpoints={breakpoints}

package/src/components/TextArea.tsx

@@ -0,0 +1,82 @@
+import { assignRef } from "@noya-app/react-utils";
+import React, { forwardRef, memo, useCallback, useEffect, useRef } from "react";
+import styled from "styled-components";
+
+const TextAreaElement = styled.textarea(({ theme }) => ({
+  ...theme.textStyles.small,
+  color: theme.colors.text,
+  background: theme.colors.inputBackground,
+  width: "0px",
+  flex: "1 1 auto",
+  padding: "4px 6px",
+  border: "none",
+  outline: "none",
+  height: 100,
+  borderRadius: "4px",
+  "&::placeholder": {
+    color: theme.colors.textDisabled,
+  },
+  "&:focus": {
+    boxShadow: `0 0 0 2px ${theme.colors.primary}`,
+  },
+  // readonly
+  "&:read-only": {
+    color: theme.colors.textDisabled,
+  },
+  resize: "none",
+}));
+
+export const useAutoResize = (value: string) => {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    if (!textareaRef.current) return;
+
+    textareaRef.current.style.height = "auto"; // Reset the height
+    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+  }, [value]);
+
+  return textareaRef;
+};
+
+export const AutoResizingTextArea = memo(
+  forwardRef(function AutoResizingTextArea(
+    {
+      value,
+      onChangeText,
+      ...rest
+    }: Omit<
+      React.ComponentProps<typeof TextAreaElement>,
+      "onChange" | "value"
+    > & {
+      onChangeText: (value: string) => void;
+      value?: string;
+    },
+    forwardedRef: React.ForwardedRef<HTMLTextAreaElement>
+  ) {
+    const ref = useAutoResize(value || rest.placeholder || "");
+
+    const handleChange = useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>) =>
+        onChangeText(event.target.value),
+      [onChangeText]
+    );
+
+    const handleRef = useCallback(
+      (value: HTMLTextAreaElement | null) => {
+        ref.current = value;
+        assignRef(forwardedRef, value);
+      },
+      [ref, forwardedRef]
+    );
+
+    return (
+      <TextAreaElement
+        ref={handleRef}
+        {...rest}
+        onChange={handleChange}
+        value={value}
+      />
+    );
+  })
+);

package/src/index.tsx

@@ -30,6 +30,7 @@ export * from "./components/GradientPicker";
 export * from "./components/Grid";
 export * from "./components/GridView";
 export * from "./components/IconButton";
+export * from "./components/Icons";
 export * from "./components/InputField";
 export * from "./components/InputFieldWithCompletions";
 export * from "./components/InspectorContainer";
@@ -49,6 +50,7 @@ export * from "./components/Spacer";
 export * from "./components/Stack";
 export * from "./components/Switch";
 export * from "./components/Text";
+export * from "./components/TextArea";
 export * from "./components/Toast";
 export * from "./components/Tooltip";
 export * from "./components/TreeView";

package/src/theme/light.ts

@@ -5,26 +5,29 @@ export const name: string = "light";
 
 export const colors = {
   logo: {
-    fill: "rgb(175,175,175)",
-    highlight: "rgb(175,175,175)",
+    fill: "rgb(150, 152, 172)",
+    highlight: "rgb(150, 152, 172)",
   },
+  background: "rgb(255,255,255)",
   text: "rgb(38, 48, 83)",
-  textMuted: "rgb(85, 85, 85)",
-  textSubtle: "rgb(121, 121, 121)",
-  textDisabled: "rgb(160, 160, 160)",
+  textMuted: "rgb(107, 113, 136)",
+  textSubtle: "rgb(117, 121, 129)",
+  textDisabled: "rgb(150, 152, 172)",
   textDecorativeLight: "rgb(168, 185, 212)",
-  dividerSubtle: "rgba(0, 0, 0, 0.04)",
-  divider: "rgba(0, 0, 0, 0.07)",
-  dividerStrong: "rgba(0, 0, 0, 0.09)",
-  primary: "rgb(132, 63, 255)",
+  dividerSubtle: "rgba(30, 50, 100, 0.04)",
+  divider: "rgba(30, 50, 100, 0.07)",
+  dividerStrong: "rgba(30, 50, 100, 0.09)",
+  primary: "rgb(103, 70, 255)",
   primaryLight: "rgb(147, 86, 255)",
+  primaryPastel: "rgba(234, 230, 255)",
   secondary: "rgb(0, 151, 117)",
   secondaryLight: "rgb(0, 160, 129)",
+  secondaryPastel: "rgb(205, 238, 231)",
   secondaryBright: "#0ab557",
   warning: "rgb(251, 211, 0)",
   neutralBackground: "rgb(222,223,232)",
-  inputBackground: "rgb(240, 240, 242)",
-  inputBackgroundLight: "rgb(243, 243, 245)",
+  inputBackground: "rgb(240, 242, 246)",
+  inputBackgroundLight: "rgb(243, 245, 249)",
   codeBackground: "rgb(250, 250, 250)",
   codeBackgroundLight: "rgb(250, 250, 250)",
   get codeBackgroundDark() {
@@ -52,6 +55,7 @@ export const colors = {
     editingBackground: "#fff",
   },
   canvas: {
+    // background: "white",
     background: "rgb(249,249,249)",
     get selectionStroke() {
       return colors.primary;
@@ -62,8 +66,8 @@ export const colors = {
     grid: "rgba(0,0,0,0.05)",
   },
   sidebar: {
-    background: "rgb(252,252,252)",
-    backgroundTransparent: "rgba(252,252,252,0.85)",
+    background: "rgb(255,255,255)",
+    backgroundTransparent: "rgba(255,255,255,0.85)",
   },
   popover: {
     background: "rgb(252,252,252)",
@@ -76,7 +80,7 @@ export const colors = {
   radioGroup: {
     background: "white",
   },
-  icon: "rgb(139, 139, 139)",
+  icon: "rgb(129, 131, 165)",
   iconSelected: "rgb(220, 220, 220)",
   mask: "rgb(12,193,67)",
   imageOverlay:
@@ -87,6 +91,12 @@ export const colors = {
   selection: "rgb(179,215,254)",
   thumbnailBackground: "#f0efff",
   thumbnailShadow: "#D3CEED66",
+  inlineCode: {
+    text: "rgb(103, 70, 255)",
+    background: "rgb(240, 242, 246)",
+  },
+  textLink: "rgb(103, 70, 255)",
+  textLinkFocused: "rgb(147, 86, 255)",
 };
 
 export const fonts = {
@@ -122,41 +132,41 @@ export const textStyles = {
   heading1: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[2]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
+    fontWeight: 600,
+    lineHeight: "1.6",
     letterSpacing: "-0.025em",
   } as CSSObject,
   heading2: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[3]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75",
+    lineHeight: "1.5",
     letterSpacing: "-0.025em",
   } as CSSObject,
   heading3: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[4]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
+    fontWeight: 400,
+    lineHeight: "1.4",
     letterSpacing: "-0.025em",
   } as CSSObject,
   heading4: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[5]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75",
+    lineHeight: "1.4",
   } as CSSObject,
   heading5: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[6]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75",
+    lineHeight: "1.4",
   } as CSSObject,
   body: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[5]}rem`,
     fontWeight: 400,
-    lineHeight: "1.75",
+    lineHeight: "1.4",
   } as CSSObject,
   small: {
     fontFamily: fonts.normal,
@@ -189,6 +199,9 @@ export const textStyles = {
 };
 
 export const sizes = {
+  inset: {
+    top: 46,
+  },
   sidebarWidth: 260,
   toolbar: {
     height: 46,