@noya-app/noya-designsystem 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,10 +13,10 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.3",
+    "@noya-app/noya-colorpicker": "0.1.5",
     "@noya-app/noya-utils": "0.1.0",
-    "@noya-app/noya-geometry": "0.1.1",
-    "@noya-app/noya-icons": "0.1.0",
+    "@noya-app/noya-geometry": "0.1.2",
+    "@noya-app/noya-icons": "0.1.2",
     "@noya-app/noya-keymap": "0.1.0",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",

package/src/components/Button.tsx

@@ -11,6 +11,7 @@ import { Tooltip } from "./Tooltip";
 type ButtonVariant =
   | "normal"
   | "primary"
+  | "primaryGradient"
   | "secondary"
   | "secondaryBright"
   | "white"
@@ -54,19 +55,27 @@ export const ButtonElement = styled.button<{
   }),
   background: active
     ? theme.colors.primary
-    : variant === "none" || variant === "thin"
-      ? "transparent"
-      : theme.colors.inputBackground,
+    : 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,

package/src/components/DraggableMenuButton.tsx

@@ -35,8 +35,8 @@ export const DraggableMenuButton = memo(function DraggableMenuButton<
   onSelect,
   isVisible = true,
 }: {
-  items: MenuItem<T>[];
-  onSelect: (value: T) => void;
+  items?: MenuItem<T>[];
+  onSelect?: (value: T) => void;
   isVisible?: boolean;
 }) {
   const color = useDesignSystemTheme().colors.icon;
@@ -98,19 +98,25 @@ export const DraggableMenuButton = memo(function DraggableMenuButton<
         event.preventDefault();
       }}
     >
-      <DropdownMenu
-        open={open}
-        onOpenChange={handleOpenChange}
-        items={items}
-        onSelect={onSelect}
-        shouldBindKeyboardShortcuts={false}
-      >
-        <TriggerElement>
-          <DragHandleDots2Icon
-            color={isVisible || open ? color : "transparent"}
-          />
-        </TriggerElement>
-      </DropdownMenu>
+      {items && onSelect ? (
+        <DropdownMenu
+          open={open}
+          onOpenChange={handleOpenChange}
+          items={items}
+          onSelect={onSelect}
+          shouldBindKeyboardShortcuts={false}
+        >
+          <TriggerElement>
+            <DragHandleDots2Icon
+              color={isVisible || open ? color : "transparent"}
+            />
+          </TriggerElement>
+        </DropdownMenu>
+      ) : (
+        <DragHandleDots2Icon
+          color={isVisible || open ? color : "transparent"}
+        />
+      )}
     </DotButtonElement>
   );
 });

package/src/components/InspectorPrimitives.tsx

@@ -90,6 +90,7 @@ export const RowLabel = styled.span<{
         fontWeight: "bold",
       }),
   lineHeight: "19px", // Button height
