@lindle/linoardo 1.0.19 → 1.0.21

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 (153) hide show
  1. package/dist/button.cjs +30 -15
  2. package/dist/button.cjs.map +1 -1
  3. package/dist/button.d.cts +17 -7
  4. package/dist/button.d.ts +17 -7
  5. package/dist/button.js +1 -1
  6. package/dist/card.cjs +82 -20
  7. package/dist/card.cjs.map +1 -1
  8. package/dist/card.d.cts +8 -1
  9. package/dist/card.d.ts +8 -1
  10. package/dist/card.js +1 -1
  11. package/dist/chip.cjs +17 -10
  12. package/dist/chip.cjs.map +1 -1
  13. package/dist/chip.d.cts +7 -4
  14. package/dist/chip.d.ts +7 -4
  15. package/dist/chip.js +1 -1
  16. package/dist/chunk-2UL3S6KC.js +147 -0
  17. package/dist/chunk-2UL3S6KC.js.map +1 -0
  18. package/dist/{chunk-N65GNKRG.js → chunk-5LWU5T2C.js} +48 -42
  19. package/dist/chunk-5LWU5T2C.js.map +1 -0
  20. package/dist/{chunk-XFPBICJG.js → chunk-5WQW6YSJ.js} +12 -3
  21. package/dist/chunk-5WQW6YSJ.js.map +1 -0
  22. package/dist/{chunk-5GY2JCBO.js → chunk-AK7LFJI4.js} +16 -5
  23. package/dist/chunk-AK7LFJI4.js.map +1 -0
  24. package/dist/{chunk-PWK6MLZT.js → chunk-DSZ3EOQB.js} +19 -12
  25. package/dist/chunk-DSZ3EOQB.js.map +1 -0
  26. package/dist/{chunk-AOHXZ7OM.js → chunk-GMDNSU26.js} +19 -5
  27. package/dist/chunk-GMDNSU26.js.map +1 -0
  28. package/dist/chunk-HAXGOTZO.js +94 -0
  29. package/dist/chunk-HAXGOTZO.js.map +1 -0
  30. package/dist/chunk-HEXJCQRO.js +51 -0
  31. package/dist/chunk-HEXJCQRO.js.map +1 -0
  32. package/dist/chunk-JGEXEDKS.js +168 -0
  33. package/dist/chunk-JGEXEDKS.js.map +1 -0
  34. package/dist/{chunk-GA6HSRN6.js → chunk-KRYWWWXR.js} +20 -7
  35. package/dist/chunk-KRYWWWXR.js.map +1 -0
  36. package/dist/{chunk-U6NAIIDI.js → chunk-LIEBZOLG.js} +42 -20
  37. package/dist/chunk-LIEBZOLG.js.map +1 -0
  38. package/dist/{chunk-E32P5AHO.js → chunk-LYP7V32H.js} +10 -4
  39. package/dist/chunk-LYP7V32H.js.map +1 -0
  40. package/dist/chunk-QRBJFDV5.js +170 -0
  41. package/dist/chunk-QRBJFDV5.js.map +1 -0
  42. package/dist/{chunk-SZU6OYLS.js → chunk-RFPNVLAD.js} +31 -17
  43. package/dist/chunk-RFPNVLAD.js.map +1 -0
  44. package/dist/chunk-SAGQYMS3.js +167 -0
  45. package/dist/chunk-SAGQYMS3.js.map +1 -0
  46. package/dist/{chunk-QGQ66FJD.js → chunk-T37VPLS4.js} +2 -2
  47. package/dist/chunk-T37VPLS4.js.map +1 -0
  48. package/dist/{chunk-32KFNI6K.js → chunk-U2AL7XFY.js} +48 -28
  49. package/dist/chunk-U2AL7XFY.js.map +1 -0
  50. package/dist/chunk-VPF7M2PB.js +141 -0
  51. package/dist/chunk-VPF7M2PB.js.map +1 -0
  52. package/dist/dialog.cjs +40 -18
  53. package/dist/dialog.cjs.map +1 -1
  54. package/dist/dialog.d.cts +3 -0
  55. package/dist/dialog.d.ts +3 -0
  56. package/dist/dialog.js +1 -1
  57. package/dist/expansion-panel/item.cjs +11 -2
  58. package/dist/expansion-panel/item.cjs.map +1 -1
  59. package/dist/expansion-panel/item.js +1 -1
  60. package/dist/expansion-panel.cjs +25 -6
  61. package/dist/expansion-panel.cjs.map +1 -1
  62. package/dist/expansion-panel.js +2 -2
  63. package/dist/hero.cjs +143 -0
  64. package/dist/hero.cjs.map +1 -0
  65. package/dist/hero.d.cts +34 -0
  66. package/dist/hero.d.ts +34 -0
  67. package/dist/hero.js +3 -0
  68. package/dist/hero.js.map +1 -0
  69. package/dist/icon.cjs +53 -0
  70. package/dist/icon.cjs.map +1 -0
  71. package/dist/icon.d.cts +15 -0
  72. package/dist/icon.d.ts +15 -0
  73. package/dist/icon.js +3 -0
  74. package/dist/icon.js.map +1 -0
  75. package/dist/{index-Md3BuoGM.d.cts → index-B5n8tN2G.d.cts} +3 -0
  76. package/dist/{index-d_JuI06O.d.ts → index-D4-O-oJt.d.ts} +3 -0
  77. package/dist/index.cjs +1013 -173
  78. package/dist/index.cjs.map +1 -1
  79. package/dist/index.d.cts +8 -2
  80. package/dist/index.d.ts +8 -2
  81. package/dist/index.js +18 -13
  82. package/dist/input.cjs +104 -30
  83. package/dist/input.cjs.map +1 -1
  84. package/dist/input.d.cts +8 -19
  85. package/dist/input.d.ts +8 -19
  86. package/dist/input.js +1 -1
  87. package/dist/list/item.cjs +10 -1
  88. package/dist/list/item.cjs.map +1 -1
  89. package/dist/list/item.d.cts +1 -1
  90. package/dist/list/item.d.ts +1 -1
  91. package/dist/list/item.js +1 -1
  92. package/dist/list.cjs +23 -3
  93. package/dist/list.cjs.map +1 -1
  94. package/dist/list.d.cts +5 -2
  95. package/dist/list.d.ts +5 -2
  96. package/dist/list.js +2 -2
  97. package/dist/masonry.cjs +116 -0
  98. package/dist/masonry.cjs.map +1 -0
  99. package/dist/masonry.d.cts +45 -0
  100. package/dist/masonry.d.ts +45 -0
  101. package/dist/masonry.js +3 -0
  102. package/dist/masonry.js.map +1 -0
  103. package/dist/menu.cjs.map +1 -1
  104. package/dist/menu.d.cts +3 -0
  105. package/dist/menu.d.ts +3 -0
  106. package/dist/menu.js +1 -1
  107. package/dist/profileCard.cjs +391 -0
  108. package/dist/profileCard.cjs.map +1 -0
  109. package/dist/profileCard.d.cts +29 -0
  110. package/dist/profileCard.d.ts +29 -0
  111. package/dist/profileCard.js +5 -0
  112. package/dist/profileCard.js.map +1 -0
  113. package/dist/select.cjs +173 -0
  114. package/dist/select.cjs.map +1 -0
  115. package/dist/select.d.cts +29 -0
  116. package/dist/select.d.ts +29 -0
  117. package/dist/select.js +3 -0
  118. package/dist/select.js.map +1 -0
  119. package/dist/slider.cjs +17 -3
  120. package/dist/slider.cjs.map +1 -1
  121. package/dist/slider.d.cts +3 -0
  122. package/dist/slider.d.ts +3 -0
  123. package/dist/slider.js +1 -1
  124. package/dist/styles.css +1199 -9
  125. package/dist/switch.cjs +46 -40
  126. package/dist/switch.cjs.map +1 -1
  127. package/dist/switch.d.cts +4 -1
  128. package/dist/switch.d.ts +4 -1
  129. package/dist/switch.js +1 -1
  130. package/dist/tooltip.cjs +46 -26
  131. package/dist/tooltip.cjs.map +1 -1
  132. package/dist/tooltip.d.cts +3 -0
  133. package/dist/tooltip.d.ts +3 -0
  134. package/dist/tooltip.js +1 -1
  135. package/dist/types-BCqIOkp1.d.cts +24 -0
  136. package/dist/types-ChXN4u7x.d.ts +24 -0
  137. package/package.json +30 -5
  138. package/readme.md +1 -0
  139. package/dist/chunk-32KFNI6K.js.map +0 -1
  140. package/dist/chunk-5GY2JCBO.js.map +0 -1
  141. package/dist/chunk-AOHXZ7OM.js.map +0 -1
  142. package/dist/chunk-E32P5AHO.js.map +0 -1
  143. package/dist/chunk-GA6HSRN6.js.map +0 -1
  144. package/dist/chunk-N65GNKRG.js.map +0 -1
  145. package/dist/chunk-PWK6MLZT.js.map +0 -1
  146. package/dist/chunk-PYG5SDNO.js +0 -98
  147. package/dist/chunk-PYG5SDNO.js.map +0 -1
  148. package/dist/chunk-QGQ66FJD.js.map +0 -1
  149. package/dist/chunk-SZU6OYLS.js.map +0 -1
  150. package/dist/chunk-U6NAIIDI.js.map +0 -1
  151. package/dist/chunk-V4BVJOSC.js +0 -85
  152. package/dist/chunk-V4BVJOSC.js.map +0 -1
  153. package/dist/chunk-XFPBICJG.js.map +0 -1
