thread-ui 0.1.0

package/dist/components/masonry-layout/masonry-layout.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type MasonryLayoutProps = {
+    title?: string;
+    caption?: string;
+    components: ReactNode[];
+};
+//# sourceMappingURL=masonry-layout.types.d.ts.map

package/dist/components/masonry-layout/masonry-layout.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry-layout.types.d.ts","sourceRoot":"","sources":["../../../src/components/masonry-layout/masonry-layout.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,kBAAkB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,SAAS,EAAE,CAAC;CACxB,CAAC"}

package/dist/components/masonry-layout/masonry-layout.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=masonry-layout.types.js.map

package/dist/components/masonry-layout/masonry-layout.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry-layout.types.js","sourceRoot":"","sources":["../../../src/components/masonry-layout/masonry-layout.types.ts"],"names":[],"mappings":""}

package/dist/components/nav-menu/index.d.ts

@@ -0,0 +1,3 @@
+export { NavMenuProps } from './nav-menu.types';
+export { NavMenu } from './nav-menu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/nav-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/nav-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/nav-menu/index.js

@@ -0,0 +1,2 @@
+export { NavMenu } from './nav-menu';
+//# sourceMappingURL=index.js.map

package/dist/components/nav-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/nav-menu/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/nav-menu/items/base-item/base-item.d.ts

@@ -0,0 +1,3 @@
+import { BaseItemProps } from './base-item.types';
+export declare const BaseItem: ({ children, href, padding, onMouseEnter, onMouseLeave, isDropdownItem }: BaseItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=base-item.d.ts.map

package/dist/components/nav-menu/items/base-item/base-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/base-item/base-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIlD,eAAO,MAAM,QAAQ,4EAA6E,aAAa,4CAsD9G,CAAC"}

package/dist/components/nav-menu/items/base-item/base-item.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useTheme, useResponsiveStyles } from '../../../../utils';
+import { LinkWrapper } from '../../../../internal-components';
+import { NavMenuStyles } from '../../nav-menu-styles';
+export const BaseItem = ({ children, href, padding, onMouseEnter, onMouseLeave, isDropdownItem }) => {
+    const { theme } = useTheme();
+    const styles = {
+        li: {
+            display: 'flex',
+            alignItems: 'center',
+            listStyleType: 'none',
+        },
+        link: {
+            position: useResponsiveStyles({ sm: 'static', lg: 'relative' }),
+            display: 'inline-flex',
+            flexDirection: 'column',
+            height: useResponsiveStyles({ sm: 'auto', lg: '2.5rem' }),
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '0.375rem',
+            backgroundColor: theme.colors.background,
+            color: theme.colors.text.primary,
+            fontSize: '0.875rem',
+            fontWeight: 500,
+            padding: padding ?? `${NavMenuStyles.paddingY / 2}px ${NavMenuStyles.paddingX}px`,
+            width: isDropdownItem
+                ? useResponsiveStyles({ sm: 'fit-content', lg: '100%' })
+                : useResponsiveStyles({ sm: '100%', lg: 'fit-content' }),
+            textDecoration: 'none',
+            transition: 'all 150ms ease-in-out',
+            margin: 'auto',
+        },
+        linkHover: {
+            backgroundColor: theme.colors.gray.light,
+            color: theme.colors.gray.dark,
+        },
+    };
+    // Handle hover state
+    const [isHovered, setIsHovered] = React.useState(false);
+    return (_jsx("li", { onMouseEnter: onMouseEnter, style: styles.li, onMouseLeave: onMouseLeave, children: _jsx(LinkWrapper, { link: href, style: {
+                ...styles.link,
+                ...(isHovered ? styles.linkHover : {}),
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: children }) }));
+};
+//# sourceMappingURL=base-item.js.map

package/dist/components/nav-menu/items/base-item/base-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-item.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/base-item/base-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAiB,EAAE,EAAE;IAClH,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE7B,MAAM,MAAM,GAAkC;QAC7C,EAAE,EAAE;YACH,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,MAAM;SACrB;QACD,IAAI,EAAE;YACL,QAAQ,EAAE,mBAAmB,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,CAAoC;YAClG,OAAO,EAAE,aAAa;YACtB,aAAa,EAAE,QAAQ;YACvB,MAAM,EAAE,mBAAmB,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC;YACzD,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,UAAU;YACxB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;YACxC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;YAChC,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,OAAO,IAAI,GAAG,aAAa,CAAC,QAAQ,GAAG,CAAC,MAAM,aAAa,CAAC,QAAQ,IAAI;YACjF,KAAK,EAAE,cAAc;gBACpB,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC;gBACxD,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC;YACzD,cAAc,EAAE,MAAM;YACtB,UAAU,EAAE,uBAAuB;YACnC,MAAM,EAAE,MAAM;SACd;QAED,SAAS,EAAE;YACV,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;YACxC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI;SAC7B;KACD,CAAC;IAEF,qBAAqB;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,OAAO,CACN,aAAI,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,YAC3E,KAAC,WAAW,IACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;gBACN,GAAG,MAAM,CAAC,IAAI;gBACd,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;aACtC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,YAEtC,QAAQ,GACI,GACV,CACL,CAAC;AACH,CAAC,CAAC"}

package/dist/components/nav-menu/items/base-item/base-item.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type BaseItemProps = {
+    children: ReactNode;
+    href: string;
+    padding?: string;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLIElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLLIElement>) => void;
+    isDropdownItem?: boolean;
+};
+//# sourceMappingURL=base-item.types.d.ts.map

