@purpur/library 9.4.3 → 9.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 (94) hide show
  1. package/CHANGELOG.json +27 -0
  2. package/CHANGELOG.md +16 -1
  3. package/dist/LICENSE.txt +23 -2
  4. package/dist/avatar-CYnD57o4.js +2 -0
  5. package/dist/avatar-CYnD57o4.js.map +1 -0
  6. package/dist/avatar-CzbDD1MK.mjs +27 -0
  7. package/dist/avatar-CzbDD1MK.mjs.map +1 -0
  8. package/dist/avatar.cjs.js +2 -0
  9. package/dist/avatar.cjs.js.map +1 -0
  10. package/dist/avatar.es.js +5 -0
  11. package/dist/avatar.es.js.map +1 -0
  12. package/dist/color-dot-BEE5rKco.js +2 -0
  13. package/dist/color-dot-BEE5rKco.js.map +1 -0
  14. package/dist/color-dot-Dz9yzVX3.mjs +28 -0
  15. package/dist/color-dot-Dz9yzVX3.mjs.map +1 -0
  16. package/dist/color-dot.cjs.js +1 -1
  17. package/dist/color-dot.es.js +4 -3
  18. package/dist/comparison-table-CZMKl1TX.mjs +292 -0
  19. package/dist/comparison-table-CZMKl1TX.mjs.map +1 -0
  20. package/dist/comparison-table-Nhp5W6Yc.js +2 -0
  21. package/dist/comparison-table-Nhp5W6Yc.js.map +1 -0
  22. package/dist/comparison-table.cjs.js +1 -1
  23. package/dist/comparison-table.es.js +1 -1
  24. package/dist/components/avatar/src/avatar-constants.d.ts +2 -0
  25. package/dist/components/avatar/src/avatar-constants.d.ts.map +1 -0
  26. package/dist/components/avatar/src/avatar.d.ts +26 -0
  27. package/dist/components/avatar/src/avatar.d.ts.map +1 -0
  28. package/dist/components/color-dot/src/color-dot.d.ts +18 -8
  29. package/dist/components/color-dot/src/color-dot.d.ts.map +1 -1
  30. package/dist/components/comparison-table/src/components/OptionCard/option-card.d.ts.map +1 -1
  31. package/dist/components/loading/src/loading-dots.d.ts +19 -0
  32. package/dist/components/loading/src/loading-dots.d.ts.map +1 -0
  33. package/dist/components/loading/src/loading-text.d.ts +21 -0
  34. package/dist/components/loading/src/loading-text.d.ts.map +1 -0
  35. package/dist/components/loading/src/loading.d.ts +10 -0
  36. package/dist/components/loading/src/loading.d.ts.map +1 -0
  37. package/dist/components/message/src/message-bubble.d.ts +22 -0
  38. package/dist/components/message/src/message-bubble.d.ts.map +1 -0
  39. package/dist/components/message/src/message-stamp.d.ts +26 -0
  40. package/dist/components/message/src/message-stamp.d.ts.map +1 -0
  41. package/dist/components/message/src/message-utils.d.ts +3 -0
  42. package/dist/components/message/src/message-utils.d.ts.map +1 -0
  43. package/dist/components/message/src/message.d.ts +42 -0
  44. package/dist/components/message/src/message.d.ts.map +1 -0
  45. package/dist/components-metadata.js +33 -2
  46. package/dist/libraries/library/src/avatar.d.ts +6 -0
  47. package/dist/libraries/library/src/avatar.d.ts.map +1 -0
  48. package/dist/libraries/library/src/library.d.ts +3 -0
  49. package/dist/libraries/library/src/library.d.ts.map +1 -1
  50. package/dist/libraries/library/src/loading.d.ts +6 -0
  51. package/dist/libraries/library/src/loading.d.ts.map +1 -0
  52. package/dist/libraries/library/src/message.d.ts +6 -0
  53. package/dist/libraries/library/src/message.d.ts.map +1 -0
  54. package/dist/library.cjs.js +1 -1
  55. package/dist/library.es.js +632 -625
  56. package/dist/library.es.js.map +1 -1
  57. package/dist/loading-Dwtkjstg.js +2 -0
  58. package/dist/loading-Dwtkjstg.js.map +1 -0
  59. package/dist/loading-r23nxJSz.mjs +107 -0
  60. package/dist/loading-r23nxJSz.mjs.map +1 -0
  61. package/dist/loading.cjs.js +2 -0
  62. package/dist/loading.cjs.js.map +1 -0
  63. package/dist/loading.es.js +5 -0
  64. package/dist/loading.es.js.map +1 -0
  65. package/dist/message-0yTS5pOF.js +3 -0
  66. package/dist/message-0yTS5pOF.js.map +1 -0
  67. package/dist/message-D9CDwcw9.mjs +132 -0
  68. package/dist/message-D9CDwcw9.mjs.map +1 -0
  69. package/dist/message.cjs.js +2 -0
  70. package/dist/message.cjs.js.map +1 -0
  71. package/dist/message.es.js +5 -0
  72. package/dist/message.es.js.map +1 -0
  73. package/dist/{product-card-CoY1KggV.js → product-card-8X-Ld2d_.js} +2 -2
  74. package/dist/{product-card-CoY1KggV.js.map → product-card-8X-Ld2d_.js.map} +1 -1
  75. package/dist/{product-card-C3_N0t-R.mjs → product-card-Bt-F0wKr.mjs} +10 -10
  76. package/dist/{product-card-C3_N0t-R.mjs.map → product-card-Bt-F0wKr.mjs.map} +1 -1
  77. package/dist/product-card.cjs.js +1 -1
  78. package/dist/product-card.es.js +1 -1
  79. package/dist/purpur.css +1 -1
  80. package/package.json +29 -26
  81. package/src/aliases.ts +12 -0
  82. package/src/avatar.ts +6 -0
  83. package/src/entries.js +3 -0
  84. package/src/library.ts +6 -0
  85. package/src/loading.ts +6 -0
  86. package/src/message.ts +6 -0
  87. package/dist/color-dot-6Mxngvce.mjs +0 -34
  88. package/dist/color-dot-6Mxngvce.mjs.map +0 -1
  89. package/dist/color-dot-B9w_ucWb.js +0 -2
  90. package/dist/color-dot-B9w_ucWb.js.map +0 -1
  91. package/dist/comparison-table-C74IAVqz.js +0 -2
  92. package/dist/comparison-table-C74IAVqz.js.map +0 -1
  93. package/dist/comparison-table-DctKxmX9.mjs +0 -267
  94. package/dist/comparison-table-DctKxmX9.mjs.map +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purpur/library",
3
- "version": "9.4.3",
3
+ "version": "9.6.0",
4
4
  "license": "AGPL-3.0-only",
