@simpli-route/apollo-ds 0.1.78 → 0.1.79

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 (117) hide show
  1. package/dist/components/SelectInput/SelectContent.d.ts +1 -3
  2. package/dist/components/SelectInput/types.d.ts +3 -1
  3. package/dist/index.cjs10.js +1 -1
  4. package/dist/index.cjs100.js +1 -1
  5. package/dist/index.cjs101.js +1 -1
  6. package/dist/index.cjs105.js +1 -1
  7. package/dist/index.cjs106.js +1 -1
  8. package/dist/index.cjs12.js +1 -1
  9. package/dist/index.cjs130.js +1 -1
  10. package/dist/index.cjs131.js +1 -1
  11. package/dist/index.cjs132.js +1 -1
  12. package/dist/index.cjs133.js +1 -1
  13. package/dist/index.cjs134.js +1 -1
  14. package/dist/index.cjs135.js +1 -1
  15. package/dist/index.cjs136.js +1 -1
  16. package/dist/index.cjs137.js +1 -1
  17. package/dist/index.cjs144.js +1 -1
  18. package/dist/index.cjs145.js +1 -1
  19. package/dist/index.cjs174.js +1 -1
  20. package/dist/index.cjs175.js +1 -1
  21. package/dist/index.cjs176.js +1 -1
  22. package/dist/index.cjs26.js +1 -1
  23. package/dist/index.cjs28.js +1 -1
  24. package/dist/index.cjs29.js +1 -1
  25. package/dist/index.cjs31.js +1 -1
  26. package/dist/index.cjs32.js +1 -1
  27. package/dist/index.cjs33.js +1 -1
  28. package/dist/index.cjs38.js +1 -1
  29. package/dist/index.cjs39.js +1 -1
  30. package/dist/index.cjs4.js +1 -1
  31. package/dist/index.cjs5.js +1 -1
  32. package/dist/index.cjs52.js +1 -1
  33. package/dist/index.cjs53.js +1 -1
  34. package/dist/index.cjs54.js +1 -1
  35. package/dist/index.cjs76.js +1 -1
  36. package/dist/index.cjs77.js +1 -1
  37. package/dist/index.cjs78.js +1 -1
  38. package/dist/index.cjs79.js +1 -1
  39. package/dist/index.cjs8.js +1 -1
  40. package/dist/index.cjs80.js +1 -1
  41. package/dist/index.cjs83.js +1 -1
  42. package/dist/index.cjs84.js +1 -1
  43. package/dist/index.cjs85.js +1 -1
  44. package/dist/index.cjs86.js +1 -1
  45. package/dist/index.cjs87.js +3 -1
  46. package/dist/index.cjs88.js +1 -1
  47. package/dist/index.cjs89.js +1 -3
  48. package/dist/index.cjs9.js +1 -1
  49. package/dist/index.cjs90.js +1 -1
  50. package/dist/index.cjs91.js +1 -1
  51. package/dist/index.cjs92.js +1 -1
  52. package/dist/index.cjs93.js +1 -1
  53. package/dist/index.cjs94.js +1 -1
  54. package/dist/index.cjs95.js +1 -1
  55. package/dist/index.cjs96.js +1 -1
  56. package/dist/index.cjs97.js +1 -1
  57. package/dist/index.cjs98.js +1 -1
  58. package/dist/index.cjs99.js +1 -1
  59. package/dist/index.es10.js +1 -1
  60. package/dist/index.es100.js +3 -3
  61. package/dist/index.es101.js +3 -3
  62. package/dist/index.es105.js +1 -1
  63. package/dist/index.es106.js +1 -1
  64. package/dist/index.es12.js +3 -3
  65. package/dist/index.es130.js +2 -4
  66. package/dist/index.es131.js +4 -28
  67. package/dist/index.es132.js +4 -2
  68. package/dist/index.es133.js +28 -10
  69. package/dist/index.es134.js +2 -340
  70. package/dist/index.es135.js +8 -166
  71. package/dist/index.es136.js +340 -2
  72. package/dist/index.es137.js +166 -2
  73. package/dist/index.es144.js +1 -1
  74. package/dist/index.es145.js +2 -2
  75. package/dist/index.es174.js +59 -20
  76. package/dist/index.es175.js +20 -4
  77. package/dist/index.es176.js +2 -57
  78. package/dist/index.es26.js +1 -1
  79. package/dist/index.es28.js +2 -2
  80. package/dist/index.es29.js +3 -3
  81. package/dist/index.es31.js +6 -6
  82. package/dist/index.es32.js +100 -97
  83. package/dist/index.es33.js +2 -2
  84. package/dist/index.es38.js +2 -2
  85. package/dist/index.es39.js +3 -3
  86. package/dist/index.es4.js +3 -3
  87. package/dist/index.es5.js +2 -2
  88. package/dist/index.es52.js +45 -4
  89. package/dist/index.es53.js +4 -112
  90. package/dist/index.es54.js +97 -30
  91. package/dist/index.es76.js +15 -38
  92. package/dist/index.es77.js +13 -26
  93. package/dist/index.es78.js +9 -11
  94. package/dist/index.es79.js +36 -12
  95. package/dist/index.es8.js +1 -1
  96. package/dist/index.es80.js +28 -14
  97. package/dist/index.es83.js +10 -10
  98. package/dist/index.es84.js +10 -12
  99. package/dist/index.es85.js +12 -10
  100. package/dist/index.es86.js +13 -101
  101. package/dist/index.es87.js +153 -11
  102. package/dist/index.es88.js +12 -13
  103. package/dist/index.es89.js +7 -155
  104. package/dist/index.es9.js +3 -3
  105. package/dist/index.es90.js +42 -12
  106. package/dist/index.es91.js +20 -7
  107. package/dist/index.es92.js +78 -41
  108. package/dist/index.es93.js +101 -20
  109. package/dist/index.es94.js +13 -19
  110. package/dist/index.es95.js +10 -20
  111. package/dist/index.es96.js +9 -9
  112. package/dist/index.es97.js +45 -10
  113. package/dist/index.es98.js +19 -45
  114. package/dist/index.es99.js +16 -76
  115. package/dist/stories/SelectInput.stories.d.ts +11 -0
  116. package/dist/style.css +27 -0
  117. package/package.json +1 -1
