@noya-app/noya-designsystem 0.1.96 → 0.1.97

package/.turbo/turbo-build.log

@@ -7,18 +7,18 @@ $ tsup
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/emojis.js     1.10 KB
-CJS dist/index.js      1.44 MB
-CJS dist/emojis.js.map 194.00 B
-CJS dist/index.js.map  2.81 MB
-CJS ⚡️ Build success in 8808ms
 ESM dist/emojis.mjs             300.00 B
 ESM dist/chunk-L6E2LZOL.mjs     2.02 KB
-ESM dist/index.mjs              1.40 MB
+ESM dist/index.mjs              1.41 MB
 ESM dist/emojis.mjs.map         157.00 B
 ESM dist/chunk-L6E2LZOL.mjs.map 71.00 B
 ESM dist/index.mjs.map          2.81 MB
-ESM ⚡️ Build success in 9400ms
+ESM ⚡️ Build success in 2372ms
+CJS dist/emojis.js     1.10 KB
+CJS dist/index.js      1.44 MB
+CJS dist/emojis.js.map 194.00 B
+CJS dist/index.js.map  2.82 MB
+CJS ⚡️ Build success in 2372ms
 Browserslist: caniuse-lite is outdated. Please run:
   npx update-browserslist-db@latest
   Why you should do it regularly: https://github.com/browserslist/update-db#readme
@@ -28,10 +28,10 @@ Browserslist: browsers data (caniuse-lite) is 16 months old. Please run:
 
 Rebuilding...
 
-Done in 13161ms.
+Done in 4066ms.
 
-DTS ⚡️ Build success in 72908ms
+DTS ⚡️ Build success in 29591ms
 DTS dist/emojis.d.ts  43.00 B
-DTS dist/index.d.ts   131.91 KB
+DTS dist/index.d.ts   132.42 KB
 DTS dist/emojis.d.mts 43.00 B
-DTS dist/index.d.mts  131.91 KB
+DTS dist/index.d.mts  132.42 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @noya-app/noya-designsystem
 
+## 0.1.97
+
+### Patch Changes
+
+- dbe70ef: Update packages
+
 ## 0.1.96
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1370,11 +1370,15 @@ type InputFieldContextValue = {
     startRef: ForwardedRef<HTMLSpanElement>;
     endRef: ForwardedRef<HTMLSpanElement>;
     endWidth?: number;
-} & Pick<InputFieldRootProps, "endWidth" | "startWidth" | "size" | "id">;
+} & Pick<InputFieldRootProps, "endWidth" | "startWidth" | "startInset" | "size" | "id">;
 declare const useInputFieldContext: () => InputFieldContextValue;