5
5
  "sideEffects": [
6
6
  "*.css",
@@ -106,76 +106,79 @@
106
106
  "vite-plugin-static-copy": "3.1.6",
107
107
  "vite": "7.3.2",
108
108
  "shx": "0.4.0",
109
+ "@purpur/accordion": "8.21.0",
109
110
  "@purpur/action": "8.21.0",
110
- "@purpur/badge": "8.21.0",
111
111
  "@purpur/alert-badge": "8.21.0",
112
- "@purpur/accordion": "8.21.0",
112
+ "@purpur/badge": "8.21.0",
113
113
  "@purpur/autocomplete": "8.21.0",
114
114
  "@purpur/breadcrumbs": "8.21.0",
115
- "@purpur/button": "8.21.0",
116
115
  "@purpur/calendar": "8.21.0",
116
+ "@purpur/button": "8.21.0",
117
+ "@purpur/checkbox": "8.21.0",
117
118
  "@purpur/card": "8.21.0",
119
+ "@purpur/color-dot": "8.21.0",
118
120
  "@purpur/chip-group": "8.21.0",
119
- "@purpur/checkbox": "8.21.0",
120
121
  "@purpur/common-types": "8.21.0",
121
- "@purpur/color-dot": "8.21.0",
122
- "@purpur/countdown": "8.21.0",
123
122
  "@purpur/component-rig": "1.0.0",
124
123
  "@purpur/content-block": "8.21.0",
125
124
  "@purpur/container": "8.21.0",
126
- "@purpur/counter-badge": "8.21.0",
125
+ "@purpur/countdown": "8.21.0",
127
126
  "@purpur/cta-link": "8.21.0",
128
127
  "@purpur/date-field": "8.21.0",
129
- "@purpur/date-picker": "8.21.0",
128
+ "@purpur/counter-badge": "8.21.0",
130
129
  "@purpur/dismissable-chip-group": "8.21.0",
131
130
  "@purpur/drawer": "8.21.0",
132
- "@purpur/field-error-text": "8.21.0",
133
131
  "@purpur/field-helper-text": "8.21.0",
132
+ "@purpur/date-picker": "8.21.0",
133
+ "@purpur/field-error-text": "8.21.0",
134
134
  "@purpur/footer": "8.21.0",
135
+ "@purpur/grid": "8.21.0",
135
136
  "@purpur/heading": "8.21.0",
136
137
  "@purpur/hero-banner": "8.21.0",
137
- "@purpur/grid": "8.21.0",
138
138
  "@purpur/icon": "8.21.0",
139
+ "@purpur/link": "8.21.0",
139
140
  "@purpur/illustrative-icon": "8.21.0",
140
141
  "@purpur/label": "8.21.0",
141
- "@purpur/link": "8.21.0",
142
- "@purpur/logo": "8.21.0",
143
142
  "@purpur/listbox": "8.21.0",
143
+ "@purpur/logo": "8.21.0",
144
144
  "@purpur/notification-banner": "8.21.0",
145
145
  "@purpur/modal": "8.21.0",
146
- "@purpur/notification": "8.21.0",
147
146
  "@purpur/pagination": "8.21.0",
147
+ "@purpur/notification": "8.21.0",
148
148
  "@purpur/paragraph": "8.21.0",
149
149
  "@purpur/password-field": "8.21.0",
150
+ "@purpur/popover": "8.21.0",
151
+ "@purpur/promotion-card": "8.21.0",
150
152
  "@purpur/product-card": "8.21.0",
151
153
  "@purpur/quantity-selector": "8.21.0",
152
- "@purpur/promotion-card": "8.21.0",
153
154
  "@purpur/radio-button-group": "8.21.0",
154
- "@purpur/popover": "8.21.0",
155
- "@purpur/rich-text": "8.21.0",
156
- "@purpur/search-field": "8.21.0",
157
155
  "@purpur/radio-card-group": "8.21.0",
158
- "@purpur/slider": "8.21.0",
156
+ "@purpur/rich-text": "8.21.0",
159
157
  "@purpur/select": "8.21.0",
160
158
  "@purpur/skeleton": "8.21.0",
159
+ "@purpur/search-field": "8.21.0",
160
+ "@purpur/spacer": "8.21.0",
161
+ "@purpur/slider": "8.21.0",
161
162
  "@purpur/spinner": "8.21.0",
162
163
  "@purpur/stepper": "8.21.0",
163
- "@purpur/tabs": "8.21.0",
164
- "@purpur/spacer": "8.21.0",
165
164
  "@purpur/table": "8.21.0",
166
- "@purpur/text-area": "8.21.0",
165
+ "@purpur/tabs": "8.21.0",
167
166
  "@purpur/text-field": "8.21.0",
168
- "@purpur/toggle": "8.21.0",
169
167
  "@purpur/text-spacing": "8.21.0",
168
+ "@purpur/text-area": "8.21.0",
169
+ "@purpur/toggle": "8.21.0",
170
170
  "@purpur/theme": "8.21.0",
171
- "@purpur/tokens": "8.21.0",
172
171
  "@purpur/tooltip": "8.21.0",
173
172
  "@purpur/visually-hidden": "8.21.0",
173
+ "@purpur/tokens": "8.21.0",
174
174
  "@purpur/chat-field": "9.4.2",
175
+ "@purpur/comparison-table": "8.21.0",
175
176
  "@purpur/dropdown": "0.1.0",
176
177
  "@purpur/carousel": "8.21.0",
177
- "@purpur/comparison-table": "8.21.0",
178
- "@purpur/date-range-field": "8.21.0"
178
+ "@purpur/date-range-field": "8.21.0",
179
+ "@purpur/loading": "1.0.0",
180
+ "@purpur/avatar": "1.0.0",
181
+ "@purpur/message": "1.0.0"
179
182
  },
