@worknice/whiteboard 0.0.2 → 0.0.3

package/dist/forms/FormStatusIndicator.js

@@ -0,0 +1,40 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__FormStatusIndicator_module_js_4888e7ef__ from "./FormStatusIndicator.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
+const FormStatusIndicator = ({ id, status })=>{
+    switch(status){
+        case "disabled":
+            return null;
+        case "errored":
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FormStatusIndicator_module_js_4888e7ef__["default"].indicator, __WEBPACK_EXTERNAL_MODULE__FormStatusIndicator_module_js_4888e7ef__["default"].error),
+                id: id,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                    symbol: "Warning"
+                })
+            });
+        case "loading":
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FormStatusIndicator_module_js_4888e7ef__["default"].indicator, __WEBPACK_EXTERNAL_MODULE__FormStatusIndicator_module_js_4888e7ef__["default"].loading),
+                id: id,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                    animate: true,
+                    symbol: "Loading"
+                })
+            });
+        case "fresh":
+        case "modified":
+            return null;
+        case "success":
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FormStatusIndicator_module_js_4888e7ef__["default"].indicator, __WEBPACK_EXTERNAL_MODULE__FormStatusIndicator_module_js_4888e7ef__["default"].success),
+                id: id,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                    symbol: "Success"
+                })
+            });
+    }
+};
+const FormStatusIndicator_rslib_entry_ = FormStatusIndicator;
+export { FormStatusIndicator_rslib_entry_ as default };

package/dist/forms/FormStatusIndicator.module.js

@@ -0,0 +1,8 @@
+import "./FormStatusIndicator_module.css";
+const FormStatusIndicator_module_rslib_entry_ = {
+    indicator: "indicator-S9msf0",
+    error: "error-PKzTPf",
+    loading: "loading-U2WuNk",
+    success: "success-CSCH4Z"
+};
+export { FormStatusIndicator_module_rslib_entry_ as default };

package/dist/forms/FormStatusIndicator_module.css

@@ -0,0 +1,18 @@
+.indicator-S9msf0 {
+  font: var(--font-regular-bold);
+  align-items: center;
+  display: flex;
+}
+
+.error-PKzTPf {
+  color: var(--color-red-000);
+}
+
+.loading-U2WuNk {
+  color: var(--color-purple-000);
+}
+
+.success-CSCH4Z {
+  color: var(--color-green-000);
+}
+

package/dist/forms/RegularField.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { ValidationError } from "./_types";
+type Props = {
+    children: ReactNode;
+    description?: ReactNode;
+    errors?: Array<ValidationError>;
+    id?: string;
+    inputId?: string;
+    label: ReactNode;
+    labelFont?: "heading" | "subheading" | "label" | "regular-bold" | "regular" | "small";
+    required?: boolean;
+};
+declare const RegularField: ({ children, description, errors, id, inputId, label, labelFont, required, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default RegularField;

package/dist/forms/RegularField.js

@@ -0,0 +1,47 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__ from "./RegularField.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__FormErrorList_js_8b07ab1b__ from "./FormErrorList.js";
+const RegularField = ({ children, description, errors, id, inputId, label, labelFont = "label", required })=>{
+    const hasErrors = null != errors && errors.length > 0;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__["default"].field, {
+            [__WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__["default"].hasErrors]: hasErrors
+        }),
+        id: id,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__["default"].head,
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("label", {
+                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__["default"].label, {
+                            [__WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__["default"].heading]: "heading" === labelFont,
+                            [__WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__["default"].subheading]: "subheading" === labelFont,
+                            [__WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__["default"].regularBold]: "regular-bold" === labelFont,
+                            [__WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__["default"].regular]: "regular" === labelFont,
+                            [__WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__["default"].small]: "small" === labelFont
+                        }),
+                        htmlFor: inputId,
+                        children: label
+                    }),
+                    required ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__RegularField_module_js_8de17b7e__["default"].required,
+                        children: "Required"
+                    }) : null
+                ]
+            }),
+            description ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                children: description
+            }) : null,
+            hasErrors ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__FormErrorList_js_8b07ab1b__["default"], {
+                errors: errors,
+                size: "small"
+            }) : null,
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                children: children
+            })
+        ]
+    });
+};
+const RegularField_rslib_entry_ = RegularField;
+export { RegularField_rslib_entry_ as default };

