@janbox/storefront-ui 1.0.10 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/components/virtualized-list.d.ts +2 -2
  2. package/dist/components/virtualized-list.d.ts.map +1 -1
  3. package/dist/components/virtualized-list.js +2 -15
  4. package/dist/hooks/use-is-hydrated/index.d.ts +2 -0
  5. package/dist/hooks/use-is-hydrated/index.d.ts.map +1 -0
  6. package/dist/hooks/use-is-hydrated/index.js +11 -0
  7. package/dist/hooks/use-toggle/index.d.ts +3 -0
  8. package/dist/hooks/use-toggle/index.d.ts.map +1 -0
  9. package/dist/hooks/use-toggle/index.js +11 -0
  10. package/dist/index.js +2 -2
  11. package/dist/lib/filter-panel/filter-panel.d.ts +1 -1
  12. package/dist/lib/filter-panel/filter-panel.d.ts.map +1 -1
  13. package/dist/lib/filter-panel/filter-panel.js +2 -2
  14. package/dist/lib/floating/floating-content/floating-content.d.ts.map +1 -1
  15. package/dist/lib/floating/floating-content/floating-content.js +18 -32
  16. package/dist/lib/loading/block-skeleton/block-skeleton.d.ts.map +1 -1
  17. package/dist/lib/loading/block-skeleton/block-skeleton.js +3 -3
  18. package/dist/lib/loading/image-skeleton/image-skeleton.d.ts.map +1 -1
  19. package/dist/lib/loading/image-skeleton/image-skeleton.js +4 -4
  20. package/dist/lib/loading/text-skeleton/text-skeleton.d.ts.map +1 -1
  21. package/dist/lib/loading/text-skeleton/text-skeleton.js +3 -3
  22. package/dist/lib/notifications/helpers.d.ts +4 -2
  23. package/dist/lib/notifications/helpers.d.ts.map +1 -1
  24. package/dist/lib/notifications/helpers.js +28 -24
  25. package/dist/lib/notifications/notifications.d.ts.map +1 -1
  26. package/dist/lib/notifications/notifications.js +18 -13
  27. package/dist/lib/phone-input/phone-input.d.ts.map +1 -1
  28. package/dist/lib/phone-input/phone-input.js +106 -104
  29. package/dist/theme/css-baseline.d.ts +2 -0
  30. package/dist/theme/css-baseline.d.ts.map +1 -0
  31. package/dist/theme/{provider.js → css-baseline.js} +8 -16
  32. package/dist/theme/index.d.ts +1 -1
  33. package/dist/theme/index.d.ts.map +1 -1
  34. package/dist/theme/index.js +2 -2
  35. package/dist/types/index.d.ts +1 -1
  36. package/dist/types/index.d.ts.map +1 -1
  37. package/package.json +5 -17
  38. package/dist/theme/provider.d.ts +0 -7
  39. package/dist/theme/provider.d.ts.map +0 -1
@@ -2,8 +2,8 @@ import { JSX, Ref } from 'react';
2
2
  import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual';
3
3
  import { ScrollViewRef } from './scroll-view';
4
4
  import { ShallowMerge } from '../types';
