@lindle/linoardo 1.0.22 → 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/index.cjs +44 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +31 -3
- package/dist/index.d.ts +31 -3
- package/dist/index.js +41 -2
- package/dist/index.js.map +1 -1
- package/dist/styles.css +324 -0
- package/package.json +10 -1
package/dist/index.d.cts
CHANGED
|
@@ -6,8 +6,9 @@ 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
|
-
export { default as Masonry, MasonryProps, MasonryRenderItem } from './masonry.cjs';
|
|
10
9
|
import * as react from 'react';
|
|
10
|
+
import { G as GlobalVariant } from './global.types-E2uVLemv.cjs';
|
|
11
|
+
export { default as Masonry, MasonryProps, MasonryRenderItem } from './masonry.cjs';
|
|
11
12
|
export { default as Hero, HeroProps } from './hero.cjs';
|
|
12
13
|
export { Avatar, Badge, default as ProfileCard, ProfileCardLayout, ProfileCardProps, SocialLink } from './profileCard.cjs';
|
|
13
14
|
export { default as Input } from './input.cjs';
|
|
@@ -19,9 +20,36 @@ export { default as Notification, NotificationArgs, NotificationPlacement, Notif
|
|
|
19
20
|
export { default as Progress, ProgressProps, ProgressStatus, ProgressType } from './progress.cjs';
|
|
20
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';
|
|
21
22
|
export { c as ListDensity, L as ListItem, a as ListItemProps, d as ListLines, e as ListRounded, b as ListVariant } from './index-B5n8tN2G.cjs';
|
|
22
|
-
import './global.types-E2uVLemv.cjs';
|
|
23
23
|
import './types-BCqIOkp1.cjs';
|
|
24
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
|
+
|
|
25
53
|
type AppBarNavItem = {
|
|
26
54
|
label: react.ReactNode;
|
|
27
55
|
href?: string;
|
|
@@ -44,4 +72,4 @@ type AppBarProps = react.HTMLAttributes<HTMLElement> & {
|
|
|
44
72
|
};
|
|
45
73
|
declare const AppBar: react.FC<AppBarProps>;
|
|
46
74
|
|
|
47
|
-
export { AppBar, type AppBarNavItem, type AppBarProps };
|
|
75
|
+
export { AppBar, type AppBarNavItem, type AppBarProps, Block, type BlockBlur, type BlockProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -6,8 +6,9 @@ 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
|
-
export { default as Masonry, MasonryProps, MasonryRenderItem } from './masonry.js';
|
|
10
9
|
import * as react from 'react';
|
|
10
|
+
import { G as GlobalVariant } from './global.types-E2uVLemv.js';
|
|
11
|
+
export { default as Masonry, MasonryProps, MasonryRenderItem } from './masonry.js';
|
|
11
12
|
export { default as Hero, HeroProps } from './hero.js';
|
|
12
13
|
export { Avatar, Badge, default as ProfileCard, ProfileCardLayout, ProfileCardProps, SocialLink } from './profileCard.js';
|
|
13
14
|
export { default as Input } from './input.js';
|
|
@@ -19,9 +20,36 @@ export { default as Notification, NotificationArgs, NotificationPlacement, Notif
|
|
|
19
20
|
export { default as Progress, ProgressProps, ProgressStatus, ProgressType } from './progress.js';
|
|
20
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';
|
|
21
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';
|
|
22
|
-
import './global.types-E2uVLemv.js';
|
|
23
23
|
import './types-ChXN4u7x.js';
|
|
24
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
|
+
|
|
25
53
|
type AppBarNavItem = {
|
|
26
54
|
label: react.ReactNode;
|
|
27
55
|
href?: string;
|
|
@@ -44,4 +72,4 @@ type AppBarProps = react.HTMLAttributes<HTMLElement> & {
|
|
|
44
72
|
};
|
|
45
73
|
declare const AppBar: react.FC<AppBarProps>;
|
|
46
74
|
|
|
47
|
-
export { AppBar, type AppBarNavItem, type AppBarProps };
|
|
75
|
+
export { AppBar, type AppBarNavItem, type AppBarProps, Block, type BlockBlur, type BlockProps };
|
package/dist/index.js
CHANGED
|
@@ -21,8 +21,47 @@ export { ExpansionPanel_default as ExpansionPanel } from './chunk-LYP7V32H.js';
|
|
|
21
21
|
export { ExpansionPanelItem_default as ExpansionPanelItem } from './chunk-KRYWWWXR.js';
|
|
22
22
|
import * as React from 'react';
|
|
23
23
|
import { twMerge } from 'tailwind-merge';
|
|
24
|
-
import {
|
|
24
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
25
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;
|
|
26
65
|
var positionClasses = {
|
|
27
66
|
fixed: "fixed inset-x-0 top-0",
|
|
28
67
|
absolute: "absolute inset-x-0 top-0",
|
|
@@ -161,6 +200,6 @@ var AppBar = ({
|
|
|
161
200
|
AppBar.displayName = "AppBar";
|
|
162
201
|
var AppBar_default = AppBar;
|
|
163
202
|
|
|
164
|
-
export { AppBar_default as AppBar };
|
|
203
|
+
export { AppBar_default as AppBar, Block_default as Block };
|
|
165
204
|
//# sourceMappingURL=index.js.map
|
|
166
205
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Blocks/AppBar/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["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"]}
|
|
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"]}
|