@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.
Files changed (75) hide show
  1. package/dist/applications/date-picker/calendar-value.d.ts +4 -0
  2. package/dist/applications/date-picker/calendar-value.d.ts.map +1 -0
  3. package/dist/applications/date-picker/calendar-value.js +6 -0
  4. package/dist/applications/date-picker/calendar.d.ts.map +1 -1
  5. package/dist/applications/date-picker/calendar.js +130 -124
  6. package/dist/applications/date-picker/date-time-calendar.d.ts.map +1 -1
  7. package/dist/applications/date-picker/date-time-calendar.js +56 -55
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.d.ts.map +1 -1
  10. package/dist/index.js +161 -157
  11. package/dist/node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.js +6 -6
  12. package/dist/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.js +5 -5
  13. package/dist/node_modules/framer-motion/dist/es/utils/use-composed-ref.js +3 -3
  14. package/dist/node_modules/{@react-stately/data/dist → react-stately/dist/private/data}/useListData.js +61 -64
  15. package/dist/patterns/table/rowReorderDrag.js +4 -4
  16. package/dist/patterns/table/toolbar/ColumnHeaderMenu.d.ts.map +1 -1
  17. package/dist/patterns/table/toolbar/ColumnHeaderMenu.js +160 -139
  18. package/dist/patterns/table-component/TableComponent.d.ts +1 -1
  19. package/dist/patterns/table-component/TableComponent.d.ts.map +1 -1
  20. package/dist/patterns/table-component/TableComponent.js +996 -580
  21. package/dist/patterns/table-component/columnReorderDrag.d.ts +41 -0
  22. package/dist/patterns/table-component/columnReorderDrag.d.ts.map +1 -0
  23. package/dist/patterns/table-component/columnReorderDrag.js +55 -0
  24. package/dist/patterns/table-component/columnReorderDrag.test.d.ts +2 -0
  25. package/dist/patterns/table-component/columnReorderDrag.test.d.ts.map +1 -0
  26. package/dist/patterns/table-component/types.d.ts +8 -0
  27. package/dist/patterns/table-component/types.d.ts.map +1 -1
  28. package/dist/primitives/avatar/avatar.d.ts +46 -28
  29. package/dist/primitives/avatar/avatar.d.ts.map +1 -1
  30. package/dist/primitives/avatar/avatar.js +114 -39
  31. package/dist/primitives/avatar/base-components/avatar-online-indicator.d.ts +8 -0
  32. package/dist/primitives/avatar/base-components/avatar-online-indicator.d.ts.map +1 -0
  33. package/dist/primitives/avatar/base-components/avatar-online-indicator.js +29 -0
  34. package/dist/primitives/avatar/base-components/index.d.ts +3 -0
  35. package/dist/primitives/avatar/base-components/index.d.ts.map +1 -0
  36. package/dist/primitives/avatar/base-components/verified-tick.d.ts +7 -0
  37. package/dist/primitives/avatar/base-components/verified-tick.d.ts.map +1 -0
  38. package/dist/primitives/avatar/base-components/verified-tick.js +41 -0
  39. package/dist/primitives/dropdown/dropdown.d.ts +2 -2
  40. package/dist/primitives/input/input.d.ts.map +1 -1
  41. package/dist/primitives/input/input.js +9 -1
  42. package/dist/primitives/select/SearchInput.d.ts +7 -7
  43. package/dist/primitives/select/SearchInput.d.ts.map +1 -1
  44. package/dist/primitives/select/__tests__/multi-select-utils.test.d.ts +2 -0
  45. package/dist/primitives/select/__tests__/multi-select-utils.test.d.ts.map +1 -0
  46. package/dist/primitives/select/combobox.d.ts +1 -2
  47. package/dist/primitives/select/combobox.d.ts.map +1 -1
  48. package/dist/primitives/select/index.d.ts +3 -1
  49. package/dist/primitives/select/index.d.ts.map +1 -1
  50. package/dist/primitives/select/multi-select-utils.d.ts +7 -0
  51. package/dist/primitives/select/multi-select-utils.d.ts.map +1 -0
  52. package/dist/primitives/select/multi-select-utils.js +17 -0
  53. package/dist/primitives/select/multi-select.d.ts +17 -4
  54. package/dist/primitives/select/multi-select.d.ts.map +1 -1
  55. package/dist/primitives/select/multi-select.js +631 -237
  56. package/dist/primitives/select/searchable-select.d.ts +26 -4
  57. package/dist/primitives/select/searchable-select.d.ts.map +1 -1
  58. package/dist/primitives/select/searchable-select.js +292 -189
  59. package/dist/primitives/select/select-checkbox.d.ts +6 -0
  60. package/dist/primitives/select/select-checkbox.d.ts.map +1 -0
  61. package/dist/primitives/select/select-checkbox.js +62 -0
  62. package/dist/primitives/select/select-item.d.ts +3 -1
  63. package/dist/primitives/select/select-item.d.ts.map +1 -1
  64. package/dist/primitives/select/select-item.js +95 -77
  65. package/dist/primitives/select/select-native.d.ts +21 -2
  66. package/dist/primitives/select/select-native.d.ts.map +1 -1
  67. package/dist/primitives/select/select-native.js +88 -0
  68. package/dist/primitives/select/select-shared.d.ts +1 -0
  69. package/dist/primitives/select/select-shared.d.ts.map +1 -1
  70. package/dist/primitives/select/select.d.ts +12 -2
  71. package/dist/primitives/select/select.d.ts.map +1 -1
  72. package/dist/primitives/select/select.js +207 -152
  73. package/dist/styles/components.css +1 -1
  74. package/dist/styles/theme.css +1 -1
  75. 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":"AAQA,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;CACrB;AAED,eAAO,MAAM,UAAU,GAAI,oHAYxB,eAAe,4CAqIjB,CAAC"}
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 n, jsxs as p } from "react/jsx-runtime";
2
- import { useContext as k, isValidElement as N } from "react";
3
- import { Check as R } from "@untitledui/icons";
4
- import { ListBoxItem as V, Text as w } from "react-aria-components";
5
- import { Avatar as j } from "../avatar/avatar.js";
6
- import { SelectContext as q, fontSizes as C } from "./select-shared.js";
7
- import { cx as l } from "../../utils/cn.js";
8
- import { isReactComponent as A } from "../../utils/is-react-component.js";
9
- const B = {
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
- }, J = ({
14
- label: d,
15
- id: s,
16
- value: v,
17
- avatarUrl: m,
18
- supportingText: r,
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: o,
21
- className: u,
22
- children: a,
23
- textStyles: D,
21
+ icon: a,
22
+ className: f,
23
+ children: l,
24
+ textStyles: p,
25
+ stackDescription: u = !1,
24
26
  ...t
25
27
  }) => {
26
- const { size: f, isDeselectable: P, selectedKey: b, onReselectCurrent: h } = k(q), y = P && b != null && s != null && String(s) === String(b), S = (e) => {
27
- !y || c || (e.preventDefault(), e.stopPropagation());
28
- }, g = (e) => {
29
- !y || c || !h || ("preventDefault" in e && (e.preventDefault(), e.stopPropagation()), h());
30
- }, x = d || (typeof a == "string" ? a : ""), z = r ? x + " " + r : x;
31
- return /* @__PURE__ */ n(
32
- V,
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: s,
35
- value: v ?? {
36
- id: s,
37
- label: x,
38
- avatarUrl: m,
39
- supportingText: r,
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: o
44
+ icon: a
42
45
  },
43
- textValue: z,
46
+ textValue: K,
44
47
  isDisabled: c,
45
48
  ...t,
46
49
  onPointerDownCapture: (e) => {
47
- var i;
48
- (i = t.onPointerDownCapture) == null || i.call(t, e), S(e);
50
+ var n;
51
+ (n = t.onPointerDownCapture) == null || n.call(t, e), k(e);
49
52
  },
50
53
  onPointerUpCapture: (e) => {
51
- var i;
52
- (i = t.onPointerUpCapture) == null || i.call(t, e), g(e);
54
+ var n;
55
+ (n = t.onPointerUpCapture) == null || n.call(t, e), C(e);
53
56
  },
54
- onPress: (e) => {
55
- var i;
56
- (i = t.onPress) == null || i.call(t, e), e.pointerType === "keyboard" && g(e);
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) => l(
65
+ className: (e) => o(
59
66
  "w-full px-1.5 py-px outline-hidden",
60
- typeof u == "function" ? u(e) : u
67
+ typeof f == "function" ? f(e) : f
61
68
  ),
62
- children: (e) => /* @__PURE__ */ p(
69
+ children: (e) => /* @__PURE__ */ v(
63
70
  "div",
64
71
  {
65
- className: l(
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
- B[f]
81
+ A[x]
75
82
  ),
76
83
  children: [
77
- m ? /* @__PURE__ */ n(j, { "aria-hidden": "true", size: "sm", src: m, alt: d }) : A(o) ? /* @__PURE__ */ n(o, { "data-icon": !0, "aria-hidden": "true" }) : N(o) ? o : null,
78
- /* @__PURE__ */ p("div", { className: "flex w-full min-w-0 flex-1 flex-wrap gap-x-2", children: [
79
- /* @__PURE__ */ n(
80
- w,
81
- {
82
- slot: "label",
83
- className: l(
84
- "truncate font-medium whitespace-nowrap text-primary",
85
- e.isDisabled && "text-disabled",
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
- C[f]
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
- children: d || (typeof a == "function" ? a(e) : a)
90
- }
91
- ),
92
- r && /* @__PURE__ */ n(
93
- w,
94
- {
95
- slot: "description",
96
- className: l(
97
- "whitespace-nowrap text-tertiary",
98
- C[f],
99
- e.isDisabled && "text-disabled"
100
- ),
101
- children: r
102
- }
103
- )
104
- ] }),
105
- e.isSelected && /* @__PURE__ */ n(
106
- R,
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: l(
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
- J as SelectItem
141
+ Q as SelectItem
124
142
  };
@@ -1,14 +1,33 @@
1
1
  import { SelectHTMLAttributes } from 'react';
2
- interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
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,UAAU,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,gEAO1B,iBAAiB,4CAqDnB,CAAC"}
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
+ };
@@ -7,6 +7,7 @@ export type SelectItemType = {
7
7
  initials?: string;
8
8
  isDisabled?: boolean;
9
9
  supportingText?: string;
10
+ supportingTextClassName?: string;
10
11
  icon?: FC | ReactNode;
11
12
  };
12
13
  export interface CommonProps {
@@ -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;AAU/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;CAC1B;AAiKD,QAAA,MAAM,MAAM,GAAI,yJAeb,WAAW,4CA0Gb,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"}
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"}