package/dist/button.cjs CHANGED
@@ -30,17 +30,18 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
30
30
  var iconBaseClasses = {
31
31
  mdi: ["mdi"]
32
32
  };
33
+
34
+ // src/Containment/Button/states.button.ts
33
35
  var base = "btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
34
- var blackAndWhiteVariantClass = "bg-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white";
35
36
  var blackAndWhitePaletteClasses = {
36
- solid: tailwindMerge.twMerge(blackAndWhiteVariantClass, "bg-black text-white"),
37
- outline: blackAndWhiteVariantClass,
38
- ghost: "bg-neutral-300 text-white",
39
- text: blackAndWhiteVariantClass,
40
- filled: "bg-black text-white",
41
- underlined: tailwindMerge.twMerge(blackAndWhiteVariantClass, "b"),
42
- rounded: blackAndWhiteVariantClass,
43
- sharp: "bg-black text-white rounded-none"
37
+ solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
38
+ outline: "border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
39
+ ghost: "text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent",
40
+ text: "bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent",
41
+ filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
42
+ underlined: "bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20",
43
+ rounded: "rounded-full border-2 border-black bg-white text-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
44
+ sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40"
44
45
  };
45
46
  var paletteVariantClasses = {
46
47
  primary: {
@@ -136,7 +137,9 @@ var resolveIconClassName = (icon) => {
136
137
  }
137
138
  const [library, providedName] = icon;
138
139
  const normalizedLibrary = library.trim();
139
- const baseClasses = iconBaseClasses[normalizedLibrary] ?? [normalizedLibrary];
140
+ const baseClasses = iconBaseClasses[normalizedLibrary] ?? [
141
+ normalizedLibrary
142
+ ];
140
143
  const iconName = providedName.trim();
141
144
  if (!iconName) {
142
145
  return baseClasses.join(" ");
@@ -152,12 +155,19 @@ var sizeClasses = {
152
155
  "x-large": "px-7 py-3.5 text-xl"
153
156
  };
154
157
  var iconOnlySizeClasses = {
155
- "x-small": "p-2 text-xs aspect-square",
158
+ "x-small": "p-0 text-xs aspect-square",
156
159
  small: "p-2.5 text-sm aspect-square",
157
160
  medium: "p-3 text-base aspect-square",
158
161
  large: "p-3.5 text-lg aspect-square",
159
162
  "x-large": "p-4 text-xl aspect-square"
160
163
  };
164
+ var iconOnlyIconSizeClasses = {
165
+ "x-small": "text-sm",
166
+ small: "text-base",
167
+ medium: "text-lg",
168
+ large: "text-xl",
169
+ "x-large": "text-2xl"
170
+ };
161
171
  var Button = React__namespace.forwardRef(
162
172
  ({
163
173
  variant = "solid",
@@ -172,11 +182,15 @@ var Button = React__namespace.forwardRef(
172
182
  children,
173
183
  disabled,
174
184
  onClick,
185
+ as,
175
186
  ...rest
176
187
  }, ref) => {
188
+ const Component = as ?? "button";
177
189
  const variantClass = resolveVariantClass(variant, color);
178
190
  const sizeClass = iconOnly ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium : sizeClasses[size] ?? sizeClasses.medium;
191
+ const iconSizeClass = iconOnly ? iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium : void 0;
179
192
  const blockClass = block ? "w-full" : null;
193
+ const isNativeButton = Component === "button";
180
194
  const isDisabled = disabled || loading;
181
195
  const cursor = onClick && !isDisabled ? "cursor-pointer" : "cursor-default";
182
196
  const resolvedIconClass = resolveIconClassName(icon);
@@ -185,15 +199,16 @@ var Button = React__namespace.forwardRef(
185
199
  const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;
186
200
  const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);
187
201
  const gapClass = hasDecorators ? "gap-2" : void 0;
188
- const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
189
- const iconClassName = shouldRenderIcon ? tailwindMerge.twMerge("leading-none", resolvedIconClass) : void 0;
202
+ const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none", iconSizeClass) : void 0;
203
+ const iconClassName = shouldRenderIcon ? tailwindMerge.twMerge("leading-none", iconSizeClass, resolvedIconClass) : void 0;
190
204
  return /* @__PURE__ */ jsxRuntime.jsxs(
191
- "button",
205
+ Component,
192
206
  {
193
207
  ...rest,
194
208
  ref,
195
209
  onClick,
196
- disabled: isDisabled,
210
+ disabled: isNativeButton ? isDisabled : void 0,
211
+ "aria-disabled": !isNativeButton ? isDisabled : void 0,
197
212
  className: tailwindMerge.twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
198
213
  "data-loading": loading || void 0,
199
214
  "aria-busy": loading || void 0,
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/globals.ts","../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx"],"names":["twMerge","normalized","React","jsxs","jsx"],"mappings":"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","file":"button.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport type { GlobalSize, Palette } from '@lindle/linoardo/global.types';\nimport type { ButtonProps, ButtonVariant } from './types.button';\nimport { twMerge } from 'tailwind-merge';\n\nexport const base =\n 'btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed';\n\nconst blackAndWhiteVariantClass =\n 'bg-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white';\n\nconst blackAndWhitePaletteClasses = {\n solid: twMerge(blackAndWhiteVariantClass, 'bg-black text-white'),\n outline: blackAndWhiteVariantClass,\n ghost: 'bg-neutral-300 text-white',\n text: blackAndWhiteVariantClass,\n filled: 'bg-black text-white',\n underlined: twMerge(blackAndWhiteVariantClass, 'b'),\n rounded: blackAndWhiteVariantClass,\n sharp: 'bg-black text-white rounded-none'\n} satisfies Record<ButtonVariant, string>;\n\nconst paletteVariantClasses: Record<Palette, Record<ButtonVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n sharp: 'rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n outline: 'border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary',\n ghost: 'text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent',\n filled: 'bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25',\n underlined:\n 'bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25',\n rounded:\n 'rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25'\n },\n neutral: {\n solid: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n sharp: 'rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n outline:\n 'border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400',\n ghost: 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled: 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300',\n rounded: 'rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300'\n },\n info: {\n solid: 'bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n sharp: 'rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n outline: 'border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400',\n ghost: 'text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent',\n filled: 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200',\n underlined:\n 'bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200',\n rounded: 'rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200'\n },\n success: {\n solid: 'bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n sharp: 'rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n outline:\n 'border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400',\n ghost:\n 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200',\n underlined:\n 'bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200',\n rounded:\n 'rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200'\n },\n warning: {\n solid: 'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n sharp: 'rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n outline:\n 'border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400',\n ghost: 'text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent',\n filled: 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200',\n underlined:\n 'bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200',\n rounded:\n 'rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200'\n },\n danger: {\n solid: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n sharp: 'rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n outline: 'border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400',\n ghost: 'text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent',\n filled: 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200',\n underlined:\n 'bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200',\n rounded: 'rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200'\n },\n surface: {\n solid: 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n sharp: 'rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n outline: 'border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200',\n ghost: 'text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled: 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200',\n rounded: 'rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200'\n },\n bw: blackAndWhitePaletteClasses\n};\n\nexport const resolveVariantClass = (variant: ButtonVariant, palette: Palette) => {\n const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;\n return paletteVariants[variant] ?? paletteVariants.solid;\n};\n\nexport const resolveIconClassName = (icon?: ButtonProps['icon']) => {\n if (!icon) {\n return undefined;\n }\n\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) {\n return undefined;\n }\n\n if (trimmed.includes(' ')) {\n return trimmed;\n }\n\n const normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalized].join(' ');\n }\n\n const [library, providedName] = icon;\n const normalizedLibrary = library.trim();\n const baseClasses = iconBaseClasses[normalizedLibrary as keyof typeof iconBaseClasses] ?? [normalizedLibrary];\n const iconName = providedName.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n\n const normalized = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return Array.from(new Set([...baseClasses, normalized])).join(' ');\n};\n\nexport const sizeClasses = {\n 'x-small': 'px-2.5 py-1 text-xs',\n small: 'px-3 py-1.5 text-sm',\n medium: 'px-4 py-2 text-base',\n large: 'px-6 py-3 text-lg',\n 'x-large': 'px-7 py-3.5 text-xl'\n} satisfies Record<GlobalSize, string>;\n\nexport const iconOnlySizeClasses = {\n 'x-small': 'p-2 text-xs aspect-square',\n small: 'p-2.5 text-sm aspect-square',\n medium: 'p-3 text-base aspect-square',\n large: 'p-3.5 text-lg aspect-square',\n 'x-large': 'p-4 text-xl aspect-square'\n} satisfies Record<GlobalSize, string>;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport { base, iconOnlySizeClasses, resolveIconClassName, resolveVariantClass, sizeClasses } from './states.button';\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n block = false,\n loading = false,\n loadingText,\n icon,\n iconOnly = false,\n className,\n children,\n disabled,\n onClick,\n ...rest\n },\n ref\n ) => {\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = iconOnly\n ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium\n : sizeClasses[size] ?? sizeClasses.medium;\n const blockClass = block ? 'w-full' : null;\n const isDisabled = disabled || loading;\n const cursor = onClick && !isDisabled ? 'cursor-pointer' : 'cursor-default';\n const resolvedIconClass = resolveIconClassName(icon);\n const shouldRenderIcon = Boolean(resolvedIconClass && !loading);\n const isLoadingTextProvided = loadingText !== undefined && loadingText !== null;\n const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;\n const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);\n const gapClass = hasDecorators ? 'gap-2' : undefined;\n const loadingIconClass = loading ? twMerge('mdi mdi-loading mdi-spin', 'leading-none') : undefined;\n const iconClassName = shouldRenderIcon ? twMerge('leading-none', resolvedIconClass) : undefined;\n\n return (\n <button\n {...rest}\n ref={ref}\n onClick={onClick}\n disabled={isDisabled}\n className={twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className)}\n data-loading={loading || undefined}\n aria-busy={loading || undefined}\n >\n {loading && <i className={loadingIconClass} aria-hidden />}\n {iconClassName && <i className={iconClassName} aria-hidden />}\n {content}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"]}
1
+ {"version":3,"sources":["../src/globals.ts","../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx"],"names":["normalized","React","twMerge","jsxs","jsx"],"mappings":"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","file":"button.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport type { GlobalSize, Palette } from '@lindle/linoardo/global.types';\nimport type { ButtonProps, ButtonVariant } from './types.button';\n\nexport const base =\n 'btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed';\n\nconst blackAndWhitePaletteClasses = {\n solid: 'bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white',\n outline:\n 'border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white',\n ghost:\n 'text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent',\n text:\n 'bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent',\n filled:\n 'bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20',\n underlined:\n 'bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20',\n rounded:\n 'rounded-full border-2 border-black bg-white text-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white',\n sharp: 'bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40'\n} satisfies Record<ButtonVariant, string>;\n\nconst paletteVariantClasses: Record<Palette, Record<ButtonVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n sharp: 'rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n outline:\n 'border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary',\n ghost:\n 'text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent',\n filled:\n 'bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25',\n underlined:\n 'bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25',\n rounded:\n 'rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25'\n },\n neutral: {\n solid: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n sharp: 'rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n outline:\n 'border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400',\n ghost:\n 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300',\n rounded:\n 'rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300'\n },\n info: {\n solid: 'bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n sharp: 'rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n outline:\n 'border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400',\n ghost:\n 'text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200',\n underlined:\n 'bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200',\n rounded:\n 'rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200'\n },\n success: {\n solid: 'bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n sharp:\n 'rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n outline:\n 'border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400',\n ghost:\n 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200',\n underlined:\n 'bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200',\n rounded:\n 'rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200'\n },\n warning: {\n solid: 'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n sharp: 'rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n outline:\n 'border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400',\n ghost:\n 'text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200',\n underlined:\n 'bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200',\n rounded:\n 'rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200'\n },\n danger: {\n solid: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n sharp: 'rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n outline:\n 'border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400',\n ghost:\n 'text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200',\n underlined:\n 'bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200',\n rounded:\n 'rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200'\n },\n surface: {\n solid:\n 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n sharp:\n 'rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n outline:\n 'border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200',\n ghost:\n 'text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200',\n rounded:\n 'rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200'\n },\n bw: blackAndWhitePaletteClasses\n};\n\nexport const resolveVariantClass = (variant: ButtonVariant, palette: Palette) => {\n const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;\n return paletteVariants[variant] ?? paletteVariants.solid;\n};\n\nexport const resolveIconClassName = (icon?: ButtonProps['icon']) => {\n if (!icon) {\n return undefined;\n }\n\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) {\n return undefined;\n }\n\n if (trimmed.includes(' ')) {\n return trimmed;\n }\n\n const normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalized].join(' ');\n }\n\n const [library, providedName] = icon;\n const normalizedLibrary = library.trim();\n const baseClasses = iconBaseClasses[normalizedLibrary as keyof typeof iconBaseClasses] ?? [\n normalizedLibrary\n ];\n const iconName = providedName.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n\n const normalized = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return Array.from(new Set([...baseClasses, normalized])).join(' ');\n};\n\nexport const sizeClasses = {\n 'x-small': 'px-2.5 py-1 text-xs',\n small: 'px-3 py-1.5 text-sm',\n medium: 'px-4 py-2 text-base',\n large: 'px-6 py-3 text-lg',\n 'x-large': 'px-7 py-3.5 text-xl'\n} satisfies Record<GlobalSize, string>;\n\nexport const iconOnlySizeClasses = {\n 'x-small': 'p-0 text-xs aspect-square',\n small: 'p-2.5 text-sm aspect-square',\n medium: 'p-3 text-base aspect-square',\n large: 'p-3.5 text-lg aspect-square',\n 'x-large': 'p-4 text-xl aspect-square'\n} satisfies Record<GlobalSize, string>;\n\nexport const iconOnlyIconSizeClasses = {\n 'x-small': 'text-sm',\n small: 'text-base',\n medium: 'text-lg',\n large: 'text-xl',\n 'x-large': 'text-2xl'\n} satisfies Record<GlobalSize, string>;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport {\n base,\n iconOnlyIconSizeClasses,\n iconOnlySizeClasses,\n resolveIconClassName,\n resolveVariantClass,\n sizeClasses\n} from './states.button';\n\ntype PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];\ntype ButtonComponent = {\n <T extends React.ElementType = 'button'>(\n props: ButtonProps<T> & { ref?: PolymorphicRef<T> }\n ): React.ReactElement | null;\n displayName?: string;\n};\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button = React.forwardRef(\n <\n T extends React.ElementType = 'button'\n >({\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n block = false,\n loading = false,\n loadingText,\n icon,\n iconOnly = false,\n className,\n children,\n disabled,\n onClick,\n as,\n ...rest\n }: ButtonProps<T>,\n ref: React.ForwardedRef<unknown>) => {\n const Component = as ?? 'button';\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = iconOnly\n ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium\n : sizeClasses[size] ?? sizeClasses.medium;\n const iconSizeClass = iconOnly\n ? iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium\n : undefined;\n const blockClass = block ? 'w-full' : null;\n const isNativeButton = Component === 'button';\n const isDisabled = disabled || loading;\n const cursor = onClick && !isDisabled ? 'cursor-pointer' : 'cursor-default';\n const resolvedIconClass = resolveIconClassName(icon);\n const shouldRenderIcon = Boolean(resolvedIconClass && !loading);\n const isLoadingTextProvided = loadingText !== undefined && loadingText !== null;\n const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;\n const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);\n const gapClass = hasDecorators ? 'gap-2' : undefined;\n const loadingIconClass = loading\n ? twMerge('mdi mdi-loading mdi-spin', 'leading-none', iconSizeClass)\n : undefined;\n const iconClassName = shouldRenderIcon\n ? twMerge('leading-none', iconSizeClass, resolvedIconClass)\n : undefined;\n\n return (\n <Component\n {...rest}\n ref={ref as PolymorphicRef<T>}\n onClick={onClick}\n disabled={isNativeButton ? isDisabled : undefined}\n aria-disabled={!isNativeButton ? isDisabled : undefined}\n className={twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className)}\n data-loading={loading || undefined}\n aria-busy={loading || undefined}\n >\n {loading && <i className={loadingIconClass} aria-hidden />}\n {iconClassName && <i className={iconClassName} aria-hidden />}\n {content}\n </Component>\n );\n }\n) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"]}
package/dist/button.d.cts CHANGED
@@ -1,12 +1,8 @@
1
- import { G as GlobalVariant, P as Palette, a as GlobalSize, b as PropIcon } from './global.types-E2uVLemv.cjs';
2
1
  import * as react from 'react';
2
+ import { G as GlobalVariant, P as Palette, a as GlobalSize, b as PropIcon } from './global.types-E2uVLemv.cjs';
3
3
 
4
4
  type ButtonVariant = GlobalVariant;
5
-
6
- /**
7
- * Containment button supporting variant, size, block layout and loading states.
8
- */
9
- declare const Button: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes<HTMLButtonElement> & {
5
+ type ButtonOwnProps = {
10
6
  variant?: ButtonVariant;
11
7
  color?: Palette;
12
8
  size?: GlobalSize;
@@ -15,6 +11,20 @@ declare const Button: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes
15
11
  loadingText?: string;
16
12
  icon?: PropIcon;
17
13
  iconOnly?: boolean;
18
- } & react.RefAttributes<HTMLButtonElement>>;
14
+ as?: react.ElementType;
15
+ };
16
+ type ButtonProps<T extends react.ElementType = 'button'> = ButtonOwnProps & Omit<react.ComponentPropsWithoutRef<T>, keyof ButtonOwnProps | 'color' | 'size' | 'as'>;
17
+
18
+ type PolymorphicRef<T extends react.ElementType> = react.ComponentPropsWithRef<T>['ref'];
19
+ type ButtonComponent = {
20
+ <T extends react.ElementType = 'button'>(props: ButtonProps<T> & {
21
+ ref?: PolymorphicRef<T>;
22
+ }): react.ReactElement | null;
23
+ displayName?: string;
24
+ };
25
+ /**
26
+ * Containment button supporting variant, size, block layout and loading states.
27
+ */
28
+ declare const Button: ButtonComponent;
19
29
 
20
30
  export { Button as default };
package/dist/button.d.ts CHANGED
@@ -1,12 +1,8 @@
1
- import { G as GlobalVariant, P as Palette, a as GlobalSize, b as PropIcon } from './global.types-E2uVLemv.js';
2
1
  import * as react from 'react';
2
+ import { G as GlobalVariant, P as Palette, a as GlobalSize, b as PropIcon } from './global.types-E2uVLemv.js';
3
3
 
4
4
  type ButtonVariant = GlobalVariant;
5
-
6
- /**
7
- * Containment button supporting variant, size, block layout and loading states.
8
- */
9
- declare const Button: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes<HTMLButtonElement> & {
5
+ type ButtonOwnProps = {
10
6
  variant?: ButtonVariant;
11
7
  color?: Palette;
12
8
  size?: GlobalSize;
@@ -15,6 +11,20 @@ declare const Button: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes
15
11
  loadingText?: string;
16
12
  icon?: PropIcon;
17
13
  iconOnly?: boolean;
18
- } & react.RefAttributes<HTMLButtonElement>>;
14
+ as?: react.ElementType;
15
+ };
16
+ type ButtonProps<T extends react.ElementType = 'button'> = ButtonOwnProps & Omit<react.ComponentPropsWithoutRef<T>, keyof ButtonOwnProps | 'color' | 'size' | 'as'>;
17
+
18
+ type PolymorphicRef<T extends react.ElementType> = react.ComponentPropsWithRef<T>['ref'];
19
+ type ButtonComponent = {
20
+ <T extends react.ElementType = 'button'>(props: ButtonProps<T> & {
21
+ ref?: PolymorphicRef<T>;
22
+ }): react.ReactElement | null;
23
+ displayName?: string;
24
+ };
25
+ /**
26
+ * Containment button supporting variant, size, block layout and loading states.
27
+ */
28
+ declare const Button: ButtonComponent;
19
29
 
20
30
  export { Button as default };
package/dist/button.js CHANGED
@@ -1,4 +1,4 @@
1
- export { Button_default as default } from './chunk-SZU6OYLS.js';
1
+ export { Button_default as default } from './chunk-RFPNVLAD.js';
2
2
  import './chunk-IEILIKS2.js';
3
3
  //# sourceMappingURL=button.js.map
4
4
  //# sourceMappingURL=button.js.map
package/dist/card.cjs CHANGED
@@ -4,29 +4,38 @@ var react = require('react');
4
4
  var tailwindMerge = require('tailwind-merge');
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
 
7
- // src/Containment/Card/index.tsx
7
+ // src/Blocks/Card/index.tsx
8
8
  var paddingClasses = {
9
9
  none: "p-0",
10
10
  sm: "p-3",
11
11
  md: "p-4",
12
12
  lg: "p-6"
13
13
  };
14
- var cardBase = "card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors";
14
+ var cardBase = "card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors dark:bg-slate-900 dark:text-slate-100";
15
15
  var variantClasses = {
16
- solid: "rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55",
17
- outline: "rounded-2xl border border-gray-300 bg-white shadow-none",
18
- text: "rounded-2xl border border-transparent bg-transparent shadow-none",
19
- ghost: "rounded-2xl border border-transparent bg-gray-50 shadow-none",
20
- filled: "rounded-2xl border border-gray-200 bg-gray-50 shadow-sm",
21
- underlined: "rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none",
22
- rounded: "rounded-3xl border border-gray-200 bg-white shadow-md",
23
- sharp: "rounded-none border border-gray-200 bg-white shadow-md"
16
+ solid: "rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/30",
17
+ outline: "rounded-2xl border-2 border-black bg-white shadow-none dark:border-black dark:bg-slate-900",
18
+ text: "rounded-2xl border border-transparent bg-transparent shadow-none dark:border-transparent dark:bg-transparent",
19
+ ghost: "rounded-2xl border border-transparent bg-gray-50 shadow-none dark:border-transparent dark:bg-slate-800",
20
+ filled: "rounded-2xl border border-gray-200 bg-gray-50 shadow-sm dark:border-slate-800 dark:bg-slate-800 dark:shadow-black/20",
21
+ underlined: "rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none dark:border-transparent dark:border-b-slate-700 dark:bg-transparent",
22
+ rounded: "rounded-3xl border border-gray-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/25",
23
+ sharp: "rounded-none border border-gray-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/25"
24
24
  };
25
- var CardRoot = react.forwardRef(function Card({ className, children, variant = "solid", padding = "md", interactive = false, ...rest }, ref) {
25
+ var CardRoot = react.forwardRef(function Card({
26
+ className,
27
+ children,
28
+ variant = "solid",
29
+ padding = "md",
30
+ interactive = false,
31
+ dividers = true,
32
+ ...rest
33
+ }, ref) {
26
34
  const variantClass = variantClasses[variant] ?? variantClasses.solid;
27
35
  const paddingClass = paddingClasses[padding] ?? paddingClasses.md;
28
- const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2" : void 0;
36
+ const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900" : void 0;
29
37
  const tabIndexValue = interactive && rest.tabIndex === void 0 ? 0 : rest.tabIndex;
38
+ const content = applyDividers(children, dividers);
30
39
  return /* @__PURE__ */ jsxRuntime.jsx(
31
40
  "div",
32
41
  {
@@ -34,28 +43,60 @@ var CardRoot = react.forwardRef(function Card({ className, children, variant = "
34
43
  ref,
35
44
  tabIndex: tabIndexValue,
36
45
  className: tailwindMerge.twMerge(cardBase, variantClass, paddingClass, interactiveClass, className),
37
- children
46
+ children: content
38
47
  }
39
48
  );
40
49
  });
41
- var CardHeader = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
50
+ var CardHeader = ({ className, dividers = true, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
42
51
  "div",
43
52
  {
44
53
  ...rest,
45
- className: tailwindMerge.twMerge("card-header mb-2 flex flex-col gap-1 border-b border-gray-100 pb-3", className)
54
+ className: tailwindMerge.twMerge(
55
+ "card-header mb-2 flex flex-col gap-1 pb-3",
56
+ dividers ? "border-b border-gray-100 dark:border-slate-800" : void 0,
57
+ className
58
+ )
46
59
  }
47
60
  );
48
61
  var CardBody = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tailwindMerge.twMerge("card-body flex flex-col gap-3", className) });
49
- var CardFooter = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
62
+ var CardFooter = ({ className, dividers = true, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
50
63
  "div",
51
64
  {
52
65
  ...rest,
53
- className: tailwindMerge.twMerge("card-footer mt-3 flex flex-wrap items-center gap-3 border-t border-gray-100 pt-3", className)
66
+ className: tailwindMerge.twMerge(
67
+ "card-footer mt-3 flex flex-wrap items-center gap-3 pt-3",
68
+ dividers ? "border-t border-gray-100 dark:border-slate-800" : void 0,
69
+ className
70
+ )
71
+ }
72
+ );
73
+ var CardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
74
+ "h3",
75
+ {
76
+ ...rest,
77
+ className: tailwindMerge.twMerge(
78
+ "card-title text-lg font-semibold text-gray-900 dark:text-slate-50",
79
+ className
80
+ )
81
+ }
82
+ );
83
+ var CardSubtitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
84
+ "p",
85
+ {
86
+ ...rest,
87
+ className: tailwindMerge.twMerge(
88
+ "card-subtitle text-sm font-medium text-gray-600 dark:text-slate-300",
89
+ className
90
+ )
91
+ }
92
+ );
93
+ var CardText = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
94
+ "p",
95
+ {
96
+ ...rest,
97
+ className: tailwindMerge.twMerge("card-text text-sm text-gray-700 dark:text-slate-200", className)
54
98
  }
55
99
  );
56
- var CardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ...rest, className: tailwindMerge.twMerge("card-title text-lg font-semibold text-gray-900", className) });
57
- var CardSubtitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: tailwindMerge.twMerge("card-subtitle text-sm font-medium text-gray-600", className) });
58
- var CardText = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: tailwindMerge.twMerge("card-text text-sm text-gray-700", className) });
59
100
  var CardMedia = ({ className, rounded = false, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
60
101
  "img",
61
102
  {
@@ -81,6 +122,27 @@ var Card2 = Object.assign(CardRoot, {
81
122
  Actions: CardActions
82
123
  });
83
124
  var Card_default = Card2;
125
+ function applyDividers(children, dividers) {
126
+ return react.Children.map(children, (child) => {
127
+ if (!react.isValidElement(child)) return child;
128
+ if (isDividerSection(child)) {
129
+ return react.cloneElement(child, { dividers: child.props.dividers ?? dividers });
130
+ }
131
+ if (hasNestedChildren(child)) {
132
+ return react.cloneElement(child, {
133
+ children: applyDividers(child.props.children, dividers)
134
+ });
135
+ }
136
+ return child;
137
+ });
138
+ }
139
+ function isDividerSection(element) {
140
+ return element.type === CardHeader || element.type === CardFooter;
141
+ }
142
+ function hasNestedChildren(element) {
143
+ const props = element.props;
144
+ return "children" in props;
145
+ }
84
146
 
85
147
  module.exports = Card_default;
86
148
  //# sourceMappingURL=card.cjs.map
package/dist/card.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Containment/Card/index.tsx"],"names":["forwardRef","jsx","twMerge","Card"],"mappings":"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","file":"card.cjs","sourcesContent":["import { forwardRef } from 'react';\nimport type { GlobalVariant } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { CardMediaProps, CardProps, CardSectionProps, CardTextProps } from './types.card';\n\nconst paddingClasses: Record<Exclude<CardProps['padding'], undefined>, string> = {\n none: 'p-0',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-6'\n};\n\nconst cardBase = 'card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors';\n\nconst variantClasses: Record<GlobalVariant, string> = {\n solid: 'rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55',\n outline: 'rounded-2xl border border-gray-300 bg-white shadow-none',\n text: 'rounded-2xl border border-transparent bg-transparent shadow-none',\n ghost: 'rounded-2xl border border-transparent bg-gray-50 shadow-none',\n filled: 'rounded-2xl border border-gray-200 bg-gray-50 shadow-sm',\n underlined: 'rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none',\n rounded: 'rounded-3xl border border-gray-200 bg-white shadow-md',\n sharp: 'rounded-none border border-gray-200 bg-white shadow-md'\n};\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(\n { className, children, variant = 'solid', padding = 'md', interactive = false, ...rest },\n ref\n) {\n const variantClass = variantClasses[variant as GlobalVariant] ?? variantClasses.solid;\n const paddingClass = paddingClasses[padding] ?? paddingClasses.md;\n const interactiveClass = interactive\n ? 'transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2'\n : undefined;\n const tabIndexValue = interactive && rest.tabIndex === undefined ? 0 : rest.tabIndex;\n\n return (\n <div\n {...rest}\n ref={ref}\n tabIndex={tabIndexValue}\n className={twMerge(cardBase, variantClass, paddingClass, interactiveClass, className)}\n >\n {children}\n </div>\n );\n});\n\nconst CardHeader: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div\n {...rest}\n className={twMerge('card-header mb-2 flex flex-col gap-1 border-b border-gray-100 pb-3', className)}\n />\n);\n\nconst CardBody: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div {...rest} className={twMerge('card-body flex flex-col gap-3', className)} />\n);\n\nconst CardFooter: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div\n {...rest}\n className={twMerge('card-footer mt-3 flex flex-wrap items-center gap-3 border-t border-gray-100 pt-3', className)}\n />\n);\n\nconst CardTitle: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <h3 {...rest} className={twMerge('card-title text-lg font-semibold text-gray-900', className)} />\n);\n\nconst CardSubtitle: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <p {...rest} className={twMerge('card-subtitle text-sm font-medium text-gray-600', className)} />\n);\n\nconst CardText: React.FC<CardTextProps> = ({ className, ...rest }) => (\n <p {...rest} className={twMerge('card-text text-sm text-gray-700', className)} />\n);\n\nconst CardMedia: React.FC<CardMediaProps> = ({ className, rounded = false, ...rest }) => (\n <img\n {...rest}\n className={twMerge(\n 'card-media w-full object-cover',\n rounded ? 'rounded-xl' : 'rounded-none',\n rest.height || rest.style ? 'block' : 'block max-h-60',\n className\n )}\n loading={rest.loading ?? 'lazy'}\n />\n);\n\nconst CardActions: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div {...rest} className={twMerge('card-actions flex flex-wrap gap-2', className)} />\n);\n\nexport type { CardProps, CardSectionProps, CardMediaProps, CardTextProps };\n\nconst Card = Object.assign(CardRoot, {\n Header: CardHeader,\n Body: CardBody,\n Footer: CardFooter,\n Title: CardTitle,\n Subtitle: CardSubtitle,\n Text: CardText,\n Media: CardMedia,\n Actions: CardActions\n});\n\nexport default Card;\n"]}
1
+ {"version":3,"sources":["../src/Blocks/Card/index.tsx"],"names":["forwardRef","jsx","twMerge","Card","Children","isValidElement","cloneElement"],"mappings":"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","file":"card.cjs","sourcesContent":["import { Children, cloneElement, forwardRef, isValidElement } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { GlobalVariant } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { CardMediaProps, CardProps, CardSectionProps, CardTextProps } from './types.card';\n\nconst paddingClasses: Record<Exclude<CardProps['padding'], undefined>, string> = {\n none: 'p-0',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-6'\n};\n\nconst cardBase =\n 'card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors dark:bg-slate-900 dark:text-slate-100';\n\nconst variantClasses: Record<GlobalVariant, string> = {\n solid:\n 'rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/30',\n outline:\n 'rounded-2xl border-2 border-black bg-white shadow-none dark:border-black dark:bg-slate-900',\n text: 'rounded-2xl border border-transparent bg-transparent shadow-none dark:border-transparent dark:bg-transparent',\n ghost:\n 'rounded-2xl border border-transparent bg-gray-50 shadow-none dark:border-transparent dark:bg-slate-800',\n filled:\n 'rounded-2xl border border-gray-200 bg-gray-50 shadow-sm dark:border-slate-800 dark:bg-slate-800 dark:shadow-black/20',\n underlined:\n 'rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none dark:border-transparent dark:border-b-slate-700 dark:bg-transparent',\n rounded:\n 'rounded-3xl border border-gray-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/25',\n sharp:\n 'rounded-none border border-gray-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/25'\n};\n\n/**\n * Card container with optional padding, variants and interactive focus/hover styles.\n */\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(\n {\n className,\n children,\n variant = 'solid',\n padding = 'md',\n interactive = false,\n dividers = true,\n ...rest\n },\n ref\n) {\n const variantClass = variantClasses[variant as GlobalVariant] ?? variantClasses.solid;\n const paddingClass = paddingClasses[padding] ?? paddingClasses.md;\n const interactiveClass = interactive\n ? 'transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900'\n : undefined;\n const tabIndexValue = interactive && rest.tabIndex === undefined ? 0 : rest.tabIndex;\n const content = applyDividers(children, dividers);\n\n return (\n <div\n {...rest}\n ref={ref}\n tabIndex={tabIndexValue}\n className={twMerge(cardBase, variantClass, paddingClass, interactiveClass, className)}\n >\n {content}\n </div>\n );\n});\n\n/**\n * Section for placing the card title, subtitle or actions at the top of the card.\n */\nconst CardHeader: React.FC<CardSectionProps> = ({ className, dividers = true, ...rest }) => (\n <div\n {...rest}\n className={twMerge(\n 'card-header mb-2 flex flex-col gap-1 pb-3',\n dividers ? 'border-b border-gray-100 dark:border-slate-800' : undefined,\n className\n )}\n />\n);\n\n/**\n * Primary content area of the card.\n */\nconst CardBody: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div {...rest} className={twMerge('card-body flex flex-col gap-3', className)} />\n);\n\n/**\n * Footer area for actions or supplemental information.\n */\nconst CardFooter: React.FC<CardSectionProps> = ({ className, dividers = true, ...rest }) => (\n <div\n {...rest}\n className={twMerge(\n 'card-footer mt-3 flex flex-wrap items-center gap-3 pt-3',\n dividers ? 'border-t border-gray-100 dark:border-slate-800' : undefined,\n className\n )}\n />\n);\n\n/**\n * Stylized heading for the card.\n */\nconst CardTitle: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <h3\n {...rest}\n className={twMerge(\n 'card-title text-lg font-semibold text-gray-900 dark:text-slate-50',\n className\n )}\n />\n);\n\n/**\n * Subtitle text for secondary information under the title.\n */\nconst CardSubtitle: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <p\n {...rest}\n className={twMerge(\n 'card-subtitle text-sm font-medium text-gray-600 dark:text-slate-300',\n className\n )}\n />\n);\n\n/**\n * Body text with default card typography.\n */\nconst CardText: React.FC<CardTextProps> = ({ className, ...rest }) => (\n <p\n {...rest}\n className={twMerge('card-text text-sm text-gray-700 dark:text-slate-200', className)}\n />\n);\n\n/**\n * Media region for images, retaining card spacing and optional rounded corners.\n */\nconst CardMedia: React.FC<CardMediaProps> = ({ className, rounded = false, ...rest }) => (\n <img\n {...rest}\n className={twMerge(\n 'card-media w-full object-cover',\n rounded ? 'rounded-xl' : 'rounded-none',\n rest.height || rest.style ? 'block' : 'block max-h-60',\n className\n )}\n loading={rest.loading ?? 'lazy'}\n />\n);\n\n/**\n * Container for action buttons inside the card.\n */\nconst CardActions: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div {...rest} className={twMerge('card-actions flex flex-wrap gap-2', className)} />\n);\n\nexport type { CardProps, CardSectionProps, CardMediaProps, CardTextProps };\n\nconst Card = Object.assign(CardRoot, {\n Header: CardHeader,\n Body: CardBody,\n Footer: CardFooter,\n Title: CardTitle,\n Subtitle: CardSubtitle,\n Text: CardText,\n Media: CardMedia,\n Actions: CardActions\n});\n\nexport default Card;\n\nfunction applyDividers(children: ReactNode, dividers: boolean): ReactNode {\n return Children.map(children, child => {\n if (!isValidElement(child)) return child;\n\n if (isDividerSection(child)) {\n return cloneElement<CardSectionProps>(child, { dividers: child.props.dividers ?? dividers });\n }\n\n if (hasNestedChildren(child)) {\n return cloneElement<{ children?: ReactNode }>(child, {\n children: applyDividers(child.props.children, dividers)\n });\n }\n\n return child;\n });\n}\n\nfunction isDividerSection(element: ReactElement): element is ReactElement<CardSectionProps> {\n return element.type === CardHeader || element.type === CardFooter;\n}\n\nfunction hasNestedChildren(\n element: ReactElement\n): element is ReactElement<{ children?: ReactNode }> {\n const props = element.props as Record<string, unknown>;\n return 'children' in props;\n}\n"]}
package/dist/card.d.cts CHANGED
@@ -9,8 +9,14 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
9
9
  * Adds a subtle hover + focus ring. Works well for clickable cards.
10
10
  */
11
11
  interactive?: boolean;
12
+ /**
13
+ * Shows a divider under the header and above the footer.
14
+ */
15
+ dividers?: boolean;
16
+ };
17
+ type CardSectionProps = React.HTMLAttributes<HTMLDivElement> & {
18
+ dividers?: boolean;
12
19
  };
13
- type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
14
20
  type CardTextProps = React.HTMLAttributes<HTMLParagraphElement>;
15
21
  type CardMediaProps = React.ImgHTMLAttributes<HTMLImageElement> & {
16
22
  rounded?: boolean;
@@ -20,6 +26,7 @@ declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDiv
20
26
  variant?: GlobalVariant;
21
27
  padding?: CardPadding;
22
28
  interactive?: boolean;
29
+ dividers?: boolean;
23
30
  } & react.RefAttributes<HTMLDivElement>> & {
24
31
  Header: react.FC<CardSectionProps>;
25
32
  Body: react.FC<CardSectionProps>;
package/dist/card.d.ts CHANGED
@@ -9,8 +9,14 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
9
9
  * Adds a subtle hover + focus ring. Works well for clickable cards.
10
10
  */
11
11
  interactive?: boolean;
12
+ /**
13
+ * Shows a divider under the header and above the footer.
14
+ */
15
+ dividers?: boolean;
16
+ };
17
+ type CardSectionProps = React.HTMLAttributes<HTMLDivElement> & {
18
+ dividers?: boolean;
12
19
  };
13
- type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
14
20
  type CardTextProps = React.HTMLAttributes<HTMLParagraphElement>;
15
21
  type CardMediaProps = React.ImgHTMLAttributes<HTMLImageElement> & {
16
22
  rounded?: boolean;
@@ -20,6 +26,7 @@ declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDiv
20
26
  variant?: GlobalVariant;
21
27
  padding?: CardPadding;
22
28
  interactive?: boolean;
29
+ dividers?: boolean;
23
30
  } & react.RefAttributes<HTMLDivElement>> & {
24
31
  Header: react.FC<CardSectionProps>;
25
32
  Body: react.FC<CardSectionProps>;
package/dist/card.js CHANGED
@@ -1,3 +1,3 @@
1
- export { Card_default as default } from './chunk-V4BVJOSC.js';
1
+ export { Card_default as default } from './chunk-2UL3S6KC.js';
2
2
  //# sourceMappingURL=card.js.map
3
3
  //# sourceMappingURL=card.js.map
package/dist/chip.cjs CHANGED
@@ -19,16 +19,15 @@ var chipSizeClasses = {
19
19
  large: "text-base px-5 py-2 min-h-[2.5rem]"
20
20
  };
21
21
  var closeButtonClasses = "ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-transparent text-current/70 transition-colors duration-200 hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/30 focus-visible:ring-offset-2";
22
- var blackAndWhiteChipVariantClass = "bg-white text-black border border-black hover:bg-white focus-visible:ring-black/40 focus-visible:ring-offset-white";
23
22
  var blackAndWhitePaletteClasses = {
24
- solid: blackAndWhiteChipVariantClass,
25
- outline: blackAndWhiteChipVariantClass,
26
- ghost: blackAndWhiteChipVariantClass,
27
- text: blackAndWhiteChipVariantClass,
28
- filled: blackAndWhiteChipVariantClass,
29
- underlined: blackAndWhiteChipVariantClass,
30
- rounded: blackAndWhiteChipVariantClass,
31
- sharp: `${blackAndWhiteChipVariantClass} rounded-none`
23
+ solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
24
+ outline: "bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
25
+ ghost: "bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20",
26
+ text: "bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20",
27
+ filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
28
+ underlined: "bg-transparent text-black border-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20",
29
+ rounded: "rounded-full bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
30
+ sharp: "rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white"
32
31
  };
33
32
  var paletteVariantClasses = {
34
33
  primary: {
@@ -214,7 +213,15 @@ var Chip = react.forwardRef(
214
213
  "aria-disabled": disabled || void 0,
215
214
  "aria-pressed": filter ? selected : void 0,
216
215
  "data-selected": selected || void 0,
217
- className: tailwindMerge.twMerge(chipBaseClasses, sizeClass, pillClass, variantClass, cursorClass, selectedClass, className),
216
+ className: tailwindMerge.twMerge(
217
+ chipBaseClasses,
218
+ sizeClass,
219
+ pillClass,
220
+ variantClass,
221
+ cursorClass,
222
+ selectedClass,
223
+ className
224
+ ),
218
225
  onClick: interactive ? handleClick : void 0,
219
226
  onKeyDown: interactive ? handleKeyDown : onKeyDown,
220
227
  children: [