@kimdw-rtk/ui 0.0.20 → 0.0.21

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,6 @@
+import type { UIComponent } from '@/types';
+import * as s from './Chip.css';
+type ChipProps = UIComponent<'div', typeof s.chip>;
+export declare const Chip: import("react").ForwardRefExoticComponent<Omit<ChipProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { s as chipCss };
+//# sourceMappingURL=Chip.d.ts.map

package/dist/components/Chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC;AAEhC,KAAK,SAAS,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;AAEnD,eAAO,MAAM,IAAI,mHAsBhB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC"}

package/dist/components/Chip/Chip.js

@@ -0,0 +1,14 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { chip } from './Chip.css.js';
+import * as Chip_css from './Chip.css.js';
+export { Chip_css as chipCss };
+import { sx } from '../../styles/sx.js';
+
+const Chip = forwardRef(({ children, className, color = 'primary', size = 'md', sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(chip({ color, size }), className, sx(propSx)), ...props, children: jsxRuntimeExports.jsx("span", { children: children }) }));
+});
+Chip.displayName = 'Chip';
+
+export { Chip };

package/dist/components/Chip/Chip.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Chip.spec.d.ts.map

package/dist/components/Chip/Chip.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.spec.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.spec.tsx"],"names":[],"mappings":""}

package/dist/components/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Chip';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/Confirm/index.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode, type Ref } from 'react';
+interface ConfirmProps {
+    children: ReactNode;
+    ref?: Ref<{
+        close: () => void;
+    }>;
+    onConfirm: () => void;
+    onCancle: () => void;
+}
+export declare const Confirm: ({ children, ref, onConfirm, onCancle, }: ConfirmProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Confirm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Confirm/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAMtE,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,GAAI,yCAKrB,YAAY,4CAuBd,CAAC"}

package/dist/components/Confirm/index.js

@@ -0,0 +1,19 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { useImperativeHandle } from 'react';
+import { useOverlay, usePreventKeyboardInput } from '@kimdw-rtk/utils';
+import { Box } from '../Box/index.js';
+import { Dialog } from '../Dialog/Dialog.js';
+import { DialogContent } from '../Dialog/DialogContent.js';
+import { DialogFooter } from '../Dialog/DialogFooter.js';
+import { Button } from '../Button/index.js';
+
+const Confirm = ({ children, ref, onConfirm, onCancle, }) => {
+    const { close } = useOverlay();
+    usePreventKeyboardInput();
+    useImperativeHandle(ref, () => ({
+        close,
+    }));
+    return (jsxRuntimeExports.jsxs(Dialog, { children: [jsxRuntimeExports.jsx(DialogContent, { children: children }), jsxRuntimeExports.jsx(DialogFooter, { children: jsxRuntimeExports.jsxs(Box, { flex: true, gap: "md", children: [jsxRuntimeExports.jsx(Button, { size: "sm", onClick: onConfirm, children: "\uD655\uC778" }), jsxRuntimeExports.jsx(Button, { color: "secondary", size: "sm", onClick: onCancle, children: "\uCDE8\uC18C" })] }) })] }));
+};
+
+export { Confirm };

package/dist/components/Dialog/Dialog.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const message: string;
+//# sourceMappingURL=Dialog.css.d.ts.map

package/dist/components/Dialog/Dialog.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,QAapB,CAAC;AAEH,eAAO,MAAM,OAAO,QAKlB,CAAC"}

package/dist/components/Dialog/Dialog.css.js

@@ -0,0 +1,22 @@
+import { style } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { theme } from '../../themes/theme.css.js';
+
+const container = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    overflowY: 'auto',
+    maxWidth: 'calc(100vw - 2rem)',
+    minWidth: 'min(20rem, calc(100vw - 2rem))',
+    maxHeight: 'calc(100vh - 2rem)',
+    borderRadius: theme.borderRadius,
+    boxSizing: 'border-box',
+    backgroundColor: `rgb(${theme.color.background})`,
+});
+style({
+    marginBottom: '1rem',
+    lineHeight: '150%',
+    wordBreak: 'break-all',
+});
+
+export { container };

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '@/types';
+type DialogProps = Omit<UIComponent<'div'>, 'color'>;
+export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,KAAK,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,eAAO,MAAM,MAAM,qHAgBlB,CAAC"}

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,13 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { container } from './Dialog.css.js';
+import { Box } from '../Box/index.js';
+import { sx } from '../../styles/sx.js';
+
+const Dialog = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx(Box, { ref: ref, flex: true, flexDirection: "row", gap: "lg", boxShadow: "border-sm", className: clsx(container, className, sx(propSx)), ...props, children: children }));
+});
+Dialog.displayName = 'Dialog';
+
+export { Dialog };

