@janbox/storefront-ui 1.0.0

package/dist/lib/multiple-select/multiple-select.js

@@ -0,0 +1,348 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, useId, useCallback, useMemo, useEffect } from "react";
+import { get, isNil, isElement, trimStart } from "lodash-es";
+import { getMultipleSelectProps } from "./helpers.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
+import { getColorVar } from "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { Checkbox } from "../checkbox/checkbox.js";
+import { TextSkeleton } from "../loading/text-skeleton/text-skeleton.js";
+import { ensureArray, matchSearch } from "../../utils/common.js";
+import { Floating } from "../floating/floating/floating.js";
+import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
+import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
+import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { Input } from "../input/input.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+const DEFAULT_DISPLAY_ROW_COUNT = 5;
+const MultipleSelect = ({ ref, ...props }) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    placement = "bottom-start",
+    open,
+    onOpenChange,
+    searchable = true,
+    value,
+    optionValue,
+    optionLabel,
+    defaultValue,
+    options,
+    onChange,
+    placeholder,
+    listProps,
+    tagLabel,
+    // selectedRenderer,
+    optionSearchLabel,
+    helperText,
+    error,
+    containerProps,
+    inputProps,
+    displayCount = 1,
+    ...rest
+  } = getMultipleSelectProps(props);
+  const searchInputRef = useRef(null);
+  const floatingRef = useRef(null);
+  const uniqueId = useId();
+  const windowScreen = useWindowScreen();
+  const [inputValue, setInputValue] = useControllableState({
+    defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
+    value: inputProps == null ? void 0 : inputProps.value
+  });
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const [controllableValues, setControllableValues] = useControllableState({
+    defaultValue: defaultValue ?? [],
+    value
+  });
+  const getOptionValue = useCallback(
+    (option) => {
+      return typeof optionValue === "function" ? optionValue(option) : get(option, optionValue ?? "value");
+    },
+    [optionValue]
+  );
+  const getTagLabel = (option) => {
+    switch (typeof tagLabel) {
+      case "function":
+        return tagLabel(option);
+      case "string":
+        return get(option, tagLabel);
+      default:
+        return null;
+    }
+  };
+  const getOptionValueRef = useRef(getOptionValue);
+  getOptionValueRef.current = getOptionValue;
+  const selectedValueMap = useMemo(
+    () => new Map(
+      controllableValues.map((item) => {
+        const key = typeof item === "object" ? getOptionValue(item) : item;
+        return [
+          key,
+          typeof item === "object" ? item : options.find((option) => getOptionValue(option) === key) ?? {}
+        ];
+      })
+    ),
+    [controllableValues]
+  );
+  const getOptionLabel = useCallback(
+    (option) => {
+      return typeof optionLabel === "function" ? optionLabel(option) : get(option, optionLabel ?? "label");
+    },
+    [optionLabel]
+  );
+  const handleChange = (option, selected) => {
+    let preset = [...controllableValues];
+    if (selected) {
+      preset.push(option);
+    } else {
+      preset = preset.filter((item) => getOptionValue(item) !== getOptionValue(option));
+    }
+    setControllableValues(preset);
+    onChange == null ? void 0 : onChange(preset);
+  };
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
+  const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
+  const displayOptions = useMemo(() => {
+    if (!inputValue) {
+      return options;
+    }
+    return options.filter((option) => {
+      let searchLabels = [String(getOptionLabel(option))];
+      switch (typeof optionSearchLabel) {
+        case "function":
+          searchLabels = ensureArray(optionSearchLabel(option));
+          break;
+        case "string":
+          searchLabels = ensureArray(String(get(option, optionSearchLabel)));
+          break;
+        case "object":
+          searchLabels = optionSearchLabel.map((label) => String(get(option, label)));
+          break;
+      }
+      return matchSearch(searchLabels, inputValue);
+    });
+  }, [getOptionLabel, inputValue, optionSearchLabel, options]);
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    const rowValue = isNil(rowData) ? void 0 : getOptionValue(rowData);
+    const isSelected = isNil(rowValue) ? false : selectedValueMap.has(rowValue);
+    const onCheckboxChange = (e) => {
+      if (isNil(rowData)) return;
+      handleChange(rowData, e.target.checked);
+    };
+    return /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        onChange: onCheckboxChange,
+        checked: isSelected,
+        containerProps: {
+          css: {
+            paddingTop: 2,
+            paddingBottom: 2,
+            paddingLeft: 12,
+            paddingRight: 12,
+            borderRadius: 8,
+            ":hover": { backgroundColor: getColorVar("neutral.100") },
+            minHeight: rowMinHeight,
+            width: "100%"
+          }
+        },
+        children: /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: isNil(rowData) ? /* @__PURE__ */ jsx(TextSkeleton, { css: { width: "100%" } }) : getOptionLabel(rowData) })
+      }
+    );
+  };
+  const sizeOptions = {
+    apply({ elements }) {
+      const { width } = elements.reference.getBoundingClientRect();
+      Object.assign(elements.floating.style, {
+        minWidth: `${width}px`
+      });
+    }
+  };
+  const estimateSize = useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKey = useCallback(
+    (index) => {
+      const option = displayOptions.at(index);
+      return option ? getOptionValue(option).toString() : `${uniqueId}-${index}`;
+    },
+    [displayOptions, getOptionValue, uniqueId]
+  );
+  const getTextCss = (sizeVariant) => {
+    if (isNil(sizeVariant)) return {};
+    const { textVariant } = getSizeVariantState(sizeVariant);
+    if (isNil(textVariant)) return {};
+    return getTypographyVar(textVariant);
+  };
+  const onInputChange = (e) => {
+    var _a2;
+    e.target.value = trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
+  };
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      var _a2;
+      if (isOpen) {
+        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      } else {
+        setInputValue("");
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [isOpen, setInputValue]);
+  return /* @__PURE__ */ jsxs("div", { ...containerProps, css: { display: "flex", flexDirection: "column", width: "100%", ...containerProps == null ? void 0 : containerProps.css }, children: [
+    /* @__PURE__ */ jsxs(
+      Floating,
+      {
+        clickProps: {
+          enabled: true
+        },
+        dismissProps: {
+          enabled: true
+        },
+        sizeOptions,
+        placement,
+        open: isOpen,
+        onOpenChange: prehandleOpenChange,
+        ref: floatingRef,
+        children: [
+          /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsx(
+            ForwardRefInputMask,
+            {
+              type: "button",
+              error: isOpen ? false : error,
+              element: "button",
+              suffix: /* @__PURE__ */ jsx(
+                SvgLoader,
+                {
+                  source: ArrowDownIcon,
+                  width: 20,
+                  height: 20,
+                  css: {
+                    transition: "transform 150ms",
+                    ...isOpen ? { transform: "rotate(-180deg)" } : {}
+                  }
+                }
+              ),
+              ...rest,
+              ref,
+              children: /* @__PURE__ */ jsx("div", { css: [{ flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", paddingTop: 4, paddingBottom: 4 }, getTextCss((_a = rest.xs) == null ? void 0 : _a.size)], children: selectedValueMap.size > 0 ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  css: {
+                    display: "flex",
+                    gap: 4,
+                    ...displayCount > 1 ? { flexWrap: "wrap" } : {}
+                  },
+                  children: [
+                    Array.from(selectedValueMap.values()).slice(0, displayCount).map((selectedOption) => {
+                      const rowValue = getOptionValue(selectedOption);
+                      const rowLabel = getTagLabel(selectedOption) ?? getOptionLabel(selectedOption);
+                      return /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          css: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            overflow: "hidden",
+                            borderRadius: 8,
+                            backgroundColor: getColorVar("neutral.100"),
+                            paddingLeft: 8,
+                            paddingRight: 8,
+                            paddingTop: 4,
+                            paddingBottom: 4,
+                            fontSize: "0.75rem",
+                            lineHeight: "1rem"
+                          },
+                          children: /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: isElement(rowLabel) ? rowLabel : /* @__PURE__ */ jsx("span", { children: rowLabel }) })
+                        },
+                        rowValue.toString()
+                      );
+                    }),
+                    displayCount < selectedValueMap.size && /* @__PURE__ */ jsx("div", { css: {
+                      borderRadius: 8,
+                      backgroundColor: getColorVar("neutral.100"),
+                      paddingLeft: 8,
+                      paddingRight: 8,
+                      paddingTop: 4,
+                      paddingBottom: 4,
+                      fontSize: "0.75rem",
+                      lineHeight: "1rem",
+                      flexShrink: 0
+                    }, children: /* @__PURE__ */ jsxs("span", { css: { fontWeight: 500 }, children: [
+                      "+",
+                      selectedValueMap.size - displayCount
+                    ] }) })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400"), display: "block" }, children: placeholder }) })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsxs("div", { css: {
+            paddingTop: 8,
+            paddingBottom: 8,
+            border: "1px solid",
+            borderColor: getColorVar("border.default"),
+            borderRadius: 8,
+            boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+            fontSize: "0.875rem",
+            lineHeight: "1.25rem",
+            backgroundColor: getColorVar("surface.default")
+          }, children: [
+            searchable && /* @__PURE__ */ jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                xs: { size: (_b = rest.xs) == null ? void 0 : _b.size },
+                sm: { size: (_c = rest.sm) == null ? void 0 : _c.size },
+                md: { size: (_d = rest.md) == null ? void 0 : _d.size },
+                lg: { size: (_e = rest.lg) == null ? void 0 : _e.size },
+                value: inputValue,
+                ...inputProps,
+                onChange: onInputChange,
+                ref: searchInputRef
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              VirtualizedList,
+              {
+                ...listProps,
+                css: { paddingLeft: 4, paddingRight: 4 },
+                options: {
+                  count: displayOptions.length,
+                  estimateSize,
+                  getItemKey
+                },
+                style: {
+                  maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
+                  ...listProps == null ? void 0 : listProps.style
+                },
+                RowComponent
+              }
+            )
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+  ] });
+};
+export {
+  MultipleSelect
+};

package/dist/lib/multiple-select/types.d.ts

@@ -0,0 +1,35 @@
+import { HTMLProps, JSX, PropsWithoutRef } from 'react';
+import { Interpolation } from '@emotion/react';
+import { Placement, UseFloatingOptions } from '@floating-ui/react';
+import { InputProps } from '../input';
+import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask/types';
+import { ResponsiveDesign, ShallowMerge } from '../../types';
+export type MultipleSelectResponsiveProps = InputMaskResponsiveProps;
+export type MultipleSelectOptionValue = string | number;
+interface MultipleSelectExtendedProps<O extends object> extends ResponsiveDesign<MultipleSelectResponsiveProps> {
+    placement?: Placement;
+    onOpenChange?: UseFloatingOptions['onOpenChange'];
+    open?: boolean;
+    searchable?: boolean;
+    optionLabel?: keyof O | ((option: O) => React.ReactNode);
+    tagLabel?: keyof O | ((option: O) => React.ReactNode);
+    optionValue?: keyof O | ((option: O) => MultipleSelectOptionValue);
+    optionSearchLabel?: keyof O | Array<keyof O> | ((option: O) => string | string[]);
+    defaultValue?: Array<Partial<O> | MultipleSelectOptionValue>;
+    value?: Array<Partial<O> | MultipleSelectOptionValue>;
+    options: O[];
+    onChange?: (value: O[]) => void;
+    placeholder?: string;
+    listProps?: PropsWithoutRef<HTMLProps<HTMLDivElement>>;
+    selectedRenderer?: (options: O[]) => React.ReactNode;
+    error?: boolean;
+    helperText?: string;
+    containerProps?: JSX.IntrinsicElements['div'] & {
+        css?: Interpolation;
+    };
+    inputProps?: InputProps;
+    displayCount?: number;
+}
+export type MultipleSelectProps<O extends object = object> = ShallowMerge<InputMaskProps<JSX.IntrinsicElements['button']>, MultipleSelectExtendedProps<O>>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/multiple-select/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,6BAA6B,GAAG,wBAAwB,CAAC;AAErE,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,UAAU,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,gBAAgB,CAAC,6BAA6B,CAAC;IAE7G,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,yBAAyB,CAAC,CAAC;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CACvE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,2BAA2B,CAAC,CAAC,CAAC,CAC/B,CAAC"}

package/dist/lib/nav-link/index.d.ts

@@ -0,0 +1,3 @@
+export * from './nav-link';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/nav-link/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/nav-link/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/lib/nav-link/nav-link.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const lodashEs = require("lodash-es");
+const reactRouter = require("react-router");
+const constants_index = require("../../constants/index.cjs");
+const NavLink = react.forwardRef(
+  ({ children, style, className, to, ...props }, ref) => {
+    const styleFn = (renderProps) => {
+      return lodashEs.isFunction(style) ? style({
+        ...renderProps,
+        isActive: renderProps.isActive && !lodashEs.isNil(to)
+      }) : style;
+    };
+    const classNameFn = (renderProps) => {
+      return lodashEs.isFunction(className) ? className({
+        ...renderProps,
+        isActive: renderProps.isActive && !lodashEs.isNil(to)
+      }) : className;
+    };
+    const onClick = (e) => {
+      var _a;
+      if (e.currentTarget.getAttribute("aria-disabled") === constants_index.Booleanish.True) {
+        e.preventDefault();
+      }
+      if (lodashEs.isNil(to)) {
+        e.preventDefault();
+      }
+      (_a = props.onClick) == null ? void 0 : _a.call(props, e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(reactRouter.NavLink, { ...props, style: styleFn, className: classNameFn, to: to ?? "#", ref, onClick, children: (renderProps) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: lodashEs.isFunction(children) ? children({
+        ...renderProps,
+        isActive: renderProps.isActive && !lodashEs.isNil(to)
+      }) : children });
+    } });
+  }
+);
+exports.NavLink = NavLink;

package/dist/lib/nav-link/nav-link.d.ts

@@ -0,0 +1,4 @@
+export declare const NavLink: import('react').ForwardRefExoticComponent<Omit<import('react-router').NavLinkProps, "to"> & {
+    to?: import('react-router').NavLinkProps["to"];
+} & import('react').RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=nav-link.d.ts.map

package/dist/lib/nav-link/nav-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-link.d.ts","sourceRoot":"","sources":["../../../src/lib/nav-link/nav-link.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,OAAO;;qDAiDnB,CAAC"}

package/dist/lib/nav-link/nav-link.js

@@ -0,0 +1,40 @@
+import { jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { isFunction, isNil } from "lodash-es";
+import { NavLink as NavLink$1 } from "react-router";
+import { Booleanish } from "../../constants/index.js";
+const NavLink = forwardRef(
+  ({ children, style, className, to, ...props }, ref) => {
+    const styleFn = (renderProps) => {
+      return isFunction(style) ? style({
+        ...renderProps,
+        isActive: renderProps.isActive && !isNil(to)
+      }) : style;
+    };
+    const classNameFn = (renderProps) => {
+      return isFunction(className) ? className({
+        ...renderProps,
+        isActive: renderProps.isActive && !isNil(to)
+      }) : className;
+    };
+    const onClick = (e) => {
+      var _a;
+      if (e.currentTarget.getAttribute("aria-disabled") === Booleanish.True) {
+        e.preventDefault();
+      }
+      if (isNil(to)) {
+        e.preventDefault();
+      }
+      (_a = props.onClick) == null ? void 0 : _a.call(props, e);
+    };
+    return /* @__PURE__ */ jsx(NavLink$1, { ...props, style: styleFn, className: classNameFn, to: to ?? "#", ref, onClick, children: (renderProps) => {
+      return /* @__PURE__ */ jsx(Fragment, { children: isFunction(children) ? children({
+        ...renderProps,
+        isActive: renderProps.isActive && !isNil(to)
+      }) : children });
+    } });
+  }
+);
+export {
+  NavLink
+};

package/dist/lib/nav-link/types.d.ts

@@ -0,0 +1,6 @@
+import { NavLinkProps as ReactRouterNavLinkProps } from 'react-router';
+import { ShallowMerge } from '../../types';
+export type NavLinkProps = ShallowMerge<ReactRouterNavLinkProps, {
+    to?: ReactRouterNavLinkProps['to'];
+}>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/nav-link/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/nav-link/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,MAAM,YAAY,GAAG,YAAY,CACrC,uBAAuB,EACvB;IACE,EAAE,CAAC,EAAE,uBAAuB,CAAC,IAAI,CAAC,CAAC;CACpC,CACF,CAAC"}

package/dist/lib/notifications/helpers.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const jotai = require("jotai");
+const uuid = require("uuid");
+require("clsx");
+require("lodash-es");
+require("../../theme/palette.cjs");
+const common = require("../../utils/common.cjs");
+const notificationAtom = jotai.atom({
+  entries: []
+});
+const useNotifications = () => {
+  const [, setAtomValue] = jotai.useAtom(notificationAtom);
+  const pushNotifications = react.useCallback(
+    (notifications) => {
+      return setAtomValue((prev) => {
+        return {
+          ...prev,
+          entries: [
+            ...prev.entries,
+            ...common.ensureArray(notifications).map((notification) => ({
+              ...notification,
+              id: uuid.v4()
+            }))
+          ]
+        };
+      });
+    },
+    [setAtomValue]
+  );
+  return react.useMemo(() => {
+    return {
+      pushNotifications
+    };
+  }, [pushNotifications]);
+};
+exports.notificationAtom = notificationAtom;
+exports.useNotifications = useNotifications;

package/dist/lib/notifications/helpers.d.ts

@@ -0,0 +1,21 @@
+import { ColorVariant } from '../../types';
+export type NotificationEntry = {
+    id: string;
+    title: React.ReactNode;
+    message?: React.ReactNode;
+    color: ColorVariant;
+    duration?: number;
+    align?: 'left' | 'center' | 'right';
+};
+export type NotificationAtomValue = {
+    entries: NotificationEntry[];
+};
+export declare const notificationAtom: import('jotai').PrimitiveAtom<NotificationAtomValue> & {
+    init: NotificationAtomValue;
+};
+type PushNotificationTemplate = Omit<NotificationEntry, 'id'>;
+export declare const useNotifications: () => {
+    pushNotifications: <T extends PushNotificationTemplate = PushNotificationTemplate>(notifications: T | T[]) => void;
+};
+export {};
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/notifications/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/helpers.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;CAE3B,CAAC;AAEH,KAAK,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;AAE9D,eAAO,MAAM,gBAAgB;wBAIxB,CAAC,SAAS,wBAAwB,4CAA4C,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI;CAwBlG,CAAC"}

package/dist/lib/notifications/helpers.js

@@ -0,0 +1,39 @@
+import { useCallback, useMemo } from "react";
+import { atom, useAtom } from "jotai";
+import { v4 } from "uuid";
+import "clsx";
+import "lodash-es";
+import "../../theme/palette.js";
+import { ensureArray } from "../../utils/common.js";
+const notificationAtom = atom({
+  entries: []
+});
+const useNotifications = () => {
+  const [, setAtomValue] = useAtom(notificationAtom);
+  const pushNotifications = useCallback(
+    (notifications) => {
+      return setAtomValue((prev) => {
+        return {
+          ...prev,
+          entries: [
+            ...prev.entries,
+            ...ensureArray(notifications).map((notification) => ({
+              ...notification,
+              id: v4()
+            }))
+          ]
+        };
+      });
+    },
+    [setAtomValue]
+  );
+  return useMemo(() => {
+    return {
+      pushNotifications
+    };
+  }, [pushNotifications]);
+};
+export {
+  notificationAtom,
+  useNotifications
+};

package/dist/lib/notifications/index.d.ts

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

package/dist/lib/notifications/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC"}