180
183
  "peerDependencies": {
181
184
  "@types/react": "^18 || ^19",
package/src/aliases.ts CHANGED
@@ -21,6 +21,10 @@ export const aliases = [
21
21
  find: /^@purpur\/autocomplete$/,
22
22
  replacement: resolve(__dirname, "../../../components/autocomplete/src/autocomplete.tsx"),
23
23
  },
24
+ {
25
+ find: /^@purpur\/avatar$/,
26
+ replacement: resolve(__dirname, "../../../components/avatar/src/avatar.tsx"),
27
+ },
24
28
  {
25
29
  find: /^@purpur\/badge$/,
26
30
  replacement: resolve(__dirname, "../../../components/badge/src/badge.tsx"),
@@ -160,6 +164,14 @@ export const aliases = [
160
164
  find: /^@purpur\/listbox$/,
161
165
  replacement: resolve(__dirname, "../../../components/listbox/src/listbox.tsx"),
162
166
  },
167
+ {
168
+ find: /^@purpur\/loading$/,
169
+ replacement: resolve(__dirname, "../../../components/loading/src/loading.tsx"),
170
+ },
171
+ {
172
+ find: /^@purpur\/message$/,
173
+ replacement: resolve(__dirname, "../../../components/message/src/message.tsx"),
174
+ },
163
175
  {
164
176
  find: /^@purpur\/modal$/,
165
177
  replacement: resolve(__dirname, "../../../components/modal/src/modal.tsx"),
package/src/avatar.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * ⚠️ WARNING ⚠️
3
+ * This file is automatically generated, do not edit it manually
4
+ */
5
+
6
+ export * from "@purpur/avatar";
package/src/entries.js CHANGED
@@ -7,6 +7,7 @@ export const entries = [
7
7
  "accordion",
8
8
  "alert-badge",
9
9
  "autocomplete",
10
+ "avatar",
10
11
  "badge",
11
12
  "breadcrumbs",
12
13
  "button",
@@ -38,6 +39,8 @@ export const entries = [
38
39
  "label",
39
40
  "link",
40
41
  "listbox",
42
+ "loading",
43
+ "message",
41
44
  "modal",
42
45
  "notification",
43
46
  "notification-banner",
package/src/library.ts CHANGED
@@ -19,6 +19,8 @@ export * from "@purpur/alert-badge";
19
19
 
20
20
  export * from "@purpur/autocomplete";
21
21
 
22
+ export * from "@purpur/avatar";
23
+
22
24
  export * from "@purpur/badge";
23
25
 
24
26
  export * from "@purpur/breadcrumbs";
@@ -81,6 +83,10 @@ export * from "@purpur/link";
81
83
 
82
84
  export * from "@purpur/listbox";
83
85
 
86
+ export * from "@purpur/loading";
87
+
88
+ export * from "@purpur/message";
89
+
84
90
  export * from "@purpur/modal";
85
91
 
86
92
  export * from "@purpur/notification";
package/src/loading.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * ⚠️ WARNING ⚠️
3
+ * This file is automatically generated, do not edit it manually
4
+ */
5
+
6
+ export * from "@purpur/loading";
package/src/message.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * ⚠️ WARNING ⚠️
3
+ * This file is automatically generated, do not edit it manually
4
+ */
5
+
6
+ export * from "@purpur/message";
@@ -1,34 +0,0 @@
1
- import { jsx as l } from "react/jsx-runtime";
2
- import { c as s } from "./bind-CU-R61T-.mjs";
3
- const _ = {
4
- "purpur-color-dot": "_purpur-color-dot_1n98k_1",
5
- "purpur-color-dot--xs": "_purpur-color-dot--xs_1n98k_6",
6
- "purpur-color-dot--sm": "_purpur-color-dot--sm_1n98k_9",
7
- "purpur-color-dot--md": "_purpur-color-dot--md_1n98k_12",
8
- "purpur-color-dot--lg": "_purpur-color-dot--lg_1n98k_15",
9
- "purpur-color-dot--with-border": "_purpur-color-dot--with-border_1n98k_18"
10
- }, n = s.bind(_), o = "purpur-color-dot", e = ["xs", "sm", "md", "lg"], i = ({
11
- color: r,
12
- size: p,
13
- withBorder: t,
14
- className: u,
15
- style: c = {},
16
- ...d
17
- }) => /* @__PURE__ */ l(
18
- "div",
19
- {
20
- ...d,
21
- className: n(u, o, `${o}--${p}`, {
22
- [`${o}--with-border`]: t
23
- }),
24
- style: {
25
- ...c,
26
- backgroundColor: r
27
- }
28
- }
29
- );
30
- export {
31
- e as C,
32
- i as a
33
- };
34
- //# sourceMappingURL=color-dot-6Mxngvce.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"color-dot-6Mxngvce.mjs","sources":["../../../components/color-dot/src/color-dot.tsx"],"sourcesContent":["import React from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./color-dot.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-color-dot\";\n\nexport const COLOR_DOT_SIZE = [\"xs\", \"sm\", \"md\", \"lg\"] as const;\n\nexport type ColorDotSize = (typeof COLOR_DOT_SIZE)[number];\n\nexport type ColorDotProps = Omit<BaseProps, \"children\"> & {\n color: string;\n size: ColorDotSize;\n withBorder?: boolean;\n};\n\nexport const ColorDot = ({\n color,\n size,\n withBorder,\n className,\n style = {},\n ...props\n}: ColorDotProps) => (\n <div\n {...props}\n className={cx(className, rootClassName, `${rootClassName}--${size}`, {\n [`${rootClassName}--with-border`]: withBorder,\n })}\n style={{\n ...style,\n backgroundColor: color,\n }}\n />\n);\n"],"names":["cx","c","styles","rootClassName","COLOR_DOT_SIZE","ColorDot","color","size","withBorder","className","style","props","jsx"],"mappings":";;;;;;;;;GAMMA,IAAKC,EAAE,KAAKC,CAAM,GAClBC,IAAgB,oBAETC,IAAiB,CAAC,MAAM,MAAM,MAAM,IAAI,GAUxCC,IAAW,CAAC;AAAA,EACvB,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWX,EAAGS,GAAWN,GAAe,GAAGA,CAAa,KAAKI,CAAI,IAAI;AAAA,MACnE,CAAC,GAAGJ,CAAa,eAAe,GAAGK;AAAA,IAAA,CACpC;AAAA,IACD,OAAO;AAAA,MACL,GAAGE;AAAA,MACH,iBAAiBJ;AAAA,IAAA;AAAA,EACnB;AACF;"}
@@ -1,2 +0,0 @@
1
- "use strict";const d=require("react/jsx-runtime"),l=require("./bind-DeUYJ6m9.js"),_={"purpur-color-dot":"_purpur-color-dot_1n98k_1","purpur-color-dot--xs":"_purpur-color-dot--xs_1n98k_6","purpur-color-dot--sm":"_purpur-color-dot--sm_1n98k_9","purpur-color-dot--md":"_purpur-color-dot--md_1n98k_12","purpur-color-dot--lg":"_purpur-color-dot--lg_1n98k_15","purpur-color-dot--with-border":"_purpur-color-dot--with-border_1n98k_18"},n=l.c.bind(_),o="purpur-color-dot",e=["xs","sm","md","lg"],i=({color:r,size:t,withBorder:u,className:p,style:c={},...s})=>d.jsx("div",{...s,className:n(p,o,`${o}--${t}`,{[`${o}--with-border`]:u}),style:{...c,backgroundColor:r}});exports.COLOR_DOT_SIZE=e;exports.ColorDot=i;
2
- //# sourceMappingURL=color-dot-B9w_ucWb.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"color-dot-B9w_ucWb.js","sources":["../../../components/color-dot/src/color-dot.tsx"],"sourcesContent":["import React from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./color-dot.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-color-dot\";\n\nexport const COLOR_DOT_SIZE = [\"xs\", \"sm\", \"md\", \"lg\"] as const;\n\nexport type ColorDotSize = (typeof COLOR_DOT_SIZE)[number];\n\nexport type ColorDotProps = Omit<BaseProps, \"children\"> & {\n color: string;\n size: ColorDotSize;\n withBorder?: boolean;\n};\n\nexport const ColorDot = ({\n color,\n size,\n withBorder,\n className,\n style = {},\n ...props\n}: ColorDotProps) => (\n <div\n {...props}\n className={cx(className, rootClassName, `${rootClassName}--${size}`, {\n [`${rootClassName}--with-border`]: withBorder,\n })}\n style={{\n ...style,\n backgroundColor: color,\n }}\n />\n);\n"],"names":["cx","c","styles","rootClassName","COLOR_DOT_SIZE","ColorDot","color","size","withBorder","className","style","props","jsx"],"mappings":"6aAMMA,EAAKC,EAAAA,EAAE,KAAKC,CAAM,EAClBC,EAAgB,mBAETC,EAAiB,CAAC,KAAM,KAAM,KAAM,IAAI,EAUxCC,EAAW,CAAC,CACvB,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAA,EACR,GAAGC,CACL,IACEC,EAAAA,IAAC,MAAA,CACE,GAAGD,EACJ,UAAWX,EAAGS,EAAWN,EAAe,GAAGA,CAAa,KAAKI,CAAI,GAAI,CACnE,CAAC,GAAGJ,CAAa,eAAe,EAAGK,CAAA,CACpC,EACD,MAAO,CACL,GAAGE,EACH,gBAAiBJ,CAAA,CACnB,CACF"}
@@ -1,2 +0,0 @@
1
- "use strict";const r=require("react/jsx-runtime"),p=require("react"),I=require("./bind-DeUYJ6m9.js"),L=require("./checkmark.es-lYntWFA3.js"),F=require("./minus.es-DtXArdKK.js"),A=require("./chevron-down.es-BMjgiS3F.js"),S=require("./paragraph-By4jMjnH.js"),O=require("./badge-CQ0SS_t8.js"),D=require("./button-DmybVApa.js"),B=require("./heading-drD5ugCC.js"),V=require("./arrow-left.es-CCWJyrcQ.js"),H=require("./arrow-right.es-eH-IgGi9.js"),K={"purpur-comparison-table__wrapper":"_purpur-comparison-table__wrapper_1udkj_1","purpur-comparison-table":"_purpur-comparison-table_1udkj_1","purpur-comparison-table--primary":"_purpur-comparison-table--primary_1udkj_11","purpur-comparison-table--secondary":"_purpur-comparison-table--secondary_1udkj_15","purpur-comparison-table__feature-row":"_purpur-comparison-table__feature-row_1udkj_32","purpur-comparison-table__cards":"_purpur-comparison-table__cards_1udkj_32","purpur-comparison-table__separator":"_purpur-comparison-table__separator_1udkj_49"},W={"purpur-comparison-table-cell":"_purpur-comparison-table-cell_117pb_1","purpur-comparison-table-cell--check":"_purpur-comparison-table-cell--check_117pb_16","purpur-comparison-table-cell--minus":"_purpur-comparison-table-cell--minus_117pb_19","purpur-comparison-table-cell__icon":"_purpur-comparison-table-cell__icon_117pb_22"},T=I.c.bind(W),z="purpur-comparison-table-cell",G=({value:s})=>{const t=p.isValidElement(s)||["string","number"].includes(typeof s),o=T(z,[t?"":`${z}--${s?"check":"minus"}`]),$=s?L.a:F.e;return r.jsx("span",{className:T(o),children:t?s:r.jsx($,{size:"xs",className:T(`${z}__icon`)})})},J={"purpur-comparison-table-lead-cell":"_purpur-comparison-table-lead-cell_1vild_1","purpur-comparison-table-lead-cell__description":"_purpur-comparison-table-lead-cell__description_1vild_5","purpur-comparison-table-lead-cell__summary":"_purpur-comparison-table-lead-cell__summary_1vild_40","purpur-comparison-table-lead-cell__summary-title":"_purpur-comparison-table-lead-cell__summary-title_1vild_48","purpur-comparison-table-lead-cell__summary-icon":"_purpur-comparison-table-lead-cell__summary-icon_1vild_51"},w=I.c.bind(J),k="purpur-comparison-table-lead-cell",Q=({title:s,description:t})=>{const i=typeof t=="string",o=w(k);return r.jsxs("details",{className:o,"data-is-expandable":i,children:[r.jsxs("summary",{className:w(`${k}__summary`),tabIndex:i?0:-1,children:[r.jsx(S.Paragraph,{className:w(`${k}__summary-title`),variant:"paragraph-100-bold",children:s}),r.jsx(A.l,{className:w(`${k}__summary-icon`),size:"sm"})]}),t&&r.jsx(S.Paragraph,{variant:"paragraph-100",className:w(`${k}__description`),children:t})]})},U={"purpur-comparison-table-option-card":"_purpur-comparison-table-option-card_15113_1","purpur-comparison-table-option-card--highlighted":"_purpur-comparison-table-option-card--highlighted_15113_11","purpur-comparison-table-option-card__badge":"_purpur-comparison-table-option-card__badge_15113_14","purpur-comparison-table-option-card__main-content":"_purpur-comparison-table-option-card__main-content_15113_19","purpur-comparison-table-option-card__image":"_purpur-comparison-table-option-card__image_15113_25","purpur-comparison-table-option-card__body":"_purpur-comparison-table-option-card__body_15113_31","purpur-comparison-table-option-card__description":"_purpur-comparison-table-option-card__description_15113_36","purpur-comparison-table-option-card__description-text":"_purpur-comparison-table-option-card__description-text_15113_41","purpur-comparison-table-option-card__read-more":"_purpur-comparison-table-option-card__read-more_15113_50","purpur-comparison-table-option-card__read-more-icon":"_purpur-comparison-table-option-card__read-more-icon_15113_54","purpur-comparison-table-option-card__footer":"_purpur-comparison-table-option-card__footer_15113_62","purpur-comparison-table-option-card__price":"_purpur-comparison-table-option-card__price_15113_67","purpur-comparison-table-option-card--show-full-descriptions":"_purpur-comparison-table-option-card--show-full-descriptions_15113_74","purpur-comparison-table-option-card--first-card":"_purpur-comparison-table-option-card--first-card_15113_107"},d=I.c.bind(U),l="purpur-comparison-table-option-card",X=({id:s,cardIndex:t,description:i,variablePriceText:o,price:$,isHighlighted:b,ariaLabels:x,badge:h,actions:j,isFirstCard:v,image:e,title:n,showFullDescriptions:m,toggleShowFullDescriptions:u})=>{const _=d(l,{[`${l}--highlighted`]:b,[`${l}--first-card`]:v,[`${l}--show-full-descriptions`]:m}),c=()=>{if(!i)return null;const g=i.length>50;return r.jsxs("div",{className:d(`${l}__description`),children:[r.jsx(S.Paragraph,{variant:"paragraph-100",className:d(`${l}__description-text`),children:i}),g&&r.jsxs(D.Button,{variant:"text",size:"xs",className:d(`${l}__read-more`),onClick:u,children:[r.jsx("span",{className:d(`${l}__read-more-text`),children:m?x.readLess:x.readMore}),r.jsx(A.l,{className:d(`${l}__read-more-icon`),size:"xs"})]})]})};return r.jsxs("article",{className:_,"data-card-id":s,"data-card-index":t,children:[h&&r.jsx(O.Badge,{...h,className:d(`${l}__badge`)}),r.jsxs("section",{className:d(`${l}__main-content`),children:[r.jsx("img",{src:e.src,alt:e.alt,className:d(`${l}__image`)}),r.jsxs("div",{className:d(`${l}__body`),children:[r.jsx(B.Heading,{tag:"h3",variant:"title-200",className:d(`${l}__title`),children:n}),c()]})]}),r.jsxs("footer",{className:d(`${l}__footer`),children:[r.jsxs("span",{className:d(`${l}__price`),id:s,children:[r.jsx(S.Paragraph,{variant:"paragraph-100",children:o}),r.jsx(S.Paragraph,{variant:"paragraph-100-bold",children:$})]}),j]})]})},Y="_active_ybbe8_44",Z={"purpur-comparison-table-scroll-progress":"_purpur-comparison-table-scroll-progress_ybbe8_1","purpur-comparison-table-scroll-progress__indicators":"_purpur-comparison-table-scroll-progress__indicators_ybbe8_15","purpur-comparison-table-scroll-progress__indicator":"_purpur-comparison-table-scroll-progress__indicator_ybbe8_15",active:Y,"purpur-comparison-table-scroll-progress__buttons":"_purpur-comparison-table-scroll-progress__buttons_ybbe8_48","purpur-comparison-table-scroll-progress__button":"_purpur-comparison-table-scroll-progress__button_ybbe8_48","purpur-comparison-table-scroll-progress__button-icon":"_purpur-comparison-table-scroll-progress__button-icon_ybbe8_57"},f=I.c.bind(Z),y="purpur-comparison-table-scroll-progress",rr=({items:s,container:t,ariaLabels:i})=>{const[o,$]=p.useState(new Set),b=p.useCallback(e=>{const n=window.matchMedia("(prefers-reduced-motion: reduce)").matches;t.current?.querySelector(`[data-card-index="${e}"]`)?.scrollIntoView({behavior:n?"instant":"smooth",block:"nearest"})},[t]),x=p.useCallback(()=>{if(o.size===0)return;const n=Math.min(...Array.from(o))-1;n<0||b(n)},[o,b]),h=p.useCallback(()=>{if(o.size===0)return;const n=Math.max(...Array.from(o))+1;n>=s.length||b(n)},[o,s.length,b]),j=p.useCallback(e=>{(e.key==="ArrowRight"||e.key==="ArrowLeft")&&(e.preventDefault(),e.key==="ArrowRight"?h():e.key==="ArrowLeft"&&x())},[h,x]);p.useEffect(()=>{const e=t.current;if(!e)return;const n=new IntersectionObserver(m=>{$(u=>{const _=new Set(u);return m.forEach(c=>{const a=Number(c.target.getAttribute("data-card-index"));Number.isNaN(a)||(c.isIntersecting?_.add(a):_.delete(a))}),_})},{root:e,threshold:.5});return s.forEach((m,u)=>{const _=e.querySelector(`[data-card-index="${u}"]`);_&&n.observe(_)}),()=>n.disconnect()},[t,s]),p.useEffect(()=>{const e=t.current;if(e)return e.addEventListener("keydown",j),()=>e.removeEventListener("keydown",j)},[t,j]);const v=()=>{if(o.size===0)return;const e=[],n=o.size,m=Math.min(...Array.from(o)),u=s.slice(0,m).length,_=s.slice(m+n).length;let c=0;for(let a=0;a<s.length;a++){if(u+1!==a&&u<=a&&a<s.length-_)continue;let g="active";(a<u||a>s.length-1-_)&&(g=""),e.push(r.jsx("li",{className:f(`${y}__indicator`,g)},`indicator-${c++}`))}return e.length<2?null:e};return r.jsxs("li",{className:f(y),children:[r.jsx("ul",{className:f(`${y}__indicators`),children:v()}),r.jsxs("div",{className:f(`${y}__buttons`),children:[r.jsx(D.Button,{"aria-label":i.previous,variant:"secondary",iconOnly:!0,className:f(`${y}__button`),disabled:o.has(0),onClick:x,children:r.jsx(V.l,{className:f(`${y}__button-icon`),size:"xs"})}),r.jsx(D.Button,{"aria-label":i.next,variant:"secondary",iconOnly:!0,className:f(`${y}__button`),disabled:o.has(s.length-1),onClick:h,children:r.jsx(H.i,{className:f(`${y}__button-icon`),size:"xs"})})]})]})},C=I.c.bind(K),N="purpur-comparison-table",R=({classname:s,features:t,items:i,ariaLabels:o,variant:$="primary"})=>{const b=p.useId(),x=C(s,N,`${N}--${$}`),h=p.useRef(null),[j,v]=p.useState(!1),e=p.useCallback(()=>{v(c=>!c)},[]),n=()=>r.jsxs("li",{className:C(`${N}__cards`),children:[r.jsx("div",{className:C(`${N}__separator`)}),i.map((c,a)=>p.createElement(X,{...c,showFullDescriptions:j,toggleShowFullDescriptions:e,key:a,isFirstCard:a===0,ariaLabels:o,cardIndex:a,id:`${a}-${b}`}))]}),m=()=>Object.entries(t).map(([c,a],g)=>r.jsxs("li",{className:C(`${N}__feature-row`),children:[r.jsx(Q,{title:c,description:a}),i.map((q,E)=>r.jsx(G,{value:q.features[c]??!1},E))]},g)),u=p.useRef(0),_=c=>{const a=c.currentTarget,g=a.querySelector("[data-card-id]")?.clientWidth??0,q=Math.round(a.scrollLeft/g),E=q*g+q,M=c.timeStamp-u.current,P=Math.abs(a.scrollLeft-E);u.current&&M<200||P<10||(u.current=c.timeStamp,a.scrollTo({left:E,behavior:"smooth"}))};return r.jsx("div",{className:C(N+"__wrapper"),children:r.jsxs("ul",{id:N+`-${b}`,ref:h,className:x,onScrollEnd:_,style:{"--initial-columns":i.length+1},children:[r.jsx(rr,{items:i,container:h,ariaLabels:o}),n(),m()]})})};R.displayName="ComparisonTable";exports.ComparisonTable=R;
2
- //# sourceMappingURL=comparison-table-C74IAVqz.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"comparison-table-C74IAVqz.js","sources":["../../../components/comparison-table/src/components/Cell/cell.tsx","../../../components/comparison-table/src/components/LeadCell/lead-cell.tsx","../../../components/comparison-table/src/components/OptionCard/option-card.tsx","../../../components/comparison-table/src/components/ScrollProgress/scroll-progress.tsx","../../../components/comparison-table/src/comparison-table.tsx"],"sourcesContent":["import React, { isValidElement, type ReactNode } from \"react\";\nimport { IconCheckmark } from \"@purpur/icon/checkmark\";\nimport { IconMinus } from \"@purpur/icon/minus\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./cell.module.scss\";\n\ntype CellProps = {\n value: boolean | ReactNode;\n};\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-cell\";\n\nexport const Cell = ({ value }: CellProps) => {\n const isReactNode = isValidElement(value) || [\"string\", \"number\"].includes(typeof value);\n\n const getClassName = () => {\n if (isReactNode) return \"\";\n return `${rootClassName}--${value ? \"check\" : \"minus\"}`;\n };\n\n const classes = cx(rootClassName, [getClassName()]);\n\n const Icon = value ? IconCheckmark : IconMinus;\n\n return (\n <span className={cx(classes)}>\n {isReactNode ? value : <Icon size=\"xs\" className={cx(`${rootClassName}__icon`)} />}\n </span>\n );\n};\n","import React, { type ReactNode } from \"react\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./lead-cell.module.scss\";\n\ntype LeadCellProps = {\n title: string;\n description?: ReactNode;\n};\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-lead-cell\";\n\nexport const LeadCell = ({ title, description }: LeadCellProps) => {\n const isExpandable = typeof description === \"string\";\n const classes = cx(rootClassName);\n\n return (\n <details className={classes} data-is-expandable={isExpandable}>\n <summary className={cx(`${rootClassName}__summary`)} tabIndex={isExpandable ? 0 : -1}>\n <Paragraph className={cx(`${rootClassName}__summary-title`)} variant=\"paragraph-100-bold\">\n {title}\n </Paragraph>\n <IconChevronDown className={cx(`${rootClassName}__summary-icon`)} size=\"sm\" />\n </summary>\n {description && (\n <Paragraph variant=\"paragraph-100\" className={cx(`${rootClassName}__description`)}>\n {description}\n </Paragraph>\n )}\n </details>\n );\n};\n","import React, { type ReactNode } from \"react\";\nimport { Badge, type BadgeProps } from \"@purpur/badge\";\nimport { Button } from \"@purpur/button\";\nimport { Heading } from \"@purpur/heading\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport c from \"classnames/bind\";\n\nimport { type ComparisonTableProps } from \"../../comparison-table\";\nimport styles from \"./option-card.module.scss\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-option-card\";\n\nexport type OptionCardProps = {\n image: {\n src: string;\n alt: string;\n };\n\n title: string;\n description: string;\n variablePriceText: string;\n price: string;\n\n actions: ReactNode;\n\n badge?: BadgeProps;\n isHighlighted?: boolean;\n};\n\ntype OptionCardPropsAdditions = {\n id: string;\n cardIndex: number;\n isFirstCard: boolean;\n ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n\n showFullDescriptions: boolean;\n toggleShowFullDescriptions: () => void;\n};\n\nexport const OptionCard = ({\n id,\n cardIndex,\n description,\n variablePriceText,\n price,\n isHighlighted,\n ariaLabels,\n badge,\n actions,\n isFirstCard,\n image,\n title,\n showFullDescriptions,\n toggleShowFullDescriptions,\n}: OptionCardProps & OptionCardPropsAdditions) => {\n const classes = cx(rootClassName, {\n [`${rootClassName}--highlighted`]: isHighlighted,\n [`${rootClassName}--first-card`]: isFirstCard,\n [`${rootClassName}--show-full-descriptions`]: showFullDescriptions,\n });\n\n const renderDescription = () => {\n if (!description) return null;\n\n const longThreshold = 50;\n const longDescription = description.length > longThreshold;\n\n return (\n <div className={cx(`${rootClassName}__description`)}>\n <Paragraph variant=\"paragraph-100\" className={cx(`${rootClassName}__description-text`)}>\n {description}\n </Paragraph>\n {longDescription && (\n <Button\n variant=\"text\"\n size=\"xs\"\n className={cx(`${rootClassName}__read-more`)}\n onClick={toggleShowFullDescriptions}\n >\n <span className={cx(`${rootClassName}__read-more-text`)}>\n {showFullDescriptions ? ariaLabels.readLess : ariaLabels.readMore}\n </span>\n <IconChevronDown className={cx(`${rootClassName}__read-more-icon`)} size=\"xs\" />\n </Button>\n )}\n </div>\n );\n };\n\n return (\n <article className={classes} data-card-id={id} data-card-index={cardIndex}>\n {badge && <Badge {...badge} className={cx(`${rootClassName}__badge`)} />}\n\n <section className={cx(`${rootClassName}__main-content`)}>\n <img src={image.src} alt={image.alt} className={cx(`${rootClassName}__image`)} />\n\n <div className={cx(`${rootClassName}__body`)}>\n <Heading tag=\"h3\" variant=\"title-200\" className={cx(`${rootClassName}__title`)}>\n {title}\n </Heading>\n {renderDescription()}\n </div>\n </section>\n\n <footer className={cx(`${rootClassName}__footer`)}>\n <span className={cx(`${rootClassName}__price`)} id={id}>\n <Paragraph variant=\"paragraph-100\">{variablePriceText}</Paragraph>\n <Paragraph variant=\"paragraph-100-bold\">{price}</Paragraph>\n </span>\n\n {actions}\n </footer>\n </article>\n );\n};\n","import React, { type RefObject, useCallback, useEffect, useState } from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconArrowLeft } from \"@purpur/icon/arrow-left\";\nimport { IconArrowRight } from \"@purpur/icon/arrow-right\";\nimport c from \"classnames/bind\";\n\nimport { type ComparisonTableProps, type Features, type Item } from \"../../comparison-table\";\nimport styles from \"./scroll-progress.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-comparison-table-scroll-progress\";\n\ntype ScrollProgressProps = {\n items: Array<Item<Features>>;\n container: RefObject<HTMLUListElement | null>;\n ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n};\n\nexport const ScrollProgress = ({ items, container, ariaLabels }: ScrollProgressProps) => {\n const [inViewSet, setInViewSet] = useState<Set<number>>(new Set());\n\n const scrollToCard = useCallback(\n (index: number) => {\n const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n const card = container.current?.querySelector(\n `[data-card-index=\"${index}\"]`\n ) as HTMLElement | null;\n card?.scrollIntoView({ behavior: reduceMotion ? \"instant\" : \"smooth\", block: \"nearest\" });\n },\n [container]\n );\n\n const previousCard = useCallback(() => {\n if (inViewSet.size === 0) return;\n\n const leftmostactiveIndex = Math.min(...Array.from(inViewSet));\n const targetIndex = leftmostactiveIndex - 1;\n\n if (targetIndex < 0) return;\n\n scrollToCard(targetIndex);\n }, [inViewSet, scrollToCard]);\n\n const nextCard = useCallback(() => {\n if (inViewSet.size === 0) return;\n\n const rightmostactiveIndex = Math.max(...Array.from(inViewSet));\n const targetIndex = rightmostactiveIndex + 1;\n\n if (targetIndex >= items.length) return;\n\n scrollToCard(targetIndex);\n }, [inViewSet, items.length, scrollToCard]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n e.preventDefault();\n\n if (e.key === \"ArrowRight\") nextCard();\n else if (e.key === \"ArrowLeft\") previousCard();\n }\n },\n [nextCard, previousCard]\n );\n\n useEffect(() => {\n const root = container.current;\n\n if (!root) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n setInViewSet((prev) => {\n const next = new Set(prev);\n\n entries.forEach((entry) => {\n const index = Number(entry.target.getAttribute(\"data-card-index\"));\n\n if (Number.isNaN(index)) return;\n\n if (entry.isIntersecting) {\n next.add(index);\n } else {\n next.delete(index);\n }\n });\n return next;\n });\n },\n { root, threshold: 0.5 }\n );\n\n items.forEach((_, index) => {\n const card = root.querySelector(`[data-card-index=\"${index}\"]`) as HTMLElement | null;\n\n if (card) observer.observe(card);\n });\n\n return () => observer.disconnect();\n }, [container, items]);\n\n useEffect(() => {\n const root = container.current;\n\n if (!root) return;\n\n root.addEventListener(\"keydown\", handleKeyDown);\n\n return () => root.removeEventListener(\"keydown\", handleKeyDown);\n }, [container, handleKeyDown]);\n\n const renderIndicators = () => {\n if (inViewSet.size === 0) return;\n\n const indicators = [];\n const viewCapacity = inViewSet.size;\n const leftmostActiveIndex = Math.min(...Array.from(inViewSet));\n const head = items.slice(0, leftmostActiveIndex).length;\n const trail = items.slice(leftmostActiveIndex + viewCapacity).length;\n\n let key = 0;\n\n for (let i = 0; i < items.length; i++) {\n if (head + 1 !== i && head <= i && i < items.length - trail) continue;\n\n let status = \"active\";\n\n if (i < head || i > items.length - 1 - trail) status = \"\";\n\n indicators.push(\n <li key={`indicator-${key++}`} className={cx(`${rootClassName}__indicator`, status)} />\n );\n }\n\n if (indicators.length < 2) return null;\n\n return indicators;\n };\n\n return (\n <li className={cx(rootClassName)}>\n <ul className={cx(`${rootClassName}__indicators`)}>{renderIndicators()}</ul>\n\n <div className={cx(`${rootClassName}__buttons`)}>\n <Button\n aria-label={ariaLabels.previous}\n variant=\"secondary\"\n iconOnly\n className={cx(`${rootClassName}__button`)}\n disabled={inViewSet.has(0)}\n onClick={previousCard}\n >\n <IconArrowLeft className={cx(`${rootClassName}__button-icon`)} size=\"xs\" />\n </Button>\n <Button\n aria-label={ariaLabels.next}\n variant=\"secondary\"\n iconOnly\n className={cx(`${rootClassName}__button`)}\n disabled={inViewSet.has(items.length - 1)}\n onClick={nextCard}\n >\n <IconArrowRight className={cx(`${rootClassName}__button-icon`)} size=\"xs\" />\n </Button>\n </div>\n </li>\n );\n};\n","import React, { type ReactNode, type UIEvent, useCallback, useId, useRef, useState } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./comparison-table.module.scss\";\nimport { Cell } from \"./components/Cell/cell\";\nimport { LeadCell } from \"./components/LeadCell/lead-cell\";\nimport { OptionCard, type OptionCardProps } from \"./components/OptionCard/option-card\";\nimport { ScrollProgress } from \"./components/ScrollProgress/scroll-progress\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table\";\n\nexport type Features = Record<string, ReactNode | null>;\n\nexport type Item<TFeatures extends Features = Features> = OptionCardProps & {\n features: Partial<Record<keyof TFeatures, ReactNode | string | boolean>>;\n};\n\nexport type ComparisonTableProps<TFeatures extends Features = Features> = {\n /** List of features that can be supported by the comparison table\n *\n * string = description of the feature that can be viewed by expanding cell.\n *\n * null = no description\n *\n {\n [featureName]: ReactNode | null\n }\n */\n features: TFeatures;\n\n /** List of items to be displayed in the comparison table\n *\n *\n Item = {\n image: {\n src: string;\n alt: string;\n };\n\n title: string;\n description: string;\n variablePriceText: string;\n price: string;\n actions: ReactNode;\n badge?: BadgeProps;\n isHighlighted?: boolean;\n\n features: {\n [featureName in keyof Features]?: string | boolean;\n };\n }\n */\n items: Array<Item<TFeatures>>;\n\n /** Aria labels for the comparison table and various components\n *\n {\n previous: string;\n next: string;\n readMore: string;\n readLess: string;\n }\n */\n ariaLabels: {\n previous: string;\n next: string;\n readMore: string;\n readLess: string;\n };\n variant?: \"primary\" | \"secondary\";\n classname?: string;\n};\n\nexport const ComparisonTable = <TFeatures extends Features>({\n classname,\n features,\n items,\n ariaLabels,\n variant = \"primary\",\n}: ComparisonTableProps<TFeatures>) => {\n const id = useId();\n const classes = cx(classname, rootClassName, `${rootClassName}--${variant}`);\n const containerRef = useRef<HTMLUListElement>(null);\n const [showFullDescriptions, setShowFullDescriptions] = useState(false);\n\n const handleToggleShowFullDescriptions = useCallback(() => {\n setShowFullDescriptions((prev) => !prev);\n }, []);\n\n const renderCards = () => {\n return (\n <li className={cx(`${rootClassName}__cards`)}>\n <div className={cx(`${rootClassName}__separator`)} />\n {items.map((item, index) => (\n <OptionCard\n {...item}\n showFullDescriptions={showFullDescriptions}\n toggleShowFullDescriptions={handleToggleShowFullDescriptions}\n key={index}\n isFirstCard={index === 0}\n ariaLabels={ariaLabels}\n cardIndex={index}\n id={`${index}-${id}`}\n />\n ))}\n </li>\n );\n };\n\n const renderFeatures = () => {\n return Object.entries(features).map(([title, description], i) => (\n <li key={i} className={cx(`${rootClassName}__feature-row`)}>\n <LeadCell title={title} description={description} />\n {items.map((item, index) => (\n <Cell key={index} value={item.features[title as keyof TFeatures] ?? false} />\n ))}\n </li>\n ));\n };\n\n const deltaTime = useRef(0);\n\n const handleScrollEnd = (e: UIEvent<HTMLUListElement>) => {\n /**\n * This function makes sure that the scroll position is never stuck between two cards, since scroll snap is not fully reliable.\n */\n\n const target = e.currentTarget;\n const cardwidth = target.querySelector(\"[data-card-id]\")?.clientWidth ?? 0;\n const cardPos = Math.round(target.scrollLeft / cardwidth);\n const scrollTarget = cardPos * cardwidth + cardPos;\n const timeDiff = e.timeStamp - deltaTime.current;\n const scrollDiff = Math.abs(target.scrollLeft - scrollTarget);\n\n if (deltaTime.current && timeDiff < 200) return;\n if (scrollDiff < 10) return;\n\n deltaTime.current = e.timeStamp;\n\n target.scrollTo({ left: scrollTarget, behavior: \"smooth\" });\n };\n\n return (\n <div className={cx(rootClassName + \"__wrapper\")}>\n <ul\n id={rootClassName + `-${id}`}\n ref={containerRef}\n className={classes}\n // eslint-disable-next-line react/no-unknown-property\n onScrollEnd={handleScrollEnd}\n style={{\n // @ts-expect-error | Typescript doesn't recognize the CSS variable, but it works as intended\n [\"--initial-columns\"]: items.length + 1,\n }}\n >\n <ScrollProgress items={items} container={containerRef} ariaLabels={ariaLabels} />\n {renderCards()}\n {renderFeatures()}\n </ul>\n </div>\n );\n};\n\nComparisonTable.displayName = \"ComparisonTable\";\n"],"names":["cx","c","styles","rootClassName","Cell","value","isReactNode","isValidElement","classes","Icon","IconCheckmark","IconMinus","jsx","LeadCell","title","description","isExpandable","jsxs","Paragraph","IconChevronDown","OptionCard","id","cardIndex","variablePriceText","price","isHighlighted","ariaLabels","badge","actions","isFirstCard","image","showFullDescriptions","toggleShowFullDescriptions","renderDescription","longDescription","Button","Badge","Heading","ScrollProgress","items","container","inViewSet","setInViewSet","useState","scrollToCard","useCallback","index","reduceMotion","previousCard","targetIndex","nextCard","handleKeyDown","useEffect","root","observer","entries","prev","next","entry","_","card","renderIndicators","indicators","viewCapacity","leftmostActiveIndex","head","trail","key","i","status","IconArrowLeft","IconArrowRight","ComparisonTable","classname","features","variant","useId","containerRef","useRef","setShowFullDescriptions","handleToggleShowFullDescriptions","renderCards","item","createElement","renderFeatures","deltaTime","handleScrollEnd","e","target","cardwidth","cardPos","scrollTarget","timeDiff","scrollDiff"],"mappings":"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"}
@@ -1,267 +0,0 @@
1
- import { jsx as e, jsxs as p } from "react/jsx-runtime";
2
- import { isValidElement as q, useState as O, useCallback as S, useEffect as F, useId as B, useRef as L, createElement as H } from "react";
3
- import { c as z } from "./bind-CU-R61T-.mjs";
4
- import { a as K } from "./checkmark.es-DdgIZN2R.mjs";
5
- import { e as W } from "./minus.es-BK9qA9iJ.mjs";
6
- import { l as R } from "./chevron-down.es-PCIIj6oG.mjs";
7
- import { P as j } from "./paragraph-DSxXmX_0.mjs";
8
- import { a as G } from "./badge-DalD-yqG.mjs";
9
- import { b as M } from "./button-4-yWOgtD.mjs";
10
- import { H as J } from "./heading-xwBuT_-9.mjs";
11
- import { l as Q } from "./arrow-left.es-DU-PX-Il.mjs";
12
- import { i as U } from "./arrow-right.es-C7SkjAB6.mjs";
13
- const X = {
14
- "purpur-comparison-table__wrapper": "_purpur-comparison-table__wrapper_1udkj_1",
15
- "purpur-comparison-table": "_purpur-comparison-table_1udkj_1",
16
- "purpur-comparison-table--primary": "_purpur-comparison-table--primary_1udkj_11",
17
- "purpur-comparison-table--secondary": "_purpur-comparison-table--secondary_1udkj_15",
18
- "purpur-comparison-table__feature-row": "_purpur-comparison-table__feature-row_1udkj_32",
19
- "purpur-comparison-table__cards": "_purpur-comparison-table__cards_1udkj_32",
20
- "purpur-comparison-table__separator": "_purpur-comparison-table__separator_1udkj_49"
21
- }, Y = {
22
- "purpur-comparison-table-cell": "_purpur-comparison-table-cell_117pb_1",
23
- "purpur-comparison-table-cell--check": "_purpur-comparison-table-cell--check_117pb_16",
24
- "purpur-comparison-table-cell--minus": "_purpur-comparison-table-cell--minus_117pb_19",
25
- "purpur-comparison-table-cell__icon": "_purpur-comparison-table-cell__icon_117pb_22"
26
- }, A = z.bind(Y), D = "purpur-comparison-table-cell", Z = ({ value: a }) => {
27
- const s = q(a) || ["string", "number"].includes(typeof a), t = A(D, [s ? "" : `${D}--${a ? "check" : "minus"}`]), N = a ? K : W;
28
- return /* @__PURE__ */ e("span", { className: A(t), children: s ? a : /* @__PURE__ */ e(N, { size: "xs", className: A(`${D}__icon`) }) });
29
- }, rr = {
30
- "purpur-comparison-table-lead-cell": "_purpur-comparison-table-lead-cell_1vild_1",
31
- "purpur-comparison-table-lead-cell__description": "_purpur-comparison-table-lead-cell__description_1vild_5",
32
- "purpur-comparison-table-lead-cell__summary": "_purpur-comparison-table-lead-cell__summary_1vild_40",
33
- "purpur-comparison-table-lead-cell__summary-title": "_purpur-comparison-table-lead-cell__summary-title_1vild_48",
34
- "purpur-comparison-table-lead-cell__summary-icon": "_purpur-comparison-table-lead-cell__summary-icon_1vild_51"
35
- }, k = z.bind(rr), C = "purpur-comparison-table-lead-cell", or = ({ title: a, description: s }) => {
36
- const i = typeof s == "string", t = k(C);
37
- return /* @__PURE__ */ p("details", { className: t, "data-is-expandable": i, children: [
38
- /* @__PURE__ */ p("summary", { className: k(`${C}__summary`), tabIndex: i ? 0 : -1, children: [
39
- /* @__PURE__ */ e(j, { className: k(`${C}__summary-title`), variant: "paragraph-100-bold", children: a }),
40
- /* @__PURE__ */ e(R, { className: k(`${C}__summary-icon`), size: "sm" })
41
- ] }),
42
- s && /* @__PURE__ */ e(j, { variant: "paragraph-100", className: k(`${C}__description`), children: s })
43
- ] });
44
- }, er = {
45
- "purpur-comparison-table-option-card": "_purpur-comparison-table-option-card_15113_1",
46
- "purpur-comparison-table-option-card--highlighted": "_purpur-comparison-table-option-card--highlighted_15113_11",
47
- "purpur-comparison-table-option-card__badge": "_purpur-comparison-table-option-card__badge_15113_14",
48
- "purpur-comparison-table-option-card__main-content": "_purpur-comparison-table-option-card__main-content_15113_19",
49
- "purpur-comparison-table-option-card__image": "_purpur-comparison-table-option-card__image_15113_25",
50
- "purpur-comparison-table-option-card__body": "_purpur-comparison-table-option-card__body_15113_31",
51
- "purpur-comparison-table-option-card__description": "_purpur-comparison-table-option-card__description_15113_36",
52
- "purpur-comparison-table-option-card__description-text": "_purpur-comparison-table-option-card__description-text_15113_41",
53
- "purpur-comparison-table-option-card__read-more": "_purpur-comparison-table-option-card__read-more_15113_50",
54
- "purpur-comparison-table-option-card__read-more-icon": "_purpur-comparison-table-option-card__read-more-icon_15113_54",
55
- "purpur-comparison-table-option-card__footer": "_purpur-comparison-table-option-card__footer_15113_62",
56
- "purpur-comparison-table-option-card__price": "_purpur-comparison-table-option-card__price_15113_67",
57
- "purpur-comparison-table-option-card--show-full-descriptions": "_purpur-comparison-table-option-card--show-full-descriptions_15113_74",
58
- "purpur-comparison-table-option-card--first-card": "_purpur-comparison-table-option-card--first-card_15113_107"
59
- }, d = z.bind(er), l = "purpur-comparison-table-option-card", ar = ({
60
- id: a,
61
- cardIndex: s,
62
- description: i,
63
- variablePriceText: t,
64
- price: N,
65
- isHighlighted: b,
66
- ariaLabels: g,
67
- badge: h,
68
- actions: v,
69
- isFirstCard: w,
70
- image: r,
71
- title: n,
72
- showFullDescriptions: m,
73
- toggleShowFullDescriptions: _
74
- }) => {
75
- const u = d(l, {
76
- [`${l}--highlighted`]: b,
77
- [`${l}--first-card`]: w,
78
- [`${l}--show-full-descriptions`]: m
79
- }), c = () => {
80
- if (!i) return null;
81
- const f = i.length > 50;
82
- return /* @__PURE__ */ p("div", { className: d(`${l}__description`), children: [
83
- /* @__PURE__ */ e(j, { variant: "paragraph-100", className: d(`${l}__description-text`), children: i }),
84
- f && /* @__PURE__ */ p(
85
- M,
86
- {
87
- variant: "text",
88
- size: "xs",
89
- className: d(`${l}__read-more`),
90
- onClick: _,
91
- children: [
92
- /* @__PURE__ */ e("span", { className: d(`${l}__read-more-text`), children: m ? g.readLess : g.readMore }),
93
- /* @__PURE__ */ e(R, { className: d(`${l}__read-more-icon`), size: "xs" })
94
- ]
95
- }
96
- )
97
- ] });
98
- };
99
- return /* @__PURE__ */ p("article", { className: u, "data-card-id": a, "data-card-index": s, children: [
100
- h && /* @__PURE__ */ e(G, { ...h, className: d(`${l}__badge`) }),
101
- /* @__PURE__ */ p("section", { className: d(`${l}__main-content`), children: [
102
- /* @__PURE__ */ e("img", { src: r.src, alt: r.alt, className: d(`${l}__image`) }),
103
- /* @__PURE__ */ p("div", { className: d(`${l}__body`), children: [
104
- /* @__PURE__ */ e(J, { tag: "h3", variant: "title-200", className: d(`${l}__title`), children: n }),
105
- c()
106
- ] })
107
- ] }),
108
- /* @__PURE__ */ p("footer", { className: d(`${l}__footer`), children: [
109
- /* @__PURE__ */ p("span", { className: d(`${l}__price`), id: a, children: [
110
- /* @__PURE__ */ e(j, { variant: "paragraph-100", children: t }),
111
- /* @__PURE__ */ e(j, { variant: "paragraph-100-bold", children: N })
112
- ] }),
113
- v
114
- ] })
115
- ] });
116
- }, tr = "_active_ybbe8_44", sr = {
117
- "purpur-comparison-table-scroll-progress": "_purpur-comparison-table-scroll-progress_ybbe8_1",
118
- "purpur-comparison-table-scroll-progress__indicators": "_purpur-comparison-table-scroll-progress__indicators_ybbe8_15",
119
- "purpur-comparison-table-scroll-progress__indicator": "_purpur-comparison-table-scroll-progress__indicator_ybbe8_15",
120
- active: tr,
121
- "purpur-comparison-table-scroll-progress__buttons": "_purpur-comparison-table-scroll-progress__buttons_ybbe8_48",
122
- "purpur-comparison-table-scroll-progress__button": "_purpur-comparison-table-scroll-progress__button_ybbe8_48",
123
- "purpur-comparison-table-scroll-progress__button-icon": "_purpur-comparison-table-scroll-progress__button-icon_ybbe8_57"
124
- }, y = z.bind(sr), $ = "purpur-comparison-table-scroll-progress", cr = ({ items: a, container: s, ariaLabels: i }) => {
125
- const [t, N] = O(/* @__PURE__ */ new Set()), b = S(
126
- (r) => {
127
- const n = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
128
- s.current?.querySelector(
129
- `[data-card-index="${r}"]`
130
- )?.scrollIntoView({ behavior: n ? "instant" : "smooth", block: "nearest" });
131
- },
132
- [s]
133
- ), g = S(() => {
134
- if (t.size === 0) return;
135
- const n = Math.min(...Array.from(t)) - 1;
136
- n < 0 || b(n);
137
- }, [t, b]), h = S(() => {
138
- if (t.size === 0) return;
139
- const n = Math.max(...Array.from(t)) + 1;
140
- n >= a.length || b(n);
141
- }, [t, a.length, b]), v = S(
142
- (r) => {
143
- (r.key === "ArrowRight" || r.key === "ArrowLeft") && (r.preventDefault(), r.key === "ArrowRight" ? h() : r.key === "ArrowLeft" && g());
144
- },
145
- [h, g]
146
- );
147
- F(() => {
148
- const r = s.current;
149
- if (!r) return;
150
- const n = new IntersectionObserver(
151
- (m) => {
152
- N((_) => {
153
- const u = new Set(_);
154
- return m.forEach((c) => {
155
- const o = Number(c.target.getAttribute("data-card-index"));
156
- Number.isNaN(o) || (c.isIntersecting ? u.add(o) : u.delete(o));
157
- }), u;
158
- });
159
- },
160
- { root: r, threshold: 0.5 }
161
- );
162
- return a.forEach((m, _) => {
163
- const u = r.querySelector(`[data-card-index="${_}"]`);
164
- u && n.observe(u);
165
- }), () => n.disconnect();
166
- }, [s, a]), F(() => {
167
- const r = s.current;
168
- if (r)
169
- return r.addEventListener("keydown", v), () => r.removeEventListener("keydown", v);
170
- }, [s, v]);
171
- const w = () => {
172
- if (t.size === 0) return;
173
- const r = [], n = t.size, m = Math.min(...Array.from(t)), _ = a.slice(0, m).length, u = a.slice(m + n).length;
174
- let c = 0;
175
- for (let o = 0; o < a.length; o++) {
176
- if (_ + 1 !== o && _ <= o && o < a.length - u) continue;
177
- let f = "active";
178
- (o < _ || o > a.length - 1 - u) && (f = ""), r.push(
179
- /* @__PURE__ */ e("li", { className: y(`${$}__indicator`, f) }, `indicator-${c++}`)
180
- );
181
- }
182
- return r.length < 2 ? null : r;
183
- };
184
- return /* @__PURE__ */ p("li", { className: y($), children: [
185
- /* @__PURE__ */ e("ul", { className: y(`${$}__indicators`), children: w() }),
186
- /* @__PURE__ */ p("div", { className: y(`${$}__buttons`), children: [
187
- /* @__PURE__ */ e(
188
- M,
189
- {
190
- "aria-label": i.previous,
191
- variant: "secondary",
192
- iconOnly: !0,
193
- className: y(`${$}__button`),
194
- disabled: t.has(0),
195
- onClick: g,
196
- children: /* @__PURE__ */ e(Q, { className: y(`${$}__button-icon`), size: "xs" })
197
- }
198
- ),
199
- /* @__PURE__ */ e(
200
- M,
201
- {
202
- "aria-label": i.next,
203
- variant: "secondary",
204
- iconOnly: !0,
205
- className: y(`${$}__button`),
206
- disabled: t.has(a.length - 1),
207
- onClick: h,
208
- children: /* @__PURE__ */ e(U, { className: y(`${$}__button-icon`), size: "xs" })
209
- }
210
- )
211
- ] })
212
- ] });
213
- }, I = z.bind(X), x = "purpur-comparison-table", nr = ({
214
- classname: a,
215
- features: s,
216
- items: i,
217
- ariaLabels: t,
218
- variant: N = "primary"
219
- }) => {
220
- const b = B(), g = I(a, x, `${x}--${N}`), h = L(null), [v, w] = O(!1), r = S(() => {
221
- w((c) => !c);
222
- }, []), n = () => /* @__PURE__ */ p("li", { className: I(`${x}__cards`), children: [
223
- /* @__PURE__ */ e("div", { className: I(`${x}__separator`) }),
224
- i.map((c, o) => /* @__PURE__ */ H(
225
- ar,
226
- {
227
- ...c,
228
- showFullDescriptions: v,
229
- toggleShowFullDescriptions: r,
230
- key: o,
231
- isFirstCard: o === 0,
232
- ariaLabels: t,
233
- cardIndex: o,
234
- id: `${o}-${b}`
235
- }
236
- ))
237
- ] }), m = () => Object.entries(s).map(([c, o], f) => /* @__PURE__ */ p("li", { className: I(`${x}__feature-row`), children: [
238
- /* @__PURE__ */ e(or, { title: c, description: o }),
239
- i.map((E, T) => /* @__PURE__ */ e(Z, { value: E.features[c] ?? !1 }, T))
240
- ] }, f)), _ = L(0), u = (c) => {
241
- const o = c.currentTarget, f = o.querySelector("[data-card-id]")?.clientWidth ?? 0, E = Math.round(o.scrollLeft / f), T = E * f + E, P = c.timeStamp - _.current, V = Math.abs(o.scrollLeft - T);
242
- _.current && P < 200 || V < 10 || (_.current = c.timeStamp, o.scrollTo({ left: T, behavior: "smooth" }));
243
- };
244
- return /* @__PURE__ */ e("div", { className: I(x + "__wrapper"), children: /* @__PURE__ */ p(
245
- "ul",
246
- {
247
- id: x + `-${b}`,
248
- ref: h,
249
- className: g,
250
- onScrollEnd: u,
251
- style: {
252
- // @ts-expect-error | Typescript doesn't recognize the CSS variable, but it works as intended
253
- "--initial-columns": i.length + 1
254
- },
255
- children: [
256
- /* @__PURE__ */ e(cr, { items: i, container: h, ariaLabels: t }),
257
- n(),
258
- m()
259
- ]
260
- }
261
- ) });
262
- };
263
- nr.displayName = "ComparisonTable";
264
- export {
265
- nr as C
266
- };
267
- //# sourceMappingURL=comparison-table-DctKxmX9.mjs.map