@@ -1,44 +1,81 @@
1
1
  import { j as e } from "./index.es49.js";
2
- import { useState as m, useEffect as u } from "react";
3
- import { Popover as v } from "react-aria-components";
4
- import { NoResultsMessage as a } from "./index.es127.js";
5
- import { SearchListBox as h } from "./index.es128.js";
6
- import { popoverVariants as x } from "./index.es70.js";
7
- const z = ({
8
- triggerRef: o,
9
- hasNoResults: n,
10
- noResultsText: i,
11
- items: p,
12
- onItemSelect: c
13
- }) => {
14
- const [s, d] = m(void 0);
15
- return u(() => {
16
- if (!(o != null && o.current))
17
- return;
18
- const r = () => {
19
- if (o.current) {
20
- const t = o.current.offsetWidth;
21
- d(t);
22
- }
23
- };
24
- if (r(), typeof ResizeObserver < "u") {
25
- const t = new ResizeObserver(() => {
26
- r();
27
- });
28
- return o.current && t.observe(o.current), () => {
29
- t.disconnect();
30
- };
31
- }
32
- }, [o]), /* @__PURE__ */ e.jsx(
33
- v,
34
- {
35
- className: x(),
36
- triggerRef: o,
37
- style: s !== void 0 ? { width: `${s}px`, minWidth: `${s}px` } : void 0,
38
- children: n ? /* @__PURE__ */ e.jsx(a, { text: i }) : /* @__PURE__ */ e.jsx(h, { items: p, onItemSelect: c })
39
- }
40
- );
41
- };
2
+ import { Button as d, SelectValue as g } from "react-aria-components";
3
+ import { cn as i } from "./index.es50.js";
4
+ import { Badge as j } from "./index.es6.js";
5
+ import "./index.es7.js";
6
+ import { selectInputButtonVariants as w } from "./index.es58.js";
7
+ const S = ({
8
+ ref: C,
9
+ size: o,
10
+ isDisabled: l,
11
+ classNameButton: m,
12
+ selectionMode: x,
13
+ maxLengthTextOption: p,
14
+ handleDeleteOptionSelected: c,
15
+ placeholder: u,
16
+ validationState: f
17
+ }) => /* @__PURE__ */ e.jsxs(
18
+ d,
19
+ {
20
+ ref: C,
21
+ className: ({ isFocusVisible: t, isHovered: n, isPressed: a }) => i(
22
+ "group",
23
+ w({
24
+ size: o,
25
+ isDisabled: l,
26
+ /** Select root sets isPressed from menu open state; use it so we stay in sync with RAC. */
27
+ isFocusVisible: t || a,
28
+ isHovered: n,
29
+ validationState: f
30
+ }),
31
+ m
32
+ ),
33
+ children: [
34
+ /* @__PURE__ */ e.jsx(g, { className: "flex flex-1 items-center gap-1 overflow-hidden", children: ({ selectedItems: t, selectedText: n, isPlaceholder: a }) => /* @__PURE__ */ e.jsx(e.Fragment, { children: x === "multiple" && t && t.length > 0 ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-1", children: t.filter((r) => r != null).map((r) => {
35
+ const h = r.label, s = r.value;
36
+ return /* @__PURE__ */ e.jsx(
37
+ j,
38
+ {
39
+ label: h,
40
+ size: o,
41
+ isDisabled: l,
42
+ maxLength: p,
43
+ onDelete: () => c(s)
44
+ },
45
+ s
46
+ );
47
+ }) }) : /* @__PURE__ */ e.jsx(
48
+ "span",
49
+ {
50
+ className: i(
51
+ "flex-1 truncate text-left",
52
+ a ? "text-neutral-600" : "",
53
+ l ? "text-neutral-700" : ""
54
+ ),
55
+ children: n || u
56
+ }
57
+ ) }) }),
58
+ /* @__PURE__ */ e.jsx(
59
+ "svg",
60
+ {
61
+ className: "transition-transform duration-100 group-data-[pressed]:rotate-180",
62
+ width: "20",
63
+ height: "10",
64
+ viewBox: "0 0 20 10",
65
+ fill: "none",
66
+ xmlns: "http://www.w3.org/2000/svg",
67
+ children: /* @__PURE__ */ e.jsx(
68
+ "path",
69
+ {
70
+ d: "M20 0.838022C20.0006 0.947676 19.9796 1.05638 19.9381 1.15789C19.8967 1.2594 19.8356 1.35173 19.7584 1.42959L12.9512 8.23676C12.5642 8.62472 12.1045 8.93252 11.5984 9.14254C11.0922 9.35256 10.5497 9.46066 10.0017 9.46066C9.45373 9.46066 8.91115 9.35256 8.40502 9.14254C7.8989 8.93252 7.43918 8.62472 7.0522 8.23676L0.245034 1.42959C0.167349 1.3519 0.105725 1.25968 0.0636824 1.15818C0.0216393 1.05667 5.62088e-09 0.947886 0 0.838023C-5.62081e-09 0.728159 0.0216393 0.619372 0.0636824 0.51787C0.105725 0.41637 0.167349 0.324143 0.245034 0.246458C0.32272 0.168773 0.414946 0.107149 0.516447 0.0651056C0.617948 0.0230624 0.726736 0.00142351 0.8366 0.00142351C0.946464 0.00142351 1.05525 0.0230624 1.15675 0.0651055C1.25825 0.107149 1.35048 0.168773 1.42817 0.246458L8.23533 7.05363C8.704 7.52171 9.33931 7.78463 10.0017 7.78463C10.6641 7.78463 11.2994 7.52171 11.7681 7.05363L18.5752 0.246457C18.6527 0.168363 18.7448 0.106378 18.8464 0.0640783C18.9479 0.0217776 19.0568 4.80781e-09 19.1668 0C19.2768 -4.80789e-09 19.3857 0.0217776 19.4872 0.0640782C19.5888 0.106378 19.6809 0.168363 19.7584 0.246457C19.8356 0.324311 19.8967 0.41664 19.9381 0.518154C19.9796 0.619668 20.0006 0.728369 20 0.838022Z",
71
+ fill: "#73768C"
72
+ }
73
+ )
74
+ }
75
+ )
76
+ ]
77
+ }
78
+ );
42
79
  export {
43
- z as SearchFieldPopover
80
+ S as SelectContent
44
81
  };
