@kimdw-rtk/ui 0.0.2 → 0.0.3

package/dist/components/Chip/Chip.css.js

@@ -0,0 +1,56 @@
+import { createVar } from '@vanilla-extract/css';
+import { recipeWithLayer, styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+import { semanticColor } from '#tokens';
+import { SCALE_COLOR } from '../../tokens/scale/color';
+const backgroundVar = createVar();
+const foregroundVar = createVar();
+const semanticColors = semanticColor.reduce((prev, color) => ({
+    ...prev,
+    [color]: styleWithLayer({
+        vars: {
+            [backgroundVar]: theme.color[color],
+            [foregroundVar]: theme.color[`${color}-foreground`],
+        },
+    }),
+}), {});
+const scaleColors = SCALE_COLOR.reduce((prev, value) => ({
+    ...prev,
+    [value]: styleWithLayer({
+        vars: {
+            [backgroundVar]: theme.color[value][500],
+            [foregroundVar]: theme.color[value][50],
+        },
+    }),
+}), {});
+export const chip = recipeWithLayer({
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        lineHeight: '0',
+        gap: '0.125em',
+        height: '2em',
+        padding: '0 0.75em',
+        borderRadius: theme.borderRadius,
+        backgroundColor: `rgb(${backgroundVar})`,
+        color: `rgb(${foregroundVar})`,
+        userSelect: 'none',
+    },
+    variants: {
+        color: {
+            ...semanticColors,
+            ...scaleColors,
+        },
+        size: {
+            sm: {
+                fontSize: '0.75em',
+            },
+            md: {
+                fontSize: '0.875em',
+            },
+            lg: {
+                fontSize: '1em',
+            },
+        },
+    },
+});

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,QAAQ,CAAC;AAE1C,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,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import * as s from './Chip.css';
+export const Chip = forwardRef(({ children, className, color = 'primary', size = 'md', sx: propSx, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: clsx(s.chip({ color, size }), className, sx(propSx)), ...props, children: _jsx("span", { children: children }) }));
+});
+Chip.displayName = 'Chip';
+export { s as chipCss };

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/Chip.spec.js

@@ -0,0 +1,5 @@
+import { uiTest } from '../../tests/uiTest';
+import { Chip } from './Chip';
+describe('Chip 컴포넌트', () => {
+    uiTest(Chip, 'Chip');
+});

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/Chip/index.js

@@ -0,0 +1 @@
+export * from './Chip';

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,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle } from 'react';
+import { useOverlay, usePreventKeyboardInput } from '@kimdw-rtk/utils';
+import { Box, Button, Dialog, DialogContent, DialogFooter } from '#components';
+export const Confirm = ({ children, ref, onConfirm, onCancle, }) => {
+    const { close } = useOverlay();
+    usePreventKeyboardInput();
+    useImperativeHandle(ref, () => ({
+        close,
+    }));
+    return (_jsxs(Dialog, { children: [_jsx(DialogContent, { children: children }), _jsx(DialogFooter, { children: _jsxs(Box, { flex: true, gap: "md", children: [_jsx(Button, { size: "sm", onClick: onConfirm, children: "\uD655\uC778" }), _jsx(Button, { color: "secondary", size: "sm", onClick: onCancle, children: "\uCDE8\uC18C" })] }) })] }));
+};

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,19 @@
+import { style } from '@vanilla-extract/css';
+import { theme } from '#themes';
+export 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})`,
+});
+export const message = style({
+    marginBottom: '1rem',
+    lineHeight: '150%',
+    wordBreak: 'break-all',
+});

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,QAAQ,CAAC;AAI1C,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,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Box } from '#components';
+import { sx } from '#styles';
+import * as s from './Dialog.css';
+export const Dialog = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (_jsx(Box, { ref: ref, flex: true, flexDirection: "row", gap: "lg", boxShadow: "border-sm", className: clsx(s.container, className, sx(propSx)), ...props, children: children }));
+});
+Dialog.displayName = '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/Dialog.spec.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from '#components';
+import { uiTest } from '../../tests/uiTest';
+describe('Dialog 컴포넌트', () => {
+    uiTest(Dialog, 'Dialog');
+    uiTest(DialogHeader, 'DialogHeader');
+    uiTest(DialogContent, 'DialogContent');
+    uiTest(DialogFooter, 'DialogFooter');
+    it('DialogHeader의 닫기 버튼을 클릭하면 onCloseClick이 호출되어야 한다', () => {
+        const handleCloseClick = jest.fn();
+        render(_jsxs(Dialog, { children: [_jsx(DialogHeader, { onCloseClick: handleCloseClick, children: "Header" }), _jsx(DialogContent, { children: "Content" })] }));
+        fireEvent.click(screen.getByRole('button', { name: '닫기' }));
+        expect(handleCloseClick).toHaveBeenCalledTimes(1);
+    });
+});

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,12 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+import * as header from './DialogHeader.css';
+export const container = styleWithLayer({
+    padding: '0 1.5rem 1.5rem 1.5rem',
+    wordBreak: 'break-all',
+    selectors: {
+        [`${header.container} + &`]: {
+            color: `rgb(${theme.color['muted-foreground']})`,
+        },
+    },
+});

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,QAAQ,CAAC;AAI1C,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,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Box } from '#components';
+import { sx } from '#styles';
+import * as s from './DialogContent.css';
+export const DialogContent = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (_jsx(Box, { ref: ref, className: clsx(s.container, className, sx(propSx)), ...props, children: children }));
+});
+DialogContent.displayName = '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.css.js

@@ -0,0 +1,15 @@
+import { styleWithLayer } from '#styleUtils';
+export const container = styleWithLayer({
+    maxWidth: 'calc(100vw - 2rem)',
+    minWidth: 'min(20rem, calc(100vw - 2rem))',
+    padding: '1rem',
+    borderRadius: '0.25rem',
+    boxSizing: 'border-box',
+    backgroundColor: '#fff',
+    userSelect: 'none',
+});
+export const message = styleWithLayer({
+    marginBottom: '1rem',
+    lineHeight: '150%',
+    wordBreak: 'break-all',
+});

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,QAAQ,CAAC;AAE1C,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,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Box } from '#components';
+import { sx } from '#styles';
+export const DialogFooter = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (_jsx(Box, { ref: ref, flex: true, justifyContent: "flex-end", className: clsx(className, sx(propSx)), ...props, children: children }));
+});
+DialogFooter.displayName = '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,23 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+export const container = styleWithLayer({
+    position: 'sticky',
+    top: '0',
+    padding: '1.5rem',
+    zIndex: '10',
+    backgroundColor: `rgb(${theme.color.background})`,
+});
+export 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']})`,
+    },
+});

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,QAAQ,CAAC;AAI1C,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,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { XIcon } from 'lucide-react';
+import { Box } from '#components';
+import { sx } from '#styles';
+import * as s from './DialogHeader.css';
+export const DialogHeader = forwardRef(({ children, className, sx: propSx, onCloseClick, ...props }, ref) => {
+    return (_jsxs(Box, { ref: ref, flex: true, justifyContent: "space-between", alignItems: "center", fontSize: "lg", fontWeight: "normal", className: clsx(s.container, className, sx(propSx)), ...props, children: [_jsx("span", { children: children }), _jsx("button", { className: s.close, onClick: onCloseClick, "aria-label": "\uB2EB\uAE30", children: _jsx(XIcon, {}) })] }));
+});
+DialogHeader.displayName = '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/Dialog/index.js

