@noya-app/noya-designsystem 0.1.49 → 0.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,10 +22,10 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.18",
-    "@noya-app/noya-utils": "0.1.4",
-    "@noya-app/noya-geometry": "0.1.9",
-    "@noya-app/noya-icons": "0.1.6",
+    "@noya-app/noya-colorpicker": "0.1.19",
+    "@noya-app/noya-utils": "0.1.5",
+    "@noya-app/noya-geometry": "0.1.10",
+    "@noya-app/noya-icons": "0.1.7",
     "@noya-app/noya-keymap": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",

package/src/components/Avatar.tsx

@@ -181,8 +181,8 @@ const OverflowAvatar = React.memo(function OverflowAvatar({
   count: number;
 }) {
   return (
-    <AvatarRoot size={size} backgroundColor="var(--text-disabled)" disabled>
-      <AvatarFallback backgroundColor="var(--text-disabled)" size={size}>
+    <AvatarRoot size={size} backgroundColor="var(--n-text-disabled)" disabled>
+      <AvatarFallback backgroundColor="var(--n-text-disabled)" size={size}>
         +{count}
       </AvatarFallback>
     </AvatarRoot>

package/src/components/Banner.tsx

@@ -0,0 +1,29 @@
+import React, { CSSProperties } from "react";
+import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
+import { Small } from "./Text";
+
+const bannerStyles = {
+  backgroundColor: cssVars.colors.inputBackground,
+  color: cssVars.colors.textDisabled,
+};
+
+export type BannerProps = {
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function Banner({ label = "No items", className, style }: BannerProps) {
+  return (
+    <div
+      className={cx(
+        "flex p-1 items-center justify-center select-none rounded",
+        className
+      )}
+      style={{ ...bannerStyles, ...style }}
+    >
+      <Small color="textDisabled">{label}</Small>
+    </div>
+  );
+}

package/src/components/Button.tsx

@@ -5,8 +5,8 @@ import React, {
   ReactNode,
   useCallback,
 } from "react";
-import { Tooltip } from "./Tooltip";
 import { cx } from "../utils/classNames";
+import { Tooltip } from "./Tooltip";
 
 type ButtonVariant =
   | "normal"
@@ -87,7 +87,7 @@ export const Button = forwardRef(function Button(
       ref={forwardedRef}
       id={id}
       className={cx(
-        "no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--popover-background)_inset] transition-all",
+        "no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all",
         disabled ? "opacity-25" : "",
         !className?.includes("flex") ? "flex-none" : "",
         active

package/src/components/Chip.tsx

@@ -19,32 +19,32 @@ const SIZE_STYLES = {
 } as const;
 
 const SHADOW_STYLES = {
-  primary: "shadow-[0_0_0_1px_var(--chip-primary-shadow)_inset]",
-  secondary: "shadow-[0_0_0_1px_var(--chip-secondary-shadow)_inset]",
-  error: "shadow-[0_0_0_1px_var(--chip-error-shadow)_inset]",
-  default: "shadow-[0_0_0_1px_var(--chip-default-shadow)_inset]",
+  primary: "shadow-[0_0_0_1px_var(--n-chip-primary-shadow)_inset]",
+  secondary: "shadow-[0_0_0_1px_var(--n-chip-secondary-shadow)_inset]",
+  error: "shadow-[0_0_0_1px_var(--n-chip-error-shadow)_inset]",
+  default: "shadow-[0_0_0_1px_var(--n-chip-default-shadow)_inset]",
 } as const;
 
 const COLOR_STYLES = {
   primary: {
     text: "text-primary",
     bg: "bg-primary-pastel",
-    subtle: "bg-[var(--chip-primary-bg)]",
+    subtle: "bg-[var(--n-chip-primary-bg)]",
   },
   secondary: {
     text: "text-secondary",
     bg: "bg-secondary-pastel",
-    subtle: "bg-[var(--chip-secondary-bg)]",
+    subtle: "bg-[var(--n-chip-secondary-bg)]",
   },
   error: {
     text: "text-text",
     bg: "bg-[rgb(255,219,219)]",
-    subtle: "bg-[var(--chip-error-bg)]",
+    subtle: "bg-[var(--n-chip-error-bg)]",
   },
   default: {
     text: "text-text",
     bg: "bg-input-background",
-    subtle: "bg-[var(--chip-default-bg)]",
+    subtle: "bg-[var(--n-chip-default-bg)]",
   },
 } as const;
 

package/src/components/Collection.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import { forwardRefGeneric } from "../../../noya-react-utils/src/utils/reactGenerics";
 import { Grid, GridViewSize } from "../components/Grid";
 import { MenuItem } from "../components/internal/Menu";
-import { ListView, ListViewRootProps } from "../components/ListView";
+import {
+  ListView,
+  ListViewRootProps,
+  ListViewRowProps,
+} from "../components/ListView";
 import { List } from "./List";
 
 export type CollectionViewType = "grid" | "list";
@@ -86,6 +90,7 @@ export interface CollectionProps<T, M extends string = string> {
   renderEmptyState?: () => React.ReactElement;
   /** @default false */
   sortable?: boolean;
+  dragIndicatorStyle?: ListViewRowProps<M>["dragIndicatorStyle"];
 }
 
 export const Collection = forwardRefGeneric(function Collection<

package/src/components/Dialog.tsx

@@ -138,8 +138,8 @@ export const Dialog = forwardRef(function Dialog(
               className="z-[1]"
               style={{
                 position: "absolute",
-                top: "var(--dialog-padding)",
-                right: "var(--dialog-padding)",
+                top: "var(--n-dialog-padding)",
+                right: "var(--n-dialog-padding)",
               }}
             />
           </DialogPrimitive.Close>

package/src/components/FillInputField.tsx

@@ -11,7 +11,7 @@ const FillButton = forwardRef<
   <button
     ref={ref}
     className={cx(
-      `outline-none p-0 w-[50px] h-input-height rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_var(--primary)] `,
+      `outline-none p-0 w-[50px] h-input-height rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--n-divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--n-sidebar-background),0_0_0_3px_var(--n-primary)] `,
       className
     )}
     {...props}

package/src/components/Grid.tsx

@@ -216,9 +216,7 @@ export const Grid = memoGeneric(
                       testFocused={isTestingRenaming}
                       readOnly={!itemIsRenamable || !onRename}
                       onSubmit={(value) => {
-                        if (value !== getName(item)) {
-                          onRename?.(item, value);
-                        }
+                        onRename?.(item, value);
                         setRenamingId(undefined);
                       }}
                       onBlur={() => {

package/src/components/Label.tsx

@@ -1,5 +1,5 @@
 import React, { LabelHTMLAttributes, forwardRef, memo } from "react";
-import { cx } from "../utils/classNames";
+import { mergeConflictingClassNames } from "../utils/classNames";
 
 export type LabelPosition = "inset" | "start" | "end" | "above";
 
@@ -17,11 +17,16 @@ export const Label = memo(
     return (
       <label
         ref={ref}
-        className={cx(
-          labelStyles,
-          labelTextStyles,
-          "text-left min-h-input-height",
-          className
+        className={mergeConflictingClassNames(
+          [
+            labelStyles,
+            labelTextStyles,
+            "text-left min-h-input-height",
+            className,
+          ],
+          {
+            categories: ["color", "font"],
+          }
         )}
         {...props}
       >

package/src/components/LabeledField.tsx

@@ -4,6 +4,7 @@ import {
   LabelContext,
   LabelPositionContext,
   LabelPositionContextValue,
+  useLabelPosition,
   useLabelWidth,
 } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
@@ -23,7 +24,7 @@ const labelPositionInset: LabelPositionContextValue = {
 export const LabeledField = memo(function LabeledField({
   children,
   label,
-  labelPosition = "start",
+  labelPosition: labelPositionProp,
   fieldId,
   minWidth = 100,
   className,
@@ -44,6 +45,10 @@ export const LabeledField = memo(function LabeledField({
   const labelWidthFromContext = useLabelWidth();
   const labelWidth = labelWidthFromContext ?? minWidth;
 
+  const labelPositionFromContext = useLabelPosition();
+  const labelPosition =
+    labelPositionProp ?? labelPositionFromContext ?? "start";
+
   const labeledFieldClasses = useMemo(
     () => labeledFieldStyles(labelPosition),
     [labelPosition]

package/src/components/List.tsx

@@ -14,7 +14,7 @@ import { ListView, ListViewItemInfo } from "./ListView";
 import { TreeView } from "./TreeView";
 
 const cssVarOverrides = {
-  "--icon-selected": cssVars.colors.primary,
+  "--n-icon-selected": cssVars.colors.primary,
 };
 
 const emptyArray: string[] = [];
@@ -60,6 +60,7 @@ export const List = memoGeneric(
       getDropTargetParentIndex,
       getPlaceholder,
       onClickItem,
+      dragIndicatorStyle,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -229,6 +230,7 @@ export const List = memoGeneric(
                 if (!expandable) return;
                 setExpanded?.(item, !expanded);
               }}
+              dragIndicatorStyle={dragIndicatorStyle}
             >
               <div
                 className={cx("flex flex-1 items-center px-2", rowGapMap[size])}
@@ -255,9 +257,7 @@ export const List = memoGeneric(
                           className={fontStyleMap[size]}
                           autoFocus={!isTestingRenaming}
                           onSubmitEditing={(value: string) => {
-                            if (value !== getName(item) && value !== "") {
-                              onRename?.(item, value);
-                            }
+                            onRename?.(item, value);
                             setRenamingId(undefined);
                           }}
                           onKeyDown={(e: React.KeyboardEvent) => {

package/src/components/ListView.tsx

@@ -26,7 +26,7 @@ import { ListChildComponentProps, VariableSizeList } from "react-window";
 import { mergeEventHandlers } from "../hooks/mergeEventHandlers";
 import { useHover } from "../hooks/useHover";
 import { cssVars, INPUT_HEIGHT } from "../theme";
-import { cx } from "../utils/classNames";
+import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import { ContextMenu } from "./ContextMenu";
 import { InputField } from "./InputField";
 import { MenuItem } from "./internal/Menu";
@@ -376,7 +376,7 @@ interface ListViewClickInfo {
   ctrlKey: boolean;
 }
 
-interface ListViewRowProps<MenuItemType extends string = string> {
+export interface ListViewRowProps<MenuItemType extends string = string> {
   id?: string;
   tabIndex?: number;
   role?: string;
@@ -1044,9 +1044,14 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         aria-labelledby={ariaLabelledby}
         aria-orientation={ariaOrientation}
         aria-multiselectable={ariaMultiselectable}
-        className={cx(
-          `flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} `,
-          className
+        className={mergeConflictingClassNames(
+          [
+            `flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} `,
+            className,
+          ],
+          {
+            categories: ["flex"],
+          }
         )}
         style={{ ...gapStyle, ...style }}
         {...{

package/src/components/MediaThumbnail.tsx

@@ -4,7 +4,7 @@ import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { IconName, Icons } from "./Icons";
 
-type ColorScheme = "primary" | "icon" | "warning";
+type ColorScheme = "primary" | "secondary" | "icon" | "warning";
 
 type AssetType = "image" | "video" | "audio";
 
@@ -31,7 +31,10 @@ type MediaThumbnailProps = {
   iconName?: IconName;
 };
 
-const getColors = (colorScheme: ColorScheme, selected: boolean) => {
+export const getThumbnailColors = (
+  colorScheme: ColorScheme,
+  selected: boolean
+) => {
   if (selected) {
     return {
       icon: cssVars.colors.primary,
@@ -45,6 +48,11 @@ const getColors = (colorScheme: ColorScheme, selected: boolean) => {
         icon: cssVars.colors.primary,
         background: cssVars.colors.listViewThumbnailBackground,
       };
+    case "secondary":
+      return {
+        icon: cssVars.colors.secondary,
+        background: cssVars.colors.secondaryPastel,
+      };
     case "warning":
       return {
         icon: cssVars.colors.warning,
@@ -72,7 +80,7 @@ export const MediaThumbnail = memo(function MediaThumbnail({
   url,
   iconName = "FileIcon",
 }: MediaThumbnailProps) {
-  const { icon: iconColor, background: backgroundColor } = getColors(
+  const { icon: iconColor, background: backgroundColor } = getThumbnailColors(
     colorScheme,
     selected
   );

package/src/components/Popover.tsx

@@ -32,6 +32,12 @@ interface Props
   className?: string;
 }
 
+export const popoverStyle = {
+  base: "rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
+  large: "w-[680px]",
+  normal: "w-[240px]",
+};
+
 export function Popover({
   children,
   trigger,
@@ -56,12 +62,9 @@ export function Popover({
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
           className={cx(
-            "rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
-            variant === "large"
-              ? "w-[680px]"
-              : variant === "normal"
-                ? "w-[240px]"
-                : "",
+            popoverStyle.base,
+            variant === "large" && popoverStyle.large,
+            variant === "normal" && popoverStyle.normal,
             className
           )}
           side={side}

package/src/components/Section.tsx

@@ -0,0 +1,172 @@
+import {
+  Button,
+  IconButton,
+  IndentContext,
+  INPUT_HEIGHT,
+  InspectorPrimitives,
+  Spacer,
+  textStyles,
+} from "@noya-app/noya-designsystem";
+import { clientStorage, usePersistentStateString } from "@noya-app/react-utils";
+import React, { CSSProperties, memo, useMemo } from "react";
+
+type TitleIconOptions = {
+  inlineBlockWrapper?: boolean;
+};
+
+export type SectionProps = {
+  children: React.ReactNode;
+  title?: React.ReactNode;
+  onClickTitle?: () => void;
+  titleTextStyle?: "small" | "heading5" | "heading4" | "heading3";
+  right?: React.ReactNode;
+  hideRightWhenCollapsed?: boolean;
+  extraPadding?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  titleIcon?: React.ReactNode;
+  titleIconOptions?: TitleIconOptions;
+};
+
+const titleIconStyle: CSSProperties = {
+  marginRight: "8px",
+  alignSelf: "flex-start",
+  position: "relative",
+  top: "2px",
+};
+
+const titleIconWrapperStyle: CSSProperties = {
+  display: "inline-block",
+};
+
+const SectionInternal = ({
+  children,
+  title,
+  onClickTitle,
+  titleTextStyle = "heading4",
+  right,
+  extraPadding,
+  className,
+  style: styleProp,
+  titleIcon,
+  titleIconOptions = {
+    inlineBlockWrapper: true,
+  },
+}: SectionProps) => {
+  const style: CSSProperties = useMemo(
+    () => ({
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      paddingTop:
+        titleTextStyle === "heading3"
+          ? "12px"
+          : title && extraPadding
+            ? "24px"
+            : "12px",
+      paddingBottom:
+        titleTextStyle === "heading3"
+          ? "12px"
+          : title && extraPadding
+            ? "12px"
+            : "12px",
+      ...styleProp,
+    }),
+    [titleTextStyle, title, extraPadding, styleProp]
+  );
+
+  const hasChildren = React.Children.toArray(children).some((child) => !!child);
+
+  const headerStyle: CSSProperties = useMemo(
+    () => ({
+      marginBottom: hasChildren ? "4px" : undefined,
+      minHeight: INPUT_HEIGHT,
+    }),
+    [hasChildren]
+  );
+
+  return (
+    <div style={style} className={className}>
+      {(title || titleIcon || right) && (
+        <InspectorPrimitives.SectionHeader style={headerStyle}>
+          {titleIcon && (
+            <div style={titleIconStyle} className={textStyles[titleTextStyle]}>
+              {titleIconOptions.inlineBlockWrapper ? (
+                <div style={titleIconWrapperStyle}>{titleIcon}</div>
+              ) : (
+                titleIcon
+              )}
+            </div>
+          )}
+          {title && (
+            <>
+              {onClickTitle ? (
+                <Button variant="none" onClick={onClickTitle}>
+                  <InspectorPrimitives.Title $textStyle={titleTextStyle}>
+                    {title}
+                  </InspectorPrimitives.Title>
+                </Button>
+              ) : (
+                <InspectorPrimitives.Title $textStyle={titleTextStyle}>
+                  {title}
+                </InspectorPrimitives.Title>
+              )}
+            </>
+          )}
+          <Spacer.Horizontal />
+          {right}
+        </InspectorPrimitives.SectionHeader>
+      )}
+      <IndentContext.Provider value={{ indentLevel: 1 }}>
+        {children}
+      </IndentContext.Provider>
+    </div>
+  );
+};
+
+type ExpandableSectionProps = {
+  storageKey: string;
+  initialVisibility?: "show" | "hide";
+};
+
+const ExpandableSection = ({
+  storageKey,
+  initialVisibility = "show",
+  ...props
+}: SectionProps & ExpandableSectionProps) => {
+  const [visibility, setVisibility] = usePersistentStateString<"show" | "hide">(
+    clientStorage,
+    storageKey,
+    initialVisibility
+  );
+  const expanded = visibility === "show";
+
+  return (
+    <SectionInternal
+      {...props}
+      right={!props.hideRightWhenCollapsed || expanded ? props.right : null}
+      title={
+        <div className="flex gap-1 items-center">
+          {props.title}
+          <IconButton
+            iconName={expanded ? "ChevronDownIcon2" : "ChevronRightIcon2"}
+            onClick={() => setVisibility(expanded ? "hide" : "show")}
+          />
+        </div>
+      }
+    >
+      {expanded && props.children}
+    </SectionInternal>
+  );
+};
+
+export const Section = memo(function InspectorSection({
+  storageKey,
+  ...props
+}: SectionProps & Partial<ExpandableSectionProps>) {
+  return storageKey ? (
+    <ExpandableSection {...props} storageKey={storageKey} />
+  ) : (
+    <SectionInternal {...props} />
+  );
+});

package/src/components/SelectMenu.tsx

@@ -105,7 +105,7 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
         {icon && <span className="pr-1.5">{renderIcon(icon)}</span>}
         {label && labelPosition === "inset" && (
           <div className={insetEndStyles}>
-            <Label className="pr-4 !text-text-disabled" htmlFor={id}>
+            <Label className="pr-4 text-text-disabled" htmlFor={id}>
               {label}
             </Label>
           </div>

package/src/components/Slider.tsx

@@ -109,7 +109,7 @@ export const Slider = memo(function Slider({
       <RadixSlider.Track className="flex-grow h-full rounded overflow-hidden bg-input-background">
         {label && labelPosition === "inset" && (
           <div className={insetEndStyles}>
-            <Label htmlFor={id} className="!text-text-disabled">
+            <Label htmlFor={id} className="text-text-disabled">
               {label}
             </Label>
           </div>