@almadar/ui 5.0.0 → 5.1.0
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/avl/index.cjs +2233 -1838
- package/dist/avl/index.js +844 -452
- package/dist/components/atoms/Icon.d.ts +7 -4
- package/dist/components/index.cjs +1967 -1572
- package/dist/components/index.js +807 -415
- package/dist/components/molecules/Breadcrumb.d.ts +4 -4
- package/dist/components/molecules/EmptyState.d.ts +1 -1
- package/dist/components/templates/DashboardLayout.d.ts +1 -1
- package/dist/docs/index.cjs +437 -79
- package/dist/docs/index.d.cts +7 -4
- package/dist/docs/index.js +410 -55
- package/dist/lib/iconFamily.d.ts +41 -0
- package/dist/marketing/index.cjs +462 -106
- package/dist/marketing/index.d.cts +7 -4
- package/dist/marketing/index.js +428 -75
- package/dist/providers/index.cjs +1836 -1441
- package/dist/providers/index.js +811 -419
- package/dist/runtime/index.cjs +1864 -1469
- package/dist/runtime/index.js +804 -412
- package/package.json +4 -1
- package/themes/index.css +5 -0
package/dist/marketing/index.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React8, { createContext, useCallback, useState, useRef, useEffect, useContext, useMemo, useSyncExternalStore, useId } from 'react';
|
|
2
2
|
import { createLogger } from '@almadar/logger';
|
|
3
3
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import * as LucideIcons from 'lucide-react';
|
|
5
|
-
import { Loader2, X
|
|
5
|
+
import { Loader2, X } from 'lucide-react';
|
|
6
|
+
import * as PhosphorIcons from '@phosphor-icons/react';
|
|
7
|
+
import * as TablerIcons from '@tabler/icons-react';
|
|
8
|
+
import * as FaIcons from 'react-icons/fa';
|
|
6
9
|
|
|
7
10
|
// node_modules/clsx/dist/clsx.mjs
|
|
8
11
|
function r(e) {
|
|
@@ -2705,7 +2708,7 @@ var positionStyles = {
|
|
|
2705
2708
|
fixed: "fixed",
|
|
2706
2709
|
sticky: "sticky"
|
|
2707
2710
|
};
|
|
2708
|
-
var Box =
|
|
2711
|
+
var Box = React8.forwardRef(
|
|
2709
2712
|
({
|
|
2710
2713
|
padding,
|
|
2711
2714
|
paddingX,
|
|
@@ -2755,7 +2758,7 @@ var Box = React6.forwardRef(
|
|
|
2755
2758
|
onMouseLeave?.(e);
|
|
2756
2759
|
}, [hoverEvent, eventBus, onMouseLeave]);
|
|
2757
2760
|
const isClickable = action || onClick;
|
|
2758
|
-
return
|
|
2761
|
+
return React8.createElement(
|
|
2759
2762
|
Component,
|
|
2760
2763
|
{
|
|
2761
2764
|
ref,
|
|
@@ -2974,41 +2977,366 @@ var Typography = ({
|
|
|
2974
2977
|
);
|
|
2975
2978
|
};
|
|
2976
2979
|
Typography.displayName = "Typography";
|
|
2977
|
-
var
|
|
2978
|
-
|
|
2979
|
-
"
|
|
2980
|
-
"
|
|
2981
|
-
"
|
|
2982
|
-
"
|
|
2983
|
-
"
|
|
2984
|
-
"
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
"
|
|
2988
|
-
|
|
2980
|
+
var DEFAULT_FAMILY = "lucide";
|
|
2981
|
+
var VALID_FAMILIES = [
|
|
2982
|
+
"lucide",
|
|
2983
|
+
"phosphor-outline",
|
|
2984
|
+
"phosphor-fill",
|
|
2985
|
+
"phosphor-duotone",
|
|
2986
|
+
"tabler",
|
|
2987
|
+
"fa-solid"
|
|
2988
|
+
];
|
|
2989
|
+
function getCurrentIconFamily() {
|
|
2990
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
2991
|
+
return DEFAULT_FAMILY;
|
|
2992
|
+
}
|
|
2993
|
+
const raw = getComputedStyle(document.documentElement).getPropertyValue("--icon-family").trim().replace(/^["']|["']$/g, "");
|
|
2994
|
+
return VALID_FAMILIES.includes(raw) ? raw : DEFAULT_FAMILY;
|
|
2995
|
+
}
|
|
2996
|
+
var cachedFamily = null;
|
|
2997
|
+
var listeners = /* @__PURE__ */ new Set();
|
|
2998
|
+
var observer = null;
|
|
2999
|
+
function ensureObserver() {
|
|
3000
|
+
if (typeof window === "undefined" || observer) return;
|
|
3001
|
+
observer = new MutationObserver(() => {
|
|
3002
|
+
const next = getCurrentIconFamily();
|
|
3003
|
+
if (next !== cachedFamily) {
|
|
3004
|
+
cachedFamily = next;
|
|
3005
|
+
listeners.forEach((fn) => fn());
|
|
3006
|
+
}
|
|
3007
|
+
});
|
|
3008
|
+
observer.observe(document.documentElement, {
|
|
3009
|
+
attributes: true,
|
|
3010
|
+
attributeFilter: ["data-theme", "style"]
|
|
3011
|
+
});
|
|
3012
|
+
cachedFamily = getCurrentIconFamily();
|
|
3013
|
+
}
|
|
3014
|
+
function subscribeIconFamily(notify) {
|
|
3015
|
+
ensureObserver();
|
|
3016
|
+
listeners.add(notify);
|
|
3017
|
+
return () => {
|
|
3018
|
+
listeners.delete(notify);
|
|
3019
|
+
};
|
|
3020
|
+
}
|
|
3021
|
+
function getIconFamilySnapshot() {
|
|
3022
|
+
if (cachedFamily !== null) return cachedFamily;
|
|
3023
|
+
cachedFamily = getCurrentIconFamily();
|
|
3024
|
+
return cachedFamily;
|
|
3025
|
+
}
|
|
3026
|
+
function getIconFamilyServerSnapshot() {
|
|
3027
|
+
return DEFAULT_FAMILY;
|
|
3028
|
+
}
|
|
3029
|
+
function useIconFamily() {
|
|
3030
|
+
return useSyncExternalStore(
|
|
3031
|
+
subscribeIconFamily,
|
|
3032
|
+
getIconFamilySnapshot,
|
|
3033
|
+
getIconFamilyServerSnapshot
|
|
3034
|
+
);
|
|
3035
|
+
}
|
|
2989
3036
|
function kebabToPascal(name) {
|
|
2990
3037
|
return name.split("-").map((part) => {
|
|
2991
3038
|
if (/^\d+$/.test(part)) return part;
|
|
2992
3039
|
return part.charAt(0).toUpperCase() + part.slice(1);
|
|
2993
3040
|
}).join("");
|
|
2994
3041
|
}
|
|
2995
|
-
var
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
|
|
3008
|
-
|
|
3042
|
+
var lucideAliases = {
|
|
3043
|
+
close: LucideIcons.X,
|
|
3044
|
+
trash: LucideIcons.Trash2,
|
|
3045
|
+
loader: LucideIcons.Loader2,
|
|
3046
|
+
stop: LucideIcons.Square,
|
|
3047
|
+
volume: LucideIcons.Volume2,
|
|
3048
|
+
"volume-off": LucideIcons.VolumeX,
|
|
3049
|
+
refresh: LucideIcons.RefreshCw,
|
|
3050
|
+
share: LucideIcons.Share2,
|
|
3051
|
+
"sort-asc": LucideIcons.ArrowUpNarrowWide,
|
|
3052
|
+
"sort-desc": LucideIcons.ArrowDownNarrowWide
|
|
3053
|
+
};
|
|
3054
|
+
function resolveLucide(name) {
|
|
3055
|
+
if (lucideAliases[name]) return lucideAliases[name];
|
|
3056
|
+
const pascal = kebabToPascal(name);
|
|
3057
|
+
const lucideMap = LucideIcons;
|
|
3058
|
+
const direct = lucideMap[pascal];
|
|
3059
|
+
if (direct && typeof direct === "object") return direct;
|
|
3060
|
+
const asIs = lucideMap[name];
|
|
3009
3061
|
if (asIs && typeof asIs === "object") return asIs;
|
|
3010
3062
|
return LucideIcons.HelpCircle;
|
|
3011
3063
|
}
|
|
3064
|
+
var phosphorAliases = {
|
|
3065
|
+
// lucide name → phosphor PascalCase name
|
|
3066
|
+
search: "MagnifyingGlass",
|
|
3067
|
+
close: "X",
|
|
3068
|
+
loader: "CircleNotch",
|
|
3069
|
+
refresh: "ArrowsClockwise",
|
|
3070
|
+
"sort-asc": "SortAscending",
|
|
3071
|
+
"sort-desc": "SortDescending",
|
|
3072
|
+
"chevron-down": "CaretDown",
|
|
3073
|
+
"chevron-up": "CaretUp",
|
|
3074
|
+
"chevron-left": "CaretLeft",
|
|
3075
|
+
"chevron-right": "CaretRight",
|
|
3076
|
+
"help-circle": "Question",
|
|
3077
|
+
"alert-triangle": "Warning",
|
|
3078
|
+
"alert-circle": "WarningCircle",
|
|
3079
|
+
"check-circle": "CheckCircle",
|
|
3080
|
+
"x-circle": "XCircle",
|
|
3081
|
+
edit: "PencilSimple",
|
|
3082
|
+
pencil: "PencilSimple",
|
|
3083
|
+
trash: "Trash",
|
|
3084
|
+
send: "PaperPlaneRight",
|
|
3085
|
+
external: "ArrowSquareOut",
|
|
3086
|
+
"external-link": "ArrowSquareOut",
|
|
3087
|
+
plus: "Plus",
|
|
3088
|
+
minus: "Minus",
|
|
3089
|
+
x: "X",
|
|
3090
|
+
check: "Check",
|
|
3091
|
+
star: "Star",
|
|
3092
|
+
heart: "Heart",
|
|
3093
|
+
home: "House",
|
|
3094
|
+
user: "User",
|
|
3095
|
+
users: "Users",
|
|
3096
|
+
settings: "Gear",
|
|
3097
|
+
menu: "List",
|
|
3098
|
+
"arrow-up": "ArrowUp",
|
|
3099
|
+
"arrow-down": "ArrowDown",
|
|
3100
|
+
"arrow-left": "ArrowLeft",
|
|
3101
|
+
"arrow-right": "ArrowRight",
|
|
3102
|
+
copy: "Copy",
|
|
3103
|
+
download: "DownloadSimple",
|
|
3104
|
+
upload: "UploadSimple",
|
|
3105
|
+
filter: "Funnel",
|
|
3106
|
+
calendar: "Calendar",
|
|
3107
|
+
clock: "Clock",
|
|
3108
|
+
bell: "Bell",
|
|
3109
|
+
mail: "Envelope",
|
|
3110
|
+
envelope: "Envelope",
|
|
3111
|
+
lock: "Lock",
|
|
3112
|
+
unlock: "LockOpen",
|
|
3113
|
+
eye: "Eye",
|
|
3114
|
+
"eye-off": "EyeSlash",
|
|
3115
|
+
more: "DotsThree",
|
|
3116
|
+
"more-vertical": "DotsThreeVertical",
|
|
3117
|
+
info: "Info",
|
|
3118
|
+
warning: "Warning",
|
|
3119
|
+
error: "WarningCircle"
|
|
3120
|
+
};
|
|
3121
|
+
function resolvePhosphor(name, weight) {
|
|
3122
|
+
const target = phosphorAliases[name] ?? kebabToPascal(name);
|
|
3123
|
+
const map = PhosphorIcons;
|
|
3124
|
+
const PhosphorComp = map[target];
|
|
3125
|
+
if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
|
|
3126
|
+
const Component = PhosphorComp;
|
|
3127
|
+
const Adapter = (props) => /* @__PURE__ */ jsx(
|
|
3128
|
+
Component,
|
|
3129
|
+
{
|
|
3130
|
+
weight,
|
|
3131
|
+
className: props.className,
|
|
3132
|
+
style: props.style,
|
|
3133
|
+
size: props.size ?? "1em"
|
|
3134
|
+
}
|
|
3135
|
+
);
|
|
3136
|
+
Adapter.displayName = `Phosphor.${target}.${weight}`;
|
|
3137
|
+
return Adapter;
|
|
3138
|
+
}
|
|
3139
|
+
var tablerAliases = {
|
|
3140
|
+
// lucide name → tabler suffix (after the `Icon` prefix)
|
|
3141
|
+
search: "Search",
|
|
3142
|
+
close: "X",
|
|
3143
|
+
loader: "Loader2",
|
|
3144
|
+
refresh: "Refresh",
|
|
3145
|
+
"sort-asc": "SortAscending",
|
|
3146
|
+
"sort-desc": "SortDescending",
|
|
3147
|
+
"chevron-down": "ChevronDown",
|
|
3148
|
+
"chevron-up": "ChevronUp",
|
|
3149
|
+
"chevron-left": "ChevronLeft",
|
|
3150
|
+
"chevron-right": "ChevronRight",
|
|
3151
|
+
"help-circle": "HelpCircle",
|
|
3152
|
+
"alert-triangle": "AlertTriangle",
|
|
3153
|
+
"alert-circle": "AlertCircle",
|
|
3154
|
+
"check-circle": "CircleCheck",
|
|
3155
|
+
"x-circle": "CircleX",
|
|
3156
|
+
edit: "Pencil",
|
|
3157
|
+
trash: "Trash",
|
|
3158
|
+
send: "Send",
|
|
3159
|
+
external: "ExternalLink",
|
|
3160
|
+
plus: "Plus",
|
|
3161
|
+
x: "X",
|
|
3162
|
+
check: "Check",
|
|
3163
|
+
star: "Star",
|
|
3164
|
+
heart: "Heart",
|
|
3165
|
+
home: "Home",
|
|
3166
|
+
user: "User",
|
|
3167
|
+
users: "Users",
|
|
3168
|
+
settings: "Settings",
|
|
3169
|
+
menu: "Menu2",
|
|
3170
|
+
copy: "Copy",
|
|
3171
|
+
download: "Download",
|
|
3172
|
+
upload: "Upload",
|
|
3173
|
+
filter: "Filter",
|
|
3174
|
+
calendar: "Calendar",
|
|
3175
|
+
clock: "Clock",
|
|
3176
|
+
bell: "Bell",
|
|
3177
|
+
mail: "Mail",
|
|
3178
|
+
envelope: "Mail",
|
|
3179
|
+
lock: "Lock",
|
|
3180
|
+
unlock: "LockOpen",
|
|
3181
|
+
eye: "Eye",
|
|
3182
|
+
"eye-off": "EyeOff",
|
|
3183
|
+
more: "Dots",
|
|
3184
|
+
"more-vertical": "DotsVertical",
|
|
3185
|
+
info: "InfoCircle"
|
|
3186
|
+
};
|
|
3187
|
+
function resolveTabler(name) {
|
|
3188
|
+
const suffix = tablerAliases[name] ?? kebabToPascal(name);
|
|
3189
|
+
const target = `Icon${suffix}`;
|
|
3190
|
+
const map = TablerIcons;
|
|
3191
|
+
const TablerComp = map[target];
|
|
3192
|
+
if (!TablerComp || typeof TablerComp !== "object") return null;
|
|
3193
|
+
const Component = TablerComp;
|
|
3194
|
+
const Adapter = (props) => /* @__PURE__ */ jsx(
|
|
3195
|
+
Component,
|
|
3196
|
+
{
|
|
3197
|
+
stroke: props.strokeWidth ?? 1.5,
|
|
3198
|
+
className: props.className,
|
|
3199
|
+
style: props.style,
|
|
3200
|
+
size: props.size ?? 24
|
|
3201
|
+
}
|
|
3202
|
+
);
|
|
3203
|
+
Adapter.displayName = `Tabler.${target}`;
|
|
3204
|
+
return Adapter;
|
|
3205
|
+
}
|
|
3206
|
+
var faAliases = {
|
|
3207
|
+
// lucide name → fa-solid suffix (after the `Fa` prefix)
|
|
3208
|
+
search: "Search",
|
|
3209
|
+
close: "Times",
|
|
3210
|
+
x: "Times",
|
|
3211
|
+
loader: "Spinner",
|
|
3212
|
+
refresh: "Sync",
|
|
3213
|
+
"sort-asc": "SortAmountUp",
|
|
3214
|
+
"sort-desc": "SortAmountDown",
|
|
3215
|
+
"chevron-down": "ChevronDown",
|
|
3216
|
+
"chevron-up": "ChevronUp",
|
|
3217
|
+
"chevron-left": "ChevronLeft",
|
|
3218
|
+
"chevron-right": "ChevronRight",
|
|
3219
|
+
"help-circle": "QuestionCircle",
|
|
3220
|
+
"alert-triangle": "ExclamationTriangle",
|
|
3221
|
+
"alert-circle": "ExclamationCircle",
|
|
3222
|
+
"check-circle": "CheckCircle",
|
|
3223
|
+
"x-circle": "TimesCircle",
|
|
3224
|
+
edit: "Edit",
|
|
3225
|
+
pencil: "Pencil",
|
|
3226
|
+
trash: "Trash",
|
|
3227
|
+
send: "PaperPlane",
|
|
3228
|
+
external: "ExternalLinkAlt",
|
|
3229
|
+
plus: "Plus",
|
|
3230
|
+
minus: "Minus",
|
|
3231
|
+
check: "Check",
|
|
3232
|
+
star: "Star",
|
|
3233
|
+
heart: "Heart",
|
|
3234
|
+
home: "Home",
|
|
3235
|
+
user: "User",
|
|
3236
|
+
users: "Users",
|
|
3237
|
+
settings: "Cog",
|
|
3238
|
+
menu: "Bars",
|
|
3239
|
+
"arrow-up": "ArrowUp",
|
|
3240
|
+
"arrow-down": "ArrowDown",
|
|
3241
|
+
"arrow-left": "ArrowLeft",
|
|
3242
|
+
"arrow-right": "ArrowRight",
|
|
3243
|
+
copy: "Copy",
|
|
3244
|
+
download: "Download",
|
|
3245
|
+
upload: "Upload",
|
|
3246
|
+
filter: "Filter",
|
|
3247
|
+
calendar: "Calendar",
|
|
3248
|
+
clock: "Clock",
|
|
3249
|
+
bell: "Bell",
|
|
3250
|
+
mail: "Envelope",
|
|
3251
|
+
envelope: "Envelope",
|
|
3252
|
+
lock: "Lock",
|
|
3253
|
+
unlock: "LockOpen",
|
|
3254
|
+
eye: "Eye",
|
|
3255
|
+
"eye-off": "EyeSlash",
|
|
3256
|
+
more: "EllipsisH",
|
|
3257
|
+
"more-vertical": "EllipsisV",
|
|
3258
|
+
info: "InfoCircle",
|
|
3259
|
+
warning: "ExclamationTriangle"
|
|
3260
|
+
};
|
|
3261
|
+
function resolveFa(name) {
|
|
3262
|
+
const suffix = faAliases[name] ?? kebabToPascal(name);
|
|
3263
|
+
const target = `Fa${suffix}`;
|
|
3264
|
+
const map = FaIcons;
|
|
3265
|
+
const FaComp = map[target];
|
|
3266
|
+
if (!FaComp || typeof FaComp !== "function") return null;
|
|
3267
|
+
const Component = FaComp;
|
|
3268
|
+
const Adapter = (props) => /* @__PURE__ */ jsx(
|
|
3269
|
+
Component,
|
|
3270
|
+
{
|
|
3271
|
+
className: props.className,
|
|
3272
|
+
style: props.style,
|
|
3273
|
+
size: props.size ?? "1em"
|
|
3274
|
+
}
|
|
3275
|
+
);
|
|
3276
|
+
Adapter.displayName = `Fa.${target}`;
|
|
3277
|
+
return Adapter;
|
|
3278
|
+
}
|
|
3279
|
+
var warned = /* @__PURE__ */ new Set();
|
|
3280
|
+
function warnFallback(name, family) {
|
|
3281
|
+
const key = `${family}::${name}`;
|
|
3282
|
+
if (warned.has(key)) return;
|
|
3283
|
+
warned.add(key);
|
|
3284
|
+
if (typeof console !== "undefined") {
|
|
3285
|
+
console.warn(
|
|
3286
|
+
`[iconFamily] No '${name}' mapping in family '${family}'; falling back to lucide. Add an alias in lib/iconFamily.ts.`
|
|
3287
|
+
);
|
|
3288
|
+
}
|
|
3289
|
+
}
|
|
3290
|
+
function makeLucideAdapter(name) {
|
|
3291
|
+
const LucideComp = resolveLucide(name);
|
|
3292
|
+
const Adapter = (props) => /* @__PURE__ */ jsx(
|
|
3293
|
+
LucideComp,
|
|
3294
|
+
{
|
|
3295
|
+
className: props.className,
|
|
3296
|
+
strokeWidth: props.strokeWidth,
|
|
3297
|
+
style: props.style,
|
|
3298
|
+
size: props.size
|
|
3299
|
+
}
|
|
3300
|
+
);
|
|
3301
|
+
Adapter.displayName = `Lucide.${name}`;
|
|
3302
|
+
return Adapter;
|
|
3303
|
+
}
|
|
3304
|
+
function resolveIconForFamily(name, family) {
|
|
3305
|
+
switch (family) {
|
|
3306
|
+
case "lucide":
|
|
3307
|
+
return makeLucideAdapter(name);
|
|
3308
|
+
case "phosphor-outline": {
|
|
3309
|
+
const p = resolvePhosphor(name, "regular");
|
|
3310
|
+
if (p) return p;
|
|
3311
|
+
warnFallback(name, family);
|
|
3312
|
+
return makeLucideAdapter(name);
|
|
3313
|
+
}
|
|
3314
|
+
case "phosphor-fill": {
|
|
3315
|
+
const p = resolvePhosphor(name, "fill");
|
|
3316
|
+
if (p) return p;
|
|
3317
|
+
warnFallback(name, family);
|
|
3318
|
+
return makeLucideAdapter(name);
|
|
3319
|
+
}
|
|
3320
|
+
case "phosphor-duotone": {
|
|
3321
|
+
const p = resolvePhosphor(name, "duotone");
|
|
3322
|
+
if (p) return p;
|
|
3323
|
+
warnFallback(name, family);
|
|
3324
|
+
return makeLucideAdapter(name);
|
|
3325
|
+
}
|
|
3326
|
+
case "tabler": {
|
|
3327
|
+
const t = resolveTabler(name);
|
|
3328
|
+
if (t) return t;
|
|
3329
|
+
warnFallback(name, family);
|
|
3330
|
+
return makeLucideAdapter(name);
|
|
3331
|
+
}
|
|
3332
|
+
case "fa-solid": {
|
|
3333
|
+
const f3 = resolveFa(name);
|
|
3334
|
+
if (f3) return f3;
|
|
3335
|
+
warnFallback(name, family);
|
|
3336
|
+
return makeLucideAdapter(name);
|
|
3337
|
+
}
|
|
3338
|
+
}
|
|
3339
|
+
}
|
|
3012
3340
|
var sizeClasses = {
|
|
3013
3341
|
xs: "w-3 h-3",
|
|
3014
3342
|
sm: "w-4 h-4",
|
|
@@ -3031,22 +3359,50 @@ var Icon = ({
|
|
|
3031
3359
|
strokeWidth,
|
|
3032
3360
|
style
|
|
3033
3361
|
}) => {
|
|
3034
|
-
const
|
|
3362
|
+
const family = useIconFamily();
|
|
3363
|
+
const RenderedComponent = React8.useMemo(() => {
|
|
3364
|
+
if (icon) return null;
|
|
3365
|
+
return name ? resolveIconForFamily(name, family) : null;
|
|
3366
|
+
}, [icon, name, family]);
|
|
3035
3367
|
const effectiveStrokeWidth = strokeWidth ?? void 0;
|
|
3368
|
+
const inlineStyle = {
|
|
3369
|
+
...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
|
|
3370
|
+
...style
|
|
3371
|
+
};
|
|
3372
|
+
const composedClassName = cn(
|
|
3373
|
+
sizeClasses[size],
|
|
3374
|
+
animationClasses[animation],
|
|
3375
|
+
color ? color : "text-current",
|
|
3376
|
+
className
|
|
3377
|
+
);
|
|
3378
|
+
if (icon) {
|
|
3379
|
+
const Direct = icon;
|
|
3380
|
+
return /* @__PURE__ */ jsx(
|
|
3381
|
+
Direct,
|
|
3382
|
+
{
|
|
3383
|
+
className: composedClassName,
|
|
3384
|
+
strokeWidth: effectiveStrokeWidth,
|
|
3385
|
+
style: inlineStyle
|
|
3386
|
+
}
|
|
3387
|
+
);
|
|
3388
|
+
}
|
|
3389
|
+
if (RenderedComponent) {
|
|
3390
|
+
return /* @__PURE__ */ jsx(
|
|
3391
|
+
RenderedComponent,
|
|
3392
|
+
{
|
|
3393
|
+
className: composedClassName,
|
|
3394
|
+
strokeWidth: effectiveStrokeWidth,
|
|
3395
|
+
style: inlineStyle
|
|
3396
|
+
}
|
|
3397
|
+
);
|
|
3398
|
+
}
|
|
3399
|
+
const Fallback = LucideIcons.HelpCircle;
|
|
3036
3400
|
return /* @__PURE__ */ jsx(
|
|
3037
|
-
|
|
3401
|
+
Fallback,
|
|
3038
3402
|
{
|
|
3039
|
-
className:
|
|
3040
|
-
sizeClasses[size],
|
|
3041
|
-
animationClasses[animation],
|
|
3042
|
-
color ? color : "text-current",
|
|
3043
|
-
className
|
|
3044
|
-
),
|
|
3403
|
+
className: composedClassName,
|
|
3045
3404
|
strokeWidth: effectiveStrokeWidth,
|
|
3046
|
-
style:
|
|
3047
|
-
...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
|
|
3048
|
-
...style
|
|
3049
|
-
}
|
|
3405
|
+
style: inlineStyle
|
|
3050
3406
|
}
|
|
3051
3407
|
);
|
|
3052
3408
|
};
|
|
@@ -3114,14 +3470,13 @@ var iconSizeStyles = {
|
|
|
3114
3470
|
function resolveIconProp(value, sizeClass) {
|
|
3115
3471
|
if (!value) return null;
|
|
3116
3472
|
if (typeof value === "string") {
|
|
3117
|
-
|
|
3118
|
-
return Resolved ? /* @__PURE__ */ jsx(Resolved, { className: sizeClass }) : null;
|
|
3473
|
+
return /* @__PURE__ */ jsx(Icon, { name: value, className: sizeClass });
|
|
3119
3474
|
}
|
|
3120
3475
|
if (typeof value === "function") {
|
|
3121
3476
|
const IconComp = value;
|
|
3122
3477
|
return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
|
|
3123
3478
|
}
|
|
3124
|
-
if (
|
|
3479
|
+
if (React8.isValidElement(value)) {
|
|
3125
3480
|
return value;
|
|
3126
3481
|
}
|
|
3127
3482
|
if (typeof value === "object" && value !== null && "render" in value) {
|
|
@@ -3130,7 +3485,7 @@ function resolveIconProp(value, sizeClass) {
|
|
|
3130
3485
|
}
|
|
3131
3486
|
return value;
|
|
3132
3487
|
}
|
|
3133
|
-
var Button =
|
|
3488
|
+
var Button = React8.forwardRef(
|
|
3134
3489
|
({
|
|
3135
3490
|
className,
|
|
3136
3491
|
variant = "primary",
|
|
@@ -3226,13 +3581,10 @@ var sizeStyles3 = {
|
|
|
3226
3581
|
md: "px-2.5 py-1 text-sm",
|
|
3227
3582
|
lg: "px-3 py-1.5 text-base"
|
|
3228
3583
|
};
|
|
3229
|
-
var Badge =
|
|
3584
|
+
var Badge = React8.forwardRef(
|
|
3230
3585
|
({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
|
|
3231
3586
|
const iconSizes = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
|
|
3232
|
-
const resolvedIcon = typeof icon === "string" ? (
|
|
3233
|
-
const I = resolveIcon(icon);
|
|
3234
|
-
return I ? /* @__PURE__ */ jsx(I, { className: iconSizes[size] }) : null;
|
|
3235
|
-
})() : icon;
|
|
3587
|
+
const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes[size] }) : icon;
|
|
3236
3588
|
return /* @__PURE__ */ jsxs(
|
|
3237
3589
|
"span",
|
|
3238
3590
|
{
|
|
@@ -3316,7 +3668,7 @@ var shadowStyles2 = {
|
|
|
3316
3668
|
md: "shadow",
|
|
3317
3669
|
lg: "shadow-elevation-dialog"
|
|
3318
3670
|
};
|
|
3319
|
-
var Card =
|
|
3671
|
+
var Card = React8.forwardRef(
|
|
3320
3672
|
({
|
|
3321
3673
|
className,
|
|
3322
3674
|
variant = "bordered",
|
|
@@ -3352,9 +3704,9 @@ var Card = React6.forwardRef(
|
|
|
3352
3704
|
}
|
|
3353
3705
|
);
|
|
3354
3706
|
Card.displayName = "Card";
|
|
3355
|
-
var CardHeader =
|
|
3707
|
+
var CardHeader = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
|
|
3356
3708
|
CardHeader.displayName = "CardHeader";
|
|
3357
|
-
var CardTitle =
|
|
3709
|
+
var CardTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
3358
3710
|
"h3",
|
|
3359
3711
|
{
|
|
3360
3712
|
ref,
|
|
@@ -3367,11 +3719,11 @@ var CardTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__
|
|
|
3367
3719
|
}
|
|
3368
3720
|
));
|
|
3369
3721
|
CardTitle.displayName = "CardTitle";
|
|
3370
|
-
var CardContent =
|
|
3722
|
+
var CardContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
|
|
3371
3723
|
CardContent.displayName = "CardContent";
|
|
3372
3724
|
var CardBody = CardContent;
|
|
3373
3725
|
CardBody.displayName = "CardBody";
|
|
3374
|
-
var CardFooter =
|
|
3726
|
+
var CardFooter = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
3375
3727
|
"div",
|
|
3376
3728
|
{
|
|
3377
3729
|
ref,
|
|
@@ -3528,7 +3880,7 @@ var paddingClasses = {
|
|
|
3528
3880
|
md: "py-16",
|
|
3529
3881
|
lg: "py-24"
|
|
3530
3882
|
};
|
|
3531
|
-
var ContentSection =
|
|
3883
|
+
var ContentSection = React8.forwardRef(
|
|
3532
3884
|
({ children, background = "default", padding = "lg", id, className }, ref) => {
|
|
3533
3885
|
return /* @__PURE__ */ jsx(
|
|
3534
3886
|
Box,
|
|
@@ -3988,7 +4340,7 @@ var PricingCard = ({
|
|
|
3988
4340
|
/* @__PURE__ */ jsx(
|
|
3989
4341
|
Icon,
|
|
3990
4342
|
{
|
|
3991
|
-
|
|
4343
|
+
name: "check",
|
|
3992
4344
|
size: "sm",
|
|
3993
4345
|
className: "flex-shrink-0 text-success"
|
|
3994
4346
|
}
|
|
@@ -4124,7 +4476,7 @@ var StepFlow = ({
|
|
|
4124
4476
|
className
|
|
4125
4477
|
}) => {
|
|
4126
4478
|
if (orientation === "vertical") {
|
|
4127
|
-
return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(
|
|
4479
|
+
return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React8.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
|
|
4128
4480
|
/* @__PURE__ */ jsxs(VStack, { gap: "none", align: "center", children: [
|
|
4129
4481
|
/* @__PURE__ */ jsx(StepCircle, { step, index }),
|
|
4130
4482
|
showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "w-px h-8 bg-border" })
|
|
@@ -4135,7 +4487,7 @@ var StepFlow = ({
|
|
|
4135
4487
|
] })
|
|
4136
4488
|
] }) }, index)) });
|
|
4137
4489
|
}
|
|
4138
|
-
return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(
|
|
4490
|
+
return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
|
|
4139
4491
|
/* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
|
|
4140
4492
|
/* @__PURE__ */ jsx(StepCircle, { step, index }),
|
|
4141
4493
|
/* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
|
|
@@ -4333,7 +4685,7 @@ var Avatar = ({
|
|
|
4333
4685
|
alt,
|
|
4334
4686
|
name,
|
|
4335
4687
|
initials: providedInitials,
|
|
4336
|
-
icon:
|
|
4688
|
+
icon: IconComponent,
|
|
4337
4689
|
size = "md",
|
|
4338
4690
|
status,
|
|
4339
4691
|
badge,
|
|
@@ -4346,7 +4698,7 @@ var Avatar = ({
|
|
|
4346
4698
|
const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
|
|
4347
4699
|
const hasImage = !!src;
|
|
4348
4700
|
const hasInitials = !!initials;
|
|
4349
|
-
const hasIcon = !!
|
|
4701
|
+
const hasIcon = !!IconComponent;
|
|
4350
4702
|
const getInitialsBackground = () => "bg-primary text-primary-foreground";
|
|
4351
4703
|
const isClickable = action || onClick;
|
|
4352
4704
|
const handleClick = () => {
|
|
@@ -4390,8 +4742,8 @@ var Avatar = ({
|
|
|
4390
4742
|
),
|
|
4391
4743
|
children: initials.substring(0, 2).toUpperCase()
|
|
4392
4744
|
}
|
|
4393
|
-
) : hasIcon ? /* @__PURE__ */ jsx(
|
|
4394
|
-
|
|
4745
|
+
) : hasIcon && IconComponent ? /* @__PURE__ */ jsx(
|
|
4746
|
+
IconComponent,
|
|
4395
4747
|
{
|
|
4396
4748
|
className: cn(
|
|
4397
4749
|
"text-foreground",
|
|
@@ -4399,8 +4751,9 @@ var Avatar = ({
|
|
|
4399
4751
|
)
|
|
4400
4752
|
}
|
|
4401
4753
|
) : /* @__PURE__ */ jsx(
|
|
4402
|
-
|
|
4754
|
+
Icon,
|
|
4403
4755
|
{
|
|
4756
|
+
name: "user",
|
|
4404
4757
|
className: cn(
|
|
4405
4758
|
"text-foreground",
|
|
4406
4759
|
iconSizeClasses[size]
|
|
@@ -4678,18 +5031,18 @@ var AnimatedCounter = ({
|
|
|
4678
5031
|
if (hasAnimated) return;
|
|
4679
5032
|
const el = ref.current;
|
|
4680
5033
|
if (!el) return;
|
|
4681
|
-
const
|
|
5034
|
+
const observer2 = new IntersectionObserver(
|
|
4682
5035
|
(entries) => {
|
|
4683
5036
|
if (entries[0].isIntersecting) {
|
|
4684
5037
|
setHasAnimated(true);
|
|
4685
5038
|
animate();
|
|
4686
|
-
|
|
5039
|
+
observer2.disconnect();
|
|
4687
5040
|
}
|
|
4688
5041
|
},
|
|
4689
5042
|
{ threshold: 0.3 }
|
|
4690
5043
|
);
|
|
4691
|
-
|
|
4692
|
-
return () =>
|
|
5044
|
+
observer2.observe(el);
|
|
5045
|
+
return () => observer2.disconnect();
|
|
4693
5046
|
}, [hasAnimated, animate]);
|
|
4694
5047
|
return /* @__PURE__ */ jsxs(Box, { ref, className: cn("flex flex-col items-center gap-1 p-4", className), children: [
|
|
4695
5048
|
/* @__PURE__ */ jsx(
|
|
@@ -4724,7 +5077,7 @@ var animatedStyles = {
|
|
|
4724
5077
|
"scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
|
|
4725
5078
|
"none": {}
|
|
4726
5079
|
};
|
|
4727
|
-
var AnimatedReveal =
|
|
5080
|
+
var AnimatedReveal = React8.forwardRef(
|
|
4728
5081
|
({
|
|
4729
5082
|
trigger = "scroll",
|
|
4730
5083
|
animation = "fade-up",
|
|
@@ -4754,7 +5107,7 @@ var AnimatedReveal = React6.forwardRef(
|
|
|
4754
5107
|
if (trigger !== "scroll") return;
|
|
4755
5108
|
const el = internalRef.current;
|
|
4756
5109
|
if (!el) return;
|
|
4757
|
-
const
|
|
5110
|
+
const observer2 = new IntersectionObserver(
|
|
4758
5111
|
([entry]) => {
|
|
4759
5112
|
if (entry.isIntersecting) {
|
|
4760
5113
|
if (once && hasAnimated.current) return;
|
|
@@ -4766,8 +5119,8 @@ var AnimatedReveal = React6.forwardRef(
|
|
|
4766
5119
|
},
|
|
4767
5120
|
{ threshold }
|
|
4768
5121
|
);
|
|
4769
|
-
|
|
4770
|
-
return () =>
|
|
5122
|
+
observer2.observe(el);
|
|
5123
|
+
return () => observer2.disconnect();
|
|
4771
5124
|
}, [trigger, threshold, once]);
|
|
4772
5125
|
const handleMouseEnter = trigger === "hover" ? () => setIsAnimated(true) : void 0;
|
|
4773
5126
|
const handleMouseLeave = trigger === "hover" ? () => {
|
|
@@ -4877,7 +5230,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
|
|
|
4877
5230
|
el.style.opacity = animate ? "1" : "0";
|
|
4878
5231
|
});
|
|
4879
5232
|
}
|
|
4880
|
-
var AnimatedGraphic =
|
|
5233
|
+
var AnimatedGraphic = React8.forwardRef(
|
|
4881
5234
|
({
|
|
4882
5235
|
src,
|
|
4883
5236
|
svgContent,
|
|
@@ -4900,7 +5253,7 @@ var AnimatedGraphic = React6.forwardRef(
|
|
|
4900
5253
|
const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
|
|
4901
5254
|
const resolvedSvg = svgContent ?? fetchedSvg;
|
|
4902
5255
|
const prevAnimateRef = useRef(animate);
|
|
4903
|
-
const setRef =
|
|
5256
|
+
const setRef = React8.useCallback(
|
|
4904
5257
|
(node) => {
|
|
4905
5258
|
containerRef.current = node;
|
|
4906
5259
|
if (typeof ref === "function") ref(node);
|