package/dist/components/nav-menu/items/base-item/base-item.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-item.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/base-item/base-item.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC"}

package/dist/components/nav-menu/items/base-item/base-item.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=base-item.types.js.map

package/dist/components/nav-menu/items/base-item/base-item.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-item.types.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/base-item/base-item.types.ts"],"names":[],"mappings":""}

package/dist/components/nav-menu/items/base-item/index.d.ts

@@ -0,0 +1,3 @@
+export { BaseItemProps } from './base-item.types';
+export { BaseItem } from './base-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/nav-menu/items/base-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/base-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/nav-menu/items/base-item/index.js

@@ -0,0 +1,2 @@
+export { BaseItem } from './base-item';
+//# sourceMappingURL=index.js.map

package/dist/components/nav-menu/items/base-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/base-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/nav-menu/items/nav-drop-down-item/index.d.ts

@@ -0,0 +1,3 @@
+export { NavDropdownItemProps } from './nav-drop-down-item.types';
+export { NavDropdownItem } from './nav-drop-down-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/nav-menu/items/nav-drop-down-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-drop-down-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/nav-menu/items/nav-drop-down-item/index.js

@@ -0,0 +1,2 @@
+export { NavDropdownItem } from './nav-drop-down-item';
+//# sourceMappingURL=index.js.map

package/dist/components/nav-menu/items/nav-drop-down-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-drop-down-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.d.ts

