cherry-styled-components 0.1.18 → 0.2.0

package/dist/styled-components/client-theme-provider.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { Theme } from '../utils';
+export interface ClientThemeProviderProps {
+    children: React.ReactNode;
+    theme: Theme;
+    themeDark?: Theme;
+    /**
+     * The theme the server resolved from the `theme` cookie for the first
+     * render. Omit in client-only apps and resolve it before mounting instead.
+     */
+    $initial?: "light" | "dark";
+    /**
+     * Keeps a `theme-color` meta tag in sync with the active theme so browser
+     * chrome (e.g. the iOS Safari status bar) matches the page. Pass the name
+     * of the theme color to track, or false to disable. A key (not a function)
+     * so it stays serializable across the server/client component boundary.
+     * Defaults to "light".
+     */
+    $themeColor?: keyof Theme["colors"] | false;
+    /**
+     * Renders Cherry's GlobalStyles for the active theme. Pass false when the
+     * app provides its own global styles.
+     */
+    $globalStyles?: boolean;
+}
+/**
+ * SSR-aware theme provider. Renders with the server-resolved theme on the
+ * first paint (no dark-mode flash), reconciles it against the `theme` cookie
+ * and OS preference on mount (Safari/Firefox don't send client hints, so
+ * their first server render can guess wrong), and exposes setTheme /
+ * toggleTheme through ThemeContext. Theme changes persist to the `theme`
+ * cookie and localStorage; no API route is needed.
+ */
+declare function ClientThemeProvider({ children, theme, themeDark, $initial, $themeColor, $globalStyles, }: ClientThemeProviderProps): React.JSX.Element;
+export { ClientThemeProvider };

package/dist/styled-components/client-theme-provider.js

@@ -0,0 +1,103 @@
+"use client";
+"use client";
+import { GlobalStyles } from "../utils/global.js";
+import { ThemeContext } from "./theme-provider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { ThemeProvider } from "styled-components";
+//#region src/lib/styled-components/client-theme-provider.tsx
+var THEME_COOKIE_MAX_AGE = 3600 * 24 * 365;
+function readThemeCookie() {
+	const cookie = document.cookie.split(";").map((c) => c.trim()).find((c) => c.startsWith("theme="));
+	const value = cookie ? cookie.split("=")[1] : void 0;
+	return value === "dark" ? "dark" : value === "light" ? "light" : void 0;
+}
+function persistTheme(value) {
+	document.cookie = `theme=${value};path=/;max-age=${THEME_COOKIE_MAX_AGE};SameSite=Lax`;
+	try {
+		if (typeof localStorage !== "undefined") localStorage.theme = value;
+	} catch {}
+}
+function removeThemeInitStyle() {
+	const el = document.getElementById("__theme-init");
+	if (el) el.remove();
+}
+/**
+* SSR-aware theme provider. Renders with the server-resolved theme on the
+* first paint (no dark-mode flash), reconciles it against the `theme` cookie
+* and OS preference on mount (Safari/Firefox don't send client hints, so
+* their first server render can guess wrong), and exposes setTheme /
+* toggleTheme through ThemeContext. Theme changes persist to the `theme`
+* cookie and localStorage; no API route is needed.
+*/ function ClientThemeProvider({ children, theme, themeDark, $initial = "light", $themeColor = "light", $globalStyles = true }) {
+	const initialTheme = $initial === "dark" && themeDark ? themeDark : theme;
+	const [overrideTheme, setOverrideTheme] = useState(null);
+	const effectiveTheme = useMemo(() => overrideTheme ?? initialTheme, [overrideTheme, initialTheme]);
+	useEffect(() => {
+		if (!themeDark) {
+			removeThemeInitStyle();
+			return;
+		}
+		try {
+			let cookieValue = readThemeCookie();
+			if (!cookieValue && typeof localStorage !== "undefined") {
+				const stored = localStorage.theme;
+				if (stored === "dark" || stored === "light") {
+					persistTheme(stored);
+					cookieValue = stored;
+				}
+			}
+			if (!cookieValue) {
+				cookieValue = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+				persistTheme(cookieValue);
+			}
+			const wantDark = cookieValue === "dark";
+			if (initialTheme.isDark !== wantDark) {
+				setOverrideTheme(wantDark ? themeDark : theme);
+				return;
+			}
+		} catch {}
+		removeThemeInitStyle();
+	}, []);
+	useEffect(() => {
+		if (overrideTheme) removeThemeInitStyle();
+	}, [overrideTheme]);
+	useEffect(() => {
+		document.documentElement.classList.toggle("dark", effectiveTheme.isDark);
+	}, [effectiveTheme.isDark]);
+	useEffect(() => {
+		if (!$themeColor) return;
+		const background = effectiveTheme.colors[$themeColor];
+		let meta = document.querySelector("meta[name=\"theme-color\"]");
+		if (!meta) {
+			meta = document.createElement("meta");
+			meta.name = "theme-color";
+			document.head.appendChild(meta);
+		}
+		meta.removeAttribute("media");
+		meta.content = background;
+		document.querySelectorAll("meta[name=\"theme-color\"][media]").forEach((m) => m.remove());
+	}, [effectiveTheme, $themeColor]);
+	const setTheme = (action) => {
+		const next = typeof action === "function" ? action(effectiveTheme) : action;
+		setOverrideTheme(next);
+		persistTheme(next.isDark ? "dark" : "light");
+	};
+	const toggleTheme = () => {
+		if (!themeDark) return;
+		setTheme(effectiveTheme.isDark ? theme : themeDark);
+	};
+	const GlobalStylesComponent = $globalStyles ? GlobalStyles(effectiveTheme) : null;
+	return /*#__PURE__*/ jsx(ThemeProvider, {
+		theme: effectiveTheme,
+		children: /*#__PURE__*/ jsxs(ThemeContext.Provider, {
+			value: {
+				setTheme,
+				toggleTheme
+			},
+			children: [GlobalStylesComponent && /*#__PURE__*/ jsx(GlobalStylesComponent, {}), children]
+		})
+	});
+}
+//#endregion
+export { ClientThemeProvider };

