@noya-app/noya-designsystem 0.1.95 → 0.1.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.95",
+  "version": "0.1.97",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,8 @@
     "build:css": "tailwindcss -i ./src/index.css -o ./dist/index.css --postcss",
     "build": "tsup",
     "dev": "npm run build -- --watch",
-    "lint": "eslint . --max-warnings 0"
+    "lint": "eslint . --max-warnings 0",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@base-ui/react": "1.7.0",

package/src/components/InputField.tsx

@@ -36,7 +36,10 @@ type InputFieldContextValue = {
   startRef: ForwardedRef<HTMLSpanElement>;
   endRef: ForwardedRef<HTMLSpanElement>;
   endWidth?: number;
-} & Pick<InputFieldRootProps, "endWidth" | "startWidth" | "size" | "id">;
+} & Pick<
+  InputFieldRootProps,
+  "endWidth" | "startWidth" | "startInset" | "size" | "id"
+>;
 
 const InputFieldContext = createContext<InputFieldContextValue>({
   startWidth: undefined,
@@ -55,13 +58,26 @@ const noop = () => {};
 export const getFieldSpacing = ({
   endWidth = 0,
   startWidth = 0,
+  startInset,
   variant,
 }: {
   endWidth?: number;
   startWidth?: number;
+  /** Custom left offset (px) of the start slot; when set, the input's left
+   * padding is derived from it (inset + start width + 5px gap, matching the
+   * inspector's 21px-swatch-at-3px reference geometry). */
+  startInset?: number;
   variant?: InputFieldVariant;
 }) => ({
-  paddingLeft: `${variant === "bare" ? startWidth : startWidth ? startWidth + 12 : 8}px`,
+  paddingLeft: `${
+    variant === "bare"
+      ? startWidth
+      : startInset !== undefined && startWidth
+        ? startInset + startWidth + 5
+        : startWidth
+          ? startWidth + 12
+          : 8
+  }px`,
   paddingRight: `${variant === "bare" ? endWidth : endWidth ? endWidth + 12 : 8}px`,
 });
 
@@ -223,7 +239,8 @@ const InputElement = forwardRef(
     }: InputElementProps,
     forwardedRef: ForwardedRef<any>
   ) => {
-    const { endWidth, inputRef, size, id, startWidth } = useInputFieldContext();
+    const { endWidth, inputRef, size, id, startWidth, startInset } =
+      useInputFieldContext();
 
     const ref = useMergeRefs(
       attachInputRef ? inputRef : null,
@@ -234,6 +251,7 @@ const InputElement = forwardRef(
       endWidth,
       variant: $variant,
       startWidth,
+      startInset,
     });
 
     const inputClassName = cx(
@@ -524,6 +542,10 @@ interface InputFieldRootProps {
   label?: ReactNode;
   width?: number;
   startWidth?: number;
+  /** Left offset (px) of the start slot, replacing the default 6px — e.g. 3
+   * for the inspector's swatch-in-field geometry. Also tightens the input's
+   * derived left padding (see getFieldSpacing). */
+  startInset?: number;
   endWidth?: number;
   /** @default medium */
   size?: InputSize;
@@ -544,6 +566,7 @@ function InputFieldRoot({
   width,
   sideOffset = 3,
   startWidth: startWidthProp,
+  startInset,
   endWidth: endWidthProp,
   size = "medium",
   renderPopoverContent,
@@ -588,6 +611,7 @@ function InputFieldRoot({
   const contextValue = useMemo(
     (): InputFieldContextValue => ({
       startWidth,
+      startInset,
       endWidth,
       inputRef,
       startRef,
@@ -597,7 +621,16 @@ function InputFieldRoot({
       onFocusChange: handleFocusChange,
       id: id ?? randomId,
     }),
-    [startWidth, endWidth, size, isFocused, handleFocusChange, id, randomId]
+    [
+      startWidth,
+      startInset,
+      endWidth,
+      size,
+      isFocused,
+      handleFocusChange,
+      id,
+      randomId,
+    ]
   );
 
   const insetLabel = useMemo(
@@ -618,7 +651,11 @@ function InputFieldRoot({
     >
       {children}
       {start && (
-        <span ref={startRef} className={cx(startBaseStyles, startClassName)}>
+        <span
+          ref={startRef}
+          className={cx(startBaseStyles, startClassName)}
+          style={startInset !== undefined ? { left: startInset } : undefined}
+        >
           {start}
         </span>
       )}

package/src/components/__tests__/Card.test.tsx

@@ -28,7 +28,8 @@ describe("Card", () => {
     );
     const card = getByTestId("card");
 
-    expect(card).toBe(ref.current);
+    expect(ref.current).not.toBeNull();
+    expect(card).toBe(ref.current!);
     expect(card.textContent).toBe("Content");
     expect(card.className).toContain("n-border");
     expect(card.className).toContain("n-p-4");

package/src/components/__tests__/InputField.test.tsx

@@ -22,6 +22,8 @@ describe("InputField", () => {
             inputRef.current = element;
             input = element;
           }}
+          value=""
+          onChange={() => {}}
           width={240}
           renderPopoverContent={() => <button>Result</button>}
         />
@@ -181,7 +183,7 @@ describe("InputField", () => {
     const changes: Array<{ value: number; isEmpty: boolean }> = [];
 
     function OptionalNumberInput() {
-      const [value, setValue] = useState<number>(42);
+      const [value, setValue] = useState<number | undefined>(42);
 
       return (
         <InputField.Root>

package/src/components/internal/__tests__/TextInput.test.tsx

@@ -27,7 +27,7 @@ describe("submittable text input", () => {
   });
 
   test("change and blur, reset", () => {
-    const handleSubmit = (value: string) => {};
+    const handleSubmit = (_value: string) => {};
 
     const { container, rerender } = render(
       <TextInput value="" onSubmit={handleSubmit} />
@@ -90,7 +90,7 @@ describe("submittable text input", () => {
   });
 
   test("change and submit, reset", () => {
-    const handleSubmit = (value: string) => {};
+    const handleSubmit = (_value: string) => {};
 
     const { container, rerender } = render(
       <TextInput value="" onSubmit={handleSubmit} />