@@ -0,0 +1,3 @@
+import { NavDropdownItemProps } from './nav-drop-down-item.types';
+export declare const NavDropdownItem: ({ title, items }: NavDropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=nav-drop-down-item.d.ts.map

package/dist/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drop-down-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAIlE,eAAO,MAAM,eAAe,qBAAsB,oBAAoB,4CA8FrE,CAAC"}

package/dist/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { BaseItem } from '../base-item';
+import { NavMenuStyles } from '../../nav-menu-styles';
+import { useResponsiveStyles, useTheme } from '../../../../utils';
+export const NavDropdownItem = ({ title, items }) => {
+    const { theme } = useTheme();
+    const [isHovered, setIsHovered] = useState(false);
+    const targetSpacer = useResponsiveStyles({ sm: '0px', lg: '30px' });
+    const styles = {
+        parentBlock: {
+            position: useResponsiveStyles({ sm: 'static', lg: 'relative' }),
+        },
+        textBlock: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '4px',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        arrow: {
+            marginTop: '1px',
+            height: '12px',
+            width: '12px',
+            transition: 'all 200ms',
+            transform: isHovered ? 'rotate(180deg)' : 'rotate(0deg)',
+        },
+        targetArea: {
+            position: 'absolute',
+            width: `calc(100% + ${NavMenuStyles.paddingX * 2}px)`,
+            height: targetSpacer,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            bottom: `-${targetSpacer}`,
+        },
+        dropdownContent: {
+            display: isHovered ? 'block' : 'none',
+            backgroundColor: theme.colors.background,
+            borderWidth: '1px',
+            boxShadow: `0 4px 8px ${theme.colors.background}`,
+            position: 'absolute',
+            width: 'fit-content',
+            borderRadius: theme.border.radius.md,
+            padding: `${NavMenuStyles.paddingY}px ${NavMenuStyles.paddingX}px`,
+            zIndex: 10,
+            top: `calc(100% + ${targetSpacer})`,
+            left: '50%',
+            transform: 'translateX(-50%)',
+        },
+        collapsedDropdownContent: {
+            display: isHovered ? 'flex' : 'none',
+            justifyContent: 'center',
+            columnGap: '24px',
+            alignItems: 'center',
+            backgroundColor: theme.colors.background,
+            width: '100%',
+            borderRadius: theme.border.radius.md,
+            zIndex: 10,
+        },
+    };
+    return (_jsxs("div", { style: styles.parentBlock, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx(BaseItem, { href: "#", children: _jsxs("div", { style: styles.textBlock, children: [_jsx("span", { children: title }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: styles.arrow, children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }) }), isHovered && _jsx("div", { style: styles.targetArea }), _jsx("div", { style: useResponsiveStyles({ sm: styles.collapsedDropdownContent, lg: styles.dropdownContent }), children: items.map((item) => (_jsx(BaseItem, { href: item.href, isDropdownItem: true, children: item.title }, item.title))) })] }));
+};
+//# sourceMappingURL=nav-drop-down-item.js.map

package/dist/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drop-down-item.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.tsx"],"names":[],"mappings":"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"}

package/dist/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.types.d.ts

@@ -0,0 +1,6 @@
+import { NavItemProps } from '../nav-item';
+export type NavDropdownItemProps = {
+    title: string;
+    items: NavItemProps[];
+};
+//# sourceMappingURL=nav-drop-down-item.types.d.ts.map

package/dist/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drop-down-item.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;CACtB,CAAC"}

package/dist/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=nav-drop-down-item.types.js.map

package/dist/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drop-down-item.types.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-drop-down-item/nav-drop-down-item.types.ts"],"names":[],"mappings":""}

package/dist/components/nav-menu/items/nav-icon-item/index.d.ts

@@ -0,0 +1,3 @@
+export { NavIconItemProps } from './nav-icon-item.types';
+export { NavIconItem } from './nav-icon-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/nav-menu/items/nav-icon-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-icon-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/nav-menu/items/nav-icon-item/index.js

@@ -0,0 +1,2 @@
+export { NavIconItem } from './nav-icon-item';
+//# sourceMappingURL=index.js.map

package/dist/components/nav-menu/items/nav-icon-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-icon-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/nav-menu/items/nav-icon-item/nav-icon-item.d.ts

@@ -0,0 +1,3 @@
+import { NavIconItemProps } from './nav-icon-item.types';
+export declare const NavIconItem: ({ href, logo }: NavIconItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=nav-icon-item.d.ts.map

package/dist/components/nav-menu/items/nav-icon-item/nav-icon-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-icon-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-icon-item/nav-icon-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,eAAO,MAAM,WAAW,mBAAoB,gBAAgB,4CAQ3D,CAAC"}

package/dist/components/nav-menu/items/nav-icon-item/nav-icon-item.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { BaseItem } from '../base-item';
+export const NavIconItem = ({ href, logo }) => {
+    return (_jsx(_Fragment, { children: _jsx(BaseItem, { href: href, padding: "4px", children: logo }) }));
+};
+//# sourceMappingURL=nav-icon-item.js.map

package/dist/components/nav-menu/items/nav-icon-item/nav-icon-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-icon-item.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-icon-item/nav-icon-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAoB,EAAE,EAAE;IAC/D,OAAO,CACN,4BACC,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,KAAK,YACjC,IAAI,GACK,GACT,CACH,CAAC;AACH,CAAC,CAAC"}

package/dist/components/nav-menu/items/nav-icon-item/nav-icon-item.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { UtilityColorOptions } from '../../../../types';
+export type NavIconItemProps = {
+    href: string;
+    logo: ReactNode;
+    color?: UtilityColorOptions;
+};
+//# sourceMappingURL=nav-icon-item.types.d.ts.map

package/dist/components/nav-menu/items/nav-icon-item/nav-icon-item.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-icon-item.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-icon-item/nav-icon-item.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC5B,CAAC"}

package/dist/components/nav-menu/items/nav-icon-item/nav-icon-item.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=nav-icon-item.types.js.map

package/dist/components/nav-menu/items/nav-icon-item/nav-icon-item.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-icon-item.types.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-icon-item/nav-icon-item.types.ts"],"names":[],"mappings":""}

package/dist/components/nav-menu/items/nav-item/index.d.ts

@@ -0,0 +1,3 @@
+export { NavItemProps } from './nav-item.types';
+export { NavItem } from './nav-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/nav-menu/items/nav-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/nav-menu/items/nav-item/index.js

@@ -0,0 +1,2 @@
+export { NavItem } from './nav-item';
+//# sourceMappingURL=index.js.map

package/dist/components/nav-menu/items/nav-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/nav-menu/items/nav-item/nav-item.d.ts

@@ -0,0 +1,3 @@
+import { NavItemProps } from './nav-item.types';
+export declare const NavItem: ({ href, title }: NavItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=nav-item.d.ts.map

package/dist/components/nav-menu/items/nav-item/nav-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-item/nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,eAAO,MAAM,OAAO,oBAAqB,YAAY,4CAcpD,CAAC"}

package/dist/components/nav-menu/items/nav-item/nav-item.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { BaseItem } from '../base-item';
+export const NavItem = ({ href, title }) => {
+    const style = {
+        block: {
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    };
+    return (_jsx(_Fragment, { children: _jsx(BaseItem, { href: href, children: title }) }));
+};
+//# sourceMappingURL=nav-item.js.map

package/dist/components/nav-menu/items/nav-item/nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-item/nav-item.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,EAAE,EAAE;IACxD,MAAM,KAAK,GAAG;QACb,KAAK,EAAE;YACN,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;SACxB;KACD,CAAC;IACF,OAAO,CACN,4BACC,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,YAAG,KAAK,GAAY,GACtC,CACH,CAAC;AACH,CAAC,CAAC"}

package/dist/components/nav-menu/items/nav-item/nav-item.types.d.ts

@@ -0,0 +1,5 @@
+export type NavItemProps = {
+    href: string;
+    title: string;
+};
+//# sourceMappingURL=nav-item.types.d.ts.map

package/dist/components/nav-menu/items/nav-item/nav-item.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-item/nav-item.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACd,CAAC"}

package/dist/components/nav-menu/items/nav-item/nav-item.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=nav-item.types.js.map

package/dist/components/nav-menu/items/nav-item/nav-item.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.types.js","sourceRoot":"","sources":["../../../../../src/components/nav-menu/items/nav-item/nav-item.types.ts"],"names":[],"mappings":""}

package/dist/components/nav-menu/nav-menu-styles.d.ts

@@ -0,0 +1,5 @@
+export declare const NavMenuStyles: {
+    paddingX: number;
+    paddingY: number;
+};
+//# sourceMappingURL=nav-menu-styles.d.ts.map

package/dist/components/nav-menu/nav-menu-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-menu-styles.d.ts","sourceRoot":"","sources":["../../../src/components/nav-menu/nav-menu-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;CAGzB,CAAC"}

package/dist/components/nav-menu/nav-menu-styles.js

@@ -0,0 +1,5 @@
+export const NavMenuStyles = {
+    paddingX: 16,
+    paddingY: 16,
+};
+//# sourceMappingURL=nav-menu-styles.js.map

package/dist/components/nav-menu/nav-menu-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-menu-styles.js","sourceRoot":"","sources":["../../../src/components/nav-menu/nav-menu-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;CACZ,CAAC"}

package/dist/components/nav-menu/nav-menu.d.ts

@@ -0,0 +1,3 @@
+import { NavMenuProps } from './nav-menu.types';
+export declare const NavMenu: ({ logo, items }: NavMenuProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=nav-menu.d.ts.map

package/dist/components/nav-menu/nav-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-menu.d.ts","sourceRoot":"","sources":["../../../src/components/nav-menu/nav-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAOhD,eAAO,MAAM,OAAO,oBAAqB,YAAY,4CA8NpD,CAAC"}

package/dist/components/nav-menu/nav-menu.js

@@ -0,0 +1,181 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useResponsiveStyles, useTheme } from '../../utils';
+import { NavIconItem } from './items/nav-icon-item';
+import { NavItem } from './items/nav-item';
+import { NavDropdownItem } from './items/nav-drop-down-item';
+export const NavMenu = ({ logo, items }) => {
+    // Navmenu Controls
+    const [navIsOpened, setNavIsOpened] = useState(false);
+    const closeNavbar = () => {
+        setNavIsOpened(false);
+    };
+    const toggleNavbar = () => {
+        setNavIsOpened((navIsOpened) => !navIsOpened);
+    };
+    // Dropdown Control
+    const [isDropdownHovered, setIsDropdownHovered] = useState(false);
+    const handleMusicHover = (hovered) => {
+        setIsDropdownHovered(hovered);
+    };
+    useEffect(() => {
+        const onResize = () => {
+            closeNavbar();
+        };
+        window.addEventListener('resize', onResize);
+    }, []);
+    useEffect(() => {
+        const handleOutsideClick = (event) => {
+            // Check if the click is outside of the menu
+            const menu = document.getElementById('site-menu');
+            const isClickInsideMenu = menu && menu.contains(event.target);
+            if (!isClickInsideMenu) {
+                closeNavbar();
+            }
+        };
+        document.addEventListener('click', handleOutsideClick);
+        return () => {
+            document.removeEventListener('click', handleOutsideClick);
+        };
+    }, []);
+    const { theme } = useTheme();
+    const style = {
+        header: {
+            position: 'sticky',
+            top: '0px',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            height: '80px',
+            backdropFilter: 'blur(24px)',
+            borderBottomWidth: '1px',
+            borderBottomColor: theme.colors.structure,
+            zIndex: '40',
+            backgroundColor: theme.colors.background,
+        },
+        nav: {
+            width: '100%',
+            marginRight: 'auto',
+            marginLeft: 'auto',
+            paddingRight: '32px',
+            paddingLeft: '32px',
+            position: 'relative',
+            display: 'flex',
+            columnGap: '20px',
+            justifyContent: useResponsiveStyles({ sm: 'space-between ', lg: 'flex-start' }),
+            alignItems: 'center',
+        },
+        menuItemBlock: {
+            animationDuration: '300ms',
+            animationTimingFunction: 'linear',
+            position: useResponsiveStyles({ sm: 'absolute', lg: 'relative' }),
+            top: useResponsiveStyles({ sm: '100%', lg: '0px' }),
+            left: '0px',
+            borderBottomWidth: '1px',
+            backgroundColor: useResponsiveStyles({ sm: 'rgb(255 255 255 / 1)', lg: 'transparent' }),
+            borderColor: '#e5e7eb',
+            paddingTop: useResponsiveStyles({ sm: '32px', lg: '0px' }),
+            paddingBottom: useResponsiveStyles({ sm: '32px', lg: '0px' }),
+            paddingLeft: useResponsiveStyles({ sm: '20px', md: '48px', lg: '0px' }),
+            paddingRight: useResponsiveStyles({ sm: '20px', md: '48px', lg: '0px' }),
+            borderStyle: useResponsiveStyles({ sm: 'solid', lg: 'none' }),
+            width: useResponsiveStyles({ sm: '100%', lg: 'max-content' }),
+            display: useResponsiveStyles({ sm: 'block', lg: 'flex' }),
+            columnGap: '24px',
+            transitionProperty: useResponsiveStyles({ sm: '', md: 'none' }),
+        },
+        menuOpenItemBlock: {
+            transitionDuration: '300ms',
+            transitionTimingFunction: 'linear',
+            visibility: 'visible',
+            opacity: 1,
+            transform: 'translateY(0)',
+        },
+        menuCloseItemBlock: {
+            transitionDuration: '300ms',
+            transitionTimingFunction: 'linear',
+            transform: useResponsiveStyles({
+                sm: 'translateY(2.5rem)', // translate-y-10 (10 * 0.25rem = 2.5rem)
+                lg: 'translateY(0)',
+            }),
+            opacity: useResponsiveStyles({ sm: '0', lg: '1' }),
+            visibility: useResponsiveStyles({ sm: 'hidden', lg: 'visible' }),
+        },
+        itemList: {
+            display: 'flex',
+            flexDirection: useResponsiveStyles({ sm: 'column', lg: 'row' }),
+            gap: '24px',
+            alignItems: useResponsiveStyles({ sm: 'stretch', lg: 'center' }),
+            width: useResponsiveStyles({ sm: 'auto', lg: '100%' }),
+            justifyContent: useResponsiveStyles({ sm: 'flex-center', lg: 'center' }),
+        },
+        menuControl: {
+            display: useResponsiveStyles({ sm: 'flex', lg: 'none' }),
+            alignItems: 'center',
+        },
+        menuControlButton: {
+            outline: '2px solid transparent',
+            outlineOffset: '2px',
+            borderLeftWidth: '1px',
+            borderLeftColor: theme.colors.gray.main,
+            paddingLeft: '12px',
+            position: 'relative',
+            paddingTop: '12px',
+            paddingBottom: '12px',
+        },
+        menuCross: {
+            animationDuration: '300ms',
+            display: 'flex',
+            height: '2px',
+            width: '24px',
+            borderRadius: theme.border.radius.sm,
+            backgroundColor: theme.colors.gray.dark,
+            transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+            transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            transitionDuration: '300ms',
+        },
+        // menuCrossTop: {
+        // 	// margin-top: 0.5rem /* 8px */
+        // },
+        menuCrossBottom: {
+            marginTop: '8px',
+        },
+        menuCrossTopOpen: {
+            transform: 'translate(0, 0.324rem) rotate(45deg)',
+        },
+        menuCrossBottomOpen: {
+            transform: 'translate(0, -0.324rem) rotate(-45deg)',
+        },
+    };
+    const _renderNavItem = ({ href, title }) => {
+        return _jsx(NavItem, { href: href, title: title }, title);
+    };
+    const _renderNavDropdown = ({ title, items }) => {
+        return _jsx(NavDropdownItem, { title: title, items: items }, title);
+    };
+    const _renderItem = (item) => {
+        if ('href' in item) {
+            // item is of type NavItem
+            return _renderNavItem(item);
+        }
+        else {
+            // item is of type NavDropdownItem
+            return _renderNavDropdown(item);
+        }
+    };
+    return (_jsx(_Fragment, { children: _jsx("header", { id: "site-menu", style: style.header, children: _jsxs("nav", { style: style.nav, children: [logo && _jsx(NavIconItem, { href: logo.href, logo: logo.logo }), _jsx("div", { style: {
+                            ...style.menuItemBlock,
+                            ...(navIsOpened ? style.menuOpenItemBlock : style.menuCloseItemBlock),
+                        }, children: _jsx("ul", { style: style.itemList, children: items.map((item) => _renderItem(item)) }) }), _jsx("div", { style: style.menuControl, children: _jsxs("button", { onClick: () => {
+                                toggleNavbar();
+                            }, "aria-label": "toggle navbar", children: [_jsx("span", { "aria-hidden": true, style: {
+                                        ...style.menuCross,
+                                        ...(navIsOpened ? style.menuCrossTopOpen : {}),
+                                    } }), _jsx("span", { "aria-hidden": true, style: {
+                                        ...style.menuCross,
+                                        ...style.menuCrossBottom,
+                                        ...(navIsOpened ? style.menuCrossBottomOpen : {}),
+                                    } })] }) })] }) }) }));
+};
+//# sourceMappingURL=nav-menu.js.map