package/dist/styled-components/index.d.ts

@@ -1,2 +1,4 @@
+export * from './client-theme-provider';
 export * from './registry';
+export * from './theme-init';
 export * from './theme-provider';

package/dist/styled-components/registry.js

@@ -2,8 +2,8 @@
 "use client";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { useServerInsertedHTML } from "next/navigation";
 import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+import { useServerInsertedHTML } from "next/navigation";
 //#region src/lib/styled-components/registry.tsx
 function StyledComponentsRegistry({ children }) {
 	const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());

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

@@ -0,0 +1,19 @@
+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.
+ */
+export declare function createThemeInitScript(darkBackground?: string): string;
+/** createThemeInitScript() with the default dark background (#000). */
+export declare const themeInitScript: string;
+/**
+ * Resolves a `theme` cookie value ("light" | "dark") to a theme object.
+ * Meant for server code: read the cookie, resolve, pass the result to
+ * ClientThemeProvider via $initial (or use it for viewport theme-color).
+ */
+export declare function resolveTheme(cookieValue: string | undefined, theme: Theme, themeDark?: Theme): Theme;

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

@@ -0,0 +1,22 @@
+//#region src/lib/styled-components/theme-init.ts
+/**
+* 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){}})();`;
+}
+/** createThemeInitScript() with the default dark background (#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
+* ClientThemeProvider via $initial (or use it for viewport theme-color).
+*/ function resolveTheme(cookieValue, theme, themeDark) {
+	return cookieValue === "dark" && themeDark ? themeDark : theme;
+}
+//#endregion
+export { createThemeInitScript, resolveTheme, themeInitScript };

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

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { Theme } from '../utils';
 interface ThemeContextProps {
     setTheme: React.Dispatch<React.SetStateAction<Theme>>;
+    toggleTheme: () => void;
 }
 export declare const ThemeContext: React.Context<ThemeContextProps>;
 declare function CherryThemeProvider({ children, theme, themeDark, }: {

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

@@ -5,7 +5,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useEffect, useState } from "react";
 import { ThemeProvider } from "styled-components";
 //#region src/lib/styled-components/theme-provider.tsx
-var ThemeContext = /*#__PURE__*/ createContext({ setTheme: () => {} });
+var ThemeContext = /*#__PURE__*/ createContext({
+	setTheme: () => {},
+	toggleTheme: () => {}
+});
 function CherryThemeProvider({ children, theme, themeDark }) {
 	const [currentTheme, setTheme] = useState(theme);
 	useEffect(() => {
@@ -18,11 +21,21 @@ function CherryThemeProvider({ children, theme, themeDark }) {
 			setTheme(theme);
 		}
 	}, [theme, themeDark]);
+	const toggleTheme = () => {
+		if (!themeDark) return;
+		const next = currentTheme.isDark ? theme : themeDark;
+		setTheme(next);
+		localStorage.theme = next.isDark ? "dark" : "light";
+		document.documentElement.classList.toggle("dark", next.isDark);
+	};
 	const GlobalStylesComponent = GlobalStyles(currentTheme);
 	return /*#__PURE__*/ jsx(ThemeProvider, {
 		theme: currentTheme,
 		children: /*#__PURE__*/ jsxs(ThemeContext.Provider, {
-			value: { setTheme },
+			value: {
+				setTheme,
+				toggleTheme
+			},
 			children: [/*#__PURE__*/ jsx(GlobalStylesComponent, {}), children]
 		})
 	});

package/dist/theme-toggle.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface ThemeToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    $hidden?: boolean;
+}
+declare const ThemeToggle: React.ForwardRefExoticComponent<ThemeToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export { ThemeToggle };

package/dist/theme-toggle.js

@@ -0,0 +1,42 @@
+"use client";
+"use client";
+import { resetButton } from "./utils/mixins.js";
+import { ThemeContext } from "./styled-components/theme-provider.js";
+import { Icon } from "./icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+//#region src/lib/theme-toggle.tsx
+var StyledThemeToggle = styled.button.withConfig({
+	displayName: "theme-toggle__StyledThemeToggle",
+	componentId: "sc-cc0c1ca5-0"
+})([
+	``,
+	` width:56px;height:30px;border-radius:30px;display:flex;position:relative;margin:auto 0;transform:scale(1);background:`,
+	`;border:1px solid `,
+	`;transition:all 0.3s ease;&::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:`,
+	`;transition:all 0.3s ease;z-index:1;`,
+	`}`,
+	` & svg{width:16px;height:16px;object-fit:contain;margin:auto;transition:all 0.3s ease;position:relative;z-index:2;}& .lucide-sun{transform:translateX(1px);}& svg[stroke]{stroke:`,
+	`;}&:hover{transform:scale(1.05);color:`,
+	`;& svg[stroke]{stroke:`,
+	`;}}&:active{transform:scale(0.97);}`
+], resetButton, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => rgba(theme.colors.primaryLight, .2), ({ theme }) => theme.isDark && css([`transform:translateX(26px);`]), ({ $hidden }) => $hidden && css([`display:none;`]), ({ theme }) => theme.colors.primary, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark);
+function LocalThemeToggle({ onClick, ...props }, ref) {
+	const { toggleTheme } = useContext(ThemeContext);
+	return /*#__PURE__*/ jsxs(StyledThemeToggle, {
+		type: "button",
+		"aria-label": "Toggle Theme",
+		...props,
+		onClick: (event) => {
+			toggleTheme();
+			onClick?.(event);
+		},
+		ref,
+		children: [/*#__PURE__*/ jsx(Icon, { name: "Sun" }), /*#__PURE__*/ jsx(Icon, { name: "MoonStar" })]
+	});
+}
+var ThemeToggle = /*#__PURE__*/ forwardRef(LocalThemeToggle);
+//#endregion
+export { ThemeToggle };

package/dist/toast.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { Theme } from './utils';
+export type ToastColor = "info" | "success" | "error" | "warning";
+export interface ToastConfig {
+    color?: ToastColor;
+    autoHide?: number;
+}
+type Toast = {
+    text: string;
+    status: "hidden" | "visible";
+    color: ToastColor;
+    autoHide: number;
+};
+declare const ToastNotificationsContext: React.Context<{
+    notifications: Toast[];
+    addNotification: (text: string, config?: ToastConfig) => void;
+}>;
+declare function useToastNotifications(): {
+    notifications: Toast[];
+    addNotification: (text: string, config?: ToastConfig) => void;
+};
+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"> & {
+    theme: Theme;
+    $align?: "center" | "left" | "right";
+    $bottom?: boolean;
+}, never> & Partial<Pick<import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "theme" | "$align" | "$bottom"> & {
+    theme: Theme;
+    $align?: "center" | "left" | "right";
+    $bottom?: boolean;
+}, never>>> & string;
+export interface ToastNotificationsProps {
+    $align?: "center" | "left" | "right";
+    $bottom?: boolean;
+}
+declare function ToastNotifications({ $align, $bottom, }: ToastNotificationsProps): React.JSX.Element;
+export { ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications, };

