@noya-app/noya-designsystem 0.1.87 → 0.1.89

package/src/components/DialogNavigator.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import { cx } from "../utils/classNames";
+import { BaseToolbar } from "./BaseToolbar";
+import { Button } from "./Button";
+import { Dialog, DialogProps } from "./Dialog";
+import { IconButton } from "./IconButton";
+import {
+  Navigator,
+  NavigatorParams,
+  NavigatorProps,
+  NavigatorRoute,
+  NavigatorRoutesConfig,
+  NavigatorScreenProps,
+  useNavigator,
+  useNavigatorRoute,
+} from "./Navigator";
+import { StackNavigatorHeaderProps } from "./StackNavigator";
+import { Body } from "./Text";
+
+export type DialogNavigatorProps<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+> = Omit<
+  NavigatorProps<Routes, Name>,
+  "children" | "className" | "style" | "renderHeader" | "showHeader"
+> &
+  Pick<DialogProps, "closeOnInteractOutside" | "open"> & {
+    children: ReactNode;
+    title: ReactNode;
+    onOpenChange: (open: boolean) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    navigatorClassName?: string;
+    navigatorStyle?: React.CSSProperties;
+    showCloseButton?: boolean;
+  };
+
+export function DialogNavigator<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+>({
+  children,
+  title,
+  open,
+  onOpenChange,
+  closeOnInteractOutside,
+  className,
+  style,
+  navigatorClassName,
+  navigatorStyle,
+  showCloseButton = true,
+  ...navigatorProps
+}: DialogNavigatorProps<Routes, Name>) {
+  return (
+    <Dialog
+      title={title}
+      titleVisibility="hidden"
+      open={open}
+      onOpenChange={onOpenChange}
+      closeOnInteractOutside={closeOnInteractOutside}
+      showCloseButton={false}
+      className={cx("n-p-0 n-overflow-hidden", className)}
+      style={style}
+    >
+      <Navigator
+        {...navigatorProps}
+        className={navigatorClassName}
+        style={navigatorStyle}
+        renderHeader={(headerProps) => (
+          <DialogNavigatorHeader
+            {...headerProps}
+            showCloseButton={showCloseButton}
+            onClose={() => onOpenChange(false)}
+          />
+        )}
+      >
+        {children}
+      </Navigator>
+    </Dialog>
+  );
+}
+
+function DialogNavigatorHeader({
+  showDivider,
+  showBackButton,
+  onBack,
+  right,
+  title,
+  showCloseButton,
+  onClose,
+}: StackNavigatorHeaderProps & {
+  showCloseButton: boolean;
+  onClose: () => void;
+}) {
+  return (
+    <BaseToolbar
+      innerClassName="n-px-1"
+      showDivider={showDivider}
+      enableAbsoluteBreakpoint={false}
+      enableContainerQuery={false}
+      left={
+        showBackButton && (
+          <Button
+            className="-n-mx-2"
+            icon="ArrowLeftIcon"
+            onClick={onBack}
+            aria-label="Back"
+          />
+        )
+      }
+      right={
+        (right || showCloseButton) && (
+          <div className="n-flex n-items-center n-gap-1">
+            {right}
+            {showCloseButton && (
+              <IconButton
+                iconName="Cross1Icon"
+                aria-label="Close"
+                onClick={onClose}
+              />
+            )}
+          </div>
+        )
+      }
+    >
+      {typeof title === "string" || typeof title === "number" ? (
+        <Body>{title}</Body>
+      ) : (
+        title
+      )}
+    </BaseToolbar>
+  );
+}
+
+export function createDialogNavigator<
+  RoutesConfig extends Record<string, NavigatorParams | null>,
+>() {
+  return Object.assign(
+    DialogNavigator as <Name extends keyof RoutesConfig>(
+      props: DialogNavigatorProps<NavigatorRoutesConfig<RoutesConfig>, Name>
+    ) => ReactNode,
+    {
+      Screen: Navigator.Screen as <Name extends keyof RoutesConfig>(
+        props: NavigatorScreenProps<NavigatorRoutesConfig<RoutesConfig>, Name>
+      ) => ReactNode,
+      useNavigator: useNavigator<NavigatorRoutesConfig<RoutesConfig>>,
+      useNavigatorRoute: useNavigatorRoute as <Name extends keyof RoutesConfig>(
+        name: Name
+      ) => NavigatorRoute<NavigatorRoutesConfig<RoutesConfig>[Name]["params"]>,
+    }
+  );
+}

