cherry-styled-components 0.2.13 → 0.2.15

package/dist/chat-launcher.js

@@ -21,14 +21,14 @@ var pulseGlow = keyframes([`0%,100%{opacity:0.5;filter:blur(16px);}50%{opacity:1
 var conicStops = (colors) => [...colors, colors[0]].join(", ");
 var StyledChatLauncher = styled.button.withConfig({
 	displayName: "chat-launcher__StyledChatLauncher",
-	componentId: "sc-2dd3d5f9-0"
+	componentId: "sc-64539cc0-0"
 })([
 	``,
-	`;appearance:none;outline:none;cursor:pointer;background:`,
+	`;appearance:none;outline:none;cursor:pointer;box-sizing:border-box;height:30px;background:`,
 	`;border:solid 1px `,
 	`;color:`,
 	`;border-radius:`,
-	`;padding:0;font-size:12px;font-family:inherit;font-weight:600;& .chat-launcher-inner{padding:6px 8px;display:flex;align-items:center;gap:6px;background:`,
+	`;padding:0;font-size:12px;font-family:inherit;font-weight:600;& .chat-launcher-inner{padding:0 8px;height:100%;display:flex;align-items:center;gap:6px;background:`,
 	`;border-radius:`,
 	`;}& svg{width:16px;height:16px;color:inherit;}`,
 	``

package/dist/chat-provider.js

@@ -3,6 +3,7 @@
 import { resolveShowcaseCommand } from "./chat-showcase.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 //#region src/lib/chat-provider.tsx
 var ChatContext = /*#__PURE__*/ createContext({
 	isOpen: false,
@@ -82,7 +83,8 @@ function ChatProvider({ children, onSend, greeting, historyLimit = 20, shortcut
 			openerRef.current = returnFocusTo?.isConnected === true ? returnFocusTo : pendingOpener?.isConnected === true ? pendingOpener : activeElement instanceof HTMLElement && activeElement !== document.body ? activeElement : null;
 		}
 		isOpenRef.current = true;
-		setIsOpen(true);
+		flushSync(() => setIsOpen(true));
+		inputRef.current?.focus();
 		if (focusTimeoutRef.current) clearTimeout(focusTimeoutRef.current);
 		focusTimeoutRef.current = setTimeout(() => {
 			focusTimeoutRef.current = null;

package/dist/chat-sources.js

@@ -7,11 +7,11 @@ import styled from "styled-components";
 //#region src/lib/chat-sources.tsx
 var StyledChatSources = styled.div.withConfig({
 	displayName: "chat-sources__StyledChatSources",
-	componentId: "sc-7fa69b52-0"
-})([`display:flex;gap:16px;flex-wrap:wrap;`]);
+	componentId: "sc-f28b3c84-0"
+})([`display:flex;gap:16px;flex-wrap:wrap;&:not(:first-child){margin-top:10px;}`]);
 var StyledChatSource = styled.a.withConfig({
 	displayName: "chat-sources__StyledChatSource",
-	componentId: "sc-7fa69b52-1"
+	componentId: "sc-f28b3c84-1"
 })([
 	`position:relative;text-decoration:none;font-size:`,
 	`;line-height:1;color:`,

package/dist/prose.js

@@ -42,7 +42,8 @@ var accent = (theme) => theme.isDark ? theme.colors.primaryLight : theme.colors.
 		`;padding:2px 4px;border-radius:`,
 		`;font-family:`,
 		`;white-space:pre;}& pre,& .hljs{margin:10px 0;overflow-x:auto;`,
-		`;}& .code-wrapper pre{margin:0;}& blockquote{margin:`,
+		`;}& .code-wrapper{margin:`,
+		` 0;}& .code-wrapper pre{margin:0;}& blockquote{margin:`,
 		` 0;padding:0 0 0 16px;border-left:solid 2px `,
 		`;color:`,
 		`;}& hr{margin:`,
@@ -57,11 +58,11 @@ var accent = (theme) => theme.isDark ? theme.colors.primaryLight : theme.colors.
 		`;`,
 		`;}}& img,& video,& iframe{max-width:100%;border-radius:`,
 		`;margin:10px 0;display:block;}`
-	], theme.colors.dark, styledText(theme), block, styledText(theme), block, theme.colors.dark, ($compact ? styledH3 : styledH1)(theme), ($compact ? styledH4 : styledH2)(theme), ($compact ? styledH5 : styledH3)(theme), ($compact ? styledH6 : styledH4)(theme), ($compact ? styledH6 : styledH5)(theme), styledH6(theme), theme.colors.primary, accent(theme), theme.colors.primary, theme.spacing.radius.xs, theme.colors.primary, theme.colors.primaryLight, block, styledText(theme), theme.colors.primary, styledText(theme), theme.colors.primary, alpha(theme.colors.primaryLight, 20), theme.colors.dark, theme.spacing.radius.xs, theme.fonts.mono, thinScrollbar, block, theme.colors.grayLight, theme.colors.grayDark, block, theme.colors.grayLight, block, thinScrollbar, theme.colors.grayLight, styledSmall(theme), theme.colors.dark, theme.colors.grayLight, theme.colors.grayDark, styledSmall(theme), theme.spacing.radius.lg);
+	], theme.colors.dark, styledText(theme), block, styledText(theme), block, theme.colors.dark, ($compact ? styledH3 : styledH1)(theme), ($compact ? styledH4 : styledH2)(theme), ($compact ? styledH5 : styledH3)(theme), ($compact ? styledH6 : styledH4)(theme), ($compact ? styledH6 : styledH5)(theme), styledH6(theme), theme.colors.primary, accent(theme), theme.colors.primary, theme.spacing.radius.xs, theme.colors.primary, theme.colors.primaryLight, block, styledText(theme), theme.colors.primary, styledText(theme), theme.colors.primary, alpha(theme.colors.primaryLight, 20), theme.colors.dark, theme.spacing.radius.xs, theme.fonts.mono, thinScrollbar, block, block, theme.colors.grayLight, theme.colors.grayDark, block, theme.colors.grayLight, block, thinScrollbar, theme.colors.grayLight, styledSmall(theme), theme.colors.dark, theme.colors.grayLight, theme.colors.grayDark, styledSmall(theme), theme.spacing.radius.lg);
 };
 var StyledProse = styled.div.withConfig({
 	displayName: "prose__StyledProse",
-	componentId: "sc-91bd953a-0"
+	componentId: "sc-c60056db-0"
 })([``, `;`], ({ theme, $compact }) => proseStyles(theme, $compact));
 function LocalProse({ children, ...props }, ref) {
 	return /*#__PURE__*/ jsx(StyledProse, {

package/dist/styled-components/theme-init.d.ts

@@ -3,13 +3,21 @@ import { Theme } from '../utils';
  * Blocking script for the document <head>. On a first visit from a browser
  * that doesn't send Sec-CH-Prefers-Color-Scheme (Safari, Firefox), it seeds
  * the `theme` cookie from the OS preference and, when dark, hides the body
- * behind a `#__theme-init` style so the light server render never flashes.
- * ClientThemeProvider removes that style once the corrected theme has
- * committed on the client. Pass your dark theme's page background so the
- * brief pre-hydration frame matches it.
+ * behind a `#__theme-init` style so the light server render never flashes,
+ * and rewrites `<meta name="theme-color">` to `darkThemeColor` so the browser
+ * chrome (Safari tab bar, Android toolbar) doesn't hold the light tint until
+ * hydration — the server had no cookie to resolve, and the provider's own
+ * meta sync runs too late by definition. The meta rewrite mirrors
+ * ClientThemeProvider's sync (single canonical tag, media-scoped ones
+ * removed), which takes over from here after hydration.
+ * ClientThemeProvider removes the `#__theme-init` style once the corrected
+ * theme has committed on the client. Pass your dark theme's page background
+ * so the brief pre-hydration frame matches it; pass `darkThemeColor` when
+ * your provider uses a non-default `$themeColor` (e.g. "primary") so the
+ * pre-hydration tint matches that token's dark value instead.
  */