@@ -1,22 +1,103 @@
1
- function i(e) {
2
- return {
3
- delay: e.delay ?? 300,
4
- size: e.size ?? "md",
5
- noResultsText: e.noResultsText ?? "No results found",
6
- allowMultipleValues: e.allowMultipleValues ?? !1,
7
- ...e
8
- };
9
- }
10
- function n(e, t) {
11
- if (!t.trim())
12
- return [{ text: e, highlight: !1 }];
13
- const s = new RegExp(`(${t})`, "gi");
14
- return e.split(s).filter(Boolean).map((l) => ({
15
- text: l,
16
- highlight: l.toLowerCase() === t.toLowerCase()
17
- }));
18
- }
1
+ import { j as l } from "./index.es49.js";
2
+ import { cn as P } from "./index.es50.js";
3
+ import { SliderThumb as j } from "./index.es129.js";
4
+ const T = ({
5
+ state: r,
6
+ type: n,
7
+ showTypeValue: t,
8
+ suffix: c,
9
+ classNameFilled: a,
10
+ classNameUnfilled: m,
11
+ modeTooltip: b,
12
+ positionTooltip: h,
13
+ classNameThumb: d,
14
+ isHiddenValue: v,
15
+ suffixRangeCustom: e
16
+ }) => /* @__PURE__ */ l.jsxs("div", { className: "relative", children: [
17
+ t === "default" && !v ? /* @__PURE__ */ l.jsxs("div", { className: "flex justify-between", children: [
18
+ /* @__PURE__ */ l.jsxs(
19
+ "div",
20
+ {
21
+ className: "absolute top-4 text-sm text-neutral-900",
22
+ style: { left: `${r.getThumbPercent(0) * 100}%`, transform: "translateX(-50%)" },
23
+ children: [
24
+ r.values[0],
25
+ n === "range" && (e == null ? void 0 : e.left) || c
26
+ ]
27
+ }
28
+ ),
29
+ n === "range" && /* @__PURE__ */ l.jsxs(
30
+ "div",
31
+ {
32
+ className: "absolute top-4 text-sm text-neutral-900",
33
+ style: { left: `${r.getThumbPercent(1) * 100}%`, transform: "translateX(-50%)" },
34
+ children: [
35
+ r.values[1],
36
+ (e == null ? void 0 : e.right) || c
37
+ ]
38
+ }
39
+ )
40
+ ] }) : null,
41
+ /* @__PURE__ */ l.jsx(
42
+ "div",
43
+ {
44
+ className: P("absolute top-1/2 h-2 w-full -translate-y-1/2 rounded-full bg-primary-100", m)
45
+ }
46
+ ),
47
+ /* @__PURE__ */ l.jsx(
48
+ "div",
49
+ {
50
+ className: P("absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-primary-500", a),
51
+ style: {
52
+ width: `${n === "range" ? r.getThumbPercent(1) * 100 - r.getThumbPercent(0) * 100 : r.getThumbPercent(0) * 100}%`,
53
+ left: n === "range" ? `${r.getThumbPercent(0) * 100}%` : "0%"
54
+ }
55
+ }
56
+ ),
57
+ n === "range" ? /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
58
+ /* @__PURE__ */ l.jsx(
59
+ j,
60
+ {
61
+ index: 0,
62
+ valuePercent: r.getThumbPercent(0),
63
+ value: r.values[0],
64
+ suffix: (e == null ? void 0 : e.left) || c,
65
+ modeTooltip: b,
66
+ positionTooltip: h,
67
+ showTypeValue: t,
68
+ isHiddenValue: v,
69
+ classNameThumb: d
70
+ }
71
+ ),
72
+ /* @__PURE__ */ l.jsx(
73
+ j,
74
+ {
75
+ index: 1,
76
+ valuePercent: r.getThumbPercent(1),
77
+ value: r.values[1],
78
+ suffix: (e == null ? void 0 : e.right) || c,
79
+ modeTooltip: b,
80
+ positionTooltip: h,
81
+ showTypeValue: t,
82
+ isHiddenValue: v,
83
+ classNameThumb: d
84
+ }
85
+ )
86
+ ] }) : /* @__PURE__ */ l.jsx(
87
+ j,
88
+ {
89
+ index: 0,
90
+ valuePercent: r.getThumbPercent(0),
91
+ value: r.values[0],
92
+ suffix: c,
93
+ modeTooltip: b,
94
+ positionTooltip: h,
95
+ showTypeValue: t,
96
+ isHiddenValue: v,
97
+ classNameThumb: d
98
+ }
99
+ )
100
+ ] });
19
101
  export {
20
- n as getHighlightedParts,
21
- i as getSearchFieldDefaultProps
102
+ T as SliderContainerTrack
22
103
  };
