cherry-styled-components 0.1.19 → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Luan Gjokaj
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,31 +1,221 @@
 # Cherry React Library
 
 [![npm version](https://img.shields.io/npm/v/cherry-styled-components.svg?style=flat)](https://www.npmjs.com/package/cherry-styled-components)
-
-## Introduction
+[![license](https://img.shields.io/npm/l/cherry-styled-components.svg?style=flat)](https://github.com/cherry-design-system/styled-components/blob/main/LICENSE)
 
 Cherry Design System is a versatile foundation for projects. It offers a white label base, ready-to-use Figma designs, open-source React components, built-in support for theming and dark mode. Explore the [docs](https://cherry.al/) to create delightful user interfaces.
 
----
+## Installation
 
-# Installation
+Install the package along with its peer dependencies:
 
-This project requires Node.js v20+ installed.
+```bash
+npm install cherry-styled-components react react-dom styled-components
+```
+
+## Quick Start
+
+Wrap your app in `CherryThemeProvider` and start using components. The provider injects the global styles and, when you pass `themeDark`, handles dark mode automatically:
+
+```tsx
+import {
+  Button,
+  CherryThemeProvider,
+  theme,
+  themeDark,
+} from "cherry-styled-components";
+
+export default function App() {
+  return (
+    <CherryThemeProvider theme={theme} themeDark={themeDark}>
+      <Button $variant="primary">Hello Cherry</Button>
+    </CherryThemeProvider>
+  );
+}
+```
+
+The built-in `theme` and `themeDark` objects are a starting point; both are plain objects you can extend or replace to white-label the system. Styled props use a `$` prefix (`$variant`, `$size`, `$fullWidth`) so they never leak into the DOM.
+
+The library ships form components (Button, Input, Select, Textarea, Toggle, Range, Password, Checkbox, Radio, Dropzone, AvatarDropzone), layout primitives (Container, Grid, Col, Flex, Box, MaxWidth, Space), and interactive components (Accordion, Modal, Toast, ThemeToggle, Icon, IconButton). See the [component docs](https://cherry.al/) for the full API.
+
+## Theming
+
+Cherry ships two theme providers:
+
+- `CherryThemeProvider` - the original client-only provider. It resolves the theme from `localStorage` and the OS preference after mount. Simple, but in a server-rendered app the first paint is always the light theme.
+- `ClientThemeProvider` - the SSR-aware provider for flash-free dark mode. The server resolves the `theme` cookie and passes `$initial`, so the first paint is already correct. On mount it reconciles against the cookie and OS preference (Safari and Firefox don't send color-scheme client hints, so their first server render can guess wrong) and swaps in place. Theme changes persist to the `theme` cookie and `localStorage` directly; no API route is needed.
+
+Both providers expose `setTheme` and `toggleTheme` through `ThemeContext`, and the `ThemeToggle` component works under either.
+
+A Next.js App Router setup looks like this:
+
+```tsx
+// app/layout.tsx (server component)
+import { cookies } from "next/headers";
+import {
+  ClientThemeProvider,
+  StyledComponentsRegistry,
+  themeInitScript,
+} from "cherry-styled-components";
+import { theme, themeDark } from "./theme";
+
+export default async function RootLayout({ children }) {
+  const cookieTheme = (await cookies()).get("theme")?.value;
+
+  return (
+    <html lang="en">
+      <head>
+        {/* Seeds the theme cookie and prevents the dark-mode flash in
+            browsers without color-scheme client hints. */}
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+      </head>
+      <body>
+        <StyledComponentsRegistry>
+          <ClientThemeProvider
+            theme={theme}
+            themeDark={themeDark}
+            $initial={cookieTheme === "dark" ? "dark" : "light"}
+          >
+            {children}
+          </ClientThemeProvider>
+        </StyledComponentsRegistry>
+      </body>
+    </html>
+  );
+}
+```
+
+For the best first-visit experience in Chrome, also opt into color-scheme client hints in your middleware so the very first server render matches the OS preference:
+
+```ts
+// middleware.ts
+res.headers.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
+res.headers.set("Vary", "Sec-CH-Prefers-Color-Scheme");
+res.headers.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
+
+const hint = req.headers.get("Sec-CH-Prefers-Color-Scheme");
+if (!req.cookies.get("theme")?.value && hint) {
+  res.cookies.set("theme", hint === "dark" ? "dark" : "light", {
+    path: "/",
+    maxAge: 60 * 60 * 24 * 365,
+    sameSite: "lax",
+  });
+}
+```
+
+`resolveTheme(cookieValue, theme, themeDark)` is exported for other server code that needs the active theme object, e.g. `generateViewport` for the initial `theme-color`.
+
+In a client-only app (like this repo's demo, see `src/main.tsx`), resolve the initial theme synchronously from the cookie, `localStorage`, or `matchMedia` before rendering and pass it as `$initial`.
+
+## Development
+
+To work on the library itself, clone the repo and use pnpm. Node.js v20+ is required for the dev tooling.
 
 ```bash
-npm install
+pnpm install       # Install dependencies
+pnpm run dev       # Start the Vite dev server (demo app + previews)
+pnpm run build     # Build the library to dist/
+pnpm run format    # Format with Prettier
+```
+
+## Component Previews
+
+The dev server ships with a preview route that renders a single component in isolation, centered on the page. It is meant for visual inspection and for taking automated screenshots (e.g. with Playwright).
+
+With `pnpm run dev` running:
+
+- `/preview` shows an index page linking to every available preview.
+- `/preview/<name>` renders one component centered inside a wrapper with the stable selector `#preview-box`.
+
+The route is handled in `src/main.tsx` and the previews live in `src/preview.tsx`. Both are part of the demo app only and are not included in the library build.
+
+### Available previews
+
+| Name               | Renders                                           |
+| ------------------ | ------------------------------------------------- |
+| `accordion`        | Card accordion, open by default                   |
+| `accordion-inline` | Inline accordion variant, open by default         |
+| `avatar-dropzone`  | Empty avatar dropzone, default size               |
+| `box`              | Box surface with a placeholder block              |
+| `button`           | Primary filled button                             |
+| `button-secondary` | Secondary filled button                           |
+| `button-tertiary`  | Tertiary filled button                            |
+| `button-outline`   | Primary outline button                            |
+| `checkbox`         | Checked checkbox                                  |
+| `dropzone`         | Block dropzone with prompt, browse, and hint text |
+| `dropzone-inline`  | Inline dropzone variant                           |
+| `flex`             | Flex row with three placeholder blocks            |
+| `grid`             | Three-column grid with a full-width row           |
+| `icon`             | Cherry icon at 48px                               |
+| `icon-button`      | Icon button with a settings icon                  |
+| `input`            | Text input with label and placeholder             |
+| `modal`            | Modal, already open on a backdrop                 |
+| `password`         | Password field with label and placeholder         |
+| `radio`            | Checked radio button                              |
+| `range`            | Range slider                                      |
+| `select`           | Select with label                                 |
+| `textarea`         | Textarea with label and value                     |
+| `theme-toggle`     | Pill-shaped sun/moon theme switch                 |
+| `toast`            | Success, error, and info toasts, fired on mount   |
+| `toggle`           | Checked toggle                                    |
+
+Pure layout primitives with no visual output of their own (Container, Col, MaxWidth, Space) have no preview entry.
+
+### Forcing a theme
+
+Append `?theme=dark` or `?theme=light` to any preview URL to force a theme:
+
+```
+/preview/button?theme=dark
 ```
 
-To run the development environment, use the following command:
+The value is persisted to the `theme` cookie and `localStorage`, exactly like a `ThemeToggle` click, and the demo resolves it synchronously before the first render. It persists for subsequent navigations in the same browser context, so always pass the parameter explicitly when comparing themes to avoid leakage from a previous visit.
+
+### Custom theme colors
+
+Append `?colors=<URI-encoded JSON>` to any preview URL to override theme colors. The JSON has the shape `{ "default": { "primary": "#BE123C", ... }, "dark": { ... } }` where `default` patches the light theme's colors and `dark` patches the dark theme's. Unknown keys and values that are not valid CSS colors are ignored, and the parameter only applies to preview routes.
+
+### Taking screenshots
+
+`scripts/screenshot-previews.cjs` captures every preview in both themes and writes the framed images used by the documentation site. With the dev server running in another terminal:
 
 ```bash
-npm run dev
+pnpm run dev
+pnpm run screenshots
 ```
 
-To build the library for production, use the following command:
+For each component it produces `<name>-light.png` and `<name>-dark.png` at 2x resolution (`deviceScaleFactor: 2`), then post-processes every image with sharp:
+
+- Corners are rounded with the theme's `radius.lg` (12px, so 24px at 2x) and made transparent outside the radius.
+- A 1px solid border is drawn in the theme's `grayLight` color: `#e5e7eb` for light, `#1a1a1a` for dark.
+
+The border and radius are baked into the PNG rather than applied in CSS so that all images get the identical frame, including the two special captures:
+
+- `modal` overlays the whole viewport, so it is captured as a full-page screenshot to include the backdrop. It is shot on a desktop-size viewport (1100px wide) so the modal's built-in `max-width: 500px` (active from the `lg` breakpoint) applies.
+- `toast` renders in a corner outside `#preview-box`, so the toast list element is captured instead, with 40px of padding injected at capture time for breathing room.
+
+Everything else is cropped to the `#preview-box` element. Animated previews (accordion, modal, toast) get a one-second settle delay before capture.
+
+The script drives your installed Chrome through `playwright-core` (no browser download needed) and defaults can be overridden with env vars:
+
+| Variable      | Default                                                        |
+| ------------- | -------------------------------------------------------------- |
+| `PREVIEW_URL` | `http://localhost:5173/preview`                                |
+| `OUT_DIR`     | `../cherry-documentation/public/components`                    |
+| `CHROME_PATH` | `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome` |
+| `THEME_JSON`  | none (path to a JSON file with `default`/`dark` color maps)    |
+
+`THEME_JSON` points at a file like the documentation site's `theme.json`; its colors are passed to the preview via `?colors=` and also drive the baked-in border color (`grayLight`). Example:
 
 ```bash
-npm run build
+THEME_JSON=../cherry-documentation/theme.json pnpm run screenshots
+```
+
+For one-off manual screenshots, target the `#preview-box` selector:
+
+```js
+await page.goto("http://localhost:5173/preview/button?theme=light");
+await page.locator("#preview-box").screenshot({ path: "button-light.png" });
 ```
 
 ## Community
@@ -37,3 +227,7 @@ For help, discussion about best practices, or any other conversation that would
 For casual chit-chat with others using Cherry:
 
 [Join the Discord Server](https://discord.gg/6JvcWU5bke)
+
+## License
+
+[MIT](https://github.com/cherry-design-system/styled-components/blob/main/LICENSE)

package/dist/index.d.ts

@@ -19,5 +19,6 @@ export * from './range';
 export * from './select';
 export * from './space';
 export * from './textarea';
+export * from './theme-toggle';
 export * from './toast';
 export * from './toggle';

package/dist/index.js

@@ -1,11 +1,13 @@
-import { StyledComponentsRegistry } from "./styled-components/registry.js";
 import { GlobalStyles } from "./utils/global.js";
 import { IconArrow, IconCalendar, IconCheck } from "./utils/icons.js";
 import { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark } from "./utils/theme.js";
-import { formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
+import { errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
 import { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText } from "./utils/typography.js";
 import { useOnClickOutside } from "./utils/use-on-click-outside.js";
 import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
+import { ClientThemeProvider } from "./styled-components/client-theme-provider.js";
+import { StyledComponentsRegistry } from "./styled-components/registry.js";
+import { createThemeInitScript, resolveTheme, themeInitScript } from "./styled-components/theme-init.js";
 import { Icon } from "./icon.js";
 import { Accordion } from "./accordion.js";
 import { Dropzone, matchesAccept } from "./dropzone.js";
@@ -25,6 +27,7 @@ import { Range } from "./range.js";
 import { Select, StyledIconWrapper } from "./select.js";
 import { Space } from "./space.js";
 import { Textarea } from "./textarea.js";
-import { StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
+import { ThemeToggle } from "./theme-toggle.js";
+import { StyledNotificationItem, StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
 import { Toggle } from "./toggle.js";
-export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotifications, Textarea, ThemeContext, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createTypographyStyle, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, useOnClickOutside, useToastNotifications };
+export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, useOnClickOutside, useToastNotifications };

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

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

package/dist/toast.js

@@ -3,7 +3,7 @@
 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 { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 //#region src/lib/toast.tsx
 var statusIcons = {
@@ -12,48 +12,62 @@ var statusIcons = {
 	warning: "TriangleAlert",
 	info: "Info"
 };
+var EXIT_DURATION_MS = 400;
 var ToastNotificationsContext = /*#__PURE__*/ createContext({
 	notifications: [],
-	addNotification: () => null
+	addNotification: () => null,
+	removeNotification: () => null
 });
 function useToastNotifications() {
 	return useContext(ToastNotificationsContext);
 }
 function ToastNotificationsProvider({ children }) {
 	const [notifications, setNotifications] = useState([]);
-	const addNotification = (text, config) => {
+	const nextId = useRef(0);
+	const addNotification = useCallback((text, config) => {
+		const id = nextId.current++;
 		setNotifications((prev) => [...prev, {
+			id,
 			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);
-	};
+	}, []);
+	const removeNotification = useCallback((id) => {
+		setNotifications((prev) => prev.filter((toast) => toast.id !== id));
+	}, []);
+	const value = useMemo(() => ({
+		notifications,
+		addNotification,
+		removeNotification
+	}), [
+		notifications,
+		addNotification,
+		removeNotification
+	]);
 	return /*#__PURE__*/ jsx(ToastNotificationsContext.Provider, {
-		value: {
-			notifications,
-			addNotification
-		},
+		value,
 		children
 	});
 }
 var StyledNotifications = styled.ul.withConfig({
 	displayName: "toast__StyledNotifications",
-	componentId: "sc-1dfe4a8-0"
+	componentId: "sc-1f36b7f7-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;`,
+	``
+], ({ $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;`]));
+var StyledNotificationItem = styled.li.withConfig({
+	displayName: "toast__StyledNotificationItem",
+	componentId: "sc-1f36b7f7-1"
+})([
+	`display:grid;grid-template-rows:0fr;justify-items:center;margin:0;padding:0;opacity:0;pointer-events:none;transform:translateY(`,
+	`);transition:opacity 0.2s ease,transform 0.2s ease,grid-template-rows 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:`,
+	` & .item-wrapper{min-height:0;}& .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:`,
@@ -61,55 +75,80 @@ var StyledNotifications = styled.ul.withConfig({
 	`;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;`]));
+	`;}}& .message{flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere;}& .close-button{flex-shrink:0;}}`,
+	` `,
+	``
+], ({ $bottom }) => $bottom ? "20px" : "-20px", ({ $align }) => $align === "right" && css([`justify-items:end;`]), ({ $align }) => $align === "left" && css([`justify-items: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, $color }) => theme.colors[$color], ({ $visible, $bottom }) => $visible && css([`opacity:1;pointer-events:auto;transform:translateY(0);grid-template-rows:1fr;transition:grid-template-rows 0.25s ease,margin 0.25s ease,opacity 0.2s ease 0.15s,transform 0.2s ease 0.15s;`, ``], $bottom ? css([`margin-top:10px;`]) : css([`margin-bottom:10px;`])), ({ $static }) => $static && css([`position:relative;z-index:10;`]));
 function ToastNotifications({ $align = "center", $bottom }) {
 	const { notifications } = useToastNotifications();
 	return /*#__PURE__*/ jsx(StyledNotifications, {
 		$align,
 		$bottom,
-		children: notifications.map((notification, i) => /*#__PURE__*/ jsx(NotificationItem, { ...notification }, i))
+		"aria-live": "polite",
+		children: notifications.map((notification) => /*#__PURE__*/ jsx(NotificationItem, {
+			notification,
+			$align,
+			$bottom
+		}, notification.id))
 	});
 }
-function NotificationItem(notification) {
-	const [visible, setVisible] = useState(true);
+function NotificationItem({ notification, $align, $bottom }) {
+	const { removeNotification } = useToastNotifications();
+	const [phase, setPhase] = useState("entering");
+	useEffect(() => {
+		let inner;
+		const outer = requestAnimationFrame(() => {
+			inner = requestAnimationFrame(() => setPhase((prev) => prev === "entering" ? "visible" : prev));
+		});
+		return () => {
+			cancelAnimationFrame(outer);
+			cancelAnimationFrame(inner);
+		};
+	}, []);
 	useEffect(() => {
 		if (!notification.autoHide) return;
-		const timeout = setTimeout(() => setVisible(false), notification.autoHide);
+		const timeout = setTimeout(() => setPhase("exiting"), 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" })
-				})
-			]
+	useEffect(() => {
+		if (phase !== "exiting") return;
+		const timeout = setTimeout(() => removeNotification(notification.id), EXIT_DURATION_MS);
+		return () => clearTimeout(timeout);
+	}, [
+		phase,
+		notification.id,
+		removeNotification
+	]);
+	return /*#__PURE__*/ jsx(StyledNotificationItem, {
+		$visible: phase === "visible",
+		$color: notification.color,
+		$static: !notification.autoHide,
+		$align,
+		$bottom,
+		children: /*#__PURE__*/ jsx("span", {
+			className: "item-wrapper",
+			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: () => setPhase("exiting"),
+						children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+					})
+				]
+			})
 		})
 	});
 }
 //#endregion
-export { StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications };
+export { StyledNotificationItem, StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.19",
+  "version": "0.2.1",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -38,7 +38,8 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "screenshots": "node scripts/screenshot-previews.cjs"
   },
   "dependencies": {
     "lucide-react": "^1.23.0",
@@ -58,10 +59,12 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
     "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.3",