@@ -0,0 +1,4 @@
+export * from './Dialog';
+export * from './DialogContent';
+export * from './DialogFooter';
+export * from './DialogHeader';

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/Navigation.spec.js

@@ -0,0 +1,11 @@
+import { NavigationAside, NavigationBar, NavigationItem, NavigationLogo, NavigationMenu, } from '#components';
+import { uiTest } from '../../tests/uiTest';
+import { NavigationContainer } from './NavigationContainer';
+describe('Navigation 컴포넌트', () => {
+    uiTest(NavigationAside, 'NavigationAside');
+    uiTest(NavigationBar, 'NavigationBar');
+    uiTest(NavigationItem, 'NavigationItem');
+    uiTest(NavigationLogo, 'NavigationLogo');
+    uiTest(NavigationMenu, 'NavigationMenu');
+    uiTest(NavigationContainer, 'NavigationContainer');
+});

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,6 @@
+import { styleWithLayer } from '#styleUtils';
+export const wide = styleWithLayer({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5em',
+});

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,QAAQ,CAAC;AAI1C,KAAK,oBAAoB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAEjD,eAAO,MAAM,eAAe,2HAQ3B,CAAC"}

package/dist/components/Navigation/NavigationAside.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import * as s from './NavigationAside.css';
+export const NavigationAside = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (_jsx("aside", { ref: ref, className: clsx(className, sx(propSx)), ...props, children: _jsx("div", { className: s.wide, children: children }) }));
+});
+NavigationAside.displayName = '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,32 @@
+import { createContainer } from '@vanilla-extract/css';
+import { recipeWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+export const navigationBarContainer = createContainer();
+export 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',
+            },
+        },
+    },
+});

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,QAAQ,CAAC;AAE1C,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,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import * as s from './NavigationBar.css';
+export const NavigationBar = forwardRef(({ className, size = 'md', sx: propSx, ...props }, ref) => {
+    return (_jsx("nav", { ref: ref, className: clsx(s.navigationBar({ size }), className, sx(propSx)), ...props }));
+});
+NavigationBar.displayName = 'NavigationBar';
+export { s as navigationBarCss };

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,9 @@
+import { style } from '@vanilla-extract/css';
+export const container = style({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '0.5em',
+    height: '100%',
+    margin: '0 auto',
+});

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,QAAQ,CAAC;AAI1C,KAAK,wBAAwB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAEnD,eAAO,MAAM,mBAAmB,kIAa9B,CAAC"}

package/dist/components/Navigation/NavigationContainer.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import * as s from './NavigationContainer.css';
+export const NavigationContainer = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: clsx(className, s.container, sx(propSx)), ...props, children: children }));
+});
+NavigationContainer.displayName = '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"}