@pibit.ai/cure-design-system 0.5.11 → 0.6.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/applications/date-picker/calendar-value.d.ts +4 -0
- package/dist/applications/date-picker/calendar-value.d.ts.map +1 -0
- package/dist/applications/date-picker/calendar-value.js +6 -0
- package/dist/applications/date-picker/calendar.d.ts.map +1 -1
- package/dist/applications/date-picker/calendar.js +130 -124
- package/dist/applications/date-picker/date-time-calendar.d.ts.map +1 -1
- package/dist/applications/date-picker/date-time-calendar.js +56 -55
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +161 -157
- package/dist/node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.js +6 -6
- package/dist/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.js +5 -5
- package/dist/node_modules/framer-motion/dist/es/utils/use-composed-ref.js +3 -3
- package/dist/node_modules/{@react-stately/data/dist → react-stately/dist/private/data}/useListData.js +61 -64
- package/dist/patterns/table/rowReorderDrag.js +4 -4
- package/dist/patterns/table/toolbar/ColumnHeaderMenu.d.ts.map +1 -1
- package/dist/patterns/table/toolbar/ColumnHeaderMenu.js +160 -139
- package/dist/patterns/table-component/TableComponent.d.ts +1 -1
- package/dist/patterns/table-component/TableComponent.d.ts.map +1 -1
- package/dist/patterns/table-component/TableComponent.js +996 -580
- package/dist/patterns/table-component/columnReorderDrag.d.ts +41 -0
- package/dist/patterns/table-component/columnReorderDrag.d.ts.map +1 -0
- package/dist/patterns/table-component/columnReorderDrag.js +55 -0
- package/dist/patterns/table-component/columnReorderDrag.test.d.ts +2 -0
- package/dist/patterns/table-component/columnReorderDrag.test.d.ts.map +1 -0
- package/dist/patterns/table-component/types.d.ts +8 -0
- package/dist/patterns/table-component/types.d.ts.map +1 -1
- package/dist/primitives/avatar/avatar.d.ts +46 -28
- package/dist/primitives/avatar/avatar.d.ts.map +1 -1
- package/dist/primitives/avatar/avatar.js +114 -39
- package/dist/primitives/avatar/base-components/avatar-online-indicator.d.ts +8 -0
- package/dist/primitives/avatar/base-components/avatar-online-indicator.d.ts.map +1 -0
- package/dist/primitives/avatar/base-components/avatar-online-indicator.js +29 -0
- package/dist/primitives/avatar/base-components/index.d.ts +3 -0
- package/dist/primitives/avatar/base-components/index.d.ts.map +1 -0
- package/dist/primitives/avatar/base-components/verified-tick.d.ts +7 -0
- package/dist/primitives/avatar/base-components/verified-tick.d.ts.map +1 -0
- package/dist/primitives/avatar/base-components/verified-tick.js +41 -0
- package/dist/primitives/dropdown/dropdown.d.ts +2 -2
- package/dist/primitives/input/input.d.ts.map +1 -1
- package/dist/primitives/input/input.js +9 -1
- package/dist/primitives/select/SearchInput.d.ts +7 -7
- package/dist/primitives/select/SearchInput.d.ts.map +1 -1
- package/dist/primitives/select/__tests__/multi-select-utils.test.d.ts +2 -0
- package/dist/primitives/select/__tests__/multi-select-utils.test.d.ts.map +1 -0
- package/dist/primitives/select/combobox.d.ts +1 -2
- package/dist/primitives/select/combobox.d.ts.map +1 -1
- package/dist/primitives/select/index.d.ts +3 -1
- package/dist/primitives/select/index.d.ts.map +1 -1
- package/dist/primitives/select/multi-select-utils.d.ts +7 -0
- package/dist/primitives/select/multi-select-utils.d.ts.map +1 -0
- package/dist/primitives/select/multi-select-utils.js +17 -0
- package/dist/primitives/select/multi-select.d.ts +17 -4
- package/dist/primitives/select/multi-select.d.ts.map +1 -1
- package/dist/primitives/select/multi-select.js +631 -237
- package/dist/primitives/select/searchable-select.d.ts +26 -4
- package/dist/primitives/select/searchable-select.d.ts.map +1 -1
- package/dist/primitives/select/searchable-select.js +292 -189
- package/dist/primitives/select/select-checkbox.d.ts +6 -0
- package/dist/primitives/select/select-checkbox.d.ts.map +1 -0
- package/dist/primitives/select/select-checkbox.js +62 -0
- package/dist/primitives/select/select-item.d.ts +3 -1
- package/dist/primitives/select/select-item.d.ts.map +1 -1
- package/dist/primitives/select/select-item.js +95 -77
- package/dist/primitives/select/select-native.d.ts +21 -2
- package/dist/primitives/select/select-native.d.ts.map +1 -1
- package/dist/primitives/select/select-native.js +88 -0
- package/dist/primitives/select/select-shared.d.ts +1 -0
- package/dist/primitives/select/select-shared.d.ts.map +1 -1
- package/dist/primitives/select/select.d.ts +12 -2
- package/dist/primitives/select/select.d.ts.map +1 -1
- package/dist/primitives/select/select.js +207 -152
- package/dist/styles/components.css +1 -1
- package/dist/styles/theme.css +1 -1
- package/package.json +4 -4
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsx as e, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import * as s from "@radix-ui/react-checkbox";
|
|
3
|
+
import { Check as o, Minus as c } from "@untitledui/icons";
|
|
4
|
+
import { cx as t } from "../../utils/cn.js";
|
|
5
|
+
function g({
|
|
6
|
+
size: i = "md",
|
|
7
|
+
className: r,
|
|
8
|
+
...n
|
|
9
|
+
}) {
|
|
10
|
+
const a = {
|
|
11
|
+
xs: "size-3",
|
|
12
|
+
sm: "size-3.5",
|
|
13
|
+
md: "size-4",
|
|
14
|
+
lg: "size-4.5"
|
|
15
|
+
};
|
|
16
|
+
return /* @__PURE__ */ e(
|
|
17
|
+
s.Root,
|
|
18
|
+
{
|
|
19
|
+
"data-slot": "checkbox",
|
|
20
|
+
className: t(
|
|
21
|
+
"group peer cursor-pointer size-4 shrink-0 rounded ring-1 ring-primary ring-inset bg-primary shadow-xs transition-shadow outline-none",
|
|
22
|
+
"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
|
|
23
|
+
"data-[state=checked]:bg-brand-solid data-[state=checked]:ring-bg-brand-solid data-[state=checked]:text-fg-white",
|
|
24
|
+
"data-[state=indeterminate]:bg-brand-solid data-[state=indeterminate]:ring-bg-brand-solid data-[state=indeterminate]:text-fg-white",
|
|
25
|
+
"disabled:cursor-not-allowed disabled:bg-disabled_subtle disabled:ring-disabled",
|
|
26
|
+
"aria-invalid:ring-error_subtle",
|
|
27
|
+
r
|
|
28
|
+
),
|
|
29
|
+
...n,
|
|
30
|
+
children: /* @__PURE__ */ d(
|
|
31
|
+
s.Indicator,
|
|
32
|
+
{
|
|
33
|
+
"data-slot": "checkbox-indicator",
|
|
34
|
+
className: "grid place-content-center text-current transition-none",
|
|
35
|
+
children: [
|
|
36
|
+
/* @__PURE__ */ e(
|
|
37
|
+
o,
|
|
38
|
+
{
|
|
39
|
+
className: t(
|
|
40
|
+
"size-3.5 group-data-[state=indeterminate]:hidden",
|
|
41
|
+
a[i]
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
),
|
|
45
|
+
/* @__PURE__ */ e(
|
|
46
|
+
c,
|
|
47
|
+
{
|
|
48
|
+
className: t(
|
|
49
|
+
"hidden size-3.5 group-data-[state=indeterminate]:block",
|
|
50
|
+
a[i]
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
)
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
export {
|
|
61
|
+
g as SelectCheckbox
|
|
62
|
+
};
|
|
@@ -2,6 +2,8 @@ import { ListBoxItemProps as AriaListBoxItemProps } from 'react-aria-components'
|
|
|
2
2
|
import { SelectItemType } from './select-shared';
|
|
3
3
|
export interface SelectItemProps extends Omit<AriaListBoxItemProps<SelectItemType>, "id">, SelectItemType {
|
|
4
4
|
textStyles?: string;
|
|
5
|
+
/** When true, renders supportingText on a second line below the label. */
|
|
6
|
+
stackDescription?: boolean;
|
|
5
7
|
}
|
|
6
|
-
export declare const SelectItem: ({ label, id, value, avatarUrl, supportingText, isDisabled, icon: Icon, className, children, textStyles, ...props }: SelectItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const SelectItem: ({ label, id, value, avatarUrl, supportingText, supportingTextClassName, isDisabled, icon: Icon, className, children, textStyles, stackDescription, ...props }: SelectItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
9
|
//# sourceMappingURL=select-item.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/select-item.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/select-item.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAMtF,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAUhF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,EAAE,cAAc;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,GAAI,+JAcxB,eAAe,4CAkJjB,CAAC"}
|
|
@@ -1,112 +1,130 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useContext as
|
|
3
|
-
import { Check as
|
|
4
|
-
import { ListBoxItem as
|
|
5
|
-
import { Avatar as
|
|
6
|
-
import { SelectContext as
|
|
7
|
-
import { cx as
|
|
8
|
-
import { isReactComponent as
|
|
9
|
-
const
|
|
1
|
+
import { jsx as r, jsxs as v } from "react/jsx-runtime";
|
|
2
|
+
import { useContext as N, isValidElement as R } from "react";
|
|
3
|
+
import { Check as j } from "@untitledui/icons";
|
|
4
|
+
import { ListBoxItem as E, Text as D } from "react-aria-components";
|
|
5
|
+
import { Avatar as V } from "../avatar/avatar.js";
|
|
6
|
+
import { SelectContext as _, fontSizes as P } from "./select-shared.js";
|
|
7
|
+
import { cx as o } from "../../utils/cn.js";
|
|
8
|
+
import { isReactComponent as q } from "../../utils/is-react-component.js";
|
|
9
|
+
const A = {
|
|
10
10
|
sm: "p-2 pr-2.5",
|
|
11
11
|
md: "p-2.5 pl-2",
|
|
12
12
|
xs: "p-1.5"
|
|
13
|
-
},
|
|
14
|
-
label:
|
|
15
|
-
id:
|
|
16
|
-
value:
|
|
17
|
-
avatarUrl:
|
|
18
|
-
supportingText:
|
|
13
|
+
}, Q = ({
|
|
14
|
+
label: m,
|
|
15
|
+
id: d,
|
|
16
|
+
value: S,
|
|
17
|
+
avatarUrl: s,
|
|
18
|
+
supportingText: i,
|
|
19
|
+
supportingTextClassName: y,
|
|
19
20
|
isDisabled: c,
|
|
20
|
-
icon:
|
|
21
|
-
className:
|
|
22
|
-
children:
|
|
23
|
-
textStyles:
|
|
21
|
+
icon: a,
|
|
22
|
+
className: f,
|
|
23
|
+
children: l,
|
|
24
|
+
textStyles: p,
|
|
25
|
+
stackDescription: u = !1,
|
|
24
26
|
...t
|
|
25
27
|
}) => {
|
|
26
|
-
const { size:
|
|
27
|
-
!
|
|
28
|
-
},
|
|
29
|
-
!
|
|
30
|
-
},
|
|
31
|
-
return /* @__PURE__ */
|
|
32
|
-
|
|
28
|
+
const { size: x, isDeselectable: z, selectedKey: h, onReselectCurrent: w } = N(_), g = z && h != null && d != null && String(d) === String(h), k = (e) => {
|
|
29
|
+
!g || c || (e.preventDefault(), e.stopPropagation());
|
|
30
|
+
}, C = (e) => {
|
|
31
|
+
!g || c || !w || (e.preventDefault(), e.stopPropagation(), w());
|
|
32
|
+
}, b = m || (typeof l == "string" ? l : ""), K = i ? b + " " + i : b;
|
|
33
|
+
return /* @__PURE__ */ r(
|
|
34
|
+
E,
|
|
33
35
|
{
|
|
34
|
-
id:
|
|
35
|
-
value:
|
|
36
|
-
id:
|
|
37
|
-
label:
|
|
38
|
-
avatarUrl:
|
|
39
|
-
supportingText:
|
|
36
|
+
id: d,
|
|
37
|
+
value: S ?? {
|
|
38
|
+
id: d,
|
|
39
|
+
label: b,
|
|
40
|
+
avatarUrl: s,
|
|
41
|
+
supportingText: i,
|
|
42
|
+
supportingTextClassName: y,
|
|
40
43
|
isDisabled: c,
|
|
41
|
-
icon:
|
|
44
|
+
icon: a
|
|
42
45
|
},
|
|
43
|
-
textValue:
|
|
46
|
+
textValue: K,
|
|
44
47
|
isDisabled: c,
|
|
45
48
|
...t,
|
|
46
49
|
onPointerDownCapture: (e) => {
|
|
47
|
-
var
|
|
48
|
-
(
|
|
50
|
+
var n;
|
|
51
|
+
(n = t.onPointerDownCapture) == null || n.call(t, e), k(e);
|
|
49
52
|
},
|
|
50
53
|
onPointerUpCapture: (e) => {
|
|
51
|
-
var
|
|
52
|
-
(
|
|
54
|
+
var n;
|
|
55
|
+
(n = t.onPointerUpCapture) == null || n.call(t, e), C(e);
|
|
53
56
|
},
|
|
54
|
-
|
|
55
|
-
var
|
|
56
|
-
(
|
|
57
|
+
onKeyDown: (e) => {
|
|
58
|
+
var n;
|
|
59
|
+
if ((n = t.onKeyDown) == null || n.call(t, e), e.key !== "Enter" && e.key !== " ") {
|
|
60
|
+
e.continuePropagation();
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
C(e);
|
|
57
64
|
},
|
|
58
|
-
className: (e) =>
|
|
65
|
+
className: (e) => o(
|
|
59
66
|
"w-full px-1.5 py-px outline-hidden",
|
|
60
|
-
typeof
|
|
67
|
+
typeof f == "function" ? f(e) : f
|
|
61
68
|
),
|
|
62
|
-
children: (e) => /* @__PURE__ */
|
|
69
|
+
children: (e) => /* @__PURE__ */ v(
|
|
63
70
|
"div",
|
|
64
71
|
{
|
|
65
|
-
className:
|
|
72
|
+
className: o(
|
|
66
73
|
"flex cursor-pointer items-center gap-2 rounded-md outline-hidden select-none hover:bg-primary_hover",
|
|
74
|
+
e.isFocused && !e.isDisabled && "bg-primary_hover",
|
|
67
75
|
e.isSelected && "bg-brand-primary text-brand-600 hover:bg-brand-primary hover:text-brand-600",
|
|
68
76
|
e.isDisabled && "cursor-not-allowed",
|
|
69
|
-
e.isFocusVisible && "ring-1 ring-focus-ring ring-inset",
|
|
70
77
|
// Icon styles
|
|
71
78
|
"*:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
|
|
72
79
|
e.isDisabled && "*:data-icon:text-fg-disabled",
|
|
73
80
|
// @ts-ignore
|
|
74
|
-
|
|
81
|
+
A[x]
|
|
75
82
|
),
|
|
76
83
|
children: [
|
|
77
|
-
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
s ? /* @__PURE__ */ r(V, { "aria-hidden": "true", size: "xs", src: s, alt: m }) : q(a) ? /* @__PURE__ */ r(a, { "data-icon": !0, "aria-hidden": "true" }) : R(a) ? a : null,
|
|
85
|
+
/* @__PURE__ */ v(
|
|
86
|
+
"div",
|
|
87
|
+
{
|
|
88
|
+
className: o(
|
|
89
|
+
"flex w-full min-w-0 flex-1",
|
|
90
|
+
u && i ? "flex-col gap-0.5" : "flex-wrap gap-x-2"
|
|
91
|
+
),
|
|
92
|
+
children: [
|
|
93
|
+
/* @__PURE__ */ r(
|
|
86
94
|
D,
|
|
87
|
-
|
|
95
|
+
{
|
|
96
|
+
slot: "label",
|
|
97
|
+
className: o(
|
|
98
|
+
"truncate font-medium text-primary",
|
|
99
|
+
!u && "whitespace-nowrap",
|
|
100
|
+
e.isDisabled && "text-disabled",
|
|
101
|
+
p,
|
|
102
|
+
P[x]
|
|
103
|
+
),
|
|
104
|
+
children: m || (typeof l == "function" ? l(e) : l)
|
|
105
|
+
}
|
|
88
106
|
),
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
e.isSelected && /* @__PURE__ */
|
|
106
|
-
|
|
107
|
+
i && /* @__PURE__ */ r(
|
|
108
|
+
D,
|
|
109
|
+
{
|
|
110
|
+
slot: "description",
|
|
111
|
+
className: o(
|
|
112
|
+
y ?? "text-tertiary",
|
|
113
|
+
u ? "line-clamp-2" : "whitespace-nowrap",
|
|
114
|
+
P[x],
|
|
115
|
+
e.isDisabled && "text-disabled"
|
|
116
|
+
),
|
|
117
|
+
children: i
|
|
118
|
+
}
|
|
119
|
+
)
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
),
|
|
123
|
+
e.isSelected && /* @__PURE__ */ r(
|
|
124
|
+
j,
|
|
107
125
|
{
|
|
108
126
|
"aria-hidden": "true",
|
|
109
|
-
className:
|
|
127
|
+
className: o(
|
|
110
128
|
"ml-auto text-fg-brand-primary",
|
|
111
129
|
e.isDisabled && "text-fg-disabled"
|
|
112
130
|
),
|
|
@@ -120,5 +138,5 @@ const B = {
|
|
|
120
138
|
);
|
|
121
139
|
};
|
|
122
140
|
export {
|
|
123
|
-
|
|
141
|
+
Q as SelectItem
|
|
124
142
|
};
|
|
@@ -1,14 +1,33 @@
|
|
|
1
1
|
import { SelectHTMLAttributes } from 'react';
|
|
2
|
-
|
|
2
|
+
declare const selectSizes: {
|
|
3
|
+
sm: {
|
|
4
|
+
select: string;
|
|
5
|
+
label: string;
|
|
6
|
+
chevron: string;
|
|
7
|
+
};
|
|
8
|
+
md: {
|
|
9
|
+
select: string;
|
|
10
|
+
label: string;
|
|
11
|
+
chevron: string;
|
|
12
|
+
};
|
|
13
|
+
lg: {
|
|
14
|
+
select: string;
|
|
15
|
+
label: string;
|
|
16
|
+
chevron: string;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
|
|
3
20
|
label?: string;
|
|
4
21
|
hint?: string;
|
|
5
22
|
selectClassName?: string;
|
|
23
|
+
/** @default "lg" */
|
|
24
|
+
inputSize?: keyof typeof selectSizes;
|
|
6
25
|
options: {
|
|
7
26
|
label: string;
|
|
8
27
|
value: string;
|
|
9
28
|
disabled?: boolean;
|
|
10
29
|
}[];
|
|
11
30
|
}
|
|
12
|
-
export declare const NativeSelect: ({ label, hint, options, className, selectClassName, ...props }: NativeSelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export declare const NativeSelect: ({ label, hint, options, className, selectClassName, inputSize, ...props }: NativeSelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
32
|
export {};
|
|
14
33
|
//# sourceMappingURL=select-native.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-native.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/select-native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAS,MAAM,OAAO,CAAC;AAMzD,
|
|
1
|
+
{"version":3,"file":"select-native.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/select-native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAS,MAAM,OAAO,CAAC;AAMzD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,CACP;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACrC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CACjE;AAED,eAAO,MAAM,YAAY,GAAI,2EAQ1B,iBAAiB,4CAgEnB,CAAC"}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { jsxs as o, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useId as g } from "react";
|
|
3
|
+
import { ChevronDown as b } from "@untitledui/icons";
|
|
4
|
+
import { HintText as x } from "../input/hint-text.js";
|
|
5
|
+
import { Label as h } from "../input/label.js";
|
|
6
|
+
import { cx as t } from "../../utils/cn.js";
|
|
7
|
+
const r = {
|
|
8
|
+
sm: {
|
|
9
|
+
select: "h-8 rounded-md p-2 px-3 text-xs font-normal",
|
|
10
|
+
label: "text-xs",
|
|
11
|
+
chevron: "right-3 size-4"
|
|
12
|
+
},
|
|
13
|
+
md: {
|
|
14
|
+
select: "h-10 rounded-md px-3 py-2 text-sm font-normal",
|
|
15
|
+
label: "text-xs",
|
|
16
|
+
chevron: "right-3.5 size-4"
|
|
17
|
+
},
|
|
18
|
+
lg: {
|
|
19
|
+
select: "rounded-lg px-3.5 py-2.5 text-md font-medium",
|
|
20
|
+
label: "text-sm",
|
|
21
|
+
chevron: "right-3.5 size-5"
|
|
22
|
+
}
|
|
23
|
+
}, j = ({
|
|
24
|
+
label: p,
|
|
25
|
+
hint: d,
|
|
26
|
+
options: u,
|
|
27
|
+
className: m,
|
|
28
|
+
selectClassName: c,
|
|
29
|
+
inputSize: e = "lg",
|
|
30
|
+
...w
|
|
31
|
+
}) => {
|
|
32
|
+
const l = g(), i = `select-native-${l}`, s = `select-native-hint-${l}`;
|
|
33
|
+
return /* @__PURE__ */ o("div", { className: t("w-full in-data-input-wrapper:w-max", m), children: [
|
|
34
|
+
p && /* @__PURE__ */ a(
|
|
35
|
+
h,
|
|
36
|
+
{
|
|
37
|
+
htmlFor: i,
|
|
38
|
+
id: i,
|
|
39
|
+
className: t(
|
|
40
|
+
"mb-1.5 color-text-label",
|
|
41
|
+
r[e].label
|
|
42
|
+
),
|
|
43
|
+
children: p
|
|
44
|
+
}
|
|
45
|
+
),
|
|
46
|
+
/* @__PURE__ */ o("div", { className: "relative grid w-full items-center", children: [
|
|
47
|
+
/* @__PURE__ */ a(
|
|
48
|
+
"select",
|
|
49
|
+
{
|
|
50
|
+
...w,
|
|
51
|
+
id: i,
|
|
52
|
+
"aria-describedby": s,
|
|
53
|
+
"aria-labelledby": i,
|
|
54
|
+
className: t(
|
|
55
|
+
"appearance-none bg-primary text-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset placeholder:text-fg-quaternary focus-visible:ring-2 focus-visible:ring-brand disabled:cursor-not-allowed disabled:bg-disabled_subtle disabled:text-disabled",
|
|
56
|
+
r[e].select,
|
|
57
|
+
// Styles when the select is within an `InputGroup`
|
|
58
|
+
"in-data-input-wrapper:flex in-data-input-wrapper:h-full in-data-input-wrapper:gap-1 in-data-input-wrapper:bg-inherit in-data-input-wrapper:px-3 in-data-input-wrapper:py-2 in-data-input-wrapper:font-normal in-data-input-wrapper:text-tertiary in-data-input-wrapper:shadow-none in-data-input-wrapper:ring-transparent",
|
|
59
|
+
// Styles for the select when `TextField` is disabled
|
|
60
|
+
"in-data-input-wrapper:group-disabled:pointer-events-none in-data-input-wrapper:group-disabled:cursor-not-allowed in-data-input-wrapper:group-disabled:bg-transparent in-data-input-wrapper:group-disabled:text-disabled",
|
|
61
|
+
// Common styles for sizes and border radius within `InputGroup`
|
|
62
|
+
"in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-leading:in-data-[input-size=md]:pl-3.5 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:pl-3",
|
|
63
|
+
// For "leading" dropdown within `InputGroup`
|
|
64
|
+
"in-data-input-wrapper:in-data-leading:in-data-[input-size=md]:pr-4.5 in-data-input-wrapper:in-data-leading:in-data-[input-size=sm]:pr-4.5",
|
|
65
|
+
// For "trailing" dropdown within `InputGroup`
|
|
66
|
+
"in-data-input-wrapper:in-data-trailing:in-data-[input-size=md]:pr-8 in-data-input-wrapper:in-data-trailing:in-data-[input-size=sm]:pr-7.5",
|
|
67
|
+
c
|
|
68
|
+
),
|
|
69
|
+
children: u.map((n) => /* @__PURE__ */ a("option", { value: n.value, children: n.label }, n.value))
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
/* @__PURE__ */ a(
|
|
73
|
+
b,
|
|
74
|
+
{
|
|
75
|
+
"aria-hidden": "true",
|
|
76
|
+
className: t(
|
|
77
|
+
"pointer-events-none absolute text-fg-quaternary in-data-input-wrapper:right-0 in-data-input-wrapper:size-4 in-data-input-wrapper:stroke-[2.625px] in-data-input-wrapper:in-data-trailing:in-data-[input-size=sm]:right-3",
|
|
78
|
+
r[e].chevron
|
|
79
|
+
)
|
|
80
|
+
}
|
|
81
|
+
)
|
|
82
|
+
] }),
|
|
83
|
+
d && /* @__PURE__ */ a(x, { className: "mt-2", id: s, children: d })
|
|
84
|
+
] });
|
|
85
|
+
};
|
|
86
|
+
export {
|
|
87
|
+
j as NativeSelect
|
|
88
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-shared.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/select-shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAMjD,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;CAOjB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;CAIrB,CAAC;AAEF,eAAO,MAAM,aAAa;UAClB,IAAI,GAAG,IAAI,GAAG,IAAI;qBACP,OAAO;kBACV,GAAG,GAAG,IAAI;wBACJ,MAAM,IAAI;EACd,CAAC"}
|
|
1
|
+
{"version":3,"file":"select-shared.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/select-shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAMjD,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,IAAI,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;CAOjB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;CAIrB,CAAC;AAEF,eAAO,MAAM,aAAa;UAClB,IAAI,GAAG,IAAI,GAAG,IAAI;qBACP,OAAO;kBACV,GAAG,GAAG,IAAI;wBACJ,MAAM,IAAI;EACd,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC, ReactNode, RefAttributes } from 'react';
|
|
2
|
-
import { SelectProps as AriaSelectProps } from 'react-aria-components';
|
|
2
|
+
import { PopoverProps as AriaPopoverProps, SelectProps as AriaSelectProps } from 'react-aria-components';
|
|
3
3
|
import { ComboBox } from './combobox';
|
|
4
4
|
import { SelectItem } from './select-item';
|
|
5
5
|
import { SearchableSelect } from './searchable-select';
|
|
@@ -15,8 +15,18 @@ export interface SelectProps extends Omit<AriaSelectProps<SelectItemType>, "chil
|
|
|
15
15
|
isClearable?: boolean;
|
|
16
16
|
/** When true, clicking the already-selected option in the dropdown clears the selection. Default false. */
|
|
17
17
|
isDeselectable?: boolean;
|
|
18
|
+
/** Footer content rendered at the bottom of the dropdown popover */
|
|
19
|
+
footer?: ReactNode;
|
|
20
|
+
/** Optional class name for the list box inside the popover */
|
|
21
|
+
listBoxClassName?: string;
|
|
22
|
+
/** Popover placement relative to the trigger */
|
|
23
|
+
popoverPlacement?: AriaPopoverProps["placement"];
|
|
24
|
+
/** Minimum padding between the popover and the viewport edge */
|
|
25
|
+
popoverContainerPadding?: number;
|
|
26
|
+
/** Rendered to the left of the clear control and chevron. */
|
|
27
|
+
endAdornment?: ReactNode;
|
|
18
28
|
}
|
|
19
|
-
declare const Select: ({ placeholder, placeholderIcon, size, children, items, label, hint, tooltip, className, textStyles, showChevron, isClearable, isDeselectable, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare const Select: ({ placeholder, placeholderIcon, size, children, items, label, hint, tooltip, className, textStyles, showChevron, isClearable, isDeselectable, footer, listBoxClassName, popoverPlacement, popoverContainerPadding, endAdornment, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
30
|
declare const _Select: typeof Select & {
|
|
21
31
|
ComboBox: typeof ComboBox;
|
|
22
32
|
Item: typeof SelectItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAEV,WAAW,IAAI,eAAe,EAC/B,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAEV,YAAY,IAAI,gBAAgB,EAChC,WAAW,IAAI,eAAe,EAC/B,MAAM,uBAAuB,CAAC;AAY/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EACL,aAAa,EACb,SAAS,EACT,KAAK,EACL,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,iBAAiB,CAAC;AAIzB,MAAM,WAAW,WACf,SACE,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EAC3D,aAAa,CAAC,cAAc,CAAC,EAC7B,WAAW;IACb,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACjC,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,cAAc,KAAK,SAAS,CAAC,CAAC;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uHAAuH;IACvH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2GAA2G;IAC3G,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACjD,gEAAgE;IAChE,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAiND,QAAA,MAAM,MAAM,GAAI,4OAoBb,WAAW,4CA+Hb,CAAC;AAEF,QAAA,MAAM,OAAO,EAAa,OAAO,MAAM,GAAG;IACxC,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,UAAU,EAAE,OAAO,gBAAgB,CAAC;CACrC,CAAC;AAKF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}
|