package/dist/components/Dialog/Dialog.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Dialog.spec.d.ts.map

package/dist/components/Dialog/Dialog.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.spec.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.spec.tsx"],"names":[],"mappings":""}

package/dist/components/Dialog/DialogContent.css.d.ts

@@ -0,0 +1,2 @@
+export declare const container: string;
+//# sourceMappingURL=DialogContent.css.d.ts.map

package/dist/components/Dialog/DialogContent.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogContent.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,QAUpB,CAAC"}

package/dist/components/Dialog/DialogContent.css.js

@@ -0,0 +1,15 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { container as container$1 } from './DialogHeader.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const container = styleWithLayer({
+    padding: '0 1.5rem 1.5rem 1.5rem',
+    wordBreak: 'break-all',
+    selectors: {
+        [`${container$1} + &`]: {
+            color: `rgb(${theme.color['muted-foreground']})`,
+        },
+    },
+});
+
+export { container };

package/dist/components/Dialog/DialogContent.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '@/types';
+type DialogContentProps = Omit<UIComponent<'div'>, 'color'>;
+export declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=DialogContent.d.ts.map

package/dist/components/Dialog/DialogContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,KAAK,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE5D,eAAO,MAAM,aAAa,4HAYzB,CAAC"}

package/dist/components/Dialog/DialogContent.js

@@ -0,0 +1,13 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { container } from './DialogContent.css.js';
+import { Box } from '../Box/index.js';
+import { sx } from '../../styles/sx.js';
+
+const DialogContent = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx(Box, { ref: ref, className: clsx(container, className, sx(propSx)), ...props, children: children }));
+});
+DialogContent.displayName = 'DialogContent';
+
+export { DialogContent };

package/dist/components/Dialog/DialogFooter.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const message: string;
+//# sourceMappingURL=DialogFooter.css.d.ts.map

package/dist/components/Dialog/DialogFooter.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFooter.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogFooter.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAUpB,CAAC;AAEH,eAAO,MAAM,OAAO,QAKlB,CAAC"}

package/dist/components/Dialog/DialogFooter.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '@/types';
+type DialogFooterProps = Omit<UIComponent<'div'>, 'color'>;
+export declare const DialogFooter: import("react").ForwardRefExoticComponent<Omit<DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=DialogFooter.d.ts.map

package/dist/components/Dialog/DialogFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogFooter.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE3D,eAAO,MAAM,YAAY,2HAcxB,CAAC"}

package/dist/components/Dialog/DialogFooter.js

@@ -0,0 +1,12 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { Box } from '../Box/index.js';
+import { sx } from '../../styles/sx.js';
+
+const DialogFooter = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx(Box, { ref: ref, flex: true, justifyContent: "flex-end", className: clsx(className, sx(propSx)), ...props, children: children }));
+});
+DialogFooter.displayName = 'DialogFooter';
+
+export { DialogFooter };

package/dist/components/Dialog/DialogHeader.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const close: string;
+//# sourceMappingURL=DialogHeader.css.d.ts.map

package/dist/components/Dialog/DialogHeader.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogHeader.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAOpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAkBhB,CAAC"}

package/dist/components/Dialog/DialogHeader.css.js

@@ -0,0 +1,26 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const container = styleWithLayer({
+    position: 'sticky',
+    top: '0',
+    padding: '1.5rem',
+    zIndex: '10',
+    backgroundColor: `rgb(${theme.color.background})`,
+});
+const close = styleWithLayer({
+    width: '1.25rem',
+    height: '1.25rem',
+    padding: '0',
+    border: '0',
+    backgroundColor: 'transparent',
+    fontSize: '1em',
+    color: `rgb(${theme.color['muted-foreground']})`,
+    cursor: 'pointer',
+    transition: 'color 0.1s ease',
+    ':hover': {
+        color: `rgb(${theme.color['foreground']})`,
+    },
+});
+
+export { close, container };