@@ -1,21 +1,15 @@
1
- import { j as t } from "./index.es49.js";
2
- import { cn as c } from "./index.es50.js";
3
- const i = ({
4
- label: e,
5
- description: x,
6
- errorMessage: s,
7
- isDisabled: l,
8
- isInvalid: r,
9
- children: n,
10
- renderLabelIcon: m
11
- }) => !e && !x && !n ? null : /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col", children: [
12
- e ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-x-1", children: [
13
- /* @__PURE__ */ t.jsx("p", { className: c("text-sm font-semibold", l ? "text-neutral-600" : "text-neutral-900"), children: e }),
14
- m ? /* @__PURE__ */ t.jsx(t.Fragment, { children: m }) : null
15
- ] }) : n,
16
- x && !s && /* @__PURE__ */ t.jsx("p", { className: c("text-xs", l ? "text-neutral-600" : "text-neutral-800"), children: x }),
17
- r && s && /* @__PURE__ */ t.jsx("p", { className: "text-sm text-red-500", children: s })
18
- ] });
1
+ const o = (e, g, r = 1) => {
2
+ if (g === "range" && Array.isArray(e) && e.length === 2) {
3
+ const [t, f] = e;
4
+ if (f - t < r) {
5
+ if (t > f - r)
6
+ return [f - r, f];
7
+ if (f < t + r)
8
+ return [t, t + r];
9
+ }
10
+ }
11
+ return e;
12
+ };
19
13
  export {
20
- i as ContentSwitch
14
+ o as validateMinDistance
21
15
  };
