@noya-app/noya-designsystem 0.1.29 → 0.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -15,7 +15,7 @@
     "@dnd-kit/sortable": "4.0.0",
     "@noya-app/noya-colorpicker": "0.1.11",
     "@noya-app/noya-utils": "0.1.2",
-    "@noya-app/noya-geometry": "0.1.4",
+    "@noya-app/noya-geometry": "0.1.5",
     "@noya-app/noya-icons": "0.1.4",
     "@noya-app/noya-keymap": "0.1.2",
     "@radix-ui/primitive": "^1.0.0",
@@ -46,8 +46,9 @@
     "@types/react-dom": "*",
     "@types/react-virtualized": "^9.21.21",
     "@types/react-window": "^1.8.5",
+    "esbuild-plugin-react-virtualized": "1.0.4",
     "react-virtualized": "9.22.5",
-    "esbuild-plugin-react-virtualized": "1.0.4"
+    "tailwindcss": "^3.4.14"
   },
   "peerDependencies": {
     "react": "*",

package/src/components/Button.tsx

@@ -19,7 +19,7 @@ type ButtonVariant =
   | "floating"
   | "none";
 
-type ButtonSize = "normal" | "large";
+type ButtonSize = "small" | "normal" | "large";
 
 /* ----------------------------------------------------------------------------
  * Element
@@ -135,8 +135,8 @@ export const ButtonElement = styled.button<{
       background: "white",
       color: theme.colors.text,
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-      fontSize: "12px",
-      padding: "0px 4px",
+      fontSize: $size === "small" ? "10px" : "12px",
+      padding: $size === "small" ? "0px 2px" : "0px 4px",
       "&:hover": {
         opacity: 0.8,
       },
@@ -184,7 +184,9 @@ export interface ButtonRootProps {
   children: ReactNode;
   active?: boolean;
   disabled?: boolean;
+  /** @default normal */
   variant?: ButtonVariant;
+  /** @default normal */
   size?: ButtonSize;
   tooltip?: ReactNode;
   onClick?: (event: React.MouseEvent) => void;

package/src/components/GridView.tsx

@@ -64,39 +64,39 @@ const sizes: Record<
 };
 
 const Grid = styled.div<{
-  size: GridViewSize;
-  padding: CSSProperties["padding"];
-}>(({ theme, size, padding }) => {
+  $size: GridViewSize;
+  $padding: CSSProperties["padding"];
+}>(({ theme, $size, $padding }) => {
   return {
     color: theme.colors.text,
     display: "grid",
-    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes[size].itemWidth}px, 1fr))`,
+    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes[$size].itemWidth}px, 1fr))`,
     // gridAutoRows: `${sizes[size].itemHeight}px`,
-    gap: `${sizes[size].gap}px`,
+    gap: `${sizes[$size].gap}px`,
     // gridTemplateColumns: `repeat(auto-fill, minmax(
     //   ${size === 'large' ? '280px' : size === 'small' ? '160px' : '116px'}
     // , 1fr))`,
     // gridAutoRows:
     //   size === 'large' ? '280px' : size === 'small' ? '170px' : '116px',
     // gap: size === 'large' || size === 'small' ? `20px` : `12px`,
-    padding,
+    padding: $padding,
   };
 });
 