package/dist/forms/RegularField.module.js

@@ -0,0 +1,14 @@
+import "./RegularField_module.css";
+const RegularField_module_rslib_entry_ = {
+    field: "field-GH9QIA",
+    head: "head-s5Zr2b",
+    label: "label-NaCbZE",
+    heading: "heading-ofYGhi",
+    subheading: "subheading-g9GfnF",
+    regularBold: "regularBold-r51mgx",
+    regular: "regular-VGb3NF",
+    small: "small-krjczq",
+    hasErrors: "hasErrors-eXbO7M",
+    required: "required-ASR__G"
+};
+export { RegularField_module_rslib_entry_ as default };

package/dist/forms/RegularField_module.css

@@ -0,0 +1,47 @@
+.field-GH9QIA {
+  gap: var(--size-n2);
+  display: grid;
+  position: relative;
+}
+
+.head-s5Zr2b {
+  align-items: baseline;
+  gap: var(--size-n3);
+  grid-template-columns: 1fr auto;
+  display: grid;
+}
+
+.head-s5Zr2b .label-NaCbZE {
+  font: var(--font-regular-bold);
+  grid-column: 1 / 2;
+}
+
+.head-s5Zr2b .label-NaCbZE.heading-ofYGhi {
+  font: var(--font-h2);
+}
+
+.head-s5Zr2b .label-NaCbZE.subheading-g9GfnF {
+  font: var(--font-h3);
+}
+
+.head-s5Zr2b .label-NaCbZE.regularBold-r51mgx {
+  font: var(--font-regular-bold);
+}
+
+.head-s5Zr2b .label-NaCbZE.regular-VGb3NF {
+  font: var(--font-regular);
+}
+
+.head-s5Zr2b .label-NaCbZE.small-krjczq {
+  font: var(--font-small);
+}
+
+.hasErrors-eXbO7M .head-s5Zr2b .label-NaCbZE {
+  color: var(--color-red-t03);
+}
+
+.head-s5Zr2b .required-ASR__G {
+  color: var(--color-grey-t03);
+  font: var(--font-small-italic);
+}
+

package/dist/forms/ToggleField.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { ValidationError } from "./_types";
+type Props = {
+    children: ReactNode;
+    description?: ReactNode;
+    errors?: Array<ValidationError>;
+    id?: string;
+    inputId?: string;
+    label: ReactNode;
+};
+declare const ToggleField: ({ children, description, errors, id, inputId, label }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ToggleField;

package/dist/forms/ToggleField.js

@@ -0,0 +1,38 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__ToggleField_module_js_814fb37e__ from "./ToggleField.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__FormErrorList_js_8b07ab1b__ from "./FormErrorList.js";
+const ToggleField = ({ children, description, errors, id, inputId, label })=>{
+    const hasErrors = null != errors && errors.length > 0;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__ToggleField_module_js_814fb37e__["default"].container, {
+            [__WEBPACK_EXTERNAL_MODULE__ToggleField_module_js_814fb37e__["default"].hasErrors]: hasErrors
+        }),
+        id: id,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__ToggleField_module_js_814fb37e__["default"].content,
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__ToggleField_module_js_814fb37e__["default"].input,
+                        children: children
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("label", {
+                        className: __WEBPACK_EXTERNAL_MODULE__ToggleField_module_js_814fb37e__["default"].label,
+                        htmlFor: inputId,
+                        children: label
+                    })
+                ]
+            }),
+            hasErrors ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__FormErrorList_js_8b07ab1b__["default"], {
+                errors: errors,
+                size: "small"
+            }) : null,
+            description ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                children: description
+            }) : null
+        ]
+    });
+};
+const ToggleField_rslib_entry_ = ToggleField;
+export { ToggleField_rslib_entry_ as default };

package/dist/forms/ToggleField.module.js

@@ -0,0 +1,8 @@
+import "./ToggleField_module.css";
+const ToggleField_module_rslib_entry_ = {
+    container: "container-CxKCQ9",
+    content: "content-X4T0f7",
+    label: "label-FiubLL",
+    hasErrors: "hasErrors-P1so2c"
+};
+export { ToggleField_module_rslib_entry_ as default };