@@ -1,22 +1,12 @@
1
- import { j as i } from "./index.es49.js";
2
- import { cn as m } from "./index.es50.js";
3
- import { indicatorVariants as n } from "./index.es72.js";
4
- const c = ({ isSelected: r, isDisabled: o, isHovered: f, size: a, dimensions: t }) => /* @__PURE__ */ i.jsx(
5
- "div",
6
- {
7
- className: m(
8
- n({
9
- isSelected: r,
10
- isDisabled: o,
11
- size: a,
12
- isHoveredWhenOff: f && !r
13
- })
14
- ),
15
- style: {
16
- left: r ? `${t.onLeft}px` : `${t.offLeft}px`
17
- }
18
- }
19
- );
1
+ import { j as p } from "./index.es49.js";
2
+ import { useRef as f } from "react";
3
+ import { useTab as u } from "react-aria";
4
+ import { cn as x } from "./index.es50.js";
5
+ import { tabVariants as y } from "./index.es97.js";
6
+ const D = (t) => {
7
+ const { className: i, item: r, orientation: n, state: s, id: a = void 0 } = t, { key: e, rendered: c } = r, m = s.selectedKey === e, d = s.disabledKeys.has(e) || (s == null ? void 0 : s.isDisabled), o = f(null), { tabProps: l } = u({ key: String(e) }, s, o), b = x(y({ isActive: m, orientation: n, isDisabledTab: d }), i);
8
+ return /* @__PURE__ */ p.jsx("div", { ...l, ref: o, className: b, id: a, children: c });
9
+ };
20
10
  export {
21
- c as SwitchIndicator
11
+ D as Tab
22
12
  };