-const Container = styled.div<{ scrollable: boolean }>(
-  ({ theme, scrollable }) => ({
-    flex: scrollable ? "1" : "0 0 auto",
+const Container = styled.div<{ $scrollable: boolean }>(
+  ({ theme, $scrollable }) => ({
+    flex: $scrollable ? "1" : "0 0 auto",
     display: "flex",
     flexDirection: "column",
   })
 );
 
 const ContentContainer = styled.div<{
-  selected?: boolean;
-  hovered?: boolean;
-  bordered: boolean;
-  disabled: boolean;
-}>(({ theme, selected, hovered, bordered, disabled }) => ({
+  $selected?: boolean;
+  $hovered?: boolean;
+  $bordered: boolean;
+  $disabled: boolean;
+}>(({ theme, $selected, $hovered, $bordered, $disabled }) => ({
   display: "flex",
   flex: "1",
   backgroundColor: theme.colors.sidebar.background,
@@ -104,18 +104,18 @@ const ContentContainer = styled.div<{
   justifyContent: "center",
   borderRadius: "2px",
   border: `1px solid ${
-    selected
+    $selected
       ? theme.colors.primary
       : // : hovered
         // ? `rgb(132, 63, 255, 0.5)`
-        bordered
+        $bordered
         ? theme.colors.divider
         : "transparent"
   }`,
   overflow: "hidden",
 
   cursor: "pointer",
-  ...(disabled
+  ...($disabled
     ? { opacity: 0.5 }
     : {
         "&:hover": { opacity: 0.85 },
@@ -134,8 +134,8 @@ const ItemContainer = styled.div(({ theme }) => ({
   },
 }));
 
-const ItemTitle = styled.span<{ showBackground: boolean }>(
-  ({ theme, showBackground }) => ({
+const ItemTitle = styled.span<{ $showBackground: boolean }>(
+  ({ theme, $showBackground }) => ({
     ...theme.textStyles.small,
     lineHeight: "1",
     color: theme.colors.text,
@@ -145,7 +145,7 @@ const ItemTitle = styled.span<{ showBackground: boolean }>(
     overflow: "hidden",
     textOverflow: "ellipsis",
 
-    ...(showBackground && {
+    ...($showBackground && {
       background: theme.colors.sidebar.background,
       // border: `1px solid ${theme.colors.dividerSubtle}`,
       padding: "2px 4px",
@@ -155,8 +155,8 @@ const ItemTitle = styled.span<{ showBackground: boolean }>(
   })
 );
 
-const ItemDescription = styled.span<{ showBackground: boolean }>(
-  ({ theme, showBackground }) => ({
+const ItemDescription = styled.span<{ $showBackground: boolean }>(
+  ({ theme, $showBackground }) => ({
     ...theme.textStyles.small,
     fontSize: "0.7rem",
     lineHeight: "1",
@@ -166,7 +166,7 @@ const ItemDescription = styled.span<{ showBackground: boolean }>(
     overflow: "hidden",
     textOverflow: "ellipsis",
 
-    ...(showBackground && {
+    ...($showBackground && {
       background: theme.colors.sidebar.background,
       // border: `1px solid ${theme.colors.dividerSubtle}`,
       padding: "2px 4px",
@@ -319,10 +319,10 @@ const GridViewItem = forwardRef(function GridViewItem<
       onKeyDown={handleKeyDown}
     >
       <ContentContainer
-        disabled={disabled}
-        bordered={bordered}
-        selected={selected}
-        hovered={!disabled && hovered}
+        $disabled={disabled}
+        $bordered={bordered}
+        $selected={selected}
+        $hovered={!disabled && hovered}
         onClick={handleClick}
         onDoubleClick={onDoubleClick}
         onContextMenu={onContextMenu}
@@ -333,17 +333,17 @@ const GridViewItem = forwardRef(function GridViewItem<
       {textPosition === "below" && (
         <>
           <Spacer.Vertical size={8} />
-          <ItemTitle showBackground={false}>{title || " "}</ItemTitle>
-          <ItemDescription showBackground={false}>
+          <ItemTitle $showBackground={false}>{title || " "}</ItemTitle>
+          <ItemDescription $showBackground={false}>
             {subtitle || " "}
           </ItemDescription>
         </>
       )}
       {textPosition === "overlay" && hovered && (title || subtitle) && (
         <TextOverlay>
-          {title && <ItemTitle showBackground>{title}</ItemTitle>}
+          {title && <ItemTitle $showBackground>{title}</ItemTitle>}
           {subtitle && (
-            <ItemDescription showBackground>{subtitle}</ItemDescription>
+            <ItemDescription $showBackground>{subtitle}</ItemDescription>
           )}
         </TextOverlay>
       )}
@@ -368,8 +368,10 @@ const GridViewItem = forwardRef(function GridViewItem<
       <Tooltip
         content={
           <Stack.V gap={2}>
-            <ItemTitle showBackground={false}>{title}</ItemTitle>
-            <ItemDescription showBackground={false}>{subtitle}</ItemDescription>
+            <ItemTitle $showBackground={false}>{title}</ItemTitle>
+            <ItemDescription $showBackground={false}>
+              {subtitle}
+            </ItemDescription>
           </Stack.V>
         }
       >
@@ -432,7 +434,7 @@ function GridViewRoot({
 
   return (
     <GridViewContext.Provider value={contextValue}>
-      <Container onClick={handleClick} scrollable={scrollable}>
+      <Container onClick={handleClick} $scrollable={scrollable}>
         {scrollable ? <ScrollArea>{children}</ScrollArea> : children}
       </Container>
     </GridViewContext.Provider>
@@ -449,7 +451,7 @@ function GridViewSection({
   const { size } = useContext(GridViewContext);
 
   return (
-    <Grid size={size} padding={padding}>
+    <Grid $size={size} $padding={padding}>
       {children}
     </Grid>
   );

package/src/components/InputField.tsx

@@ -32,21 +32,23 @@ export type InputFieldSize = "small" | "medium" | "large";
 
 type InputFieldContextValue = {
   labelPosition: LabelPosition;
-  labelSize: number;
-  hasLabel: boolean;
+  labelSize?: number;
+  buttonSize?: number;
   hasDropdown: boolean;
+  /** @default medium */
   size: InputFieldSize;
   isFocused: boolean;
   onFocusChange: (isFocused: boolean) => void;
   inputRef?: ForwardedRef<HTMLInputElement>;
   setInputRef?: (ref: ForwardedRef<HTMLInputElement>) => void;
   setLabelWidth?: (width: number) => void;
+  setButtonWidth?: (width: number) => void;
 };
 
 const InputFieldContext = createContext<InputFieldContextValue>({
   labelPosition: "end",
-  labelSize: 6,
-  hasLabel: false,
+  labelSize: undefined,
+  buttonSize: undefined,
   hasDropdown: false,
   size: "medium",
   isFocused: false,
@@ -61,26 +63,31 @@ const LabelContainer = styled.label<{
   pointerEvents: Property.PointerEvents;
   $labelPosition: LabelPosition;
   $hasDropdown: boolean;
-}>(({ theme, $labelPosition, $hasDropdown, pointerEvents }) => ({
-  ...theme.textStyles.label,
-  fontWeight: "bold",
-  color: theme.colors.textDisabled,
-  position: "absolute",
-  top: 0,
-  right: $labelPosition === "end" ? 0 : undefined,
-  bottom: 0,
-  left: $labelPosition === "start" ? 0 : undefined,
-  display: "flex",
-  alignItems: "center",
-  pointerEvents,
-  userSelect: "none",
-  ...($labelPosition === "start"
-    ? { justifyContent: "flex-start", paddingLeft: "6px" }
-    : {
-        justifyContent: "flex-end",
-        paddingRight: $hasDropdown ? "16px" : "6px",
-      }),
-}));
+  $size: InputFieldSize;
+}>(({ theme, $labelPosition, $hasDropdown, pointerEvents, $size }) => {
+  const offsetRelativeToSize =
+    $size === "large" ? 6 : $size === "medium" ? 2 : 0;
+  return {
+    ...theme.textStyles.label,
+    fontWeight: "bold",
+    color: theme.colors.textDisabled,
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: $labelPosition === "end" ? offsetRelativeToSize : undefined,
+    left: $labelPosition === "start" ? offsetRelativeToSize : undefined,
+    display: "flex",
+    alignItems: "center",
+    pointerEvents,
+    userSelect: "none",
+    ...($labelPosition === "start"
+      ? { justifyContent: "flex-start", paddingLeft: "6px" }
+      : {
+          justifyContent: "flex-end",
+          paddingRight: $hasDropdown ? "16px" : "6px",
+        }),
+  };
+});
 
 interface InputFieldLabelProps {
   children?: ReactNode;
@@ -88,12 +95,13 @@ interface InputFieldLabelProps {
   style?: React.CSSProperties;
 }
 
+/** Inserts a Label at the start or end of the input given a `labelPosition`on InputField.Root. Should not be used with an InputField.Button */
 const InputFieldLabel = memo(
   forwardRef(function InputFieldLabel(
     { children = false, pointerEvents = "none", style }: InputFieldLabelProps,
     forwardedRef: ForwardedRef<HTMLLabelElement>
   ) {
-    const { labelPosition, hasDropdown, setLabelWidth } =
+    const { labelPosition, hasDropdown, setLabelWidth, size } =
       useContext(InputFieldContext);
 
     const ref = useRef<HTMLLabelElement | null>(null);
@@ -110,6 +118,7 @@ const InputFieldLabel = memo(
 
     return (
       <LabelContainer
+        $size={size}
         ref={(element) => {
           ref.current = element;
           assignRef(forwardedRef, element);
@@ -179,51 +188,74 @@ const ButtonContainer = styled.span<{ $size: InputFieldSize }>(
   ({ theme, $size }) => ({
     position: "absolute",
     right: $size === "large" ? "9px" : $size === "medium" ? "4px" : "2px",
-    top: $size === "large" ? "8px" : $size === "medium" ? "4px" : "2px",
+    top: $size === "large" ? "10px" : $size === "medium" ? "4px" : "2px",
   })
 );
 
-const InputFieldButton = memo(function InputFieldButton({
-  children,
-  onClick,
-}: {
-  children?: ReactNode;
-  onClick?: () => void;
-}) {
-  const { size, inputRef } = useContext(InputFieldContext);
-
-  const defaultHandleClick = useCallback(
-    (event: React.MouseEvent) => {
-      if (inputRef && typeof inputRef !== "function") {
-        inputRef.current?.focus();
-        // Select all text
-        inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
-      }
+/** Inserts a Button at the end of the input. Should not be used with an InputField.Label */
+const InputFieldButton = memo(
+  forwardRef(function InputFieldButton(
+    {
+      children,
+      onClick,
+    }: {
+      children?: ReactNode;
+      onClick?: () => void;
+    },
+    forwardedRef: ForwardedRef<HTMLButtonElement>
+  ) {
+    const { size, inputRef, setButtonWidth } = useContext(InputFieldContext);
+
+    const ref = useRef<HTMLButtonElement | null>(null);
+
+    useLayoutEffect(() => {
+      if (!setButtonWidth) return;
+
+      const width = ref.current?.getBoundingClientRect().width;
+
+      if (!width) return;
 
+      setButtonWidth(width);
+    }, [setButtonWidth]);
+
+    const defaultHandleClick = useCallback(
+      (event: React.MouseEvent) => {
+        if (inputRef && typeof inputRef !== "function") {
+          inputRef.current?.focus();
+          // Select all text
+          inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      [inputRef]
+    );
+
+    const handlePointerDown = useCallback((event: React.PointerEvent) => {
       event.preventDefault();
       event.stopPropagation();
-    },
-    [inputRef]
-  );
-
-  const handlePointerDown = useCallback((event: React.PointerEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
+    }, []);
 
-  return (
-    <ButtonContainer $size={size}>
-      <Button
-        variant="floating"
-        onClick={onClick ?? defaultHandleClick}
-        onPointerDown={handlePointerDown}
-        tabIndex={-1}
-      >
-        {children}
-      </Button>
-    </ButtonContainer>
-  );
-});
+    return (
+      <ButtonContainer $size={size}>
+        <Button
+          ref={(element) => {
+            ref.current = element;
+            assignRef(forwardedRef, element);
+          }}
+          variant="floating"
+          onClick={onClick ?? defaultHandleClick}
+          onPointerDown={handlePointerDown}
+          tabIndex={-1}
+          size={size === "medium" ? "normal" : size}
+        >
+          {children}
+        </Button>
+      </ButtonContainer>
+    );
+  })
+);
 
 /* ----------------------------------------------------------------------------
  * Input
@@ -242,8 +274,7 @@ export const InputElement = styled(TextInput)<{
   disabled?: boolean;
   readOnly?: boolean;
   $labelPosition: LabelPosition;
-  $labelSize: number;
-  $hasLabel: boolean;
+  $labelSize?: number;
   $hasDropdown: boolean;
   $textAlign?: Property.TextAlign;
   $variant?: InputFieldVariant;
@@ -255,7 +286,6 @@ export const InputElement = styled(TextInput)<{
   $hasDropdown,
   $textAlign,
   disabled,
-  $hasLabel,
   readOnly,
   $variant = "normal",
   $size,
@@ -288,11 +318,11 @@ export const InputElement = styled(TextInput)<{
       $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
     paddingLeft:
       ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
-      ($hasLabel && $labelPosition === "start" ? 6 + $labelSize : 0) +
+      ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0) +
       "px",
     paddingRight:
       ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
-      ($hasLabel && $labelPosition === "end" ? 6 + $labelSize : 0) +
+      ($labelSize && $labelPosition === "end" ? 6 + $labelSize : 0) +
       ($hasDropdown ? 11 : 0) +
       "px",
     background: theme.colors.inputBackground,
@@ -321,6 +351,7 @@ export const InputElement = styled(TextInput)<{
   };
 });
 
+/** Should always be wrapped in InputField.Root */
 const InputFieldInput = forwardRef(function InputFieldInput(
   // onFocusChange should only be passed from the root, never directly
   {
@@ -337,7 +368,7 @@ const InputFieldInput = forwardRef(function InputFieldInput(
     labelPosition,
     labelSize,
     hasDropdown,
-    hasLabel,
+    buttonSize,
     size,
     onFocusChange,
     setInputRef,
@@ -358,8 +389,7 @@ const InputFieldInput = forwardRef(function InputFieldInput(
     <InputElement
       ref={forwardedRef}
       $labelPosition={labelPosition}
-      $labelSize={labelSize}
-      $hasLabel={hasLabel}
+      $labelSize={labelSize || buttonSize}
       $hasDropdown={hasDropdown}
       $size={size}
       $variant={variant}
@@ -375,7 +405,6 @@ const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
     labelPosition,
     labelSize,
     hasDropdown,
-    hasLabel,
     size,
     // onFocusChange,
   } = useContext(InputFieldContext);
@@ -385,7 +414,6 @@ const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
       as="span"
       $labelPosition={labelPosition}
       $labelSize={labelSize}
-      $hasLabel={hasLabel}
       $hasDropdown={hasDropdown}
       $size={size}
       // onFocusChange={onFocusChange}
@@ -528,24 +556,27 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
  * Root
  * ------------------------------------------------------------------------- */
 
-const RootContainer = styled.div<{ $width?: number; $flex?: string }>(
-  ({ theme, $flex, $width }) => ({
-    flex: $flex ?? "1",
-    display: "flex",
-    flexDirection: "row",
-    position: "relative",
-    maxWidth: typeof $width === "number" ? `${$width}px` : undefined,
-  })
-);
+const RootContainer = styled.div<{
+  $width?: number;
+  $flex?: string;
+}>(({ theme, $flex, $width }) => ({
+  flex: $flex ?? "1",
+  display: "flex",
+  flexDirection: "row",
+  position: "relative",
+  maxWidth: typeof $width === "number" ? `${$width}px` : undefined,
+}));
 
 interface InputFieldRootProps {
   id?: string;
   flex?: string;
   children?: ReactNode;
   width?: number;
+  /** @default end */
   labelPosition?: LabelPosition;
   labelSize?: number;
   hasDropdown?: boolean;
+  /** @default medium */
   size?: InputFieldSize;
   renderPopoverContent?: (options: { width: number }) => ReactNode;
   onFocusChange?: (isFocused: boolean) => void;
@@ -571,13 +602,11 @@ function InputFieldRoot({
   const hasDropdown = childrenArray.some(
     (child) => isValidElement(child) && child.type === InputFieldDropdownMenu
   );
-  const hasLabel = childrenArray.some(
-    (child) => isValidElement(child) && child.type === InputFieldLabel
-  );
 
   const [isFocused, setIsFocused] = React.useState(false);
 
   const [measuredLabelSize, setMeasuredLabelSize] = React.useState<number>();
+  const [measuredButtonSize, setMeasuredButtonSize] = React.useState<number>();
   const [measuredWidth, setMeasuredWidth] = React.useState<number>();
 
   const handleFocusChange = useCallback(
@@ -603,22 +632,23 @@ function InputFieldRoot({
   const contextValue = useMemo(
     (): InputFieldContextValue => ({
       labelPosition,
-      labelSize: measuredLabelSize ?? labelSize ?? 6,
+      labelSize: measuredLabelSize ?? labelSize,
+      buttonSize: measuredButtonSize,
       hasDropdown,
-      hasLabel,
       size,
       isFocused,
       onFocusChange: handleFocusChange,
       inputRef,
       setInputRef,
       setLabelWidth: setMeasuredLabelSize,
+      setButtonWidth: setMeasuredButtonSize,
     }),
     [
       labelPosition,
       measuredLabelSize,
       labelSize,
+      measuredButtonSize,
       hasDropdown,
-      hasLabel,
       size,
       isFocused,
       handleFocusChange,

package/src/components/ListView.tsx

@@ -317,6 +317,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   id?: string;
   tabIndex?: number;
   selected?: boolean;
+  /** @default 0 */
   depth?: number;
   disabled?: boolean;
   // draggable?: boolean;

package/src/components/RadioGroup.tsx

@@ -108,6 +108,7 @@ const ToggleGroupItem = forwardRef(function ToggleGroupItem(
 });
 
 type RadioGroupContextValue = {
+  /** @default primary */
   colorScheme?: RadioGroupColorScheme;
 };
 
@@ -119,6 +120,7 @@ interface Props {
   id?: string;
   value?: string;
   onValueChange?: (value: string) => void;
+  /** @default primary */
   colorScheme?: RadioGroupColorScheme;
   allowEmpty?: boolean;
   children: ReactNode;