package/dist/toast.js

@@ -0,0 +1,115 @@
+"use client";
+"use client";
+import { Icon } from "./icon.js";
+import { IconButton } from "./icon-button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/toast.tsx
+var statusIcons = {
+	success: "CircleCheck",
+	error: "CircleX",
+	warning: "TriangleAlert",
+	info: "Info"
+};
+var ToastNotificationsContext = /*#__PURE__*/ createContext({
+	notifications: [],
+	addNotification: () => null
+});
+function useToastNotifications() {
+	return useContext(ToastNotificationsContext);
+}
+function ToastNotificationsProvider({ children }) {
+	const [notifications, setNotifications] = useState([]);
+	const addNotification = (text, config) => {
+		setNotifications((prev) => [...prev, {
+			text,
+			status: "hidden",
+			color: config?.color || "info",
+			autoHide: config?.autoHide || 0
+		}]);
+		setTimeout(() => {
+			setNotifications((prev) => prev.map((toast) => toast.status === "hidden" ? {
+				...toast,
+				status: "visible"
+			} : toast));
+		}, 50);
+	};
+	return /*#__PURE__*/ jsx(ToastNotificationsContext.Provider, {
+		value: {
+			notifications,
+			addNotification
+		},
+		children
+	});
+}
+var StyledNotifications = styled.ul.withConfig({
+	displayName: "toast__StyledNotifications",
+	componentId: "sc-1dfe4a8-0"
+})([
+	`position:fixed;z-index:99999;margin:0;padding:0;list-style:none;`,
+	` `,
+	` `,
+	` `,
+	` & li{justify-content:center;display:flex;margin:0;opacity:0;pointer-events:none;transform:translateY(-20px);padding:0;max-height:0;transition:opacity 0.2s ease,transform 0.2s ease,max-height 0.25s ease 0.15s,margin 0.25s ease 0.15s;`,
+	` `,
+	` & .item{display:inline-flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 40px));padding:10px 10px 10px 18px;margin:0;border-radius:`,
+	`;background:`,
+	`;border:solid 1px `,
+	`;box-shadow:`,
+	`;color:`,
+	`;font-size:`,
+	`;line-height:`,
+	`;font-weight:500;& .status-icon{display:inline-flex;flex-shrink:0;& svg{width:20px;height:20px;color:`,
+	`;}}& .message{flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere;}& .close-button{flex-shrink:0;}}&.error{& .item .status-icon svg{color:`,
+	`;}}&.success{& .item .status-icon svg{color:`,
+	`;}}&.warning{& .item .status-icon svg{color:`,
+	`;}}&.info{& .item .status-icon svg{color:`,
+	`;}}&.visible{opacity:1;pointer-events:all;transform:translateY(0);max-height:320px;transition:max-height 0.25s ease,margin 0.25s ease,opacity 0.2s ease 0.15s,transform 0.2s ease 0.15s;`,
+	`}&.static{position:relative;z-index:10;}}`
+], ({ $align }) => $align === "center" && css([`left:50%;transform:translateX(-50%);`]), ({ $align }) => $align === "right" && css([`right:20px;`]), ({ $align }) => $align === "left" && css([`left:20px;`]), ({ $bottom }) => $bottom ? css([`bottom:20px;`]) : css([`top:20px;`]), ({ $align }) => $align === "right" && css([`justify-content:flex-end;`]), ({ $align }) => $align === "left" && css([`justify-content:flex-start;`]), ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.isDark ? theme.shadows.sm : theme.shadows.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg, ({ theme }) => theme.colors.info, ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.success, ({ theme }) => theme.colors.warning, ({ theme }) => theme.colors.info, ({ $bottom }) => $bottom ? css([`margin-top:10px;`]) : css([`margin-bottom:10px;`]));
+function ToastNotifications({ $align = "center", $bottom }) {
+	const { notifications } = useToastNotifications();
+	return /*#__PURE__*/ jsx(StyledNotifications, {
+		$align,
+		$bottom,
+		children: notifications.map((notification, i) => /*#__PURE__*/ jsx(NotificationItem, { ...notification }, i))
+	});
+}
+function NotificationItem(notification) {
+	const [visible, setVisible] = useState(true);
+	useEffect(() => {
+		if (!notification.autoHide) return;
+		const timeout = setTimeout(() => setVisible(false), notification.autoHide);
+		return () => clearTimeout(timeout);
+	}, [notification.autoHide]);
+	return /*#__PURE__*/ jsx("li", {
+		className: [
+			visible ? notification.status : "hidden",
+			notification.color,
+			!notification.autoHide && "static"
+		].filter(Boolean).join(" "),
+		children: /*#__PURE__*/ jsxs("span", {
+			className: "item",
+			children: [
+				/*#__PURE__*/ jsx("span", {
+					className: "status-icon",
+					children: /*#__PURE__*/ jsx(Icon, { name: statusIcons[notification.color] || statusIcons.info })
+				}),
+				/*#__PURE__*/ jsx("span", {
+					className: "message",
+					children: notification.text
+				}),
+				/*#__PURE__*/ jsx(IconButton, {
+					$size: "small",
+					className: "close-button",
+					"aria-label": "Dismiss notification",
+					onClick: () => setVisible(false),
+					children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications };

package/dist/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './icons';
 export * from './mixins';
 export * from './theme';
 export * from './typography';
+export * from './use-on-click-outside';

package/dist/utils/mixins.d.ts

@@ -1,4 +1,21 @@
 import { Breakpoints, Theme } from './theme';
+/**
+ * Hover/focus/active affordance for interactive surfaces (cards, tiles,
+ * links-as-blocks): a transparent 1px border that picks up the primary color
+ * on hover, with a soft focus ring. Pair with resetButton for clickable
+ * elements that aren't Buttons.
+ */
+export declare const interactiveStyles: import('styled-components').RuleSet<NoInfer<{
+    theme: Theme;
+}>>;
+/**
+ * The destructive-action sibling of interactiveStyles: identical
+ * hover/focus/active border + ring behavior, but in the theme error red (the
+ * same red the $error Button uses). Use for delete/remove affordances.
+ */
+export declare const errorInteractiveStyles: import('styled-components').RuleSet<NoInfer<{
+    theme: Theme;
+}>>;
 export declare const resetButton: import('styled-components').RuleSet<object>;
 export declare const resetInput: import('styled-components').RuleSet<object>;
 export declare const fullWidthStyles: (fullWidth?: boolean) => import('styled-components').RuleSet<object> | undefined;

package/dist/utils/mixins.js

@@ -2,7 +2,33 @@
 "use client";
 import { mq } from "./theme.js";
 import { css } from "styled-components";
+import { rgba } from "polished";
 //#region src/lib/utils/mixins.tsx
+/**
+* Hover/focus/active affordance for interactive surfaces (cards, tiles,
+* links-as-blocks): a transparent 1px border that picks up the primary color
+* on hover, with a soft focus ring. Pair with resetButton for clickable
+* elements that aren't Buttons.
+*/ var interactiveStyles = css([
+	`transition:all 0.3s ease;border:solid 1px transparent;box-shadow:0 0 0 0px `,
+	`;@media (hover:hover){&:hover{border-color:`,
+	`;}}&:focus{border-color:`,
+	`;box-shadow:0 0 0 4px `,
+	`;}&:active{box-shadow:0 0 0 2px `,
+	`;}`
+], ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight);
+/**
+* The destructive-action sibling of interactiveStyles: identical
+* hover/focus/active border + ring behavior, but in the theme error red (the
+* same red the $error Button uses). Use for delete/remove affordances.
+*/ var errorInteractiveStyles = css([
+	`transition:all 0.3s ease;border:solid 1px transparent;box-shadow:0 0 0 0px `,
+	`;@media (hover:hover){&:hover{border-color:`,
+	`;}}&:focus{border-color:`,
+	`;box-shadow:0 0 0 4px `,
+	`;}&:active{box-shadow:0 0 0 2px `,
+	`;}`
+], ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.error, ({ theme }) => rgba(theme.colors.error, .3), ({ theme }) => rgba(theme.colors.error, .3));
 var resetButton = css([`box-sizing:border-box;appearance:none;border:none;background:none;padding:0;margin:0;cursor:pointer;outline:none;`]);
 var resetInput = css([`cursor:text;min-width:100px;`]);
 var fullWidthStyles = (fullWidth) => {
@@ -58,4 +84,4 @@ var generateDirectionStyles = (size, direction) => css([
 	`;}`
 ], mq(size), direction && `${direction}`);
 //#endregion
-export { formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles };
+export { errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, statusBorderStyles };

package/dist/utils/use-on-click-outside.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useOnClickOutside(refs: RefObject<HTMLElement | null>[], cb: () => void): void;

package/dist/utils/use-on-click-outside.js

@@ -0,0 +1,17 @@
+"use client";
+"use client";
+import { useEffect } from "react";
+//#region src/lib/utils/use-on-click-outside.tsx
+function useOnClickOutside(refs, cb) {
+	useEffect(() => {
+		function handleClickOutside(event) {
+			if (refs && refs.map((ref) => ref && ref.current && ref.current.contains(event.target)).every((i) => i === false)) cb();
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [refs, cb]);
+}
+//#endregion
+export { useOnClickOutside };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.18",
+  "version": "0.2.0",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -38,10 +38,11 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "screenshots": "node scripts/screenshot-previews.cjs"
   },
   "dependencies": {
-    "lucide-react": "^1.21.0",
+    "lucide-react": "^1.23.0",
     "polished": "^4.3.1"
   },
   "peerDependencies": {
@@ -50,21 +51,23 @@
     "styled-components": "^6.0.0"
   },
   "devDependencies": {
-    "@swc/plugin-styled-components": "^12.14.0",
-    "@types/node": "^26.0.1",
+    "@swc/plugin-styled-components": "^12.14.1",
+    "@types/node": "^26.1.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.3.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "next": "^16.2.9",
-    "prettier": "^3.9.1",
+    "next": "^16.2.10",
+    "playwright-core": "^1.61.1",
+    "prettier": "^3.9.4",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "rollup-plugin-preserve-directives": "^0.4.0",
+    "sharp": "^0.35.3",
     "styled-components": "^6.4.3",
     "typescript": "^6.0.3",
-    "vite": "^8.1.0",
+    "vite": "^8.1.3",
     "vite-plugin-dts": "^5.0.3"
   }
 }