package/dist/components/Dialog/DialogHeader.d.ts

@@ -0,0 +1,7 @@
+import type { UIComponent } from '@/types';
+interface DialogHeaderProps extends Omit<UIComponent<'div'>, 'color'> {
+    onCloseClick?: () => void;
+}
+export declare const DialogHeader: import("react").ForwardRefExoticComponent<Omit<DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=DialogHeader.d.ts.map

package/dist/components/Dialog/DialogHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,UAAU,iBAAkB,SAAQ,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACnE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,2HAoBxB,CAAC"}

package/dist/components/Dialog/DialogHeader.js

@@ -0,0 +1,14 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { close, container } from './DialogHeader.css.js';
+import X from '../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/x.js';
+import { Box } from '../Box/index.js';
+import { sx } from '../../styles/sx.js';
+
+const DialogHeader = forwardRef(({ children, className, sx: propSx, onCloseClick, ...props }, ref) => {
+    return (jsxRuntimeExports.jsxs(Box, { ref: ref, flex: true, justifyContent: "space-between", alignItems: "center", fontSize: "lg", fontWeight: "normal", className: clsx(container, className, sx(propSx)), ...props, children: [jsxRuntimeExports.jsx("span", { children: children }), jsxRuntimeExports.jsx("button", { className: close, onClick: onCloseClick, "aria-label": "\uB2EB\uAE30", children: jsxRuntimeExports.jsx(X, {}) })] }));
+});
+DialogHeader.displayName = 'DialogHeader';
+
+export { DialogHeader };

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Dialog';
+export * from './DialogContent';
+export * from './DialogFooter';
+export * from './DialogHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/dist/components/Navigation/Navigation.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Navigation.spec.d.ts.map

package/dist/components/Navigation/Navigation.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.spec.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/Navigation.spec.tsx"],"names":[],"mappings":""}

package/dist/components/Navigation/NavigationAside.css.d.ts

@@ -0,0 +1,2 @@
+export declare const wide: string;
+//# sourceMappingURL=NavigationAside.css.d.ts.map

package/dist/components/Navigation/NavigationAside.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationAside.css.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationAside.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAIf,CAAC"}

package/dist/components/Navigation/NavigationAside.css.js

@@ -0,0 +1,9 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+
+const wide = styleWithLayer({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5em',
+});
+
+export { wide };

package/dist/components/Navigation/NavigationAside.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '@/types';
+type NavigationAsideProps = UIComponent<'aside'>;
+export declare const NavigationAside: import("react").ForwardRefExoticComponent<Omit<NavigationAsideProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=NavigationAside.d.ts.map

package/dist/components/Navigation/NavigationAside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationAside.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationAside.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,KAAK,oBAAoB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAEjD,eAAO,MAAM,eAAe,2HAQ3B,CAAC"}

package/dist/components/Navigation/NavigationAside.js

@@ -0,0 +1,12 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { wide } from './NavigationAside.css.js';
+import { sx } from '../../styles/sx.js';
+
+const NavigationAside = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("aside", { ref: ref, className: clsx(className, sx(propSx)), ...props, children: jsxRuntimeExports.jsx("div", { className: wide, children: children }) }));
+});
+NavigationAside.displayName = 'NavigationAside';
+
+export { NavigationAside };

package/dist/components/Navigation/NavigationBar.css.d.ts

@@ -0,0 +1,15 @@
+export declare const navigationBarContainer: string;
+export declare const navigationBar: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: {
+            height: "4em";
+        };
+        md: {
+            height: "5em";
+        };
+        lg: {
+            height: "6em";
+        };
+    };
+}>;
+//# sourceMappingURL=NavigationBar.css.d.ts.map

package/dist/components/Navigation/NavigationBar.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBar.css.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationBar.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB,QAAoB,CAAC;AAExD,eAAO,MAAM,aAAa;;;;;;;;;;;;EAkCxB,CAAC"}