package/dist/forms/ToggleField_module.css

@@ -0,0 +1,25 @@
+.container-CxKCQ9 {
+  gap: var(--size-n2);
+  display: grid;
+  position: relative;
+}
+
+.content-X4T0f7 {
+  align-items: center;
+  gap: var(--size-n2);
+  grid-template-columns: auto 1fr;
+  display: grid;
+}
+
+.label-FiubLL {
+  cursor: pointer;
+  font: var(--font-regular);
+  -webkit-user-select: none;
+  user-select: none;
+  width: max-content;
+}
+
+.hasErrors-P1so2c .content-X4T0f7 .label-FiubLL {
+  color: var(--color-red-t03);
+}
+

package/dist/forms/_types.d.ts

@@ -0,0 +1,17 @@
+export type FormModel = {
+    [Field: string]: any;
+};
+export type FormState<Model extends FormModel = Record<string, never>> = {
+    data: Model;
+    fieldErrors: Record<keyof Model, Array<ValidationError>>;
+    formErrors: Array<ValidationError>;
+    setData: React.Dispatch<React.SetStateAction<Model>>;
+    status: FormStatus;
+    submit: (event?: React.UIEvent) => Promise<void>;
+};
+export type FormStatus = "disabled" | "fresh" | "modified" | "loading" | "errored" | "success";
+export type ValidationError<Model extends FormModel = Record<string, never>> = {
+    field?: keyof Model;
+    id: string;
+    message: string;
+};

package/dist/forms/useForm.d.ts

@@ -0,0 +1,54 @@
+import type { FormModel, FormState, ValidationError } from "./_types";
+type Props<Model extends FormModel, Result> = {
+    initialValues: {
+        [Field in keyof Model]: Model[Field];
+    };
+    onSubmit: (data: Model) => Promise<Result>;
+    onSuccess?: (result: Result) => any | Promise<any>;
+    validators?: Array<(data: Model) => Validator<Model> | Promise<Validator<Model>>>;
+};
+type Validator<Model extends FormModel> = null | ValidationError<Model> | ((data: Model) => Validator<Model> | Promise<Validator<Model>>) | Array<Validator<Model>>;
+/**
+ * Manages the state of a form and provide methods for handling validation and
+ * submission.
+ *
+ * @example
+ * const ExampleComponent = () => {
+ *   const { data, setData, fieldErrors, submit, status } = useForm<{ name: string; active: boolean }>({
+ *     initialValues: { name: "", active: false },
+ *     onSubmit: async (data) => {
+ *       const result = await api.post("/users", data);
+ *       return result;
+ *     },
+ *     validators: [
+ *       (data) =>
+ *         data.name === "" ? { id: uuid(), field: "name", message: "Name is required." } : null,
+ *     ],
+ *   });
+ *
+ *   return (
+ *     <form
+ *       onSubmit={() => {
+ *         submit();
+ *       }}
+ *     >
+ *       <input
+ *         type="text"
+ *         value={data.name}
+ *         onChange={({ target: { value } }) => setData({ ...data, name: value })}
+ *       />
+ *       {fieldErrors.name.map((error) => (
+ *         <div key={error.id}>{error.message}</div>
+ *       ))}
+ *       <input
+ *         type="checkbox"
+ *         checked={data.active}
+ *         onChange={() => setData({ ...data, active: !data.active })}
+ *       />
+ *       <button type="submit" disabled={status !== "ready"}>Submit</button>
+ *     </form>
+ *   );
+ * };
+ */
+declare const useForm: <Model extends FormModel, Result = any>({ initialValues, onSubmit, onSuccess, validators, }: Props<Model, Result>) => FormState<Model>;
+export default useForm;

package/dist/forms/useForm.js