-export declare function createThemeInitScript(darkBackground?: string): string;
-/** createThemeInitScript() with the default dark background (#000). */
+export declare function createThemeInitScript(darkBackground?: string, darkThemeColor?: string): string;
+/** createThemeInitScript() with the default dark background and theme-color (#000). */
 export declare const themeInitScript: string;
 /**
  * Resolves a `theme` cookie value ("light" | "dark") to a theme object.

package/dist/styled-components/theme-init.js

@@ -3,14 +3,22 @@
 * Blocking script for the document <head>. On a first visit from a browser
 * that doesn't send Sec-CH-Prefers-Color-Scheme (Safari, Firefox), it seeds
 * the `theme` cookie from the OS preference and, when dark, hides the body
-* behind a `#__theme-init` style so the light server render never flashes.
-* ClientThemeProvider removes that style once the corrected theme has
-* committed on the client. Pass your dark theme's page background so the
-* brief pre-hydration frame matches it.
-*/ function createThemeInitScript(darkBackground = "#000") {
-	return `(function(){try{var c=document.cookie.split(";").find(function(s){return s.trim().startsWith("theme=")});if(!c){var d=window.matchMedia&&window.matchMedia("(prefers-color-scheme:dark)").matches;document.cookie="theme="+(d?"dark":"light")+";path=/;max-age=31536000;SameSite=Lax";if(d){var s=document.createElement("style");s.id="__theme-init";s.textContent="html{background:${darkBackground}!important;color-scheme:dark}body{visibility:hidden}";document.head.appendChild(s)}}}catch(e){}})();`;
+* behind a `#__theme-init` style so the light server render never flashes,
+* and rewrites `<meta name="theme-color">` to `darkThemeColor` so the browser
+* chrome (Safari tab bar, Android toolbar) doesn't hold the light tint until
+* hydration — the server had no cookie to resolve, and the provider's own
+* meta sync runs too late by definition. The meta rewrite mirrors
+* ClientThemeProvider's sync (single canonical tag, media-scoped ones
+* removed), which takes over from here after hydration.
+* ClientThemeProvider removes the `#__theme-init` style once the corrected
+* theme has committed on the client. Pass your dark theme's page background
+* so the brief pre-hydration frame matches it; pass `darkThemeColor` when
+* your provider uses a non-default `$themeColor` (e.g. "primary") so the
+* pre-hydration tint matches that token's dark value instead.
+*/ function createThemeInitScript(darkBackground = "#000", darkThemeColor = darkBackground) {
+	return `(function(){try{var c=document.cookie.split(";").find(function(s){return s.trim().startsWith("theme=")});if(!c){var d=window.matchMedia&&window.matchMedia("(prefers-color-scheme:dark)").matches;document.cookie="theme="+(d?"dark":"light")+";path=/;max-age=31536000;SameSite=Lax";if(d){var s=document.createElement("style");s.id="__theme-init";s.textContent="html{background:${darkBackground}!important;color-scheme:dark}body{visibility:hidden}";document.head.appendChild(s);var m=document.querySelector('meta[name="theme-color"]');if(!m){m=document.createElement("meta");m.name="theme-color";document.head.appendChild(m)}m.removeAttribute("media");m.content="${darkThemeColor}";document.querySelectorAll('meta[name="theme-color"][media]').forEach(function(n){n.remove()})}}}catch(e){}})();`;
 }
