@noya-app/noya-designsystem 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/Button.tsx

@@ -57,10 +57,10 @@ export const ButtonElement = styled.button<{
     borderRadius: "4px",
     paddingTop: $variant === "none" ? "0px" : "4px",
     paddingRight:
-      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     paddingBottom: $variant === "none" ? "0px" : "4px",
     paddingLeft:
-      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     ...($size === "large" && {
       paddingTop: "12px",
       paddingRight: "16px",

package/src/components/InputField.tsx

@@ -543,6 +543,8 @@ interface InputFieldRootProps {
   size?: InputFieldSize;
   renderPopoverContent?: (options: { width: number }) => ReactNode;
   onFocusChange?: (isFocused: boolean) => void;
+  style?: React.CSSProperties;
+  className?: string;
 }
 
 function InputFieldRoot({
@@ -555,6 +557,8 @@ function InputFieldRoot({
   size = "medium",
   renderPopoverContent,
   onFocusChange,
+  style,
+  className,
 }: InputFieldRootProps) {
   const childrenArray = Children.toArray(children);
 
@@ -617,7 +621,13 @@ function InputFieldRoot({
   );
 
   const rootElement = (
-    <RootContainer id={id} $width={width} $flex={flex}>
+    <RootContainer
+      id={id}
+      $width={width}
+      $flex={flex}
+      style={style}
+      className={className}
+    >
       {children}
     </RootContainer>
   );

package/src/components/ListView.tsx

@@ -333,6 +333,13 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   onMenuOpenChange?: (isOpen: boolean) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   style?: CSSProperties;
+  dragIndicatorStyle?:
+    | CSSProperties
+    | ((props: {
+        depth: number;
+        indentation: number;
+        position: RelativeDropPosition;
+      }) => CSSProperties);
 }
 
 const ListViewRow = forwardRef(function ListViewRow<
@@ -359,6 +366,7 @@ const ListViewRow = forwardRef(function ListViewRow<
     onMenuOpenChange,
     onKeyDown,
     style,
+    dragIndicatorStyle,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -461,7 +469,16 @@ const ListViewRow = forwardRef(function ListViewRow<
             $colorScheme={colorScheme}
             $relativeDropPosition={relativeDropPosition}
             $offsetLeft={33 + depth * indentation}
-            $gap={listGap}
+            $gap={listGap + (divider ? 1 : 0)}
+            style={
+              typeof dragIndicatorStyle === "function"
+                ? dragIndicatorStyle({
+                    depth,
+                    indentation,
+                    position: relativeDropPosition,
+                  })
+                : dragIndicatorStyle
+            }
           />
         )}
         {depth > 0 && <Spacer.Horizontal size={depth * indentation} />}

package/src/components/Select.tsx

@@ -77,7 +77,7 @@ const SelectElement = styled.select<{ $flex: CSSProperties["flex"] }>(
     borderRadius: "4px",
     paddingTop: "4px",
     paddingBottom: "4px",
-    paddingLeft: "8px",
+    paddingLeft: "6px",
     paddingRight: "23px",
     background: [
       `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(