@@ -0,0 +1,107 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_uuid__ from "uuid";
+import * as __WEBPACK_EXTERNAL_MODULE__FormError_js_149fc952__ from "./FormError.js";
+const useForm = ({ initialValues, onSubmit, onSuccess, validators })=>{
+    const sleep = useSleep();
+    const [status, setStatus] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("fresh");
+    const [data, setData] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(initialValues);
+    const [errors, setErrors] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
+    const submit = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(async (event)=>{
+        setStatus("loading");
+        event?.preventDefault();
+        setErrors([]);
+        const validationErrors = await Promise.all((validators ?? []).map((validator)=>validatorToValidationErrors(data, validator)));
+        const flatValidationErrors = validationErrors.flat();
+        if (flatValidationErrors.length > 0) {
+            await sleep(250, ()=>setStatus("modified"));
+            setErrors(flatValidationErrors);
+            setStatus("errored");
+            await sleep(1000, ()=>setStatus("modified"));
+            setStatus("modified");
+        } else try {
+            const result = await onSubmit(data);
+            setStatus("success");
+            if (onSuccess) await onSuccess(result);
+            else await sleep(1000, ()=>setStatus("modified"));
+            setStatus("modified");
+        } catch (error) {
+            if (error instanceof __WEBPACK_EXTERNAL_MODULE__FormError_js_149fc952__["default"]) setErrors(error.validationErrors);
+            else error instanceof Error ? setErrors([
+                {
+                    id: (0, __WEBPACK_EXTERNAL_MODULE_uuid__.v4)(),
+                    message: error.message
+                }
+            ]) : setErrors([
+                {
+                    id: (0, __WEBPACK_EXTERNAL_MODULE_uuid__.v4)(),
+                    message: "Unknown error."
+                }
+            ]);
+            setStatus("errored");
+            await sleep(1000, ()=>setStatus("modified"));
+            setStatus("modified");
+        }
+    }, [
+        data,
+        onSubmit,
+        onSuccess,
+        sleep,
+        validators
+    ]);
+    const fieldErrors = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>Object.fromEntries(Object.keys(initialValues).map((key)=>[
+                key,
+                errors.filter((error)=>error.field === key)
+            ])), [
+        errors,
+        initialValues
+    ]);
+    const formErrors = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>errors.filter((error)=>void 0 === error.field), [
+        errors
+    ]);
+    const setDataAndMarkAsModified = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((value)=>{
+        setData(value);
+        setStatus("modified");
+    }, [
+        setData,
+        setStatus
+    ]);
+    return {
+        data,
+        fieldErrors,
+        formErrors,
+        setData: setDataAndMarkAsModified,
+        status,
+        submit
+    };
+};
+const useSleep = ()=>{
+    const timeout = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>()=>{
+            if (timeout.current) {
+                clearTimeout(timeout.current.id);
+                if (timeout.current.finalFn) timeout.current.finalFn();
+            }
+        }, []);
+    return (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(async (ms, finalFn)=>{
+        if (timeout.current) clearTimeout(timeout.current.id);
+        await new Promise((resolve)=>{
+            timeout.current = {
+                id: setTimeout(resolve, ms),
+                finalFn
+            };
+        });
+    }, []);
+};
+const validatorToValidationErrors = async (data, validator)=>{
+    if (null === validator) return [];
+    if (Array.isArray(validator)) {
+        const result = await Promise.all(validator.map((validator)=>validatorToValidationErrors(data, validator)));
+        return result.flat();
+    }
+    if ("function" == typeof validator) return validatorToValidationErrors(data, await validator(data));
+    return [
+        validator
+    ];
+};
+const useForm_rslib_entry_ = useForm;
+export { useForm_rslib_entry_ as default };

package/dist/hud/ChevronIcon.d.ts

@@ -0,0 +1,2 @@
+declare const ChevronIcon: () => import("react/jsx-runtime").JSX.Element;
+export default ChevronIcon;

package/dist/hud/ChevronIcon.js

@@ -0,0 +1,13 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+const ChevronIcon = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
+        width: 22,
+        height: 22,
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
+            d: "M5.306 10.999c.006-.34.128-.623.402-.889L12.09 3.86c.218-.212.474-.316.788-.316a1.115 1.115 0 01.772 1.928l-5.68 5.525 5.68 5.53a1.117 1.117 0 01-.772 1.931c-.309 0-.57-.104-.788-.322l-6.382-6.248c-.276-.271-.402-.552-.402-.888z",
+            fill: "currentColor"
+        })
+    });
+const ChevronIcon_rslib_entry_ = ChevronIcon;
+export { ChevronIcon_rslib_entry_ as default };

