@lglab/compose-ui 0.25.0 → 0.27.0
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/autocomplete.d.ts +96 -0
- package/dist/autocomplete.js +117 -0
- package/dist/combobox.d.ts +182 -0
- package/dist/combobox.js +252 -0
- package/dist/dialog.js +22 -22
- package/dist/field.js +7 -7
- package/dist/fieldset.js +1 -1
- package/dist/{form-variants-D4ge0qav.js → form-variants-LJ8gIbk0.js} +2 -2
- package/dist/index.d.ts +467 -0
- package/dist/index.js +305 -233
- package/dist/input.js +1 -1
- package/dist/number-field.d.ts +54 -0
- package/dist/number-field.js +70 -0
- package/dist/radio-group.d.ts +12 -0
- package/dist/radio-group.js +15 -0
- package/dist/radio.d.ts +19 -0
- package/dist/radio.js +35 -0
- package/dist/select.d.ts +133 -0
- package/dist/select.js +169 -0
- package/dist/textarea.js +1 -1
- package/dist/toolbar.d.ts +56 -0
- package/dist/toolbar.js +69 -0
- package/package.json +34 -6
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { NumberField as o } from "@base-ui/react/number-field";
|
|
4
|
+
import { a as s } from "./form-variants-LJ8gIbk0.js";
|
|
5
|
+
import { c as n } from "./utils-B6yFEsav.js";
|
|
6
|
+
const u = ({ className: e, ...r }) => /* @__PURE__ */ t(o.Root, { className: n(s, e), ...r });
|
|
7
|
+
u.displayName = "NumberFieldRoot";
|
|
8
|
+
const m = ({ className: e, ...r }) => /* @__PURE__ */ t(
|
|
9
|
+
o.ScrubArea,
|
|
10
|
+
{
|
|
11
|
+
className: n("cursor-ew-resize select-none", e),
|
|
12
|
+
...r
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
m.displayName = "NumberFieldScrubArea";
|
|
16
|
+
const a = ({
|
|
17
|
+
className: e,
|
|
18
|
+
...r
|
|
19
|
+
}) => /* @__PURE__ */ t(
|
|
20
|
+
o.ScrubAreaCursor,
|
|
21
|
+
{
|
|
22
|
+
className: n("drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)] filter", e),
|
|
23
|
+
...r
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
a.displayName = "NumberFieldScrubAreaCursor";
|
|
27
|
+
const d = ({ className: e, ...r }) => /* @__PURE__ */ t(o.Group, { className: n("flex", e), ...r });
|
|
28
|
+
d.displayName = "NumberFieldGroup";
|
|
29
|
+
const b = ({ className: e, ...r }) => /* @__PURE__ */ t(
|
|
30
|
+
o.Input,
|
|
31
|
+
{
|
|
32
|
+
className: n(
|
|
33
|
+
"h-9 w-24 border-t border-b border-border bg-transparent text-center text-base text-foreground tabular-nums outline-none",
|
|
34
|
+
e
|
|
35
|
+
),
|
|
36
|
+
...r
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
b.displayName = "NumberFieldInput";
|
|
40
|
+
const c = ({ className: e, ...r }) => /* @__PURE__ */ t(
|
|
41
|
+
o.Decrement,
|
|
42
|
+
{
|
|
43
|
+
className: n(
|
|
44
|
+
"flex size-9 items-center justify-center rounded-l-md border border-border bg-background text-foreground select-none transition-colors hover:bg-muted active:bg-muted",
|
|
45
|
+
e
|
|
46
|
+
),
|
|
47
|
+
...r
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
c.displayName = "NumberFieldDecrement";
|
|
51
|
+
const l = ({ className: e, ...r }) => /* @__PURE__ */ t(
|
|
52
|
+
o.Increment,
|
|
53
|
+
{
|
|
54
|
+
className: n(
|
|
55
|
+
"flex size-9 items-center justify-center rounded-r-md border border-border bg-background text-foreground select-none transition-colors hover:bg-muted active:bg-muted",
|
|
56
|
+
e
|
|
57
|
+
),
|
|
58
|
+
...r
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
l.displayName = "NumberFieldIncrement";
|
|
62
|
+
export {
|
|
63
|
+
c as NumberFieldDecrement,
|
|
64
|
+
d as NumberFieldGroup,
|
|
65
|
+
l as NumberFieldIncrement,
|
|
66
|
+
b as NumberFieldInput,
|
|
67
|
+
u as NumberFieldRoot,
|
|
68
|
+
m as NumberFieldScrubArea,
|
|
69
|
+
a as NumberFieldScrubAreaCursor
|
|
70
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { JSX } from 'react/jsx-runtime';
|
|
2
|
+
import { RadioGroup } from '@base-ui/react/radio-group';
|
|
3
|
+
import * as React_2 from 'react';
|
|
4
|
+
|
|
5
|
+
export declare const RadioGroupRoot: {
|
|
6
|
+
({ className, ...props }: RadioGroupRootProps): JSX.Element;
|
|
7
|
+
displayName: string;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export declare type RadioGroupRootProps = React_2.ComponentProps<typeof RadioGroup>;
|
|
11
|
+
|
|
12
|
+
export { }
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { RadioGroup as a } from "@base-ui/react/radio-group";
|
|
4
|
+
import { c as e } from "./utils-B6yFEsav.js";
|
|
5
|
+
const i = ({ className: o, ...r }) => /* @__PURE__ */ t(
|
|
6
|
+
a,
|
|
7
|
+
{
|
|
8
|
+
className: e("flex flex-col items-start gap-2", o),
|
|
9
|
+
...r
|
|
10
|
+
}
|
|
11
|
+
);
|
|
12
|
+
i.displayName = "RadioGroupRoot";
|
|
13
|
+
export {
|
|
14
|
+
i as RadioGroupRoot
|
|
15
|
+
};
|
package/dist/radio.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { JSX } from 'react/jsx-runtime';
|
|
2
|
+
import { Radio } from '@base-ui/react/radio';
|
|
3
|
+
import * as React_2 from 'react';
|
|
4
|
+
|
|
5
|
+
export declare const RadioIndicator: {
|
|
6
|
+
({ className, ...props }: RadioIndicatorProps): JSX.Element;
|
|
7
|
+
displayName: string;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export declare type RadioIndicatorProps = React_2.ComponentProps<typeof Radio.Indicator>;
|
|
11
|
+
|
|
12
|
+
export declare const RadioRoot: {
|
|
13
|
+
({ className, ...props }: RadioRootProps): JSX.Element;
|
|
14
|
+
displayName: string;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export declare type RadioRootProps = React_2.ComponentProps<typeof Radio.Root>;
|
|
18
|
+
|
|
19
|
+
export { }
|
package/dist/radio.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
3
|
+
import { Radio as i } from "@base-ui/react/radio";
|
|
4
|
+
import { c as a } from "./utils-B6yFEsav.js";
|
|
5
|
+
const t = ({ className: o, ...e }) => /* @__PURE__ */ r(
|
|
6
|
+
i.Root,
|
|
7
|
+
{
|
|
8
|
+
className: a(
|
|
9
|
+
"flex size-5 items-center justify-center rounded-full border border-input bg-transparent",
|
|
10
|
+
"transition-colors duration-150",
|
|
11
|
+
"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
|
|
12
|
+
"data-checked:border-primary data-checked:bg-primary",
|
|
13
|
+
"data-disabled:cursor-not-allowed data-disabled:opacity-50",
|
|
14
|
+
o
|
|
15
|
+
),
|
|
16
|
+
...e
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
t.displayName = "RadioRoot";
|
|
20
|
+
const d = ({ className: o, ...e }) => /* @__PURE__ */ r(
|
|
21
|
+
i.Indicator,
|
|
22
|
+
{
|
|
23
|
+
className: a(
|
|
24
|
+
"size-2 rounded-full bg-primary-foreground",
|
|
25
|
+
"data-unchecked:hidden",
|
|
26
|
+
o
|
|
27
|
+
),
|
|
28
|
+
...e
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
d.displayName = "RadioIndicator";
|
|
32
|
+
export {
|
|
33
|
+
d as RadioIndicator,
|
|
34
|
+
t as RadioRoot
|
|
35
|
+
};
|
package/dist/select.d.ts
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { JSX } from 'react/jsx-runtime';
|
|
2
|
+
import * as React_2 from 'react';
|
|
3
|
+
import { Select } from '@base-ui/react/select';
|
|
4
|
+
import { SelectRootProps as SelectRootProps_2 } from '@base-ui/react/select';
|
|
5
|
+
|
|
6
|
+
export declare const SelectArrow: {
|
|
7
|
+
({ className, ...props }: SelectArrowProps): JSX.Element;
|
|
8
|
+
displayName: string;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export declare type SelectArrowProps = React_2.ComponentProps<typeof Select.Arrow>;
|
|
12
|
+
|
|
13
|
+
export declare const SelectBackdrop: {
|
|
14
|
+
({ className, ...props }: SelectBackdropProps): JSX.Element;
|
|
15
|
+
displayName: string;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export declare type SelectBackdropProps = React_2.ComponentProps<typeof Select.Backdrop>;
|
|
19
|
+
|
|
20
|
+
export declare const SelectGroup: {
|
|
21
|
+
({ className, ...props }: SelectGroupProps): JSX.Element;
|
|
22
|
+
displayName: string;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export declare const SelectGroupLabel: {
|
|
26
|
+
({ className, ...props }: SelectGroupLabelProps): JSX.Element;
|
|
27
|
+
displayName: string;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export declare type SelectGroupLabelProps = React_2.ComponentProps<typeof Select.GroupLabel>;
|
|
31
|
+
|
|
32
|
+
export declare type SelectGroupProps = React_2.ComponentProps<typeof Select.Group>;
|
|
33
|
+
|
|
34
|
+
export declare const SelectIcon: {
|
|
35
|
+
({ className, ...props }: SelectIconProps): JSX.Element;
|
|
36
|
+
displayName: string;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export declare type SelectIconProps = React_2.ComponentProps<typeof Select.Icon>;
|
|
40
|
+
|
|
41
|
+
export declare const SelectItem: {
|
|
42
|
+
({ className, ...props }: SelectItemProps): JSX.Element;
|
|
43
|
+
displayName: string;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export declare const SelectItemIndicator: {
|
|
47
|
+
({ className, ...props }: SelectItemIndicatorProps): JSX.Element;
|
|
48
|
+
displayName: string;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export declare type SelectItemIndicatorProps = React_2.ComponentProps<typeof Select.ItemIndicator>;
|
|
52
|
+
|
|
53
|
+
export declare type SelectItemProps = React_2.ComponentProps<typeof Select.Item>;
|
|
54
|
+
|
|
55
|
+
export declare const SelectItemText: {
|
|
56
|
+
({ className, ...props }: SelectItemTextProps): JSX.Element;
|
|
57
|
+
displayName: string;
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export declare type SelectItemTextProps = React_2.ComponentProps<typeof Select.ItemText>;
|
|
61
|
+
|
|
62
|
+
export declare const SelectList: {
|
|
63
|
+
({ className, ...props }: SelectListProps): JSX.Element;
|
|
64
|
+
displayName: string;
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
export declare type SelectListProps = React_2.ComponentProps<typeof Select.List>;
|
|
68
|
+
|
|
69
|
+
export declare const SelectPopup: {
|
|
70
|
+
({ className, ...props }: SelectPopupProps): JSX.Element;
|
|
71
|
+
displayName: string;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export declare type SelectPopupProps = React_2.ComponentProps<typeof Select.Popup>;
|
|
75
|
+
|
|
76
|
+
export declare const SelectPortal: {
|
|
77
|
+
(props: SelectPortalProps): JSX.Element;
|
|
78
|
+
displayName: string;
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
export declare type SelectPortalProps = React_2.ComponentProps<typeof Select.Portal>;
|
|
82
|
+
|
|
83
|
+
export declare const SelectPositioner: {
|
|
84
|
+
({ className, ...props }: SelectPositionerProps): JSX.Element;
|
|
85
|
+
displayName: string;
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
export declare type SelectPositionerProps = React_2.ComponentProps<typeof Select.Positioner>;
|
|
89
|
+
|
|
90
|
+
export declare function SelectRoot<Value, Multiple extends boolean | undefined = false>(props: SelectRootProps_2<Value, Multiple>): JSX.Element;
|
|
91
|
+
|
|
92
|
+
export declare namespace SelectRoot {
|
|
93
|
+
var displayName: string;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export declare type SelectRootProps<Value, Multiple extends boolean | undefined = false> = SelectRootProps_2<Value, Multiple>;
|
|
97
|
+
|
|
98
|
+
export declare const SelectScrollDownArrow: {
|
|
99
|
+
({ className, ...props }: SelectScrollDownArrowProps): JSX.Element;
|
|
100
|
+
displayName: string;
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export declare type SelectScrollDownArrowProps = React_2.ComponentProps<typeof Select.ScrollDownArrow>;
|
|
104
|
+
|
|
105
|
+
export declare const SelectScrollUpArrow: {
|
|
106
|
+
({ className, ...props }: SelectScrollUpArrowProps): JSX.Element;
|
|
107
|
+
displayName: string;
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
export declare type SelectScrollUpArrowProps = React_2.ComponentProps<typeof Select.ScrollUpArrow>;
|
|
111
|
+
|
|
112
|
+
export declare const SelectSeparator: {
|
|
113
|
+
({ className, ...props }: SelectSeparatorProps): JSX.Element;
|
|
114
|
+
displayName: string;
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
export declare type SelectSeparatorProps = React_2.ComponentProps<typeof Select.Separator>;
|
|
118
|
+
|
|
119
|
+
export declare const SelectTrigger: {
|
|
120
|
+
({ className, ...props }: SelectTriggerProps): JSX.Element;
|
|
121
|
+
displayName: string;
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
export declare type SelectTriggerProps = React_2.ComponentProps<typeof Select.Trigger>;
|
|
125
|
+
|
|
126
|
+
export declare const SelectValue: {
|
|
127
|
+
({ className, ...props }: SelectValueProps): JSX.Element;
|
|
128
|
+
displayName: string;
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
export declare type SelectValueProps = React_2.ComponentProps<typeof Select.Value>;
|
|
132
|
+
|
|
133
|
+
export { }
|
package/dist/select.js
ADDED
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
3
|
+
import { Select as r } from "@base-ui/react/select";
|
|
4
|
+
import { A as l } from "./arrow-svg-C6zQTvgS.js";
|
|
5
|
+
import { c as o } from "./utils-B6yFEsav.js";
|
|
6
|
+
function s(e) {
|
|
7
|
+
return /* @__PURE__ */ a(r.Root, { ...e });
|
|
8
|
+
}
|
|
9
|
+
s.displayName = "SelectRoot";
|
|
10
|
+
const n = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
11
|
+
r.Trigger,
|
|
12
|
+
{
|
|
13
|
+
className: o(
|
|
14
|
+
"flex min-h-9 min-w-40 items-center justify-between gap-3 rounded-md border border-border bg-background px-3.5 pr-3 text-base text-foreground select-none hover:bg-muted data-popup-open:bg-muted",
|
|
15
|
+
e
|
|
16
|
+
),
|
|
17
|
+
...t
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
n.displayName = "SelectTrigger";
|
|
21
|
+
const c = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
22
|
+
r.Value,
|
|
23
|
+
{
|
|
24
|
+
className: o("data-placeholder:text-muted-foreground text-sm", e),
|
|
25
|
+
...t
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
c.displayName = "SelectValue";
|
|
29
|
+
const d = ({ className: e, ...t }) => /* @__PURE__ */ a(r.Icon, { className: o("flex", e), ...t });
|
|
30
|
+
d.displayName = "SelectIcon";
|
|
31
|
+
const i = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
32
|
+
r.Backdrop,
|
|
33
|
+
{
|
|
34
|
+
className: o(
|
|
35
|
+
"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
|
|
36
|
+
"transition-opacity duration-200",
|
|
37
|
+
"data-starting-style:opacity-0 data-ending-style:opacity-0",
|
|
38
|
+
e
|
|
39
|
+
),
|
|
40
|
+
...t
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
i.displayName = "SelectBackdrop";
|
|
44
|
+
const m = (e) => /* @__PURE__ */ a(r.Portal, { ...e });
|
|
45
|
+
m.displayName = "SelectPortal";
|
|
46
|
+
const p = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
47
|
+
r.Positioner,
|
|
48
|
+
{
|
|
49
|
+
className: o("outline-none select-none z-50", e),
|
|
50
|
+
sideOffset: 8,
|
|
51
|
+
...t
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
p.displayName = "SelectPositioner";
|
|
55
|
+
const u = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
56
|
+
r.Popup,
|
|
57
|
+
{
|
|
58
|
+
className: o(
|
|
59
|
+
"group min-w-(--anchor-width) origin-(--transform-origin) bg-clip-padding rounded-md bg-background text-foreground shadow-lg shadow-gray-200 border border-border transition-[transform,scale,opacity]",
|
|
60
|
+
"data-ending-style:scale-90 data-ending-style:opacity-0",
|
|
61
|
+
"data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-ending-style:transition-none",
|
|
62
|
+
"data-starting-style:scale-90 data-starting-style:opacity-0",
|
|
63
|
+
"data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none",
|
|
64
|
+
"dark:shadow-none",
|
|
65
|
+
e
|
|
66
|
+
),
|
|
67
|
+
...t
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
u.displayName = "SelectPopup";
|
|
71
|
+
const f = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
72
|
+
r.List,
|
|
73
|
+
{
|
|
74
|
+
className: o(
|
|
75
|
+
"relative py-1 scroll-py-6 overflow-y-auto max-h-(--available-height)",
|
|
76
|
+
e
|
|
77
|
+
),
|
|
78
|
+
...t
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
f.displayName = "SelectList";
|
|
82
|
+
const b = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
83
|
+
r.Arrow,
|
|
84
|
+
{
|
|
85
|
+
className: o(
|
|
86
|
+
"flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
|
|
87
|
+
e
|
|
88
|
+
),
|
|
89
|
+
...t,
|
|
90
|
+
children: /* @__PURE__ */ a(l, {})
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
b.displayName = "SelectArrow";
|
|
94
|
+
const g = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
95
|
+
r.Item,
|
|
96
|
+
{
|
|
97
|
+
className: o(
|
|
98
|
+
"flex items-center justify-between gap-2 py-1.5 px-4 text-sm outline-none select-none",
|
|
99
|
+
"data-selected:bg-accent data-selected:text-accent-foreground",
|
|
100
|
+
e
|
|
101
|
+
),
|
|
102
|
+
...t
|
|
103
|
+
}
|
|
104
|
+
);
|
|
105
|
+
g.displayName = "SelectItem";
|
|
106
|
+
const S = ({ className: e, ...t }) => /* @__PURE__ */ a(r.ItemText, { className: o("col-start-2 text-sm", e), ...t });
|
|
107
|
+
S.displayName = "SelectItemText";
|
|
108
|
+
const y = ({ className: e, ...t }) => /* @__PURE__ */ a(r.ItemIndicator, { className: o("col-start-1", e), ...t });
|
|
109
|
+
y.displayName = "SelectItemIndicator";
|
|
110
|
+
const x = ({ className: e, ...t }) => /* @__PURE__ */ a(r.Group, { className: o(e), ...t });
|
|
111
|
+
x.displayName = "SelectGroup";
|
|
112
|
+
const N = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
113
|
+
r.GroupLabel,
|
|
114
|
+
{
|
|
115
|
+
className: o("px-3 py-1.5 text-sm font-semibold", e),
|
|
116
|
+
...t
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
N.displayName = "SelectGroupLabel";
|
|
120
|
+
const w = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
121
|
+
r.ScrollUpArrow,
|
|
122
|
+
{
|
|
123
|
+
className: o(
|
|
124
|
+
'top-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-md bg-background text-center text-xs before:absolute data-[side=none]:before:-top-full before:left-0 before:h-full before:w-full before:content-[""]',
|
|
125
|
+
e
|
|
126
|
+
),
|
|
127
|
+
...t
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
w.displayName = "SelectScrollUpArrow";
|
|
131
|
+
const h = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
132
|
+
r.ScrollDownArrow,
|
|
133
|
+
{
|
|
134
|
+
className: o(
|
|
135
|
+
'bottom-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-md bg-background text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[""] bottom-0 data-[side=none]:before:-bottom-full',
|
|
136
|
+
e
|
|
137
|
+
),
|
|
138
|
+
...t
|
|
139
|
+
}
|
|
140
|
+
);
|
|
141
|
+
h.displayName = "SelectScrollDownArrow";
|
|
142
|
+
const I = ({ className: e, ...t }) => /* @__PURE__ */ a(
|
|
143
|
+
r.Separator,
|
|
144
|
+
{
|
|
145
|
+
className: o("-mx-1 my-1 h-px bg-border", e),
|
|
146
|
+
...t
|
|
147
|
+
}
|
|
148
|
+
);
|
|
149
|
+
I.displayName = "SelectSeparator";
|
|
150
|
+
export {
|
|
151
|
+
b as SelectArrow,
|
|
152
|
+
i as SelectBackdrop,
|
|
153
|
+
x as SelectGroup,
|
|
154
|
+
N as SelectGroupLabel,
|
|
155
|
+
d as SelectIcon,
|
|
156
|
+
g as SelectItem,
|
|
157
|
+
y as SelectItemIndicator,
|
|
158
|
+
S as SelectItemText,
|
|
159
|
+
f as SelectList,
|
|
160
|
+
u as SelectPopup,
|
|
161
|
+
m as SelectPortal,
|
|
162
|
+
p as SelectPositioner,
|
|
163
|
+
s as SelectRoot,
|
|
164
|
+
h as SelectScrollDownArrow,
|
|
165
|
+
w as SelectScrollUpArrow,
|
|
166
|
+
I as SelectSeparator,
|
|
167
|
+
n as SelectTrigger,
|
|
168
|
+
c as SelectValue
|
|
169
|
+
};
|
package/dist/textarea.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
-
import { i as r } from "./form-variants-
|
|
3
|
+
import { i as r } from "./form-variants-LJ8gIbk0.js";
|
|
4
4
|
import { c as s } from "./utils-B6yFEsav.js";
|
|
5
5
|
const m = ({ className: a, ...e }) => /* @__PURE__ */ t(
|
|
6
6
|
"textarea",
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { JSX } from 'react/jsx-runtime';
|
|
2
|
+
import * as React_2 from 'react';
|
|
3
|
+
import { Toolbar } from '@base-ui/react/toolbar';
|
|
4
|
+
|
|
5
|
+
declare type ControlSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
|
|
6
|
+
|
|
7
|
+
declare type ControlVariant = 'default' | 'ghost';
|
|
8
|
+
|
|
9
|
+
export declare const ToolbarButton: {
|
|
10
|
+
({ className, variant, size, ...props }: ToolbarButtonProps): JSX.Element;
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export declare type ToolbarButtonProps = React_2.ComponentProps<typeof Toolbar.Button> & {
|
|
15
|
+
/** Visual style of the toolbar button */
|
|
16
|
+
variant?: ControlVariant;
|
|
17
|
+
/** Size of the toolbar button */
|
|
18
|
+
size?: ControlSize;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export declare const ToolbarGroup: {
|
|
22
|
+
({ className, ...props }: ToolbarGroupProps): JSX.Element;
|
|
23
|
+
displayName: string;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export declare type ToolbarGroupProps = React_2.ComponentProps<typeof Toolbar.Group>;
|
|
27
|
+
|
|
28
|
+
export declare const ToolbarInput: {
|
|
29
|
+
({ className, ...props }: ToolbarInputProps): JSX.Element;
|
|
30
|
+
displayName: string;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export declare type ToolbarInputProps = React_2.ComponentProps<typeof Toolbar.Input>;
|
|
34
|
+
|
|
35
|
+
export declare const ToolbarLink: {
|
|
36
|
+
({ className, ...props }: ToolbarLinkProps): JSX.Element;
|
|
37
|
+
displayName: string;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export declare type ToolbarLinkProps = React_2.ComponentProps<typeof Toolbar.Link>;
|
|
41
|
+
|
|
42
|
+
export declare const ToolbarRoot: {
|
|
43
|
+
({ className, ...props }: ToolbarRootProps): JSX.Element;
|
|
44
|
+
displayName: string;
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export declare type ToolbarRootProps = React_2.ComponentProps<typeof Toolbar.Root>;
|
|
48
|
+
|
|
49
|
+
export declare const ToolbarSeparator: {
|
|
50
|
+
({ className, ...props }: ToolbarSeparatorProps): JSX.Element;
|
|
51
|
+
displayName: string;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export declare type ToolbarSeparatorProps = React_2.ComponentProps<typeof Toolbar.Separator>;
|
|
55
|
+
|
|
56
|
+
export { }
|
package/dist/toolbar.js
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { Toolbar as a } from "@base-ui/react/toolbar";
|
|
4
|
+
import { c as l } from "./control-variants-Bwep4n0y.js";
|
|
5
|
+
import { c as t } from "./utils-B6yFEsav.js";
|
|
6
|
+
const m = ({ className: o, ...r }) => /* @__PURE__ */ e(
|
|
7
|
+
a.Root,
|
|
8
|
+
{
|
|
9
|
+
className: t(
|
|
10
|
+
"flex items-center gap-1 flex-wrap rounded-md border border-border bg-muted p-1",
|
|
11
|
+
o
|
|
12
|
+
),
|
|
13
|
+
...r
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
m.displayName = "ToolbarRoot";
|
|
17
|
+
const p = ({
|
|
18
|
+
className: o,
|
|
19
|
+
variant: r = "ghost",
|
|
20
|
+
size: n,
|
|
21
|
+
...s
|
|
22
|
+
}) => /* @__PURE__ */ e(
|
|
23
|
+
a.Button,
|
|
24
|
+
{
|
|
25
|
+
className: t(l({ variant: r, size: n }), o),
|
|
26
|
+
...s
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
p.displayName = "ToolbarButton";
|
|
30
|
+
const d = ({ className: o, ...r }) => /* @__PURE__ */ e(
|
|
31
|
+
a.Link,
|
|
32
|
+
{
|
|
33
|
+
className: t(
|
|
34
|
+
"text-sm text-muted-foreground no-underline hover:text-foreground",
|
|
35
|
+
o
|
|
36
|
+
),
|
|
37
|
+
...r
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
d.displayName = "ToolbarLink";
|
|
41
|
+
const u = ({ className: o, ...r }) => /* @__PURE__ */ e(
|
|
42
|
+
a.Input,
|
|
43
|
+
{
|
|
44
|
+
className: t(
|
|
45
|
+
"h-8 rounded-md border border-border bg-background px-2 text-sm outline-none",
|
|
46
|
+
o
|
|
47
|
+
),
|
|
48
|
+
...r
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
u.displayName = "ToolbarInput";
|
|
52
|
+
const b = ({ className: o, ...r }) => /* @__PURE__ */ e(a.Group, { className: t("flex items-center gap-1", o), ...r });
|
|
53
|
+
b.displayName = "ToolbarGroup";
|
|
54
|
+
const c = ({ className: o, ...r }) => /* @__PURE__ */ e(
|
|
55
|
+
a.Separator,
|
|
56
|
+
{
|
|
57
|
+
className: t("mx-1 h-4 w-px shrink-0 bg-border", o),
|
|
58
|
+
...r
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
c.displayName = "ToolbarSeparator";
|
|
62
|
+
export {
|
|
63
|
+
p as ToolbarButton,
|
|
64
|
+
b as ToolbarGroup,
|
|
65
|
+
u as ToolbarInput,
|
|
66
|
+
d as ToolbarLink,
|
|
67
|
+
m as ToolbarRoot,
|
|
68
|
+
c as ToolbarSeparator
|
|
69
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lglab/compose-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.27.0",
|
|
4
4
|
"description": "A collection of components built with Base UI & Tailwind CSS",
|
|
5
5
|
"author": "LGLab",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,6 +30,10 @@
|
|
|
30
30
|
"import": "./dist/accordion.js",
|
|
31
31
|
"types": "./dist/accordion.d.ts"
|
|
32
32
|
},
|
|
33
|
+
"./autocomplete": {
|
|
34
|
+
"import": "./dist/autocomplete.js",
|
|
35
|
+
"types": "./dist/autocomplete.d.ts"
|
|
36
|
+
},
|
|
33
37
|
"./alert-dialog": {
|
|
34
38
|
"import": "./dist/alert-dialog.js",
|
|
35
39
|
"types": "./dist/alert-dialog.d.ts"
|
|
@@ -58,6 +62,10 @@
|
|
|
58
62
|
"import": "./dist/collapsible.js",
|
|
59
63
|
"types": "./dist/collapsible.d.ts"
|
|
60
64
|
},
|
|
65
|
+
"./combobox": {
|
|
66
|
+
"import": "./dist/combobox.js",
|
|
67
|
+
"types": "./dist/combobox.d.ts"
|
|
68
|
+
},
|
|
61
69
|
"./context-menu": {
|
|
62
70
|
"import": "./dist/context-menu.js",
|
|
63
71
|
"types": "./dist/context-menu.d.ts"
|
|
@@ -102,6 +110,10 @@
|
|
|
102
110
|
"import": "./dist/navigation-menu.js",
|
|
103
111
|
"types": "./dist/navigation-menu.d.ts"
|
|
104
112
|
},
|
|
113
|
+
"./number-field": {
|
|
114
|
+
"import": "./dist/number-field.js",
|
|
115
|
+
"types": "./dist/number-field.d.ts"
|
|
116
|
+
},
|
|
105
117
|
"./popover": {
|
|
106
118
|
"import": "./dist/popover.js",
|
|
107
119
|
"types": "./dist/popover.d.ts"
|
|
@@ -114,10 +126,22 @@
|
|
|
114
126
|
"import": "./dist/progress.js",
|
|
115
127
|
"types": "./dist/progress.d.ts"
|
|
116
128
|
},
|
|
129
|
+
"./radio": {
|
|
130
|
+
"import": "./dist/radio.js",
|
|
131
|
+
"types": "./dist/radio.d.ts"
|
|
132
|
+
},
|
|
133
|
+
"./radio-group": {
|
|
134
|
+
"import": "./dist/radio-group.js",
|
|
135
|
+
"types": "./dist/radio-group.d.ts"
|
|
136
|
+
},
|
|
117
137
|
"./scroll-area": {
|
|
118
138
|
"import": "./dist/scroll-area.js",
|
|
119
139
|
"types": "./dist/scroll-area.d.ts"
|
|
120
140
|
},
|
|
141
|
+
"./select": {
|
|
142
|
+
"import": "./dist/select.js",
|
|
143
|
+
"types": "./dist/select.d.ts"
|
|
144
|
+
},
|
|
121
145
|
"./separator": {
|
|
122
146
|
"import": "./dist/separator.js",
|
|
123
147
|
"types": "./dist/separator.d.ts"
|
|
@@ -150,6 +174,10 @@
|
|
|
150
174
|
"import": "./dist/toggle-group.js",
|
|
151
175
|
"types": "./dist/toggle-group.d.ts"
|
|
152
176
|
},
|
|
177
|
+
"./toolbar": {
|
|
178
|
+
"import": "./dist/toolbar.js",
|
|
179
|
+
"types": "./dist/toolbar.d.ts"
|
|
180
|
+
},
|
|
153
181
|
"./tooltip": {
|
|
154
182
|
"import": "./dist/tooltip.js",
|
|
155
183
|
"types": "./dist/tooltip.d.ts"
|
|
@@ -174,19 +202,19 @@
|
|
|
174
202
|
},
|
|
175
203
|
"devDependencies": {
|
|
176
204
|
"@base-ui/react": "^1.1.0",
|
|
177
|
-
"@types/node": "^25.0.
|
|
178
|
-
"@types/react": "^19.2.
|
|
205
|
+
"@types/node": "^25.0.10",
|
|
206
|
+
"@types/react": "^19.2.9",
|
|
179
207
|
"@types/react-dom": "^19.2.3",
|
|
180
208
|
"@vitejs/plugin-react": "^5.1.2",
|
|
181
|
-
"globals": "^17.
|
|
209
|
+
"globals": "^17.1.0",
|
|
182
210
|
"react": "^19.2.3",
|
|
183
211
|
"react-dom": "^19.2.3",
|
|
184
212
|
"rollup-preserve-directives": "^1.1.3",
|
|
185
213
|
"typescript": "~5.9.3",
|
|
186
|
-
"typescript-eslint": "^8.53.
|
|
214
|
+
"typescript-eslint": "^8.53.1",
|
|
187
215
|
"vite": "^7.3.1",
|
|
188
216
|
"vite-plugin-dts": "^4.5.4",
|
|
189
|
-
"vite-plugin-static-copy": "^3.1.
|
|
217
|
+
"vite-plugin-static-copy": "^3.1.6"
|
|
190
218
|
},
|
|
191
219
|
"scripts": {
|
|
192
220
|
"build": "tsc -b && vite build"
|