@lindle/linoardo 1.0.46 → 1.0.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{ExpansionPanelItem-C9KW1yBc.d.cts → ExpansionPanelItem-By0ziOVw.d.cts} +1 -1
- package/dist/{ExpansionPanelItem-Pi3BM-4v.d.ts → ExpansionPanelItem-CFfWX7ia.d.ts} +1 -1
- package/dist/alert.cjs +3 -3
- package/dist/alert.cjs.map +1 -1
- package/dist/alert.js +1 -1
- package/dist/badge.cjs +10 -10
- package/dist/badge.cjs.map +1 -1
- package/dist/badge.d.cts +1 -1
- package/dist/badge.d.ts +1 -1
- package/dist/badge.js +1 -1
- package/dist/block.cjs +0 -1
- package/dist/block.cjs.map +1 -1
- package/dist/block.d.cts +1 -1
- package/dist/block.d.ts +1 -1
- package/dist/block.js +1 -1
- package/dist/button.cjs +111 -55
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +16 -5
- package/dist/button.d.ts +16 -5
- package/dist/button.js +1 -1
- package/dist/card.cjs +0 -1
- package/dist/card.cjs.map +1 -1
- package/dist/card.d.cts +1 -1
- package/dist/card.d.ts +1 -1
- package/dist/card.js +1 -1
- package/dist/chip.cjs +47 -55
- package/dist/chip.cjs.map +1 -1
- package/dist/chip.d.cts +1 -1
- package/dist/chip.d.ts +1 -1
- package/dist/chip.js +2 -2
- package/dist/{chunk-5GT6L4BE.js → chunk-4NKKWBMP.js} +2 -3
- package/dist/chunk-4NKKWBMP.js.map +1 -0
- package/dist/{chunk-VPF7M2PB.js → chunk-7TQUULYB.js} +23 -26
- package/dist/chunk-7TQUULYB.js.map +1 -0
- package/dist/{chunk-U4P2VJCV.js → chunk-7YZBEH2K.js} +2 -3
- package/dist/chunk-7YZBEH2K.js.map +1 -0
- package/dist/{chunk-NJU7XT54.js → chunk-DMI64Z53.js} +4 -4
- package/dist/chunk-DMI64Z53.js.map +1 -0
- package/dist/{chunk-NADLY6LM.js → chunk-DUEQOGNR.js} +3 -4
- package/dist/chunk-DUEQOGNR.js.map +1 -0
- package/dist/{chunk-5LWU5T2C.js → chunk-GKZFVQW6.js} +16 -16
- package/dist/chunk-GKZFVQW6.js.map +1 -0
- package/dist/{chunk-ZTP2JSQ6.js → chunk-H4742H2N.js} +53 -27
- package/dist/chunk-H4742H2N.js.map +1 -0
- package/dist/{chunk-PSMGRUU5.js → chunk-HGECC2JH.js} +48 -56
- package/dist/chunk-HGECC2JH.js.map +1 -0
- package/dist/{chunk-DIWGVTWO.js → chunk-HVGCLUW2.js} +113 -57
- package/dist/chunk-HVGCLUW2.js.map +1 -0
- package/dist/{chunk-GMDNSU26.js → chunk-KK33I72F.js} +5 -5
- package/dist/{chunk-GMDNSU26.js.map → chunk-KK33I72F.js.map} +1 -1
- package/dist/{chunk-HT5XBHWN.js → chunk-KVXZEMAH.js} +4 -4
- package/dist/{chunk-HT5XBHWN.js.map → chunk-KVXZEMAH.js.map} +1 -1
- package/dist/{chunk-5MVIF5GP.js → chunk-LRWM4ZWZ.js} +4 -7
- package/dist/chunk-LRWM4ZWZ.js.map +1 -0
- package/dist/{chunk-XA74HBMH.js → chunk-LSIAP7ZZ.js} +8 -8
- package/dist/chunk-LSIAP7ZZ.js.map +1 -0
- package/dist/{chunk-HEXJCQRO.js → chunk-LWCRKQEV.js} +10 -10
- package/dist/chunk-LWCRKQEV.js.map +1 -0
- package/dist/{chunk-FEGFA3FN.js → chunk-LZYVTGJD.js} +3 -3
- package/dist/{chunk-FEGFA3FN.js.map → chunk-LZYVTGJD.js.map} +1 -1
- package/dist/{chunk-U2AL7XFY.js → chunk-O3VFEMJ7.js} +4 -4
- package/dist/chunk-O3VFEMJ7.js.map +1 -0
- package/dist/{chunk-HIRPMCQJ.js → chunk-OQYPWJDA.js} +12 -12
- package/dist/{chunk-HIRPMCQJ.js.map → chunk-OQYPWJDA.js.map} +1 -1
- package/dist/{chunk-AUVYU7M5.js → chunk-Q7VTD6NY.js} +20 -20
- package/dist/chunk-Q7VTD6NY.js.map +1 -0
- package/dist/{chunk-F3PI7A6V.js → chunk-TRR7TDVA.js} +3 -4
- package/dist/chunk-TRR7TDVA.js.map +1 -0
- package/dist/chunk-UGG35FPX.js +141 -0
- package/dist/chunk-UGG35FPX.js.map +1 -0
- package/dist/{chunk-HAXGOTZO.js → chunk-UK6RSS4J.js} +3 -3
- package/dist/chunk-UK6RSS4J.js.map +1 -0
- package/dist/{chunk-KQOR3C7E.js → chunk-ZLBGPLM3.js} +5 -5
- package/dist/chunk-ZLBGPLM3.js.map +1 -0
- package/dist/dialog.cjs +2 -2
- package/dist/dialog.cjs.map +1 -1
- package/dist/dialog.js +1 -1
- package/dist/expansion-panel/item.cjs +18 -18
- package/dist/expansion-panel/item.cjs.map +1 -1
- package/dist/expansion-panel/item.d.cts +2 -2
- package/dist/expansion-panel/item.d.ts +2 -2
- package/dist/expansion-panel/item.js +1 -1
- package/dist/expansion-panel.cjs +23 -23
- package/dist/expansion-panel.cjs.map +1 -1
- package/dist/expansion-panel.d.cts +3 -3
- package/dist/expansion-panel.d.ts +3 -3
- package/dist/expansion-panel.js +2 -2
- package/dist/{global.types-gx9A7mUe.d.cts → global.types-CjO3VRWu.d.cts} +1 -1
- package/dist/{global.types-gx9A7mUe.d.ts → global.types-CjO3VRWu.d.ts} +1 -1
- package/dist/hero.cjs +21 -24
- package/dist/hero.cjs.map +1 -1
- package/dist/hero.d.cts +1 -1
- package/dist/hero.d.ts +1 -1
- package/dist/hero.js +1 -1
- package/dist/icon.cjs +8 -8
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.d.cts +1 -1
- package/dist/icon.d.ts +1 -1
- package/dist/icon.js +1 -1
- package/dist/{index-CNwl6vmH.d.ts → index-BgLrabTA.d.ts} +1 -1
- package/dist/{index-BDrBOeFI.d.cts → index-C19gZTrO.d.cts} +1 -1
- package/dist/index.cjs +475 -489
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +68 -68
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +62 -145
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +6 -6
- package/dist/input.d.ts +6 -6
- package/dist/input.js +1 -2
- package/dist/list/item.d.cts +2 -2
- package/dist/list/item.d.ts +2 -2
- package/dist/list.cjs +1 -2
- package/dist/list.cjs.map +1 -1
- package/dist/list.d.cts +3 -3
- package/dist/list.d.ts +3 -3
- package/dist/list.js +1 -1
- package/dist/masonry.cjs +1 -1
- package/dist/masonry.cjs.map +1 -1
- package/dist/masonry.js +1 -1
- package/dist/menu.cjs +51 -25
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +1 -1
- package/dist/notification.d.cts +1 -1
- package/dist/notification.d.ts +1 -1
- package/dist/profileCard.cjs +112 -59
- package/dist/profileCard.cjs.map +1 -1
- package/dist/profileCard.d.cts +1 -1
- package/dist/profileCard.d.ts +1 -1
- package/dist/profileCard.js +2 -2
- package/dist/select.cjs +1 -2
- package/dist/select.cjs.map +1 -1
- package/dist/select.d.cts +2 -2
- package/dist/select.d.ts +2 -2
- package/dist/select.js +1 -1
- package/dist/slider.cjs +3 -3
- package/dist/slider.cjs.map +1 -1
- package/dist/slider.d.cts +1 -1
- package/dist/slider.d.ts +1 -1
- package/dist/slider.js +1 -1
- package/dist/styles.css +1156 -148
- package/dist/switch.cjs +14 -14
- package/dist/switch.cjs.map +1 -1
- package/dist/switch.d.cts +1 -1
- package/dist/switch.d.ts +1 -1
- package/dist/switch.js +1 -1
- package/dist/timeline.cjs.map +1 -1
- package/dist/timeline.d.cts +2 -2
- package/dist/timeline.d.ts +2 -2
- package/dist/timeline.js +2 -2
- package/dist/tooltip.cjs +2 -2
- package/dist/tooltip.cjs.map +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/{types-DaTHYIPO.d.ts → types-B4puM-zr.d.cts} +3 -4
- package/dist/{types-CJ0zqPXF.d.cts → types-BDisBwnf.d.ts} +3 -4
- package/package.json +1 -1
- package/readme.md +21 -1
- package/dist/chunk-5GT6L4BE.js.map +0 -1
- package/dist/chunk-5LWU5T2C.js.map +0 -1
- package/dist/chunk-5MVIF5GP.js.map +0 -1
- package/dist/chunk-AUVYU7M5.js.map +0 -1
- package/dist/chunk-DIWGVTWO.js.map +0 -1
- package/dist/chunk-F3PI7A6V.js.map +0 -1
- package/dist/chunk-HAXGOTZO.js.map +0 -1
- package/dist/chunk-HEXJCQRO.js.map +0 -1
- package/dist/chunk-KQOR3C7E.js.map +0 -1
- package/dist/chunk-NADLY6LM.js.map +0 -1
- package/dist/chunk-NJU7XT54.js.map +0 -1
- package/dist/chunk-OBGYXMZ3.js +0 -218
- package/dist/chunk-OBGYXMZ3.js.map +0 -1
- package/dist/chunk-PSMGRUU5.js.map +0 -1
- package/dist/chunk-U2AL7XFY.js.map +0 -1
- package/dist/chunk-U4P2VJCV.js.map +0 -1
- package/dist/chunk-VPF7M2PB.js.map +0 -1
- package/dist/chunk-XA74HBMH.js.map +0 -1
- package/dist/chunk-ZTP2JSQ6.js.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { a as Palette } from './global.types-
|
|
2
|
+
import { a as Palette } from './global.types-CjO3VRWu.cjs';
|
|
3
3
|
|
|
4
4
|
type ExpansionPanelValue = react.Key;
|
|
5
5
|
type ExpansionPanelVariant = 'elevated' | 'outlined' | 'tonal' | 'plain';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { a as Palette } from './global.types-
|
|
2
|
+
import { a as Palette } from './global.types-CjO3VRWu.js';
|
|
3
3
|
|
|
4
4
|
type ExpansionPanelValue = react.Key;
|
|
5
5
|
type ExpansionPanelVariant = 'elevated' | 'outlined' | 'tonal' | 'plain';
|
package/dist/alert.cjs
CHANGED
|
@@ -5,9 +5,9 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
|
|
6
6
|
// src/Info/Alert/index.tsx
|
|
7
7
|
var Alert = ({ className, children, ...rest }) => {
|
|
8
|
-
const classBase = "text-center p-4 bg-neutral-200 rounded-md
|
|
9
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: tailwindMerge.twMerge("grid grid-cols-7 bg-neutral-200", className), children: [
|
|
10
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 pt-4 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-google text-2xl" }) }),
|
|
8
|
+
const classBase = "text-center p-4 bg-neutral-200 text-gray-900 rounded-md dark:bg-neutral-800 dark:text-gray-100";
|
|
9
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: tailwindMerge.twMerge("grid grid-cols-7 bg-neutral-200 dark:bg-neutral-800", className), children: [
|
|
10
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 pt-4 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-google text-2xl text-gray-700 dark:text-gray-200" }) }),
|
|
11
11
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("col-span-6", classBase), children })
|
|
12
12
|
] });
|
|
13
13
|
};
|
package/dist/alert.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Info/Alert/index.tsx"],"names":["jsxs","twMerge","jsx"],"mappings":";;;;;;AASA,IAAM,QAA8B,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,MAAK,KAAM;AACxE,EAAA,MAAM,SAAA,GAAY,
|
|
1
|
+
{"version":3,"sources":["../src/Info/Alert/index.tsx"],"names":["jsxs","twMerge","jsx"],"mappings":";;;;;;AASA,IAAM,QAA8B,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,MAAK,KAAM;AACxE,EAAA,MAAM,SAAA,GAAY,gGAAA;AAElB,EAAA,uBACEA,eAAA,CAAC,SAAK,GAAG,IAAA,EAAM,WAAWC,qBAAA,CAAQ,qDAAA,EAAuD,SAAS,CAAA,EAChG,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,SAAI,SAAA,EAAU,sBAAA,EACb,yCAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4DAA2D,CAAA,EAC1E,CAAA;AAAA,mCACC,KAAA,EAAA,EAAI,SAAA,EAAWD,sBAAQ,YAAA,EAAc,SAAS,GAAI,QAAA,EAAS;AAAA,GAAA,EAC9D,CAAA;AAEJ,CAAA;AACA,IAAO,aAAA,GAAQ","file":"alert.cjs","sourcesContent":["import { twMerge } from 'tailwind-merge';\n\nexport type AlertProps = {\n children?: React.ReactNode;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Informational banner layout with icon column and message body.\n */\nconst Alert: React.FC<AlertProps> = ({ className, children, ...rest }) => {\n const classBase = 'text-center p-4 bg-neutral-200 text-gray-900 rounded-md dark:bg-neutral-800 dark:text-gray-100';\n\n return (\n <div {...rest} className={twMerge('grid grid-cols-7 bg-neutral-200 dark:bg-neutral-800', className)}>\n <div className='col-span-1 pt-4 pl-4'>\n <i className='mdi mdi-google text-2xl text-gray-700 dark:text-gray-200'></i>\n </div>\n <div className={twMerge('col-span-6', classBase)}>{children}</div>\n </div>\n );\n};\nexport default Alert;\n"]}
|
package/dist/alert.js
CHANGED
package/dist/badge.cjs
CHANGED
|
@@ -50,14 +50,14 @@ var placementGeometries = {
|
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
52
|
var badgePaletteClasses = {
|
|
53
|
-
primary: "bg-primary text-white",
|
|
54
|
-
neutral: "bg-gray-500 text-white",
|
|
55
|
-
info: "bg-sky-500 text-white",
|
|
56
|
-
success: "bg-emerald-500 text-white",
|
|
57
|
-
warning: "bg-amber-500 text-white",
|
|
58
|
-
danger: "bg-red-500 text-white",
|
|
59
|
-
surface: "bg-white text-gray-900 border border-gray-200",
|
|
60
|
-
bw: "bg-white text-black border border-black"
|
|
53
|
+
primary: "bg-primary text-white dark:bg-primary dark:text-white",
|
|
54
|
+
neutral: "bg-gray-500 text-white dark:bg-gray-600 dark:text-white",
|
|
55
|
+
info: "bg-sky-500 text-white dark:bg-sky-500 dark:text-white",
|
|
56
|
+
success: "bg-emerald-500 text-white dark:bg-emerald-500 dark:text-white",
|
|
57
|
+
warning: "bg-amber-500 text-white dark:bg-amber-500 dark:text-white",
|
|
58
|
+
danger: "bg-red-500 text-white dark:bg-red-500 dark:text-white",
|
|
59
|
+
surface: "bg-white text-gray-900 border border-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700",
|
|
60
|
+
bw: "bg-white text-black border border-black dark:bg-black dark:text-white dark:border-white/70"
|
|
61
61
|
};
|
|
62
62
|
var resolvePlacementGeometry = (placement, overlap) => {
|
|
63
63
|
const group = placementGeometries[placement] ?? placementGeometries["top-end"];
|
|
@@ -177,13 +177,13 @@ var Badge = ({
|
|
|
177
177
|
const badgeContentClasses = tailwindMerge.twMerge(
|
|
178
178
|
"inline-flex items-center justify-center whitespace-nowrap rounded-full px-2.5 py-1.5 text-xs font-semibold leading-none min-w-6 min-h-6",
|
|
179
179
|
paletteClass,
|
|
180
|
-
bordered ? "ring-2 ring-white ring-offset-0" : void 0,
|
|
180
|
+
bordered ? "ring-2 ring-white ring-offset-0 dark:ring-gray-900" : void 0,
|
|
181
181
|
badgeClassName
|
|
182
182
|
);
|
|
183
183
|
const badgeDotClasses = tailwindMerge.twMerge(
|
|
184
184
|
"inline-block h-2 w-2 rounded-full",
|
|
185
185
|
paletteClass,
|
|
186
|
-
bordered ? "ring-2 ring-white ring-offset-0" : void 0,
|
|
186
|
+
bordered ? "ring-2 ring-white ring-offset-0 dark:ring-gray-900" : void 0,
|
|
187
187
|
badgeClassName
|
|
188
188
|
);
|
|
189
189
|
const rootClasses = tailwindMerge.twMerge(
|
package/dist/badge.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Info/Badge/states.badge.ts","../src/Info/Badge/index.tsx"],"names":["normalized","React","twMerge","jsx","jsxs"],"mappings":"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","file":"badge.cjs","sourcesContent":["import { Palette } from '@lindle/linoardo/global.types';\nimport { BadgePlacement, IconDefinition, PlacementGeometry } from './types.badge';\n\nexport const placementGeometries: Record<BadgePlacement, { overlap: PlacementGeometry; detached: PlacementGeometry }> =\n {\n 'top-end': {\n overlap: { top: 0, right: 0, translateX: '50%', translateY: '-50%' },\n detached: { top: 0, right: 0, translateX: '50%', translateY: '-100%' }\n },\n 'top-start': {\n overlap: { top: 0, left: 0, translateX: '-50%', translateY: '-50%' },\n detached: { top: 0, left: 0, translateX: '-50%', translateY: '-100%' }\n },\n 'bottom-end': {\n overlap: { bottom: 0, right: 0, translateX: '50%', translateY: '50%' },\n detached: { bottom: 0, right: 0, translateX: '50%', translateY: '100%' }\n },\n 'bottom-start': {\n overlap: { bottom: 0, left: 0, translateX: '-50%', translateY: '50%' },\n detached: { bottom: 0, left: 0, translateX: '-50%', translateY: '100%' }\n },\n center: {\n overlap: { top: '50%', left: '50%', translateX: '-50%', translateY: '-50%' },\n detached: { top: '50%', left: '50%', translateX: '-50%', translateY: '-50%' }\n }\n };\n\nexport const badgePaletteClasses: Record<Palette, string> = {\n primary: 'bg-primary text-white',\n neutral: 'bg-gray-500 text-white',\n info: 'bg-sky-500 text-white',\n success: 'bg-emerald-500 text-white',\n warning: 'bg-amber-500 text-white',\n danger: 'bg-red-500 text-white',\n surface: 'bg-white text-gray-900 border border-gray-200',\n bw: 'bg-white text-black border border-black'\n};\n\nexport const resolvePlacementGeometry = (placement: BadgePlacement, overlap: boolean): PlacementGeometry => {\n const group = placementGeometries[placement] ?? placementGeometries['top-end'];\n return overlap ? group.overlap : group.detached;\n};\n\nexport const buildTranslateComponent = (base: string, delta: number) => {\n if (!delta) {\n return base;\n }\n\n const normalizedBase = base.endsWith('%') || base.endsWith('px') ? base : `${base}`;\n const operator = delta >= 0 ? '+' : '-';\n const magnitude = Math.abs(delta);\n return `calc(${normalizedBase} ${operator} ${magnitude}px)`;\n};\n\nconst iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n\nexport const resolveIconClassName = (icon?: IconDefinition) => {\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 base = iconBaseClasses[normalizedLibrary as keyof typeof iconBaseClasses] ?? [normalizedLibrary];\n const iconName = providedName.trim();\n if (!iconName) {\n return base.join(' ');\n }\n\n const normalized = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return Array.from(new Set([...base, normalized])).join(' ');\n};\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { BadgeProps } from './types.badge';\nimport {\n badgePaletteClasses,\n buildTranslateComponent,\n resolveIconClassName,\n resolvePlacementGeometry\n} from './states.badge';\n\n/**\n * Notification badge that can render numbers, dots or icons with flexible positioning.\n */\nconst Badge: React.FC<BadgeProps> = ({\n children,\n content,\n max = 99,\n showZero = false,\n dot = false,\n icon,\n color = 'primary',\n placement = 'top-end',\n offset,\n overlap = true,\n bordered = false,\n floating = false,\n visible = true,\n badgeClassName,\n inline = true,\n className,\n ...rest\n}) => {\n const hasChildren = React.Children.count(children) > 0;\n const iconClassName = resolveIconClassName(icon);\n const isNumberContent = typeof content === 'number' && Number.isFinite(content);\n\n let displayValue: React.ReactNode = content;\n if (!dot && !iconClassName && isNumberContent) {\n const numericContent = content as number;\n if (typeof max === 'number' && Number.isFinite(max) && numericContent > max) {\n displayValue = `${max}+`;\n }\n }\n\n if (!dot && !iconClassName && isNumberContent) {\n const numericContent = content as number;\n if (!showZero && numericContent === 0) {\n displayValue = undefined;\n }\n }\n\n const hasRenderableContent =\n dot || Boolean(iconClassName) || (displayValue !== null && displayValue !== undefined && displayValue !== '');\n\n const shouldRenderBadge = visible && hasRenderableContent;\n const paletteClass = badgePaletteClasses[color] ?? badgePaletteClasses.primary;\n\n const [offsetX = 0, offsetY = 0] = offset ?? [];\n\n const isPositioned = hasChildren && !floating;\n\n const placementStyle: React.CSSProperties | undefined = (() => {\n if (!isPositioned) {\n if (!offsetX && !offsetY) {\n return undefined;\n }\n\n return {\n transform: `translate(${offsetX}px, ${offsetY}px)`\n };\n }\n\n const geometry = resolvePlacementGeometry(placement, overlap);\n const style: React.CSSProperties = {};\n\n if (geometry.top !== undefined) {\n style.top = geometry.top;\n }\n if (geometry.right !== undefined) {\n style.right = geometry.right;\n }\n if (geometry.bottom !== undefined) {\n style.bottom = geometry.bottom;\n }\n if (geometry.left !== undefined) {\n style.left = geometry.left;\n }\n\n const translateX = buildTranslateComponent(geometry.translateX, offsetX);\n const translateY = buildTranslateComponent(geometry.translateY, offsetY);\n style.transform = `translate(${translateX}, ${translateY})`;\n return style;\n })();\n\n const badgeContainerClasses = twMerge(\n 'pointer-events-none select-none',\n isPositioned ? 'absolute' : 'relative',\n 'flex items-center justify-center whitespace-nowrap',\n dot ? undefined : 'p-0'\n );\n\n const badgeContentClasses = twMerge(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-full px-2.5 py-1.5 text-xs font-semibold leading-none min-w-6 min-h-6',\n paletteClass,\n bordered ? 'ring-2 ring-white ring-offset-0' : undefined,\n badgeClassName\n );\n\n const badgeDotClasses = twMerge(\n 'inline-block h-2 w-2 rounded-full',\n paletteClass,\n bordered ? 'ring-2 ring-white ring-offset-0' : undefined,\n badgeClassName\n );\n\n const rootClasses = twMerge(\n 'relative',\n inline ? 'inline-flex' : 'flex',\n hasChildren ? undefined : 'items-center justify-center',\n className\n );\n\n const resolvedChildren =\n typeof children === 'string' || typeof children === 'number' ? (\n <span className='inline-flex items-center justify-center'>{children}</span>\n ) : (\n children\n );\n\n return (\n <span {...rest} className={rootClasses}>\n {resolvedChildren}\n {shouldRenderBadge && (\n <span className={badgeContainerClasses} style={placementStyle}>\n {dot ? (\n <span className={badgeDotClasses} />\n ) : (\n <span className={twMerge(badgeContentClasses)}>\n {iconClassName ? <i className={iconClassName} aria-hidden /> : displayValue}\n </span>\n )}\n </span>\n )}\n </span>\n );\n};\n\nexport default Badge;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/Info/Badge/states.badge.ts","../src/Info/Badge/index.tsx"],"names":["normalized","React","twMerge","jsx","jsxs"],"mappings":"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","file":"badge.cjs","sourcesContent":["import { Palette } from '@lindle/linoardo/global.types';\nimport { BadgePlacement, IconDefinition, PlacementGeometry } from './types.badge';\n\nexport const placementGeometries: Record<BadgePlacement, { overlap: PlacementGeometry; detached: PlacementGeometry }> =\n {\n 'top-end': {\n overlap: { top: 0, right: 0, translateX: '50%', translateY: '-50%' },\n detached: { top: 0, right: 0, translateX: '50%', translateY: '-100%' }\n },\n 'top-start': {\n overlap: { top: 0, left: 0, translateX: '-50%', translateY: '-50%' },\n detached: { top: 0, left: 0, translateX: '-50%', translateY: '-100%' }\n },\n 'bottom-end': {\n overlap: { bottom: 0, right: 0, translateX: '50%', translateY: '50%' },\n detached: { bottom: 0, right: 0, translateX: '50%', translateY: '100%' }\n },\n 'bottom-start': {\n overlap: { bottom: 0, left: 0, translateX: '-50%', translateY: '50%' },\n detached: { bottom: 0, left: 0, translateX: '-50%', translateY: '100%' }\n },\n center: {\n overlap: { top: '50%', left: '50%', translateX: '-50%', translateY: '-50%' },\n detached: { top: '50%', left: '50%', translateX: '-50%', translateY: '-50%' }\n }\n };\n\nexport const badgePaletteClasses: Record<Palette, string> = {\n primary: 'bg-primary text-white dark:bg-primary dark:text-white',\n neutral: 'bg-gray-500 text-white dark:bg-gray-600 dark:text-white',\n info: 'bg-sky-500 text-white dark:bg-sky-500 dark:text-white',\n success: 'bg-emerald-500 text-white dark:bg-emerald-500 dark:text-white',\n warning: 'bg-amber-500 text-white dark:bg-amber-500 dark:text-white',\n danger: 'bg-red-500 text-white dark:bg-red-500 dark:text-white',\n surface: 'bg-white text-gray-900 border border-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700',\n bw: 'bg-white text-black border border-black dark:bg-black dark:text-white dark:border-white/70'\n};\n\nexport const resolvePlacementGeometry = (placement: BadgePlacement, overlap: boolean): PlacementGeometry => {\n const group = placementGeometries[placement] ?? placementGeometries['top-end'];\n return overlap ? group.overlap : group.detached;\n};\n\nexport const buildTranslateComponent = (base: string, delta: number) => {\n if (!delta) {\n return base;\n }\n\n const normalizedBase = base.endsWith('%') || base.endsWith('px') ? base : `${base}`;\n const operator = delta >= 0 ? '+' : '-';\n const magnitude = Math.abs(delta);\n return `calc(${normalizedBase} ${operator} ${magnitude}px)`;\n};\n\nconst iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n\nexport const resolveIconClassName = (icon?: IconDefinition) => {\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 base = iconBaseClasses[normalizedLibrary as keyof typeof iconBaseClasses] ?? [normalizedLibrary];\n const iconName = providedName.trim();\n if (!iconName) {\n return base.join(' ');\n }\n\n const normalized = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return Array.from(new Set([...base, normalized])).join(' ');\n};\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { BadgeProps } from './types.badge';\nimport {\n badgePaletteClasses,\n buildTranslateComponent,\n resolveIconClassName,\n resolvePlacementGeometry\n} from './states.badge';\n\n/**\n * Notification badge that can render numbers, dots or icons with flexible positioning.\n */\nconst Badge: React.FC<BadgeProps> = ({\n children,\n content,\n max = 99,\n showZero = false,\n dot = false,\n icon,\n color = 'primary',\n placement = 'top-end',\n offset,\n overlap = true,\n bordered = false,\n floating = false,\n visible = true,\n badgeClassName,\n inline = true,\n className,\n ...rest\n}) => {\n const hasChildren = React.Children.count(children) > 0;\n const iconClassName = resolveIconClassName(icon);\n const isNumberContent = typeof content === 'number' && Number.isFinite(content);\n\n let displayValue: React.ReactNode = content;\n if (!dot && !iconClassName && isNumberContent) {\n const numericContent = content as number;\n if (typeof max === 'number' && Number.isFinite(max) && numericContent > max) {\n displayValue = `${max}+`;\n }\n }\n\n if (!dot && !iconClassName && isNumberContent) {\n const numericContent = content as number;\n if (!showZero && numericContent === 0) {\n displayValue = undefined;\n }\n }\n\n const hasRenderableContent =\n dot || Boolean(iconClassName) || (displayValue !== null && displayValue !== undefined && displayValue !== '');\n\n const shouldRenderBadge = visible && hasRenderableContent;\n const paletteClass = badgePaletteClasses[color] ?? badgePaletteClasses.primary;\n\n const [offsetX = 0, offsetY = 0] = offset ?? [];\n\n const isPositioned = hasChildren && !floating;\n\n const placementStyle: React.CSSProperties | undefined = (() => {\n if (!isPositioned) {\n if (!offsetX && !offsetY) {\n return undefined;\n }\n\n return {\n transform: `translate(${offsetX}px, ${offsetY}px)`\n };\n }\n\n const geometry = resolvePlacementGeometry(placement, overlap);\n const style: React.CSSProperties = {};\n\n if (geometry.top !== undefined) {\n style.top = geometry.top;\n }\n if (geometry.right !== undefined) {\n style.right = geometry.right;\n }\n if (geometry.bottom !== undefined) {\n style.bottom = geometry.bottom;\n }\n if (geometry.left !== undefined) {\n style.left = geometry.left;\n }\n\n const translateX = buildTranslateComponent(geometry.translateX, offsetX);\n const translateY = buildTranslateComponent(geometry.translateY, offsetY);\n style.transform = `translate(${translateX}, ${translateY})`;\n return style;\n })();\n\n const badgeContainerClasses = twMerge(\n 'pointer-events-none select-none',\n isPositioned ? 'absolute' : 'relative',\n 'flex items-center justify-center whitespace-nowrap',\n dot ? undefined : 'p-0'\n );\n\n const badgeContentClasses = twMerge(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-full px-2.5 py-1.5 text-xs font-semibold leading-none min-w-6 min-h-6',\n paletteClass,\n bordered ? 'ring-2 ring-white ring-offset-0 dark:ring-gray-900' : undefined,\n badgeClassName\n );\n\n const badgeDotClasses = twMerge(\n 'inline-block h-2 w-2 rounded-full',\n paletteClass,\n bordered ? 'ring-2 ring-white ring-offset-0 dark:ring-gray-900' : undefined,\n badgeClassName\n );\n\n const rootClasses = twMerge(\n 'relative',\n inline ? 'inline-flex' : 'flex',\n hasChildren ? undefined : 'items-center justify-center',\n className\n );\n\n const resolvedChildren =\n typeof children === 'string' || typeof children === 'number' ? (\n <span className='inline-flex items-center justify-center'>{children}</span>\n ) : (\n children\n );\n\n return (\n <span {...rest} className={rootClasses}>\n {resolvedChildren}\n {shouldRenderBadge && (\n <span className={badgeContainerClasses} style={placementStyle}>\n {dot ? (\n <span className={badgeDotClasses} />\n ) : (\n <span className={twMerge(badgeContentClasses)}>\n {iconClassName ? <i className={iconClassName} aria-hidden /> : displayValue}\n </span>\n )}\n </span>\n )}\n </span>\n );\n};\n\nexport default Badge;\n"]}
|
package/dist/badge.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { a as Palette } from './global.types-
|
|
2
|
+
import { a as Palette } from './global.types-CjO3VRWu.cjs';
|
|
3
3
|
|
|
4
4
|
type BadgePlacement = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start' | 'center';
|
|
5
5
|
type IconDefinition = string | [library: string, icon: string];
|
package/dist/badge.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { a as Palette } from './global.types-
|
|
2
|
+
import { a as Palette } from './global.types-CjO3VRWu.js';
|
|
3
3
|
|
|
4
4
|
type BadgePlacement = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start' | 'center';
|
|
5
5
|
type IconDefinition = string | [library: string, icon: string];
|
package/dist/badge.js
CHANGED
package/dist/block.cjs
CHANGED
|
@@ -43,7 +43,6 @@ var variantClasses = {
|
|
|
43
43
|
ghost: "rounded-xl bg-white/20 backdrop-opacity-5 border border-white/20 dark:bg-slate-900/30 dark:border-white/10",
|
|
44
44
|
filled: "rounded-xl bg-white/60 backdrop-opacity-5 border border-white/40 dark:bg-slate-900/70 dark:border-white/15",
|
|
45
45
|
underlined: "rounded-xl bg-white/20 backdrop-opacity-5 border-b border-white/40 dark:bg-slate-900/30 dark:border-white/20",
|
|
46
|
-
rounded: "rounded-3xl bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10",
|
|
47
46
|
sharp: "rounded-none bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10"
|
|
48
47
|
};
|
|
49
48
|
var Block = React__namespace.forwardRef(function Block2({ className, variant = "solid", blur = "sm", interactive = false, children, ...rest }, ref) {
|
package/dist/block.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Blocks/Block/index.tsx"],"names":["React","Block","jsx","twMerge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAM,SAAA,GAAY,uEAAA;AAElB,IAAM,WAAA,GAAyC;AAAA,EAC7C,IAAA,EAAM,oBAAA;AAAA,EACN,EAAA,EAAI,kBAAA;AAAA,EACJ,IAAA,EAAM,eAAA;AAAA,EACN,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,KAAA,EAAO,mBAAA;AAAA,EACP,KAAA,EAAO;AACT,CAAA;AAEA,IAAM,cAAA,GAAgD;AAAA,EACpD,KAAA,EACE,4GAAA;AAAA,EACF,OAAA,EACE,4GAAA;AAAA,EACF,IAAA,EAAM,qDAAA;AAAA,EACN,KAAA,EACE,4GAAA;AAAA,EACF,MAAA,EACE,4GAAA;AAAA,EACF,UAAA,EACE,8GAAA;AAAA,EACF,
|
|
1
|
+
{"version":3,"sources":["../src/Blocks/Block/index.tsx"],"names":["React","Block","jsx","twMerge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAM,SAAA,GAAY,uEAAA;AAElB,IAAM,WAAA,GAAyC;AAAA,EAC7C,IAAA,EAAM,oBAAA;AAAA,EACN,EAAA,EAAI,kBAAA;AAAA,EACJ,IAAA,EAAM,eAAA;AAAA,EACN,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,KAAA,EAAO,mBAAA;AAAA,EACP,KAAA,EAAO;AACT,CAAA;AAEA,IAAM,cAAA,GAAgD;AAAA,EACpD,KAAA,EACE,4GAAA;AAAA,EACF,OAAA,EACE,4GAAA;AAAA,EACF,IAAA,EAAM,qDAAA;AAAA,EACN,KAAA,EACE,4GAAA;AAAA,EACF,MAAA,EACE,4GAAA;AAAA,EACF,UAAA,EACE,8GAAA;AAAA,EACF,KAAA,EACE;AACJ,CAAA;AAKA,IAAM,QAAcA,gBAAA,CAAA,UAAA,CAAuC,SAASC,MAAAA,CAClE,EAAE,WAAW,OAAA,GAAU,OAAA,EAAS,IAAA,GAAO,IAAA,EAAM,cAAc,KAAA,EAAO,QAAA,EAAU,GAAG,IAAA,IAC/E,GAAA,EACA;AACA,EAAA,MAAM,YAAA,GAAe,cAAA,CAAe,OAAO,CAAA,IAAK,cAAA,CAAe,KAAA;AAC/D,EAAA,MAAM,SAAA,GAAY,WAAA,CAAY,IAAI,CAAA,IAAK,WAAA,CAAY,EAAA;AACnD,EAAA,MAAM,gBAAA,GAAmB,cACrB,uPAAA,GACA,MAAA;AACJ,EAAA,MAAM,gBAAgB,WAAA,IAAe,IAAA,CAAK,QAAA,KAAa,MAAA,GAAY,IAAI,IAAA,CAAK,QAAA;AAE5E,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,QAAA,EAAU,aAAA;AAAA,MACV,WAAWC,qBAAA,CAAQ,SAAA,EAAW,cAAc,SAAA,EAAW,KAAA,EAAO,kBAAkB,SAAS,CAAA;AAAA,MAExF;AAAA;AAAA,GACH;AAEJ,CAAC,CAAA;AAED,KAAA,CAAM,WAAA,GAAc,OAAA;AAIpB,IAAO,aAAA,GAAQ","file":"block.cjs","sourcesContent":["import * as React from 'react';\nimport type { GlobalVariant } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { BlockBlur, BlockProps } from './types.block';\n\nconst blockBase = 'block-base relative overflow-hidden text-gray-900 dark:text-slate-100';\n\nconst blurClasses: Record<BlockBlur, string> = {\n none: 'backdrop-blur-none',\n sm: 'backdrop-blur-sm',\n base: 'backdrop-blur',\n md: 'backdrop-blur-md',\n lg: 'backdrop-blur-lg',\n xl: 'backdrop-blur-xl',\n '2xl': 'backdrop-blur-2xl',\n '3xl': 'backdrop-blur-3xl'\n};\n\nconst variantClasses: Record<GlobalVariant, string> = {\n solid:\n 'rounded-xl bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10',\n outline:\n 'rounded-xl bg-white/10 backdrop-opacity-5 border border-white/60 dark:bg-slate-900/30 dark:border-white/20',\n text: 'rounded-xl bg-transparent border border-transparent',\n ghost:\n 'rounded-xl bg-white/20 backdrop-opacity-5 border border-white/20 dark:bg-slate-900/30 dark:border-white/10',\n filled:\n 'rounded-xl bg-white/60 backdrop-opacity-5 border border-white/40 dark:bg-slate-900/70 dark:border-white/15',\n underlined:\n 'rounded-xl bg-white/20 backdrop-opacity-5 border-b border-white/40 dark:bg-slate-900/30 dark:border-white/20',\n sharp:\n 'rounded-none bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10'\n};\n\n/**\n * Glass-like block container with blur and shared variant styling.\n */\nconst Block = React.forwardRef<HTMLDivElement, BlockProps>(function Block(\n { className, variant = 'solid', blur = 'sm', interactive = false, children, ...rest },\n ref\n) {\n const variantClass = variantClasses[variant] ?? variantClasses.solid;\n const blurClass = blurClasses[blur] ?? blurClasses.sm;\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\n return (\n <div\n {...rest}\n ref={ref}\n tabIndex={tabIndexValue}\n className={twMerge(blockBase, variantClass, blurClass, 'p-2', interactiveClass, className)}\n >\n {children}\n </div>\n );\n});\n\nBlock.displayName = 'Block';\n\nexport type { BlockProps, BlockBlur };\n\nexport default Block;\n"]}
|
package/dist/block.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { b as GlobalVariant } from './global.types-
|
|
2
|
+
import { b as GlobalVariant } from './global.types-CjO3VRWu.cjs';
|
|
3
3
|
|
|
4
4
|
type BlockBlur = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
5
5
|
type BlockProps = react.HTMLAttributes<HTMLDivElement> & {
|
package/dist/block.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { b as GlobalVariant } from './global.types-
|
|
2
|
+
import { b as GlobalVariant } from './global.types-CjO3VRWu.js';
|
|
3
3
|
|
|
4
4
|
type BlockBlur = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
5
5
|
type BlockProps = react.HTMLAttributes<HTMLDivElement> & {
|
package/dist/block.js
CHANGED
package/dist/button.cjs
CHANGED
|
@@ -32,87 +32,79 @@ var iconBaseClasses = {
|
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
// src/Containment/Button/states.button.ts
|
|
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";
|
|
35
|
+
var base = "btn-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
|
|
36
36
|
var blackAndWhitePaletteClasses = {
|
|
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
|
-
|
|
44
|
-
sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40"
|
|
37
|
+
solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
|
|
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 dark:border-white dark:text-white dark:bg-transparent dark:hover:bg-white dark:hover:text-black dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
|
|
39
|
+
ghost: "text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent dark:text-white dark:bg-neutral-800 dark:hover:bg-neutral-700",
|
|
40
|
+
text: "bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent dark:text-white dark:hover:bg-neutral-800",
|
|
41
|
+
filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20 dark:bg-white/10 dark:text-white dark:border-white/30 dark:hover:bg-white/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 dark:text-white dark:hover:bg-neutral-800",
|
|
43
|
+
sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40 dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white/40"
|
|
45
44
|
};
|
|
46
45
|
var paletteVariantClasses = {
|
|
47
46
|
primary: {
|
|
48
47
|
solid: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
|
|
49
48
|
sharp: "rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
|
|
50
|
-
outline: "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary",
|
|
51
|
-
ghost: "text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent",
|
|
52
|
-
text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent",
|
|
53
|
-
filled: "bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25",
|
|
54
|
-
underlined: "bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25"
|
|
55
|
-
rounded: "rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25"
|
|
49
|
+
outline: "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary dark:bg-gray-900 dark:text-primary dark:border-primary/60 dark:hover:bg-primary dark:hover:text-white",
|
|
50
|
+
ghost: "text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent dark:bg-primary/20 dark:hover:bg-primary/30",
|
|
51
|
+
text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent dark:hover:bg-primary/20",
|
|
52
|
+
filled: "bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25 dark:bg-primary/20 dark:border-primary/40 dark:hover:bg-primary/30",
|
|
53
|
+
underlined: "bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25 dark:hover:bg-primary/15"
|
|
56
54
|
},
|
|
57
55
|
neutral: {
|
|
58
56
|
solid: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
|
|
59
57
|
sharp: "rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
|
|
60
|
-
outline: "border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400",
|
|
61
|
-
ghost: "text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent",
|
|
62
|
-
text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent",
|
|
63
|
-
filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300",
|
|
64
|
-
underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300"
|
|
65
|
-
rounded: "rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300"
|
|
58
|
+
outline: "border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-200 dark:hover:text-gray-900",
|
|
59
|
+
ghost: "text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700",
|
|
60
|
+
text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent dark:text-gray-200 dark:hover:bg-gray-800",
|
|
61
|
+
filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700",
|
|
62
|
+
underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300 dark:text-gray-100 dark:hover:bg-gray-800"
|
|
66
63
|
},
|
|
67
64
|
info: {
|
|
68
65
|
solid: "bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
|
|
69
66
|
sharp: "rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
|
|
70
|
-
outline: "border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400",
|
|
71
|
-
ghost: "text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent",
|
|
72
|
-
text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent",
|
|
73
|
-
filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200",
|
|
74
|
-
underlined: "bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200"
|
|
75
|
-
rounded: "rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200"
|
|
67
|
+
outline: "border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400 dark:bg-gray-900 dark:text-sky-400 dark:border-sky-500/70 dark:hover:bg-sky-500 dark:hover:text-white",
|
|
68
|
+
ghost: "text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent dark:text-sky-300 dark:bg-sky-900/40 dark:hover:bg-sky-900/55",
|
|
69
|
+
text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent dark:text-sky-300 dark:hover:bg-sky-900/35",
|
|
70
|
+
filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200 dark:bg-sky-900/35 dark:text-sky-200 dark:border-sky-700/60 dark:hover:bg-sky-900/50",
|
|
71
|
+
underlined: "bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200 dark:text-sky-300 dark:hover:bg-sky-900/30"
|
|
76
72
|
},
|
|
77
73
|
success: {
|
|
78
74
|
solid: "bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
|
|
79
75
|
sharp: "rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
|
|
80
|
-
outline: "border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400",
|
|
81
|
-
ghost: "text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent",
|
|
82
|
-
text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent",
|
|
83
|
-
filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200",
|
|
84
|
-
underlined: "bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200"
|
|
85
|
-
rounded: "rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200"
|
|
76
|
+
outline: "border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400 dark:bg-gray-900 dark:text-emerald-400 dark:border-emerald-500/70 dark:hover:bg-emerald-500 dark:hover:text-white",
|
|
77
|
+
ghost: "text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent dark:text-emerald-300 dark:bg-emerald-900/35 dark:hover:bg-emerald-900/50",
|
|
78
|
+
text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent dark:text-emerald-300 dark:hover:bg-emerald-900/30",
|
|
79
|
+
filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200 dark:bg-emerald-900/35 dark:text-emerald-200 dark:border-emerald-700/60 dark:hover:bg-emerald-900/50",
|
|
80
|
+
underlined: "bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200 dark:text-emerald-300 dark:hover:bg-emerald-900/30"
|
|
86
81
|
},
|
|
87
82
|
warning: {
|
|
88
83
|
solid: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
|
|
89
84
|
sharp: "rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
|
|
90
|
-
outline: "border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400",
|
|
91
|
-
ghost: "text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent",
|
|
92
|
-
text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent",
|
|
93
|
-
filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200",
|
|
94
|
-
underlined: "bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200"
|
|
95
|
-
rounded: "rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200"
|
|
85
|
+
outline: "border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400 dark:bg-gray-900 dark:text-amber-300 dark:border-amber-500/70 dark:hover:bg-amber-500 dark:hover:text-white",
|
|
86
|
+
ghost: "text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent dark:text-amber-300 dark:bg-amber-900/35 dark:hover:bg-amber-900/50",
|
|
87
|
+
text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent dark:text-amber-300 dark:hover:bg-amber-900/30",
|
|
88
|
+
filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200 dark:bg-amber-900/35 dark:text-amber-200 dark:border-amber-700/60 dark:hover:bg-amber-900/50",
|
|
89
|
+
underlined: "bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200 dark:text-amber-300 dark:hover:bg-amber-900/30"
|
|
96
90
|
},
|
|
97
91
|
danger: {
|
|
98
92
|
solid: "bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
|
|
99
93
|
sharp: "rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
|
|
100
|
-
outline: "border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400",
|
|
101
|
-
ghost: "text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent",
|
|
102
|
-
text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent",
|
|
103
|
-
filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200",
|
|
104
|
-
underlined: "bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200"
|
|
105
|
-
rounded: "rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200"
|
|
94
|
+
outline: "border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400 dark:bg-gray-900 dark:text-red-400 dark:border-red-500/70 dark:hover:bg-red-500 dark:hover:text-white",
|
|
95
|
+
ghost: "text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent dark:text-red-300 dark:bg-red-900/35 dark:hover:bg-red-900/50",
|
|
96
|
+
text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent dark:text-red-300 dark:hover:bg-red-900/30",
|
|
97
|
+
filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200 dark:bg-red-900/35 dark:text-red-200 dark:border-red-700/60 dark:hover:bg-red-900/50",
|
|
98
|
+
underlined: "bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200 dark:text-red-300 dark:hover:bg-red-900/30"
|
|
106
99
|
},
|
|
107
100
|
surface: {
|
|
108
|
-
solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
|
|
109
|
-
sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
|
|
110
|
-
outline: "border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200",
|
|
111
|
-
ghost: "text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent",
|
|
112
|
-
text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent",
|
|
113
|
-
filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200",
|
|
114
|
-
underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200"
|
|
115
|
-
rounded: "rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200"
|
|
101
|
+
solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
|
|
102
|
+
sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
|
|
103
|
+
outline: "border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200 dark:border-gray-600 dark:text-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800",
|
|
104
|
+
ghost: "text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent dark:text-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700",
|
|
105
|
+
text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent dark:text-gray-100 dark:hover:bg-gray-800",
|
|
106
|
+
filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700",
|
|
107
|
+
underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200 dark:text-gray-100 dark:hover:bg-gray-800"
|
|
116
108
|
},
|
|
117
109
|
bw: blackAndWhitePaletteClasses
|
|
118
110
|
};
|
|
@@ -168,7 +160,7 @@ var iconOnlyIconSizeClasses = {
|
|
|
168
160
|
large: "text-xl",
|
|
169
161
|
"x-large": "text-2xl"
|
|
170
162
|
};
|
|
171
|
-
var
|
|
163
|
+
var ButtonBase = React__namespace.forwardRef(
|
|
172
164
|
({
|
|
173
165
|
variant = "solid",
|
|
174
166
|
color = "primary",
|
|
@@ -223,7 +215,71 @@ var Button = React__namespace.forwardRef(
|
|
|
223
215
|
);
|
|
224
216
|
}
|
|
225
217
|
);
|
|
226
|
-
|
|
218
|
+
ButtonBase.displayName = "Button";
|
|
219
|
+
var isButtonElement = (element) => {
|
|
220
|
+
if (!React__namespace.isValidElement(element)) {
|
|
221
|
+
return false;
|
|
222
|
+
}
|
|
223
|
+
const elementType = element.type;
|
|
224
|
+
return element.type === ButtonBase || elementType.displayName === ButtonBase.displayName;
|
|
225
|
+
};
|
|
226
|
+
var ButtonGroup = React__namespace.forwardRef((props, ref) => {
|
|
227
|
+
const {
|
|
228
|
+
variant,
|
|
229
|
+
color,
|
|
230
|
+
size,
|
|
231
|
+
block = false,
|
|
232
|
+
disabled = false,
|
|
233
|
+
loading = false,
|
|
234
|
+
iconOnly,
|
|
235
|
+
vertical = false,
|
|
236
|
+
attached = true,
|
|
237
|
+
className,
|
|
238
|
+
role,
|
|
239
|
+
children,
|
|
240
|
+
...rest
|
|
241
|
+
} = props;
|
|
242
|
+
const groupBase = vertical ? "inline-flex w-fit flex-col" : "inline-flex w-fit items-stretch";
|
|
243
|
+
const blockClass = block ? "w-full [&>*]:flex-1" : void 0;
|
|
244
|
+
const attachedClass = attached ? vertical ? "[&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none" : "[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none" : void 0;
|
|
245
|
+
const enhanceChild = (child) => {
|
|
246
|
+
if (!React__namespace.isValidElement(child)) {
|
|
247
|
+
return child;
|
|
248
|
+
}
|
|
249
|
+
if (isButtonElement(child)) {
|
|
250
|
+
return React__namespace.cloneElement(child, {
|
|
251
|
+
variant: child.props.variant ?? variant,
|
|
252
|
+
color: child.props.color ?? color,
|
|
253
|
+
size: child.props.size ?? size,
|
|
254
|
+
block: child.props.block ?? block,
|
|
255
|
+
disabled: child.props.disabled ?? disabled,
|
|
256
|
+
loading: child.props.loading ?? loading,
|
|
257
|
+
iconOnly: child.props.iconOnly ?? iconOnly
|
|
258
|
+
});
|
|
259
|
+
}
|
|
260
|
+
if (child.props && typeof child.props === "object" && "children" in child.props) {
|
|
261
|
+
const nestedChildren = React__namespace.Children.map(child.props.children, enhanceChild);
|
|
262
|
+
if (nestedChildren !== child.props.children) {
|
|
263
|
+
return React__namespace.cloneElement(child, void 0, nestedChildren);
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
return child;
|
|
267
|
+
};
|
|
268
|
+
const resolvedChildren = React__namespace.Children.map(children, enhanceChild);
|
|
269
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
270
|
+
"div",
|
|
271
|
+
{
|
|
272
|
+
...rest,
|
|
273
|
+
ref,
|
|
274
|
+
role: role ?? "group",
|
|
275
|
+
className: tailwindMerge.twMerge(groupBase, blockClass, attachedClass, className),
|
|
276
|
+
children: resolvedChildren
|
|
277
|
+
}
|
|
278
|
+
);
|
|
279
|
+
});
|
|
280
|
+
ButtonGroup.displayName = "Button.Group";
|
|
281
|
+
var Button = ButtonBase;
|
|
282
|
+
Button.Group = ButtonGroup;
|
|
227
283
|
var Button_default = Button;
|
|
228
284
|
|
|
229
285
|
module.exports = Button_default;
|
package/dist/button.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 { base, iconOnlyIconSizeClasses, iconOnlySizeClasses, resolveIconClassName, resolveVariantClass, sizeClasses } from './states.button';\n\ntype PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];\ntype ButtonComponent = {\n <T extends React.ElementType = 'button'>(props: ButtonProps<T> & { ref?: PolymorphicRef<T> }): 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 <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 type,\n as,\n ...rest\n }: ButtonProps<T>,\n ref: React.ForwardedRef<unknown>\n ) => {\n const Component = as ?? 'button';\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = iconOnly ? (iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium) : (sizeClasses[size] ?? sizeClasses.medium);\n const iconSizeClass = iconOnly ? (iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium) : undefined;\n const blockClass = block ? 'w-full' : null;\n const isNativeButton = Component === 'button';\n const isDisabled = disabled || loading;\n const cursor = (onClick || type === 'submit') && !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', iconSizeClass) : undefined;\n const iconClassName = shouldRenderIcon ? twMerge('leading-none', iconSizeClass, resolvedIconClass) : undefined;\n\n return (\n <Component\n {...rest}\n type={type}\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"]}
|
|
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 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 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 dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900',\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 dark:border-white dark:text-white dark:bg-transparent dark:hover:bg-white dark:hover:text-black dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900',\n ghost:\n 'text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent dark:text-white dark:bg-neutral-800 dark:hover:bg-neutral-700',\n text:\n 'bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent dark:text-white dark:hover:bg-neutral-800',\n filled:\n 'bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20 dark:bg-white/10 dark:text-white dark:border-white/30 dark:hover:bg-white/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 dark:text-white dark:hover:bg-neutral-800',\n sharp:\n 'bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40 dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white/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 dark:bg-gray-900 dark:text-primary dark:border-primary/60 dark:hover:bg-primary dark:hover:text-white',\n ghost:\n 'text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent dark:bg-primary/20 dark:hover:bg-primary/30',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent dark:hover:bg-primary/20',\n filled:\n 'bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25 dark:bg-primary/20 dark:border-primary/40 dark:hover:bg-primary/30',\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 dark:hover:bg-primary/15',\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 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-200 dark:hover:text-gray-900',\n ghost:\n 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent dark:text-gray-200 dark:hover:bg-gray-800',\n filled:\n 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700',\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 dark:text-gray-100 dark:hover:bg-gray-800',\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 dark:bg-gray-900 dark:text-sky-400 dark:border-sky-500/70 dark:hover:bg-sky-500 dark:hover:text-white',\n ghost:\n 'text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent dark:text-sky-300 dark:bg-sky-900/40 dark:hover:bg-sky-900/55',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent dark:text-sky-300 dark:hover:bg-sky-900/35',\n filled:\n 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200 dark:bg-sky-900/35 dark:text-sky-200 dark:border-sky-700/60 dark:hover:bg-sky-900/50',\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 dark:text-sky-300 dark:hover:bg-sky-900/30',\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 dark:bg-gray-900 dark:text-emerald-400 dark:border-emerald-500/70 dark:hover:bg-emerald-500 dark:hover:text-white',\n ghost:\n 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent dark:text-emerald-300 dark:bg-emerald-900/35 dark:hover:bg-emerald-900/50',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent dark:text-emerald-300 dark:hover:bg-emerald-900/30',\n filled:\n 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200 dark:bg-emerald-900/35 dark:text-emerald-200 dark:border-emerald-700/60 dark:hover:bg-emerald-900/50',\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 dark:text-emerald-300 dark:hover:bg-emerald-900/30',\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 dark:bg-gray-900 dark:text-amber-300 dark:border-amber-500/70 dark:hover:bg-amber-500 dark:hover:text-white',\n ghost:\n 'text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent dark:text-amber-300 dark:bg-amber-900/35 dark:hover:bg-amber-900/50',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent dark:text-amber-300 dark:hover:bg-amber-900/30',\n filled:\n 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200 dark:bg-amber-900/35 dark:text-amber-200 dark:border-amber-700/60 dark:hover:bg-amber-900/50',\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 dark:text-amber-300 dark:hover:bg-amber-900/30',\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 dark:bg-gray-900 dark:text-red-400 dark:border-red-500/70 dark:hover:bg-red-500 dark:hover:text-white',\n ghost:\n 'text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent dark:text-red-300 dark:bg-red-900/35 dark:hover:bg-red-900/50',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent dark:text-red-300 dark:hover:bg-red-900/30',\n filled:\n 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200 dark:bg-red-900/35 dark:text-red-200 dark:border-red-700/60 dark:hover:bg-red-900/50',\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 dark:text-red-300 dark:hover:bg-red-900/30',\n },\n surface: {\n solid:\n 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800',\n sharp:\n 'rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800',\n outline:\n 'border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200 dark:border-gray-600 dark:text-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800',\n ghost:\n 'text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent dark:text-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent dark:text-gray-100 dark:hover:bg-gray-800',\n filled:\n 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700',\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 dark:text-gray-100 dark:hover:bg-gray-800',\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 { ButtonGroupProps, ButtonProps } from './types.button';\nimport { base, iconOnlyIconSizeClasses, iconOnlySizeClasses, resolveIconClassName, resolveVariantClass, sizeClasses } from './states.button';\n\ntype PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];\ntype ButtonBaseComponent = {\n <T extends React.ElementType = 'button'>(props: ButtonProps<T> & { ref?: PolymorphicRef<T> }): React.ReactElement | null;\n displayName?: string;\n};\ntype ButtonComponent = ButtonBaseComponent & {\n Group: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst ButtonBase = React.forwardRef(\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 type,\n as,\n ...rest\n }: ButtonProps<T>,\n ref: React.ForwardedRef<unknown>\n ) => {\n const Component = as ?? 'button';\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = iconOnly ? (iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium) : (sizeClasses[size] ?? sizeClasses.medium);\n const iconSizeClass = iconOnly ? (iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium) : undefined;\n const blockClass = block ? 'w-full' : null;\n const isNativeButton = Component === 'button';\n const isDisabled = disabled || loading;\n const cursor = (onClick || type === 'submit') && !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', iconSizeClass) : undefined;\n const iconClassName = shouldRenderIcon ? twMerge('leading-none', iconSizeClass, resolvedIconClass) : undefined;\n\n return (\n <Component\n {...rest}\n type={type}\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 ButtonBaseComponent;\n\nButtonBase.displayName = 'Button';\n\nconst isButtonElement = (element: React.ReactNode): element is React.ReactElement<ButtonProps> => {\n if (!React.isValidElement(element)) {\n return false;\n }\n\n const elementType = element.type as { displayName?: string };\n return element.type === ButtonBase || elementType.displayName === ButtonBase.displayName;\n};\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>((props, ref) => {\n const {\n variant,\n color,\n size,\n block = false,\n disabled = false,\n loading = false,\n iconOnly,\n vertical = false,\n attached = true,\n className,\n role,\n children,\n ...rest\n } = props;\n\n const groupBase = vertical ? 'inline-flex w-fit flex-col' : 'inline-flex w-fit items-stretch';\n const blockClass = block ? 'w-full [&>*]:flex-1' : undefined;\n const attachedClass = attached\n ? vertical\n ? '[&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none'\n : '[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none'\n : undefined;\n\n const enhanceChild = (child: React.ReactNode): React.ReactNode => {\n if (!React.isValidElement(child)) {\n return child;\n }\n\n if (isButtonElement(child)) {\n return React.cloneElement(child, {\n variant: child.props.variant ?? variant,\n color: child.props.color ?? color,\n size: child.props.size ?? size,\n block: child.props.block ?? block,\n disabled: child.props.disabled ?? disabled,\n loading: child.props.loading ?? loading,\n iconOnly: child.props.iconOnly ?? iconOnly\n });\n }\n\n if (child.props && typeof child.props === 'object' && 'children' in child.props) {\n const nestedChildren = React.Children.map(child.props.children as React.ReactNode, enhanceChild);\n if (nestedChildren !== child.props.children) {\n return React.cloneElement(child, undefined, nestedChildren);\n }\n }\n\n return child;\n };\n\n const resolvedChildren = React.Children.map(children, enhanceChild);\n\n return (\n <div\n {...rest}\n ref={ref}\n role={role ?? 'group'}\n className={twMerge(groupBase, blockClass, attachedClass, className)}\n >\n {resolvedChildren}\n </div>\n );\n});\n\nButtonGroup.displayName = 'Button.Group';\n\nconst Button = ButtonBase as ButtonComponent;\nButton.Group = ButtonGroup;\n\nexport default Button;\n"]}
|