package/src/components/InputField.tsx

@@ -434,23 +434,25 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
   );
 
   const handleChange = useCallback(
-    (value: string) => {
-      if (value === "" || value === "-" || value === ".") {
-        setInternalValue(value);
+    (inputValue: string) => {
+      if (inputValue === "" || inputValue === "-" || inputValue === ".") {
+        setInternalValue(inputValue);
         if (triggersOnEmpty) {
           onChange?.(0, { isEmpty: true });
         }
         return;
       }
 
-      if (value.endsWith(".")) {
-        setInternalValue(value);
+      if (inputValue.endsWith(".")) {
+        setInternalValue(inputValue);
         return;
       }
 
-      setInternalValue(undefined);
+      // Keep the text being edited stable if the parent rejects or normalizes
+      // an intermediate numeric value. The accepted prop value takes over on blur.
+      setInternalValue(inputValue);
 
-      const newValue = parseNumber(value);
+      const newValue = parseNumber(inputValue);
 
       if (!isNaN(newValue)) {
         onChange?.(newValue, { isEmpty: false });

package/src/components/Navigator.tsx

@@ -71,6 +71,7 @@ export type NavigatorHeaderProps<
   title: React.ReactNode;
   right: React.ReactNode;
   showBackButton: boolean;
+  showDivider: boolean;
   onBack?: () => void;
 };
 
@@ -406,6 +407,7 @@ function NavigatorImpl<
                   title,
                   right,
                   showBackButton: headerProps.showBackButton,
+                  showDivider: headerProps.showDivider,
                   onBack: headerProps.onBack,
                 }),
         renderContent: () => {

package/src/components/SegmentedControl.tsx

@@ -87,6 +87,30 @@ export type SegmentedControlItemProps<T extends string> = {
   "value" | "disabled" | "icon" | "role" | "title"
 >;
 
+export function snapIndicatorEdgesToDevicePixels({
+  containerLeft,
+  itemLeft,
+  itemRight,
+  devicePixelRatio,
+}: {
+  containerLeft: number;
+  itemLeft: number;
+  itemRight: number;
+  devicePixelRatio: number;
+}) {
+  const scale =
+    Number.isFinite(devicePixelRatio) && devicePixelRatio > 0
+      ? devicePixelRatio
+      : 1;
+  const snappedLeft = Math.round(itemLeft * scale) / scale;
+  const snappedRight = Math.round(itemRight * scale) / scale;
+
+  return {
+    left: snappedLeft - containerLeft,
+    width: Math.max(0, snappedRight - snappedLeft),
+  };
+}
+
 const SegmentedControlItem = forwardRef(function SegmentedControlItem<
   T extends string,
 >(
@@ -256,10 +280,14 @@ function useIndicatorPosition({
     const containerRect = container.getBoundingClientRect();
     const itemRect = selectedItem.getBoundingClientRect();
 
-    setIndicatorStyle({
-      left: itemRect.left - containerRect.left,
-      width: itemRect.width,
-    });
+    setIndicatorStyle(
+      snapIndicatorEdgesToDevicePixels({
+        containerLeft: containerRect.left,
+        itemLeft: itemRect.left,
+        itemRight: itemRect.right,
+        devicePixelRatio: window.devicePixelRatio,
+      })
+    );
 
     hasInitialized.current = true;
   }, [containerRef, itemRefs, selectedIndex, variant, itemCount, isCompact]);

package/src/components/SelectionToolbar.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import {
-  cssVarNames,
-  cx,
   portalScopeProps,
   usePortalScopeId,
 } from "@noya-app/noya-designsystem";
@@ -18,6 +16,7 @@ import {
   type VirtualElement,
 } from "@floating-ui/react";
 import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Toolbar } from "./Toolbar";
 
 type Side = "top" | "right" | "bottom" | "left";
 type Align = "start" | "center" | "end";
@@ -106,17 +105,13 @@ export const SelectionToolbarContainer = memo(
             ...floatingStyles,
             opacity: size ? 1 : 0,
             transition: `opacity ${transitionDuration}s ease-in-out`,
-            [cssVarNames.colors.inputBackground]: "transparent",
-            [cssVarNames.colors.buttonBackground]: "transparent",
           }}
           className="n-z-menu"
         >
-          <div
+          <Toolbar
             ref={containerRef}
-            className={cx(
-              "n-flex n-gap-1 n-bg-popover-background n-rounded n-shadow-popover n-p-1",
-              containerClassName
-            )}
+            size="small"
+            className={containerClassName}
             style={containerStyle}
             onClick={(e) => e.stopPropagation()}
             onMouseDown={(e) => e.stopPropagation()}
@@ -124,7 +119,7 @@ export const SelectionToolbarContainer = memo(
             onWheel={(e) => e.stopPropagation()}
           >
             {children}
-          </div>
+          </Toolbar>
         </div>
       </FloatingPortal>
     );

package/src/components/StatCard.tsx

@@ -0,0 +1,82 @@
+import { ArrowDownIcon, ArrowUpIcon } from "@noya-app/noya-icons";
+import React, { forwardRef } from "react";
+import { cx } from "../utils/classNames";
+import { Card, CardProps } from "./Card";
+import { Chip, ChipProps } from "./Chip";
+import { IconProp, renderIcon } from "./Icons";
+import { Heading1, Small } from "./Text";
+
+export type StatCardColorScheme = NonNullable<ChipProps["colorScheme"]>;
+export type StatCardTrend = "up" | "down";
+
+export type StatCardProps = Omit<CardProps, "children"> & {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  icon?: IconProp;
+  change?: React.ReactNode;
+  trend?: StatCardTrend;
+  colorScheme?: StatCardColorScheme;
+};
+
+const ICON_COLOR_STYLES: Record<StatCardColorScheme, string> = {
+  primary: "n-bg-primary",
+  secondary: "n-bg-secondary",
+  info: "n-bg-banner-info-text",
+  error: "n-bg-banner-error-text",
+};
+
+export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(
+  function StatCard(
+    {
+      label,
+      value,
+      icon,
+      change,
+      trend,
+      colorScheme = "primary",
+      className,
+      ...props
+    },
+    forwardedRef
+  ) {
+    const TrendIcon = trend === "down" ? ArrowDownIcon : ArrowUpIcon;
+
+    return (
+      <Card
+        ref={forwardedRef}
+        className={cx("n-flex n-items-center n-gap-4", className)}
+        {...props}
+      >
+        {icon && (
+          <div
+            aria-hidden="true"
+            className={cx(
+              "n-flex n-h-16 n-w-16 n-flex-none n-items-center n-justify-center n-rounded-md n-text-white [&>svg]:n-h-8 [&>svg]:n-w-8",
+              ICON_COLOR_STYLES[colorScheme]
+            )}
+          >
+            {renderIcon(icon)}
+          </div>
+        )}
+        <div className="n-flex n-min-w-0 n-flex-1 n-self-stretch n-flex-col n-justify-center n-gap-1">
+          <div className="n-flex n-items-center n-gap-4">
+            <Small className="n-min-w-0 n-flex-1 n-opacity-70">{label}</Small>
+            {change !== undefined && (
+              <Chip
+                className="n-flex-none n-gap-1"
+                colorScheme={colorScheme}
+                size="large"
+              >
+                {trend && <TrendIcon aria-hidden="true" />}
+                {change}
+              </Chip>
+            )}
+          </div>
+          <Heading1 as="div" className="!n-font-bold n-leading-none">
+            {value}
+          </Heading1>
+        </div>
+      </Card>
+    );
+  }
+);