-/** createThemeInitScript() with the default dark background (#000). */ var themeInitScript = createThemeInitScript();
+/** createThemeInitScript() with the default dark background and theme-color (#000). */ var themeInitScript = createThemeInitScript();
 /**
 * Resolves a `theme` cookie value ("light" | "dark") to a theme object.
 * Meant for server code: read the cookie, resolve, pass the result to

package/dist/toast.d.ts

@@ -26,30 +26,23 @@ interface ToastNotificationsProviderProps {
     children: React.ReactNode;
 }
 declare function ToastNotificationsProvider({ children, }: ToastNotificationsProviderProps): React.JSX.Element;
-export declare const StyledNotifications: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "theme" | "$align" | "$bottom"> & {
+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"> & {
+    style?: import('styled-components/dist/types').CSSPropertiesWithVars | React.CSSProperties | undefined;
+}, {
     theme: Theme;
     $align?: ToastAlign;
     $bottom?: boolean;
-}, never> & Partial<Pick<import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "theme" | "$align" | "$bottom"> & {
-    theme: Theme;
-    $align?: ToastAlign;
-    $bottom?: boolean;
-}, never>>> & string;
-export declare const StyledNotificationItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "theme" | "$color" | "$align" | "$bottom" | "$visible" | "$static"> & {
-    theme: Theme;
-    $color: ToastColor;
-    $visible: boolean;
-    $static: boolean;
-    $align?: ToastAlign;
-    $bottom?: boolean;
-}, never> & Partial<Pick<import('styled-components').FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "theme" | "$color" | "$align" | "$bottom" | "$visible" | "$static"> & {
+}>> & string;
+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"> & {
+    style?: import('styled-components/dist/types').CSSPropertiesWithVars | React.CSSProperties | undefined;
+}, {
     theme: Theme;
     $color: ToastColor;
     $visible: boolean;
     $static: boolean;
     $align?: ToastAlign;
     $bottom?: boolean;
-}, never>>> & string;
+}>> & string;
 export interface ToastNotificationsProps {
     $align?: ToastAlign;
     $bottom?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -20,7 +20,7 @@
   "homepage": "https://cherry.al",
   "repository": "https://github.com/cherry-design-system/styled-components",
   "license": "MIT",
-  "packageManager": "pnpm@11.19.0",
+  "packageManager": "pnpm@11.20.0",
   "engines": {
     "node": ">=18.0.0"
   },
@@ -61,14 +61,14 @@
     "@vitejs/plugin-react-swc": "^4.3.3",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "next": "^16.2.12",
+    "next": "^16.3.0",
     "playwright-core": "^1.62.1",
     "prettier": "^3.9.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "sharp": "^0.35.3",
-    "styled-components": "^6.4.4",
+    "styled-components": "^6.5.0",
     "typescript": "^7.0.2",
     "vite": "^8.2.0",
     "vite-plugin-dts": "^5.0.3"