@@ -1,12 +1,12 @@
1
- import { j as p } from "./index.es49.js";
2
- import { useRef as f } from "react";
3
- import { useTab as u } from "react-aria";
4
- import { cn as x } from "./index.es50.js";
5
- import { tabVariants as y } from "./index.es98.js";
6
- const D = (t) => {
7
- const { className: i, item: r, orientation: n, state: s, id: a = void 0 } = t, { key: e, rendered: c } = r, m = s.selectedKey === e, d = s.disabledKeys.has(e) || (s == null ? void 0 : s.isDisabled), o = f(null), { tabProps: l } = u({ key: String(e) }, s, o), b = x(y({ isActive: m, orientation: n, isDisabledTab: d }), i);
8
- return /* @__PURE__ */ p.jsx("div", { ...l, ref: o, className: b, id: a, children: c });
1
+ import { j as m } from "./index.es49.js";
2
+ import { useRef as l } from "react";
3
+ import { useTabPanel as p } from "react-aria";
4
+ import { cn as i } from "./index.es50.js";
5
+ const P = (r) => {
6
+ var t;
7
+ const { className: o, state: s, ...n } = r, e = l(null), { tabPanelProps: a } = p(n, s, e), c = i("", o);
8
+ return /* @__PURE__ */ m.jsx("div", { ...a, ref: e, className: c, children: (t = s.selectedItem) == null ? void 0 : t.props.children });
9
9
  };
10
10
  export {
11
- D as Tab
11
+ P as TabPanel
12
12
  };
@@ -1,12 +1,47 @@
1
- import { j as m } from "./index.es49.js";
2
- import { useRef as l } from "react";
3
- import { useTabPanel as p } from "react-aria";
4
- import { cn as i } from "./index.es50.js";
5
- const P = (r) => {
6
- var t;
7
- const { className: o, state: s, ...n } = r, e = l(null), { tabPanelProps: a } = p(n, s, e), c = i("", o);
8
- return /* @__PURE__ */ m.jsx("div", { ...a, ref: e, className: c, children: (t = s.selectedItem) == null ? void 0 : t.props.children });
9
- };
1
+ import { cva as r } from "class-variance-authority";
2
+ const t = r("flex h-full max-h-12", {
3
+ variants: {
4
+ orientation: {
5
+ horizontal: "flex-col",
6
+ vertical: "flex-row"
7
+ }
8
+ }
9
+ }), a = r(
10
+ "group inline-flex cursor-pointer items-center px-4 py-3 text-sm font-semibold focus-visible:outline-none",
11
+ {
12
+ variants: {
13
+ isActive: {
14
+ true: "bg-primary-50 text-primary-500 ",
15
+ false: "text-primary-300 hover:text-primary-500 hover:border-primary-500"
16
+ },
17
+ isDisabledTab: {
18
+ true: "",
19
+ false: ""
20
+ },
21
+ orientation: {
22
+ horizontal: "border-b-2 border-transparent",
23
+ vertical: "border-r-2 border-transparent"
24
+ }
25
+ },
26
+ compoundVariants: [
27
+ {
28
+ isDisabledTab: !0,
29
+ orientation: "horizontal",
30
+ class: "border-b-2 cursor-not-allowed !border-neutral-600 !text-neutral-600 bg-neutral-200"
31
+ },
32
+ {
33
+ isDisabledTab: !0,
34
+ orientation: "vertical",
35
+ class: "border-r-2 cursor-not-allowed !border-neutral-600 !text-neutral-600 bg-neutral-200"
36
+ },
37
+ { isActive: !0, orientation: "horizontal", class: "border-b-2 border-primary-500" },
38
+ { isActive: !1, orientation: "horizontal", class: "border-b-2 border-primary-300" },
39
+ { isActive: !1, orientation: "vertical", class: "border-r-2 border-primary-200" },
40
+ { isActive: !0, orientation: "vertical", class: "border-r-2 border-primary-500" }
41
+ ]
42
+ }
43
+ );
10
44
  export {
11
- P as TabPanel
45
+ a as tabVariants,
46
+ t as tabsVariants
12
47
  };
@@ -1,47 +1,21 @@
1
- import { cva as r } from "class-variance-authority";
2
- const t = r("flex h-full max-h-12", {
3
- variants: {
4
- orientation: {
5
- horizontal: "flex-col",
6
- vertical: "flex-row"
7
- }
8
- }
9
- }), a = r(
10
- "group inline-flex cursor-pointer items-center px-4 py-3 text-sm font-semibold focus-visible:outline-none",
11
- {
12
- variants: {
13
- isActive: {
14
- true: "bg-primary-50 text-primary-500 ",
15
- false: "text-primary-300 hover:text-primary-500 hover:border-primary-500"
16
- },
17
- isDisabledTab: {
18
- true: "",
19
- false: ""
20
- },
21
- orientation: {
22
- horizontal: "border-b-2 border-transparent",
23
- vertical: "border-r-2 border-transparent"
24
- }
25
- },
26
- compoundVariants: [
27
- {
28
- isDisabledTab: !0,
29
- orientation: "horizontal",
30
- class: "border-b-2 cursor-not-allowed !border-neutral-600 !text-neutral-600 bg-neutral-200"
31
- },
32
- {
33
- isDisabledTab: !0,
34
- orientation: "vertical",
35
- class: "border-r-2 cursor-not-allowed !border-neutral-600 !text-neutral-600 bg-neutral-200"
36
- },
37
- { isActive: !0, orientation: "horizontal", class: "border-b-2 border-primary-500" },
38
- { isActive: !1, orientation: "horizontal", class: "border-b-2 border-primary-300" },
39
- { isActive: !1, orientation: "vertical", class: "border-r-2 border-primary-200" },
40
- { isActive: !0, orientation: "vertical", class: "border-r-2 border-primary-500" }
41
- ]
42
- }
43
- );
1
+ import { j as t } from "./index.es49.js";
2
+ import { cn as c } from "./index.es50.js";
3
+ const i = ({
4
+ label: e,
5
+ description: x,
6
+ errorMessage: s,
7
+ isDisabled: l,
8
+ isInvalid: r,
9
+ children: n,
10
+ renderLabelIcon: m
11
+ }) => !e && !x && !n ? null : /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col", children: [
12
+ e ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-x-1", children: [
13
+ /* @__PURE__ */ t.jsx("p", { className: c("text-sm font-semibold", l ? "text-neutral-600" : "text-neutral-900"), children: e }),
14
+ m ? /* @__PURE__ */ t.jsx(t.Fragment, { children: m }) : null
15
+ ] }) : n,
16
+ x && !s && /* @__PURE__ */ t.jsx("p", { className: c("text-xs", l ? "text-neutral-600" : "text-neutral-800"), children: x }),
17
+ r && s && /* @__PURE__ */ t.jsx("p", { className: "text-sm text-red-500", children: s })
18
+ ] });
44
19
  export {
45
- a as tabVariants,
46
- t as tabsVariants
20
+ i as ContentSwitch
47
21
  };