package/dist/components/Navigation/NavigationBar.css.js

@@ -0,0 +1,35 @@
+import { createContainer } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const navigationBarContainer = createContainer();
+const navigationBar = recipeWithLayer({
+    base: {
+        zIndex: '20',
+        position: 'sticky',
+        top: '0',
+        width: '100%',
+        borderBottom: `1px solid rgb(${theme.color['border.weak']})`,
+        backgroundColor: `rgba(${theme.color.background}, 0.75)`,
+        backdropFilter: 'blur(2rem) saturate(150%)',
+        color: `rgb(${theme.color.border})`,
+        transition: 'border-bottom-color 0.2s ease',
+        containerType: 'inline-size',
+        containerName: navigationBarContainer,
+    },
+    variants: {
+        size: {
+            sm: {
+                height: '4em',
+            },
+            md: {
+                height: '5em',
+            },
+            lg: {
+                height: '6em',
+            },
+        },
+    },
+});
+
+export { navigationBar, navigationBarContainer };

package/dist/components/Navigation/NavigationBar.d.ts

@@ -0,0 +1,6 @@
+import type { UIComponent } from '@/types';
+import * as s from './NavigationBar.css';
+type NavigationBarProps = UIComponent<'nav', typeof s.navigationBar>;
+export declare const NavigationBar: import("react").ForwardRefExoticComponent<Omit<NavigationBarProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export { s as navigationBarCss };
+//# sourceMappingURL=NavigationBar.d.ts.map

package/dist/components/Navigation/NavigationBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationBar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,qBAAqB,CAAC;AAEzC,KAAK,kBAAkB,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC;AAErE,eAAO,MAAM,aAAa,yHAUzB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,gBAAgB,EAAE,CAAC"}

package/dist/components/Navigation/NavigationBar.js

@@ -0,0 +1,14 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { navigationBar } from './NavigationBar.css.js';
+import * as NavigationBar_css from './NavigationBar.css.js';
+export { NavigationBar_css as navigationBarCss };
+import { sx } from '../../styles/sx.js';
+
+const NavigationBar = forwardRef(({ className, size = 'md', sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("nav", { ref: ref, className: clsx(navigationBar({ size }), className, sx(propSx)), ...props }));
+});
+NavigationBar.displayName = 'NavigationBar';
+
+export { NavigationBar };

package/dist/components/Navigation/NavigationContainer.css.d.ts

@@ -0,0 +1,2 @@
+export declare const container: string;
+//# sourceMappingURL=NavigationContainer.css.d.ts.map

package/dist/components/Navigation/NavigationContainer.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationContainer.css.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationContainer.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAQpB,CAAC"}

package/dist/components/Navigation/NavigationContainer.css.js

@@ -0,0 +1,12 @@
+import { style } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+
+const container = style({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '0.5em',
+    height: '100%',
+    margin: '0 auto',
+});
+
+export { container };

package/dist/components/Navigation/NavigationContainer.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '@/types';
+type NavigationContainerProps = UIComponent<'div'>;
+export declare const NavigationContainer: import("react").ForwardRefExoticComponent<Omit<NavigationContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=NavigationContainer.d.ts.map

package/dist/components/Navigation/NavigationContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,KAAK,wBAAwB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAEnD,eAAO,MAAM,mBAAmB,kIAa9B,CAAC"}

package/dist/components/Navigation/NavigationContainer.js

@@ -0,0 +1,12 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { container } from './NavigationContainer.css.js';
+import { sx } from '../../styles/sx.js';
+
+const NavigationContainer = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(className, container, sx(propSx)), ...props, children: children }));
+});
+NavigationContainer.displayName = 'NavigationContainer';
+
+export { NavigationContainer };

package/dist/components/Navigation/NavigationDrawer.css.d.ts

@@ -0,0 +1,14 @@
+export declare const narrow: string;
+export declare const wide: string;
+export declare const popup: import("@vanilla-extract/recipes").RuntimeFn<{
+    isVisible: {
+        true: {
+            opacity: "1";
+        };
+        false: {
+            opacity: "0";
+            pointerEvents: "none";
+        };
+    };
+}>;
+//# sourceMappingURL=NavigationDrawer.css.d.ts.map