5
- type VirtualizedListOptions = Omit<Parameters<typeof useVirtualizer<HTMLDivElement, HTMLDivElement>>[0], "getScrollElement">;
6
- type VirtualizedListProps = ShallowMerge<JSX.IntrinsicElements["div"], {
5
+ type VirtualizedListOptions = Omit<Parameters<typeof useVirtualizer<HTMLDivElement, HTMLDivElement>>[0], 'getScrollElement'>;
6
+ type VirtualizedListProps = ShallowMerge<JSX.IntrinsicElements['div'], {
7
7
  RowComponent: React.ComponentType<{
8
8
  row: VirtualItem;
9
9
  }>;
@@ -1 +1 @@
1
- {"version":3,"file":"virtualized-list.d.ts","sourceRoot":"","sources":["../../src/components/virtualized-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAU,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,EAAc,aAAa,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,KAAK,sBAAsB,GAAG,IAAI,CAChC,UAAU,CAAC,OAAO,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,EACpE,kBAAkB,CACnB,CAAC;AAEF,KAAK,oBAAoB,GAAG,YAAY,CACtC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,GAAG,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC;IACxD,OAAO,EAAE,sBAAsB,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B,CACF,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAC;AAE1E,eAAO,MAAM,eAAe,6CAKzB,oBAAoB,qDAgDtB,CAAC"}
1
+ {"version":3,"file":"virtualized-list.d.ts","sourceRoot":"","sources":["../../src/components/virtualized-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAU,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,EAAc,aAAa,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,KAAK,sBAAsB,GAAG,IAAI,CAChC,UAAU,CAAC,OAAO,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,EACpE,kBAAkB,CACnB,CAAC;AAEF,KAAK,oBAAoB,GAAG,YAAY,CACtC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,GAAG,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC;IACxD,OAAO,EAAE,sBAAsB,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B,CACF,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAC;AAE1E,eAAO,MAAM,eAAe,6CAA8C,oBAAoB,qDAyC7F,CAAC"}
@@ -4,12 +4,7 @@ import { useMergeRefs } from "@floating-ui/react";
4
4
  import { useVirtualizer } from "@tanstack/react-virtual";
5
5
  import { motion } from "motion/react";
6
6
  import { ScrollView } from "./scroll-view.js";
7
- const VirtualizedList = ({
8
- RowComponent,
9
- options,
10
- ref,
11
- ...props
12
- }) => {
7
+ const VirtualizedList = ({ RowComponent, options, ref, ...props }) => {
13
8
  var _a;
14
9
  const scrollRef = useRef(null);
15
10
  const mergedRefs = useMergeRefs([scrollRef, ref]);
@@ -37,15 +32,7 @@ const VirtualizedList = ({
37
32
  style: {
38
33
  transform: `translateY(${((_a = items.at(0)) == null ? void 0 : _a.start) ?? 0}px)`
39
34
  },
40
- children: items.map((virtualRow) => /* @__PURE__ */ jsx(
41
- "div",
42
- {
43
- "data-index": virtualRow.index,
44
- ref: virtualizer.measureElement,
45
- children: /* @__PURE__ */ jsx(RowComponent, { row: virtualRow })
46
- },
47
- virtualRow.key
48
- ))
35
+ children: items.map((virtualRow) => /* @__PURE__ */ jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, children: /* @__PURE__ */ jsx(RowComponent, { row: virtualRow }) }, virtualRow.key))
49
36
  }
50
37
  )
51
38
  }
@@ -0,0 +1,2 @@
1
+ export declare function useIsHydrated(): boolean;
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-is-hydrated/index.ts"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,YAQ5B"}
@@ -0,0 +1,11 @@
1
+ import { useState, useEffect } from "react";
2
+ function useIsHydrated() {
3
+ const [isHydrated, setIsHydrated] = useState(false);
4
+ useEffect(() => {
5
+ setIsHydrated(true);
6
+ }, []);
7
+ return isHydrated;
8
+ }
9
+ export {
10
+ useIsHydrated
11
+ };
@@ -0,0 +1,3 @@
1
+ import { Dispatch, SetStateAction } from 'react';
2
+ export declare function useToggle(defaultValue?: boolean): [boolean, () => void, Dispatch<SetStateAction<boolean>>];
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAyB,MAAM,OAAO,CAAC;AAExE,wBAAgB,SAAS,CAAC,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAQ1G"}
@@ -0,0 +1,11 @@
1
+ import { useState, useCallback } from "react";
2
+ function useToggle(defaultValue) {
3
+ const [value, setValue] = useState(!!defaultValue);
4
+ const toggle = useCallback(() => {
5
+ setValue((x) => !x);
6
+ }, []);
7
+ return [value, toggle, setValue];
8
+ }
9
+ export {
10
+ useToggle
11
+ };
package/dist/index.js CHANGED
@@ -134,7 +134,7 @@ import { getTextCssByVariant, getTextProps } from "./lib/text/helpers.js";
134
134
  import { getTextareaProps } from "./lib/textarea/helpers.js";
135
135
  import { getUnorderedListProps } from "./lib/unordered-list/unordered-list/helpers.js";
136
136
  import { getVideoProps } from "./lib/video/helpers.js";
137
- import { notificationAtom, useNotifications } from "./lib/notifications/helpers.js";
137
+ import { notificationStore, useNotifications } from "./lib/notifications/helpers.js";
138
138
  import { states } from "./lib/stepper/types.js";
139
139
  import { useDrawerContext } from "./lib/drawer/drawer/helpers.js";
140
140
  import { usePopoverContext } from "./lib/popover/popover/helpers.js";
@@ -285,7 +285,7 @@ export {
285
285
  getTextareaProps,
286
286
  getUnorderedListProps,
287
287
  getVideoProps,
288
- notificationAtom,
288
+ notificationStore,
289
289
  states,
290
290
  useAccordionContext,
291
291
  useAccordionGroupContext,
@@ -1,3 +1,3 @@
1
1
  import { FilterPanelProps } from './types';
2
- export declare const FilterPanel: ({ label, defaultOpen, className, ...props }: FilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
2
+ export declare const FilterPanel: ({ label, defaultOpen, ...props }: FilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
3
3
  //# sourceMappingURL=filter-panel.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/filter-panel.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO3C,eAAO,MAAM,WAAW,gDAAwD,gBAAgB,qDAyB/F,CAAC"}
1
+ {"version":3,"file":"filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/filter-panel.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO3C,eAAO,MAAM,WAAW,qCAA6C,gBAAgB,qDA2BpF,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
2
2
  import { isValidElement } from "react";
3
- import { useToggle } from "usehooks-ts";
3
+ import { useToggle } from "../../hooks/use-toggle/index.js";
4
4
  import { CheckboxFilterPanel } from "./checkbox-filter-panel.js";
5
5
  import { InputRangeFilterPanel } from "./input-range-filter-panel.js";
6
6
  import { InputTextFilterPanel } from "./input-text-filter-panel.js";
@@ -8,7 +8,7 @@ import { RadioFilterPanel } from "./radio-filter-panel.js";
8
8
  import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
9
9
  import { Collapse } from "../collapse/collapse.js";
10
10
  import { Icon } from "../icon/icon.js";
11
- const FilterPanel = ({ label, defaultOpen = true, className, ...props }) => {
11
+ const FilterPanel = ({ label, defaultOpen = true, ...props }) => {
12
12
  const [open, toggle] = useToggle(defaultOpen);
13
13
  return /* @__PURE__ */ jsxs("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
14
14
  /* @__PURE__ */ jsxs("button", { css: { display: "flex", alignItems: "center", gap: 8, textAlign: "left" }, onClick: toggle, children: [
@@ -1 +1 @@
1
- {"version":3,"file":"floating-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/floating-content/floating-content.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAM/C,eAAO,MAAM,eAAe,8HAyD3B,CAAC"}
1
+ {"version":3,"file":"floating-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/floating-content/floating-content.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAO/C,eAAO,MAAM,eAAe,8HAuC3B,CAAC"}
@@ -2,21 +2,15 @@ import { jsx } from "@emotion/react/jsx-runtime";
2
2
  import { forwardRef } from "react";
3
3
  import { useMergeRefs, FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
4
4
  import { AnimatePresence, motion } from "motion/react";
5
- import { useIsClient } from "usehooks-ts";
6
5
  import { useFloatingContext } from "../floating/helpers.js";
7
6
  import { FLOATING_Z_INDEX } from "../../../theme/index.js";
7
+ import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
8
8
  const FloatingContent = forwardRef(
9
- ({
10
- style,
11
- floatingPortalProps,
12
- floatingFocusManagerProps,
13
- floatingOverlayProps,
14
- ...props
15
- }, ref) => {
9
+ ({ style, floatingPortalProps, floatingFocusManagerProps, floatingOverlayProps, ...props }, ref) => {
16
10
  const { getFloatingProps, context } = useFloatingContext();
17
11
  const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);
18
- const isClient = useIsClient();
19
- return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isClient && /* @__PURE__ */ jsx(FloatingPortal, { root: document.body, ...floatingPortalProps, children: /* @__PURE__ */ jsx(
12
+ const isHydrated = useIsHydrated();
13
+ return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isHydrated && /* @__PURE__ */ jsx(FloatingPortal, { root: document.body, ...floatingPortalProps, children: /* @__PURE__ */ jsx(
20
14
  FloatingOverlay,
21
15
  {
22
16
  ...floatingOverlayProps,
@@ -24,30 +18,22 @@ const FloatingContent = forwardRef(
24
18
  display: (floatingOverlayProps == null ? void 0 : floatingOverlayProps.disabled) ?? true ? "contents" : void 0,
25
19
  ...floatingOverlayProps == null ? void 0 : floatingOverlayProps.style
26
20
  },
27
- children: /* @__PURE__ */ jsx(
28
- FloatingFocusManager,
21
+ children: /* @__PURE__ */ jsx(FloatingFocusManager, { disabled: true, context, ...floatingFocusManagerProps, children: /* @__PURE__ */ jsx(
22
+ motion.div,
29
23
  {
30
- disabled: true,
31
- context,
32
- ...floatingFocusManagerProps,
33
- children: /* @__PURE__ */ jsx(
34
- motion.div,
35
- {
36
- initial: { opacity: 0 },
37
- animate: { opacity: 1 },
38
- exit: { opacity: 0 },
39
- style: {
40
- ...context.elements.reference ? context.floatingStyles : {},
41
- ...style,
42
- zIndex: FLOATING_Z_INDEX
43
- },
44
- ...getFloatingProps(props),
45
- ref: mergedRefs,
46
- children: props.children
47
- }
48
- )
24
+ initial: { opacity: 0 },
25
+ animate: { opacity: 1 },
26
+ exit: { opacity: 0 },
27
+ style: {
28
+ ...context.elements.reference ? context.floatingStyles : {},
29
+ ...style,
30
+ zIndex: FLOATING_Z_INDEX
31
+ },
32
+ ...getFloatingProps(props),
33
+ ref: mergedRefs,
34
+ children: props.children
49
35
  }
50
- )
36
+ ) })
51
37
  }
52
38
  ) }) });
53
39
  }
@@ -1 +1 @@
1
- {"version":3,"file":"block-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/block-skeleton/block-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDAItD,CAAC"}
1
+ {"version":3,"file":"block-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/block-skeleton/block-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDAEtD,CAAC"}
@@ -1,9 +1,9 @@
1
1
  import { jsx } from "@emotion/react/jsx-runtime";
2
2
  import { animatePulseStyle } from "../../../constants/emotion.js";
3
- import { useTheme } from "@emotion/react";
3
+ import "lodash-es";
4
+ import { getColorVar } from "../../../theme/palette.js";
4
5
  const BlockSkeleton = (props) => {
5
- const { palette } = useTheme();
6
- return /* @__PURE__ */ jsx("div", { css: [animatePulseStyle, { borderRadius: 4, backgroundColor: palette.neutral[200] }], ...props });
6
+ return /* @__PURE__ */ jsx("div", { css: [animatePulseStyle, { borderRadius: 4, backgroundColor: getColorVar("neutral.200") }], ...props });
7
7
  };
8
8
  export {
9
9
  BlockSkeleton
@@ -1 +1 @@
1
- {"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/image-skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAI7C,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDA8BtD,CAAC"}
1
+ {"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/image-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK7C,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDA4BtD,CAAC"}
@@ -1,8 +1,8 @@
1
1
  import { jsx } from "@emotion/react/jsx-runtime";
2
- import { useTheme } from "@emotion/react";
3
2
  import { animatePulseStyle } from "../../../constants/emotion.js";
3
+ import "lodash-es";
4
+ import { getColorVar } from "../../../theme/palette.js";
4
5
  const ImageSkeleton = (props) => {
5
- const { palette } = useTheme();
6
6
  return /* @__PURE__ */ jsx(
7
7
  "div",
8
8
  {
@@ -15,14 +15,14 @@ const ImageSkeleton = (props) => {
15
15
  width: "100%",
16
16
  height: "100%",
17
17
  borderRadius: "0.25rem",
18
- backgroundColor: palette.neutral[200]
18
+ backgroundColor: getColorVar("neutral.200")
19
19
  }
20
20
  ],
21
21
  ...props,
22
22
  children: /* @__PURE__ */ jsx(
23
23
  "svg",
24
24
  {
25
- css: { width: "25%", height: "25%", color: palette.neutral[400] },
25
+ css: { width: "25%", height: "25%", color: getColorVar("neutral.400") },
26
26
  "aria-hidden": "true",
27
27
  xmlns: "http://www.w3.org/2000/svg",
28
28
  fill: "currentColor",
@@ -1 +1 @@
1
- {"version":3,"file":"text-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/text-skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI5C,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAgBpD,CAAC"}
1
+ {"version":3,"file":"text-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/text-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAK5C,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAcpD,CAAC"}
@@ -1,15 +1,15 @@
1
1
  import { jsxs, jsx } from "@emotion/react/jsx-runtime";
2
- import { useTheme } from "@emotion/react";
3
2
  import { animatePulseStyle } from "../../../constants/emotion.js";
3
+ import "lodash-es";
4
+ import { getColorVar } from "../../../theme/palette.js";
4
5
  const TextSkeleton = (props) => {
5
- const { palette } = useTheme();
6
6
  return /* @__PURE__ */ jsxs("span", { css: { width: "100%", overflow: "hidden", display: "inline-flex", alignItems: "center" }, ...props, children: [
7
7
  /* @__PURE__ */ jsx(
8
8
  "span",
9
9
  {
10
10
  css: [
11
11
  animatePulseStyle,
12
- { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: palette.neutral[200] }
12
+ { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: getColorVar("neutral.200") }
13
13
  ],
14
14
  children: " "
15
15
  }
@@ -10,8 +10,10 @@ export type NotificationEntry = {
10
10
  export type NotificationAtomValue = {
11
11
  entries: NotificationEntry[];
12
12
  };
13
- export declare const notificationAtom: import('jotai').PrimitiveAtom<NotificationAtomValue> & {
14
- init: NotificationAtomValue;
13
+ export declare const notificationStore: {
14
+ getSnapshot: () => NotificationAtomValue;
15
+ subscribe: (listener: () => void) => () => boolean;
16
+ setState: (updater: (prev: NotificationAtomValue) => NotificationAtomValue) => void;
15
17
  };
16
18
  type PushNotificationTemplate = Omit<NotificationEntry, 'id'>;
17
19
  export declare const useNotifications: () => {
@@ -1 +1 @@
1
- {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/helpers.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,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"}
1
+ {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/helpers.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,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;AAKF,eAAO,MAAM,iBAAiB;;0BAEN,MAAM,IAAI;wBAIZ,CAAC,IAAI,EAAE,qBAAqB,KAAK,qBAAqB;CAI3E,CAAC;AAEF,KAAK,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;AAE9D,eAAO,MAAM,gBAAgB;wBAExB,CAAC,SAAS,wBAAwB,4CAA4C,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI;CAqBlG,CAAC"}
@@ -1,31 +1,35 @@
1
1
  import { useCallback, useMemo } from "react";
2
- import { atom, useAtom } from "jotai";
3
- import { v4 } from "uuid";
4
2
  import "lodash-es";
5
3
  import "../../theme/palette.js";
6
4
  import { ensureArray } from "../../utils/common.js";
7
- const notificationAtom = atom({
8
- entries: []
9
- });
5
+ let _state = { entries: [] };
6
+ const _listeners = /* @__PURE__ */ new Set();
7
+ const notificationStore = {
8
+ getSnapshot: () => _state,
9
+ subscribe: (listener) => {
10
+ _listeners.add(listener);
11
+ return () => _listeners.delete(listener);
12
+ },
13
+ setState: (updater) => {
14
+ _state = updater(_state);
15
+ _listeners.forEach((l) => l());
16
+ }
17
+ };
10
18
  const useNotifications = () => {
11
- const [, setAtomValue] = useAtom(notificationAtom);
12
- const pushNotifications = useCallback(
13
- (notifications) => {
14
- return setAtomValue((prev) => {
15
- return {
16
- ...prev,
17
- entries: [
18
- ...prev.entries,
19
- ...ensureArray(notifications).map((notification) => ({
20
- ...notification,
21
- id: v4()
22
- }))
23
- ]
24
- };
25
- });
26
- },
27
- [setAtomValue]
28
- );
19
+ const pushNotifications = useCallback((notifications) => {
20
+ return notificationStore.setState((prev) => {
21
+ return {
22
+ ...prev,
23
+ entries: [
24
+ ...prev.entries,
25
+ ...ensureArray(notifications).map((notification) => ({
26
+ ...notification,
27
+ id: Math.random().toString(36).slice(2)
28
+ }))
29
+ ]
30
+ };
31
+ });
32
+ }, []);
29
33
  return useMemo(() => {
30
34
  return {
31
35
  pushNotifications
@@ -33,6 +37,6 @@ const useNotifications = () => {
33
37
  }, [pushNotifications]);
34
38
  };
35
39
  export {
36
- notificationAtom,
40
+ notificationStore,
37
41
  useNotifications
38
42
  };
@@ -1 +1 @@
1
- {"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/notifications.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,aAAa,wDA4BzB,CAAC"}
1
+ {"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/notifications.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,aAAa,wDA4BzB,CAAC"}
@@ -1,15 +1,15 @@
1
1
  import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
2
- import { useRef, useCallback, useEffect } from "react";
2
+ import { useSyncExternalStore, useRef, useCallback, useEffect } from "react";
3
3
  import { FloatingPortal } from "@floating-ui/react";
4
- import { useAtomValue, useAtom } from "jotai";
5
4
  import { isNil } from "lodash-es";
6
5
  import { AnimatePresence, useAnimation, motion } from "motion/react";
7
- import { notificationAtom } from "./helpers.js";
6
+ import { notificationStore } from "./helpers.js";
8
7
  import { getColorShadesByVariant } from "../../utils/index.js";
9
8
  import { FLOATING_Z_INDEX } from "../../theme/index.js";
10
9
  import { mediaQuery } from "../../theme/screens.js";
10
+ import { getTypographyVar } from "../../theme/typography.js";
11
11
  const Notifications = () => {
12
- const { entries } = useAtomValue(notificationAtom);
12
+ const { entries } = useSyncExternalStore(notificationStore.subscribe, notificationStore.getSnapshot);
13
13
  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
14
14
  "div",
15
15
  {
@@ -34,18 +34,17 @@ const Notifications = () => {
34
34
  };
35
35
  const Notification = ({ notification }) => {
36
36
  const { main, light } = getColorShadesByVariant(notification.color);
37
- const [, setAtomValue] = useAtom(notificationAtom);
38
37
  const timerRef = useRef(null);
39
38
  const controls = useAnimation();
40
39
  const progressControls = useAnimation();
41
40
  const startTimeRef = useRef(Date.now());
42
41
  const remainingTimeRef = useRef(notification.duration ?? 3e3);
43
42
  const removeNotification = useCallback(() => {
44
- setAtomValue((prev) => ({
43
+ notificationStore.setState((prev) => ({
45
44
  ...prev,
46
45
  entries: prev.entries.filter((n) => n.id !== notification.id)
47
46
  }));
48
- }, [notification.id, setAtomValue]);
47
+ }, [notification.id]);
49
48
  const clearTimer = useCallback(() => {
50
49
  if (isNil(timerRef.current)) return;
51
50
  clearTimeout(timerRef.current);
@@ -133,10 +132,13 @@ const Notification = ({ notification }) => {
133
132
  "div",
134
133
  {
135
134
  css: {
136
- fontSize: "0.875rem",
137
- lineHeight: "1.25rem",
135
+ fontSize: getTypographyVar("sm").fontSize,
136
+ lineHeight: getTypographyVar("sm").lineHeight,
138
137
  fontWeight: 500,
139
- [mediaQuery("sm")]: { fontSize: "1rem", lineHeight: "1.5rem" }
138
+ [mediaQuery("md")]: {
139
+ fontSize: getTypographyVar("base").fontSize,
140
+ lineHeight: getTypographyVar("base").lineHeight
141
+ }
140
142
  },
141
143
  children: notification.title ?? /* @__PURE__ */ jsx(Fragment, { children: " " })
142
144
  }
@@ -145,9 +147,12 @@ const Notification = ({ notification }) => {
145
147
  "div",
146
148
  {
147
149
  css: {
148
- fontSize: "0.75rem",
149
- lineHeight: "1rem",
150
- [mediaQuery("sm")]: { fontSize: "0.875rem", lineHeight: "1.25rem" }
150
+ fontSize: getTypographyVar("xs").fontSize,
151
+ lineHeight: getTypographyVar("xs").lineHeight,
152
+ [mediaQuery("md")]: {
153
+ fontSize: getTypographyVar("sm").fontSize,
154
+ lineHeight: getTypographyVar("sm").lineHeight
155
+ }
151
156
  },
152
157
  children: notification.message ?? /* @__PURE__ */ jsx(Fragment, { children: " " })
153
158
  }
@@ -1 +1 @@
1
- {"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/phone-input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAsD3D,eAAO,MAAM,UAAU,yHA8ItB,CAAC"}
1
+ {"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/phone-input.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAsD3D,eAAO,MAAM,UAAU,yHAqJtB,CAAC"}
@@ -1,9 +1,8 @@
1
1
  import { jsxs, jsx } from "@emotion/react/jsx-runtime";
2
- import { forwardRef, useState, useRef } from "react";
2
+ import { forwardRef, useState, useRef, useEffect } from "react";
3
3
  import { useMergeRefs } from "@floating-ui/react";
4
4
  import { isNil } from "lodash-es";
5
5
  import { phone } from "phone";
6
- import { useResizeObserver } from "usehooks-ts";
7
6
  import countries from "../../assets/json/countries.json.js";
8
7
  import { useControllableState } from "../../hooks/use-controllable-state.js";
9
8
  import { getColorShadesByVariant } from "../../utils/index.js";
@@ -55,16 +54,26 @@ const PhoneInput = forwardRef(
55
54
  const inputRef = useRef(null);
56
55
  const wrapperRef = useRef(null);
57
56
  const mergedRefs = useMergeRefs([ref, wrapperRef]);
57
+ const [wrapperWidth, setWrapperWidth] = useState(0);
58
+ useEffect(() => {
59
+ const resizeObserver = new ResizeObserver((entries) => {
60
+ var _a2;
61
+ const domRect = (_a2 = entries.at(0)) == null ? void 0 : _a2.target.getBoundingClientRect();
62
+ if (domRect) {
63
+ setWrapperWidth(domRect.width);
64
+ }
65
+ });
66
+ if (wrapperRef.current) {
67
+ resizeObserver.observe(wrapperRef.current);
68
+ }
69
+ return () => resizeObserver.disconnect();
70
+ }, []);
58
71
  const [internalValue, setInternalValue] = useControllableState({
59
72
  defaultValue: parsePhoneInputValue(defaultValue) ?? {
60
73
  countryCode: (_a = countries.at(0)) == null ? void 0 : _a.code
61
74
  },
62
75
  value: parsePhoneInputValue(value)
63
76
  });
64
- const { width: wrapperWidth = 0 } = useResizeObserver({
65
- ref: wrapperRef,
66
- box: "border-box"
67
- });
68
77
  const triggerChange = (next) => {
69
78
  setInternalValue(next);
70
79
  onChange == null ? void 0 : onChange(next);
@@ -89,110 +98,103 @@ const PhoneInput = forwardRef(
89
98
  const originalValue = internalValue.nationalNumber ?? "";
90
99
  return inputFocused ? originalValue : originalValue.replace(/^(\d{1,3})(\d{0,3})?(\d*)$/, "$1 $2 $3");
91
100
  })();
92
- return /* @__PURE__ */ jsxs(
93
- "div",
94
- {
95
- ...containerProps,
96
- css: { display: "flex", flexDirection: "column", width: "100%", ...containerProps == null ? void 0 : containerProps.css },
97
- children: [
98
- /* @__PURE__ */ jsx(
99
- ForwardRefInputMask,
100
- {
101
- ...props,
102
- css: [
103
- error && !selectOpen && {
104
- "&::after": { borderColor: getColorVar("red.600") }
101
+ return /* @__PURE__ */ jsxs("div", { ...containerProps, css: [{ display: "flex", flexDirection: "column", width: "100%" }, containerProps == null ? void 0 : containerProps.css], children: [
102
+ /* @__PURE__ */ jsx(
103
+ ForwardRefInputMask,
104
+ {
105
+ ...props,
106
+ css: [
107
+ error && !selectOpen && {
108
+ "&::after": { borderColor: getColorVar("red.600") }
109
+ },
110
+ inputFocused && {
111
+ "&::after": { borderColor: getColorVar("primary.600") },
112
+ boxShadow: `0 0 0 3px ${getColorVar("primary.300")}`
113
+ },
114
+ disabled && {
115
+ backgroundColor: getColorShadesByVariant("neutral").disabledSurface,
116
+ pointerEvents: "none"
117
+ },
118
+ props.css
119
+ ],
120
+ ref: mergedRefs,
121
+ children: /* @__PURE__ */ jsxs("div", { css: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
122
+ /* @__PURE__ */ jsx(
123
+ Select,
124
+ {
125
+ containerProps: {
126
+ css: { width: "fit-content", minWidth: 80 }
105
127
  },
106
- inputFocused && {
107
- "&::after": { borderColor: getColorVar("primary.600") },
108
- boxShadow: `0 0 0 3px ${getColorVar("primary.300")}`
128
+ css: {
129
+ paddingRight: 0
109
130
  },
110
- disabled && {
111
- backgroundColor: getColorShadesByVariant("neutral").disabledSurface,
112
- pointerEvents: "none"
131
+ xs: {
132
+ outline: {
133
+ top: 0,
134
+ right: 0,
135
+ bottom: 0,
136
+ left: 0
137
+ }
113
138
  },
114
- props.css
115
- ],
116
- ref: mergedRefs,
117
- children: /* @__PURE__ */ jsxs("div", { css: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
118
- /* @__PURE__ */ jsx(
119
- Select,
120
- {
121
- containerProps: {
122
- css: { width: "fit-content", minWidth: 80 }
123
- },
124
- css: {
125
- paddingRight: 0
126
- },
127
- xs: {
128
- outline: {
129
- top: 0,
130
- right: 0,
131
- bottom: 0,
132
- left: 0
133
- }
134
- },
135
- listProps: {
136
- style: {
137
- width: wrapperWidth
138
- }
139
- },
140
- value: internalValue.countryCode ?? null,
141
- onChange: onDialCodeChange,
142
- options: countries,
143
- disabled,
144
- selectedRenderer: SelectedRenderer,
145
- optionLabel: CountryRowLabel,
146
- optionValue: "code",
147
- optionSearchLabel: ["name", "dial_code", "code"],
148
- open: selectOpen,
149
- onOpenChange: setSelectOpen
139
+ listProps: {
140
+ style: {
141
+ width: wrapperWidth
150
142
  }
151
- ),
152
- /* @__PURE__ */ jsx(
153
- "div",
154
- {
155
- css: {
156
- borderRight: "1px solid",
157
- borderColor: getColorVar("border.default"),
158
- height: "66.666667%",
159
- marginLeft: 8,
160
- marginRight: 8
161
- }
143
+ },
144
+ value: internalValue.countryCode ?? null,
145
+ onChange: onDialCodeChange,
146
+ options: countries,
147
+ disabled,
148
+ selectedRenderer: SelectedRenderer,
149
+ optionLabel: CountryRowLabel,
150
+ optionValue: "code",
151
+ optionSearchLabel: ["name", "dial_code", "code"],
152
+ open: selectOpen,
153
+ onOpenChange: setSelectOpen
154
+ }
155
+ ),
156
+ /* @__PURE__ */ jsx(
157
+ "div",
158
+ {
159
+ css: {
160
+ borderRight: "1px solid",
161
+ borderColor: getColorVar("border.default"),
162
+ height: "66.666667%",
163
+ marginLeft: 8,
164
+ marginRight: 8
165
+ }
166
+ }
167
+ ),
168
+ /* @__PURE__ */ jsx(
169
+ Input,
170
+ {
171
+ value: inputDisplayValue,
172
+ disabled,
173
+ containerProps: {
174
+ css: { flex: 1 }
175
+ },
176
+ mainProps: {
177
+ style: {
178
+ paddingLeft: 0,
179
+ boxShadow: "none"
162
180
  }
163
- ),
164
- /* @__PURE__ */ jsx(
165
- Input,
166
- {
167
- value: inputDisplayValue,
168
- disabled,
169
- containerProps: {
170
- css: { flex: 1 }
171
- },
172
- mainProps: {
173
- style: {
174
- paddingLeft: 0,
175
- boxShadow: "none"
176
- }
177
- },
178
- onChange: onNationalNumberChange,
179
- xs: {
180
- css: {
181
- borderWidth: 0
182
- }
183
- },
184
- onFocus: () => setInputFocused(true),
185
- onBlur: () => setInputFocused(false),
186
- ref: inputRef
181
+ },
182
+ onChange: onNationalNumberChange,
183
+ xs: {
184
+ css: {
185
+ borderWidth: 0
187
186
  }
188
- )
189
- ] })
190
- }
191
- ),
192
- /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
193
- ]
194
- }
195
- );
187
+ },
188
+ onFocus: () => setInputFocused(true),
189
+ onBlur: () => setInputFocused(false),
190
+ ref: inputRef
191
+ }
192
+ )
193
+ ] })
194
+ }
195
+ ),
196
+ /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
197
+ ] });
196
198
  }
197
199
  );
198
200
  export {
@@ -0,0 +1,2 @@
1
+ export declare const CssBaseline: () => import("@emotion/react/jsx-runtime").JSX.Element;
2
+ //# sourceMappingURL=css-baseline.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"css-baseline.d.ts","sourceRoot":"","sources":["../../src/theme/css-baseline.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,wDAIvB,CAAC"}
@@ -1,30 +1,22 @@
1
- import { jsxs, jsx } from "@emotion/react/jsx-runtime";
2
- import { ThemeProvider as ThemeProvider$1, Global } from "@emotion/react";
1
+ import { jsx } from "@emotion/react/jsx-runtime";
2
+ import { useTheme, Global } from "@emotion/react";
3
3
  import { getColorVar } from "./palette.js";
4
4
  import { flatten } from "flat";
5
5
  import { flatMap } from "lodash-es";
6
6
  import { getTypographyVar } from "./typography.js";
7
- const ThemeProvider = ({ theme, children }) => {
8
- return /* @__PURE__ */ jsxs(ThemeProvider$1, { theme, children: [
9
- /* @__PURE__ */ jsx(Global, { styles: createGlobalStyle(theme) }),
10
- children
11
- ] });
7
+ const CssBaseline = () => {
8
+ const theme = useTheme();
9
+ return /* @__PURE__ */ jsx(Global, { styles: createGlobalStyle(theme) });
12
10
  };
13
11
  const createGlobalStyle = ({ palette, typography }) => {
14
12
  const flattenPalette = flatten(palette);
15
13
  const colorVars = Object.fromEntries(
16
- Object.keys(flattenPalette).map((key) => [
17
- getColorVar(key, false),
18
- flattenPalette[key]
19
- ])
14
+ Object.keys(flattenPalette).map((key) => [getColorVar(key, false), flattenPalette[key]])
20
15
  );
21
16
  const typographyVars = Object.fromEntries(
22
17
  flatMap(
23
18
  Object.keys(typography).map((key) => {
24
- const typographyVar = getTypographyVar(
25
- key,
26
- false
27
- );
19
+ const typographyVar = getTypographyVar(key, false);
28
20
  const { fontSize, lineHeight } = typography[key];
29
21
  return [
30
22
  [typographyVar.fontSize, fontSize],
@@ -299,5 +291,5 @@ const createGlobalStyle = ({ palette, typography }) => {
299
291
  };
300
292
  };
301
293
  export {
302
- ThemeProvider
294
+ CssBaseline
303
295
  };
@@ -1,6 +1,6 @@
1
1
  export * from './screens';
2
2
  export * from './palette';
3
3
  export * from './typography';
4
- export * from './provider';
4
+ export * from './css-baseline';
5
5
  export declare const FLOATING_Z_INDEX = 9999;
6
6
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAE3B,eAAO,MAAM,gBAAgB,OAAO,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAE/B,eAAO,MAAM,gBAAgB,OAAO,CAAC"}
@@ -1,11 +1,11 @@
1
1
  import { breakpoint, getSmallerScreens, mediaQuery, screens } from "./screens.js";
2
2
  import { getColorVar, groupedColors, paletteVars, parseColor } from "./palette.js";
3
3
  import { getSmallerTypographyVariants, getTypographyVar, typographyVars } from "./typography.js";
4
- import { ThemeProvider } from "./provider.js";
4
+ import { CssBaseline } from "./css-baseline.js";
5
5
  const FLOATING_Z_INDEX = 9999;
6
6
  export {
7
+ CssBaseline,
7
8
  FLOATING_Z_INDEX,
8
- ThemeProvider,
9
9
  breakpoint,
10
10
  getColorVar,
11
11
  getSmallerScreens,
@@ -1,4 +1,4 @@
1
- import { CSSObject } from '@emotion/serialize';
1
+ import { CSSObject } from '@emotion/react';
2
2
  import { Screen } from '../theme';
3
3
  import type * as CSS from 'csstype';
4
4
  export type Nullable<T> = T | null;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,MAAM,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC;AAE3D,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAErG,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D;;;;;;GAMG;AAEH,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,CAAC,OAAO,CAAC,GAC/E,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG;KAAG,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS;CAAE,CAAC;AAEvE,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG;IACxD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,MAAM,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC;AAE3D,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAErG,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D;;;;;;GAMG;AAEH,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,CAAC,OAAO,CAAC,GAC/E,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG;KAAG,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS;CAAE,CAAC;AAEvE,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG;IACxD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@janbox/storefront-ui",
3
- "version": "1.0.10",
3
+ "version": "1.0.12",
4
4
  "description": "Storefront UI component library for Janbox",
5
5
  "author": "Janbox",
6
6
  "keywords": [
@@ -23,10 +23,6 @@
23
23
  "types": "./dist/theme/index.d.ts",
24
24
  "default": "./dist/theme/index.js"
25
25
  },
26
- "./theme/*": {
27
- "types": "./dist/theme/*.d.ts",
28
- "default": "./dist/theme/*.js"
29
- },
30
26
  "./hooks": {
31
27
  "types": "./dist/hooks/index.d.ts",
32
28
  "default": "./dist/hooks/index.js"
@@ -57,9 +53,9 @@
57
53
  "access": "restricted"
58
54
  },
59
55
  "peerDependencies": {
60
- "@emotion/react": ">=11.0.0",
61
- "react": ">=18.0.0",
62
- "react-dom": ">=18.0.0"
56
+ "@emotion/react": "*",
57
+ "react": ">=19.0.0",
58
+ "react-dom": ">=19.0.0"
63
59
  },
64
60
  "dependencies": {
65
61
  "@floating-ui/react": "^0.27.13",
@@ -75,7 +71,6 @@
75
71
  "flat": "^6.0.1",
76
72
  "highlight-words-core": "^1.2.3",
77
73
  "html-react-parser": "^5.2.2",
78
- "jotai": "^2.12.2",
79
74
  "lodash-es": "^4.17.21",
80
75
  "motion": "^11.15.0",
81
76
  "overlayscrollbars-react": "^0.5.6",
@@ -84,13 +79,9 @@
84
79
  "react-i18next": "^14.0.0",
85
80
  "react-player": "^3.3.3",
86
81
  "react-router": "^7.9.6",
87
- "react-zoom-pan-pinch": "^3.7.0",
88
- "usehooks-ts": "^3.1.1",
89
- "uuid": "^10.0.0"
82
+ "react-zoom-pan-pinch": "^3.7.0"
90
83
  },
91
84
  "devDependencies": {
92
- "@emotion/react": "^11.13.3",
93
- "@emotion/serialize": "^1.3.3",
94
85
  "@eslint/js": "^9.24.0",
95
86
  "@storybook/builder-vite": "^10.2.14",
96
87
  "@storybook/react-vite": "^10.2.14",
@@ -100,7 +91,6 @@
100
91
  "@types/react": "^19.1.8",
101
92
  "@types/react-date-range": "^1.4.10",
102
93
  "@types/react-dom": "^19.1.6",
103
- "@types/uuid": "^10.0.0",
104
94
  "csstype": "^3.1.3",
105
95
  "eslint": "^9.24.0",
106
96
  "eslint-config-prettier": "^10.1.8",
@@ -111,8 +101,6 @@
111
101
  "globals": "^17.4.0",
112
102
  "i18next": "^25.8.13",
113
103
  "prettier": "^3.8.1",
114
- "react": "^19.1.0",
115
- "react-dom": "^19.1.0",
116
104
  "sass-embedded": "^1.97.3",
117
105
  "storybook": "^10.2.14",
118
106
  "type-fest": "^5.2.0",
@@ -1,7 +0,0 @@
1
- import { Theme } from '@emotion/react';
2
- import { PropsWithChildren } from 'react';
3
- export type ThemeProviderProps = PropsWithChildren<{
4
- theme: Theme;
5
- }>;
6
- export declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
7
- //# sourceMappingURL=provider.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EAGN,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,wBAAyB,kBAAkB,qDAOpE,CAAC"}