@lindle/linoardo 1.0.21 → 1.0.23
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 +2 -1
- package/dist/button.cjs.map +1 -1
- package/dist/button.js +1 -1
- package/dist/chunk-67USTSXI.js +214 -0
- package/dist/chunk-67USTSXI.js.map +1 -0
- package/dist/{chunk-RFPNVLAD.js → chunk-F2G2JRKA.js} +4 -3
- package/dist/chunk-F2G2JRKA.js.map +1 -0
- package/dist/{chunk-QRBJFDV5.js → chunk-NEYVJE67.js} +3 -3
- package/dist/{chunk-QRBJFDV5.js.map → chunk-NEYVJE67.js.map} +1 -1
- package/dist/chunk-Z5A2OIDI.js +312 -0
- package/dist/chunk-Z5A2OIDI.js.map +1 -0
- package/dist/index.cjs +697 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +56 -2
- package/dist/index.d.ts +56 -2
- package/dist/index.js +186 -2
- package/dist/index.js.map +1 -1
- package/dist/notification.cjs +236 -0
- package/dist/notification.cjs.map +1 -0
- package/dist/notification.d.cts +34 -0
- package/dist/notification.d.ts +34 -0
- package/dist/notification.js +3 -0
- package/dist/notification.js.map +1 -0
- package/dist/profileCard.cjs +2 -1
- package/dist/profileCard.cjs.map +1 -1
- package/dist/profileCard.js +2 -2
- package/dist/progress.cjs +314 -0
- package/dist/progress.cjs.map +1 -0
- package/dist/progress.d.cts +30 -0
- package/dist/progress.d.ts +30 -0
- package/dist/progress.js +3 -0
- package/dist/progress.js.map +1 -0
- package/dist/styles.css +600 -0
- package/package.json +20 -1
- package/dist/chunk-RFPNVLAD.js.map +0 -1
package/dist/index.d.cts
CHANGED
|
@@ -6,6 +6,8 @@ export { default as ExpansionPanel } from './expansion-panel.cjs';
|
|
|
6
6
|
export { default as Dialog, DialogProps } from './dialog.cjs';
|
|
7
7
|
export { default as ToolTip, ToolTipPlacement, ToolTipProps } from './tooltip.cjs';
|
|
8
8
|
export { default as Card, CardMediaProps, CardProps, CardSectionProps, CardTextProps } from './card.cjs';
|
|
9
|
+
import * as react from 'react';
|
|
10
|
+
import { G as GlobalVariant } from './global.types-E2uVLemv.cjs';
|
|
9
11
|
export { default as Masonry, MasonryProps, MasonryRenderItem } from './masonry.cjs';
|
|
10
12
|
export { default as Hero, HeroProps } from './hero.cjs';
|
|
11
13
|
export { Avatar, Badge, default as ProfileCard, ProfileCardLayout, ProfileCardProps, SocialLink } from './profileCard.cjs';
|
|
@@ -14,8 +16,60 @@ export { default as Select, SelectOption, SelectOptionObject, SelectProps } from
|
|
|
14
16
|
export { default as Slider } from './slider.cjs';
|
|
15
17
|
export { default as Switch } from './switch.cjs';
|
|
16
18
|
export { default as Icon } from './icon.cjs';
|
|
19
|
+
export { default as Notification, NotificationArgs, NotificationPlacement, NotificationProps, NotificationType, NotificationVariant } from './notification.cjs';
|
|
20
|
+
export { default as Progress, ProgressProps, ProgressStatus, ProgressType } from './progress.cjs';
|
|
17
21
|
export { e as ExpansionPanelDensity, E as ExpansionPanelItem, a as ExpansionPanelItemProps, b as ExpansionPanelProps, f as ExpansionPanelRounded, c as ExpansionPanelValue, d as ExpansionPanelVariant } from './ExpansionPanelItem-Bd6ZWGkR.cjs';
|
|
18
22
|
export { c as ListDensity, L as ListItem, a as ListItemProps, d as ListLines, e as ListRounded, b as ListVariant } from './index-B5n8tN2G.cjs';
|
|
19
|
-
import 'react';
|
|
20
|
-
import './global.types-E2uVLemv.cjs';
|
|
21
23
|
import './types-BCqIOkp1.cjs';
|
|
24
|
+
|
|
25
|
+
type BlockBlur = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
26
|
+
type BlockProps = react.HTMLAttributes<HTMLDivElement> & {
|
|
27
|
+
/**
|
|
28
|
+
* Visual variant shared across Block components.
|
|
29
|
+
* @default 'solid'
|
|
30
|
+
*/
|
|
31
|
+
variant?: GlobalVariant;
|
|
32
|
+
/**
|
|
33
|
+
* Backdrop blur intensity mapped to Tailwind's `backdrop-blur-*` utilities.
|
|
34
|
+
* @default 'sm'
|
|
35
|
+
*/
|
|
36
|
+
blur?: BlockBlur;
|
|
37
|
+
/**
|
|
38
|
+
* Adds hover + focus ring styles for interactive usage.
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
interactive?: boolean;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Glass-like block container with blur and shared variant styling.
|
|
46
|
+
*/
|
|
47
|
+
declare const Block: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & {
|
|
48
|
+
variant?: GlobalVariant;
|
|
49
|
+
blur?: BlockBlur;
|
|
50
|
+
interactive?: boolean;
|
|
51
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
52
|
+
|
|
53
|
+
type AppBarNavItem = {
|
|
54
|
+
label: react.ReactNode;
|
|
55
|
+
href?: string;
|
|
56
|
+
active?: boolean;
|
|
57
|
+
onClick?: react.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
|
|
58
|
+
};
|
|
59
|
+
type AppBarProps = react.HTMLAttributes<HTMLElement> & {
|
|
60
|
+
title?: react.ReactNode;
|
|
61
|
+
logo?: string;
|
|
62
|
+
logoAlt?: string;
|
|
63
|
+
brandHref?: string;
|
|
64
|
+
navigation?: AppBarNavItem[];
|
|
65
|
+
actions?: react.ReactNode;
|
|
66
|
+
position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
|
|
67
|
+
color?: 'primary' | 'surface' | 'muted' | 'dark' | 'transparent';
|
|
68
|
+
dense?: boolean;
|
|
69
|
+
elevated?: boolean;
|
|
70
|
+
contained?: boolean;
|
|
71
|
+
titlePosition?: 'start' | 'center' | 'end';
|
|
72
|
+
};
|
|
73
|
+
declare const AppBar: react.FC<AppBarProps>;
|
|
74
|
+
|
|
75
|
+
export { AppBar, type AppBarNavItem, type AppBarProps, Block, type BlockBlur, type BlockProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -6,6 +6,8 @@ export { default as ExpansionPanel } from './expansion-panel.js';
|
|
|
6
6
|
export { default as Dialog, DialogProps } from './dialog.js';
|
|
7
7
|
export { default as ToolTip, ToolTipPlacement, ToolTipProps } from './tooltip.js';
|
|
8
8
|
export { default as Card, CardMediaProps, CardProps, CardSectionProps, CardTextProps } from './card.js';
|
|
9
|
+
import * as react from 'react';
|
|
10
|
+
import { G as GlobalVariant } from './global.types-E2uVLemv.js';
|
|
9
11
|
export { default as Masonry, MasonryProps, MasonryRenderItem } from './masonry.js';
|
|
10
12
|
export { default as Hero, HeroProps } from './hero.js';
|
|
11
13
|
export { Avatar, Badge, default as ProfileCard, ProfileCardLayout, ProfileCardProps, SocialLink } from './profileCard.js';
|
|
@@ -14,8 +16,60 @@ export { default as Select, SelectOption, SelectOptionObject, SelectProps } from
|
|
|
14
16
|
export { default as Slider } from './slider.js';
|
|
15
17
|
export { default as Switch } from './switch.js';
|
|
16
18
|
export { default as Icon } from './icon.js';
|
|
19
|
+
export { default as Notification, NotificationArgs, NotificationPlacement, NotificationProps, NotificationType, NotificationVariant } from './notification.js';
|
|
20
|
+
export { default as Progress, ProgressProps, ProgressStatus, ProgressType } from './progress.js';
|
|
17
21
|
export { e as ExpansionPanelDensity, E as ExpansionPanelItem, a as ExpansionPanelItemProps, b as ExpansionPanelProps, f as ExpansionPanelRounded, c as ExpansionPanelValue, d as ExpansionPanelVariant } from './ExpansionPanelItem-DOjgDeB6.js';
|
|
18
22
|
export { c as ListDensity, L as ListItem, a as ListItemProps, d as ListLines, e as ListRounded, b as ListVariant } from './index-D4-O-oJt.js';
|
|
19
|
-
import 'react';
|
|
20
|
-
import './global.types-E2uVLemv.js';
|
|
21
23
|
import './types-ChXN4u7x.js';
|
|
24
|
+
|
|
25
|
+
type BlockBlur = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
26
|
+
type BlockProps = react.HTMLAttributes<HTMLDivElement> & {
|
|
27
|
+
/**
|
|
28
|
+
* Visual variant shared across Block components.
|
|
29
|
+
* @default 'solid'
|
|
30
|
+
*/
|
|
31
|
+
variant?: GlobalVariant;
|
|
32
|
+
/**
|
|
33
|
+
* Backdrop blur intensity mapped to Tailwind's `backdrop-blur-*` utilities.
|
|
34
|
+
* @default 'sm'
|
|
35
|
+
*/
|
|
36
|
+
blur?: BlockBlur;
|
|
37
|
+
/**
|
|
38
|
+
* Adds hover + focus ring styles for interactive usage.
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
interactive?: boolean;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Glass-like block container with blur and shared variant styling.
|
|
46
|
+
*/
|
|
47
|
+
declare const Block: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & {
|
|
48
|
+
variant?: GlobalVariant;
|
|
49
|
+
blur?: BlockBlur;
|
|
50
|
+
interactive?: boolean;
|
|
51
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
52
|
+
|
|
53
|
+
type AppBarNavItem = {
|
|
54
|
+
label: react.ReactNode;
|
|
55
|
+
href?: string;
|
|
56
|
+
active?: boolean;
|
|
57
|
+
onClick?: react.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
|
|
58
|
+
};
|
|
59
|
+
type AppBarProps = react.HTMLAttributes<HTMLElement> & {
|
|
60
|
+
title?: react.ReactNode;
|
|
61
|
+
logo?: string;
|
|
62
|
+
logoAlt?: string;
|
|
63
|
+
brandHref?: string;
|
|
64
|
+
navigation?: AppBarNavItem[];
|
|
65
|
+
actions?: react.ReactNode;
|
|
66
|
+
position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
|
|
67
|
+
color?: 'primary' | 'surface' | 'muted' | 'dark' | 'transparent';
|
|
68
|
+
dense?: boolean;
|
|
69
|
+
elevated?: boolean;
|
|
70
|
+
contained?: boolean;
|
|
71
|
+
titlePosition?: 'start' | 'center' | 'end';
|
|
72
|
+
};
|
|
73
|
+
declare const AppBar: react.FC<AppBarProps>;
|
|
74
|
+
|
|
75
|
+
export { AppBar, type AppBarNavItem, type AppBarProps, Block, type BlockBlur, type BlockProps };
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export { Icon_default as Icon } from './chunk-HEXJCQRO.js';
|
|
2
2
|
export { Hero_default as Hero } from './chunk-VPF7M2PB.js';
|
|
3
|
-
export { ProfileCard_default as ProfileCard } from './chunk-
|
|
3
|
+
export { ProfileCard_default as ProfileCard } from './chunk-NEYVJE67.js';
|
|
4
|
+
export { Notification_default as Notification } from './chunk-67USTSXI.js';
|
|
5
|
+
export { Progress_default as Progress } from './chunk-Z5A2OIDI.js';
|
|
4
6
|
export { Dialog_default as Dialog } from './chunk-LIEBZOLG.js';
|
|
5
7
|
export { ToolTip_default as ToolTip } from './chunk-U2AL7XFY.js';
|
|
6
8
|
export { Card_default as Card } from './chunk-2UL3S6KC.js';
|
|
@@ -9,7 +11,7 @@ export { Input_default as Input } from './chunk-JGEXEDKS.js';
|
|
|
9
11
|
export { Slider_default as Slider } from './chunk-GMDNSU26.js';
|
|
10
12
|
export { Switch_default as Switch } from './chunk-5LWU5T2C.js';
|
|
11
13
|
export { Select_default as Select } from './chunk-SAGQYMS3.js';
|
|
12
|
-
export { Button_default as Button } from './chunk-
|
|
14
|
+
export { Button_default as Button } from './chunk-F2G2JRKA.js';
|
|
13
15
|
export { Chip_default as Chip } from './chunk-DSZ3EOQB.js';
|
|
14
16
|
import './chunk-IEILIKS2.js';
|
|
15
17
|
export { List_default as List } from './chunk-AK7LFJI4.js';
|
|
@@ -17,5 +19,187 @@ export { Item_default as ListItem } from './chunk-5WQW6YSJ.js';
|
|
|
17
19
|
export { Menu_default as Menu } from './chunk-T37VPLS4.js';
|
|
18
20
|
export { ExpansionPanel_default as ExpansionPanel } from './chunk-LYP7V32H.js';
|
|
19
21
|
export { ExpansionPanelItem_default as ExpansionPanelItem } from './chunk-KRYWWWXR.js';
|
|
22
|
+
import * as React from 'react';
|
|
23
|
+
import { twMerge } from 'tailwind-merge';
|
|
24
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
25
|
+
|
|
26
|
+
var blockBase = "block-base relative overflow-hidden text-gray-900 dark:text-slate-100";
|
|
27
|
+
var blurClasses = {
|
|
28
|
+
none: "backdrop-blur-none",
|
|
29
|
+
sm: "backdrop-blur-sm",
|
|
30
|
+
base: "backdrop-blur",
|
|
31
|
+
md: "backdrop-blur-md",
|
|
32
|
+
lg: "backdrop-blur-lg",
|
|
33
|
+
xl: "backdrop-blur-xl",
|
|
34
|
+
"2xl": "backdrop-blur-2xl",
|
|
35
|
+
"3xl": "backdrop-blur-3xl"
|
|
36
|
+
};
|
|
37
|
+
var variantClasses = {
|
|
38
|
+
solid: "rounded-xl bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10",
|
|
39
|
+
outline: "rounded-xl bg-white/10 backdrop-opacity-5 border border-white/60 dark:bg-slate-900/30 dark:border-white/20",
|
|
40
|
+
text: "rounded-xl bg-transparent border border-transparent",
|
|
41
|
+
ghost: "rounded-xl bg-white/20 backdrop-opacity-5 border border-white/20 dark:bg-slate-900/30 dark:border-white/10",
|
|
42
|
+
filled: "rounded-xl bg-white/60 backdrop-opacity-5 border border-white/40 dark:bg-slate-900/70 dark:border-white/15",
|
|
43
|
+
underlined: "rounded-xl bg-white/20 backdrop-opacity-5 border-b border-white/40 dark:bg-slate-900/30 dark:border-white/20",
|
|
44
|
+
rounded: "rounded-3xl bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10",
|
|
45
|
+
sharp: "rounded-none bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10"
|
|
46
|
+
};
|
|
47
|
+
var Block = React.forwardRef(function Block2({ className, variant = "solid", blur = "sm", interactive = false, children, ...rest }, ref) {
|
|
48
|
+
const variantClass = variantClasses[variant] ?? variantClasses.solid;
|
|
49
|
+
const blurClass = blurClasses[blur] ?? blurClasses.sm;
|
|
50
|
+
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 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900" : void 0;
|
|
51
|
+
const tabIndexValue = interactive && rest.tabIndex === void 0 ? 0 : rest.tabIndex;
|
|
52
|
+
return /* @__PURE__ */ jsx(
|
|
53
|
+
"div",
|
|
54
|
+
{
|
|
55
|
+
...rest,
|
|
56
|
+
ref,
|
|
57
|
+
tabIndex: tabIndexValue,
|
|
58
|
+
className: twMerge(blockBase, variantClass, blurClass, "p-2", interactiveClass, className),
|
|
59
|
+
children
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
});
|
|
63
|
+
Block.displayName = "Block";
|
|
64
|
+
var Block_default = Block;
|
|
65
|
+
var positionClasses = {
|
|
66
|
+
fixed: "fixed inset-x-0 top-0",
|
|
67
|
+
absolute: "absolute inset-x-0 top-0",
|
|
68
|
+
sticky: "sticky inset-x-0 top-0",
|
|
69
|
+
static: "static",
|
|
70
|
+
relative: "relative"
|
|
71
|
+
};
|
|
72
|
+
var colorClasses = {
|
|
73
|
+
primary: "bg-primary text-white",
|
|
74
|
+
surface: "bg-white text-gray-900 border-b border-gray-200",
|
|
75
|
+
muted: "bg-gray-50 text-gray-900 border-b border-gray-200",
|
|
76
|
+
dark: "bg-gray-900 text-white",
|
|
77
|
+
transparent: "bg-transparent text-inherit"
|
|
78
|
+
};
|
|
79
|
+
var AppBar = ({
|
|
80
|
+
title,
|
|
81
|
+
logo,
|
|
82
|
+
logoAlt = "Logo",
|
|
83
|
+
brandHref,
|
|
84
|
+
navigation = [],
|
|
85
|
+
actions,
|
|
86
|
+
position = "static",
|
|
87
|
+
color = "surface",
|
|
88
|
+
dense = false,
|
|
89
|
+
elevated = true,
|
|
90
|
+
contained = true,
|
|
91
|
+
titlePosition = "start",
|
|
92
|
+
className,
|
|
93
|
+
children,
|
|
94
|
+
...rest
|
|
95
|
+
}) => {
|
|
96
|
+
const [mobileOpen, setMobileOpen] = React.useState(false);
|
|
97
|
+
const isDark = color === "primary" || color === "dark";
|
|
98
|
+
const isTransparent = color === "transparent";
|
|
99
|
+
const barClass = twMerge(
|
|
100
|
+
"app-bar z-40 w-full backdrop-blur-md",
|
|
101
|
+
positionClasses[position] ?? positionClasses.static,
|
|
102
|
+
colorClasses[color] ?? colorClasses.surface,
|
|
103
|
+
elevated && !isTransparent ? "shadow-sm shadow-black/10" : void 0,
|
|
104
|
+
"relative",
|
|
105
|
+
className
|
|
106
|
+
);
|
|
107
|
+
const innerClass = twMerge(
|
|
108
|
+
"mx-auto flex w-full items-center gap-4",
|
|
109
|
+
contained ? "max-w-6xl px-4 sm:px-6 lg:px-8" : "px-4",
|
|
110
|
+
dense ? "py-2.5" : "py-4"
|
|
111
|
+
);
|
|
112
|
+
const brandTextClass = isDark ? "text-white" : "text-gray-900";
|
|
113
|
+
const navBaseClass = twMerge(
|
|
114
|
+
"inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition focus-visible:outline-none",
|
|
115
|
+
isDark ? "hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white/70" : "hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
|
|
116
|
+
);
|
|
117
|
+
const navActiveClass = isDark ? "bg-white/15 text-white" : "bg-primary/10 text-primary";
|
|
118
|
+
const renderNavItem = (item, index) => {
|
|
119
|
+
const { href, label, active, onClick } = item;
|
|
120
|
+
const Component = href ? "a" : "button";
|
|
121
|
+
const resolvedHref = href && href.trim().length > 0 ? href : void 0;
|
|
122
|
+
return /* @__PURE__ */ jsx(
|
|
123
|
+
Component,
|
|
124
|
+
{
|
|
125
|
+
href: resolvedHref,
|
|
126
|
+
onClick,
|
|
127
|
+
className: twMerge(navBaseClass, active ? navActiveClass : void 0),
|
|
128
|
+
"aria-current": active ? "page" : void 0,
|
|
129
|
+
children: label
|
|
130
|
+
},
|
|
131
|
+
`${resolvedHref ?? "item"}-${index}`
|
|
132
|
+
);
|
|
133
|
+
};
|
|
134
|
+
const brandAlignClass = titlePosition === "center" ? "justify-self-center text-center" : titlePosition === "end" ? "justify-self-end text-right" : "justify-self-start";
|
|
135
|
+
const brandNode = title || logo ? /* @__PURE__ */ jsxs("div", { className: twMerge("flex min-w-0 items-center gap-3", brandAlignClass), children: [
|
|
136
|
+
logo ? /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-white/10 ring-1 ring-black/5", children: /* @__PURE__ */ jsx(
|
|
137
|
+
"img",
|
|
138
|
+
{
|
|
139
|
+
src: logo,
|
|
140
|
+
alt: logoAlt,
|
|
141
|
+
className: "h-full w-full object-cover",
|
|
142
|
+
loading: "lazy",
|
|
143
|
+
decoding: "async"
|
|
144
|
+
}
|
|
145
|
+
) }) : null,
|
|
146
|
+
/* @__PURE__ */ jsx("div", { className: "min-w-0", children: title ? /* @__PURE__ */ jsx("div", { className: twMerge("text-base font-semibold leading-tight", brandTextClass), children: brandHref ? /* @__PURE__ */ jsx("a", { href: brandHref, className: "hover:underline focus-visible:outline-none", children: title }) : title }) : null })
|
|
147
|
+
] }) : null;
|
|
148
|
+
return /* @__PURE__ */ jsxs("header", { ...rest, className: barClass, children: [
|
|
149
|
+
/* @__PURE__ */ jsx("div", { className: innerClass, children: /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-[auto_1fr_auto] items-center gap-3", children: [
|
|
150
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
151
|
+
navigation.length > 0 ? /* @__PURE__ */ jsx(
|
|
152
|
+
"button",
|
|
153
|
+
{
|
|
154
|
+
type: "button",
|
|
155
|
+
"aria-label": "Otev\u0159\xEDt navigaci",
|
|
156
|
+
className: twMerge(
|
|
157
|
+
"inline-flex h-10 w-10 items-center justify-center rounded-xl text-xl sm:hidden",
|
|
158
|
+
isDark ? "text-white hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white/60" : "text-gray-700 hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
|
|
159
|
+
),
|
|
160
|
+
"aria-expanded": mobileOpen,
|
|
161
|
+
onClick: () => setMobileOpen((open) => !open),
|
|
162
|
+
children: /* @__PURE__ */ jsx("i", { className: mobileOpen ? "mdi mdi-close" : "mdi mdi-menu", "aria-hidden": true })
|
|
163
|
+
}
|
|
164
|
+
) : null,
|
|
165
|
+
navigation.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "hidden items-center gap-1 sm:flex", "aria-label": "Hlavni navigace", children: navigation.map(renderNavItem) }) : null
|
|
166
|
+
] }),
|
|
167
|
+
brandNode,
|
|
168
|
+
/* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center justify-end gap-2", children: [
|
|
169
|
+
children,
|
|
170
|
+
actions
|
|
171
|
+
] })
|
|
172
|
+
] }) }),
|
|
173
|
+
navigation.length > 0 && mobileOpen ? /* @__PURE__ */ jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsx("nav", { className: "absolute inset-x-0 top-full border-t border-gray-200/70 bg-white/95 p-3 shadow-lg shadow-gray-900/5 backdrop-blur-md", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", "aria-label": "Mobilni navigace", children: navigation.map((item, index) => {
|
|
174
|
+
const { href, label, active, onClick } = item;
|
|
175
|
+
const Component = href ? "a" : "button";
|
|
176
|
+
const resolvedHref = href && href.trim().length > 0 ? href : void 0;
|
|
177
|
+
return /* @__PURE__ */ jsxs(
|
|
178
|
+
Component,
|
|
179
|
+
{
|
|
180
|
+
href: resolvedHref,
|
|
181
|
+
onClick: (event) => {
|
|
182
|
+
onClick?.(event);
|
|
183
|
+
setMobileOpen(false);
|
|
184
|
+
},
|
|
185
|
+
className: twMerge(
|
|
186
|
+
"flex items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition",
|
|
187
|
+
active ? "bg-primary/10 text-primary" : "text-gray-800 hover:bg-gray-100"
|
|
188
|
+
),
|
|
189
|
+
"aria-current": active ? "page" : void 0,
|
|
190
|
+
children: [
|
|
191
|
+
label,
|
|
192
|
+
active ? /* @__PURE__ */ jsx("i", { className: "mdi mdi-circle-small text-primary", "aria-hidden": true }) : null
|
|
193
|
+
]
|
|
194
|
+
},
|
|
195
|
+
`${resolvedHref ?? "mobile-item"}-${index}`
|
|
196
|
+
);
|
|
197
|
+
}) }) }) }) : null
|
|
198
|
+
] });
|
|
199
|
+
};
|
|
200
|
+
AppBar.displayName = "AppBar";
|
|
201
|
+
var AppBar_default = AppBar;
|
|
202
|
+
|
|
203
|
+
export { AppBar_default as AppBar, Block_default as Block };
|
|
20
204
|
//# sourceMappingURL=index.js.map
|
|
21
205
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../src/Blocks/Block/index.tsx","../src/Blocks/AppBar/index.tsx"],"names":["Block","React2","twMerge","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import * as React from 'react';\nimport type { GlobalVariant } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { BlockBlur, BlockProps } from './types.block';\n\nconst blockBase = 'block-base relative overflow-hidden text-gray-900 dark:text-slate-100';\n\nconst blurClasses: Record<BlockBlur, string> = {\n none: 'backdrop-blur-none',\n sm: 'backdrop-blur-sm',\n base: 'backdrop-blur',\n md: 'backdrop-blur-md',\n lg: 'backdrop-blur-lg',\n xl: 'backdrop-blur-xl',\n '2xl': 'backdrop-blur-2xl',\n '3xl': 'backdrop-blur-3xl'\n};\n\nconst variantClasses: Record<GlobalVariant, string> = {\n solid:\n 'rounded-xl bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10',\n outline:\n 'rounded-xl bg-white/10 backdrop-opacity-5 border border-white/60 dark:bg-slate-900/30 dark:border-white/20',\n text: 'rounded-xl bg-transparent border border-transparent',\n ghost:\n 'rounded-xl bg-white/20 backdrop-opacity-5 border border-white/20 dark:bg-slate-900/30 dark:border-white/10',\n filled:\n 'rounded-xl bg-white/60 backdrop-opacity-5 border border-white/40 dark:bg-slate-900/70 dark:border-white/15',\n underlined:\n 'rounded-xl bg-white/20 backdrop-opacity-5 border-b border-white/40 dark:bg-slate-900/30 dark:border-white/20',\n rounded:\n 'rounded-3xl bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10',\n sharp:\n 'rounded-none bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10'\n};\n\n/**\n * Glass-like block container with blur and shared variant styling.\n */\nconst Block = React.forwardRef<HTMLDivElement, BlockProps>(function Block(\n { className, variant = 'solid', blur = 'sm', interactive = false, children, ...rest },\n ref\n) {\n const variantClass = variantClasses[variant] ?? variantClasses.solid;\n const blurClass = blurClasses[blur] ?? blurClasses.sm;\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 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900'\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(blockBase, variantClass, blurClass, 'p-2', interactiveClass, className)}\n >\n {children}\n </div>\n );\n});\n\nBlock.displayName = 'Block';\n\nexport type { BlockProps, BlockBlur };\n\nexport default Block;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport type AppBarNavItem = {\n label: React.ReactNode;\n href?: string;\n active?: boolean;\n onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;\n};\n\nexport type AppBarProps = React.HTMLAttributes<HTMLElement> & {\n title?: React.ReactNode;\n logo?: string;\n logoAlt?: string;\n brandHref?: string;\n navigation?: AppBarNavItem[];\n actions?: React.ReactNode;\n position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';\n color?: 'primary' | 'surface' | 'muted' | 'dark' | 'transparent';\n dense?: boolean;\n elevated?: boolean;\n contained?: boolean;\n titlePosition?: 'start' | 'center' | 'end';\n};\n\nconst positionClasses: Record<NonNullable<AppBarProps['position']>, string> = {\n fixed: 'fixed inset-x-0 top-0',\n absolute: 'absolute inset-x-0 top-0',\n sticky: 'sticky inset-x-0 top-0',\n static: 'static',\n relative: 'relative'\n};\n\nconst colorClasses: Record<NonNullable<AppBarProps['color']>, string> = {\n primary: 'bg-primary text-white',\n surface: 'bg-white text-gray-900 border-b border-gray-200',\n muted: 'bg-gray-50 text-gray-900 border-b border-gray-200',\n dark: 'bg-gray-900 text-white',\n transparent: 'bg-transparent text-inherit'\n};\n\nconst AppBar: React.FC<AppBarProps> = ({\n title,\n logo,\n logoAlt = 'Logo',\n brandHref,\n navigation = [],\n actions,\n position = 'static',\n color = 'surface',\n dense = false,\n elevated = true,\n contained = true,\n titlePosition = 'start',\n className,\n children,\n ...rest\n}) => {\n const [mobileOpen, setMobileOpen] = React.useState(false);\n\n const isDark = color === 'primary' || color === 'dark';\n const isTransparent = color === 'transparent';\n\n const barClass = twMerge(\n 'app-bar z-40 w-full backdrop-blur-md',\n positionClasses[position] ?? positionClasses.static,\n colorClasses[color] ?? colorClasses.surface,\n elevated && !isTransparent ? 'shadow-sm shadow-black/10' : undefined,\n 'relative',\n className\n );\n\n const innerClass = twMerge(\n 'mx-auto flex w-full items-center gap-4',\n contained ? 'max-w-6xl px-4 sm:px-6 lg:px-8' : 'px-4',\n dense ? 'py-2.5' : 'py-4'\n );\n\n const brandTextClass = isDark ? 'text-white' : 'text-gray-900';\n const navBaseClass = twMerge(\n 'inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition focus-visible:outline-none',\n isDark\n ? 'hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white/70'\n : 'hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent'\n );\n const navActiveClass = isDark ? 'bg-white/15 text-white' : 'bg-primary/10 text-primary';\n\n const renderNavItem = (item: AppBarNavItem, index: number) => {\n const { href, label, active, onClick } = item;\n const Component = href ? 'a' : 'button';\n const resolvedHref = href && href.trim().length > 0 ? href : undefined;\n return (\n <Component\n key={`${resolvedHref ?? 'item'}-${index}`}\n href={resolvedHref}\n onClick={onClick as never}\n className={twMerge(navBaseClass, active ? navActiveClass : undefined)}\n aria-current={active ? 'page' : undefined}\n >\n {label}\n </Component>\n );\n };\n\n const brandAlignClass =\n titlePosition === 'center'\n ? 'justify-self-center text-center'\n : titlePosition === 'end'\n ? 'justify-self-end text-right'\n : 'justify-self-start';\n\n const brandNode =\n title || logo ? (\n <div className={twMerge('flex min-w-0 items-center gap-3', brandAlignClass)}>\n {logo ? (\n <div className='flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-white/10 ring-1 ring-black/5'>\n <img\n src={logo}\n alt={logoAlt}\n className='h-full w-full object-cover'\n loading='lazy'\n decoding='async'\n />\n </div>\n ) : null}\n <div className='min-w-0'>\n {title ? (\n <div className={twMerge('text-base font-semibold leading-tight', brandTextClass)}>\n {brandHref ? (\n <a href={brandHref} className='hover:underline focus-visible:outline-none'>\n {title}\n </a>\n ) : (\n title\n )}\n </div>\n ) : null}\n </div>\n </div>\n ) : null;\n\n return (\n <header {...rest} className={barClass}>\n <div className={innerClass}>\n <div className='grid w-full grid-cols-[auto_1fr_auto] items-center gap-3'>\n <div className='flex items-center gap-2'>\n {navigation.length > 0 ? (\n <button\n type='button'\n aria-label='Otevřít navigaci'\n className={twMerge(\n 'inline-flex h-10 w-10 items-center justify-center rounded-xl text-xl sm:hidden',\n isDark\n ? 'text-white hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white/60'\n : 'text-gray-700 hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent'\n )}\n aria-expanded={mobileOpen}\n onClick={() => setMobileOpen(open => !open)}\n >\n <i className={mobileOpen ? 'mdi mdi-close' : 'mdi mdi-menu'} aria-hidden />\n </button>\n ) : null}\n {navigation.length > 0 ? (\n <nav className='hidden items-center gap-1 sm:flex' aria-label='Hlavni navigace'>\n {navigation.map(renderNavItem)}\n </nav>\n ) : null}\n </div>\n {brandNode}\n <div className='ml-auto flex items-center justify-end gap-2'>\n {children}\n {actions}\n </div>\n </div>\n </div>\n {navigation.length > 0 && mobileOpen ? (\n <div className='sm:hidden'>\n <nav className='absolute inset-x-0 top-full border-t border-gray-200/70 bg-white/95 p-3 shadow-lg shadow-gray-900/5 backdrop-blur-md'>\n <div className='flex flex-col gap-2' aria-label='Mobilni navigace'>\n {navigation.map((item, index) => {\n const { href, label, active, onClick } = item;\n const Component = href ? 'a' : 'button';\n const resolvedHref = href && href.trim().length > 0 ? href : undefined;\n return (\n <Component\n key={`${resolvedHref ?? 'mobile-item'}-${index}`}\n href={resolvedHref}\n onClick={event => {\n onClick?.(event as never);\n setMobileOpen(false);\n }}\n className={twMerge(\n 'flex items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition',\n active ? 'bg-primary/10 text-primary' : 'text-gray-800 hover:bg-gray-100'\n )}\n aria-current={active ? 'page' : undefined}\n >\n {label}\n {active ? (\n <i className='mdi mdi-circle-small text-primary' aria-hidden />\n ) : null}\n </Component>\n );\n })}\n </div>\n </nav>\n </div>\n ) : null}\n </header>\n );\n};\n\nAppBar.displayName = 'AppBar';\n\nexport default AppBar;\n"]}
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var tailwindMerge = require('tailwind-merge');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
function _interopNamespace(e) {
|
|
8
|
+
if (e && e.__esModule) return e;
|
|
9
|
+
var n = Object.create(null);
|
|
10
|
+
if (e) {
|
|
11
|
+
Object.keys(e).forEach(function (k) {
|
|
12
|
+
if (k !== 'default') {
|
|
13
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return e[k]; }
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
n.default = e;
|
|
22
|
+
return Object.freeze(n);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
26
|
+
|
|
27
|
+
// src/Feedback/Notification/index.tsx
|
|
28
|
+
var placementClasses = {
|
|
29
|
+
topLeft: "top-4 left-4 items-start",
|
|
30
|
+
topRight: "top-4 right-4 items-end",
|
|
31
|
+
bottomLeft: "bottom-4 left-4 items-start",
|
|
32
|
+
bottomRight: "bottom-4 right-4 items-end"
|
|
33
|
+
};
|
|
34
|
+
var typeIconMap = {
|
|
35
|
+
info: "mdi-information-outline",
|
|
36
|
+
success: "mdi-check-circle-outline",
|
|
37
|
+
warning: "mdi-alert-outline",
|
|
38
|
+
error: "mdi-close-circle-outline"
|
|
39
|
+
};
|
|
40
|
+
var typeAccentMap = {
|
|
41
|
+
info: "bg-sky-50 text-sky-600",
|
|
42
|
+
success: "bg-emerald-50 text-emerald-600",
|
|
43
|
+
warning: "bg-amber-50 text-amber-700",
|
|
44
|
+
error: "bg-red-50 text-red-600"
|
|
45
|
+
};
|
|
46
|
+
var typeTone = {
|
|
47
|
+
info: {
|
|
48
|
+
bg: "bg-sky-50",
|
|
49
|
+
text: "text-sky-900",
|
|
50
|
+
border: "border-sky-200",
|
|
51
|
+
iconBg: "bg-sky-100",
|
|
52
|
+
iconText: "text-sky-600"
|
|
53
|
+
},
|
|
54
|
+
success: {
|
|
55
|
+
bg: "bg-emerald-50",
|
|
56
|
+
text: "text-emerald-900",
|
|
57
|
+
border: "border-emerald-200",
|
|
58
|
+
iconBg: "bg-emerald-100",
|
|
59
|
+
iconText: "text-emerald-600"
|
|
60
|
+
},
|
|
61
|
+
warning: {
|
|
62
|
+
bg: "bg-amber-50",
|
|
63
|
+
text: "text-amber-900",
|
|
64
|
+
border: "border-amber-200",
|
|
65
|
+
iconBg: "bg-amber-100",
|
|
66
|
+
iconText: "text-amber-700"
|
|
67
|
+
},
|
|
68
|
+
error: {
|
|
69
|
+
bg: "bg-red-50",
|
|
70
|
+
text: "text-red-900",
|
|
71
|
+
border: "border-red-200",
|
|
72
|
+
iconBg: "bg-red-100",
|
|
73
|
+
iconText: "text-red-600"
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
var resolveVariantClass = (variant, type) => {
|
|
77
|
+
const tone = type ? typeTone[type] : void 0;
|
|
78
|
+
switch (variant) {
|
|
79
|
+
case "filled":
|
|
80
|
+
return tailwindMerge.twMerge(
|
|
81
|
+
tone?.bg ?? "bg-primary/10",
|
|
82
|
+
tone?.text ?? "text-primary",
|
|
83
|
+
"border border-transparent shadow-none"
|
|
84
|
+
);
|
|
85
|
+
case "outline":
|
|
86
|
+
return tailwindMerge.twMerge(
|
|
87
|
+
"bg-white/90",
|
|
88
|
+
tone?.text ?? "text-gray-900",
|
|
89
|
+
tone?.border ?? "border-primary/20",
|
|
90
|
+
"border-[1.5px]"
|
|
91
|
+
);
|
|
92
|
+
case "ghost":
|
|
93
|
+
return tailwindMerge.twMerge(
|
|
94
|
+
"bg-transparent shadow-none border border-transparent",
|
|
95
|
+
tone?.text ?? "text-gray-900"
|
|
96
|
+
);
|
|
97
|
+
case "solid":
|
|
98
|
+
default:
|
|
99
|
+
return "bg-white/95 text-gray-900 border border-gray-200";
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
var resolveIconClassName = (icon) => {
|
|
103
|
+
if (!icon) return void 0;
|
|
104
|
+
if (typeof icon === "string") {
|
|
105
|
+
const trimmed = icon.trim();
|
|
106
|
+
if (!trimmed) return void 0;
|
|
107
|
+
if (trimmed.includes(" ")) return trimmed;
|
|
108
|
+
const normalized2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
|
|
109
|
+
return `mdi ${normalized2}`;
|
|
110
|
+
}
|
|
111
|
+
const [library, iconName] = icon;
|
|
112
|
+
const normalized = iconName?.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
113
|
+
return `mdi ${library} ${normalized}`.trim();
|
|
114
|
+
};
|
|
115
|
+
var resolveIconNode = (icon, fallbackClassName) => {
|
|
116
|
+
if (React__namespace.isValidElement(icon)) return icon;
|
|
117
|
+
const iconClassName = resolveIconClassName(icon) ?? fallbackClassName;
|
|
118
|
+
if (!iconClassName) return null;
|
|
119
|
+
const hasBase = iconClassName.split(" ").some((token) => token.trim() === "mdi");
|
|
120
|
+
const hasGlyph = iconClassName.includes("mdi-");
|
|
121
|
+
const finalClassName = hasBase && hasGlyph ? iconClassName : `mdi ${iconClassName}`.trim();
|
|
122
|
+
return /* @__PURE__ */ jsxRuntime.jsx("i", { className: finalClassName, "aria-hidden": true });
|
|
123
|
+
};
|
|
124
|
+
var NotificationCard = ({ item }) => {
|
|
125
|
+
const {
|
|
126
|
+
key,
|
|
127
|
+
message,
|
|
128
|
+
description,
|
|
129
|
+
icon,
|
|
130
|
+
closeIcon,
|
|
131
|
+
closable = true,
|
|
132
|
+
btn,
|
|
133
|
+
onClick,
|
|
134
|
+
className,
|
|
135
|
+
style,
|
|
136
|
+
role = "status",
|
|
137
|
+
type,
|
|
138
|
+
variant = "solid",
|
|
139
|
+
...rest
|
|
140
|
+
} = item;
|
|
141
|
+
const hasMessage = message !== void 0 && message !== null;
|
|
142
|
+
const hasDescription = description !== void 0 && description !== null;
|
|
143
|
+
const hasContent = hasMessage || hasDescription;
|
|
144
|
+
const accentClass = type ? typeAccentMap[type] : void 0;
|
|
145
|
+
const iconNode = resolveIconNode(icon, type ? `mdi ${typeIconMap[type]}` : void 0);
|
|
146
|
+
const closeIconNode = resolveIconNode(closeIcon, "mdi mdi-close");
|
|
147
|
+
const variantClass = resolveVariantClass(variant, type);
|
|
148
|
+
const toneIconBg = type ? typeTone[type]?.iconBg : void 0;
|
|
149
|
+
const toneIconText = type ? typeTone[type]?.iconText : void 0;
|
|
150
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
151
|
+
"article",
|
|
152
|
+
{
|
|
153
|
+
...rest,
|
|
154
|
+
role,
|
|
155
|
+
className: tailwindMerge.twMerge(
|
|
156
|
+
"pointer-events-auto flex w-88 max-w-[calc(100vw-2.5rem)] gap-3 rounded-2xl p-4 shadow-xl ring-1 ring-black/5 backdrop-blur-sm transition hover:-translate-y-0.5 hover:shadow-2xl focus:outline-none",
|
|
157
|
+
"dark:border-gray-800 dark:bg-gray-900/95 dark:text-gray-50 dark:ring-white/5",
|
|
158
|
+
variantClass,
|
|
159
|
+
className
|
|
160
|
+
),
|
|
161
|
+
style,
|
|
162
|
+
onClick,
|
|
163
|
+
children: [
|
|
164
|
+
iconNode ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
165
|
+
"div",
|
|
166
|
+
{
|
|
167
|
+
className: tailwindMerge.twMerge(
|
|
168
|
+
"mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-xl",
|
|
169
|
+
toneIconBg ?? accentClass ?? "bg-primary/10",
|
|
170
|
+
toneIconText ?? "text-primary"
|
|
171
|
+
),
|
|
172
|
+
children: iconNode
|
|
173
|
+
}
|
|
174
|
+
) : null,
|
|
175
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
|
|
176
|
+
hasContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
|
|
177
|
+
hasMessage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[15px] font-semibold leading-5 text-gray-900 dark:text-white", children: message }) : null,
|
|
178
|
+
hasDescription ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-6 text-gray-600 dark:text-gray-300", children: description }) : null
|
|
179
|
+
] }) : null,
|
|
180
|
+
btn ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-1 text-sm", children: btn }) : null
|
|
181
|
+
] }),
|
|
182
|
+
closable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
183
|
+
"button",
|
|
184
|
+
{
|
|
185
|
+
type: "button",
|
|
186
|
+
"aria-label": "Zav\u0159\xEDt upozorn\u011Bn\xED",
|
|
187
|
+
className: "-mr-1 -mt-1 h-8 w-8 shrink-0 rounded-full text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white",
|
|
188
|
+
onClick: (event) => {
|
|
189
|
+
event.stopPropagation();
|
|
190
|
+
item.onClose?.();
|
|
191
|
+
},
|
|
192
|
+
children: closeIconNode
|
|
193
|
+
}
|
|
194
|
+
) : null
|
|
195
|
+
]
|
|
196
|
+
}
|
|
197
|
+
);
|
|
198
|
+
};
|
|
199
|
+
var Notification = ({
|
|
200
|
+
items = [],
|
|
201
|
+
placement = "topRight",
|
|
202
|
+
gap = 12,
|
|
203
|
+
containerClassName,
|
|
204
|
+
className,
|
|
205
|
+
...rest
|
|
206
|
+
}) => {
|
|
207
|
+
if (!items.length) return null;
|
|
208
|
+
const grouped = /* @__PURE__ */ new Map();
|
|
209
|
+
items.forEach((item) => {
|
|
210
|
+
const resolvedKey = item.key ?? `notification-${item.message ?? Math.random()}`;
|
|
211
|
+
const resolvedPlacement = item.placement ?? placement;
|
|
212
|
+
const group = grouped.get(resolvedPlacement) ?? [];
|
|
213
|
+
group.push({ ...item, key: resolvedKey });
|
|
214
|
+
grouped.set(resolvedPlacement, group);
|
|
215
|
+
});
|
|
216
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from(grouped.entries()).map(([groupPlacement, groupItems]) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
217
|
+
"div",
|
|
218
|
+
{
|
|
219
|
+
className: tailwindMerge.twMerge(
|
|
220
|
+
"pointer-events-none fixed z-70 flex w-full max-w-[24rem] flex-col",
|
|
221
|
+
placementClasses[groupPlacement],
|
|
222
|
+
containerClassName,
|
|
223
|
+
className
|
|
224
|
+
),
|
|
225
|
+
style: { gap: `${gap}px` },
|
|
226
|
+
...rest,
|
|
227
|
+
children: groupItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(NotificationCard, { item }, item.key))
|
|
228
|
+
},
|
|
229
|
+
groupPlacement
|
|
230
|
+
)) });
|
|
231
|
+
};
|
|
232
|
+
var Notification_default = Notification;
|
|
233
|
+
|
|
234
|
+
module.exports = Notification_default;
|
|
235
|
+
//# sourceMappingURL=notification.cjs.map
|
|
236
|
+
//# sourceMappingURL=notification.cjs.map
|