+  alignItems: "center",
 }));
 
 export const LabeledRow = memo(function LabeledRow({

package/src/components/ListView.tsx

@@ -332,6 +332,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   onContextMenu?: () => void;
   onMenuOpenChange?: (isOpen: boolean) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
+  style?: CSSProperties;
 }
 
 const ListViewRow = forwardRef(function ListViewRow<
@@ -357,6 +358,7 @@ const ListViewRow = forwardRef(function ListViewRow<
     onSelectMenuItem,
     onMenuOpenChange,
     onKeyDown,
+    style,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -402,15 +404,16 @@ const ListViewRow = forwardRef(function ListViewRow<
     [onDoubleClick]
   );
 
-  const isDraggingStyle = useMemo(() => {
+  const mergedStyle = useMemo(() => {
     return isDragging
       ? {
           // TODO: Where do these offsets actually come from?
           transform: `translate3d(-36px, -6px, 0)`,
           width: `calc(100% + 48px)`,
+          ...style,
         }
-      : undefined;
-  }, [isDragging]);
+      : style;
+  }, [isDragging, style]);
 
   const renderContent = (
     {
@@ -443,7 +446,7 @@ const ListViewRow = forwardRef(function ListViewRow<
         aria-selected={selected}
         divider={!isDragging && divider}
         onKeyDown={onKeyDown}
-        style={isDraggingStyle}
+        style={mergedStyle}
         {...renderProps}
         {...mergeEventHandlers(
           { onPointerDown: renderProps.onPointerDown },
@@ -655,7 +658,9 @@ type RenderProps<T> = {
   renderItem: (item: T, index: number, info: ListViewItemInfo) => ReactNode;
   keyExtractor: (item: T, index: number) => string;
   /**
-   * Each item must have an `id` in order to be sortable
+   * Each item must have an `id` in order to be sortable.
+   *
+   * Additionally, the key extracted with `keyExtractor` must match the ListItem.Row `id`.
    */
   sortable?: boolean;
   virtualized?: Size;

package/src/components/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React, {
   ComponentProps,
   createContext,
@@ -8,39 +8,39 @@ import React, {
   useCallback,
   useContext,
   useMemo,
-} from 'react';
-import styled from 'styled-components';
-import { Tooltip } from './Tooltip';
+} from "react";
+import styled from "styled-components";
+import { Tooltip } from "./Tooltip";
 
-type RadioGroupColorScheme = 'primary' | 'secondary';
+type RadioGroupColorScheme = "primary" | "secondary";
 
-const ignoredProps = new Set(['colorScheme']);
+const ignoredProps = new Set(["colorScheme"]);
 
 const StyledRoot = styled(ToggleGroupPrimitive.Root).withConfig({
   shouldForwardProp: (prop) => !ignoredProps.has(prop),
 })<{
   colorScheme?: RadioGroupColorScheme;
 }>(({ theme, colorScheme }) => ({
-  appearance: 'none',
-  width: '0px', // Reset intrinsic width
-  flex: '1 1 0px',
-  position: 'relative',
-  border: '0',
-  outline: 'none',
-  minWidth: '0',
-  textAlign: 'left',
-  alignSelf: 'stretch',
-  borderRadius: '4px',
+  appearance: "none",
+  width: "0px", // Reset intrinsic width
+  flex: "1 1 0px",
+  position: "relative",
+  border: "0",
+  outline: "none",
+  minWidth: "0",
+  textAlign: "left",
+  alignSelf: "stretch",
+  borderRadius: "4px",
   background: theme.colors.inputBackground,
-  '&:focus': {
+  "&:focus": {
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${
-      theme.colors[colorScheme ?? 'primary']
+      theme.colors[colorScheme ?? "primary"]
     }`,
   },
-  display: 'flex',
-  alignItems: 'stretch',
-  minHeight: '27px',
-  padding: colorScheme === undefined ? '2px' : 0,
+  display: "flex",
+  alignItems: "stretch",
+  minHeight: "27px",
+  padding: colorScheme === undefined ? "2px" : 0,
 }));
 
 const StyledItem = styled(ToggleGroupPrimitive.Item).withConfig({
@@ -48,19 +48,20 @@ const StyledItem = styled(ToggleGroupPrimitive.Item).withConfig({
 })<{
   colorScheme?: RadioGroupColorScheme;
 }>(({ theme, colorScheme }) => ({
-  position: 'relative',
-  flex: '1 1 0',
-  appearance: 'none',
-  border: 'none',
-  background: 'none',
-  color: 'rgb(139, 139, 139)',
+  ...theme.textStyles.small,
+  position: "relative",
+  flex: "1 1 0",
+  appearance: "none",
+  border: "none",
+  background: "none",
+  color: "rgb(139, 139, 139)",
   padding: 0,
   margin: 0,
-  borderRadius: '4px',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  verticalAlign: 'middle',
+  borderRadius: "4px",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  verticalAlign: "middle",
   '&[aria-checked="true"]': {
     backgroundColor: colorScheme
       ? theme.colors[colorScheme]
@@ -68,10 +69,10 @@ const StyledItem = styled(ToggleGroupPrimitive.Item).withConfig({
     color: colorScheme ? theme.colors.radioGroup.background : theme.colors.text,
     boxShadow: colorScheme ? undefined : `0 1px 1px rgba(0,0,0,0.1)`,
   },
-  '&:focus': {
-    outline: 'none',
+  "&:focus": {
+    outline: "none",
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${
-      theme.colors[colorScheme ?? 'primary']
+      theme.colors[colorScheme ?? "primary"]
     }`,
   },
 }));
@@ -85,7 +86,7 @@ interface ItemProps {
 
 const ToggleGroupItem = forwardRef(function ToggleGroupItem(
   { value, tooltip, children, disabled = false }: ItemProps,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>
 ) {
   const { colorScheme } = useContext(RadioGroupContext);
 
@@ -112,13 +113,13 @@ type RadioGroupContextValue = {
 };
 
 const RadioGroupContext = createContext<RadioGroupContextValue>({
-  colorScheme: 'primary',
+  colorScheme: "primary",
 });
 
 interface Props {
   id?: string;
   value?: string;
-  onValueChange?: ComponentProps<typeof StyledRoot>['onValueChange'];
+  onValueChange?: ComponentProps<typeof StyledRoot>["onValueChange"];
   colorScheme?: RadioGroupColorScheme;
   allowEmpty?: boolean;
   children: ReactNode;
@@ -139,7 +140,7 @@ function ToggleGroupRoot({
       if (!allowEmpty && !value) return;
       onValueChange?.(value);
     },
-    [allowEmpty, onValueChange],
+    [allowEmpty, onValueChange]
   );
 
   return (

package/src/components/Select.tsx

@@ -87,7 +87,7 @@ type ChildrenProps<T> =
       children: ReactNode;
     }
   | {
-      options: T[];
+      options: readonly T[];
       getTitle?: (option: T, index: number) => string;
       onChange: (value: T) => void;
     };

package/src/theme/dark.ts

@@ -34,6 +34,9 @@ export const colors = produce(lightTheme.colors, (colors) => {
   colors.activeBackground = "rgba(181,178,255,0.08)";
   colors.thumbnailBackground = "#1f1d33";
   colors.thumbnailShadow = "#1f1d3366";
+  colors.breadcrumb.text = colors.textMuted;
+  colors.breadcrumb.textHover = colors.textSubtle;
+  colors.breadcrumb.icon = colors.icon;
 });
 
 export { fonts, sizes, textStyles } from "./light";