@lindle/linoardo 1.0.31 → 1.0.33
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/chip.cjs +17 -29
- package/dist/chip.cjs.map +1 -1
- package/dist/chip.d.cts +10 -3
- package/dist/chip.d.ts +10 -3
- package/dist/chip.js +1 -1
- package/dist/{chunk-LYP7V32H.js → chunk-HBF4S2KY.js} +2 -2
- package/dist/chunk-HBF4S2KY.js.map +1 -0
- package/dist/chunk-P3ESW6KM.js +172 -0
- package/dist/chunk-P3ESW6KM.js.map +1 -0
- package/dist/{chunk-DSZ3EOQB.js → chunk-XPEOXO2T.js} +19 -31
- package/dist/chunk-XPEOXO2T.js.map +1 -0
- package/dist/expansion-panel.cjs +0 -1
- package/dist/expansion-panel.cjs.map +1 -1
- package/dist/expansion-panel.js +1 -1
- package/dist/index.cjs +153 -161
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/dist/input.cjs +136 -132
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +8 -2
- package/dist/input.d.ts +8 -2
- package/dist/input.js +1 -1
- package/dist/select.d.cts +1 -1
- package/dist/select.d.ts +1 -1
- package/dist/styles.css +31 -0
- package/dist/{types-BCqIOkp1.d.cts → types-BJC99riF.d.cts} +1 -9
- package/dist/{types-ChXN4u7x.d.ts → types-CTq2JZpg.d.ts} +1 -9
- package/package.json +1 -1
- package/dist/chunk-AUFMBVXA.js +0 -168
- package/dist/chunk-AUFMBVXA.js.map +0 -1
- package/dist/chunk-DSZ3EOQB.js.map +0 -1
- package/dist/chunk-LYP7V32H.js.map +0 -1
package/dist/chip.cjs
CHANGED
|
@@ -13,11 +13,6 @@ var iconBaseClasses = {
|
|
|
13
13
|
|
|
14
14
|
// src/Containment/Chip/states.chip.ts
|
|
15
15
|
var chipBaseClasses = "inline-flex items-center gap-1.5 border font-medium leading-tight transition-all duration-200 select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2";
|
|
16
|
-
var chipSizeClasses = {
|
|
17
|
-
small: "text-xs px-3 py-1 min-h-[1.5rem]",
|
|
18
|
-
medium: "text-sm px-4 py-1.5 min-h-[2rem]",
|
|
19
|
-
large: "text-base px-5 py-2 min-h-[2.5rem]"
|
|
20
|
-
};
|
|
21
16
|
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
17
|
var blackAndWhitePaletteClasses = {
|
|
23
18
|
solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
@@ -131,10 +126,18 @@ var resolveIconClassName = (icon) => {
|
|
|
131
126
|
const normalized = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
132
127
|
return Array.from(/* @__PURE__ */ new Set([...baseClasses, normalized])).join(" ");
|
|
133
128
|
};
|
|
129
|
+
var chipSizeClasses = {
|
|
130
|
+
"x-small": "h-5 text-[0.65rem] px-1.5",
|
|
131
|
+
small: "h-6 text-xs px-2",
|
|
132
|
+
medium: "h-7 text-sm px-2.5",
|
|
133
|
+
large: "h-8 text-sm px-3",
|
|
134
|
+
"x-large": "h-9 text-base px-3.5"
|
|
135
|
+
};
|
|
134
136
|
var Chip = react.forwardRef(
|
|
135
137
|
({
|
|
136
138
|
variant = "solid",
|
|
137
139
|
color = "primary",
|
|
140
|
+
interactive = false,
|
|
138
141
|
size = "medium",
|
|
139
142
|
pill = true,
|
|
140
143
|
selected = false,
|
|
@@ -151,14 +154,14 @@ var Chip = react.forwardRef(
|
|
|
151
154
|
...rest
|
|
152
155
|
}, ref) => {
|
|
153
156
|
const { onClick, onKeyDown, role, tabIndex, ...nativeProps } = rest;
|
|
154
|
-
const
|
|
157
|
+
const isInteractive = interactive || typeof onClick === "function";
|
|
155
158
|
const variantClass = resolveVariantClass(variant, color);
|
|
156
159
|
const sizeClass = chipSizeClasses[size] ?? chipSizeClasses.medium;
|
|
157
160
|
const pillClass = pill ? "rounded-full" : "rounded-lg";
|
|
158
|
-
const cursorClass = disabled ? "pointer-events-none opacity-50" :
|
|
161
|
+
const cursorClass = disabled ? "pointer-events-none opacity-50" : isInteractive ? "cursor-pointer" : "cursor-default";
|
|
159
162
|
const selectedClass = selected ? "ring-2 ring-current/50 ring-offset-2 ring-offset-white" : void 0;
|
|
160
|
-
const resolvedRole = disabled ? role : role ?? (
|
|
161
|
-
const resolvedTabIndex = disabled ? -1 : tabIndex ?? (
|
|
163
|
+
const resolvedRole = disabled ? role : role ?? (isInteractive ? "button" : void 0);
|
|
164
|
+
const resolvedTabIndex = disabled ? -1 : tabIndex ?? (isInteractive ? 0 : void 0);
|
|
162
165
|
const prependIconClassName = resolveIconClassName(prependIcon);
|
|
163
166
|
const appendIconClassName = resolveIconClassName(appendIcon);
|
|
164
167
|
const closeIconClassName = resolveIconClassName(closeIcon);
|
|
@@ -173,7 +176,7 @@ var Chip = react.forwardRef(
|
|
|
173
176
|
};
|
|
174
177
|
const handleKeyDown = (event) => {
|
|
175
178
|
onKeyDown?.(event);
|
|
176
|
-
if (event.defaultPrevented || disabled || !
|
|
179
|
+
if (event.defaultPrevented || disabled || !isInteractive) {
|
|
177
180
|
return;
|
|
178
181
|
}
|
|
179
182
|
if (event.key === "Enter" || event.key === " ") {
|
|
@@ -195,14 +198,7 @@ var Chip = react.forwardRef(
|
|
|
195
198
|
}
|
|
196
199
|
};
|
|
197
200
|
const renderableChildren = typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }) : children;
|
|
198
|
-
const filterAdornment = filter ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
199
|
-
"span",
|
|
200
|
-
{
|
|
201
|
-
className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-current/30 text-[0.55rem]",
|
|
202
|
-
"aria-hidden": true,
|
|
203
|
-
children: filterIconClassName ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: filterIconClassName, "aria-hidden": true }) : null
|
|
204
|
-
}
|
|
205
|
-
) : null;
|
|
201
|
+
const filterAdornment = filter ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-current/30 text-[0.55rem]", "aria-hidden": true, children: filterIconClassName ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: filterIconClassName, "aria-hidden": true }) : null }) : null;
|
|
206
202
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
207
203
|
"span",
|
|
208
204
|
{
|
|
@@ -213,17 +209,9 @@ var Chip = react.forwardRef(
|
|
|
213
209
|
"aria-disabled": disabled || void 0,
|
|
214
210
|
"aria-pressed": filter ? selected : void 0,
|
|
215
211
|
"data-selected": selected || void 0,
|
|
216
|
-
className: tailwindMerge.twMerge(
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
pillClass,
|
|
220
|
-
variantClass,
|
|
221
|
-
cursorClass,
|
|
222
|
-
selectedClass,
|
|
223
|
-
className
|
|
224
|
-
),
|
|
225
|
-
onClick: interactive ? handleClick : void 0,
|
|
226
|
-
onKeyDown: interactive ? handleKeyDown : onKeyDown,
|
|
212
|
+
className: tailwindMerge.twMerge(chipBaseClasses, sizeClass, pillClass, variantClass, cursorClass, selectedClass, className),
|
|
213
|
+
onClick: isInteractive ? handleClick : void 0,
|
|
214
|
+
onKeyDown: isInteractive ? handleKeyDown : onKeyDown,
|
|
227
215
|
children: [
|
|
228
216
|
filterAdornment,
|
|
229
217
|
prependIconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge("text-[1em] leading-none", prependIconClassName), "aria-hidden": true }),
|
package/dist/chip.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/globals.ts","../src/Containment/Chip/states.chip.ts","../src/Containment/Chip/index.tsx"],"names":["normalized","forwardRef","jsx","jsxs","twMerge"],"mappings":"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","file":"chip.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport { Palette, PropIcon } from '@lindle/linoardo/global.types';\nimport { ChipSize, ChipVariant } from './types.chip';\n\nexport const chipBaseClasses =\n 'inline-flex items-center gap-1.5 border font-medium leading-tight transition-all duration-200 select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2';\n\nexport const chipSizeClasses: Record<ChipSize, string> = {\n small: 'text-xs px-3 py-1 min-h-[1.5rem]',\n medium: 'text-sm px-4 py-1.5 min-h-[2rem]',\n large: 'text-base px-5 py-2 min-h-[2.5rem]'\n};\n\nexport const closeButtonClasses =\n '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';\n\nconst blackAndWhitePaletteClasses = {\n solid: 'bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white',\n outline:\n 'bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white',\n ghost:\n 'bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20',\n text:\n 'bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20',\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-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20',\n rounded:\n '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',\n sharp:\n 'rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white'\n} satisfies Record<ChipVariant, string>;\n\nconst paletteVariantClasses: Record<Palette, Record<ChipVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white border border-primary hover:bg-primary/90',\n sharp: 'rounded-none bg-primary text-white border border-primary hover:bg-primary/90',\n outline: 'bg-transparent text-primary border border-primary hover:bg-primary/10',\n ghost: 'bg-primary/15 text-primary border border-transparent hover:bg-primary/25',\n text: 'bg-transparent text-primary border border-transparent hover:text-primary/80',\n filled: 'bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20',\n underlined: 'bg-transparent text-primary border-0 border-b-2 border-primary px-0 rounded-none hover:text-primary/80',\n rounded: 'bg-white text-primary border border-primary/40 shadow-sm hover:bg-primary/5'\n },\n neutral: {\n solid: 'bg-gray-900 text-white border border-gray-900 hover:bg-gray-800',\n sharp: 'rounded-none bg-gray-900 text-white border border-gray-900 hover:bg-gray-800',\n outline: 'bg-transparent text-gray-900 border border-gray-500 hover:bg-gray-100',\n ghost: 'bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200',\n text: 'bg-transparent text-gray-900 border border-transparent hover:text-gray-700',\n filled: 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300',\n underlined: 'bg-transparent text-gray-900 border-0 border-b-2 border-gray-500 px-0 rounded-none hover:text-gray-700',\n rounded: 'bg-white text-gray-900 border border-gray-300 shadow-sm hover:bg-gray-100'\n },\n info: {\n solid: 'bg-sky-500 text-white border border-sky-500 hover:bg-sky-600',\n sharp: 'rounded-none bg-sky-500 text-white border border-sky-500 hover:bg-sky-600',\n outline: 'bg-transparent text-sky-600 border border-sky-500 hover:bg-sky-50',\n ghost: 'bg-sky-100 text-sky-700 border border-transparent hover:bg-sky-200',\n text: 'bg-transparent text-sky-600 border border-transparent hover:text-sky-700',\n filled: 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200',\n underlined: 'bg-transparent text-sky-600 border-0 border-b-2 border-sky-500 px-0 rounded-none hover:text-sky-700',\n rounded: 'bg-white text-sky-700 border border-sky-200 shadow-sm hover:bg-sky-50'\n },\n success: {\n solid: 'bg-emerald-500 text-white border border-emerald-500 hover:bg-emerald-600',\n sharp: 'rounded-none bg-emerald-500 text-white border border-emerald-500 hover:bg-emerald-600',\n outline: 'bg-transparent text-emerald-600 border border-emerald-500 hover:bg-emerald-50',\n ghost: 'bg-emerald-100 text-emerald-700 border border-transparent hover:bg-emerald-200',\n text: 'bg-transparent text-emerald-600 border border-transparent hover:text-emerald-700',\n filled: 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200',\n underlined:\n 'bg-transparent text-emerald-600 border-0 border-b-2 border-emerald-500 px-0 rounded-none hover:text-emerald-700',\n rounded: 'bg-white text-emerald-700 border border-emerald-200 shadow-sm hover:bg-emerald-50'\n },\n warning: {\n solid: 'bg-amber-500 text-white border border-amber-500 hover:bg-amber-600',\n sharp: 'rounded-none bg-amber-500 text-white border border-amber-500 hover:bg-amber-600',\n outline: 'bg-transparent text-amber-700 border border-amber-500 hover:bg-amber-50',\n ghost: 'bg-amber-100 text-amber-800 border border-transparent hover:bg-amber-200',\n text: 'bg-transparent text-amber-700 border border-transparent hover:text-amber-800',\n filled: 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200',\n underlined:\n 'bg-transparent text-amber-700 border-0 border-b-2 border-amber-500 px-0 rounded-none hover:text-amber-800',\n rounded: 'bg-white text-amber-700 border border-amber-200 shadow-sm hover:bg-amber-50'\n },\n danger: {\n solid: 'bg-red-500 text-white border border-red-500 hover:bg-red-600',\n sharp: 'rounded-none bg-red-500 text-white border border-red-500 hover:bg-red-600',\n outline: 'bg-transparent text-red-600 border border-red-500 hover:bg-red-50',\n ghost: 'bg-red-100 text-red-700 border border-transparent hover:bg-red-200',\n text: 'bg-transparent text-red-600 border border-transparent hover:text-red-700',\n filled: 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200',\n underlined: 'bg-transparent text-red-600 border-0 border-b-2 border-red-500 px-0 rounded-none hover:text-red-700',\n rounded: 'bg-white text-red-600 border border-red-200 shadow-sm hover:bg-red-50'\n },\n surface: {\n solid: 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50',\n sharp: 'rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50',\n outline: 'bg-transparent text-gray-900 border border-gray-300 hover:bg-gray-50',\n ghost: 'bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200',\n text: 'bg-transparent text-gray-900 border border-transparent hover:text-gray-600',\n filled: 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white',\n underlined: 'bg-transparent text-gray-900 border-0 border-b-2 border-gray-400 px-0 rounded-none hover:text-gray-600',\n rounded: 'bg-white text-gray-900 border border-gray-200 shadow-sm hover:bg-gray-50'\n },\n bw: blackAndWhitePaletteClasses\n};\n\nexport const resolveVariantClass = (variant: ChipVariant, palette: Palette) => {\n const variants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;\n return variants[variant] ?? variants.solid;\n};\n\nexport const resolveIconClassName = (icon?: PropIcon) => {\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","import { forwardRef } from 'react';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { ChipProps } from './types.chip';\nimport {\n chipBaseClasses,\n chipSizeClasses,\n closeButtonClasses,\n resolveIconClassName,\n resolveVariantClass\n} from './states.chip';\n\n/**\n * Small pill or badge element with optional icons, filter/selection and close affordance.\n */\nconst Chip = forwardRef<HTMLSpanElement, ChipProps>(\n (\n {\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n pill = true,\n selected = false,\n closable = false,\n closeIcon = 'mdi-close',\n onClose,\n filter = false,\n filterIcon = 'mdi-check-bold',\n prependIcon,\n appendIcon,\n disabled = false,\n className,\n children,\n ...rest\n },\n ref\n ) => {\n const { onClick, onKeyDown, role, tabIndex, ...nativeProps } = rest;\n const interactive = typeof onClick === 'function';\n\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = chipSizeClasses[size] ?? chipSizeClasses.medium;\n const pillClass = pill ? 'rounded-full' : 'rounded-lg';\n const cursorClass = disabled\n ? 'pointer-events-none opacity-50'\n : interactive\n ? 'cursor-pointer'\n : 'cursor-default';\n const selectedClass = selected\n ? 'ring-2 ring-current/50 ring-offset-2 ring-offset-white'\n : undefined;\n\n const resolvedRole = disabled ? role : role ?? (interactive ? 'button' : undefined);\n const resolvedTabIndex = disabled ? -1 : tabIndex ?? (interactive ? 0 : undefined);\n const prependIconClassName = resolveIconClassName(prependIcon);\n const appendIconClassName = resolveIconClassName(appendIcon);\n const closeIconClassName = resolveIconClassName(closeIcon);\n const filterIconClassName = filter && selected ? resolveIconClassName(filterIcon) : undefined;\n\n const handleClick = (event: MouseEvent<HTMLSpanElement>) => {\n if (disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n onClick?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n onKeyDown?.(event);\n if (event.defaultPrevented || disabled || !interactive) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n (event.currentTarget as HTMLSpanElement).click();\n }\n };\n\n const handleCloseClick = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n if (disabled) {\n event.preventDefault();\n return;\n }\n onClose?.(event);\n };\n\n const handleCloseKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.stopPropagation();\n }\n };\n\n const renderableChildren =\n typeof children === 'string' || typeof children === 'number' ? (\n <span className='truncate'>{children}</span>\n ) : (\n children\n );\n\n const filterAdornment = filter ? (\n <span\n className='flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-current/30 text-[0.55rem]'\n aria-hidden\n >\n {filterIconClassName ? <i className={filterIconClassName} aria-hidden /> : null}\n </span>\n ) : null;\n\n return (\n <span\n {...nativeProps}\n ref={ref}\n role={resolvedRole}\n tabIndex={resolvedTabIndex}\n aria-disabled={disabled || undefined}\n aria-pressed={filter ? selected : undefined}\n data-selected={selected || undefined}\n className={twMerge(\n chipBaseClasses,\n sizeClass,\n pillClass,\n variantClass,\n cursorClass,\n selectedClass,\n className\n )}\n onClick={interactive ? handleClick : undefined}\n onKeyDown={interactive ? handleKeyDown : onKeyDown}\n >\n {filterAdornment}\n {prependIconClassName && (\n <i className={twMerge('text-[1em] leading-none', prependIconClassName)} aria-hidden />\n )}\n {renderableChildren}\n {appendIconClassName && (\n <i className={twMerge('text-[1em] leading-none', appendIconClassName)} aria-hidden />\n )}\n {closable && (\n <button\n type='button'\n disabled={disabled}\n aria-label='Remove chip'\n className={twMerge(closeButtonClasses)}\n onClick={handleCloseClick}\n onKeyDown={handleCloseKeyDown}\n >\n {closeIconClassName ? (\n <i className={closeIconClassName} aria-hidden />\n ) : (\n <span aria-hidden>×</span>\n )}\n </button>\n )}\n </span>\n );\n }\n);\n\nChip.displayName = 'Chip';\n\nexport type { ChipProps, ChipSize, ChipVariant } from './types.chip';\nexport default Chip;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/globals.ts","../src/Containment/Chip/states.chip.ts","../src/Containment/Chip/index.tsx"],"names":["normalized","forwardRef","jsx","jsxs","twMerge"],"mappings":"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","file":"chip.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport { Palette, PropIcon } from '@lindle/linoardo/global.types';\nimport { ChipSize, ChipVariant } from './types.chip';\n\nexport const chipBaseClasses =\n 'inline-flex items-center gap-1.5 border font-medium leading-tight transition-all duration-200 select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2';\n\nexport const chipSizeClasses: Record<ChipSize, string> = {\n small: 'text-xs px-3 py-1 min-h-[1.5rem]',\n medium: 'text-sm px-4 py-1.5 min-h-[2rem]',\n large: 'text-base px-5 py-2 min-h-[2.5rem]'\n};\n\nexport const closeButtonClasses =\n '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';\n\nconst blackAndWhitePaletteClasses = {\n solid: 'bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white',\n outline:\n 'bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white',\n ghost:\n 'bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20',\n text:\n 'bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20',\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-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20',\n rounded:\n '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',\n sharp:\n 'rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white'\n} satisfies Record<ChipVariant, string>;\n\nconst paletteVariantClasses: Record<Palette, Record<ChipVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white border border-primary hover:bg-primary/90',\n sharp: 'rounded-none bg-primary text-white border border-primary hover:bg-primary/90',\n outline: 'bg-transparent text-primary border border-primary hover:bg-primary/10',\n ghost: 'bg-primary/15 text-primary border border-transparent hover:bg-primary/25',\n text: 'bg-transparent text-primary border border-transparent hover:text-primary/80',\n filled: 'bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20',\n underlined: 'bg-transparent text-primary border-0 border-b-2 border-primary px-0 rounded-none hover:text-primary/80',\n rounded: 'bg-white text-primary border border-primary/40 shadow-sm hover:bg-primary/5'\n },\n neutral: {\n solid: 'bg-gray-900 text-white border border-gray-900 hover:bg-gray-800',\n sharp: 'rounded-none bg-gray-900 text-white border border-gray-900 hover:bg-gray-800',\n outline: 'bg-transparent text-gray-900 border border-gray-500 hover:bg-gray-100',\n ghost: 'bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200',\n text: 'bg-transparent text-gray-900 border border-transparent hover:text-gray-700',\n filled: 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300',\n underlined: 'bg-transparent text-gray-900 border-0 border-b-2 border-gray-500 px-0 rounded-none hover:text-gray-700',\n rounded: 'bg-white text-gray-900 border border-gray-300 shadow-sm hover:bg-gray-100'\n },\n info: {\n solid: 'bg-sky-500 text-white border border-sky-500 hover:bg-sky-600',\n sharp: 'rounded-none bg-sky-500 text-white border border-sky-500 hover:bg-sky-600',\n outline: 'bg-transparent text-sky-600 border border-sky-500 hover:bg-sky-50',\n ghost: 'bg-sky-100 text-sky-700 border border-transparent hover:bg-sky-200',\n text: 'bg-transparent text-sky-600 border border-transparent hover:text-sky-700',\n filled: 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200',\n underlined: 'bg-transparent text-sky-600 border-0 border-b-2 border-sky-500 px-0 rounded-none hover:text-sky-700',\n rounded: 'bg-white text-sky-700 border border-sky-200 shadow-sm hover:bg-sky-50'\n },\n success: {\n solid: 'bg-emerald-500 text-white border border-emerald-500 hover:bg-emerald-600',\n sharp: 'rounded-none bg-emerald-500 text-white border border-emerald-500 hover:bg-emerald-600',\n outline: 'bg-transparent text-emerald-600 border border-emerald-500 hover:bg-emerald-50',\n ghost: 'bg-emerald-100 text-emerald-700 border border-transparent hover:bg-emerald-200',\n text: 'bg-transparent text-emerald-600 border border-transparent hover:text-emerald-700',\n filled: 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200',\n underlined:\n 'bg-transparent text-emerald-600 border-0 border-b-2 border-emerald-500 px-0 rounded-none hover:text-emerald-700',\n rounded: 'bg-white text-emerald-700 border border-emerald-200 shadow-sm hover:bg-emerald-50'\n },\n warning: {\n solid: 'bg-amber-500 text-white border border-amber-500 hover:bg-amber-600',\n sharp: 'rounded-none bg-amber-500 text-white border border-amber-500 hover:bg-amber-600',\n outline: 'bg-transparent text-amber-700 border border-amber-500 hover:bg-amber-50',\n ghost: 'bg-amber-100 text-amber-800 border border-transparent hover:bg-amber-200',\n text: 'bg-transparent text-amber-700 border border-transparent hover:text-amber-800',\n filled: 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200',\n underlined:\n 'bg-transparent text-amber-700 border-0 border-b-2 border-amber-500 px-0 rounded-none hover:text-amber-800',\n rounded: 'bg-white text-amber-700 border border-amber-200 shadow-sm hover:bg-amber-50'\n },\n danger: {\n solid: 'bg-red-500 text-white border border-red-500 hover:bg-red-600',\n sharp: 'rounded-none bg-red-500 text-white border border-red-500 hover:bg-red-600',\n outline: 'bg-transparent text-red-600 border border-red-500 hover:bg-red-50',\n ghost: 'bg-red-100 text-red-700 border border-transparent hover:bg-red-200',\n text: 'bg-transparent text-red-600 border border-transparent hover:text-red-700',\n filled: 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200',\n underlined: 'bg-transparent text-red-600 border-0 border-b-2 border-red-500 px-0 rounded-none hover:text-red-700',\n rounded: 'bg-white text-red-600 border border-red-200 shadow-sm hover:bg-red-50'\n },\n surface: {\n solid: 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50',\n sharp: 'rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50',\n outline: 'bg-transparent text-gray-900 border border-gray-300 hover:bg-gray-50',\n ghost: 'bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200',\n text: 'bg-transparent text-gray-900 border border-transparent hover:text-gray-600',\n filled: 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white',\n underlined: 'bg-transparent text-gray-900 border-0 border-b-2 border-gray-400 px-0 rounded-none hover:text-gray-600',\n rounded: 'bg-white text-gray-900 border border-gray-200 shadow-sm hover:bg-gray-50'\n },\n bw: blackAndWhitePaletteClasses\n};\n\nexport const resolveVariantClass = (variant: ChipVariant, palette: Palette) => {\n const variants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;\n return variants[variant] ?? variants.solid;\n};\n\nexport const resolveIconClassName = (icon?: PropIcon) => {\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","import { forwardRef } from 'react';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { ChipProps, ChipSize } from './types.chip';\nimport { chipBaseClasses, closeButtonClasses, resolveIconClassName, resolveVariantClass } from './states.chip';\n\nconst chipSizeClasses: Record<ChipSize, string> = {\n 'x-small': 'h-5 text-[0.65rem] px-1.5',\n small: 'h-6 text-xs px-2',\n medium: 'h-7 text-sm px-2.5',\n large: 'h-8 text-sm px-3',\n 'x-large': 'h-9 text-base px-3.5'\n};\n\n/**\n * Small pill or badge element with optional icons, filter/selection and close affordance.\n */\nconst Chip = forwardRef<HTMLSpanElement, ChipProps>(\n (\n {\n variant = 'solid',\n color = 'primary',\n interactive = false,\n size = 'medium',\n pill = true,\n selected = false,\n closable = false,\n closeIcon = 'mdi-close',\n onClose,\n filter = false,\n filterIcon = 'mdi-check-bold',\n prependIcon,\n appendIcon,\n disabled = false,\n className,\n children,\n ...rest\n },\n ref\n ) => {\n const { onClick, onKeyDown, role, tabIndex, ...nativeProps } = rest;\n const isInteractive = interactive || typeof onClick === 'function';\n\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = chipSizeClasses[size] ?? chipSizeClasses.medium;\n const pillClass = pill ? 'rounded-full' : 'rounded-lg';\n const cursorClass = disabled ? 'pointer-events-none opacity-50' : isInteractive ? 'cursor-pointer' : 'cursor-default';\n const selectedClass = selected ? 'ring-2 ring-current/50 ring-offset-2 ring-offset-white' : undefined;\n\n const resolvedRole = disabled ? role : role ?? (isInteractive ? 'button' : undefined);\n const resolvedTabIndex = disabled ? -1 : tabIndex ?? (isInteractive ? 0 : undefined);\n const prependIconClassName = resolveIconClassName(prependIcon);\n const appendIconClassName = resolveIconClassName(appendIcon);\n const closeIconClassName = resolveIconClassName(closeIcon);\n const filterIconClassName = filter && selected ? resolveIconClassName(filterIcon) : undefined;\n\n const handleClick = (event: MouseEvent<HTMLSpanElement>) => {\n if (disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n onClick?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n onKeyDown?.(event);\n if (event.defaultPrevented || disabled || !isInteractive) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n (event.currentTarget as HTMLSpanElement).click();\n }\n };\n\n const handleCloseClick = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n if (disabled) {\n event.preventDefault();\n return;\n }\n onClose?.(event);\n };\n\n const handleCloseKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.stopPropagation();\n }\n };\n\n const renderableChildren = typeof children === 'string' || typeof children === 'number' ? <span className='truncate'>{children}</span> : children;\n\n const filterAdornment = filter ? (\n <span className='flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-current/30 text-[0.55rem]' aria-hidden>\n {filterIconClassName ? <i className={filterIconClassName} aria-hidden /> : null}\n </span>\n ) : null;\n\n return (\n <span\n {...nativeProps}\n ref={ref}\n role={resolvedRole}\n tabIndex={resolvedTabIndex}\n aria-disabled={disabled || undefined}\n aria-pressed={filter ? selected : undefined}\n data-selected={selected || undefined}\n className={twMerge(chipBaseClasses, sizeClass, pillClass, variantClass, cursorClass, selectedClass, className)}\n onClick={isInteractive ? handleClick : undefined}\n onKeyDown={isInteractive ? handleKeyDown : onKeyDown}\n >\n {filterAdornment}\n {prependIconClassName && <i className={twMerge('text-[1em] leading-none', prependIconClassName)} aria-hidden />}\n {renderableChildren}\n {appendIconClassName && <i className={twMerge('text-[1em] leading-none', appendIconClassName)} aria-hidden />}\n {closable && (\n <button\n type='button'\n disabled={disabled}\n aria-label='Remove chip'\n className={twMerge(closeButtonClasses)}\n onClick={handleCloseClick}\n onKeyDown={handleCloseKeyDown}\n >\n {closeIconClassName ? <i className={closeIconClassName} aria-hidden /> : <span aria-hidden>×</span>}\n </button>\n )}\n </span>\n );\n }\n);\n\nChip.displayName = 'Chip';\n\nexport type { ChipProps, ChipSize, ChipVariant } from './types.chip';\nexport default Chip;\n"]}
|
package/dist/chip.d.cts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { G as GlobalVariant, P as Palette, b as PropIcon } from './global.types-E2uVLemv.cjs';
|
|
1
|
+
import { G as GlobalVariant, a as GlobalSize, P as Palette, b as PropIcon } from './global.types-E2uVLemv.cjs';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
|
|
4
4
|
type ChipVariant = GlobalVariant;
|
|
5
|
-
type ChipSize =
|
|
5
|
+
type ChipSize = GlobalSize;
|
|
6
6
|
type NativeChipProps = Omit<react.HTMLAttributes<HTMLSpanElement>, 'color'>;
|
|
7
7
|
type ChipProps = NativeChipProps & {
|
|
8
8
|
/**
|
|
@@ -15,9 +15,15 @@ type ChipProps = NativeChipProps & {
|
|
|
15
15
|
* @default 'primary'
|
|
16
16
|
*/
|
|
17
17
|
color?: Palette;
|
|
18
|
+
/**
|
|
19
|
+
* Enables interactive state (cursor pointer, role button, keyboard support).
|
|
20
|
+
* Automatically enabled if onClick is provided.
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
interactive?: boolean;
|
|
18
24
|
/**
|
|
19
25
|
* Controls the compactness of the chip.
|
|
20
|
-
* @default '
|
|
26
|
+
* @default 'md'
|
|
21
27
|
*/
|
|
22
28
|
size?: ChipSize;
|
|
23
29
|
/**
|
|
@@ -355,6 +361,7 @@ declare const Chip: react.ForwardRefExoticComponent<{
|
|
|
355
361
|
} & {
|
|
356
362
|
variant?: ChipVariant;
|
|
357
363
|
color?: Palette;
|
|
364
|
+
interactive?: boolean;
|
|
358
365
|
size?: ChipSize;
|
|
359
366
|
pill?: boolean;
|
|
360
367
|
selected?: boolean;
|
package/dist/chip.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { G as GlobalVariant, P as Palette, b as PropIcon } from './global.types-E2uVLemv.js';
|
|
1
|
+
import { G as GlobalVariant, a as GlobalSize, P as Palette, b as PropIcon } from './global.types-E2uVLemv.js';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
|
|
4
4
|
type ChipVariant = GlobalVariant;
|
|
5
|
-
type ChipSize =
|
|
5
|
+
type ChipSize = GlobalSize;
|
|
6
6
|
type NativeChipProps = Omit<react.HTMLAttributes<HTMLSpanElement>, 'color'>;
|
|
7
7
|
type ChipProps = NativeChipProps & {
|
|
8
8
|
/**
|
|
@@ -15,9 +15,15 @@ type ChipProps = NativeChipProps & {
|
|
|
15
15
|
* @default 'primary'
|
|
16
16
|
*/
|
|
17
17
|
color?: Palette;
|
|
18
|
+
/**
|
|
19
|
+
* Enables interactive state (cursor pointer, role button, keyboard support).
|
|
20
|
+
* Automatically enabled if onClick is provided.
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
interactive?: boolean;
|
|
18
24
|
/**
|
|
19
25
|
* Controls the compactness of the chip.
|
|
20
|
-
* @default '
|
|
26
|
+
* @default 'md'
|
|
21
27
|
*/
|
|
22
28
|
size?: ChipSize;
|
|
23
29
|
/**
|
|
@@ -355,6 +361,7 @@ declare const Chip: react.ForwardRefExoticComponent<{
|
|
|
355
361
|
} & {
|
|
356
362
|
variant?: ChipVariant;
|
|
357
363
|
color?: Palette;
|
|
364
|
+
interactive?: boolean;
|
|
358
365
|
size?: ChipSize;
|
|
359
366
|
pill?: boolean;
|
|
360
367
|
selected?: boolean;
|
package/dist/chip.js
CHANGED
|
@@ -127,5 +127,5 @@ ExpansionPanel.displayName = "ExpansionPanel";
|
|
|
127
127
|
var ExpansionPanel_default = ExpansionPanel;
|
|
128
128
|
|
|
129
129
|
export { ExpansionPanel_default };
|
|
130
|
-
//# sourceMappingURL=chunk-
|
|
131
|
-
//# sourceMappingURL=chunk-
|
|
130
|
+
//# sourceMappingURL=chunk-HBF4S2KY.js.map
|
|
131
|
+
//# sourceMappingURL=chunk-HBF4S2KY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Containment/ExpansionPanel/index.tsx"],"names":["expandedValues"],"mappings":"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","file":"chunk-HBF4S2KY.js","sourcesContent":["'use client';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ForwardedRef } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { injectExpansionPanelContext } from './context';\nimport type {\n ExpansionPanelProps,\n ExpansionPanelValue,\n ExpansionPanelVariant,\n ExpansionPanelRounded,\n ExpansionPanelMultipleProps,\n ExpansionPanelSingleProps\n} from './types.expansion-panel';\nimport ExpansionPanelItem from './ExpansionPanelItem';\n\nconst variantContainerClasses: Record<ExpansionPanelVariant, string> = {\n elevated: 'bg-white border border-gray-200 shadow-lg shadow-gray-900/10',\n outlined: 'bg-white border border-gray-200',\n tonal: 'bg-gray-50 border border-gray-100',\n plain: 'bg-transparent border border-transparent'\n};\n\nconst roundedClasses: Record<ExpansionPanelRounded, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl'\n};\n\nconst uniqueValues = (values: ExpansionPanelValue[]) => Array.from(new Set(values));\n\nconst normalizeValues = (\n value: ExpansionPanelValue | ExpansionPanelValue[] | null | undefined,\n allowMultiple: boolean\n): ExpansionPanelValue[] => {\n if (value === undefined || value === null) {\n return [];\n }\n\n const normalized = Array.isArray(value) ? value : [value];\n if (allowMultiple) {\n return uniqueValues(normalized);\n }\n\n return normalized.length ? [normalized[0]] : [];\n};\n\nconst clampValues = (values: ExpansionPanelValue[], allowMultiple: boolean) =>\n allowMultiple ? uniqueValues(values) : values.length ? [values[0]] : [];\n\n/**\n * Accordion-style container that manages single or multiple expanded items with contextual styling.\n */\nconst ExpansionPanelInner = (\n props: ExpansionPanelProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) => {\n const {\n variant = 'elevated',\n rounded = 'lg',\n density = 'default',\n color = 'primary',\n divider = true,\n multiple = false,\n className,\n children,\n value,\n defaultValue,\n onChange,\n ...rest\n } = props;\n\n const allowMultiple = multiple ?? false;\n const isControlled = value !== undefined;\n\n const [internalValues, setInternalValues] = useState<ExpansionPanelValue[]>(() =>\n normalizeValues(defaultValue, allowMultiple)\n );\n\n const prevAllowMultipleRef = useRef(allowMultiple);\n const prevIsControlledRef = useRef(isControlled);\n\n useEffect(() => {\n const prevAllowMultiple = prevAllowMultipleRef.current;\n const wasControlled = prevIsControlledRef.current;\n\n if (!isControlled && (allowMultiple !== prevAllowMultiple || wasControlled !== isControlled)) {\n setInternalValues(prev => clampValues(prev, allowMultiple));\n }\n\n prevAllowMultipleRef.current = allowMultiple;\n prevIsControlledRef.current = isControlled;\n }, [allowMultiple, isControlled]);\n\n const handleValueChange = useCallback(\n (next: ExpansionPanelValue[]) => {\n if (!isControlled) {\n setInternalValues(next);\n }\n\n if (onChange) {\n if (allowMultiple) {\n (onChange as NonNullable<ExpansionPanelMultipleProps['onChange']>)(next);\n } else {\n (onChange as NonNullable<ExpansionPanelSingleProps['onChange']>)(next[0] ?? null);\n }\n }\n },\n [allowMultiple, isControlled, onChange]\n );\n\n const handleToggle = useCallback(\n (panelValue: ExpansionPanelValue, disabled?: boolean) => {\n if (disabled) {\n return;\n }\n\n const expandedValues = isControlled ? normalizeValues(value, allowMultiple) : internalValues;\n const isActive = expandedValues.includes(panelValue);\n const next = allowMultiple\n ? isActive\n ? expandedValues.filter(v => v !== panelValue)\n : [...expandedValues, panelValue]\n : isActive\n ? []\n : [panelValue];\n\n handleValueChange(next);\n },\n [allowMultiple, handleValueChange, internalValues, isControlled, value]\n );\n\n const expandedValues = useMemo(\n () => (isControlled ? normalizeValues(value, allowMultiple) : internalValues),\n [allowMultiple, internalValues, isControlled, value]\n );\n\n const providerValue = useMemo(\n () => ({\n expandedValues,\n toggle: handleToggle,\n density,\n color,\n divider,\n rounded,\n variant\n }),\n [color, density, divider, expandedValues, handleToggle, rounded, variant]\n );\n\n const variantClass = divider\n ? variantContainerClasses[variant]\n : 'bg-transparent border border-transparent shadow-none';\n const shapeClass = roundedClasses[rounded] ?? roundedClasses.lg;\n const layoutClass = divider ? 'divide-y divide-gray-100 overflow-hidden' : 'gap-4';\n\n const enhancedChildren = injectExpansionPanelContext(children, providerValue);\n\n return (\n <div\n {...rest}\n ref={forwardedRef}\n className={twMerge(\n 'expansion-panel flex w-full flex-col text-gray-900',\n variantClass,\n shapeClass,\n layoutClass,\n className\n )}\n >\n {enhancedChildren}\n </div>\n );\n};\n\nconst ExpansionPanel = forwardRef<HTMLDivElement, ExpansionPanelProps>(ExpansionPanelInner);\n\nExpansionPanel.displayName = 'ExpansionPanel';\n\nexport { ExpansionPanelItem };\nexport type {\n ExpansionPanelItemProps,\n ExpansionPanelProps,\n ExpansionPanelValue,\n ExpansionPanelVariant,\n ExpansionPanelDensity,\n ExpansionPanelRounded\n} from './types.expansion-panel';\nexport default ExpansionPanel;\n"]}
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import { iconBaseClasses } from './chunk-IEILIKS2.js';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// src/Form/Input/states.input.ts
|
|
7
|
+
var resolveIconClassName = (icon) => {
|
|
8
|
+
if (!icon) {
|
|
9
|
+
return void 0;
|
|
10
|
+
}
|
|
11
|
+
if (typeof icon === "string") {
|
|
12
|
+
const trimmed = icon.trim();
|
|
13
|
+
if (!trimmed) {
|
|
14
|
+
return void 0;
|
|
15
|
+
}
|
|
16
|
+
if (trimmed.includes(" ")) {
|
|
17
|
+
return trimmed;
|
|
18
|
+
}
|
|
19
|
+
const normalizedName2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
|
|
20
|
+
return ["mdi", normalizedName2].join(" ");
|
|
21
|
+
}
|
|
22
|
+
const [library, iconNameRaw] = icon;
|
|
23
|
+
const baseClasses = iconBaseClasses[library] ?? [library];
|
|
24
|
+
const iconName = iconNameRaw.trim();
|
|
25
|
+
if (!iconName) {
|
|
26
|
+
return baseClasses.join(" ");
|
|
27
|
+
}
|
|
28
|
+
const normalizedName = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
29
|
+
const classes = [...baseClasses, normalizedName];
|
|
30
|
+
return Array.from(new Set(classes)).join(" ");
|
|
31
|
+
};
|
|
32
|
+
var Input = React.forwardRef(
|
|
33
|
+
({
|
|
34
|
+
variant = "outline",
|
|
35
|
+
size = "medium",
|
|
36
|
+
success,
|
|
37
|
+
error,
|
|
38
|
+
warn,
|
|
39
|
+
icon,
|
|
40
|
+
className,
|
|
41
|
+
wrapperClassName,
|
|
42
|
+
label,
|
|
43
|
+
...props
|
|
44
|
+
}, ref) => {
|
|
45
|
+
const { placeholder, onFocus, onBlur, ...inputProps } = props;
|
|
46
|
+
const reactId = React.useId();
|
|
47
|
+
const hasLabel = Boolean(label);
|
|
48
|
+
const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
|
|
49
|
+
const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;
|
|
50
|
+
const [isFocused, setIsFocused] = React.useState(false);
|
|
51
|
+
const classBase = "input-base focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400";
|
|
52
|
+
const variantClasses = {
|
|
53
|
+
solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
|
|
54
|
+
sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
|
|
55
|
+
outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
|
|
56
|
+
text: "rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
|
|
57
|
+
ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
|
|
58
|
+
filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
|
|
59
|
+
underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
|
|
60
|
+
rounded: "rounded-full px-4 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
|
|
61
|
+
};
|
|
62
|
+
const sizeClasses = {
|
|
63
|
+
"x-small": { paddingNoIcon: "px-2 py-2", paddingWithIcon: "pl-8 pr-2 py-2", text: "text-xs" },
|
|
64
|
+
small: {
|
|
65
|
+
paddingNoIcon: "px-2.5 py-2.5",
|
|
66
|
+
paddingWithIcon: "pl-9 pr-2.5 py-2.5",
|
|
67
|
+
text: "text-sm"
|
|
68
|
+
},
|
|
69
|
+
medium: { paddingNoIcon: "px-3 py-3", paddingWithIcon: "pl-10 pr-3 py-3", text: "text-base" },
|
|
70
|
+
large: {
|
|
71
|
+
paddingNoIcon: "px-3.5 py-3.5",
|
|
72
|
+
paddingWithIcon: "pl-11 pr-3.5 py-3.5",
|
|
73
|
+
text: "text-lg"
|
|
74
|
+
},
|
|
75
|
+
"x-large": { paddingNoIcon: "px-4 py-4", paddingWithIcon: "pl-12 pr-4 py-4", text: "text-xl" }
|
|
76
|
+
};
|
|
77
|
+
const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
|
|
78
|
+
const statusClasses = {
|
|
79
|
+
error: "border-red-500 focus:border-red-500 focus:ring-red-400",
|
|
80
|
+
warn: "border-amber-500 focus:border-amber-500 focus:ring-amber-400",
|
|
81
|
+
success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400"
|
|
82
|
+
};
|
|
83
|
+
const statusMessageClasses = {
|
|
84
|
+
error: "text-red-600 dark:text-red-300",
|
|
85
|
+
warn: "text-amber-600 dark:text-amber-300",
|
|
86
|
+
success: "text-emerald-600 dark:text-emerald-300"
|
|
87
|
+
};
|
|
88
|
+
const variantClass = variantClasses[variant] ?? variantClasses.outline;
|
|
89
|
+
const toneClass = status ? statusClasses[status.tone] : void 0;
|
|
90
|
+
let prependIconClass = resolveIconClassName(icon);
|
|
91
|
+
const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;
|
|
92
|
+
const sizeClass = [
|
|
93
|
+
prependIconClass ? sizeConfig.paddingWithIcon : sizeConfig.paddingNoIcon,
|
|
94
|
+
sizeConfig.text
|
|
95
|
+
].join(" ");
|
|
96
|
+
const inputName = inputProps.name || reactId;
|
|
97
|
+
const basePlaceholder = placeholder ?? (hasLabel ? " " : void 0);
|
|
98
|
+
const placeholderValue = hidePlaceholderUntilFocus ? isFocused ? placeholder : " " : basePlaceholder;
|
|
99
|
+
const placeholderClass = hidePlaceholderUntilFocus ? "placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400" : void 0;
|
|
100
|
+
const labelLeftClass = prependIconClass ? "left-10" : "left-3";
|
|
101
|
+
const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90 dark:bg-slate-900";
|
|
102
|
+
const handleFocus = (event) => {
|
|
103
|
+
if (hidePlaceholderUntilFocus) setIsFocused(true);
|
|
104
|
+
onFocus?.(event);
|
|
105
|
+
};
|
|
106
|
+
const handleBlur = (event) => {
|
|
107
|
+
if (hidePlaceholderUntilFocus) setIsFocused(false);
|
|
108
|
+
onBlur?.(event);
|
|
109
|
+
};
|
|
110
|
+
return /* @__PURE__ */ jsxs("div", { className: twMerge("flex flex-col gap-1", wrapperClassName), children: [
|
|
111
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
|
|
112
|
+
prependIconClass && /* @__PURE__ */ jsx(
|
|
113
|
+
"i",
|
|
114
|
+
{
|
|
115
|
+
className: twMerge(
|
|
116
|
+
"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
|
|
117
|
+
status?.tone && statusMessageClasses[status?.tone] || "",
|
|
118
|
+
prependIconClass
|
|
119
|
+
),
|
|
120
|
+
"aria-hidden": true
|
|
121
|
+
}
|
|
122
|
+
),
|
|
123
|
+
/* @__PURE__ */ jsx(
|
|
124
|
+
"input",
|
|
125
|
+
{
|
|
126
|
+
...inputProps,
|
|
127
|
+
ref,
|
|
128
|
+
id: inputName,
|
|
129
|
+
name: inputName,
|
|
130
|
+
placeholder: placeholderValue,
|
|
131
|
+
onFocus: handleFocus,
|
|
132
|
+
onBlur: handleBlur,
|
|
133
|
+
className: twMerge(
|
|
134
|
+
"peer",
|
|
135
|
+
classBase,
|
|
136
|
+
variantClass,
|
|
137
|
+
toneClass,
|
|
138
|
+
sizeClass,
|
|
139
|
+
placeholderClass,
|
|
140
|
+
className
|
|
141
|
+
)
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
label && /* @__PURE__ */ jsx(
|
|
145
|
+
"label",
|
|
146
|
+
{
|
|
147
|
+
htmlFor: inputName,
|
|
148
|
+
className: twMerge(
|
|
149
|
+
"absolute transition-all duration-150 pointer-events-none text-gray-700 rounded dark:text-gray-200",
|
|
150
|
+
labelLeftClass,
|
|
151
|
+
// Floated state: center label's vertical middle on the top border line
|
|
152
|
+
"-top-1.5 left-1 peer-focus:left-7 -translate-y-2/3 text-xs px-1",
|
|
153
|
+
labelBgDefault,
|
|
154
|
+
// focus state mirrors floated state (keeps center on border)
|
|
155
|
+
"peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:bg-white peer-focus:text-gray-600 dark:peer-focus:bg-slate-900 dark:peer-focus:text-gray-300",
|
|
156
|
+
// when input is empty (placeholder shown) -> center label inside input
|
|
157
|
+
"peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400"
|
|
158
|
+
),
|
|
159
|
+
children: label
|
|
160
|
+
}
|
|
161
|
+
)
|
|
162
|
+
] }),
|
|
163
|
+
status?.message && /* @__PURE__ */ jsx("span", { className: twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
|
|
164
|
+
] });
|
|
165
|
+
}
|
|
166
|
+
);
|
|
167
|
+
Input.displayName = "Input";
|
|
168
|
+
var Input_default = Input;
|
|
169
|
+
|
|
170
|
+
export { Input_default };
|
|
171
|
+
//# sourceMappingURL=chunk-P3ESW6KM.js.map
|
|
172
|
+
//# sourceMappingURL=chunk-P3ESW6KM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Form/Input/states.input.ts","../src/Form/Input/index.tsx"],"names":["normalizedName"],"mappings":"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","file":"chunk-P3ESW6KM.js","sourcesContent":["import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport { InputProp } from './types';\n\nexport const resolveIconClassName = (icon?: InputProp['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 normalizedName = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalizedName].join(' ');\n }\n\n const [library, iconNameRaw] = icon;\n const baseClasses = iconBaseClasses[library] ?? [library];\n const iconName = iconNameRaw.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n const normalizedName = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n const classes = [...baseClasses, normalizedName];\n return Array.from(new Set(classes)).join(' ');\n};\n","import React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { InputProp, InputVariant, InputSize } from './types';\nimport { resolveIconClassName } from './states.input';\n\n/**\n * Text input with multiple visual variants and inline status or icon adornments.\n * Label is purely CSS-driven (peer + placeholder-shown + focus), no hooks used.\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProp>(\n (\n {\n variant = 'outline',\n size = 'medium',\n success,\n error,\n warn,\n icon,\n className,\n wrapperClassName,\n label,\n ...props\n },\n ref\n ) => {\n const { placeholder, onFocus, onBlur, ...inputProps } = props;\n const reactId = React.useId();\n const hasLabel = Boolean(label);\n const hasProvidedPlaceholder = typeof placeholder === 'string' && placeholder.trim().length > 0;\n const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;\n const [isFocused, setIsFocused] = React.useState(false);\n const classBase =\n 'input-base focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400';\n const variantClasses = {\n solid:\n 'rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40',\n sharp:\n 'rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40',\n outline:\n 'rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40',\n text: 'rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70',\n ghost:\n 'rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25',\n filled:\n 'rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30',\n underlined:\n 'rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70',\n rounded:\n 'rounded-full px-4 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20'\n } satisfies Record<InputVariant, string>;\n const sizeClasses = {\n 'x-small': { paddingNoIcon: 'px-2 py-2', paddingWithIcon: 'pl-8 pr-2 py-2', text: 'text-xs' },\n small: {\n paddingNoIcon: 'px-2.5 py-2.5',\n paddingWithIcon: 'pl-9 pr-2.5 py-2.5',\n text: 'text-sm'\n },\n medium: { paddingNoIcon: 'px-3 py-3', paddingWithIcon: 'pl-10 pr-3 py-3', text: 'text-base' },\n large: {\n paddingNoIcon: 'px-3.5 py-3.5',\n paddingWithIcon: 'pl-11 pr-3.5 py-3.5',\n text: 'text-lg'\n },\n 'x-large': { paddingNoIcon: 'px-4 py-4', paddingWithIcon: 'pl-12 pr-4 py-4', text: 'text-xl' }\n } satisfies Record<InputSize, { paddingNoIcon: string; paddingWithIcon: string; text: string }>;\n\n const status = error\n ? { tone: 'error' as const, message: error }\n : warn\n ? { tone: 'warn' as const, message: warn }\n : success\n ? { tone: 'success' as const, message: success }\n : undefined;\n\n const statusClasses = {\n error: 'border-red-500 focus:border-red-500 focus:ring-red-400',\n warn: 'border-amber-500 focus:border-amber-500 focus:ring-amber-400',\n success: 'border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400'\n } as const;\n\n const statusMessageClasses = {\n error: 'text-red-600 dark:text-red-300',\n warn: 'text-amber-600 dark:text-amber-300',\n success: 'text-emerald-600 dark:text-emerald-300'\n } as const;\n\n const variantClass = variantClasses[variant] ?? variantClasses.outline;\n const toneClass = status ? statusClasses[status.tone] : undefined;\n let prependIconClass = resolveIconClassName(icon);\n const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;\n const sizeClass = [\n prependIconClass ? sizeConfig.paddingWithIcon : sizeConfig.paddingNoIcon,\n sizeConfig.text\n ].join(' ');\n\n // useId keeps SSR/CSR ids consistent while still providing a fallback name\n const inputName = inputProps.name || reactId;\n\n // Ensure placeholder is present when label exists so :placeholder-shown works.\n // Label stays primary; placeholder only appears on focus when the field is empty.\n const basePlaceholder = placeholder ?? (hasLabel ? ' ' : undefined);\n const placeholderValue = hidePlaceholderUntilFocus\n ? isFocused\n ? placeholder\n : ' '\n : basePlaceholder;\n const placeholderClass = hidePlaceholderUntilFocus\n ? 'placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400'\n : undefined;\n\n // Label left offset depends on icon presence\n const labelLeftClass = prependIconClass ? 'left-10' : 'left-3';\n\n // Background for floated label — keep transparent for outline/text/underlined variants\n const labelBgDefault = ['outline', 'text', 'underlined'].includes(variant)\n ? 'bg-transparent'\n : 'bg-white/90 dark:bg-slate-900';\n\n const handleFocus: React.FocusEventHandler<HTMLInputElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleBlur: React.FocusEventHandler<HTMLInputElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(false);\n onBlur?.(event);\n };\n\n return (\n <div className={twMerge('flex flex-col gap-1', wrapperClassName)}>\n <div className='relative flex items-center'>\n {prependIconClass && (\n <i\n className={twMerge(\n 'pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400',\n (status?.tone && statusMessageClasses[status?.tone]) || '',\n prependIconClass\n )}\n aria-hidden\n />\n )}\n\n {/* input is peer so label can react with peer-* utilities */}\n <input\n {...inputProps}\n ref={ref}\n id={inputName}\n name={inputName}\n placeholder={placeholderValue}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className={twMerge(\n 'peer',\n classBase,\n variantClass,\n toneClass,\n sizeClass,\n placeholderClass,\n className\n )}\n />\n\n {label && (\n <label\n htmlFor={inputName}\n className={twMerge(\n 'absolute transition-all duration-150 pointer-events-none text-gray-700 rounded dark:text-gray-200',\n labelLeftClass,\n // Floated state: center label's vertical middle on the top border line\n '-top-1.5 left-1 peer-focus:left-7 -translate-y-2/3 text-xs px-1',\n labelBgDefault,\n // focus state mirrors floated state (keeps center on border)\n 'peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:bg-white peer-focus:text-gray-600 dark:peer-focus:bg-slate-900 dark:peer-focus:text-gray-300',\n // when input is empty (placeholder shown) -> center label inside input\n 'peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400'\n )}\n >\n {label}\n </label>\n )}\n\n {/* {appendIconClass && (\n <i className={twMerge('pointer-events-none absolute right-3 text-gray-500', appendIconClass)} aria-hidden />\n )} */}\n </div>\n {status?.message && (\n <span className={twMerge('text-sm', statusMessageClasses[status.tone])}>\n {status.message}\n </span>\n )}\n </div>\n );\n }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"]}
|
|
@@ -5,11 +5,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
5
5
|
|
|
6
6
|
// src/Containment/Chip/states.chip.ts
|
|
7
7
|
var chipBaseClasses = "inline-flex items-center gap-1.5 border font-medium leading-tight transition-all duration-200 select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2";
|
|
8
|
-
var chipSizeClasses = {
|
|
9
|
-
small: "text-xs px-3 py-1 min-h-[1.5rem]",
|
|
10
|
-
medium: "text-sm px-4 py-1.5 min-h-[2rem]",
|
|
11
|
-
large: "text-base px-5 py-2 min-h-[2.5rem]"
|
|
12
|
-
};
|
|
13
8
|
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";
|
|
14
9
|
var blackAndWhitePaletteClasses = {
|
|
15
10
|
solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
@@ -123,10 +118,18 @@ var resolveIconClassName = (icon) => {
|
|
|
123
118
|
const normalized = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
124
119
|
return Array.from(/* @__PURE__ */ new Set([...baseClasses, normalized])).join(" ");
|
|
125
120
|
};
|
|
121
|
+
var chipSizeClasses = {
|
|
122
|
+
"x-small": "h-5 text-[0.65rem] px-1.5",
|
|
123
|
+
small: "h-6 text-xs px-2",
|
|
124
|
+
medium: "h-7 text-sm px-2.5",
|
|
125
|
+
large: "h-8 text-sm px-3",
|
|
126
|
+
"x-large": "h-9 text-base px-3.5"
|
|
127
|
+
};
|
|
126
128
|
var Chip = forwardRef(
|
|
127
129
|
({
|
|
128
130
|
variant = "solid",
|
|
129
131
|
color = "primary",
|
|
132
|
+
interactive = false,
|
|
130
133
|
size = "medium",
|
|
131
134
|
pill = true,
|
|
132
135
|
selected = false,
|
|
@@ -143,14 +146,14 @@ var Chip = forwardRef(
|
|
|
143
146
|
...rest
|
|
144
147
|
}, ref) => {
|
|
145
148
|
const { onClick, onKeyDown, role, tabIndex, ...nativeProps } = rest;
|
|
146
|
-
const
|
|
149
|
+
const isInteractive = interactive || typeof onClick === "function";
|
|
147
150
|
const variantClass = resolveVariantClass(variant, color);
|
|
148
151
|
const sizeClass = chipSizeClasses[size] ?? chipSizeClasses.medium;
|
|
149
152
|
const pillClass = pill ? "rounded-full" : "rounded-lg";
|
|
150
|
-
const cursorClass = disabled ? "pointer-events-none opacity-50" :
|
|
153
|
+
const cursorClass = disabled ? "pointer-events-none opacity-50" : isInteractive ? "cursor-pointer" : "cursor-default";
|
|
151
154
|
const selectedClass = selected ? "ring-2 ring-current/50 ring-offset-2 ring-offset-white" : void 0;
|
|
152
|
-
const resolvedRole = disabled ? role : role ?? (
|
|
153
|
-
const resolvedTabIndex = disabled ? -1 : tabIndex ?? (
|
|
155
|
+
const resolvedRole = disabled ? role : role ?? (isInteractive ? "button" : void 0);
|
|
156
|
+
const resolvedTabIndex = disabled ? -1 : tabIndex ?? (isInteractive ? 0 : void 0);
|
|
154
157
|
const prependIconClassName = resolveIconClassName(prependIcon);
|
|
155
158
|
const appendIconClassName = resolveIconClassName(appendIcon);
|
|
156
159
|
const closeIconClassName = resolveIconClassName(closeIcon);
|
|
@@ -165,7 +168,7 @@ var Chip = forwardRef(
|
|
|
165
168
|
};
|
|
166
169
|
const handleKeyDown = (event) => {
|
|
167
170
|
onKeyDown?.(event);
|
|
168
|
-
if (event.defaultPrevented || disabled || !
|
|
171
|
+
if (event.defaultPrevented || disabled || !isInteractive) {
|
|
169
172
|
return;
|
|
170
173
|
}
|
|
171
174
|
if (event.key === "Enter" || event.key === " ") {
|
|
@@ -187,14 +190,7 @@ var Chip = forwardRef(
|
|
|
187
190
|
}
|
|
188
191
|
};
|
|
189
192
|
const renderableChildren = typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx("span", { className: "truncate", children }) : children;
|
|
190
|
-
const filterAdornment = filter ? /* @__PURE__ */ jsx(
|
|
191
|
-
"span",
|
|
192
|
-
{
|
|
193
|
-
className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-current/30 text-[0.55rem]",
|
|
194
|
-
"aria-hidden": true,
|
|
195
|
-
children: filterIconClassName ? /* @__PURE__ */ jsx("i", { className: filterIconClassName, "aria-hidden": true }) : null
|
|
196
|
-
}
|
|
197
|
-
) : null;
|
|
193
|
+
const filterAdornment = filter ? /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-current/30 text-[0.55rem]", "aria-hidden": true, children: filterIconClassName ? /* @__PURE__ */ jsx("i", { className: filterIconClassName, "aria-hidden": true }) : null }) : null;
|
|
198
194
|
return /* @__PURE__ */ jsxs(
|
|
199
195
|
"span",
|
|
200
196
|
{
|
|
@@ -205,17 +201,9 @@ var Chip = forwardRef(
|
|
|
205
201
|
"aria-disabled": disabled || void 0,
|
|
206
202
|
"aria-pressed": filter ? selected : void 0,
|
|
207
203
|
"data-selected": selected || void 0,
|
|
208
|
-
className: twMerge(
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
pillClass,
|
|
212
|
-
variantClass,
|
|
213
|
-
cursorClass,
|
|
214
|
-
selectedClass,
|
|
215
|
-
className
|
|
216
|
-
),
|
|
217
|
-
onClick: interactive ? handleClick : void 0,
|
|
218
|
-
onKeyDown: interactive ? handleKeyDown : onKeyDown,
|
|
204
|
+
className: twMerge(chipBaseClasses, sizeClass, pillClass, variantClass, cursorClass, selectedClass, className),
|
|
205
|
+
onClick: isInteractive ? handleClick : void 0,
|
|
206
|
+
onKeyDown: isInteractive ? handleKeyDown : onKeyDown,
|
|
219
207
|
children: [
|
|
220
208
|
filterAdornment,
|
|
221
209
|
prependIconClassName && /* @__PURE__ */ jsx("i", { className: twMerge("text-[1em] leading-none", prependIconClassName), "aria-hidden": true }),
|
|
@@ -242,5 +230,5 @@ Chip.displayName = "Chip";
|
|
|
242
230
|
var Chip_default = Chip;
|
|
243
231
|
|
|
244
232
|
export { Chip_default };
|
|
245
|
-
//# sourceMappingURL=chunk-
|
|
246
|
-
//# sourceMappingURL=chunk-
|
|
233
|
+
//# sourceMappingURL=chunk-XPEOXO2T.js.map
|
|
234
|
+
//# sourceMappingURL=chunk-XPEOXO2T.js.map
|