@lindle/linoardo 1.0.20 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/button.cjs +30 -15
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +17 -7
- package/dist/button.d.ts +17 -7
- package/dist/button.js +1 -1
- package/dist/card.cjs +2 -2
- package/dist/card.cjs.map +1 -1
- package/dist/card.js +1 -1
- package/dist/chip.cjs +8 -9
- package/dist/chip.cjs.map +1 -1
- package/dist/chip.d.cts +4 -4
- package/dist/chip.d.ts +4 -4
- package/dist/chip.js +1 -1
- package/dist/{chunk-B5FW33K3.js → chunk-2UL3S6KC.js} +4 -4
- package/dist/chunk-2UL3S6KC.js.map +1 -0
- package/dist/{chunk-5PBPURGP.js → chunk-DSZ3EOQB.js} +10 -11
- package/dist/chunk-DSZ3EOQB.js.map +1 -0
- package/dist/{chunk-MFLH36XK.js → chunk-JGEXEDKS.js} +3 -3
- package/dist/{chunk-MFLH36XK.js.map → chunk-JGEXEDKS.js.map} +1 -1
- package/dist/chunk-QRBJFDV5.js +170 -0
- package/dist/chunk-QRBJFDV5.js.map +1 -0
- package/dist/{chunk-SZU6OYLS.js → chunk-RFPNVLAD.js} +31 -17
- package/dist/chunk-RFPNVLAD.js.map +1 -0
- package/dist/{chunk-36T6I3XH.js → chunk-SAGQYMS3.js} +14 -14
- package/dist/chunk-SAGQYMS3.js.map +1 -0
- package/dist/chunk-VPF7M2PB.js +141 -0
- package/dist/chunk-VPF7M2PB.js.map +1 -0
- package/dist/hero.cjs +143 -0
- package/dist/hero.cjs.map +1 -0
- package/dist/hero.d.cts +34 -0
- package/dist/hero.d.ts +34 -0
- package/dist/hero.js +3 -0
- package/dist/hero.js.map +1 -0
- package/dist/index.cjs +88 -55
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -59
- package/dist/index.d.ts +4 -59
- package/dist/index.js +7 -286
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +1 -1
- package/dist/profileCard.cjs +391 -0
- package/dist/profileCard.cjs.map +1 -0
- package/dist/profileCard.d.cts +29 -0
- package/dist/profileCard.d.ts +29 -0
- package/dist/profileCard.js +5 -0
- package/dist/profileCard.js.map +1 -0
- package/dist/select.cjs +12 -12
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +1 -1
- package/dist/styles.css +108 -9
- package/dist/switch.d.cts +1 -1
- package/dist/switch.d.ts +1 -1
- package/package.json +2 -1
- package/dist/chunk-36T6I3XH.js.map +0 -1
- package/dist/chunk-5PBPURGP.js.map +0 -1
- package/dist/chunk-B5FW33K3.js.map +0 -1
- package/dist/chunk-SZU6OYLS.js.map +0 -1
|
@@ -11,16 +11,15 @@ var chipSizeClasses = {
|
|
|
11
11
|
large: "text-base px-5 py-2 min-h-[2.5rem]"
|
|
12
12
|
};
|
|
13
13
|
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
|
-
var blackAndWhiteChipVariantClass = "bg-white text-black border border-black hover:bg-white focus-visible:ring-black/40 focus-visible:ring-offset-white";
|
|
15
14
|
var blackAndWhitePaletteClasses = {
|
|
16
|
-
solid:
|
|
17
|
-
outline:
|
|
18
|
-
ghost:
|
|
19
|
-
text:
|
|
20
|
-
filled:
|
|
21
|
-
underlined:
|
|
22
|
-
rounded:
|
|
23
|
-
sharp:
|
|
15
|
+
solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
16
|
+
outline: "bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
17
|
+
ghost: "bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20",
|
|
18
|
+
text: "bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20",
|
|
19
|
+
filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
|
|
20
|
+
underlined: "bg-transparent text-black border-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20",
|
|
21
|
+
rounded: "rounded-full bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
22
|
+
sharp: "rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white"
|
|
24
23
|
};
|
|
25
24
|
var paletteVariantClasses = {
|
|
26
25
|
primary: {
|
|
@@ -243,5 +242,5 @@ Chip.displayName = "Chip";
|
|
|
243
242
|
var Chip_default = Chip;
|
|
244
243
|
|
|
245
244
|
export { Chip_default };
|
|
246
|
-
//# sourceMappingURL=chunk-
|
|
247
|
-
//# sourceMappingURL=chunk-
|
|
245
|
+
//# sourceMappingURL=chunk-DSZ3EOQB.js.map
|
|
246
|
+
//# sourceMappingURL=chunk-DSZ3EOQB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Containment/Chip/states.chip.ts","../src/Containment/Chip/index.tsx"],"names":["normalized"],"mappings":"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","file":"chunk-DSZ3EOQB.js","sourcesContent":["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"]}
|
|
@@ -51,7 +51,7 @@ var Input = ({
|
|
|
51
51
|
const variantClasses = {
|
|
52
52
|
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",
|
|
53
53
|
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",
|
|
54
|
-
outline: "rounded border border-
|
|
54
|
+
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",
|
|
55
55
|
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",
|
|
56
56
|
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",
|
|
57
57
|
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",
|
|
@@ -164,5 +164,5 @@ var Input = ({
|
|
|
164
164
|
var Input_default = Input;
|
|
165
165
|
|
|
166
166
|
export { Input_default };
|
|
167
|
-
//# sourceMappingURL=chunk-
|
|
168
|
-
//# sourceMappingURL=chunk-
|
|
167
|
+
//# sourceMappingURL=chunk-JGEXEDKS.js.map
|
|
168
|
+
//# sourceMappingURL=chunk-JGEXEDKS.js.map
|
|
@@ -1 +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-MFLH36XK.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.FC<InputProp> = ({\n variant = 'outline',\n size = 'medium',\n success,\n error,\n warn,\n icon,\n className,\n wrapperClassName,\n label,\n ...props\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 border-gray-300 bg-transparent focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-transparent dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/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 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 dark:text-gray-200',\n labelLeftClass,\n // Floated state: center label's vertical middle on the top border line\n 'top-0 -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/90 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\nexport default Input;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/Form/Input/states.input.ts","../src/Form/Input/index.tsx"],"names":["normalizedName"],"mappings":"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","file":"chunk-JGEXEDKS.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.FC<InputProp> = ({\n variant = 'outline',\n size = 'medium',\n success,\n error,\n warn,\n icon,\n className,\n wrapperClassName,\n label,\n ...props\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 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 dark:text-gray-200',\n labelLeftClass,\n // Floated state: center label's vertical middle on the top border line\n 'top-0 -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/90 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\nexport default Input;\n"]}
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import { Button_default } from './chunk-RFPNVLAD.js';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
var variantMap = {
|
|
6
|
+
solid: "bg-white text-gray-900 border border-gray-200 shadow-lg shadow-gray-200/60",
|
|
7
|
+
outline: "bg-white text-gray-900 border border-gray-300",
|
|
8
|
+
text: "bg-transparent text-gray-900",
|
|
9
|
+
ghost: "bg-slate-50 text-gray-900 border border-slate-100",
|
|
10
|
+
filled: "bg-slate-900 text-white shadow-2xl shadow-slate-900/30",
|
|
11
|
+
underlined: "bg-white text-gray-900 border-b-4 border-primary/70",
|
|
12
|
+
rounded: "bg-white text-gray-900 border border-gray-200 rounded-3xl shadow-md",
|
|
13
|
+
sharp: "bg-white text-gray-900 border border-gray-200 rounded-none shadow"
|
|
14
|
+
};
|
|
15
|
+
var cardRadiusMap = {
|
|
16
|
+
solid: "rounded-2xl",
|
|
17
|
+
outline: "rounded-2xl",
|
|
18
|
+
text: "rounded-2xl",
|
|
19
|
+
ghost: "rounded-2xl",
|
|
20
|
+
filled: "rounded-3xl",
|
|
21
|
+
underlined: "rounded-t-2xl",
|
|
22
|
+
rounded: "rounded-3xl",
|
|
23
|
+
sharp: "rounded-none"
|
|
24
|
+
};
|
|
25
|
+
var avatarRadiusMap = {
|
|
26
|
+
solid: "rounded-2xl",
|
|
27
|
+
outline: "rounded-2xl",
|
|
28
|
+
text: "rounded-2xl",
|
|
29
|
+
ghost: "rounded-2xl",
|
|
30
|
+
filled: "rounded-3xl",
|
|
31
|
+
underlined: "rounded-2xl",
|
|
32
|
+
rounded: "rounded-3xl",
|
|
33
|
+
sharp: "rounded-none"
|
|
34
|
+
};
|
|
35
|
+
var isDarkVariant = (variant) => variant === "filled";
|
|
36
|
+
var SocialIcons = ({
|
|
37
|
+
socials = [],
|
|
38
|
+
dark
|
|
39
|
+
}) => {
|
|
40
|
+
if (socials.length === 0) return null;
|
|
41
|
+
twMerge(
|
|
42
|
+
"flex h-10 w-10 items-center justify-center rounded-full border text-lg transition",
|
|
43
|
+
dark ? "border-white/30 text-white hover:bg-white/10" : "border-gray-200 text-gray-600 hover:border-primary/50 hover:text-primary"
|
|
44
|
+
);
|
|
45
|
+
return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: socials.map((link) => (
|
|
46
|
+
// <a
|
|
47
|
+
// key={link.href}
|
|
48
|
+
// href={link.href}
|
|
49
|
+
// aria-label={link.label ?? link.icon}
|
|
50
|
+
// className={iconBase}
|
|
51
|
+
// >
|
|
52
|
+
// <i className={twMerge('mdi', link.icon)} aria-hidden />
|
|
53
|
+
// </a>
|
|
54
|
+
/* @__PURE__ */ jsx(Button_default, { iconOnly: true, icon: link.icon, variant: "rounded", size: "x-small" })
|
|
55
|
+
)) });
|
|
56
|
+
};
|
|
57
|
+
var Badges = ({ badges = [], dark }) => {
|
|
58
|
+
if (badges.length === 0) return null;
|
|
59
|
+
const badgeBase = twMerge(
|
|
60
|
+
"inline-flex items-center rounded-full px-3 py-1 mb-2 text-xs font-semibold",
|
|
61
|
+
dark ? "bg-white/10 text-white border border-white/20" : "bg-primary/10 text-primary border border-primary/15"
|
|
62
|
+
);
|
|
63
|
+
return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: badges.map((badge) => /* @__PURE__ */ jsx("span", { className: badgeBase, children: badge.label }, badge.label)) });
|
|
64
|
+
};
|
|
65
|
+
var AvatarFrame = ({ avatar, size = "md", ring, radius }) => {
|
|
66
|
+
const dimension = size === "lg" ? "h-28 w-28" : "h-20 w-20";
|
|
67
|
+
const ringClass = ring ? "ring-4 ring-white/80 ring-offset-4 ring-offset-transparent" : "";
|
|
68
|
+
return /* @__PURE__ */ jsx(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
className: twMerge(
|
|
72
|
+
"overflow-hidden bg-linear-to-br from-primary/10 to-primary/30",
|
|
73
|
+
radius,
|
|
74
|
+
dimension,
|
|
75
|
+
ringClass
|
|
76
|
+
),
|
|
77
|
+
children: /* @__PURE__ */ jsx(
|
|
78
|
+
"img",
|
|
79
|
+
{
|
|
80
|
+
src: avatar.src,
|
|
81
|
+
alt: avatar.alt ?? "",
|
|
82
|
+
className: twMerge("h-full w-full object-cover", radius),
|
|
83
|
+
loading: "lazy"
|
|
84
|
+
}
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
);
|
|
88
|
+
};
|
|
89
|
+
var ProfileCard = ({
|
|
90
|
+
name,
|
|
91
|
+
role,
|
|
92
|
+
description,
|
|
93
|
+
avatar,
|
|
94
|
+
socials,
|
|
95
|
+
badges,
|
|
96
|
+
layout = "classic",
|
|
97
|
+
variant = "solid",
|
|
98
|
+
className,
|
|
99
|
+
...rest
|
|
100
|
+
}) => {
|
|
101
|
+
const baseVariant = variantMap[variant] ?? variantMap.solid;
|
|
102
|
+
const cardRadius = cardRadiusMap[variant] ?? "rounded-2xl";
|
|
103
|
+
const avatarRadius = avatarRadiusMap[variant] ?? "rounded-2xl";
|
|
104
|
+
const dark = isDarkVariant(variant);
|
|
105
|
+
const muted = dark ? "text-white/70" : "text-gray-600";
|
|
106
|
+
const accent = dark ? "text-white" : "text-gray-900";
|
|
107
|
+
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
108
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
109
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
110
|
+
/* @__PURE__ */ jsx(AvatarFrame, { avatar, radius: avatarRadius }),
|
|
111
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
112
|
+
/* @__PURE__ */ jsx("h3", { className: twMerge("text-xl font-semibold", accent), children: name }),
|
|
113
|
+
role && /* @__PURE__ */ jsx("p", { className: twMerge("text-sm font-medium", muted), children: role })
|
|
114
|
+
] })
|
|
115
|
+
] }),
|
|
116
|
+
description && /* @__PURE__ */ jsx("p", { className: twMerge("text-sm leading-relaxed", muted), children: description }),
|
|
117
|
+
/* @__PURE__ */ jsx(Badges, { badges, dark })
|
|
118
|
+
] }),
|
|
119
|
+
/* @__PURE__ */ jsx(SocialIcons, { socials, dark })
|
|
120
|
+
] });
|
|
121
|
+
const spotlightContent = /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden", children: [
|
|
122
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-br from-primary/10 via-transparent to-primary/20 blur-3xl" }),
|
|
123
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-6 md:flex-row md:items-center", children: [
|
|
124
|
+
/* @__PURE__ */ jsx(AvatarFrame, { avatar, size: "lg", ring: true, radius: avatarRadius }),
|
|
125
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
|
|
126
|
+
/* @__PURE__ */ jsx("h3", { className: twMerge("text-2xl font-semibold", accent), children: name }),
|
|
127
|
+
role && /* @__PURE__ */ jsx("p", { className: twMerge("text-sm font-medium uppercase tracking-wide", muted), children: role }),
|
|
128
|
+
description && /* @__PURE__ */ jsx("p", { className: twMerge("text-sm leading-relaxed", muted), children: description }),
|
|
129
|
+
/* @__PURE__ */ jsx(Badges, { badges, dark }),
|
|
130
|
+
/* @__PURE__ */ jsx(SocialIcons, { socials, dark })
|
|
131
|
+
] })
|
|
132
|
+
] })
|
|
133
|
+
] });
|
|
134
|
+
const splitContent = /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-[auto,1fr] md:items-center", children: [
|
|
135
|
+
/* @__PURE__ */ jsx(AvatarFrame, { avatar, size: "lg", ring: true, radius: avatarRadius }),
|
|
136
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
|
|
137
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
138
|
+
/* @__PURE__ */ jsx("h3", { className: twMerge("text-2xl font-semibold", accent), children: name }),
|
|
139
|
+
role && /* @__PURE__ */ jsx("p", { className: twMerge("text-sm font-medium", muted), children: role })
|
|
140
|
+
] }),
|
|
141
|
+
description && /* @__PURE__ */ jsx("p", { className: twMerge("text-sm leading-relaxed", muted), children: description }),
|
|
142
|
+
/* @__PURE__ */ jsx(Badges, { badges, dark }),
|
|
143
|
+
/* @__PURE__ */ jsx(SocialIcons, { socials, dark })
|
|
144
|
+
] })
|
|
145
|
+
] });
|
|
146
|
+
const layoutMap = {
|
|
147
|
+
classic: content,
|
|
148
|
+
split: splitContent,
|
|
149
|
+
spotlight: spotlightContent
|
|
150
|
+
};
|
|
151
|
+
return /* @__PURE__ */ jsx(
|
|
152
|
+
"article",
|
|
153
|
+
{
|
|
154
|
+
...rest,
|
|
155
|
+
className: twMerge(
|
|
156
|
+
"profile-card relative overflow-hidden p-6 transition duration-200 hover:-translate-y-0.5 hover:shadow-xl",
|
|
157
|
+
baseVariant,
|
|
158
|
+
cardRadius,
|
|
159
|
+
className
|
|
160
|
+
),
|
|
161
|
+
children: layoutMap[layout] ?? layoutMap.classic
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
};
|
|
165
|
+
ProfileCard.displayName = "ProfileCard";
|
|
166
|
+
var ProfileCard_default = ProfileCard;
|
|
167
|
+
|
|
168
|
+
export { ProfileCard_default };
|
|
169
|
+
//# sourceMappingURL=chunk-QRBJFDV5.js.map
|
|
170
|
+
//# sourceMappingURL=chunk-QRBJFDV5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Blocks/ProfileCard/index.tsx"],"names":[],"mappings":"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","file":"chunk-QRBJFDV5.js","sourcesContent":["import Button from '@lindle/linoardo/Containment/Button';\nimport type { GlobalVariant } from '@lindle/linoardo/global.types';\nimport * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport type SocialLink = {\n icon: string;\n href: string;\n label?: string;\n};\n\nexport type Badge = {\n label: string;\n};\n\nexport type Avatar = {\n src: string;\n alt?: string;\n};\n\nexport type ProfileCardLayout = 'classic' | 'split' | 'spotlight';\n\nexport type ProfileCardProps = React.HTMLAttributes<HTMLElement> & {\n name: string;\n role?: string;\n description?: React.ReactNode;\n avatar: Avatar;\n socials?: SocialLink[];\n badges?: Badge[];\n layout?: ProfileCardLayout;\n variant?: GlobalVariant;\n};\n\nconst variantMap: Record<GlobalVariant, string> = {\n solid: 'bg-white text-gray-900 border border-gray-200 shadow-lg shadow-gray-200/60',\n outline: 'bg-white text-gray-900 border border-gray-300',\n text: 'bg-transparent text-gray-900',\n ghost: 'bg-slate-50 text-gray-900 border border-slate-100',\n filled: 'bg-slate-900 text-white shadow-2xl shadow-slate-900/30',\n underlined: 'bg-white text-gray-900 border-b-4 border-primary/70',\n rounded: 'bg-white text-gray-900 border border-gray-200 rounded-3xl shadow-md',\n sharp: 'bg-white text-gray-900 border border-gray-200 rounded-none shadow'\n};\n\nconst cardRadiusMap: Record<GlobalVariant, string> = {\n solid: 'rounded-2xl',\n outline: 'rounded-2xl',\n text: 'rounded-2xl',\n ghost: 'rounded-2xl',\n filled: 'rounded-3xl',\n underlined: 'rounded-t-2xl',\n rounded: 'rounded-3xl',\n sharp: 'rounded-none'\n};\n\nconst avatarRadiusMap: Record<GlobalVariant, string> = {\n solid: 'rounded-2xl',\n outline: 'rounded-2xl',\n text: 'rounded-2xl',\n ghost: 'rounded-2xl',\n filled: 'rounded-3xl',\n underlined: 'rounded-2xl',\n rounded: 'rounded-3xl',\n sharp: 'rounded-none'\n};\n\nconst isDarkVariant = (variant: GlobalVariant) => variant === 'filled';\n\nconst SocialIcons: React.FC<{ socials?: SocialLink[]; dark?: boolean }> = ({\n socials = [],\n dark\n}) => {\n if (socials.length === 0) return null;\n\n const iconBase = twMerge(\n 'flex h-10 w-10 items-center justify-center rounded-full border text-lg transition',\n dark\n ? 'border-white/30 text-white hover:bg-white/10'\n : 'border-gray-200 text-gray-600 hover:border-primary/50 hover:text-primary'\n );\n\n return (\n <div className='flex flex-wrap gap-2'>\n {socials.map(link => (\n // <a\n // key={link.href}\n // href={link.href}\n // aria-label={link.label ?? link.icon}\n // className={iconBase}\n // >\n // <i className={twMerge('mdi', link.icon)} aria-hidden />\n // </a>\n <Button iconOnly icon={link.icon} variant='rounded' size='x-small' />\n ))}\n </div>\n );\n};\n\nconst Badges: React.FC<{ badges?: Badge[]; dark?: boolean }> = ({ badges = [], dark }) => {\n if (badges.length === 0) return null;\n\n const badgeBase = twMerge(\n 'inline-flex items-center rounded-full px-3 py-1 mb-2 text-xs font-semibold',\n dark\n ? 'bg-white/10 text-white border border-white/20'\n : 'bg-primary/10 text-primary border border-primary/15'\n );\n\n return (\n <div className='flex flex-wrap gap-2'>\n {badges.map(badge => (\n <span key={badge.label} className={badgeBase}>\n {badge.label}\n </span>\n ))}\n </div>\n );\n};\n\nconst AvatarFrame: React.FC<{\n avatar: Avatar;\n size?: 'md' | 'lg';\n ring?: boolean;\n radius: string;\n}> = ({ avatar, size = 'md', ring, radius }) => {\n const dimension = size === 'lg' ? 'h-28 w-28' : 'h-20 w-20';\n const ringClass = ring ? 'ring-4 ring-white/80 ring-offset-4 ring-offset-transparent' : '';\n return (\n <div\n className={twMerge(\n 'overflow-hidden bg-linear-to-br from-primary/10 to-primary/30',\n radius,\n dimension,\n ringClass\n )}\n >\n <img\n src={avatar.src}\n alt={avatar.alt ?? ''}\n className={twMerge('h-full w-full object-cover', radius)}\n loading='lazy'\n />\n </div>\n );\n};\n\nconst ProfileCard: React.FC<ProfileCardProps> = ({\n name,\n role,\n description,\n avatar,\n socials,\n badges,\n layout = 'classic',\n variant = 'solid',\n className,\n ...rest\n}) => {\n const baseVariant = variantMap[variant] ?? variantMap.solid;\n const cardRadius = cardRadiusMap[variant] ?? 'rounded-2xl';\n const avatarRadius = avatarRadiusMap[variant] ?? 'rounded-2xl';\n const dark = isDarkVariant(variant);\n const muted = dark ? 'text-white/70' : 'text-gray-600';\n const accent = dark ? 'text-white' : 'text-gray-900';\n\n const content = (\n <>\n <div className='space-y-2'>\n <div className='flex items-center gap-3'>\n <AvatarFrame avatar={avatar} radius={avatarRadius} />\n <div>\n <h3 className={twMerge('text-xl font-semibold', accent)}>{name}</h3>\n {role && <p className={twMerge('text-sm font-medium', muted)}>{role}</p>}\n </div>\n </div>\n {description && <p className={twMerge('text-sm leading-relaxed', muted)}>{description}</p>}\n <Badges badges={badges} dark={dark} />\n </div>\n <SocialIcons socials={socials} dark={dark} />\n </>\n );\n\n const spotlightContent = (\n <div className='relative overflow-hidden'>\n <div className='absolute inset-0 bg-linear-to-br from-primary/10 via-transparent to-primary/20 blur-3xl' />\n <div className='relative flex flex-col gap-6 md:flex-row md:items-center'>\n <AvatarFrame avatar={avatar} size='lg' ring radius={avatarRadius} />\n <div className='space-y-3'>\n <h3 className={twMerge('text-2xl font-semibold', accent)}>{name}</h3>\n {role && (\n <p className={twMerge('text-sm font-medium uppercase tracking-wide', muted)}>{role}</p>\n )}\n {description && (\n <p className={twMerge('text-sm leading-relaxed', muted)}>{description}</p>\n )}\n <Badges badges={badges} dark={dark} />\n <SocialIcons socials={socials} dark={dark} />\n </div>\n </div>\n </div>\n );\n\n const splitContent = (\n <div className='grid gap-6 md:grid-cols-[auto,1fr] md:items-center'>\n <AvatarFrame avatar={avatar} size='lg' ring radius={avatarRadius} />\n <div className='space-y-3'>\n <div>\n <h3 className={twMerge('text-2xl font-semibold', accent)}>{name}</h3>\n {role && <p className={twMerge('text-sm font-medium', muted)}>{role}</p>}\n </div>\n {description && <p className={twMerge('text-sm leading-relaxed', muted)}>{description}</p>}\n <Badges badges={badges} dark={dark} />\n <SocialIcons socials={socials} dark={dark} />\n </div>\n </div>\n );\n\n const layoutMap: Record<ProfileCardLayout, React.ReactNode> = {\n classic: content,\n split: splitContent,\n spotlight: spotlightContent\n };\n\n return (\n <article\n {...rest}\n className={twMerge(\n 'profile-card relative overflow-hidden p-6 transition duration-200 hover:-translate-y-0.5 hover:shadow-xl',\n baseVariant,\n cardRadius,\n className\n )}\n >\n {layoutMap[layout] ?? layoutMap.classic}\n </article>\n );\n};\n\nProfileCard.displayName = 'ProfileCard';\n\nexport default ProfileCard;\n"]}
|
|
@@ -3,17 +3,17 @@ import * as React from 'react';
|
|
|
3
3
|
import { twMerge } from 'tailwind-merge';
|
|
4
4
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
5
|
|
|
6
|
+
// src/Containment/Button/states.button.ts
|
|
6
7
|
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";
|
|
7
|
-
var blackAndWhiteVariantClass = "bg-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white";
|
|
8
8
|
var blackAndWhitePaletteClasses = {
|
|
9
|
-
solid:
|
|
10
|
-
outline:
|
|
11
|
-
ghost: "bg-neutral-300
|
|
12
|
-
text:
|
|
13
|
-
filled: "bg-black text-
|
|
14
|
-
underlined:
|
|
15
|
-
rounded:
|
|
16
|
-
sharp: "bg-black text-white rounded-none"
|
|
9
|
+
solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
10
|
+
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",
|
|
11
|
+
ghost: "text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent",
|
|
12
|
+
text: "bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent",
|
|
13
|
+
filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
|
|
14
|
+
underlined: "bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20",
|
|
15
|
+
rounded: "rounded-full border-2 border-black bg-white text-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
16
|
+
sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40"
|
|
17
17
|
};
|
|
18
18
|
var paletteVariantClasses = {
|
|
19
19
|
primary: {
|
|
@@ -109,7 +109,9 @@ var resolveIconClassName = (icon) => {
|
|
|
109
109
|
}
|
|
110
110
|
const [library, providedName] = icon;
|
|
111
111
|
const normalizedLibrary = library.trim();
|
|
112
|
-
const baseClasses = iconBaseClasses[normalizedLibrary] ?? [
|
|
112
|
+
const baseClasses = iconBaseClasses[normalizedLibrary] ?? [
|
|
113
|
+
normalizedLibrary
|
|
114
|
+
];
|
|
113
115
|
const iconName = providedName.trim();
|
|
114
116
|
if (!iconName) {
|
|
115
117
|
return baseClasses.join(" ");
|
|
@@ -125,12 +127,19 @@ var sizeClasses = {
|
|
|
125
127
|
"x-large": "px-7 py-3.5 text-xl"
|
|
126
128
|
};
|
|
127
129
|
var iconOnlySizeClasses = {
|
|
128
|
-
"x-small": "p-
|
|
130
|
+
"x-small": "p-0 text-xs aspect-square",
|
|
129
131
|
small: "p-2.5 text-sm aspect-square",
|
|
130
132
|
medium: "p-3 text-base aspect-square",
|
|
131
133
|
large: "p-3.5 text-lg aspect-square",
|
|
132
134
|
"x-large": "p-4 text-xl aspect-square"
|
|
133
135
|
};
|
|
136
|
+
var iconOnlyIconSizeClasses = {
|
|
137
|
+
"x-small": "text-sm",
|
|
138
|
+
small: "text-base",
|
|
139
|
+
medium: "text-lg",
|
|
140
|
+
large: "text-xl",
|
|
141
|
+
"x-large": "text-2xl"
|
|
142
|
+
};
|
|
134
143
|
var Button = React.forwardRef(
|
|
135
144
|
({
|
|
136
145
|
variant = "solid",
|
|
@@ -145,11 +154,15 @@ var Button = React.forwardRef(
|
|
|
145
154
|
children,
|
|
146
155
|
disabled,
|
|
147
156
|
onClick,
|
|
157
|
+
as,
|
|
148
158
|
...rest
|
|
149
159
|
}, ref) => {
|
|
160
|
+
const Component = as ?? "button";
|
|
150
161
|
const variantClass = resolveVariantClass(variant, color);
|
|
151
162
|
const sizeClass = iconOnly ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium : sizeClasses[size] ?? sizeClasses.medium;
|
|
163
|
+
const iconSizeClass = iconOnly ? iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium : void 0;
|
|
152
164
|
const blockClass = block ? "w-full" : null;
|
|
165
|
+
const isNativeButton = Component === "button";
|
|
153
166
|
const isDisabled = disabled || loading;
|
|
154
167
|
const cursor = onClick && !isDisabled ? "cursor-pointer" : "cursor-default";
|
|
155
168
|
const resolvedIconClass = resolveIconClassName(icon);
|
|
@@ -158,15 +171,16 @@ var Button = React.forwardRef(
|
|
|
158
171
|
const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;
|
|
159
172
|
const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);
|
|
160
173
|
const gapClass = hasDecorators ? "gap-2" : void 0;
|
|
161
|
-
const loadingIconClass = loading ? twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
|
|
162
|
-
const iconClassName = shouldRenderIcon ? twMerge("leading-none", resolvedIconClass) : void 0;
|
|
174
|
+
const loadingIconClass = loading ? twMerge("mdi mdi-loading mdi-spin", "leading-none", iconSizeClass) : void 0;
|
|
175
|
+
const iconClassName = shouldRenderIcon ? twMerge("leading-none", iconSizeClass, resolvedIconClass) : void 0;
|
|
163
176
|
return /* @__PURE__ */ jsxs(
|
|
164
|
-
|
|
177
|
+
Component,
|
|
165
178
|
{
|
|
166
179
|
...rest,
|
|
167
180
|
ref,
|
|
168
181
|
onClick,
|
|
169
|
-
disabled: isDisabled,
|
|
182
|
+
disabled: isNativeButton ? isDisabled : void 0,
|
|
183
|
+
"aria-disabled": !isNativeButton ? isDisabled : void 0,
|
|
170
184
|
className: twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
|
|
171
185
|
"data-loading": loading || void 0,
|
|
172
186
|
"aria-busy": loading || void 0,
|
|
@@ -183,5 +197,5 @@ Button.displayName = "Button";
|
|
|
183
197
|
var Button_default = Button;
|
|
184
198
|
|
|
185
199
|
export { Button_default };
|
|
186
|
-
//# sourceMappingURL=chunk-
|
|
187
|
-
//# sourceMappingURL=chunk-
|
|
200
|
+
//# sourceMappingURL=chunk-RFPNVLAD.js.map
|
|
201
|
+
//# sourceMappingURL=chunk-RFPNVLAD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx"],"names":["normalized"],"mappings":"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","file":"chunk-RFPNVLAD.js","sourcesContent":["import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport type { GlobalSize, Palette } from '@lindle/linoardo/global.types';\nimport type { ButtonProps, ButtonVariant } from './types.button';\n\nexport const base =\n 'btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed';\n\nconst blackAndWhitePaletteClasses = {\n solid: 'bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white',\n outline:\n 'border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white',\n ghost:\n 'text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent',\n text:\n 'bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent',\n filled:\n 'bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20',\n underlined:\n 'bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20',\n rounded:\n 'rounded-full border-2 border-black bg-white text-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white',\n sharp: 'bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40'\n} satisfies Record<ButtonVariant, string>;\n\nconst paletteVariantClasses: Record<Palette, Record<ButtonVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n sharp: 'rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n outline:\n 'border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary',\n ghost:\n 'text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent',\n filled:\n 'bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25',\n underlined:\n 'bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25',\n rounded:\n 'rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25'\n },\n neutral: {\n solid: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n sharp: 'rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n outline:\n 'border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400',\n ghost:\n 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300',\n rounded:\n 'rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300'\n },\n info: {\n solid: 'bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n sharp: 'rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n outline:\n 'border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400',\n ghost:\n 'text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200',\n underlined:\n 'bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200',\n rounded:\n 'rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200'\n },\n success: {\n solid: 'bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n sharp:\n 'rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n outline:\n 'border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400',\n ghost:\n 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200',\n underlined:\n 'bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200',\n rounded:\n 'rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200'\n },\n warning: {\n solid: 'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n sharp: 'rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n outline:\n 'border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400',\n ghost:\n 'text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200',\n underlined:\n 'bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200',\n rounded:\n 'rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200'\n },\n danger: {\n solid: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n sharp: 'rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n outline:\n 'border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400',\n ghost:\n 'text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200',\n underlined:\n 'bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200',\n rounded:\n 'rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200'\n },\n surface: {\n solid:\n 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n sharp:\n 'rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n outline:\n 'border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200',\n ghost:\n 'text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200',\n rounded:\n 'rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200'\n },\n bw: blackAndWhitePaletteClasses\n};\n\nexport const resolveVariantClass = (variant: ButtonVariant, palette: Palette) => {\n const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;\n return paletteVariants[variant] ?? paletteVariants.solid;\n};\n\nexport const resolveIconClassName = (icon?: ButtonProps['icon']) => {\n if (!icon) {\n return undefined;\n }\n\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) {\n return undefined;\n }\n\n if (trimmed.includes(' ')) {\n return trimmed;\n }\n\n const normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalized].join(' ');\n }\n\n const [library, providedName] = icon;\n const normalizedLibrary = library.trim();\n const baseClasses = iconBaseClasses[normalizedLibrary as keyof typeof iconBaseClasses] ?? [\n normalizedLibrary\n ];\n const iconName = providedName.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n\n const normalized = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return Array.from(new Set([...baseClasses, normalized])).join(' ');\n};\n\nexport const sizeClasses = {\n 'x-small': 'px-2.5 py-1 text-xs',\n small: 'px-3 py-1.5 text-sm',\n medium: 'px-4 py-2 text-base',\n large: 'px-6 py-3 text-lg',\n 'x-large': 'px-7 py-3.5 text-xl'\n} satisfies Record<GlobalSize, string>;\n\nexport const iconOnlySizeClasses = {\n 'x-small': 'p-0 text-xs aspect-square',\n small: 'p-2.5 text-sm aspect-square',\n medium: 'p-3 text-base aspect-square',\n large: 'p-3.5 text-lg aspect-square',\n 'x-large': 'p-4 text-xl aspect-square'\n} satisfies Record<GlobalSize, string>;\n\nexport const iconOnlyIconSizeClasses = {\n 'x-small': 'text-sm',\n small: 'text-base',\n medium: 'text-lg',\n large: 'text-xl',\n 'x-large': 'text-2xl'\n} satisfies Record<GlobalSize, string>;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport {\n base,\n iconOnlyIconSizeClasses,\n iconOnlySizeClasses,\n resolveIconClassName,\n resolveVariantClass,\n sizeClasses\n} from './states.button';\n\ntype PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];\ntype ButtonComponent = {\n <T extends React.ElementType = 'button'>(\n props: ButtonProps<T> & { ref?: PolymorphicRef<T> }\n ): React.ReactElement | null;\n displayName?: string;\n};\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button = React.forwardRef(\n <\n T extends React.ElementType = 'button'\n >({\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n block = false,\n loading = false,\n loadingText,\n icon,\n iconOnly = false,\n className,\n children,\n disabled,\n onClick,\n as,\n ...rest\n }: ButtonProps<T>,\n ref: React.ForwardedRef<unknown>) => {\n const Component = as ?? 'button';\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = iconOnly\n ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium\n : sizeClasses[size] ?? sizeClasses.medium;\n const iconSizeClass = iconOnly\n ? iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium\n : undefined;\n const blockClass = block ? 'w-full' : null;\n const isNativeButton = Component === 'button';\n const isDisabled = disabled || loading;\n const cursor = onClick && !isDisabled ? 'cursor-pointer' : 'cursor-default';\n const resolvedIconClass = resolveIconClassName(icon);\n const shouldRenderIcon = Boolean(resolvedIconClass && !loading);\n const isLoadingTextProvided = loadingText !== undefined && loadingText !== null;\n const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;\n const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);\n const gapClass = hasDecorators ? 'gap-2' : undefined;\n const loadingIconClass = loading\n ? twMerge('mdi mdi-loading mdi-spin', 'leading-none', iconSizeClass)\n : undefined;\n const iconClassName = shouldRenderIcon\n ? twMerge('leading-none', iconSizeClass, resolvedIconClass)\n : undefined;\n\n return (\n <Component\n {...rest}\n ref={ref as PolymorphicRef<T>}\n onClick={onClick}\n disabled={isNativeButton ? isDisabled : undefined}\n aria-disabled={!isNativeButton ? isDisabled : undefined}\n className={twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className)}\n data-loading={loading || undefined}\n aria-busy={loading || undefined}\n >\n {loading && <i className={loadingIconClass} aria-hidden />}\n {iconClassName && <i className={iconClassName} aria-hidden />}\n {content}\n </Component>\n );\n }\n) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"]}
|
|
@@ -14,16 +14,16 @@ function generateString(length = 5) {
|
|
|
14
14
|
}
|
|
15
15
|
return result;
|
|
16
16
|
}
|
|
17
|
-
var baseClass = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900";
|
|
17
|
+
var baseClass = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400";
|
|
18
18
|
var variantClasses = {
|
|
19
|
-
solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
|
|
20
|
-
sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
|
|
21
|
-
outline: "rounded border border-
|
|
22
|
-
text: "rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent",
|
|
23
|
-
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",
|
|
24
|
-
filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25",
|
|
25
|
-
underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent",
|
|
26
|
-
rounded: "rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm"
|
|
19
|
+
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",
|
|
20
|
+
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",
|
|
21
|
+
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",
|
|
22
|
+
text: "rounded-none border-0 border-b border-transparent pl-0 pr-10 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",
|
|
23
|
+
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",
|
|
24
|
+
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",
|
|
25
|
+
underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 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",
|
|
26
|
+
rounded: "rounded-full pl-4 pr-10 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"
|
|
27
27
|
};
|
|
28
28
|
var sizeClasses = {
|
|
29
29
|
"x-small": { padding: "pl-2 pr-8 py-2", text: "text-xs" },
|
|
@@ -105,7 +105,7 @@ var Select = ({
|
|
|
105
105
|
const shouldRenderPlaceholder = !multiple && placeholderText !== void 0;
|
|
106
106
|
const labelShouldFloat = hasValue || isFocused;
|
|
107
107
|
const labelLeftClass = "left-3";
|
|
108
|
-
const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90";
|
|
108
|
+
const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90 dark:bg-slate-900";
|
|
109
109
|
const handleFocus = (event) => {
|
|
110
110
|
if (hidePlaceholderUntilFocus) setIsFocused(true);
|
|
111
111
|
onFocus?.(event);
|
|
@@ -141,13 +141,13 @@ var Select = ({
|
|
|
141
141
|
]
|
|
142
142
|
}
|
|
143
143
|
),
|
|
144
|
-
!multiple && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500", children: /* @__PURE__ */ jsx("i", { className: "mdi mdi-chevron-down text-base leading-none", "aria-hidden": true }) }),
|
|
144
|
+
!multiple && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300", children: /* @__PURE__ */ jsx("i", { className: "mdi mdi-chevron-down text-base leading-none", "aria-hidden": true }) }),
|
|
145
145
|
label && /* @__PURE__ */ jsx(
|
|
146
146
|
"label",
|
|
147
147
|
{
|
|
148
148
|
htmlFor: selectId,
|
|
149
149
|
className: twMerge(
|
|
150
|
-
"absolute transition-all duration-150 pointer-events-none text-gray-700",
|
|
150
|
+
"absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
|
|
151
151
|
labelLeftClass,
|
|
152
152
|
labelShouldFloat ? [
|
|
153
153
|
"top-0 text-xs px-1",
|
|
@@ -163,5 +163,5 @@ var Select = ({
|
|
|
163
163
|
var Select_default = Select;
|
|
164
164
|
|
|
165
165
|
export { Select_default };
|
|
166
|
-
//# sourceMappingURL=chunk-
|
|
167
|
-
//# sourceMappingURL=chunk-
|
|
166
|
+
//# sourceMappingURL=chunk-SAGQYMS3.js.map
|
|
167
|
+
//# sourceMappingURL=chunk-SAGQYMS3.js.map
|