@hilum/ui 2.0.1 → 2.0.2

package/dist/index.d.ts

@@ -789,14 +789,16 @@ declare const ProgressRoot: React.ForwardRefExoticComponent<Omit<Progress.Progre
 interface PropertyRowProps extends React.ComponentProps<"div"> {
     /** Optional label rendered on the left. Pass a string or any React node (icon + label, etc.). */
     label?: React.ReactNode;
-    /** Width of the label column. Default: 96px. */
+    /** Label layout. Default: "stacked". */
+    layout?: "stacked" | "inline";
+    /** Width of the label column when layout="inline". Default: 96px. */
     labelWidth?: number | string;
-    /** Aligns label vertically with controls. Default: "center". */
+    /** Aligns label vertically with controls when layout="inline". Default: "center". */
     labelAlign?: "start" | "center";
 }
 /**
- * Horizontal property row used inside designer inspector panels:
- * left-aligned label, right-aligned controls, single visual row.
+ * Property row used inside designer inspector panels:
+ * label above controls by default, with an inline option for dense rows.
  * Different from <Field>, which is a vertical form field with hint/error.
  *
  * <PropertyRow label="Opacity">
@@ -804,7 +806,7 @@ interface PropertyRowProps extends React.ComponentProps<"div"> {
  *   <InputNumber />
  * </PropertyRow>
  */
-declare function PropertyRow({ label, labelWidth, labelAlign, className, children, ...rest }: PropertyRowProps): react_jsx_runtime.JSX.Element;
+declare function PropertyRow({ label, layout, labelWidth, labelAlign, className, children, ...rest }: PropertyRowProps): react_jsx_runtime.JSX.Element;
 declare namespace PropertyRow {
     var displayName: string;
 }

package/dist/index.js

@@ -3174,18 +3174,20 @@ var ProgressRoot = React15.forwardRef(({ className, value, ...props }, ref) => /
 ProgressRoot.displayName = "Progress";
 function PropertyRow({
   label,
+  layout = "stacked",
   labelWidth = 96,
   labelAlign = "center",
   className,
   children,
   ...rest
 }) {
+  const inline = layout === "inline";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex w-full gap-3 py-1",
-        labelAlign === "center" ? "items-center" : "items-start",
+        "flex w-full min-w-0 py-1",
+        inline ? cn("gap-3", labelAlign === "center" ? "items-center" : "items-start") : "flex-col items-stretch gap-1.5",
         className
       ),
       ...rest,
@@ -3193,12 +3195,15 @@ function PropertyRow({
         label !== void 0 && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "caption text-muted-foreground shrink-0 select-none",
-            style: { width: typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth },
+            className: cn(
+              "caption select-none text-muted-foreground",
+              inline ? "shrink-0" : "w-full"
+            ),
+            style: inline ? { width: typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth } : void 0,
             children: label
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-2 min-w-0", children })
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children })
       ]
     }
   );