package/dist/components/Navigation/NavigationDrawer.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationDrawer.css.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationDrawer.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM,QAQjB,CAAC;AAEH,eAAO,MAAM,IAAI,QAYf,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;EA+BhB,CAAC"}

package/dist/components/Navigation/NavigationDrawer.css.js

@@ -0,0 +1,52 @@
+import { styleWithLayer, recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { navigationBarContainer } from './NavigationBar.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const narrow = styleWithLayer({
+    display: 'none',
+    '@container': {
+        [`${navigationBarContainer} (max-width: 800px)`]: {
+            display: 'block',
+        },
+    },
+});
+const wide = styleWithLayer({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '0.5em',
+    flexGrow: '1',
+    '@container': {
+        [`${navigationBarContainer} (max-width: 800px)`]: {
+            display: 'none',
+        },
+    },
+});
+const popup = recipeWithLayer({
+    base: {
+        position: 'absolute',
+        top: '100%',
+        height: 'calc(100vh - 100%)',
+        left: '0',
+        width: '100%',
+        zIndex: '100',
+        maxHeight: '100vh',
+        padding: '0.75em',
+        borderBottom: `1px solid rgb(${theme.color.border})`,
+        backgroundColor: `rgb(${theme.color.background})`,
+        transition: 'opacity 0.2s ease',
+    },
+    variants: {
+        isVisible: {
+            true: {
+                opacity: '1',
+            },
+            false: {
+                opacity: '0',
+                pointerEvents: 'none',
+            },
+        },
+    },
+});
+
+export { narrow, popup, wide };

package/dist/components/Navigation/NavigationDrawer.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+interface NavigationDrawerProps {
+    menu: ReactNode;
+    aside: ReactNode;
+}
+export declare const NavigationDrawer: ({ menu, aside }: NavigationDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NavigationDrawer.d.ts.map

package/dist/components/Navigation/NavigationDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ5D,UAAU,qBAAqB;IAC7B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,gBAAgB,GAAI,iBAAiB,qBAAqB,4CAmDtE,CAAC"}

package/dist/components/Navigation/NavigationDrawer.js

@@ -0,0 +1,27 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { useState, useEffect } from 'react';
+import { wide, narrow, popup } from './NavigationDrawer.css.js';
+import X from '../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/x.js';
+import AlignJustify from '../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/align-justify.js';
+import { Button } from '../Button/index.js';
+import { Box } from '../Box/index.js';
+
+const NavigationDrawer = ({ menu, aside }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const handleClick = () => {
+        setIsExpanded((prev) => !prev);
+    };
+    useEffect(() => {
+        if (isExpanded) {
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            if (isExpanded) {
+                document.body.style.overflow = 'auto';
+            }
+        };
+    }, [isExpanded]);
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: wide, children: [menu, aside] }), jsxRuntimeExports.jsxs("div", { className: narrow, children: [jsxRuntimeExports.jsx(Button, { size: "icon-md", color: "secondary", variant: "ghost", onClick: handleClick, children: isExpanded ? jsxRuntimeExports.jsx(X, {}) : jsxRuntimeExports.jsx(AlignJustify, {}) }), jsxRuntimeExports.jsx("div", { className: popup({ isVisible: isExpanded }), children: jsxRuntimeExports.jsxs(Box, { flex: true, gap: "xl", flexDirection: "column-reverse", alignItems: "flex-end", paddingY: "lg", children: [jsxRuntimeExports.jsx(Box, { width: "100%", onClick: () => setIsExpanded(false), children: menu }), aside] }) })] })] }));
+};
+
+export { NavigationDrawer };

package/dist/components/Navigation/NavigationItem.css.d.ts

@@ -0,0 +1,11 @@
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+    isSelected: {
+        true: {
+            color: `rgb(var(--${string}))`;
+        };
+        false: {
+            color: `rgba(var(--${string}), 0.5)`;
+        };
+    };
+}>;
+//# sourceMappingURL=NavigationItem.css.d.ts.map