@hilum/ui 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +7 -5
- package/dist/index.js +10 -5
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/property-row.tsx +23 -9
package/package.json
CHANGED
|
@@ -6,15 +6,17 @@ import { cn } from "../lib/utils";
|
|
|
6
6
|
interface PropertyRowProps extends React.ComponentProps<"div"> {
|
|
7
7
|
/** Optional label rendered on the left. Pass a string or any React node (icon + label, etc.). */
|
|
8
8
|
label?: React.ReactNode;
|
|
9
|
-
/**
|
|
9
|
+
/** Label layout. Default: "stacked". */
|
|
10
|
+
layout?: "stacked" | "inline";
|
|
11
|
+
/** Width of the label column when layout="inline". Default: 96px. */
|
|
10
12
|
labelWidth?: number | string;
|
|
11
|
-
/** Aligns label vertically with controls. Default: "center". */
|
|
13
|
+
/** Aligns label vertically with controls when layout="inline". Default: "center". */
|
|
12
14
|
labelAlign?: "start" | "center";
|
|
13
15
|
}
|
|
14
16
|
|
|
15
17
|
/**
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
+
* Property row used inside designer inspector panels:
|
|
19
|
+
* label above controls by default, with an inline option for dense rows.
|
|
18
20
|
* Different from <Field>, which is a vertical form field with hint/error.
|
|
19
21
|
*
|
|
20
22
|
* <PropertyRow label="Opacity">
|
|
@@ -24,30 +26,42 @@ interface PropertyRowProps extends React.ComponentProps<"div"> {
|
|
|
24
26
|
*/
|
|
25
27
|
function PropertyRow({
|
|
26
28
|
label,
|
|
29
|
+
layout = "stacked",
|
|
27
30
|
labelWidth = 96,
|
|
28
31
|
labelAlign = "center",
|
|
29
32
|
className,
|
|
30
33
|
children,
|
|
31
34
|
...rest
|
|
32
35
|
}: PropertyRowProps) {
|
|
36
|
+
const inline = layout === "inline";
|
|
37
|
+
|
|
33
38
|
return (
|
|
34
39
|
<div
|
|
35
40
|
className={cn(
|
|
36
|
-
"flex w-full
|
|
37
|
-
|
|
41
|
+
"flex w-full min-w-0 py-1",
|
|
42
|
+
inline
|
|
43
|
+
? cn("gap-3", labelAlign === "center" ? "items-center" : "items-start")
|
|
44
|
+
: "flex-col items-stretch gap-1.5",
|
|
38
45
|
className,
|
|
39
46
|
)}
|
|
40
47
|
{...rest}
|
|
41
48
|
>
|
|
42
49
|
{label !== undefined && (
|
|
43
50
|
<div
|
|
44
|
-
className=
|
|
45
|
-
|
|
51
|
+
className={cn(
|
|
52
|
+
"caption select-none text-muted-foreground",
|
|
53
|
+
inline ? "shrink-0" : "w-full",
|
|
54
|
+
)}
|
|
55
|
+
style={
|
|
56
|
+
inline
|
|
57
|
+
? { width: typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth }
|
|
58
|
+
: undefined
|
|
59
|
+
}
|
|
46
60
|
>
|
|
47
61
|
{label}
|
|
48
62
|
</div>
|
|
49
63
|
)}
|
|
50
|
-
<div className="flex flex-1 items-center gap-2
|
|
64
|
+
<div className="flex min-w-0 flex-1 items-center gap-2">{children}</div>
|
|
51
65
|
</div>
|
|
52
66
|
);
|
|
53
67
|
}
|