@lindle/linoardo 1.0.24 → 1.0.26
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/{chunk-JGEXEDKS.js → chunk-AUFMBVXA.js} +5 -5
- package/dist/{chunk-JGEXEDKS.js.map → chunk-AUFMBVXA.js.map} +1 -1
- package/dist/{chunk-OPMXH6OF.js → chunk-BZVDAMMY.js} +12 -4
- package/dist/chunk-BZVDAMMY.js.map +1 -0
- package/dist/{chunk-67USTSXI.js → chunk-KI4DBZ2V.js} +5 -3
- package/dist/chunk-KI4DBZ2V.js.map +1 -0
- package/dist/index.cjs +16 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +3 -3
- package/dist/input.cjs +3 -3
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +1 -1
- package/dist/notification.cjs +3 -1
- package/dist/notification.cjs.map +1 -1
- package/dist/notification.d.cts +1 -0
- package/dist/notification.d.ts +1 -0
- package/dist/notification.js +1 -1
- package/dist/select.cjs +10 -2
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +1 -1
- package/dist/styles.css +13 -0
- package/package.json +1 -1
- package/dist/chunk-67USTSXI.js.map +0 -1
- package/dist/chunk-OPMXH6OF.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export { Notification_default as Notification } from './chunk-
|
|
1
|
+
export { Notification_default as Notification } from './chunk-KI4DBZ2V.js';
|
|
2
2
|
export { Progress_default as Progress } from './chunk-Z5A2OIDI.js';
|
|
3
|
-
export { Input_default as Input } from './chunk-
|
|
3
|
+
export { Input_default as Input } from './chunk-AUFMBVXA.js';
|
|
4
4
|
export { TextArea_default as TextArea } from './chunk-SCJMH5VE.js';
|
|
5
5
|
export { Slider_default as Slider } from './chunk-GMDNSU26.js';
|
|
6
6
|
export { Switch_default as Switch } from './chunk-5LWU5T2C.js';
|
|
7
|
-
export { Select_default as Select } from './chunk-
|
|
7
|
+
export { Select_default as Select } from './chunk-BZVDAMMY.js';
|
|
8
8
|
import './chunk-6SKW43XI.js';
|
|
9
9
|
export { Icon_default as Icon } from './chunk-HEXJCQRO.js';
|
|
10
10
|
export { Hero_default as Hero } from './chunk-VPF7M2PB.js';
|
package/dist/input.cjs
CHANGED
|
@@ -156,13 +156,13 @@ var Input = ({
|
|
|
156
156
|
{
|
|
157
157
|
htmlFor: inputName,
|
|
158
158
|
className: tailwindMerge.twMerge(
|
|
159
|
-
"absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
|
|
159
|
+
"absolute transition-all duration-150 pointer-events-none text-gray-700 rounded dark:text-gray-200",
|
|
160
160
|
labelLeftClass,
|
|
161
161
|
// Floated state: center label's vertical middle on the top border line
|
|
162
|
-
"top-
|
|
162
|
+
"-top-1.5 left-1 peer-focus:left-7 -translate-y-2/3 text-xs px-1",
|
|
163
163
|
labelBgDefault,
|
|
164
164
|
// focus state mirrors floated state (keeps center on border)
|
|
165
|
-
"peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:bg-white
|
|
165
|
+
"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",
|
|
166
166
|
// when input is empty (placeholder shown) -> center label inside input
|
|
167
167
|
"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"
|
|
168
168
|
),
|
package/dist/input.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/globals.ts","../src/Form/Input/states.input.ts","../src/Form/Input/index.tsx"],"names":["normalizedName","React","twMerge","jsxs","jsx"],"mappings":"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","file":"input.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","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"]}
|
|
1
|
+
{"version":3,"sources":["../src/globals.ts","../src/Form/Input/states.input.ts","../src/Form/Input/index.tsx"],"names":["normalizedName","React","twMerge","jsxs","jsx"],"mappings":"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","file":"input.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","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 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\nexport default Input;\n"]}
|
package/dist/input.js
CHANGED
package/dist/notification.cjs
CHANGED
|
@@ -199,6 +199,7 @@ var NotificationCard = ({ item }) => {
|
|
|
199
199
|
var Notification = ({
|
|
200
200
|
items = [],
|
|
201
201
|
placement = "topRight",
|
|
202
|
+
variant = "solid",
|
|
202
203
|
gap = 12,
|
|
203
204
|
containerClassName,
|
|
204
205
|
className,
|
|
@@ -209,8 +210,9 @@ var Notification = ({
|
|
|
209
210
|
items.forEach((item) => {
|
|
210
211
|
const resolvedKey = item.key ?? `notification-${item.message ?? Math.random()}`;
|
|
211
212
|
const resolvedPlacement = item.placement ?? placement;
|
|
213
|
+
const resolvedVariant = item.variant ?? variant;
|
|
212
214
|
const group = grouped.get(resolvedPlacement) ?? [];
|
|
213
|
-
group.push({ ...item, key: resolvedKey });
|
|
215
|
+
group.push({ ...item, key: resolvedKey, variant: resolvedVariant });
|
|
214
216
|
grouped.set(resolvedPlacement, group);
|
|
215
217
|
});
|
|
216
218
|
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from(grouped.entries()).map(([groupPlacement, groupItems]) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Feedback/Notification/index.tsx"],"names":["twMerge","normalized","React","jsx","jsxs","Fragment"],"mappings":"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","file":"notification.cjs","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type {\n NotificationArgs,\n NotificationPlacement,\n NotificationProps,\n NotificationType,\n NotificationVariant\n} from './types.notification';\nimport type { GlobalVariant, PropIcon } from '../../global.types';\n\nconst placementClasses: Record<NotificationPlacement, string> = {\n topLeft: 'top-4 left-4 items-start',\n topRight: 'top-4 right-4 items-end',\n bottomLeft: 'bottom-4 left-4 items-start',\n bottomRight: 'bottom-4 right-4 items-end'\n};\n\nconst typeIconMap: Record<NotificationType, string> = {\n info: 'mdi-information-outline',\n success: 'mdi-check-circle-outline',\n warning: 'mdi-alert-outline',\n error: 'mdi-close-circle-outline'\n};\n\nconst typeAccentMap: Record<NotificationType, string> = {\n info: 'bg-sky-50 text-sky-600',\n success: 'bg-emerald-50 text-emerald-600',\n warning: 'bg-amber-50 text-amber-700',\n error: 'bg-red-50 text-red-600'\n};\n\nconst typeTone: Record<\n NotificationType,\n { bg: string; text: string; border: string; iconBg: string; iconText: string }\n> = {\n info: {\n bg: 'bg-sky-50',\n text: 'text-sky-900',\n border: 'border-sky-200',\n iconBg: 'bg-sky-100',\n iconText: 'text-sky-600'\n },\n success: {\n bg: 'bg-emerald-50',\n text: 'text-emerald-900',\n border: 'border-emerald-200',\n iconBg: 'bg-emerald-100',\n iconText: 'text-emerald-600'\n },\n warning: {\n bg: 'bg-amber-50',\n text: 'text-amber-900',\n border: 'border-amber-200',\n iconBg: 'bg-amber-100',\n iconText: 'text-amber-700'\n },\n error: {\n bg: 'bg-red-50',\n text: 'text-red-900',\n border: 'border-red-200',\n iconBg: 'bg-red-100',\n iconText: 'text-red-600'\n }\n};\n\nconst resolveVariantClass = (variant: NotificationVariant, type?: NotificationType) => {\n const tone = type ? typeTone[type] : undefined;\n switch (variant) {\n case 'filled':\n return twMerge(\n tone?.bg ?? 'bg-primary/10',\n tone?.text ?? 'text-primary',\n 'border border-transparent shadow-none'\n );\n case 'outline':\n return twMerge(\n 'bg-white/90',\n tone?.text ?? 'text-gray-900',\n tone?.border ?? 'border-primary/20',\n 'border-[1.5px]'\n );\n case 'ghost':\n return twMerge(\n 'bg-transparent shadow-none border border-transparent',\n tone?.text ?? 'text-gray-900'\n );\n case 'solid':\n default:\n return 'bg-white/95 text-gray-900 border border-gray-200';\n }\n};\n\nconst resolveIconClassName = (icon?: PropIcon | string) => {\n if (!icon) return undefined;\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) return undefined;\n if (trimmed.includes(' ')) return trimmed;\n const normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return `mdi ${normalized}`;\n }\n const [library, iconName] = icon;\n const normalized = iconName?.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return `mdi ${library} ${normalized}`.trim();\n};\n\nconst resolveIconNode = (icon?: React.ReactNode | PropIcon, fallbackClassName?: string) => {\n if (React.isValidElement(icon)) return icon;\n const iconClassName = resolveIconClassName(icon as PropIcon) ?? fallbackClassName;\n if (!iconClassName) return null;\n const hasBase = iconClassName.split(' ').some(token => token.trim() === 'mdi');\n const hasGlyph = iconClassName.includes('mdi-');\n const finalClassName = hasBase && hasGlyph ? iconClassName : `mdi ${iconClassName}`.trim();\n return <i className={finalClassName} aria-hidden />;\n};\n\nconst NotificationCard: React.FC<{\n item: NotificationArgs & { key: React.Key };\n}> = ({ item }) => {\n const {\n key,\n message,\n description,\n icon,\n closeIcon,\n closable = true,\n btn,\n onClick,\n className,\n style,\n role = 'status',\n type,\n variant = 'solid',\n ...rest\n } = item;\n\n const hasMessage = message !== undefined && message !== null;\n const hasDescription = description !== undefined && description !== null;\n const hasContent = hasMessage || hasDescription;\n const accentClass = type ? typeAccentMap[type] : undefined;\n const iconNode = resolveIconNode(icon, type ? `mdi ${typeIconMap[type]}` : undefined);\n const closeIconNode = resolveIconNode(closeIcon, 'mdi mdi-close');\n const variantClass = resolveVariantClass(variant as NotificationVariant, type);\n const toneIconBg = type ? typeTone[type]?.iconBg : undefined;\n const toneIconText = type ? typeTone[type]?.iconText : undefined;\n\n return (\n <article\n {...rest}\n role={role}\n className={twMerge(\n 'pointer-events-auto flex w-88 max-w-[calc(100vw-2.5rem)] gap-3 rounded-2xl p-4 shadow-xl ring-1 ring-black/5 backdrop-blur-sm transition hover:-translate-y-0.5 hover:shadow-2xl focus:outline-none',\n 'dark:border-gray-800 dark:bg-gray-900/95 dark:text-gray-50 dark:ring-white/5',\n variantClass,\n className\n )}\n style={style}\n onClick={onClick}\n >\n {iconNode ? (\n <div\n className={twMerge(\n 'mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-xl',\n toneIconBg ?? accentClass ?? 'bg-primary/10',\n toneIconText ?? 'text-primary'\n )}\n >\n {iconNode}\n </div>\n ) : null}\n <div className='min-w-0 flex-1 space-y-1'>\n {hasContent ? (\n <div className='space-y-1'>\n {hasMessage ? (\n <div className='text-[15px] font-semibold leading-5 text-gray-900 dark:text-white'>\n {message}\n </div>\n ) : null}\n {hasDescription ? (\n <div className='text-sm leading-6 text-gray-600 dark:text-gray-300'>\n {description}\n </div>\n ) : null}\n </div>\n ) : null}\n {btn ? <div className='pt-1 text-sm'>{btn}</div> : null}\n </div>\n {closable ? (\n <button\n type='button'\n aria-label='Zavřít upozornění'\n className='-mr-1 -mt-1 h-8 w-8 shrink-0 rounded-full text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'\n onClick={event => {\n event.stopPropagation();\n item.onClose?.();\n }}\n >\n {closeIconNode}\n </button>\n ) : null}\n </article>\n );\n};\n\nconst Notification: React.FC<NotificationProps> = ({\n items = [],\n placement = 'topRight',\n gap = 12,\n containerClassName,\n className,\n ...rest\n}) => {\n if (!items.length) return null;\n\n const grouped = new Map<NotificationPlacement, (NotificationArgs & { key: React.Key })[]>();\n items.forEach(item => {\n const resolvedKey = item.key ?? `notification-${item.message ?? Math.random()}`;\n const resolvedPlacement = item.placement ?? placement;\n const group = grouped.get(resolvedPlacement) ?? [];\n group.push({ ...item, key: resolvedKey });\n grouped.set(resolvedPlacement, group);\n });\n\n return (\n <>\n {Array.from(grouped.entries()).map(([groupPlacement, groupItems]) => (\n <div\n key={groupPlacement}\n className={twMerge(\n 'pointer-events-none fixed z-70 flex w-full max-w-[24rem] flex-col',\n placementClasses[groupPlacement],\n containerClassName,\n className\n )}\n style={{ gap: `${gap}px` }}\n {...rest}\n >\n {groupItems.map(item => (\n <NotificationCard key={item.key} item={item} />\n ))}\n </div>\n ))}\n </>\n );\n};\n\nexport type {\n NotificationArgs,\n NotificationPlacement,\n NotificationProps,\n NotificationType,\n NotificationVariant\n} from './types.notification';\nexport default Notification;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/Feedback/Notification/index.tsx"],"names":["twMerge","normalized","React","jsx","jsxs","Fragment"],"mappings":"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","file":"notification.cjs","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type {\n NotificationArgs,\n NotificationPlacement,\n NotificationProps,\n NotificationType,\n NotificationVariant\n} from './types.notification';\nimport type { PropIcon } from '../../global.types';\n\nconst placementClasses: Record<NotificationPlacement, string> = {\n topLeft: 'top-4 left-4 items-start',\n topRight: 'top-4 right-4 items-end',\n bottomLeft: 'bottom-4 left-4 items-start',\n bottomRight: 'bottom-4 right-4 items-end'\n};\n\nconst typeIconMap: Record<NotificationType, string> = {\n info: 'mdi-information-outline',\n success: 'mdi-check-circle-outline',\n warning: 'mdi-alert-outline',\n error: 'mdi-close-circle-outline'\n};\n\nconst typeAccentMap: Record<NotificationType, string> = {\n info: 'bg-sky-50 text-sky-600',\n success: 'bg-emerald-50 text-emerald-600',\n warning: 'bg-amber-50 text-amber-700',\n error: 'bg-red-50 text-red-600'\n};\n\nconst typeTone: Record<\n NotificationType,\n { bg: string; text: string; border: string; iconBg: string; iconText: string }\n> = {\n info: {\n bg: 'bg-sky-50',\n text: 'text-sky-900',\n border: 'border-sky-200',\n iconBg: 'bg-sky-100',\n iconText: 'text-sky-600'\n },\n success: {\n bg: 'bg-emerald-50',\n text: 'text-emerald-900',\n border: 'border-emerald-200',\n iconBg: 'bg-emerald-100',\n iconText: 'text-emerald-600'\n },\n warning: {\n bg: 'bg-amber-50',\n text: 'text-amber-900',\n border: 'border-amber-200',\n iconBg: 'bg-amber-100',\n iconText: 'text-amber-700'\n },\n error: {\n bg: 'bg-red-50',\n text: 'text-red-900',\n border: 'border-red-200',\n iconBg: 'bg-red-100',\n iconText: 'text-red-600'\n }\n};\n\nconst resolveVariantClass = (variant: NotificationVariant, type?: NotificationType) => {\n const tone = type ? typeTone[type] : undefined;\n switch (variant) {\n case 'filled':\n return twMerge(\n tone?.bg ?? 'bg-primary/10',\n tone?.text ?? 'text-primary',\n 'border border-transparent shadow-none'\n );\n case 'outline':\n return twMerge(\n 'bg-white/90',\n tone?.text ?? 'text-gray-900',\n tone?.border ?? 'border-primary/20',\n 'border-[1.5px]'\n );\n case 'ghost':\n return twMerge(\n 'bg-transparent shadow-none border border-transparent',\n tone?.text ?? 'text-gray-900'\n );\n case 'solid':\n default:\n return 'bg-white/95 text-gray-900 border border-gray-200';\n }\n};\n\nconst resolveIconClassName = (icon?: PropIcon | string) => {\n if (!icon) return undefined;\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) return undefined;\n if (trimmed.includes(' ')) return trimmed;\n const normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return `mdi ${normalized}`;\n }\n const [library, iconName] = icon;\n const normalized = iconName?.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return `mdi ${library} ${normalized}`.trim();\n};\n\nconst resolveIconNode = (icon?: React.ReactNode | PropIcon, fallbackClassName?: string) => {\n if (React.isValidElement(icon)) return icon;\n const iconClassName = resolveIconClassName(icon as PropIcon) ?? fallbackClassName;\n if (!iconClassName) return null;\n const hasBase = iconClassName.split(' ').some(token => token.trim() === 'mdi');\n const hasGlyph = iconClassName.includes('mdi-');\n const finalClassName = hasBase && hasGlyph ? iconClassName : `mdi ${iconClassName}`.trim();\n return <i className={finalClassName} aria-hidden />;\n};\n\nconst NotificationCard: React.FC<{\n item: NotificationArgs & { key: React.Key };\n}> = ({ item }) => {\n const {\n key,\n message,\n description,\n icon,\n closeIcon,\n closable = true,\n btn,\n onClick,\n className,\n style,\n role = 'status',\n type,\n variant = 'solid',\n ...rest\n } = item;\n\n const hasMessage = message !== undefined && message !== null;\n const hasDescription = description !== undefined && description !== null;\n const hasContent = hasMessage || hasDescription;\n const accentClass = type ? typeAccentMap[type] : undefined;\n const iconNode = resolveIconNode(icon, type ? `mdi ${typeIconMap[type]}` : undefined);\n const closeIconNode = resolveIconNode(closeIcon, 'mdi mdi-close');\n const variantClass = resolveVariantClass(variant as NotificationVariant, type);\n const toneIconBg = type ? typeTone[type]?.iconBg : undefined;\n const toneIconText = type ? typeTone[type]?.iconText : undefined;\n\n return (\n <article\n {...rest}\n role={role}\n className={twMerge(\n 'pointer-events-auto flex w-88 max-w-[calc(100vw-2.5rem)] gap-3 rounded-2xl p-4 shadow-xl ring-1 ring-black/5 backdrop-blur-sm transition hover:-translate-y-0.5 hover:shadow-2xl focus:outline-none',\n 'dark:border-gray-800 dark:bg-gray-900/95 dark:text-gray-50 dark:ring-white/5',\n variantClass,\n className\n )}\n style={style}\n onClick={onClick}\n >\n {iconNode ? (\n <div\n className={twMerge(\n 'mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-xl',\n toneIconBg ?? accentClass ?? 'bg-primary/10',\n toneIconText ?? 'text-primary'\n )}\n >\n {iconNode}\n </div>\n ) : null}\n <div className='min-w-0 flex-1 space-y-1'>\n {hasContent ? (\n <div className='space-y-1'>\n {hasMessage ? (\n <div className='text-[15px] font-semibold leading-5 text-gray-900 dark:text-white'>\n {message}\n </div>\n ) : null}\n {hasDescription ? (\n <div className='text-sm leading-6 text-gray-600 dark:text-gray-300'>\n {description}\n </div>\n ) : null}\n </div>\n ) : null}\n {btn ? <div className='pt-1 text-sm'>{btn}</div> : null}\n </div>\n {closable ? (\n <button\n type='button'\n aria-label='Zavřít upozornění'\n className='-mr-1 -mt-1 h-8 w-8 shrink-0 rounded-full text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'\n onClick={event => {\n event.stopPropagation();\n item.onClose?.();\n }}\n >\n {closeIconNode}\n </button>\n ) : null}\n </article>\n );\n};\n\nconst Notification: React.FC<NotificationProps> = ({\n items = [],\n placement = 'topRight',\n variant = 'solid',\n gap = 12,\n containerClassName,\n className,\n ...rest\n}) => {\n if (!items.length) return null;\n\n const grouped = new Map<NotificationPlacement, (NotificationArgs & { key: React.Key })[]>();\n items.forEach(item => {\n const resolvedKey = item.key ?? `notification-${item.message ?? Math.random()}`;\n const resolvedPlacement = item.placement ?? placement;\n const resolvedVariant = item.variant ?? variant;\n const group = grouped.get(resolvedPlacement) ?? [];\n group.push({ ...item, key: resolvedKey, variant: resolvedVariant });\n grouped.set(resolvedPlacement, group);\n });\n\n return (\n <>\n {Array.from(grouped.entries()).map(([groupPlacement, groupItems]) => (\n <div\n key={groupPlacement}\n className={twMerge(\n 'pointer-events-none fixed z-70 flex w-full max-w-[24rem] flex-col',\n placementClasses[groupPlacement],\n containerClassName,\n className\n )}\n style={{ gap: `${gap}px` }}\n {...rest}\n >\n {groupItems.map(item => (\n <NotificationCard key={item.key} item={item} />\n ))}\n </div>\n ))}\n </>\n );\n};\n\nexport type {\n NotificationArgs,\n NotificationPlacement,\n NotificationProps,\n NotificationType,\n NotificationVariant\n} from './types.notification';\nexport default Notification;\n"]}
|
package/dist/notification.d.cts
CHANGED
|
@@ -25,6 +25,7 @@ interface NotificationArgs extends react.HTMLAttributes<HTMLDivElement> {
|
|
|
25
25
|
interface NotificationProps extends react.HTMLAttributes<HTMLDivElement> {
|
|
26
26
|
items?: NotificationArgs[];
|
|
27
27
|
placement?: NotificationPlacement;
|
|
28
|
+
variant?: NotificationVariant;
|
|
28
29
|
gap?: number;
|
|
29
30
|
containerClassName?: string;
|
|
30
31
|
}
|
package/dist/notification.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ interface NotificationArgs extends react.HTMLAttributes<HTMLDivElement> {
|
|
|
25
25
|
interface NotificationProps extends react.HTMLAttributes<HTMLDivElement> {
|
|
26
26
|
items?: NotificationArgs[];
|
|
27
27
|
placement?: NotificationPlacement;
|
|
28
|
+
variant?: NotificationVariant;
|
|
28
29
|
gap?: number;
|
|
29
30
|
containerClassName?: string;
|
|
30
31
|
}
|
package/dist/notification.js
CHANGED
package/dist/select.cjs
CHANGED
|
@@ -143,7 +143,15 @@ var Select = ({
|
|
|
143
143
|
className: tailwindMerge.twMerge("peer", baseClass, variantClass, sizeClass, className),
|
|
144
144
|
children: [
|
|
145
145
|
shouldRenderPlaceholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: props.required, hidden: hasValue, children: placeholderOptionLabel }),
|
|
146
|
-
normalizedOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
146
|
+
normalizedOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
147
|
+
"option",
|
|
148
|
+
{
|
|
149
|
+
value: option.value,
|
|
150
|
+
disabled: option.disabled,
|
|
151
|
+
children: option.label
|
|
152
|
+
},
|
|
153
|
+
`${selectId}-${option.value}-${index}`
|
|
154
|
+
))
|
|
147
155
|
]
|
|
148
156
|
}
|
|
149
157
|
),
|
|
@@ -156,7 +164,7 @@ var Select = ({
|
|
|
156
164
|
"absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
|
|
157
165
|
labelLeftClass,
|
|
158
166
|
labelShouldFloat ? [
|
|
159
|
-
"top-
|
|
167
|
+
"-top-1.5 left-1 text-xs px-1",
|
|
160
168
|
isFocused ? "-translate-y-1/2 text-gray-600" : "-translate-y-2/3",
|
|
161
169
|
labelBgDefault
|
|
162
170
|
].join(" ") : "top-1/2 -translate-y-1/2 text-sm text-gray-500"
|
package/dist/select.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/helpers/randomStr.ts","../src/Form/Select/index.tsx"],"names":["React","jsx","twMerge","jsxs"],"mappings":"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","file":"select.cjs","sourcesContent":["const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n\nexport function generateString(length = 5) {\n let result: string = '';\n const charactersLength = characters.length;\n for (let i = 0; i < length; i++) {\n result += characters.charAt(Math.floor(Math.random() * charactersLength));\n }\n\n return result;\n}\n","import React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { GlobalSize } from '@lindle/linoardo/global.types';\nimport type { InputVariant } from '../Input/types';\nimport type { SelectOption, SelectOptionObject, SelectProps } from './types.select';\nimport { generateString } from '../../utils/helpers/randomStr';\n\nconst baseClass =\n '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';\n\nconst 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 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',\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 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',\n rounded:\n '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'\n} satisfies Record<InputVariant, string>;\n\nconst sizeClasses = {\n 'x-small': { padding: 'pl-2 pr-8 py-2', text: 'text-xs' },\n small: { padding: 'pl-2.5 pr-9 py-2.5', text: 'text-sm' },\n medium: { padding: 'pl-3 pr-10 py-3', text: 'text-base' },\n large: { padding: 'pl-3.5 pr-11 py-3.5', text: 'text-lg' },\n 'x-large': { padding: 'pl-4 pr-12 py-4', text: 'text-xl' }\n} satisfies Record<GlobalSize, { padding: string; text: string }>;\n\nconst normalizeOption = (option: SelectOption): SelectOptionObject => {\n if (typeof option === 'string') {\n return { label: option, value: option };\n }\n\n return option;\n};\n\n/**\n * Native select styled with the same visual variants as Input.\n * Accepts options as string[] or { label, value }[] for convenience.\n */\nconst Select: React.FC<SelectProps> = ({\n options,\n label,\n placeholder,\n variant = 'outline',\n size = 'medium',\n className,\n wrapperClassName,\n id,\n name,\n multiple,\n onFocus,\n onBlur,\n onChange,\n value,\n defaultValue,\n ...props\n}) => {\n const selectId = id || name || generateString();\n const selectName = name || selectId;\n const variantClass = variantClasses[variant] ?? variantClasses.outline;\n const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;\n const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;\n const normalizedOptions = options.map(normalizeOption);\n const hasLabel = Boolean(label);\n const hasProvidedPlaceholder = typeof placeholder === 'string' && placeholder.trim().length > 0;\n const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder && !multiple;\n const placeholderText = placeholder ?? (hasLabel ? ' ' : undefined);\n const [isFocused, setIsFocused] = React.useState(false);\n const [hasValue, setHasValue] = React.useState(() => {\n const initial = value ?? defaultValue;\n if (initial === undefined || initial === null) return false;\n if (multiple) {\n if (Array.isArray(initial)) return initial.length > 0;\n return String(initial).length > 0;\n }\n if (Array.isArray(initial)) {\n if (initial.length === 0) return false;\n return String(initial[0]).length > 0;\n }\n return String(initial).length > 0;\n });\n const isControlled = value !== undefined;\n\n React.useEffect(() => {\n if (!isControlled) return;\n if (value === undefined || value === null) {\n setHasValue(false);\n return;\n }\n if (multiple) {\n if (Array.isArray(value)) {\n setHasValue(value.length > 0);\n } else {\n setHasValue(String(value).length > 0);\n }\n return;\n }\n if (Array.isArray(value)) {\n setHasValue(value.length > 0 ? String(value[0]).length > 0 : false);\n return;\n }\n setHasValue(String(value).length > 0);\n }, [isControlled, multiple, value]);\n\n const placeholderOptionLabel = hidePlaceholderUntilFocus && !isFocused ? ' ' : placeholderText;\n const shouldRenderPlaceholder = !multiple && placeholderText !== undefined;\n const labelShouldFloat = hasValue || isFocused;\n const labelLeftClass = 'left-3';\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<HTMLSelectElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleBlur: React.FocusEventHandler<HTMLSelectElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleChange: React.ChangeEventHandler<HTMLSelectElement> = event => {\n if (!isControlled) {\n const nextHasValue = multiple ? event.target.selectedOptions.length > 0 : event.target.value !== '';\n setHasValue(nextHasValue);\n }\n onChange?.(event);\n };\n\n return (\n <div className={twMerge('flex flex-col gap-1', wrapperClassName)}>\n <div className='relative flex items-center'>\n <select\n {...props}\n id={selectId}\n name={selectName}\n multiple={multiple}\n value={value}\n defaultValue={value === undefined ? defaultValue : undefined}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n className={twMerge('peer', baseClass, variantClass, sizeClass, className)}\n >\n {shouldRenderPlaceholder && (\n <option value='' disabled={props.required} hidden={hasValue}>\n {placeholderOptionLabel}\n </option>\n )}\n {normalizedOptions.map((option, index) => (\n <option key={`${selectId}-${option.value}-${index}`} value={option.value} disabled={option.disabled}>\n {option.label}\n </option>\n ))}\n </select>\n {!multiple && (\n <span className='pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300'>\n <i className='mdi mdi-chevron-down text-base leading-none' aria-hidden />\n </span>\n )}\n {label && (\n <label\n htmlFor={selectId}\n className={twMerge(\n 'absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200',\n labelLeftClass,\n labelShouldFloat\n ? [\n 'top-0 text-xs px-1',\n isFocused ? '-translate-y-1/2 text-gray-600' : '-translate-y-2/3',\n labelBgDefault\n ].join(' ')\n : 'top-1/2 -translate-y-1/2 text-sm text-gray-500'\n )}\n >\n {label}\n </label>\n )}\n </div>\n </div>\n );\n};\n\nexport default Select;\nexport type { SelectProps, SelectOption, SelectOptionObject } from './types.select';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/helpers/randomStr.ts","../src/Form/Select/index.tsx"],"names":["React","jsx","twMerge","jsxs"],"mappings":"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","file":"select.cjs","sourcesContent":["const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n\nexport function generateString(length = 5) {\n let result: string = '';\n const charactersLength = characters.length;\n for (let i = 0; i < length; i++) {\n result += characters.charAt(Math.floor(Math.random() * charactersLength));\n }\n\n return result;\n}\n","import React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { GlobalSize } from '@lindle/linoardo/global.types';\nimport type { InputVariant } from '../Input/types';\nimport type { SelectOption, SelectOptionObject, SelectProps } from './types.select';\nimport { generateString } from '../../utils/helpers/randomStr';\n\nconst baseClass =\n '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';\n\nconst 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 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',\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 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',\n rounded:\n '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'\n} satisfies Record<InputVariant, string>;\n\nconst sizeClasses = {\n 'x-small': { padding: 'pl-2 pr-8 py-2', text: 'text-xs' },\n small: { padding: 'pl-2.5 pr-9 py-2.5', text: 'text-sm' },\n medium: { padding: 'pl-3 pr-10 py-3', text: 'text-base' },\n large: { padding: 'pl-3.5 pr-11 py-3.5', text: 'text-lg' },\n 'x-large': { padding: 'pl-4 pr-12 py-4', text: 'text-xl' }\n} satisfies Record<GlobalSize, { padding: string; text: string }>;\n\nconst normalizeOption = (option: SelectOption): SelectOptionObject => {\n if (typeof option === 'string') {\n return { label: option, value: option };\n }\n\n return option;\n};\n\n/**\n * Native select styled with the same visual variants as Input.\n * Accepts options as string[] or { label, value }[] for convenience.\n */\nconst Select: React.FC<SelectProps> = ({\n options,\n label,\n placeholder,\n variant = 'outline',\n size = 'medium',\n className,\n wrapperClassName,\n id,\n name,\n multiple,\n onFocus,\n onBlur,\n onChange,\n value,\n defaultValue,\n ...props\n}) => {\n const selectId = id || name || generateString();\n const selectName = name || selectId;\n const variantClass = variantClasses[variant] ?? variantClasses.outline;\n const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;\n const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;\n const normalizedOptions = options.map(normalizeOption);\n const hasLabel = Boolean(label);\n const hasProvidedPlaceholder = typeof placeholder === 'string' && placeholder.trim().length > 0;\n const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder && !multiple;\n const placeholderText = placeholder ?? (hasLabel ? ' ' : undefined);\n const [isFocused, setIsFocused] = React.useState(false);\n const [hasValue, setHasValue] = React.useState(() => {\n const initial = value ?? defaultValue;\n if (initial === undefined || initial === null) return false;\n if (multiple) {\n if (Array.isArray(initial)) return initial.length > 0;\n return String(initial).length > 0;\n }\n if (Array.isArray(initial)) {\n if (initial.length === 0) return false;\n return String(initial[0]).length > 0;\n }\n return String(initial).length > 0;\n });\n const isControlled = value !== undefined;\n\n React.useEffect(() => {\n if (!isControlled) return;\n if (value === undefined || value === null) {\n setHasValue(false);\n return;\n }\n if (multiple) {\n if (Array.isArray(value)) {\n setHasValue(value.length > 0);\n } else {\n setHasValue(String(value).length > 0);\n }\n return;\n }\n if (Array.isArray(value)) {\n setHasValue(value.length > 0 ? String(value[0]).length > 0 : false);\n return;\n }\n setHasValue(String(value).length > 0);\n }, [isControlled, multiple, value]);\n\n const placeholderOptionLabel = hidePlaceholderUntilFocus && !isFocused ? ' ' : placeholderText;\n const shouldRenderPlaceholder = !multiple && placeholderText !== undefined;\n const labelShouldFloat = hasValue || isFocused;\n const labelLeftClass = 'left-3';\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<HTMLSelectElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleBlur: React.FocusEventHandler<HTMLSelectElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleChange: React.ChangeEventHandler<HTMLSelectElement> = event => {\n if (!isControlled) {\n const nextHasValue = multiple\n ? event.target.selectedOptions.length > 0\n : event.target.value !== '';\n setHasValue(nextHasValue);\n }\n onChange?.(event);\n };\n\n return (\n <div className={twMerge('flex flex-col gap-1', wrapperClassName)}>\n <div className='relative flex items-center'>\n <select\n {...props}\n id={selectId}\n name={selectName}\n multiple={multiple}\n value={value}\n defaultValue={value === undefined ? defaultValue : undefined}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n className={twMerge('peer', baseClass, variantClass, sizeClass, className)}\n >\n {shouldRenderPlaceholder && (\n <option value='' disabled={props.required} hidden={hasValue}>\n {placeholderOptionLabel}\n </option>\n )}\n {normalizedOptions.map((option, index) => (\n <option\n key={`${selectId}-${option.value}-${index}`}\n value={option.value}\n disabled={option.disabled}\n >\n {option.label}\n </option>\n ))}\n </select>\n {!multiple && (\n <span className='pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300'>\n <i className='mdi mdi-chevron-down text-base leading-none' aria-hidden />\n </span>\n )}\n {label && (\n <label\n htmlFor={selectId}\n className={twMerge(\n 'absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200',\n labelLeftClass,\n labelShouldFloat\n ? [\n '-top-1.5 left-1 text-xs px-1',\n isFocused ? '-translate-y-1/2 text-gray-600' : '-translate-y-2/3',\n labelBgDefault\n ].join(' ')\n : 'top-1/2 -translate-y-1/2 text-sm text-gray-500'\n )}\n >\n {label}\n </label>\n )}\n </div>\n </div>\n );\n};\n\nexport default Select;\nexport type { SelectProps, SelectOption, SelectOptionObject } from './types.select';\n"]}
|
package/dist/select.js
CHANGED
package/dist/styles.css
CHANGED
|
@@ -321,6 +321,9 @@
|
|
|
321
321
|
.inset-y-0 {
|
|
322
322
|
inset-block: calc(var(--spacing) * 0);
|
|
323
323
|
}
|
|
324
|
+
.-top-1\.5 {
|
|
325
|
+
top: calc(var(--spacing) * -1.5);
|
|
326
|
+
}
|
|
324
327
|
.top-0 {
|
|
325
328
|
top: calc(var(--spacing) * 0);
|
|
326
329
|
}
|
|
@@ -2499,6 +2502,11 @@
|
|
|
2499
2502
|
top: calc(var(--spacing) * 0);
|
|
2500
2503
|
}
|
|
2501
2504
|
}
|
|
2505
|
+
.peer-focus\:left-7 {
|
|
2506
|
+
&:is(:where(.peer):focus ~ *) {
|
|
2507
|
+
left: calc(var(--spacing) * 7);
|
|
2508
|
+
}
|
|
2509
|
+
}
|
|
2502
2510
|
.peer-focus\:-translate-y-1\/2 {
|
|
2503
2511
|
&:is(:where(.peer):focus ~ *) {
|
|
2504
2512
|
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
@@ -2515,6 +2523,11 @@
|
|
|
2515
2523
|
background-color: transparent;
|
|
2516
2524
|
}
|
|
2517
2525
|
}
|
|
2526
|
+
.peer-focus\:bg-white {
|
|
2527
|
+
&:is(:where(.peer):focus ~ *) {
|
|
2528
|
+
background-color: var(--color-white);
|
|
2529
|
+
}
|
|
2530
|
+
}
|
|
2518
2531
|
.peer-focus\:bg-white\/90 {
|
|
2519
2532
|
&:is(:where(.peer):focus ~ *) {
|
|
2520
2533
|
background-color: color-mix(in srgb, #fff 90%, transparent);
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Feedback/Notification/index.tsx"],"names":["normalized"],"mappings":"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","file":"chunk-67USTSXI.js","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type {\n NotificationArgs,\n NotificationPlacement,\n NotificationProps,\n NotificationType,\n NotificationVariant\n} from './types.notification';\nimport type { GlobalVariant, PropIcon } from '../../global.types';\n\nconst placementClasses: Record<NotificationPlacement, string> = {\n topLeft: 'top-4 left-4 items-start',\n topRight: 'top-4 right-4 items-end',\n bottomLeft: 'bottom-4 left-4 items-start',\n bottomRight: 'bottom-4 right-4 items-end'\n};\n\nconst typeIconMap: Record<NotificationType, string> = {\n info: 'mdi-information-outline',\n success: 'mdi-check-circle-outline',\n warning: 'mdi-alert-outline',\n error: 'mdi-close-circle-outline'\n};\n\nconst typeAccentMap: Record<NotificationType, string> = {\n info: 'bg-sky-50 text-sky-600',\n success: 'bg-emerald-50 text-emerald-600',\n warning: 'bg-amber-50 text-amber-700',\n error: 'bg-red-50 text-red-600'\n};\n\nconst typeTone: Record<\n NotificationType,\n { bg: string; text: string; border: string; iconBg: string; iconText: string }\n> = {\n info: {\n bg: 'bg-sky-50',\n text: 'text-sky-900',\n border: 'border-sky-200',\n iconBg: 'bg-sky-100',\n iconText: 'text-sky-600'\n },\n success: {\n bg: 'bg-emerald-50',\n text: 'text-emerald-900',\n border: 'border-emerald-200',\n iconBg: 'bg-emerald-100',\n iconText: 'text-emerald-600'\n },\n warning: {\n bg: 'bg-amber-50',\n text: 'text-amber-900',\n border: 'border-amber-200',\n iconBg: 'bg-amber-100',\n iconText: 'text-amber-700'\n },\n error: {\n bg: 'bg-red-50',\n text: 'text-red-900',\n border: 'border-red-200',\n iconBg: 'bg-red-100',\n iconText: 'text-red-600'\n }\n};\n\nconst resolveVariantClass = (variant: NotificationVariant, type?: NotificationType) => {\n const tone = type ? typeTone[type] : undefined;\n switch (variant) {\n case 'filled':\n return twMerge(\n tone?.bg ?? 'bg-primary/10',\n tone?.text ?? 'text-primary',\n 'border border-transparent shadow-none'\n );\n case 'outline':\n return twMerge(\n 'bg-white/90',\n tone?.text ?? 'text-gray-900',\n tone?.border ?? 'border-primary/20',\n 'border-[1.5px]'\n );\n case 'ghost':\n return twMerge(\n 'bg-transparent shadow-none border border-transparent',\n tone?.text ?? 'text-gray-900'\n );\n case 'solid':\n default:\n return 'bg-white/95 text-gray-900 border border-gray-200';\n }\n};\n\nconst resolveIconClassName = (icon?: PropIcon | string) => {\n if (!icon) return undefined;\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) return undefined;\n if (trimmed.includes(' ')) return trimmed;\n const normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return `mdi ${normalized}`;\n }\n const [library, iconName] = icon;\n const normalized = iconName?.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return `mdi ${library} ${normalized}`.trim();\n};\n\nconst resolveIconNode = (icon?: React.ReactNode | PropIcon, fallbackClassName?: string) => {\n if (React.isValidElement(icon)) return icon;\n const iconClassName = resolveIconClassName(icon as PropIcon) ?? fallbackClassName;\n if (!iconClassName) return null;\n const hasBase = iconClassName.split(' ').some(token => token.trim() === 'mdi');\n const hasGlyph = iconClassName.includes('mdi-');\n const finalClassName = hasBase && hasGlyph ? iconClassName : `mdi ${iconClassName}`.trim();\n return <i className={finalClassName} aria-hidden />;\n};\n\nconst NotificationCard: React.FC<{\n item: NotificationArgs & { key: React.Key };\n}> = ({ item }) => {\n const {\n key,\n message,\n description,\n icon,\n closeIcon,\n closable = true,\n btn,\n onClick,\n className,\n style,\n role = 'status',\n type,\n variant = 'solid',\n ...rest\n } = item;\n\n const hasMessage = message !== undefined && message !== null;\n const hasDescription = description !== undefined && description !== null;\n const hasContent = hasMessage || hasDescription;\n const accentClass = type ? typeAccentMap[type] : undefined;\n const iconNode = resolveIconNode(icon, type ? `mdi ${typeIconMap[type]}` : undefined);\n const closeIconNode = resolveIconNode(closeIcon, 'mdi mdi-close');\n const variantClass = resolveVariantClass(variant as NotificationVariant, type);\n const toneIconBg = type ? typeTone[type]?.iconBg : undefined;\n const toneIconText = type ? typeTone[type]?.iconText : undefined;\n\n return (\n <article\n {...rest}\n role={role}\n className={twMerge(\n 'pointer-events-auto flex w-88 max-w-[calc(100vw-2.5rem)] gap-3 rounded-2xl p-4 shadow-xl ring-1 ring-black/5 backdrop-blur-sm transition hover:-translate-y-0.5 hover:shadow-2xl focus:outline-none',\n 'dark:border-gray-800 dark:bg-gray-900/95 dark:text-gray-50 dark:ring-white/5',\n variantClass,\n className\n )}\n style={style}\n onClick={onClick}\n >\n {iconNode ? (\n <div\n className={twMerge(\n 'mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-xl',\n toneIconBg ?? accentClass ?? 'bg-primary/10',\n toneIconText ?? 'text-primary'\n )}\n >\n {iconNode}\n </div>\n ) : null}\n <div className='min-w-0 flex-1 space-y-1'>\n {hasContent ? (\n <div className='space-y-1'>\n {hasMessage ? (\n <div className='text-[15px] font-semibold leading-5 text-gray-900 dark:text-white'>\n {message}\n </div>\n ) : null}\n {hasDescription ? (\n <div className='text-sm leading-6 text-gray-600 dark:text-gray-300'>\n {description}\n </div>\n ) : null}\n </div>\n ) : null}\n {btn ? <div className='pt-1 text-sm'>{btn}</div> : null}\n </div>\n {closable ? (\n <button\n type='button'\n aria-label='Zavřít upozornění'\n className='-mr-1 -mt-1 h-8 w-8 shrink-0 rounded-full text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'\n onClick={event => {\n event.stopPropagation();\n item.onClose?.();\n }}\n >\n {closeIconNode}\n </button>\n ) : null}\n </article>\n );\n};\n\nconst Notification: React.FC<NotificationProps> = ({\n items = [],\n placement = 'topRight',\n gap = 12,\n containerClassName,\n className,\n ...rest\n}) => {\n if (!items.length) return null;\n\n const grouped = new Map<NotificationPlacement, (NotificationArgs & { key: React.Key })[]>();\n items.forEach(item => {\n const resolvedKey = item.key ?? `notification-${item.message ?? Math.random()}`;\n const resolvedPlacement = item.placement ?? placement;\n const group = grouped.get(resolvedPlacement) ?? [];\n group.push({ ...item, key: resolvedKey });\n grouped.set(resolvedPlacement, group);\n });\n\n return (\n <>\n {Array.from(grouped.entries()).map(([groupPlacement, groupItems]) => (\n <div\n key={groupPlacement}\n className={twMerge(\n 'pointer-events-none fixed z-70 flex w-full max-w-[24rem] flex-col',\n placementClasses[groupPlacement],\n containerClassName,\n className\n )}\n style={{ gap: `${gap}px` }}\n {...rest}\n >\n {groupItems.map(item => (\n <NotificationCard key={item.key} item={item} />\n ))}\n </div>\n ))}\n </>\n );\n};\n\nexport type {\n NotificationArgs,\n NotificationPlacement,\n NotificationProps,\n NotificationType,\n NotificationVariant\n} from './types.notification';\nexport default Notification;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Form/Select/index.tsx"],"names":[],"mappings":"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","file":"chunk-OPMXH6OF.js","sourcesContent":["import React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { GlobalSize } from '@lindle/linoardo/global.types';\nimport type { InputVariant } from '../Input/types';\nimport type { SelectOption, SelectOptionObject, SelectProps } from './types.select';\nimport { generateString } from '../../utils/helpers/randomStr';\n\nconst baseClass =\n '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';\n\nconst 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 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',\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 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',\n rounded:\n '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'\n} satisfies Record<InputVariant, string>;\n\nconst sizeClasses = {\n 'x-small': { padding: 'pl-2 pr-8 py-2', text: 'text-xs' },\n small: { padding: 'pl-2.5 pr-9 py-2.5', text: 'text-sm' },\n medium: { padding: 'pl-3 pr-10 py-3', text: 'text-base' },\n large: { padding: 'pl-3.5 pr-11 py-3.5', text: 'text-lg' },\n 'x-large': { padding: 'pl-4 pr-12 py-4', text: 'text-xl' }\n} satisfies Record<GlobalSize, { padding: string; text: string }>;\n\nconst normalizeOption = (option: SelectOption): SelectOptionObject => {\n if (typeof option === 'string') {\n return { label: option, value: option };\n }\n\n return option;\n};\n\n/**\n * Native select styled with the same visual variants as Input.\n * Accepts options as string[] or { label, value }[] for convenience.\n */\nconst Select: React.FC<SelectProps> = ({\n options,\n label,\n placeholder,\n variant = 'outline',\n size = 'medium',\n className,\n wrapperClassName,\n id,\n name,\n multiple,\n onFocus,\n onBlur,\n onChange,\n value,\n defaultValue,\n ...props\n}) => {\n const selectId = id || name || generateString();\n const selectName = name || selectId;\n const variantClass = variantClasses[variant] ?? variantClasses.outline;\n const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;\n const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;\n const normalizedOptions = options.map(normalizeOption);\n const hasLabel = Boolean(label);\n const hasProvidedPlaceholder = typeof placeholder === 'string' && placeholder.trim().length > 0;\n const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder && !multiple;\n const placeholderText = placeholder ?? (hasLabel ? ' ' : undefined);\n const [isFocused, setIsFocused] = React.useState(false);\n const [hasValue, setHasValue] = React.useState(() => {\n const initial = value ?? defaultValue;\n if (initial === undefined || initial === null) return false;\n if (multiple) {\n if (Array.isArray(initial)) return initial.length > 0;\n return String(initial).length > 0;\n }\n if (Array.isArray(initial)) {\n if (initial.length === 0) return false;\n return String(initial[0]).length > 0;\n }\n return String(initial).length > 0;\n });\n const isControlled = value !== undefined;\n\n React.useEffect(() => {\n if (!isControlled) return;\n if (value === undefined || value === null) {\n setHasValue(false);\n return;\n }\n if (multiple) {\n if (Array.isArray(value)) {\n setHasValue(value.length > 0);\n } else {\n setHasValue(String(value).length > 0);\n }\n return;\n }\n if (Array.isArray(value)) {\n setHasValue(value.length > 0 ? String(value[0]).length > 0 : false);\n return;\n }\n setHasValue(String(value).length > 0);\n }, [isControlled, multiple, value]);\n\n const placeholderOptionLabel = hidePlaceholderUntilFocus && !isFocused ? ' ' : placeholderText;\n const shouldRenderPlaceholder = !multiple && placeholderText !== undefined;\n const labelShouldFloat = hasValue || isFocused;\n const labelLeftClass = 'left-3';\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<HTMLSelectElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleBlur: React.FocusEventHandler<HTMLSelectElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleChange: React.ChangeEventHandler<HTMLSelectElement> = event => {\n if (!isControlled) {\n const nextHasValue = multiple ? event.target.selectedOptions.length > 0 : event.target.value !== '';\n setHasValue(nextHasValue);\n }\n onChange?.(event);\n };\n\n return (\n <div className={twMerge('flex flex-col gap-1', wrapperClassName)}>\n <div className='relative flex items-center'>\n <select\n {...props}\n id={selectId}\n name={selectName}\n multiple={multiple}\n value={value}\n defaultValue={value === undefined ? defaultValue : undefined}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n className={twMerge('peer', baseClass, variantClass, sizeClass, className)}\n >\n {shouldRenderPlaceholder && (\n <option value='' disabled={props.required} hidden={hasValue}>\n {placeholderOptionLabel}\n </option>\n )}\n {normalizedOptions.map((option, index) => (\n <option key={`${selectId}-${option.value}-${index}`} value={option.value} disabled={option.disabled}>\n {option.label}\n </option>\n ))}\n </select>\n {!multiple && (\n <span className='pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300'>\n <i className='mdi mdi-chevron-down text-base leading-none' aria-hidden />\n </span>\n )}\n {label && (\n <label\n htmlFor={selectId}\n className={twMerge(\n 'absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200',\n labelLeftClass,\n labelShouldFloat\n ? [\n 'top-0 text-xs px-1',\n isFocused ? '-translate-y-1/2 text-gray-600' : '-translate-y-2/3',\n labelBgDefault\n ].join(' ')\n : 'top-1/2 -translate-y-1/2 text-sm text-gray-500'\n )}\n >\n {label}\n </label>\n )}\n </div>\n </div>\n );\n};\n\nexport default Select;\nexport type { SelectProps, SelectOption, SelectOptionObject } from './types.select';\n"]}
|