cherry-styled-components 0.2.15 → 0.2.16

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 (6) hide show
  1. package/README.md +4 -5
  2. package/dist/index.js +1 -2
  3. package/dist/styled-components/index.d.ts +0 -1
  4. package/dist/toast.d.ts +2 -2
  5. package/dist/utils/use-on-click-outside.js +43 -0
  6. package/package.json +13 -9
package/README.md CHANGED
@@ -100,11 +100,10 @@ A Next.js App Router setup looks like this:
100
100
  ```tsx
101
101
  // app/layout.tsx (server component)
102
102
  import { cookies } from "next/headers";
103
- import {
104
- ClientThemeProvider,
105
- StyledComponentsRegistry,
106
- themeInitScript,
107
- } from "cherry-styled-components";
103
+ // StyledComponentsRegistry is the one export that depends on Next, so it ships
104
+ // from the `/next` subpath instead of the package root.
105
+ import { StyledComponentsRegistry } from "cherry-styled-components/next";
106
+ import { ClientThemeProvider, themeInitScript } from "cherry-styled-components";
108
107
  import { theme, themeDark } from "./theme";
109
108
 
110
109
  export default async function RootLayout({ children }) {
package/dist/index.js CHANGED
@@ -7,7 +7,6 @@ import { useBelowBreakpoint, useMediaQuery } from "./utils/use-media-query.js";
7
7
  import { useOnClickOutside } from "./utils/use-on-click-outside.js";
8
8
  import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
9
9
  import { ClientThemeProvider } from "./styled-components/client-theme-provider.js";
10
- import { StyledComponentsRegistry } from "./styled-components/registry.js";
11
10
  import { createThemeInitScript, resolveTheme, themeInitScript } from "./styled-components/theme-init.js";
12
11
  import { Icon } from "./icon.js";
13
12
  import { Accordion } from "./accordion.js";
@@ -45,4 +44,4 @@ import { Textarea } from "./textarea.js";
45
44
  import { ThemeToggle } from "./theme-toggle.js";
46
45
  import { StyledNotificationItem, StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
47
46
  import { Toggle } from "./toggle.js";
48
- export { Accordion, Avatar, AvatarDropzone, Box, Button, Callout, ChatContext, ChatInput, ChatLauncher, ChatMessage, ChatMessageList, ChatPanel, ChatProvider, ChatSource, ChatSources, ChatTyping, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Prose, Range, Select, Space, Spinner, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, alpha, breakpoints, buttonStyles, chatTextStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, darkFilledTextRule, errorInteractiveStyles, filledTextColor, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, proseStyles, resetButton, resetInput, resolveShowcaseCommand, resolveTheme, shade, shadows, shadowsDark, showcaseCommands, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, thinScrollbar, tint, useBelowBreakpoint, useChat, useLockBodyScroll, useMediaQuery, useOnClickOutside, useToastNotifications };
47
+ export { Accordion, Avatar, AvatarDropzone, Box, Button, Callout, ChatContext, ChatInput, ChatLauncher, ChatMessage, ChatMessageList, ChatPanel, ChatProvider, ChatSource, ChatSources, ChatTyping, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Prose, Range, Select, Space, Spinner, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, alpha, breakpoints, buttonStyles, chatTextStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, darkFilledTextRule, errorInteractiveStyles, filledTextColor, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, proseStyles, resetButton, resetInput, resolveShowcaseCommand, resolveTheme, shade, shadows, shadowsDark, showcaseCommands, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, thinScrollbar, tint, useBelowBreakpoint, useChat, useLockBodyScroll, useMediaQuery, useOnClickOutside, useToastNotifications };
package/dist/styled-components/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
1
  export * from './client-theme-provider';
2
- export * from './registry';
3
2
  export * from './theme-init';
4
3
  export * from './theme-provider';
package/dist/toast.d.ts CHANGED
@@ -27,14 +27,14 @@ interface ToastNotificationsProviderProps {
27
27
  }
28
28
  declare function ToastNotificationsProvider({ children, }: ToastNotificationsProviderProps): React.JSX.Element;
29
29
  export declare const StyledNotifications: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style"> & {
30
- style?: import('styled-components/dist/types').CSSPropertiesWithVars | React.CSSProperties | undefined;
30
+ style?: React.CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
31
31
  }, {
32
32
  theme: Theme;
33
33
  $align?: ToastAlign;
34
34
  $bottom?: boolean;
35
35
  }>> & string;
36
36
  export declare const StyledNotificationItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style"> & {
37
- style?: import('styled-components/dist/types').CSSPropertiesWithVars | React.CSSProperties | undefined;
37
+ style?: React.CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
38
38
  }, {
39
39
  theme: Theme;
40
40
  $color: ToastColor;
package/dist/utils/use-on-click-outside.js CHANGED
@@ -2,6 +2,46 @@
2
2
  "use client";
3
3
  import { useEffect, useRef } from "react";
4
4
  //#region src/lib/utils/use-on-click-outside.tsx
5
+ var NATIVE_PICKER_SELECTOR = [
6
+ "select",
7
+ "input[type=\"date\"]",
8
+ "input[type=\"datetime-local\"]",
9
+ "input[type=\"month\"]",
10
+ "input[type=\"time\"]",
11
+ "input[type=\"week\"]"
12
+ ].join(",");
13
+ var RECENT_PRESS_MS = 400;
14
+ var subscriberCount = 0;
15
+ var lastPressAt = Number.NEGATIVE_INFINITY;
16
+ var pickerBlurredAt = Number.NEGATIVE_INFINITY;
17
+ var capture = {
18
+ capture: true,
19
+ passive: true
20
+ };
21
+ function notePress() {
22
+ lastPressAt = performance.now();
23
+ }
24
+ function noteFocusOut(event) {
25
+ const target = event.target;
26
+ if (target instanceof Element && target.matches(NATIVE_PICKER_SELECTOR)) pickerBlurredAt = performance.now();
27
+ }
28
+ function subscribeToPresses() {
29
+ if (subscriberCount++ > 0) return;
30
+ document.addEventListener("pointerdown", notePress, capture);
31
+ document.addEventListener("touchstart", notePress, capture);
32
+ document.addEventListener("focusout", noteFocusOut, true);
33
+ }
34
+ function unsubscribeFromPresses() {
35
+ if (--subscriberCount > 0) return;
36
+ document.removeEventListener("pointerdown", notePress, capture);
37
+ document.removeEventListener("touchstart", notePress, capture);
38
+ document.removeEventListener("focusout", noteFocusOut, true);
39
+ }
40
+ function isStrayPickerEvent() {
41
+ const now = performance.now();
42
+ const active = document.activeElement;
43
+ return (active instanceof Element && active.matches(NATIVE_PICKER_SELECTOR) || now - pickerBlurredAt < RECENT_PRESS_MS) && now - lastPressAt >= RECENT_PRESS_MS;
44
+ }
5
45
  function useOnClickOutside(refs, cb) {
6
46
  const latest = useRef({
7
47
  refs,
@@ -16,11 +56,14 @@ function useOnClickOutside(refs, cb) {
16
56
  useEffect(() => {
17
57
  function handleClickOutside(event) {
18
58
  const { refs, cb } = latest.current;
59
+ if (isStrayPickerEvent()) return;
19
60
  if (refs.every((ref) => !ref.current || !ref.current.contains(event.target))) cb();
20
61
  }
62
+ subscribeToPresses();
21
63
  document.addEventListener("mousedown", handleClickOutside);
22
64
  return () => {
23
65
  document.removeEventListener("mousedown", handleClickOutside);
66
+ unsubscribeFromPresses();
24
67
  };
25
68
  }, []);
26
69
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cherry-styled-components",
3
- "version": "0.2.15",
3
+ "version": "0.2.16",
4
4
  "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
5
5
  "private": false,
6
6
  "type": "module",
@@ -10,6 +10,10 @@
10
10
  ".": {
11
11
  "types": "./dist/index.d.ts",
12
12
  "import": "./dist/index.js"
13
+ },
14
+ "./next": {
15
+ "types": "./dist/styled-components/registry.d.ts",
16
+ "import": "./dist/styled-components/registry.js"
13
17
  }
14
18
  },
15
19
  "files": [
@@ -20,7 +24,7 @@
20
24
  "homepage": "https://cherry.al",
21
25
  "repository": "https://github.com/cherry-design-system/styled-components",
22
26
  "license": "MIT",
23
- "packageManager": "pnpm@11.20.0",
27
+ "packageManager": "pnpm@11.21.0",
24
28
  "engines": {
25
29
  "node": ">=18.0.0"
26
30
  },
@@ -45,7 +49,7 @@
45
49
  "screenshots": "node scripts/screenshot-previews.cjs"
46
50
  },
47
51
  "dependencies": {
48
- "lucide-react": "^1.28.0"
52
+ "lucide-react": "^1.31.0"
49
53
  },
50
54
  "peerDependencies": {
51
55
  "react": "^18.0.0 || ^19.0.0",
@@ -53,24 +57,24 @@
53
57
  "styled-components": "^6.0.0"
54
58
  },
55
59
  "devDependencies": {
56
- "@swc/plugin-styled-components": "^12.15.0",
57
- "@types/node": "^26.1.2",
60
+ "@swc/plugin-styled-components": "^12.19.0",
61
+ "@types/node": "^26.2.0",
58
62
  "@types/react": "^19.2.18",
59
63
  "@types/react-dom": "^19.2.4",
60
64
  "@typescript/typescript6": "^6.0.2",
61
65
  "@vitejs/plugin-react-swc": "^4.3.3",
62
66
  "eslint-plugin-react-hooks": "^7.1.1",
63
- "eslint-plugin-react-refresh": "^0.5.3",
64
- "next": "^16.3.0",
67
+ "eslint-plugin-react-refresh": "^0.5.4",
68
+ "next": "^16.3.1",
65
69
  "playwright-core": "^1.62.1",
66
70
  "prettier": "^3.9.6",
67
71
  "react": "^19.2.8",
68
72
  "react-dom": "^19.2.8",
69
73
  "rollup-plugin-preserve-directives": "^0.4.0",
70
74
  "sharp": "^0.35.3",
71
- "styled-components": "^6.5.0",
75
+ "styled-components": "^6.5.2",
72
76
  "typescript": "^7.0.2",
73
- "vite": "^8.2.0",
77
+ "vite": "^8.2.1",
74
78
  "vite-plugin-dts": "^5.0.3"
75
79
  }
76
80
  }