-declare const getFieldSpacing: ({ endWidth, startWidth, variant, }: {
+declare const getFieldSpacing: ({ endWidth, startWidth, 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: string;
@@ -1419,6 +1423,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;
@@ -1434,7 +1442,7 @@ interface InputFieldRootProps {
     style?: React__default.CSSProperties;
     className?: string;
 }
-declare function InputFieldRoot({ id, children, width, sideOffset, startWidth: startWidthProp, endWidth: endWidthProp, size, renderPopoverContent, onFocusChange, style, className, start, end, startClassName, endClassName, label: labelProp, }: InputFieldRootProps): React__default.JSX.Element;
+declare function InputFieldRoot({ id, children, width, sideOffset, startWidth: startWidthProp, startInset, endWidth: endWidthProp, size, renderPopoverContent, onFocusChange, style, className, start, end, startClassName, endClassName, label: labelProp, }: InputFieldRootProps): React__default.JSX.Element;
 type InputFieldProps = InputFieldRootProps & InputFieldInputProps;
 declare const InputField: React__default.ForwardRefExoticComponent<InputFieldProps & React__default.RefAttributes<HTMLInputElement>> & {
     readonly Root: React__default.MemoExoticComponent<typeof InputFieldRoot>;

package/dist/index.d.ts

@@ -1370,11 +1370,15 @@ type InputFieldContextValue = {
     startRef: ForwardedRef<HTMLSpanElement>;
     endRef: ForwardedRef<HTMLSpanElement>;
     endWidth?: number;
-} & Pick<InputFieldRootProps, "endWidth" | "startWidth" | "size" | "id">;
+} & Pick<InputFieldRootProps, "endWidth" | "startWidth" | "startInset" | "size" | "id">;
 declare const useInputFieldContext: () => InputFieldContextValue;
-declare const getFieldSpacing: ({ endWidth, startWidth, variant, }: {
+declare const getFieldSpacing: ({ endWidth, startWidth, 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: string;
@@ -1419,6 +1423,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;
@@ -1434,7 +1442,7 @@ interface InputFieldRootProps {
     style?: React__default.CSSProperties;
     className?: string;
 }
-declare function InputFieldRoot({ id, children, width, sideOffset, startWidth: startWidthProp, endWidth: endWidthProp, size, renderPopoverContent, onFocusChange, style, className, start, end, startClassName, endClassName, label: labelProp, }: InputFieldRootProps): React__default.JSX.Element;
+declare function InputFieldRoot({ id, children, width, sideOffset, startWidth: startWidthProp, startInset, endWidth: endWidthProp, size, renderPopoverContent, onFocusChange, style, className, start, end, startClassName, endClassName, label: labelProp, }: InputFieldRootProps): React__default.JSX.Element;
 type InputFieldProps = InputFieldRootProps & InputFieldInputProps;
 declare const InputField: React__default.ForwardRefExoticComponent<InputFieldProps & React__default.RefAttributes<HTMLInputElement>> & {
     readonly Root: React__default.MemoExoticComponent<typeof InputFieldRoot>;

package/dist/index.js

@@ -21953,9 +21953,10 @@ var noop6 = () => {
 var getFieldSpacing = ({
   endWidth = 0,
   startWidth = 0,
+  startInset,
   variant
 }) => ({
-  paddingLeft: `${variant === "bare" ? startWidth : startWidth ? startWidth + 12 : 8}px`,
+  paddingLeft: `${variant === "bare" ? startWidth : startInset !== void 0 && startWidth ? startInset + startWidth + 5 : startWidth ? startWidth + 12 : 8}px`,
   paddingRight: `${variant === "bare" ? endWidth : endWidth ? endWidth + 12 : 8}px`
 });
 var InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu2({ id, items, onSelect, children }) {
@@ -22046,7 +22047,7 @@ var InputElement = (0, import_react34.forwardRef)(
     attachInputRef = true,
     ...props
   }, forwardedRef) => {
-    const { endWidth, inputRef, size: size4, id, startWidth } = useInputFieldContext();
+    const { endWidth, inputRef, size: size4, id, startWidth, startInset } = useInputFieldContext();
     const ref = useMergeRefs(
       attachInputRef ? inputRef : null,
       forwardedRef
@@ -22054,7 +22055,8 @@ var InputElement = (0, import_react34.forwardRef)(
     const spacingStyles = getFieldSpacing({
       endWidth,
       variant: $variant,
-      startWidth
+      startWidth,
+      startInset
     });
     const inputClassName = cx(
       "n-flex n-w-0 n-flex-1 n-relative n-border-0 n-outline-none n-min-w-0 n-self-stretch n-rounded n-bg-input-background focus:n-ring-2 focus:n-ring-primary placeholder:n-text-text-disabled n-transition-[box-shadow]",
@@ -22236,6 +22238,7 @@ function InputFieldRoot({
   width,
   sideOffset = 3,
   startWidth: startWidthProp,
+  startInset,
   endWidth: endWidthProp,
   size: size4 = "medium",
   renderPopoverContent,
@@ -22273,6 +22276,7 @@ function InputFieldRoot({
   const contextValue = (0, import_react34.useMemo)(
     () => ({
       startWidth,
+      startInset,
       endWidth,
       inputRef,
       startRef,
@@ -22282,7 +22286,16 @@ function InputFieldRoot({
       onFocusChange: handleFocusChange,
       id: id ?? randomId
     }),
-    [startWidth, endWidth, size4, isFocused, handleFocusChange, id, randomId]
+    [
+      startWidth,
+      startInset,
+      endWidth,
+      size4,
+      isFocused,
+      handleFocusChange,
+      id,
+      randomId
+    ]
   );
   const insetLabel = (0, import_react34.useMemo)(
     () => /* @__PURE__ */ import_react34.default.createElement(Label, { htmlFor: id, className: "!n-text-text-disabled" }, labelProp ?? label),
@@ -22297,7 +22310,15 @@ function InputFieldRoot({
       className
     },
     children,
-    start && /* @__PURE__ */ import_react34.default.createElement("span", { ref: startRef, className: cx(startBaseStyles, startClassName) }, start),
+    start && /* @__PURE__ */ import_react34.default.createElement(
+      "span",
+      {
+        ref: startRef,
+        className: cx(startBaseStyles, startClassName),
+        style: startInset !== void 0 ? { left: startInset } : void 0
+      },
+      start
+    ),
     (end || label) && /* @__PURE__ */ import_react34.default.createElement(
       "span",
       {