@@ -1,82 +1,22 @@
1
- import { j as t } from "./index.es49.js";
2
- import { Button as j, SelectValue as w } from "react-aria-components";
3
- import { cn as i } from "./index.es50.js";
4
- import { Badge as v } from "./index.es6.js";
5
- import "./index.es7.js";
6
- import { selectInputButtonVariants as L } from "./index.es58.js";
7
- const E = ({
8
- ref: C,
9
- isOpen: l,
10
- setIsOpen: m,
11
- size: o,
12
- isDisabled: n,
13
- classNameButton: x,
14
- selectionMode: c,
15
- maxLengthTextOption: f,
16
- handleDeleteOptionSelected: p,
17
- placeholder: u,
18
- validationState: h
19
- }) => /* @__PURE__ */ t.jsxs(
20
- j,
1
+ import { j as i } from "./index.es49.js";
2
+ import { cn as m } from "./index.es50.js";
3
+ import { indicatorVariants as n } from "./index.es72.js";
4
+ const c = ({ isSelected: r, isDisabled: o, isHovered: f, size: a, dimensions: t }) => /* @__PURE__ */ i.jsx(
5
+ "div",
21
6
  {
22
- ref: C,
23
- className: ({ isFocusVisible: e, isHovered: a }) => i(
24
- L({
25
- size: o,
26
- isDisabled: n,
27
- isFocusVisible: e || l,
28
- isHovered: a,
29
- validationState: h
30
- }),
31
- x
7
+ className: m(
8
+ n({
9
+ isSelected: r,
10
+ isDisabled: o,
11
+ size: a,
12
+ isHoveredWhenOff: f && !r
13
+ })
32
14
  ),
33
- onPress: () => m(!l),
34
- children: [
35
- /* @__PURE__ */ t.jsx(w, { className: "flex flex-1 items-center gap-1 overflow-hidden", children: ({ selectedItems: e, selectedText: a, isPlaceholder: d }) => /* @__PURE__ */ t.jsx(t.Fragment, { children: c === "multiple" && e && e.length > 0 ? /* @__PURE__ */ t.jsx("div", { className: "flex flex-wrap gap-1", children: e.filter((r) => r != null).map((r) => {
36
- const g = r.label, s = r.value;
37
- return /* @__PURE__ */ t.jsx(
38
- v,
39
- {
40
- label: g,
41
- size: o,
42
- isDisabled: n,
43
- maxLength: f,
44
- onDelete: () => p(s)
45
- },
46
- s
47
- );
48
- }) }) : /* @__PURE__ */ t.jsx(
49
- "span",
50
- {
51
- className: i(
52
- "flex-1 truncate text-left",
53
- d ? "text-neutral-600" : "",
54
- n ? "text-neutral-700" : ""
55
- ),
56
- children: a || u
57
- }
58
- ) }) }),
59
- /* @__PURE__ */ t.jsx(
60
- "svg",
61
- {
62
- className: `${l ? "rotate-180" : ""} transition-transform duration-100`,
63
- width: "20",
64
- height: "10",
65
- viewBox: "0 0 20 10",
66
- fill: "none",
67
- xmlns: "http://www.w3.org/2000/svg",
68
- children: /* @__PURE__ */ t.jsx(
69
- "path",
70
- {
71
- d: "M20 0.838022C20.0006 0.947676 19.9796 1.05638 19.9381 1.15789C19.8967 1.2594 19.8356 1.35173 19.7584 1.42959L12.9512 8.23676C12.5642 8.62472 12.1045 8.93252 11.5984 9.14254C11.0922 9.35256 10.5497 9.46066 10.0017 9.46066C9.45373 9.46066 8.91115 9.35256 8.40502 9.14254C7.8989 8.93252 7.43918 8.62472 7.0522 8.23676L0.245034 1.42959C0.167349 1.3519 0.105725 1.25968 0.0636824 1.15818C0.0216393 1.05667 5.62088e-09 0.947886 0 0.838023C-5.62081e-09 0.728159 0.0216393 0.619372 0.0636824 0.51787C0.105725 0.41637 0.167349 0.324143 0.245034 0.246458C0.32272 0.168773 0.414946 0.107149 0.516447 0.0651056C0.617948 0.0230624 0.726736 0.00142351 0.8366 0.00142351C0.946464 0.00142351 1.05525 0.0230624 1.15675 0.0651055C1.25825 0.107149 1.35048 0.168773 1.42817 0.246458L8.23533 7.05363C8.704 7.52171 9.33931 7.78463 10.0017 7.78463C10.6641 7.78463 11.2994 7.52171 11.7681 7.05363L18.5752 0.246457C18.6527 0.168363 18.7448 0.106378 18.8464 0.0640783C18.9479 0.0217776 19.0568 4.80781e-09 19.1668 0C19.2768 -4.80789e-09 19.3857 0.0217776 19.4872 0.0640782C19.5888 0.106378 19.6809 0.168363 19.7584 0.246457C19.8356 0.324311 19.8967 0.41664 19.9381 0.518154C19.9796 0.619668 20.0006 0.728369 20 0.838022Z",
72
- fill: "#73768C"
73
- }
74
- )
75
- }
76
- )
77
- ]
15
+ style: {
16
+ left: r ? `${t.onLeft}px` : `${t.offLeft}px`
17
+ }
78
18
  }
79
19
  );
80
20
  export {
81
- E as SelectContent
21
+ c as SwitchIndicator
82
22
  };
@@ -38,10 +38,21 @@ declare const meta: {
38
38
  control: "select";
39
39
  options: (string | undefined)[];
40
40
  };
41
+ defaultOpen: {
42
+ control: "boolean";
43
+ };
41
44
  };
42
45
  };
