@lindle/linoardo 1.0.20 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/button.cjs +30 -15
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +17 -7
- package/dist/button.d.ts +17 -7
- package/dist/button.js +1 -1
- package/dist/card.cjs +2 -2
- package/dist/card.cjs.map +1 -1
- package/dist/card.js +1 -1
- package/dist/chip.cjs +8 -9
- package/dist/chip.cjs.map +1 -1
- package/dist/chip.d.cts +4 -4
- package/dist/chip.d.ts +4 -4
- package/dist/chip.js +1 -1
- package/dist/{chunk-B5FW33K3.js → chunk-2UL3S6KC.js} +4 -4
- package/dist/chunk-2UL3S6KC.js.map +1 -0
- package/dist/{chunk-5PBPURGP.js → chunk-DSZ3EOQB.js} +10 -11
- package/dist/chunk-DSZ3EOQB.js.map +1 -0
- package/dist/{chunk-MFLH36XK.js → chunk-JGEXEDKS.js} +3 -3
- package/dist/{chunk-MFLH36XK.js.map → chunk-JGEXEDKS.js.map} +1 -1
- package/dist/chunk-QRBJFDV5.js +170 -0
- package/dist/chunk-QRBJFDV5.js.map +1 -0
- package/dist/{chunk-SZU6OYLS.js → chunk-RFPNVLAD.js} +31 -17
- package/dist/chunk-RFPNVLAD.js.map +1 -0
- package/dist/{chunk-36T6I3XH.js → chunk-SAGQYMS3.js} +14 -14
- package/dist/chunk-SAGQYMS3.js.map +1 -0
- package/dist/chunk-VPF7M2PB.js +141 -0
- package/dist/chunk-VPF7M2PB.js.map +1 -0
- package/dist/hero.cjs +143 -0
- package/dist/hero.cjs.map +1 -0
- package/dist/hero.d.cts +34 -0
- package/dist/hero.d.ts +34 -0
- package/dist/hero.js +3 -0
- package/dist/hero.js.map +1 -0
- package/dist/index.cjs +88 -55
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -59
- package/dist/index.d.ts +4 -59
- package/dist/index.js +7 -286
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +1 -1
- package/dist/profileCard.cjs +391 -0
- package/dist/profileCard.cjs.map +1 -0
- package/dist/profileCard.d.cts +29 -0
- package/dist/profileCard.d.ts +29 -0
- package/dist/profileCard.js +5 -0
- package/dist/profileCard.js.map +1 -0
- package/dist/select.cjs +12 -12
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +1 -1
- package/dist/styles.css +108 -9
- package/dist/switch.d.cts +1 -1
- package/dist/switch.d.ts +1 -1
- package/package.json +2 -1
- package/dist/chunk-36T6I3XH.js.map +0 -1
- package/dist/chunk-5PBPURGP.js.map +0 -1
- package/dist/chunk-B5FW33K3.js.map +0 -1
- package/dist/chunk-SZU6OYLS.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/helpers/randomStr.ts","../src/Form/Select/index.tsx"],"names":[],"mappings":"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","file":"chunk-SAGQYMS3.js","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"]}
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import { twMerge } from 'tailwind-merge';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
// src/Blocks/Hero/index.tsx
|
|
5
|
+
var containerVariants = {
|
|
6
|
+
solid: "bg-gradient-to-br from-primary via-primary/90 to-indigo-600 text-white shadow-2xl shadow-primary/30",
|
|
7
|
+
outline: "border border-gray-200 bg-white text-gray-900",
|
|
8
|
+
text: "bg-transparent text-gray-900",
|
|
9
|
+
ghost: "bg-primary/5 text-gray-900 border border-primary/10",
|
|
10
|
+
filled: "bg-slate-900 text-white shadow-2xl shadow-slate-900/40",
|
|
11
|
+
underlined: "border-b-4 border-primary/70 bg-white text-gray-900",
|
|
12
|
+
rounded: "rounded-3xl border border-gray-100 bg-white text-gray-900 shadow-xl",
|
|
13
|
+
sharp: "rounded-none border border-gray-200 bg-white text-gray-900 shadow"
|
|
14
|
+
};
|
|
15
|
+
var frameRadii = {
|
|
16
|
+
solid: "rounded-3xl",
|
|
17
|
+
outline: "rounded-2xl",
|
|
18
|
+
text: "rounded-2xl",
|
|
19
|
+
ghost: "rounded-2xl",
|
|
20
|
+
filled: "rounded-3xl",
|
|
21
|
+
underlined: "rounded-2xl",
|
|
22
|
+
rounded: "rounded-3xl",
|
|
23
|
+
sharp: "rounded-none"
|
|
24
|
+
};
|
|
25
|
+
var badgeVariants = {
|
|
26
|
+
solid: "bg-white/10 text-white border border-white/20",
|
|
27
|
+
outline: "bg-primary/10 text-primary border border-primary/20",
|
|
28
|
+
text: "bg-primary/10 text-primary border border-primary/20",
|
|
29
|
+
ghost: "bg-primary/15 text-primary border border-primary/25",
|
|
30
|
+
filled: "bg-white/10 text-white border border-white/20",
|
|
31
|
+
underlined: "bg-primary/10 text-primary border border-primary/20",
|
|
32
|
+
rounded: "bg-primary/10 text-primary border border-primary/20",
|
|
33
|
+
sharp: "bg-primary/10 text-primary border border-primary/20"
|
|
34
|
+
};
|
|
35
|
+
var Hero = ({
|
|
36
|
+
title,
|
|
37
|
+
description,
|
|
38
|
+
eyebrow,
|
|
39
|
+
actions = [],
|
|
40
|
+
stats = [],
|
|
41
|
+
logos = [],
|
|
42
|
+
image,
|
|
43
|
+
variant = "solid",
|
|
44
|
+
className,
|
|
45
|
+
...rest
|
|
46
|
+
}) => {
|
|
47
|
+
const containerClass = twMerge(
|
|
48
|
+
"hero-block relative isolate overflow-hidden",
|
|
49
|
+
containerVariants[variant] ?? containerVariants.solid,
|
|
50
|
+
className
|
|
51
|
+
);
|
|
52
|
+
const badgeClass = twMerge(
|
|
53
|
+
"inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
|
|
54
|
+
badgeVariants[variant] ?? badgeVariants.solid
|
|
55
|
+
);
|
|
56
|
+
const isDark = variant === "solid" || variant === "filled";
|
|
57
|
+
const subdued = isDark ? "text-white/80" : "text-gray-600";
|
|
58
|
+
const statMuted = isDark ? "text-white/70" : "text-gray-500";
|
|
59
|
+
const actionPrimary = isDark ? "bg-white text-gray-900 hover:bg-white/90 focus-visible:outline-white/70" : "bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary/50";
|
|
60
|
+
const actionSecondary = isDark ? "border border-white/40 text-white hover:bg-white/10 focus-visible:outline-white/60" : "border border-gray-300 text-gray-900 hover:border-primary/60 hover:text-primary focus-visible:outline-primary/50";
|
|
61
|
+
const frameRadius = frameRadii[variant] ?? "rounded-2xl";
|
|
62
|
+
const frameDecoration = isDark ? "border-white/10 bg-white/10 shadow-2xl shadow-black/20" : "border-gray-200 bg-white shadow-2xl shadow-gray-200/60";
|
|
63
|
+
const renderAction = (action, index) => {
|
|
64
|
+
const { href, label, onClick, variant: actionVariant = "primary" } = action;
|
|
65
|
+
const Component = href ? "a" : "button";
|
|
66
|
+
const resolvedClass = actionVariant === "secondary" ? twMerge("bg-white/70", actionSecondary) : twMerge("shadow-lg shadow-primary/25", actionPrimary);
|
|
67
|
+
return /* @__PURE__ */ jsx(
|
|
68
|
+
Component,
|
|
69
|
+
{
|
|
70
|
+
href,
|
|
71
|
+
onClick,
|
|
72
|
+
className: twMerge(
|
|
73
|
+
"inline-flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold transition focus-visible:outline focus-visible:outline-offset-2",
|
|
74
|
+
resolvedClass
|
|
75
|
+
),
|
|
76
|
+
children: label
|
|
77
|
+
},
|
|
78
|
+
`${label}-${index}`
|
|
79
|
+
);
|
|
80
|
+
};
|
|
81
|
+
return /* @__PURE__ */ jsxs("section", { ...rest, className: containerClass, children: [
|
|
82
|
+
/* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
|
|
83
|
+
/* @__PURE__ */ jsx("div", { className: "absolute left-24 top-10 h-64 w-64 rounded-full bg-primary/15 blur-3xl" }),
|
|
84
|
+
/* @__PURE__ */ jsx("div", { className: "absolute -right-16 -bottom-10 h-80 w-80 rounded-full bg-primary/20 blur-3xl" })
|
|
85
|
+
] }),
|
|
86
|
+
/* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-6xl flex-col gap-12 px-6 py-16 lg:px-10 lg:py-24", children: [
|
|
87
|
+
/* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
|
|
88
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
|
|
89
|
+
eyebrow && /* @__PURE__ */ jsx("span", { className: badgeClass, children: eyebrow }),
|
|
90
|
+
/* @__PURE__ */ jsx(
|
|
91
|
+
"h1",
|
|
92
|
+
{
|
|
93
|
+
className: twMerge(
|
|
94
|
+
"text-4xl font-semibold leading-tight sm:text-5xl",
|
|
95
|
+
isDark ? "text-white" : "text-gray-900"
|
|
96
|
+
),
|
|
97
|
+
children: title
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
description && /* @__PURE__ */ jsx("p", { className: twMerge("text-lg leading-relaxed", subdued), children: description }),
|
|
101
|
+
actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: actions.map(renderAction) }),
|
|
102
|
+
stats.length > 0 && /* @__PURE__ */ jsx("dl", { className: "grid gap-6 sm:grid-cols-3", children: stats.map((stat) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
|
|
103
|
+
/* @__PURE__ */ jsx("dd", { className: twMerge("text-3xl font-semibold", isDark ? "text-white" : "text-gray-900"), children: stat.value }),
|
|
104
|
+
/* @__PURE__ */ jsx("dt", { className: twMerge("text-sm font-medium", statMuted), children: stat.label })
|
|
105
|
+
] }, stat.label)) })
|
|
106
|
+
] }),
|
|
107
|
+
image && /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: twMerge("relative overflow-hidden backdrop-blur", frameDecoration, frameRadius), children: [
|
|
108
|
+
/* @__PURE__ */ jsx(
|
|
109
|
+
"img",
|
|
110
|
+
{
|
|
111
|
+
src: image.src,
|
|
112
|
+
alt: image.alt ?? "",
|
|
113
|
+
className: twMerge("h-full w-full object-cover", frameRadius),
|
|
114
|
+
loading: "lazy"
|
|
115
|
+
}
|
|
116
|
+
),
|
|
117
|
+
/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-t from-black/30 via-transparent to-transparent" })
|
|
118
|
+
] }) })
|
|
119
|
+
] }),
|
|
120
|
+
logos.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6 lg:items-center lg:gap-10", children: [
|
|
121
|
+
/* @__PURE__ */ jsx("span", { className: twMerge("text-sm font-semibold tracking-wide", subdued), children: "Duveruji nam" }),
|
|
122
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-4 opacity-80", children: logos.map((logo) => /* @__PURE__ */ jsx(
|
|
123
|
+
"img",
|
|
124
|
+
{
|
|
125
|
+
src: logo.src,
|
|
126
|
+
alt: logo.alt ?? "",
|
|
127
|
+
className: "h-8 w-auto grayscale transition hover:grayscale-0",
|
|
128
|
+
loading: "lazy"
|
|
129
|
+
},
|
|
130
|
+
logo.src
|
|
131
|
+
)) })
|
|
132
|
+
] })
|
|
133
|
+
] })
|
|
134
|
+
] });
|
|
135
|
+
};
|
|
136
|
+
Hero.displayName = "Hero";
|
|
137
|
+
var Hero_default = Hero;
|
|
138
|
+
|
|
139
|
+
export { Hero_default };
|
|
140
|
+
//# sourceMappingURL=chunk-VPF7M2PB.js.map
|
|
141
|
+
//# sourceMappingURL=chunk-VPF7M2PB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Blocks/Hero/index.tsx"],"names":[],"mappings":"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","file":"chunk-VPF7M2PB.js","sourcesContent":["import type { GlobalVariant } from '@lindle/linoardo/global.types';\nimport * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\ntype HeroAction = {\n label: string;\n href?: string;\n variant?: 'primary' | 'secondary';\n onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n};\n\ntype HeroStat = {\n value: string;\n label: string;\n};\n\ntype HeroLogo = {\n src: string;\n alt?: string;\n};\n\ntype HeroImage = {\n src: string;\n alt?: string;\n};\n\nexport type HeroProps = React.HTMLAttributes<HTMLElement> & {\n title: React.ReactNode;\n description?: React.ReactNode;\n eyebrow?: string;\n actions?: HeroAction[];\n stats?: HeroStat[];\n logos?: HeroLogo[];\n image?: HeroImage;\n variant?: GlobalVariant;\n};\n\nconst containerVariants: Record<GlobalVariant, string> = {\n solid: 'bg-gradient-to-br from-primary via-primary/90 to-indigo-600 text-white shadow-2xl shadow-primary/30',\n outline: 'border border-gray-200 bg-white text-gray-900',\n text: 'bg-transparent text-gray-900',\n ghost: 'bg-primary/5 text-gray-900 border border-primary/10',\n filled: 'bg-slate-900 text-white shadow-2xl shadow-slate-900/40',\n underlined: 'border-b-4 border-primary/70 bg-white text-gray-900',\n rounded: 'rounded-3xl border border-gray-100 bg-white text-gray-900 shadow-xl',\n sharp: 'rounded-none border border-gray-200 bg-white text-gray-900 shadow'\n};\n\nconst frameRadii: Record<GlobalVariant, string> = {\n solid: 'rounded-3xl',\n outline: 'rounded-2xl',\n text: 'rounded-2xl',\n ghost: 'rounded-2xl',\n filled: 'rounded-3xl',\n underlined: 'rounded-2xl',\n rounded: 'rounded-3xl',\n sharp: 'rounded-none'\n};\n\nconst badgeVariants: Record<GlobalVariant, string> = {\n solid: 'bg-white/10 text-white border border-white/20',\n outline: 'bg-primary/10 text-primary border border-primary/20',\n text: 'bg-primary/10 text-primary border border-primary/20',\n ghost: 'bg-primary/15 text-primary border border-primary/25',\n filled: 'bg-white/10 text-white border border-white/20',\n underlined: 'bg-primary/10 text-primary border border-primary/20',\n rounded: 'bg-primary/10 text-primary border border-primary/20',\n sharp: 'bg-primary/10 text-primary border border-primary/20'\n};\n\nconst Hero: React.FC<HeroProps> = ({\n title,\n description,\n eyebrow,\n actions = [],\n stats = [],\n logos = [],\n image,\n variant = 'solid',\n className,\n ...rest\n}) => {\n const containerClass = twMerge(\n 'hero-block relative isolate overflow-hidden',\n containerVariants[variant] ?? containerVariants.solid,\n className\n );\n const badgeClass = twMerge(\n 'inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide',\n badgeVariants[variant] ?? badgeVariants.solid\n );\n const isDark = variant === 'solid' || variant === 'filled';\n const subdued = isDark ? 'text-white/80' : 'text-gray-600';\n const statMuted = isDark ? 'text-white/70' : 'text-gray-500';\n const actionPrimary = isDark\n ? 'bg-white text-gray-900 hover:bg-white/90 focus-visible:outline-white/70'\n : 'bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary/50';\n const actionSecondary = isDark\n ? 'border border-white/40 text-white hover:bg-white/10 focus-visible:outline-white/60'\n : 'border border-gray-300 text-gray-900 hover:border-primary/60 hover:text-primary focus-visible:outline-primary/50';\n const frameRadius = frameRadii[variant] ?? 'rounded-2xl';\n const frameDecoration = isDark\n ? 'border-white/10 bg-white/10 shadow-2xl shadow-black/20'\n : 'border-gray-200 bg-white shadow-2xl shadow-gray-200/60';\n\n const renderAction = (action: HeroAction, index: number) => {\n const { href, label, onClick, variant: actionVariant = 'primary' } = action;\n const Component = href ? 'a' : 'button';\n const resolvedClass =\n actionVariant === 'secondary'\n ? twMerge('bg-white/70', actionSecondary)\n : twMerge('shadow-lg shadow-primary/25', actionPrimary);\n\n return (\n <Component\n key={`${label}-${index}`}\n href={href}\n onClick={onClick as never}\n className={twMerge(\n 'inline-flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold transition focus-visible:outline focus-visible:outline-offset-2',\n resolvedClass\n )}\n >\n {label}\n </Component>\n );\n };\n\n return (\n <section {...rest} className={containerClass}>\n <div className='pointer-events-none absolute inset-0 overflow-hidden'>\n <div className='absolute left-24 top-10 h-64 w-64 rounded-full bg-primary/15 blur-3xl' />\n <div className='absolute -right-16 -bottom-10 h-80 w-80 rounded-full bg-primary/20 blur-3xl' />\n </div>\n <div className='mx-auto flex max-w-6xl flex-col gap-12 px-6 py-16 lg:px-10 lg:py-24'>\n <div className='grid items-center gap-12 lg:grid-cols-2'>\n <div className='space-y-6'>\n {eyebrow && <span className={badgeClass}>{eyebrow}</span>}\n <h1\n className={twMerge(\n 'text-4xl font-semibold leading-tight sm:text-5xl',\n isDark ? 'text-white' : 'text-gray-900'\n )}\n >\n {title}\n </h1>\n {description && <p className={twMerge('text-lg leading-relaxed', subdued)}>{description}</p>}\n {actions.length > 0 && <div className='flex flex-wrap gap-3'>{actions.map(renderAction)}</div>}\n {stats.length > 0 && (\n <dl className='grid gap-6 sm:grid-cols-3'>\n {stats.map(stat => (\n <div key={stat.label} className='space-y-1'>\n <dd className={twMerge('text-3xl font-semibold', isDark ? 'text-white' : 'text-gray-900')}>\n {stat.value}\n </dd>\n <dt className={twMerge('text-sm font-medium', statMuted)}>{stat.label}</dt>\n </div>\n ))}\n </dl>\n )}\n </div>\n {image && (\n <div className='relative'>\n <div className={twMerge('relative overflow-hidden backdrop-blur', frameDecoration, frameRadius)}>\n <img\n src={image.src}\n alt={image.alt ?? ''}\n className={twMerge('h-full w-full object-cover', frameRadius)}\n loading='lazy'\n />\n <div className='pointer-events-none absolute inset-0 bg-linear-to-t from-black/30 via-transparent to-transparent' />\n </div>\n </div>\n )}\n </div>\n {logos.length > 0 && (\n <div className='flex flex-wrap items-center gap-6 lg:items-center lg:gap-10'>\n <span className={twMerge('text-sm font-semibold tracking-wide', subdued)}>Duveruji nam</span>\n <div className='flex flex-wrap items-center gap-4 opacity-80'>\n {logos.map(logo => (\n <img\n key={logo.src}\n src={logo.src}\n alt={logo.alt ?? ''}\n className='h-8 w-auto grayscale transition hover:grayscale-0'\n loading='lazy'\n />\n ))}\n </div>\n </div>\n )}\n </div>\n </section>\n );\n};\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"]}
|
package/dist/hero.cjs
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tailwindMerge = require('tailwind-merge');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
|
|
6
|
+
// src/Blocks/Hero/index.tsx
|
|
7
|
+
var containerVariants = {
|
|
8
|
+
solid: "bg-gradient-to-br from-primary via-primary/90 to-indigo-600 text-white shadow-2xl shadow-primary/30",
|
|
9
|
+
outline: "border border-gray-200 bg-white text-gray-900",
|
|
10
|
+
text: "bg-transparent text-gray-900",
|
|
11
|
+
ghost: "bg-primary/5 text-gray-900 border border-primary/10",
|
|
12
|
+
filled: "bg-slate-900 text-white shadow-2xl shadow-slate-900/40",
|
|
13
|
+
underlined: "border-b-4 border-primary/70 bg-white text-gray-900",
|
|
14
|
+
rounded: "rounded-3xl border border-gray-100 bg-white text-gray-900 shadow-xl",
|
|
15
|
+
sharp: "rounded-none border border-gray-200 bg-white text-gray-900 shadow"
|
|
16
|
+
};
|
|
17
|
+
var frameRadii = {
|
|
18
|
+
solid: "rounded-3xl",
|
|
19
|
+
outline: "rounded-2xl",
|
|
20
|
+
text: "rounded-2xl",
|
|
21
|
+
ghost: "rounded-2xl",
|
|
22
|
+
filled: "rounded-3xl",
|
|
23
|
+
underlined: "rounded-2xl",
|
|
24
|
+
rounded: "rounded-3xl",
|
|
25
|
+
sharp: "rounded-none"
|
|
26
|
+
};
|
|
27
|
+
var badgeVariants = {
|
|
28
|
+
solid: "bg-white/10 text-white border border-white/20",
|
|
29
|
+
outline: "bg-primary/10 text-primary border border-primary/20",
|
|
30
|
+
text: "bg-primary/10 text-primary border border-primary/20",
|
|
31
|
+
ghost: "bg-primary/15 text-primary border border-primary/25",
|
|
32
|
+
filled: "bg-white/10 text-white border border-white/20",
|
|
33
|
+
underlined: "bg-primary/10 text-primary border border-primary/20",
|
|
34
|
+
rounded: "bg-primary/10 text-primary border border-primary/20",
|
|
35
|
+
sharp: "bg-primary/10 text-primary border border-primary/20"
|
|
36
|
+
};
|
|
37
|
+
var Hero = ({
|
|
38
|
+
title,
|
|
39
|
+
description,
|
|
40
|
+
eyebrow,
|
|
41
|
+
actions = [],
|
|
42
|
+
stats = [],
|
|
43
|
+
logos = [],
|
|
44
|
+
image,
|
|
45
|
+
variant = "solid",
|
|
46
|
+
className,
|
|
47
|
+
...rest
|
|
48
|
+
}) => {
|
|
49
|
+
const containerClass = tailwindMerge.twMerge(
|
|
50
|
+
"hero-block relative isolate overflow-hidden",
|
|
51
|
+
containerVariants[variant] ?? containerVariants.solid,
|
|
52
|
+
className
|
|
53
|
+
);
|
|
54
|
+
const badgeClass = tailwindMerge.twMerge(
|
|
55
|
+
"inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
|
|
56
|
+
badgeVariants[variant] ?? badgeVariants.solid
|
|
57
|
+
);
|
|
58
|
+
const isDark = variant === "solid" || variant === "filled";
|
|
59
|
+
const subdued = isDark ? "text-white/80" : "text-gray-600";
|
|
60
|
+
const statMuted = isDark ? "text-white/70" : "text-gray-500";
|
|
61
|
+
const actionPrimary = isDark ? "bg-white text-gray-900 hover:bg-white/90 focus-visible:outline-white/70" : "bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary/50";
|
|
62
|
+
const actionSecondary = isDark ? "border border-white/40 text-white hover:bg-white/10 focus-visible:outline-white/60" : "border border-gray-300 text-gray-900 hover:border-primary/60 hover:text-primary focus-visible:outline-primary/50";
|
|
63
|
+
const frameRadius = frameRadii[variant] ?? "rounded-2xl";
|
|
64
|
+
const frameDecoration = isDark ? "border-white/10 bg-white/10 shadow-2xl shadow-black/20" : "border-gray-200 bg-white shadow-2xl shadow-gray-200/60";
|
|
65
|
+
const renderAction = (action, index) => {
|
|
66
|
+
const { href, label, onClick, variant: actionVariant = "primary" } = action;
|
|
67
|
+
const Component = href ? "a" : "button";
|
|
68
|
+
const resolvedClass = actionVariant === "secondary" ? tailwindMerge.twMerge("bg-white/70", actionSecondary) : tailwindMerge.twMerge("shadow-lg shadow-primary/25", actionPrimary);
|
|
69
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
70
|
+
Component,
|
|
71
|
+
{
|
|
72
|
+
href,
|
|
73
|
+
onClick,
|
|
74
|
+
className: tailwindMerge.twMerge(
|
|
75
|
+
"inline-flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold transition focus-visible:outline focus-visible:outline-offset-2",
|
|
76
|
+
resolvedClass
|
|
77
|
+
),
|
|
78
|
+
children: label
|
|
79
|
+
},
|
|
80
|
+
`${label}-${index}`
|
|
81
|
+
);
|
|
82
|
+
};
|
|
83
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("section", { ...rest, className: containerClass, children: [
|
|
84
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
|
|
85
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-24 top-10 h-64 w-64 rounded-full bg-primary/15 blur-3xl" }),
|
|
86
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-16 -bottom-10 h-80 w-80 rounded-full bg-primary/20 blur-3xl" })
|
|
87
|
+
] }),
|
|
88
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-6xl flex-col gap-12 px-6 py-16 lg:px-10 lg:py-24", children: [
|
|
89
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
|
|
90
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
|
|
91
|
+
eyebrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeClass, children: eyebrow }),
|
|
92
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
93
|
+
"h1",
|
|
94
|
+
{
|
|
95
|
+
className: tailwindMerge.twMerge(
|
|
96
|
+
"text-4xl font-semibold leading-tight sm:text-5xl",
|
|
97
|
+
isDark ? "text-white" : "text-gray-900"
|
|
98
|
+
),
|
|
99
|
+
children: title
|
|
100
|
+
}
|
|
101
|
+
),
|
|
102
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-lg leading-relaxed", subdued), children: description }),
|
|
103
|
+
actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: actions.map(renderAction) }),
|
|
104
|
+
stats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid gap-6 sm:grid-cols-3", children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
|
|
105
|
+
/* @__PURE__ */ jsxRuntime.jsx("dd", { className: tailwindMerge.twMerge("text-3xl font-semibold", isDark ? "text-white" : "text-gray-900"), children: stat.value }),
|
|
106
|
+
/* @__PURE__ */ jsxRuntime.jsx("dt", { className: tailwindMerge.twMerge("text-sm font-medium", statMuted), children: stat.label })
|
|
107
|
+
] }, stat.label)) })
|
|
108
|
+
] }),
|
|
109
|
+
image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("relative overflow-hidden backdrop-blur", frameDecoration, frameRadius), children: [
|
|
110
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
111
|
+
"img",
|
|
112
|
+
{
|
|
113
|
+
src: image.src,
|
|
114
|
+
alt: image.alt ?? "",
|
|
115
|
+
className: tailwindMerge.twMerge("h-full w-full object-cover", frameRadius),
|
|
116
|
+
loading: "lazy"
|
|
117
|
+
}
|
|
118
|
+
),
|
|
119
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-t from-black/30 via-transparent to-transparent" })
|
|
120
|
+
] }) })
|
|
121
|
+
] }),
|
|
122
|
+
logos.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-6 lg:items-center lg:gap-10", children: [
|
|
123
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm font-semibold tracking-wide", subdued), children: "Duveruji nam" }),
|
|
124
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-4 opacity-80", children: logos.map((logo) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
125
|
+
"img",
|
|
126
|
+
{
|
|
127
|
+
src: logo.src,
|
|
128
|
+
alt: logo.alt ?? "",
|
|
129
|
+
className: "h-8 w-auto grayscale transition hover:grayscale-0",
|
|
130
|
+
loading: "lazy"
|
|
131
|
+
},
|
|
132
|
+
logo.src
|
|
133
|
+
)) })
|
|
134
|
+
] })
|
|
135
|
+
] })
|
|
136
|
+
] });
|
|
137
|
+
};
|
|
138
|
+
Hero.displayName = "Hero";
|
|
139
|
+
var Hero_default = Hero;
|
|
140
|
+
|
|
141
|
+
module.exports = Hero_default;
|
|
142
|
+
//# sourceMappingURL=hero.cjs.map
|
|
143
|
+
//# sourceMappingURL=hero.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Blocks/Hero/index.tsx"],"names":["twMerge","jsx","jsxs"],"mappings":"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","file":"hero.cjs","sourcesContent":["import type { GlobalVariant } from '@lindle/linoardo/global.types';\nimport * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\ntype HeroAction = {\n label: string;\n href?: string;\n variant?: 'primary' | 'secondary';\n onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n};\n\ntype HeroStat = {\n value: string;\n label: string;\n};\n\ntype HeroLogo = {\n src: string;\n alt?: string;\n};\n\ntype HeroImage = {\n src: string;\n alt?: string;\n};\n\nexport type HeroProps = React.HTMLAttributes<HTMLElement> & {\n title: React.ReactNode;\n description?: React.ReactNode;\n eyebrow?: string;\n actions?: HeroAction[];\n stats?: HeroStat[];\n logos?: HeroLogo[];\n image?: HeroImage;\n variant?: GlobalVariant;\n};\n\nconst containerVariants: Record<GlobalVariant, string> = {\n solid: 'bg-gradient-to-br from-primary via-primary/90 to-indigo-600 text-white shadow-2xl shadow-primary/30',\n outline: 'border border-gray-200 bg-white text-gray-900',\n text: 'bg-transparent text-gray-900',\n ghost: 'bg-primary/5 text-gray-900 border border-primary/10',\n filled: 'bg-slate-900 text-white shadow-2xl shadow-slate-900/40',\n underlined: 'border-b-4 border-primary/70 bg-white text-gray-900',\n rounded: 'rounded-3xl border border-gray-100 bg-white text-gray-900 shadow-xl',\n sharp: 'rounded-none border border-gray-200 bg-white text-gray-900 shadow'\n};\n\nconst frameRadii: Record<GlobalVariant, string> = {\n solid: 'rounded-3xl',\n outline: 'rounded-2xl',\n text: 'rounded-2xl',\n ghost: 'rounded-2xl',\n filled: 'rounded-3xl',\n underlined: 'rounded-2xl',\n rounded: 'rounded-3xl',\n sharp: 'rounded-none'\n};\n\nconst badgeVariants: Record<GlobalVariant, string> = {\n solid: 'bg-white/10 text-white border border-white/20',\n outline: 'bg-primary/10 text-primary border border-primary/20',\n text: 'bg-primary/10 text-primary border border-primary/20',\n ghost: 'bg-primary/15 text-primary border border-primary/25',\n filled: 'bg-white/10 text-white border border-white/20',\n underlined: 'bg-primary/10 text-primary border border-primary/20',\n rounded: 'bg-primary/10 text-primary border border-primary/20',\n sharp: 'bg-primary/10 text-primary border border-primary/20'\n};\n\nconst Hero: React.FC<HeroProps> = ({\n title,\n description,\n eyebrow,\n actions = [],\n stats = [],\n logos = [],\n image,\n variant = 'solid',\n className,\n ...rest\n}) => {\n const containerClass = twMerge(\n 'hero-block relative isolate overflow-hidden',\n containerVariants[variant] ?? containerVariants.solid,\n className\n );\n const badgeClass = twMerge(\n 'inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide',\n badgeVariants[variant] ?? badgeVariants.solid\n );\n const isDark = variant === 'solid' || variant === 'filled';\n const subdued = isDark ? 'text-white/80' : 'text-gray-600';\n const statMuted = isDark ? 'text-white/70' : 'text-gray-500';\n const actionPrimary = isDark\n ? 'bg-white text-gray-900 hover:bg-white/90 focus-visible:outline-white/70'\n : 'bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary/50';\n const actionSecondary = isDark\n ? 'border border-white/40 text-white hover:bg-white/10 focus-visible:outline-white/60'\n : 'border border-gray-300 text-gray-900 hover:border-primary/60 hover:text-primary focus-visible:outline-primary/50';\n const frameRadius = frameRadii[variant] ?? 'rounded-2xl';\n const frameDecoration = isDark\n ? 'border-white/10 bg-white/10 shadow-2xl shadow-black/20'\n : 'border-gray-200 bg-white shadow-2xl shadow-gray-200/60';\n\n const renderAction = (action: HeroAction, index: number) => {\n const { href, label, onClick, variant: actionVariant = 'primary' } = action;\n const Component = href ? 'a' : 'button';\n const resolvedClass =\n actionVariant === 'secondary'\n ? twMerge('bg-white/70', actionSecondary)\n : twMerge('shadow-lg shadow-primary/25', actionPrimary);\n\n return (\n <Component\n key={`${label}-${index}`}\n href={href}\n onClick={onClick as never}\n className={twMerge(\n 'inline-flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold transition focus-visible:outline focus-visible:outline-offset-2',\n resolvedClass\n )}\n >\n {label}\n </Component>\n );\n };\n\n return (\n <section {...rest} className={containerClass}>\n <div className='pointer-events-none absolute inset-0 overflow-hidden'>\n <div className='absolute left-24 top-10 h-64 w-64 rounded-full bg-primary/15 blur-3xl' />\n <div className='absolute -right-16 -bottom-10 h-80 w-80 rounded-full bg-primary/20 blur-3xl' />\n </div>\n <div className='mx-auto flex max-w-6xl flex-col gap-12 px-6 py-16 lg:px-10 lg:py-24'>\n <div className='grid items-center gap-12 lg:grid-cols-2'>\n <div className='space-y-6'>\n {eyebrow && <span className={badgeClass}>{eyebrow}</span>}\n <h1\n className={twMerge(\n 'text-4xl font-semibold leading-tight sm:text-5xl',\n isDark ? 'text-white' : 'text-gray-900'\n )}\n >\n {title}\n </h1>\n {description && <p className={twMerge('text-lg leading-relaxed', subdued)}>{description}</p>}\n {actions.length > 0 && <div className='flex flex-wrap gap-3'>{actions.map(renderAction)}</div>}\n {stats.length > 0 && (\n <dl className='grid gap-6 sm:grid-cols-3'>\n {stats.map(stat => (\n <div key={stat.label} className='space-y-1'>\n <dd className={twMerge('text-3xl font-semibold', isDark ? 'text-white' : 'text-gray-900')}>\n {stat.value}\n </dd>\n <dt className={twMerge('text-sm font-medium', statMuted)}>{stat.label}</dt>\n </div>\n ))}\n </dl>\n )}\n </div>\n {image && (\n <div className='relative'>\n <div className={twMerge('relative overflow-hidden backdrop-blur', frameDecoration, frameRadius)}>\n <img\n src={image.src}\n alt={image.alt ?? ''}\n className={twMerge('h-full w-full object-cover', frameRadius)}\n loading='lazy'\n />\n <div className='pointer-events-none absolute inset-0 bg-linear-to-t from-black/30 via-transparent to-transparent' />\n </div>\n </div>\n )}\n </div>\n {logos.length > 0 && (\n <div className='flex flex-wrap items-center gap-6 lg:items-center lg:gap-10'>\n <span className={twMerge('text-sm font-semibold tracking-wide', subdued)}>Duveruji nam</span>\n <div className='flex flex-wrap items-center gap-4 opacity-80'>\n {logos.map(logo => (\n <img\n key={logo.src}\n src={logo.src}\n alt={logo.alt ?? ''}\n className='h-8 w-auto grayscale transition hover:grayscale-0'\n loading='lazy'\n />\n ))}\n </div>\n </div>\n )}\n </div>\n </section>\n );\n};\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"]}
|
package/dist/hero.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 HeroAction = {
|
|
5
|
+
label: string;
|
|
6
|
+
href?: string;
|
|
7
|
+
variant?: 'primary' | 'secondary';
|
|
8
|
+
onClick?: react.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
|
|
9
|
+
};
|
|
10
|
+
type HeroStat = {
|
|
11
|
+
value: string;
|
|
12
|
+
label: string;
|
|
13
|
+
};
|
|
14
|
+
type HeroLogo = {
|
|
15
|
+
src: string;
|
|
16
|
+
alt?: string;
|
|
17
|
+
};
|
|
18
|
+
type HeroImage = {
|
|
19
|
+
src: string;
|
|
20
|
+
alt?: string;
|
|
21
|
+
};
|
|
22
|
+
type HeroProps = react.HTMLAttributes<HTMLElement> & {
|
|
23
|
+
title: react.ReactNode;
|
|
24
|
+
description?: react.ReactNode;
|
|
25
|
+
eyebrow?: string;
|
|
26
|
+
actions?: HeroAction[];
|
|
27
|
+
stats?: HeroStat[];
|
|
28
|
+
logos?: HeroLogo[];
|
|
29
|
+
image?: HeroImage;
|
|
30
|
+
variant?: GlobalVariant;
|
|
31
|
+
};
|
|
32
|
+
declare const Hero: react.FC<HeroProps>;
|
|
33
|
+
|
|
34
|
+
export { type HeroProps, Hero as default };
|
package/dist/hero.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 HeroAction = {
|
|
5
|
+
label: string;
|
|
6
|
+
href?: string;
|
|
7
|
+
variant?: 'primary' | 'secondary';
|
|
8
|
+
onClick?: react.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
|
|
9
|
+
};
|
|
10
|
+
type HeroStat = {
|
|
11
|
+
value: string;
|
|
12
|
+
label: string;
|
|
13
|
+
};
|
|
14
|
+
type HeroLogo = {
|
|
15
|
+
src: string;
|
|
16
|
+
alt?: string;
|
|
17
|
+
};
|
|
18
|
+
type HeroImage = {
|
|
19
|
+
src: string;
|
|
20
|
+
alt?: string;
|
|
21
|
+
};
|
|
22
|
+
type HeroProps = react.HTMLAttributes<HTMLElement> & {
|
|
23
|
+
title: react.ReactNode;
|
|
24
|
+
description?: react.ReactNode;
|
|
25
|
+
eyebrow?: string;
|
|
26
|
+
actions?: HeroAction[];
|
|
27
|
+
stats?: HeroStat[];
|
|
28
|
+
logos?: HeroLogo[];
|
|
29
|
+
image?: HeroImage;
|
|
30
|
+
variant?: GlobalVariant;
|
|
31
|
+
};
|
|
32
|
+
declare const Hero: react.FC<HeroProps>;
|
|
33
|
+
|
|
34
|
+
export { type HeroProps, Hero as default };
|
package/dist/hero.js
ADDED
package/dist/hero.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"hero.js"}
|