@lindle/linoardo 1.0.17 → 1.0.19
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 +10 -2
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +1 -0
- package/dist/button.d.ts +1 -0
- package/dist/button.js +1 -1
- package/dist/card.cjs +87 -0
- package/dist/card.cjs.map +1 -0
- package/dist/card.d.cts +34 -0
- package/dist/card.d.ts +34 -0
- package/dist/card.js +3 -0
- package/dist/card.js.map +1 -0
- package/dist/chunk-AOHXZ7OM.js +126 -0
- package/dist/chunk-AOHXZ7OM.js.map +1 -0
- package/dist/chunk-N65GNKRG.js +143 -0
- package/dist/chunk-N65GNKRG.js.map +1 -0
- package/dist/{chunk-TTDFAKOL.js → chunk-PYG5SDNO.js} +2 -2
- package/dist/{chunk-TTDFAKOL.js.map → chunk-PYG5SDNO.js.map} +1 -1
- package/dist/{chunk-3EGIRBQ3.js → chunk-QGQ66FJD.js} +69 -14
- package/dist/chunk-QGQ66FJD.js.map +1 -0
- package/dist/{chunk-7LLAWEDF.js → chunk-SZU6OYLS.js} +12 -4
- package/dist/chunk-SZU6OYLS.js.map +1 -0
- package/dist/chunk-V4BVJOSC.js +85 -0
- package/dist/chunk-V4BVJOSC.js.map +1 -0
- package/dist/index.cjs +409 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +6 -3
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +1 -1
- package/dist/menu.cjs +67 -12
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +1 -1
- package/dist/slider.cjs +128 -0
- package/dist/slider.cjs.map +1 -0
- package/dist/slider.d.cts +42 -0
- package/dist/slider.d.ts +42 -0
- package/dist/slider.js +3 -0
- package/dist/slider.js.map +1 -0
- package/dist/styles.css +349 -38
- package/dist/switch.cjs +145 -0
- package/dist/switch.cjs.map +1 -0
- package/dist/switch.d.cts +16 -0
- package/dist/switch.d.ts +16 -0
- package/dist/switch.js +3 -0
- package/dist/switch.js.map +1 -0
- package/package.json +17 -4
- package/dist/chunk-3EGIRBQ3.js.map +0 -1
- package/dist/chunk-7LLAWEDF.js.map +0 -1
package/dist/button.cjs
CHANGED
|
@@ -151,6 +151,13 @@ var sizeClasses = {
|
|
|
151
151
|
large: "px-6 py-3 text-lg",
|
|
152
152
|
"x-large": "px-7 py-3.5 text-xl"
|
|
153
153
|
};
|
|
154
|
+
var iconOnlySizeClasses = {
|
|
155
|
+
"x-small": "p-2 text-xs aspect-square",
|
|
156
|
+
small: "p-2.5 text-sm aspect-square",
|
|
157
|
+
medium: "p-3 text-base aspect-square",
|
|
158
|
+
large: "p-3.5 text-lg aspect-square",
|
|
159
|
+
"x-large": "p-4 text-xl aspect-square"
|
|
160
|
+
};
|
|
154
161
|
var Button = React__namespace.forwardRef(
|
|
155
162
|
({
|
|
156
163
|
variant = "solid",
|
|
@@ -160,6 +167,7 @@ var Button = React__namespace.forwardRef(
|
|
|
160
167
|
loading = false,
|
|
161
168
|
loadingText,
|
|
162
169
|
icon,
|
|
170
|
+
iconOnly = false,
|
|
163
171
|
className,
|
|
164
172
|
children,
|
|
165
173
|
disabled,
|
|
@@ -167,14 +175,14 @@ var Button = React__namespace.forwardRef(
|
|
|
167
175
|
...rest
|
|
168
176
|
}, ref) => {
|
|
169
177
|
const variantClass = resolveVariantClass(variant, color);
|
|
170
|
-
const sizeClass = sizeClasses[size] ?? sizeClasses.medium;
|
|
178
|
+
const sizeClass = iconOnly ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium : sizeClasses[size] ?? sizeClasses.medium;
|
|
171
179
|
const blockClass = block ? "w-full" : null;
|
|
172
180
|
const isDisabled = disabled || loading;
|
|
173
181
|
const cursor = onClick && !isDisabled ? "cursor-pointer" : "cursor-default";
|
|
174
182
|
const resolvedIconClass = resolveIconClassName(icon);
|
|
175
183
|
const shouldRenderIcon = Boolean(resolvedIconClass && !loading);
|
|
176
184
|
const isLoadingTextProvided = loadingText !== void 0 && loadingText !== null;
|
|
177
|
-
const content = loading && isLoadingTextProvided ? loadingText : children;
|
|
185
|
+
const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;
|
|
178
186
|
const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);
|
|
179
187
|
const gapClass = hasDecorators ? "gap-2" : void 0;
|
|
180
188
|
const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
|
package/dist/button.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/globals.ts","../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx"],"names":["twMerge","normalized","React","jsxs","jsx"],"mappings":"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","file":"button.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport type { GlobalSize, Palette } from '@lindle/linoardo/global.types';\nimport type { ButtonProps, ButtonVariant } from './types.button';\nimport { twMerge } from 'tailwind-merge';\n\nexport const base =\n 'btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed';\n\nconst blackAndWhiteVariantClass =\n 'bg-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white';\n\nconst blackAndWhitePaletteClasses = {\n solid: twMerge(blackAndWhiteVariantClass, 'bg-black text-white'),\n outline: blackAndWhiteVariantClass,\n ghost: 'bg-neutral-300 text-white',\n text: blackAndWhiteVariantClass,\n filled: 'bg-black text-white',\n underlined: twMerge(blackAndWhiteVariantClass, 'b'),\n rounded: blackAndWhiteVariantClass,\n sharp: 'bg-black text-white rounded-none'\n} satisfies Record<ButtonVariant, string>;\n\nconst paletteVariantClasses: Record<Palette, Record<ButtonVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n sharp: 'rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n outline: 'border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary',\n ghost: 'text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent',\n filled: 'bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25',\n underlined:\n 'bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25',\n rounded:\n 'rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25'\n },\n neutral: {\n solid: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n sharp: 'rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n outline:\n 'border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400',\n ghost: 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled: 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300',\n rounded: 'rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300'\n },\n info: {\n solid: 'bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n sharp: 'rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n outline: 'border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400',\n ghost: 'text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent',\n filled: 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200',\n underlined:\n 'bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200',\n rounded: 'rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200'\n },\n success: {\n solid: 'bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n sharp: 'rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n outline:\n 'border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400',\n ghost:\n 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200',\n underlined:\n 'bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200',\n rounded:\n 'rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200'\n },\n warning: {\n solid: 'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n sharp: 'rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n outline:\n 'border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400',\n ghost: 'text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent',\n filled: 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200',\n underlined:\n 'bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200',\n rounded:\n 'rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200'\n },\n danger: {\n solid: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n sharp: 'rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n outline: 'border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400',\n ghost: 'text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent',\n filled: 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200',\n underlined:\n 'bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200',\n rounded: 'rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200'\n },\n surface: {\n solid: 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n sharp: 'rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n outline: 'border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200',\n ghost: 'text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled: 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200',\n rounded: 'rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200'\n },\n bw: blackAndWhitePaletteClasses\n};\n\nexport const resolveVariantClass = (variant: ButtonVariant, palette: Palette) => {\n const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;\n return paletteVariants[variant] ?? paletteVariants.solid;\n};\n\nexport const resolveIconClassName = (icon?: ButtonProps['icon']) => {\n if (!icon) {\n return undefined;\n }\n\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) {\n return undefined;\n }\n\n if (trimmed.includes(' ')) {\n return trimmed;\n }\n\n const normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalized].join(' ');\n }\n\n const [library, providedName] = icon;\n const normalizedLibrary = library.trim();\n const baseClasses = iconBaseClasses[normalizedLibrary as keyof typeof iconBaseClasses] ?? [normalizedLibrary];\n const iconName = providedName.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n\n const normalized = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return Array.from(new Set([...baseClasses, normalized])).join(' ');\n};\n\nexport const sizeClasses = {\n 'x-small': 'px-2.5 py-1 text-xs',\n small: 'px-3 py-1.5 text-sm',\n medium: 'px-4 py-2 text-base',\n large: 'px-6 py-3 text-lg',\n 'x-large': 'px-7 py-3.5 text-xl'\n} satisfies Record<GlobalSize, string>;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport { base, resolveIconClassName, resolveVariantClass, sizeClasses } from './states.button';\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n block = false,\n loading = false,\n loadingText,\n icon,\n className,\n children,\n disabled,\n onClick,\n ...rest\n },\n ref\n ) => {\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = sizeClasses[size] ?? sizeClasses.medium;\n const blockClass = block ? 'w-full' : null;\n const isDisabled = disabled || loading;\n const cursor = onClick && !isDisabled ? 'cursor-pointer' : 'cursor-default';\n const resolvedIconClass = resolveIconClassName(icon);\n const shouldRenderIcon = Boolean(resolvedIconClass && !loading);\n const isLoadingTextProvided = loadingText !== undefined && loadingText !== null;\n const content = loading && isLoadingTextProvided ? loadingText : children;\n const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);\n const gapClass = hasDecorators ? 'gap-2' : undefined;\n const loadingIconClass = loading ? twMerge('mdi mdi-loading mdi-spin', 'leading-none') : undefined;\n const iconClassName = shouldRenderIcon ? twMerge('leading-none', resolvedIconClass) : undefined;\n\n return (\n <button\n {...rest}\n ref={ref}\n onClick={onClick}\n disabled={isDisabled}\n className={twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className)}\n data-loading={loading || undefined}\n aria-busy={loading || undefined}\n >\n {loading && <i className={loadingIconClass} aria-hidden />}\n {iconClassName && <i className={iconClassName} aria-hidden />}\n {content}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/globals.ts","../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx"],"names":["twMerge","normalized","React","jsxs","jsx"],"mappings":"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","file":"button.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport type { GlobalSize, Palette } from '@lindle/linoardo/global.types';\nimport type { ButtonProps, ButtonVariant } from './types.button';\nimport { twMerge } from 'tailwind-merge';\n\nexport const base =\n 'btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed';\n\nconst blackAndWhiteVariantClass =\n 'bg-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white';\n\nconst blackAndWhitePaletteClasses = {\n solid: twMerge(blackAndWhiteVariantClass, 'bg-black text-white'),\n outline: blackAndWhiteVariantClass,\n ghost: 'bg-neutral-300 text-white',\n text: blackAndWhiteVariantClass,\n filled: 'bg-black text-white',\n underlined: twMerge(blackAndWhiteVariantClass, 'b'),\n rounded: blackAndWhiteVariantClass,\n sharp: 'bg-black text-white rounded-none'\n} satisfies Record<ButtonVariant, string>;\n\nconst paletteVariantClasses: Record<Palette, Record<ButtonVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n sharp: 'rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n outline: 'border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary',\n ghost: 'text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent',\n filled: 'bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25',\n underlined:\n 'bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25',\n rounded:\n 'rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25'\n },\n neutral: {\n solid: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n sharp: 'rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n outline:\n 'border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400',\n ghost: 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled: 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300',\n rounded: 'rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300'\n },\n info: {\n solid: 'bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n sharp: 'rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n outline: 'border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400',\n ghost: 'text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent',\n filled: 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200',\n underlined:\n 'bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200',\n rounded: 'rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200'\n },\n success: {\n solid: 'bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n sharp: 'rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n outline:\n 'border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400',\n ghost:\n 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200',\n underlined:\n 'bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200',\n rounded:\n 'rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200'\n },\n warning: {\n solid: 'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n sharp: 'rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n outline:\n 'border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400',\n ghost: 'text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent',\n filled: 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200',\n underlined:\n 'bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200',\n rounded:\n 'rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200'\n },\n danger: {\n solid: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n sharp: 'rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n outline: 'border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400',\n ghost: 'text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent',\n filled: 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200',\n underlined:\n 'bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200',\n rounded: 'rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200'\n },\n surface: {\n solid: 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n sharp: 'rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n outline: 'border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200',\n ghost: 'text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled: 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200',\n rounded: 'rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200'\n },\n bw: blackAndWhitePaletteClasses\n};\n\nexport const resolveVariantClass = (variant: ButtonVariant, palette: Palette) => {\n const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;\n return paletteVariants[variant] ?? paletteVariants.solid;\n};\n\nexport const resolveIconClassName = (icon?: ButtonProps['icon']) => {\n if (!icon) {\n return undefined;\n }\n\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) {\n return undefined;\n }\n\n if (trimmed.includes(' ')) {\n return trimmed;\n }\n\n const normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalized].join(' ');\n }\n\n const [library, providedName] = icon;\n const normalizedLibrary = library.trim();\n const baseClasses = iconBaseClasses[normalizedLibrary as keyof typeof iconBaseClasses] ?? [normalizedLibrary];\n const iconName = providedName.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n\n const normalized = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return Array.from(new Set([...baseClasses, normalized])).join(' ');\n};\n\nexport const sizeClasses = {\n 'x-small': 'px-2.5 py-1 text-xs',\n small: 'px-3 py-1.5 text-sm',\n medium: 'px-4 py-2 text-base',\n large: 'px-6 py-3 text-lg',\n 'x-large': 'px-7 py-3.5 text-xl'\n} satisfies Record<GlobalSize, string>;\n\nexport const iconOnlySizeClasses = {\n 'x-small': 'p-2 text-xs aspect-square',\n small: 'p-2.5 text-sm aspect-square',\n medium: 'p-3 text-base aspect-square',\n large: 'p-3.5 text-lg aspect-square',\n 'x-large': 'p-4 text-xl aspect-square'\n} satisfies Record<GlobalSize, string>;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport { base, iconOnlySizeClasses, resolveIconClassName, resolveVariantClass, sizeClasses } from './states.button';\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n block = false,\n loading = false,\n loadingText,\n icon,\n iconOnly = false,\n className,\n children,\n disabled,\n onClick,\n ...rest\n },\n ref\n ) => {\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = iconOnly\n ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium\n : sizeClasses[size] ?? sizeClasses.medium;\n const blockClass = block ? 'w-full' : null;\n const isDisabled = disabled || loading;\n const cursor = onClick && !isDisabled ? 'cursor-pointer' : 'cursor-default';\n const resolvedIconClass = resolveIconClassName(icon);\n const shouldRenderIcon = Boolean(resolvedIconClass && !loading);\n const isLoadingTextProvided = loadingText !== undefined && loadingText !== null;\n const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;\n const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);\n const gapClass = hasDecorators ? 'gap-2' : undefined;\n const loadingIconClass = loading ? twMerge('mdi mdi-loading mdi-spin', 'leading-none') : undefined;\n const iconClassName = shouldRenderIcon ? twMerge('leading-none', resolvedIconClass) : undefined;\n\n return (\n <button\n {...rest}\n ref={ref}\n onClick={onClick}\n disabled={isDisabled}\n className={twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className)}\n data-loading={loading || undefined}\n aria-busy={loading || undefined}\n >\n {loading && <i className={loadingIconClass} aria-hidden />}\n {iconClassName && <i className={iconClassName} aria-hidden />}\n {content}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"]}
|
package/dist/button.d.cts
CHANGED
package/dist/button.d.ts
CHANGED
package/dist/button.js
CHANGED
package/dist/card.cjs
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
var tailwindMerge = require('tailwind-merge');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
// src/Containment/Card/index.tsx
|
|
8
|
+
var paddingClasses = {
|
|
9
|
+
none: "p-0",
|
|
10
|
+
sm: "p-3",
|
|
11
|
+
md: "p-4",
|
|
12
|
+
lg: "p-6"
|
|
13
|
+
};
|
|
14
|
+
var cardBase = "card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors";
|
|
15
|
+
var variantClasses = {
|
|
16
|
+
solid: "rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55",
|
|
17
|
+
outline: "rounded-2xl border border-gray-300 bg-white shadow-none",
|
|
18
|
+
text: "rounded-2xl border border-transparent bg-transparent shadow-none",
|
|
19
|
+
ghost: "rounded-2xl border border-transparent bg-gray-50 shadow-none",
|
|
20
|
+
filled: "rounded-2xl border border-gray-200 bg-gray-50 shadow-sm",
|
|
21
|
+
underlined: "rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none",
|
|
22
|
+
rounded: "rounded-3xl border border-gray-200 bg-white shadow-md",
|
|
23
|
+
sharp: "rounded-none border border-gray-200 bg-white shadow-md"
|
|
24
|
+
};
|
|
25
|
+
var CardRoot = react.forwardRef(function Card({ className, children, variant = "solid", padding = "md", interactive = false, ...rest }, ref) {
|
|
26
|
+
const variantClass = variantClasses[variant] ?? variantClasses.solid;
|
|
27
|
+
const paddingClass = paddingClasses[padding] ?? paddingClasses.md;
|
|
28
|
+
const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2" : void 0;
|
|
29
|
+
const tabIndexValue = interactive && rest.tabIndex === void 0 ? 0 : rest.tabIndex;
|
|
30
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
31
|
+
"div",
|
|
32
|
+
{
|
|
33
|
+
...rest,
|
|
34
|
+
ref,
|
|
35
|
+
tabIndex: tabIndexValue,
|
|
36
|
+
className: tailwindMerge.twMerge(cardBase, variantClass, paddingClass, interactiveClass, className),
|
|
37
|
+
children
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
});
|
|
41
|
+
var CardHeader = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
...rest,
|
|
45
|
+
className: tailwindMerge.twMerge("card-header mb-2 flex flex-col gap-1 border-b border-gray-100 pb-3", className)
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
var CardBody = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tailwindMerge.twMerge("card-body flex flex-col gap-3", className) });
|
|
49
|
+
var CardFooter = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
50
|
+
"div",
|
|
51
|
+
{
|
|
52
|
+
...rest,
|
|
53
|
+
className: tailwindMerge.twMerge("card-footer mt-3 flex flex-wrap items-center gap-3 border-t border-gray-100 pt-3", className)
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
var CardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ...rest, className: tailwindMerge.twMerge("card-title text-lg font-semibold text-gray-900", className) });
|
|
57
|
+
var CardSubtitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: tailwindMerge.twMerge("card-subtitle text-sm font-medium text-gray-600", className) });
|
|
58
|
+
var CardText = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: tailwindMerge.twMerge("card-text text-sm text-gray-700", className) });
|
|
59
|
+
var CardMedia = ({ className, rounded = false, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
60
|
+
"img",
|
|
61
|
+
{
|
|
62
|
+
...rest,
|
|
63
|
+
className: tailwindMerge.twMerge(
|
|
64
|
+
"card-media w-full object-cover",
|
|
65
|
+
rounded ? "rounded-xl" : "rounded-none",
|
|
66
|
+
rest.height || rest.style ? "block" : "block max-h-60",
|
|
67
|
+
className
|
|
68
|
+
),
|
|
69
|
+
loading: rest.loading ?? "lazy"
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
var CardActions = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tailwindMerge.twMerge("card-actions flex flex-wrap gap-2", className) });
|
|
73
|
+
var Card2 = Object.assign(CardRoot, {
|
|
74
|
+
Header: CardHeader,
|
|
75
|
+
Body: CardBody,
|
|
76
|
+
Footer: CardFooter,
|
|
77
|
+
Title: CardTitle,
|
|
78
|
+
Subtitle: CardSubtitle,
|
|
79
|
+
Text: CardText,
|
|
80
|
+
Media: CardMedia,
|
|
81
|
+
Actions: CardActions
|
|
82
|
+
});
|
|
83
|
+
var Card_default = Card2;
|
|
84
|
+
|
|
85
|
+
module.exports = Card_default;
|
|
86
|
+
//# sourceMappingURL=card.cjs.map
|
|
87
|
+
//# sourceMappingURL=card.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Containment/Card/index.tsx"],"names":["forwardRef","jsx","twMerge","Card"],"mappings":"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","file":"card.cjs","sourcesContent":["import { forwardRef } from 'react';\nimport type { GlobalVariant } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { CardMediaProps, CardProps, CardSectionProps, CardTextProps } from './types.card';\n\nconst paddingClasses: Record<Exclude<CardProps['padding'], undefined>, string> = {\n none: 'p-0',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-6'\n};\n\nconst cardBase = 'card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors';\n\nconst variantClasses: Record<GlobalVariant, string> = {\n solid: 'rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55',\n outline: 'rounded-2xl border border-gray-300 bg-white shadow-none',\n text: 'rounded-2xl border border-transparent bg-transparent shadow-none',\n ghost: 'rounded-2xl border border-transparent bg-gray-50 shadow-none',\n filled: 'rounded-2xl border border-gray-200 bg-gray-50 shadow-sm',\n underlined: 'rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none',\n rounded: 'rounded-3xl border border-gray-200 bg-white shadow-md',\n sharp: 'rounded-none border border-gray-200 bg-white shadow-md'\n};\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(\n { className, children, variant = 'solid', padding = 'md', interactive = false, ...rest },\n ref\n) {\n const variantClass = variantClasses[variant as GlobalVariant] ?? variantClasses.solid;\n const paddingClass = paddingClasses[padding] ?? paddingClasses.md;\n const interactiveClass = interactive\n ? 'transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2'\n : undefined;\n const tabIndexValue = interactive && rest.tabIndex === undefined ? 0 : rest.tabIndex;\n\n return (\n <div\n {...rest}\n ref={ref}\n tabIndex={tabIndexValue}\n className={twMerge(cardBase, variantClass, paddingClass, interactiveClass, className)}\n >\n {children}\n </div>\n );\n});\n\nconst CardHeader: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div\n {...rest}\n className={twMerge('card-header mb-2 flex flex-col gap-1 border-b border-gray-100 pb-3', className)}\n />\n);\n\nconst CardBody: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div {...rest} className={twMerge('card-body flex flex-col gap-3', className)} />\n);\n\nconst CardFooter: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div\n {...rest}\n className={twMerge('card-footer mt-3 flex flex-wrap items-center gap-3 border-t border-gray-100 pt-3', className)}\n />\n);\n\nconst CardTitle: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <h3 {...rest} className={twMerge('card-title text-lg font-semibold text-gray-900', className)} />\n);\n\nconst CardSubtitle: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <p {...rest} className={twMerge('card-subtitle text-sm font-medium text-gray-600', className)} />\n);\n\nconst CardText: React.FC<CardTextProps> = ({ className, ...rest }) => (\n <p {...rest} className={twMerge('card-text text-sm text-gray-700', className)} />\n);\n\nconst CardMedia: React.FC<CardMediaProps> = ({ className, rounded = false, ...rest }) => (\n <img\n {...rest}\n className={twMerge(\n 'card-media w-full object-cover',\n rounded ? 'rounded-xl' : 'rounded-none',\n rest.height || rest.style ? 'block' : 'block max-h-60',\n className\n )}\n loading={rest.loading ?? 'lazy'}\n />\n);\n\nconst CardActions: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div {...rest} className={twMerge('card-actions flex flex-wrap gap-2', className)} />\n);\n\nexport type { CardProps, CardSectionProps, CardMediaProps, CardTextProps };\n\nconst Card = Object.assign(CardRoot, {\n Header: CardHeader,\n Body: CardBody,\n Footer: CardFooter,\n Title: CardTitle,\n Subtitle: CardSubtitle,\n Text: CardText,\n Media: CardMedia,\n Actions: CardActions\n});\n\nexport default Card;\n"]}
|
package/dist/card.d.cts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { G as GlobalVariant } from './global.types-E2uVLemv.cjs';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
|
|
4
|
+
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
5
|
+
type CardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
|
+
variant?: GlobalVariant;
|
|
7
|
+
padding?: CardPadding;
|
|
8
|
+
/**
|
|
9
|
+
* Adds a subtle hover + focus ring. Works well for clickable cards.
|
|
10
|
+
*/
|
|
11
|
+
interactive?: boolean;
|
|
12
|
+
};
|
|
13
|
+
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
14
|
+
type CardTextProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
15
|
+
type CardMediaProps = React.ImgHTMLAttributes<HTMLImageElement> & {
|
|
16
|
+
rounded?: boolean;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & {
|
|
20
|
+
variant?: GlobalVariant;
|
|
21
|
+
padding?: CardPadding;
|
|
22
|
+
interactive?: boolean;
|
|
23
|
+
} & react.RefAttributes<HTMLDivElement>> & {
|
|
24
|
+
Header: react.FC<CardSectionProps>;
|
|
25
|
+
Body: react.FC<CardSectionProps>;
|
|
26
|
+
Footer: react.FC<CardSectionProps>;
|
|
27
|
+
Title: react.FC<CardSectionProps>;
|
|
28
|
+
Subtitle: react.FC<CardSectionProps>;
|
|
29
|
+
Text: react.FC<CardTextProps>;
|
|
30
|
+
Media: react.FC<CardMediaProps>;
|
|
31
|
+
Actions: react.FC<CardSectionProps>;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export { type CardMediaProps, type CardProps, type CardSectionProps, type CardTextProps, Card as default };
|
package/dist/card.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { G as GlobalVariant } from './global.types-E2uVLemv.js';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
|
|
4
|
+
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
5
|
+
type CardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
|
+
variant?: GlobalVariant;
|
|
7
|
+
padding?: CardPadding;
|
|
8
|
+
/**
|
|
9
|
+
* Adds a subtle hover + focus ring. Works well for clickable cards.
|
|
10
|
+
*/
|
|
11
|
+
interactive?: boolean;
|
|
12
|
+
};
|
|
13
|
+
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
14
|
+
type CardTextProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
15
|
+
type CardMediaProps = React.ImgHTMLAttributes<HTMLImageElement> & {
|
|
16
|
+
rounded?: boolean;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & {
|
|
20
|
+
variant?: GlobalVariant;
|
|
21
|
+
padding?: CardPadding;
|
|
22
|
+
interactive?: boolean;
|
|
23
|
+
} & react.RefAttributes<HTMLDivElement>> & {
|
|
24
|
+
Header: react.FC<CardSectionProps>;
|
|
25
|
+
Body: react.FC<CardSectionProps>;
|
|
26
|
+
Footer: react.FC<CardSectionProps>;
|
|
27
|
+
Title: react.FC<CardSectionProps>;
|
|
28
|
+
Subtitle: react.FC<CardSectionProps>;
|
|
29
|
+
Text: react.FC<CardTextProps>;
|
|
30
|
+
Media: react.FC<CardMediaProps>;
|
|
31
|
+
Actions: react.FC<CardSectionProps>;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export { type CardMediaProps, type CardProps, type CardSectionProps, type CardTextProps, Card as default };
|
package/dist/card.js
ADDED
package/dist/card.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"card.js"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
// src/Form/Slider/index.tsx
|
|
6
|
+
var paletteValues = {
|
|
7
|
+
primary: { fill: "var(--color-primary, #6366f1)", ring: "rgba(99, 102, 241, 0.28)", thumbBorder: "#6366f1" },
|
|
8
|
+
neutral: { fill: "#4b5563", ring: "rgba(75, 85, 99, 0.28)", thumbBorder: "#4b5563" },
|
|
9
|
+
info: { fill: "#0284c7", ring: "rgba(2, 132, 199, 0.28)", thumbBorder: "#0284c7" },
|
|
10
|
+
success: { fill: "#059669", ring: "rgba(5, 150, 105, 0.24)", thumbBorder: "#059669" },
|
|
11
|
+
warning: { fill: "#d97706", ring: "rgba(217, 119, 6, 0.24)", thumbBorder: "#d97706" },
|
|
12
|
+
danger: { fill: "#dc2626", ring: "rgba(220, 38, 38, 0.24)", thumbBorder: "#dc2626" },
|
|
13
|
+
surface: { fill: "#0f172a", ring: "rgba(15, 23, 42, 0.22)", thumbBorder: "#0f172a" },
|
|
14
|
+
bw: { fill: "#000000", ring: "rgba(0, 0, 0, 0.26)", thumbBorder: "#000000" }
|
|
15
|
+
};
|
|
16
|
+
var sizeTokens = {
|
|
17
|
+
small: { trackHeight: "0.375rem", thumbSize: "1.1rem", trackClass: "h-1.5", valueClass: "text-xs" },
|
|
18
|
+
medium: { trackHeight: "0.5rem", thumbSize: "1.25rem", trackClass: "h-2", valueClass: "text-sm" },
|
|
19
|
+
large: { trackHeight: "0.6rem", thumbSize: "1.4rem", trackClass: "h-[0.65rem]", valueClass: "text-base" }
|
|
20
|
+
};
|
|
21
|
+
var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
22
|
+
var toNumber = (value, fallback) => {
|
|
23
|
+
if (typeof value === "number" && Number.isFinite(value)) {
|
|
24
|
+
return value;
|
|
25
|
+
}
|
|
26
|
+
const parsed = Number(value);
|
|
27
|
+
return Number.isFinite(parsed) ? parsed : fallback;
|
|
28
|
+
};
|
|
29
|
+
var Slider = ({
|
|
30
|
+
color = "primary",
|
|
31
|
+
size = "medium",
|
|
32
|
+
label,
|
|
33
|
+
hint,
|
|
34
|
+
showValue = true,
|
|
35
|
+
valueLabel,
|
|
36
|
+
wrapperClassName,
|
|
37
|
+
className,
|
|
38
|
+
trackColor,
|
|
39
|
+
onChange,
|
|
40
|
+
disabled,
|
|
41
|
+
min = 0,
|
|
42
|
+
max = 100,
|
|
43
|
+
step = 1,
|
|
44
|
+
...rest
|
|
45
|
+
}) => {
|
|
46
|
+
const palette = paletteValues[color] ?? paletteValues.primary;
|
|
47
|
+
const sizeToken = sizeTokens[size] ?? sizeTokens.medium;
|
|
48
|
+
const { value, defaultValue, ...inputProps } = rest;
|
|
49
|
+
const resolvedMin = toNumber(min, 0);
|
|
50
|
+
const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);
|
|
51
|
+
const resolvedStep = toNumber(step, 1);
|
|
52
|
+
const isControlled = typeof value === "number";
|
|
53
|
+
const [internalValue, setInternalValue] = useState(
|
|
54
|
+
clamp(
|
|
55
|
+
typeof value === "number" ? value : typeof defaultValue === "number" ? defaultValue : resolvedMin,
|
|
56
|
+
resolvedMin,
|
|
57
|
+
resolvedMax
|
|
58
|
+
)
|
|
59
|
+
);
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (isControlled && typeof value === "number") {
|
|
62
|
+
setInternalValue(clamp(value, resolvedMin, resolvedMax));
|
|
63
|
+
}
|
|
64
|
+
}, [isControlled, value, resolvedMin, resolvedMax]);
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
if (!isControlled) {
|
|
67
|
+
setInternalValue((prev) => clamp(prev, resolvedMin, resolvedMax));
|
|
68
|
+
}
|
|
69
|
+
}, [isControlled, resolvedMin, resolvedMax]);
|
|
70
|
+
const currentValue = isControlled && typeof value === "number" ? clamp(value, resolvedMin, resolvedMax) : internalValue;
|
|
71
|
+
const percentage = resolvedMax === resolvedMin ? 0 : (currentValue - resolvedMin) / (resolvedMax - resolvedMin) * 100;
|
|
72
|
+
const cssVars = {
|
|
73
|
+
"--slider-color": palette.fill,
|
|
74
|
+
"--slider-ring-color": palette.ring,
|
|
75
|
+
"--slider-thumb-border": palette.thumbBorder,
|
|
76
|
+
"--slider-track-color": trackColor ?? "#e5e7eb",
|
|
77
|
+
"--slider-track-height": sizeToken.trackHeight,
|
|
78
|
+
"--slider-thumb-size": sizeToken.thumbSize,
|
|
79
|
+
"--slider-percentage": `${percentage}%`
|
|
80
|
+
};
|
|
81
|
+
if (disabled) {
|
|
82
|
+
cssVars["--slider-disabled-fill"] = "#d1d5db";
|
|
83
|
+
cssVars["--slider-thumb-border"] = "#d1d5db";
|
|
84
|
+
cssVars["--slider-track-color-disabled"] = "#e5e7eb";
|
|
85
|
+
}
|
|
86
|
+
const handleChange = (event) => {
|
|
87
|
+
const nextValue = Number(event.target.value);
|
|
88
|
+
if (!isControlled) {
|
|
89
|
+
setInternalValue(nextValue);
|
|
90
|
+
}
|
|
91
|
+
onChange?.(nextValue, event);
|
|
92
|
+
};
|
|
93
|
+
const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;
|
|
94
|
+
return /* @__PURE__ */ jsxs("div", { className: twMerge("flex flex-col gap-2", wrapperClassName), children: [
|
|
95
|
+
(label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
96
|
+
label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
|
|
97
|
+
showValue && /* @__PURE__ */ jsx("span", { className: twMerge("tabular-nums text-gray-900", sizeToken.valueClass), children: displayValue })
|
|
98
|
+
] }),
|
|
99
|
+
/* @__PURE__ */ jsx(
|
|
100
|
+
"input",
|
|
101
|
+
{
|
|
102
|
+
...inputProps,
|
|
103
|
+
type: "range",
|
|
104
|
+
min: resolvedMin,
|
|
105
|
+
max: resolvedMax,
|
|
106
|
+
step: resolvedStep,
|
|
107
|
+
value: currentValue,
|
|
108
|
+
onChange: handleChange,
|
|
109
|
+
disabled,
|
|
110
|
+
className: twMerge(
|
|
111
|
+
"slider-control focus-visible:outline-none rounded-full",
|
|
112
|
+
sizeToken.trackClass,
|
|
113
|
+
disabled ? "cursor-not-allowed opacity-70" : "cursor-pointer",
|
|
114
|
+
className
|
|
115
|
+
),
|
|
116
|
+
style: cssVars
|
|
117
|
+
}
|
|
118
|
+
),
|
|
119
|
+
hint && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600", children: hint })
|
|
120
|
+
] });
|
|
121
|
+
};
|
|
122
|
+
var Slider_default = Slider;
|
|
123
|
+
|
|
124
|
+
export { Slider_default };
|
|
125
|
+
//# sourceMappingURL=chunk-AOHXZ7OM.js.map
|
|
126
|
+
//# sourceMappingURL=chunk-AOHXZ7OM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Form/Slider/index.tsx"],"names":[],"mappings":"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","file":"chunk-AOHXZ7OM.js","sourcesContent":["import { type ChangeEvent, type CSSProperties, useEffect, useState } from 'react';\nimport type { Palette } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { SliderProps, SliderSize } from './types.slider';\n\nconst paletteValues: Record<Palette, { fill: string; ring: string; thumbBorder: string }> = {\n primary: { fill: 'var(--color-primary, #6366f1)', ring: 'rgba(99, 102, 241, 0.28)', thumbBorder: '#6366f1' },\n neutral: { fill: '#4b5563', ring: 'rgba(75, 85, 99, 0.28)', thumbBorder: '#4b5563' },\n info: { fill: '#0284c7', ring: 'rgba(2, 132, 199, 0.28)', thumbBorder: '#0284c7' },\n success: { fill: '#059669', ring: 'rgba(5, 150, 105, 0.24)', thumbBorder: '#059669' },\n warning: { fill: '#d97706', ring: 'rgba(217, 119, 6, 0.24)', thumbBorder: '#d97706' },\n danger: { fill: '#dc2626', ring: 'rgba(220, 38, 38, 0.24)', thumbBorder: '#dc2626' },\n surface: { fill: '#0f172a', ring: 'rgba(15, 23, 42, 0.22)', thumbBorder: '#0f172a' },\n bw: { fill: '#000000', ring: 'rgba(0, 0, 0, 0.26)', thumbBorder: '#000000' }\n};\n\nconst sizeTokens: Record<\n SliderSize,\n { trackHeight: string; thumbSize: string; trackClass: string; valueClass: string }\n> = {\n small: { trackHeight: '0.375rem', thumbSize: '1.1rem', trackClass: 'h-1.5', valueClass: 'text-xs' },\n medium: { trackHeight: '0.5rem', thumbSize: '1.25rem', trackClass: 'h-2', valueClass: 'text-sm' },\n large: { trackHeight: '0.6rem', thumbSize: '1.4rem', trackClass: 'h-[0.65rem]', valueClass: 'text-base' }\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst toNumber = (value: number | string | undefined, fallback: number) => {\n if (typeof value === 'number' && Number.isFinite(value)) {\n return value;\n }\n\n const parsed = Number(value);\n return Number.isFinite(parsed) ? parsed : fallback;\n};\n\ntype SliderCssVariables = CSSProperties & Record<string, string>;\n\nconst Slider: React.FC<SliderProps> = ({\n color = 'primary',\n size = 'medium',\n label,\n hint,\n showValue = true,\n valueLabel,\n wrapperClassName,\n className,\n trackColor,\n onChange,\n disabled,\n min = 0,\n max = 100,\n step = 1,\n ...rest\n}) => {\n const palette = paletteValues[color] ?? paletteValues.primary;\n const sizeToken = sizeTokens[size] ?? sizeTokens.medium;\n const { value, defaultValue, ...inputProps } = rest;\n const resolvedMin = toNumber(min, 0);\n const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);\n const resolvedStep = toNumber(step, 1);\n const isControlled = typeof value === 'number';\n const [internalValue, setInternalValue] = useState<number>(\n clamp(\n typeof value === 'number'\n ? value\n : typeof defaultValue === 'number'\n ? defaultValue\n : resolvedMin,\n resolvedMin,\n resolvedMax\n )\n );\n\n useEffect(() => {\n if (isControlled && typeof value === 'number') {\n setInternalValue(clamp(value, resolvedMin, resolvedMax));\n }\n }, [isControlled, value, resolvedMin, resolvedMax]);\n\n useEffect(() => {\n if (!isControlled) {\n setInternalValue(prev => clamp(prev, resolvedMin, resolvedMax));\n }\n }, [isControlled, resolvedMin, resolvedMax]);\n\n const currentValue =\n isControlled && typeof value === 'number' ? clamp(value, resolvedMin, resolvedMax) : internalValue;\n const percentage = resolvedMax === resolvedMin ? 0 : ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100;\n const cssVars: SliderCssVariables = {\n '--slider-color': palette.fill,\n '--slider-ring-color': palette.ring,\n '--slider-thumb-border': palette.thumbBorder,\n '--slider-track-color': trackColor ?? '#e5e7eb',\n '--slider-track-height': sizeToken.trackHeight,\n '--slider-thumb-size': sizeToken.thumbSize,\n '--slider-percentage': `${percentage}%`\n };\n\n if (disabled) {\n cssVars['--slider-disabled-fill'] = '#d1d5db';\n cssVars['--slider-thumb-border'] = '#d1d5db';\n cssVars['--slider-track-color-disabled'] = '#e5e7eb';\n }\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const nextValue = Number(event.target.value);\n if (!isControlled) {\n setInternalValue(nextValue);\n }\n onChange?.(nextValue, event);\n };\n\n const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;\n\n return (\n <div className={twMerge('flex flex-col gap-2', wrapperClassName)}>\n {(label || showValue) && (\n <div className='flex items-center justify-between'>\n {label && <span className='text-sm font-medium text-gray-900'>{label}</span>}\n {showValue && <span className={twMerge('tabular-nums text-gray-900', sizeToken.valueClass)}>{displayValue}</span>}\n </div>\n )}\n\n <input\n {...inputProps}\n type='range'\n min={resolvedMin}\n max={resolvedMax}\n step={resolvedStep}\n value={currentValue}\n onChange={handleChange}\n disabled={disabled}\n className={twMerge(\n 'slider-control focus-visible:outline-none rounded-full',\n sizeToken.trackClass,\n disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer',\n className\n )}\n style={cssVars}\n />\n\n {hint && <p className='text-xs text-gray-600'>{hint}</p>}\n </div>\n );\n};\n\nexport default Slider;\n"]}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import { forwardRef, useState, useEffect } from 'react';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
// src/Form/Switch/index.tsx
|
|
6
|
+
var trackSizes = {
|
|
7
|
+
small: "w-10 h-6",
|
|
8
|
+
medium: "w-12 h-7",
|
|
9
|
+
large: "w-14 h-8"
|
|
10
|
+
};
|
|
11
|
+
var thumbSizes = {
|
|
12
|
+
small: "w-5 h-5",
|
|
13
|
+
medium: "w-6 h-6",
|
|
14
|
+
large: "w-7 h-7"
|
|
15
|
+
};
|
|
16
|
+
var thumbTranslate = {
|
|
17
|
+
small: "translate-x-4",
|
|
18
|
+
medium: "translate-x-5",
|
|
19
|
+
large: "translate-x-6"
|
|
20
|
+
};
|
|
21
|
+
var paletteTrackClasses = {
|
|
22
|
+
primary: { active: "bg-primary", inactive: "bg-gray-300" },
|
|
23
|
+
neutral: { active: "bg-gray-600", inactive: "bg-gray-300" },
|
|
24
|
+
info: { active: "bg-sky-500", inactive: "bg-gray-300" },
|
|
25
|
+
success: { active: "bg-emerald-500", inactive: "bg-gray-300" },
|
|
26
|
+
warning: { active: "bg-amber-500", inactive: "bg-gray-300" },
|
|
27
|
+
danger: { active: "bg-red-500", inactive: "bg-gray-300" },
|
|
28
|
+
surface: { active: "bg-gray-900", inactive: "bg-gray-300" },
|
|
29
|
+
bw: { active: "bg-black", inactive: "bg-gray-200" }
|
|
30
|
+
};
|
|
31
|
+
var focusRingClasses = {
|
|
32
|
+
primary: "peer-focus-visible:ring-primary/40",
|
|
33
|
+
neutral: "peer-focus-visible:ring-gray-400",
|
|
34
|
+
info: "peer-focus-visible:ring-sky-400",
|
|
35
|
+
success: "peer-focus-visible:ring-emerald-400",
|
|
36
|
+
warning: "peer-focus-visible:ring-amber-400",
|
|
37
|
+
danger: "peer-focus-visible:ring-red-400",
|
|
38
|
+
surface: "peer-focus-visible:ring-gray-800/70",
|
|
39
|
+
bw: "peer-focus-visible:ring-black/50"
|
|
40
|
+
};
|
|
41
|
+
var thumbActiveClasses = {
|
|
42
|
+
primary: "border-primary shadow-[0_4px_12px_rgba(99,102,241,0.35)]",
|
|
43
|
+
neutral: "border-gray-600 shadow-[0_4px_12px_rgba(75,85,99,0.35)]",
|
|
44
|
+
info: "border-sky-500 shadow-[0_4px_12px_rgba(2,132,199,0.32)]",
|
|
45
|
+
success: "border-emerald-500 shadow-[0_4px_12px_rgba(16,185,129,0.32)]",
|
|
46
|
+
warning: "border-amber-500 shadow-[0_4px_12px_rgba(245,158,11,0.32)]",
|
|
47
|
+
danger: "border-red-500 shadow-[0_4px_12px_rgba(239,68,68,0.32)]",
|
|
48
|
+
surface: "border-gray-900 shadow-[0_4px_12px_rgba(15,23,42,0.32)]",
|
|
49
|
+
bw: "border-black shadow-[0_4px_12px_rgba(0,0,0,0.32)]"
|
|
50
|
+
};
|
|
51
|
+
var Switch = forwardRef(
|
|
52
|
+
({
|
|
53
|
+
color = "primary",
|
|
54
|
+
size = "medium",
|
|
55
|
+
label,
|
|
56
|
+
description,
|
|
57
|
+
wrapperClassName,
|
|
58
|
+
className,
|
|
59
|
+
labelClassName,
|
|
60
|
+
disabled,
|
|
61
|
+
onChange,
|
|
62
|
+
checked,
|
|
63
|
+
defaultChecked,
|
|
64
|
+
...rest
|
|
65
|
+
}, ref) => {
|
|
66
|
+
const paletteTrack = paletteTrackClasses[color] ?? paletteTrackClasses.primary;
|
|
67
|
+
const focusClass = focusRingClasses[color] ?? focusRingClasses.primary;
|
|
68
|
+
const thumbActive = thumbActiveClasses[color] ?? thumbActiveClasses.primary;
|
|
69
|
+
const isControlled = checked !== void 0;
|
|
70
|
+
const [internalChecked, setInternalChecked] = useState(
|
|
71
|
+
Boolean((isControlled ? checked : defaultChecked) ?? false)
|
|
72
|
+
);
|
|
73
|
+
useEffect(() => {
|
|
74
|
+
if (isControlled) {
|
|
75
|
+
setInternalChecked(Boolean(checked));
|
|
76
|
+
}
|
|
77
|
+
}, [checked, isControlled]);
|
|
78
|
+
const currentChecked = isControlled ? Boolean(checked) : internalChecked;
|
|
79
|
+
const handleChange = (event) => {
|
|
80
|
+
if (!isControlled) {
|
|
81
|
+
setInternalChecked(event.target.checked);
|
|
82
|
+
}
|
|
83
|
+
onChange?.(event);
|
|
84
|
+
};
|
|
85
|
+
const sizeTrackClass = trackSizes[size] ?? trackSizes.medium;
|
|
86
|
+
const sizeThumbClass = thumbSizes[size] ?? thumbSizes.medium;
|
|
87
|
+
const thumbShiftClass = thumbTranslate[size] ?? thumbTranslate.medium;
|
|
88
|
+
const pointerClass = disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
|
|
89
|
+
return /* @__PURE__ */ jsxs("label", { className: twMerge("flex items-center gap-3 select-none", pointerClass, wrapperClassName), children: [
|
|
90
|
+
/* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center", children: [
|
|
91
|
+
/* @__PURE__ */ jsx(
|
|
92
|
+
"input",
|
|
93
|
+
{
|
|
94
|
+
...rest,
|
|
95
|
+
type: "checkbox",
|
|
96
|
+
ref,
|
|
97
|
+
checked: currentChecked,
|
|
98
|
+
onChange: handleChange,
|
|
99
|
+
disabled,
|
|
100
|
+
className: "peer sr-only"
|
|
101
|
+
}
|
|
102
|
+
),
|
|
103
|
+
/* @__PURE__ */ jsx(
|
|
104
|
+
"span",
|
|
105
|
+
{
|
|
106
|
+
className: twMerge(
|
|
107
|
+
"block rounded-full border border-transparent transition-all duration-200",
|
|
108
|
+
sizeTrackClass,
|
|
109
|
+
currentChecked ? paletteTrack.active : paletteTrack.inactive,
|
|
110
|
+
disabled && "bg-gray-200",
|
|
111
|
+
"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
|
|
112
|
+
focusClass,
|
|
113
|
+
className
|
|
114
|
+
),
|
|
115
|
+
"aria-hidden": true,
|
|
116
|
+
children: /* @__PURE__ */ jsx(
|
|
117
|
+
"span",
|
|
118
|
+
{
|
|
119
|
+
className: twMerge(
|
|
120
|
+
"absolute left-0.5 top-0.5 rounded-full bg-white shadow-md border border-gray-200 transition-transform duration-200",
|
|
121
|
+
sizeThumbClass,
|
|
122
|
+
currentChecked && thumbShiftClass,
|
|
123
|
+
currentChecked && thumbActive,
|
|
124
|
+
disabled && "border-gray-300"
|
|
125
|
+
)
|
|
126
|
+
}
|
|
127
|
+
)
|
|
128
|
+
}
|
|
129
|
+
)
|
|
130
|
+
] }),
|
|
131
|
+
(label || description) && /* @__PURE__ */ jsxs("span", { className: twMerge("flex flex-col leading-tight", labelClassName), children: [
|
|
132
|
+
label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
|
|
133
|
+
description && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600", children: description })
|
|
134
|
+
] })
|
|
135
|
+
] });
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
Switch.displayName = "Switch";
|
|
139
|
+
var Switch_default = Switch;
|
|
140
|
+
|
|
141
|
+
export { Switch_default };
|
|
142
|
+
//# sourceMappingURL=chunk-N65GNKRG.js.map
|
|
143
|
+
//# sourceMappingURL=chunk-N65GNKRG.js.map
|