package/dist/hud/NavItem.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+type Props = {
+    href: string;
+    label: ReactNode;
+    badge?: ReactNode;
+    active: boolean;
+    icon: ReactNode;
+};
+declare const NavItem: ({ href, icon, label, badge, active }: Props) => import("react/jsx-runtime").JSX.Element;
+export default NavItem;

package/dist/hud/NavItem.js

@@ -0,0 +1,27 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__ from "./NavItem.module.js";
+const NavItem = ({ href, icon, label, badge, active = false })=>{
+    const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+        href: href,
+        legacyBehavior: true,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("a", {
+            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__["default"].item, {
+                [__WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__["default"].active]: active
+            }),
+            children: [
+                icon,
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    className: __WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__["default"].label,
+                    children: label
+                }),
+                badge
+            ]
+        })
+    });
+};
+const NavItem_rslib_entry_ = NavItem;
+export { NavItem_rslib_entry_ as default };

package/dist/hud/NavItem.module.js

@@ -0,0 +1,7 @@
+import "./NavItem_module.css";
+const NavItem_module_rslib_entry_ = {
+    item: "item-BpUNGR",
+    active: "active-V65GY2",
+    label: "label-c5y730"
+};
+export { NavItem_module_rslib_entry_ as default };

package/dist/hud/NavItemChild.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+type Props = {
+    href: string;
+    label: ReactNode;
+    active: boolean;
+};
+declare const NavItem: ({ href, label, active }: Props) => import("react/jsx-runtime").JSX.Element;
+export default NavItem;

package/dist/hud/NavItemChild.js

@@ -0,0 +1,20 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__NavItemChild_module_js_d468614f__ from "./NavItemChild.module.js";
+const NavItem = ({ href, label, active = false })=>{
+    const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+        href: href,
+        legacyBehavior: true,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("a", {
+            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__NavItemChild_module_js_d468614f__["default"].item, {
+                [__WEBPACK_EXTERNAL_MODULE__NavItemChild_module_js_d468614f__["default"].active]: active
+            }),
+            children: label
+        })
+    });
+};
+const NavItemChild_rslib_entry_ = NavItem;
+export { NavItemChild_rslib_entry_ as default };

package/dist/hud/NavItemChild.module.js

@@ -0,0 +1,6 @@
+import "./NavItemChild_module.css";
+const NavItemChild_module_rslib_entry_ = {
+    item: "item-fTF_UR",
+    active: "active-VGPKer"
+};
+export { NavItemChild_module_rslib_entry_ as default };

package/dist/hud/NavItemChild_module.css

@@ -0,0 +1,20 @@
+.item-fTF_UR {
+  padding: var(--size-n1);
+  gap: var(--size-n2);
+  border-radius: var(--size-n3);
+  font: var(--font-regular);
+  padding-left: 36px;
+  display: block;
+}
+
+.item-fTF_UR.active-VGPKer {
+  background: var(--color-purple-000);
+  color: var(--color-white);
+}
+
+@media (hover: hover) {
+  .item-fTF_UR:not(.active-VGPKer):hover {
+    background: var(--color-grey-t09);
+  }
+}
+

package/dist/hud/NavItem_module.css

@@ -0,0 +1,26 @@
+.item-BpUNGR {
+  padding: var(--size-n1);
+  gap: var(--size-n2);
+  border-radius: var(--size-n3);
+  grid-template-columns: max-content 1fr;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  align-items: center;
+  display: grid;
+}
+
+.item-BpUNGR.active-V65GY2 {
+  background: var(--color-purple-000);
+  color: var(--color-white);
+}
+
+.label-c5y730 {
+  font: var(--font-regular);
+}
+
+@media (hover: hover) {
+  .item-BpUNGR:not(.active-V65GY2):hover {
+    background: var(--color-grey-t09);
+  }
+}
+

package/dist/hud/NavSection.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+type Props = {
+    items: Array<{
+        key: string;
+        value: ReactNode;
+    } | null>;
+    label: ReactNode;
+    initiallyOpen: boolean;
+    icon?: ReactNode;
+};
+declare const NavSection: ({ items, label, initiallyOpen, icon }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default NavSection;