43
46
  export default meta;
44
47
  type Story = StoryObj<typeof meta>;
48
+ /** Menu starts open on first paint; overlay state stays tied to Select (not a separate Popover `isOpen`). */
49
+ export declare const DefaultOpen: Story;
50
+ /** Surface `onOpenChange` for debugging integrations (e.g. table rows). */
51
+ export declare const OnOpenChange: Story;
52
+ /** Fully controlled overlay (`isOpen` + `onOpenChange` on Select via RAC props). */
53
+ export declare const ControlledOpen: Story;
54
+ /** Uncontrolled value; parent only listens to `onChange`. */
55
+ export declare const Uncontrolled: Story;
45
56
  export declare const SingleSelection: Story;
46
57
  export declare const MultipleSelection: Story;
47
58
  export declare const MultipleSelectionWithSearch: Story;
package/dist/style.css CHANGED
@@ -936,6 +936,9 @@ select {
936
936
  .mt-0\.5 {
937
937
  margin-top: 0.125rem;
938
938
  }
939
+ .mt-1 {
940
+ margin-top: 0.25rem;
941
+ }
939
942
  .mt-2 {
940
943
  margin-top: 0.5rem;
941
944
  }
@@ -963,6 +966,9 @@ select {
963
966
  .inline-flex {
964
967
  display: inline-flex;
965
968
  }
969
+ .table {
970
+ display: table;
971
+ }
966
972
  .grid {
967
973
  display: grid;
968
974
  }
@@ -1177,6 +1183,9 @@ select {
1177
1183
  .w-\[300px\] {
1178
1184
  width: 300px;
1179
1185
  }
1186
+ .w-\[320px\] {
1187
+ width: 320px;
1188
+ }
1180
1189
  .w-\[350px\] {
1181
1190
  width: 350px;
1182
1191
  }
@@ -1295,6 +1304,15 @@ select {
1295
1304
  .scroll-m-12 {
1296
1305
  scroll-margin: 3rem;
1297
1306
  }
1307
+ .list-inside {
1308
+ list-style-position: inside;
1309
+ }
1310
+ .list-disc {
1311
+ list-style-type: disc;
1312
+ }
1313
+ .list-none {
1314
+ list-style-type: none;
1315
+ }
1298
1316
  .grid-cols-2 {
1299
1317
  grid-template-columns: repeat(2, minmax(0, 1fr));
1300
1318
  }
@@ -1379,6 +1397,11 @@ select {
1379
1397
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1380
1398
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1381
1399
  }
1400
+ .space-y-2 > :not([hidden]) ~ :not([hidden]) {
1401
+ --tw-space-y-reverse: 0;
1402
+ margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
1403
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
1404
+ }
1382
1405
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
1383
1406
  --tw-space-y-reverse: 0;
1384
1407
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -3009,6 +3032,10 @@ select {
3009
3032
  .group[data-empty] .group-data-\[empty\]\:invisible {
3010
3033
  visibility: hidden;
3011
3034
  }
3035
+ .group[data-pressed] .group-data-\[pressed\]\:rotate-180 {
3036
+ --tw-rotate: 180deg;
3037
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3038
+ }
3012
3039
  @media (min-width: 640px) {
3013
3040
 
3014
3041
  .sm\:block {