cherry-styled-components 0.2.11 → 0.2.13

package/dist/modal.js

@@ -1,6 +1,7 @@
 "use client";
 "use client";
 import { mq } from "./utils/theme.js";
+import { alpha } from "./utils/mixins.js";
 import { styledH5, styledText } from "./utils/typography.js";
 import { useOnClickOutside } from "./utils/use-on-click-outside.js";
 import { Icon } from "./icon.js";
@@ -8,7 +9,6 @@ import { IconButton } from "./icon-button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import styled, { css, keyframes } from "styled-components";
-import { rgba } from "polished";
 import { createPortal } from "react-dom";
 //#region src/lib/modal.tsx
 var emptySubscribe = () => () => {};
@@ -21,7 +21,7 @@ var innerRiseIn = keyframes([`from{transform:translateY(40px);}to{transform:tran
 var innerSinkOut = keyframes([`from{transform:translateY(0);}to{transform:translateY(40px);}`]);
 var StyledModal = styled.div.withConfig({
 	displayName: "modal__StyledModal",
-	componentId: "sc-14a8d5c-0"
+	componentId: "sc-1bbfce8-0"
 })([
 	`position:fixed;top:0;left:0;width:100%;height:100%;background:`,
 	`;display:flex;justify-content:center;align-items:center;z-index:1010;animation:`,
@@ -32,14 +32,14 @@ var StyledModal = styled.div.withConfig({
 	` 0.3s ease both;`,
 	`{max-width:500px;`,
 	`}}`
-], ({ theme }) => rgba(theme.colors.primary, .5), ({ $isClosing }) => $isClosing ? overlayFadeOut : overlayFadeIn, ({ $isClosing }) => $isClosing && css([`pointer-events:none;`]), ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ $isClosing }) => $isClosing ? innerSinkOut : innerRiseIn, mq("lg"), ({ $width }) => $width && css([`max-width:`, `px;`], $width));
+], ({ theme }) => alpha(theme.colors.primary, 50), ({ $isClosing }) => $isClosing ? overlayFadeOut : overlayFadeIn, ({ $isClosing }) => $isClosing && css([`pointer-events:none;`]), ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ $isClosing }) => $isClosing ? innerSinkOut : innerRiseIn, mq("lg"), ({ $width }) => $width && css([`max-width:`, `px;`], $width));
 var StyledModalClose = styled(IconButton).withConfig({
 	displayName: "modal__StyledModalClose",
-	componentId: "sc-14a8d5c-1"
+	componentId: "sc-1bbfce8-1"
 })([`position:absolute;top:20px;right:20px;z-index:10;`]);
 var StyledModalTitle = styled.h2.withConfig({
 	displayName: "modal__StyledModalTitle",
-	componentId: "sc-14a8d5c-2"
+	componentId: "sc-1bbfce8-2"
 })([
 	`--divider-color:`,
 	`;margin:0 0 15px 0;padding:0 0 15px 0;color:`,
@@ -48,7 +48,7 @@ var StyledModalTitle = styled.h2.withConfig({
 ], ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.dark, ({ theme }) => styledH5(theme));
 var StyledModalContent = styled.div.withConfig({
 	displayName: "modal__StyledModalContent",
-	componentId: "sc-14a8d5c-3"
+	componentId: "sc-1bbfce8-3"
 })([
 	`max-height:calc(100svh - 200px);overflow-y:auto;padding:5px;margin:-5px;--divider-color:`,
 	`;`,

package/dist/prose.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { Theme } from './utils';
+export interface ProseProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    /** Tightens the vertical rhythm for dense contexts such as chat bubbles. */
+    $compact?: boolean;
+}
+/**
+ * Styles for rendered markdown: links, lists, tables, code, media and
+ * headings. Exported so it can be applied to an element that is already
+ * styled, rather than wrapping it in another <div>.
+ */
+export declare const proseStyles: (theme: Theme, $compact?: boolean) => import('styled-components').RuleSet<NoInfer<{
+    theme: Theme;
+}>>;
+declare const Prose: React.ForwardRefExoticComponent<ProseProps & React.RefAttributes<HTMLDivElement>>;
+export { Prose };

package/dist/prose.js

@@ -0,0 +1,75 @@
+"use client";
+"use client";
+import { alpha, thinScrollbar } from "./utils/mixins.js";
+import { styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledSmall, styledText } from "./utils/typography.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/prose.tsx
+var accent = (theme) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark;
+/**
+* Styles for rendered markdown: links, lists, tables, code, media and
+* headings. Exported so it can be applied to an element that is already
+* styled, rather than wrapping it in another <div>.
+*/ var proseStyles = (theme, $compact) => {
+	const block = $compact ? "10px" : "20px";
+	return css([
+		`color:`,
+		`;`,
+		`;& > *:first-child{margin-top:0;}& > *:last-child{margin-bottom:0;& > *:last-child{margin-bottom:0;}}& p{margin:0 0 `,
+		`;`,
+		`;}& h1,& h2,& h3,& h4,& h5,& h6{margin:`,
+		` 0;padding:0;color:`,
+		`;}& h1{`,
+		`;}& h2{`,
+		`;}& h3{`,
+		`;}& h4{`,
+		`;}& h5{`,
+		`;}& h6{`,
+		`;}& a:not([class]):not(:has(img)){color:inherit;transition:all 0.3s ease;text-decoration:none;box-shadow:0 2px 0 0 `,
+		`;&:hover{color:`,
+		`;box-shadow:0 1px 0 0 `,
+		`;}&:focus-visible{outline:none;border-radius:`,
+		`;box-shadow:0 2px 0 0 `,
+		`,0 0 0 2px `,
+		`;}}& ul,& ol{margin:0 0 `,
+		`;padding:0;& li{& > .code-wrapper{margin:10px 0;}& p{display:inline;}}}& ul{list-style:none;& li{text-indent:0;display:block;position:relative;padding:0 0 0 24px;margin:0;`,
+		`;&::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:`,
+		`;position:absolute;top:0.65em;left:9px;}}}& ol{counter-reset:item;& > li{counter-increment:item;padding:0 0 0 24px;margin:0;`,
+		`;&::before{content:counter(item) ".";display:inline-block;min-width:20px;margin-left:-24px;margin-right:4px;text-align:right;font-weight:700;color:`,
+		`;}}}& code:not([class]){background:`,
+		`;color:`,
+		`;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:`,
+		` 0;padding:0 0 0 16px;border-left:solid 2px `,
+		`;color:`,
+		`;}& hr{margin:`,
+		` 0;border:none;border-bottom:solid 1px `,
+		`;}& .table-wrapper{overflow-x:auto;width:100%;margin:0 0 `,
+		`;`,
+		`;}& table{margin:0;padding:0;border-collapse:collapse;width:100%;text-align:left;& tr{margin:0;padding:0;}& th{border-bottom:solid 1px `,
+		`;padding:10px 10px 10px 0;`,
+		`;font-weight:600;color:`,
+		`;}& td{border-bottom:solid 1px `,
+		`;padding:10px 10px 10px 0;color:`,
+		`;`,
+		`;}}& 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);
+};
+var StyledProse = styled.div.withConfig({
+	displayName: "prose__StyledProse",
+	componentId: "sc-91bd953a-0"
+})([``, `;`], ({ theme, $compact }) => proseStyles(theme, $compact));
+function LocalProse({ children, ...props }, ref) {
+	return /*#__PURE__*/ jsx(StyledProse, {
+		...props,
+		ref,
+		children
+	});
+}
+var Prose = /*#__PURE__*/ forwardRef(LocalProse);
+//#endregion
+export { Prose, proseStyles };

package/dist/spinner.d.ts

@@ -0,0 +1,11 @@
+import { IconProps } from './icon';
+export interface SpinnerProps {
+    /** Lucide icon to rotate. */
+    name?: IconProps;
+    color?: string;
+    size?: number;
+    className?: string;
+    "aria-label"?: string;
+}
+declare const Spinner: ({ name, ...props }: SpinnerProps) => import("react").JSX.Element;
+export { Spinner };

package/dist/spinner.js

@@ -0,0 +1,21 @@
+"use client";
+"use client";
+import { Icon } from "./icon.js";
+import { jsx } from "react/jsx-runtime";
+import styled, { keyframes } from "styled-components";
+//#region src/lib/spinner.tsx
+var spin = keyframes([`0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}`]);
+var StyledSpinner = styled(Icon).withConfig({
+	displayName: "spinner__StyledSpinner",
+	componentId: "sc-bb636095-0"
+})([
+	`color:`,
+	`;animation:`,
+	` 1s linear infinite;@media (prefers-reduced-motion:reduce){animation:none;}`
+], ({ theme }) => theme.colors.dark, spin);
+var Spinner = ({ name = "LoaderCircle", ...props }) => /*#__PURE__*/ jsx(StyledSpinner, {
+	name,
+	...props
+});
+//#endregion
+export { Spinner };

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

@@ -6,7 +6,7 @@ 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;
+var THEME_COOKIE_MAX_AGE = 31536e3;
 function readThemeCookie() {
 	const cookie = document.cookie.split(";").map((c) => c.trim()).find((c) => c.startsWith("theme="));
 	const value = cookie ? cookie.split("=")[1] : void 0;
@@ -22,6 +22,11 @@ function removeThemeInitStyle() {
 	const el = document.getElementById("__theme-init");
 	if (el) el.remove();
 }
+function resolveColor(value) {
+	const match = /^var\(\s*(--[^,)\s]+)\s*(?:,([^)]*))?\)$/.exec(value.trim());
+	if (!match) return value;
+	return getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim() || match[2]?.trim() || value;
+}
 /**
 * SSR-aware theme provider. Renders with the server-resolved theme on the
 * first paint (no dark-mode flash), reconciles it against the `theme` cookie
@@ -32,9 +37,11 @@ function removeThemeInitStyle() {
 */ function ClientThemeProvider({ children, theme, themeDark, $initial = "light", $themeColor = "light", $globalStyles = true }) {
 	const initialTheme = $initial === "dark" && themeDark ? themeDark : theme;
 	const [overrideTheme, setOverrideTheme] = useState(null);
+	const [reconciled, setReconciled] = useState(false);
 	const effectiveTheme = useMemo(() => overrideTheme ?? initialTheme, [overrideTheme, initialTheme]);
 	useEffect(() => {
 		if (!themeDark) {
+			setReconciled(true);
 			removeThemeInitStyle();
 			return;
 		}
@@ -54,20 +61,23 @@ function removeThemeInitStyle() {
 			const wantDark = cookieValue === "dark";
 			if (initialTheme.isDark !== wantDark) {
 				setOverrideTheme(wantDark ? themeDark : theme);
+				setReconciled(true);
 				return;
 			}
 		} catch {}
+		setReconciled(true);
 		removeThemeInitStyle();
 	}, []);
 	useEffect(() => {
 		if (overrideTheme) removeThemeInitStyle();
 	}, [overrideTheme]);
 	useEffect(() => {
+		if (!reconciled) return;
 		document.documentElement.classList.toggle("dark", effectiveTheme.isDark);
-	}, [effectiveTheme.isDark]);
+	}, [effectiveTheme.isDark, reconciled]);
 	useEffect(() => {
 		if (!$themeColor) return;
-		const background = effectiveTheme.colors[$themeColor];
+		const background = resolveColor(effectiveTheme.colors[$themeColor]);
 		let meta = document.querySelector("meta[name=\"theme-color\"]");
 		if (!meta) {
 			meta = document.createElement("meta");

package/dist/tabs.js

@@ -1,19 +1,18 @@
 "use client";
 "use client";
-import { resetButton } from "./utils/mixins.js";
+import { alpha, resetButton } from "./utils/mixins.js";
 import { styledText } from "./utils/typography.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useId, useRef, useState } from "react";
 import styled, { css } from "styled-components";
-import { rgba } from "polished";
 //#region src/lib/tabs.tsx
 var StyledTabs = styled.div.withConfig({
 	displayName: "tabs__StyledTabs",
-	componentId: "sc-a3686838-0"
+	componentId: "sc-60ef8245-0"
 })([`width:100%;`]);
 var StyledTabsList = styled.div.withConfig({
 	displayName: "tabs__StyledTabsList",
-	componentId: "sc-a3686838-1"
+	componentId: "sc-60ef8245-1"
 })([
 	`display:flex;overflow-x:auto;border-radius:`,
 	` `,
@@ -23,7 +22,7 @@ var StyledTabsList = styled.div.withConfig({
 ], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight);
 var StyledTabButton = styled.button.withConfig({
 	displayName: "tabs__StyledTabButton",
-	componentId: "sc-a3686838-2"
+	componentId: "sc-60ef8245-2"
 })([
 	``,
 	`;flex:1;min-width:fit-content;padding:12px 20px;`,
@@ -41,10 +40,10 @@ var StyledTabButton = styled.button.withConfig({
 	`&:hover{color:`,
 	`;background:`,
 	`;}`
-], theme.colors.primary, rgba(theme.colors.primaryLight, .1)));
+], theme.colors.primary, alpha(theme.colors.primaryLight, 10)));
 var StyledTabPanel = styled.div.withConfig({
 	displayName: "tabs__StyledTabPanel",
-	componentId: "sc-a3686838-3"
+	componentId: "sc-60ef8245-3"
 })([
 	``,
 	`;color:`,

package/dist/theme-toggle.js

@@ -1,16 +1,15 @@
 "use client";
 "use client";
-import { interactiveStyles, resetButton } from "./utils/mixins.js";
+import { alpha, interactiveStyles, 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, useEffect } 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-b64afa35-0"
+	componentId: "sc-f8700a2a-0"
 })([
 	``,
 	` `,
@@ -18,11 +17,12 @@ var StyledThemeToggle = styled.button.withConfig({
 	`;border-color:`,
 	`;&::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:`,
 	`;transition:all 0.3s ease;z-index:1;`,
-	`}`,
+	`}:root.dark &::after{transform:translateX(26px);}`,
 	` & svg{width:16px;height:16px;object-fit:contain;transition:all 0.3s ease;position:relative;z-index:2;}& svg[stroke]{stroke:`,
 	`;}&:hover svg[stroke]{stroke:`,
+	`;}:root.dark &:hover svg[stroke]{stroke:`,
 	`;}`
-], resetButton, interactiveStyles, ({ 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);
+], resetButton, interactiveStyles, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => alpha(theme.colors.primaryLight, 20), ({ 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.colors.primaryLight);
 function LocalThemeToggle({ onClick, $shortcut = false, ...props }, ref) {
 	const { toggleTheme } = useContext(ThemeContext);
 	useEffect(() => {

package/dist/toast.d.ts

@@ -35,14 +35,14 @@ export declare const StyledNotifications: import('styled-components/dist/types')
     $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"> & {
+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" | "$align" | "$bottom" | "$color" | "$visible" | "$static"> & {
+}, never> & Partial<Pick<import('styled-components').FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "theme" | "$color" | "$align" | "$bottom" | "$visible" | "$static"> & {
     theme: Theme;
     $color: ToastColor;
     $visible: boolean;

package/dist/utils/index.d.ts

@@ -2,4 +2,6 @@ export * from './global';
 export * from './mixins';
 export * from './theme';
 export * from './typography';
+export * from './use-lock-body-scroll';
+export * from './use-media-query';
 export * from './use-on-click-outside';

package/dist/utils/mixins.d.ts

@@ -1,4 +1,34 @@
 import { Breakpoints, Theme } from './theme';
+/**
+ * Fades a color toward transparent. Native CSS rather than a JS color library
+ * so the input can be any valid CSS color value, including a `var(--token)`
+ * reference that only the browser can resolve.
+ */
+export declare const alpha: (color: string, percent: number) => string;
+/** Darkens a color by mixing it toward black. See `alpha` for why it is CSS. */
+export declare const shade: (color: string, percent: number) => string;
+/** Lightens a color by mixing it toward white. See `alpha` for why it is CSS. */
+export declare const tint: (color: string, percent: number) => string;
+/**
+ * Text color for a label sitting on a brand-colored fill: the palette's
+ * contrasting end, `light` in light mode and `dark` in dark mode.
+ */
+export declare const filledTextColor: (theme: Theme) => string;
+/**
+ * The same choice restated as a rule scoped to a `dark` class on <html>, which
+ * is what apps resolving the mode in CSS key off before hydration can swap the
+ * theme object. Additive: with an already-dark theme object both paths resolve
+ * to the same color. Interpolate alongside `filledTextColor`.
+ */
+export declare const darkFilledTextRule: (theme: Theme) => string;
+/**
+ * Slim, theme-aware scrollbar for internal scroll areas (chat transcripts, code
+ * blocks, tables) so the chunky native bar doesn't stand out, especially in
+ * dark mode.
+ */
+export declare const thinScrollbar: import('styled-components').RuleSet<NoInfer<{
+    theme: Theme;
+}>>;
 /**
  * Hover/focus/active affordance for interactive surfaces (cards, tiles,
  * links-as-blocks): a transparent 1px border that picks up the primary color

package/dist/utils/mixins.js

@@ -2,9 +2,30 @@
 "use client";
 import { mq } from "./theme.js";
 import { css } from "styled-components";
-import { rgba } from "polished";
 //#region src/lib/utils/mixins.tsx
 /**
+* Fades a color toward transparent. Native CSS rather than a JS color library
+* so the input can be any valid CSS color value, including a `var(--token)`
+* reference that only the browser can resolve.
+*/ var alpha = (color, percent) => `color-mix(in srgb, ${color} ${percent}%, transparent)`;
+/** Darkens a color by mixing it toward black. See `alpha` for why it is CSS. */ var shade = (color, percent) => `color-mix(in srgb, ${color} ${100 - percent}%, black)`;
+/** Lightens a color by mixing it toward white. See `alpha` for why it is CSS. */ var tint = (color, percent) => `color-mix(in srgb, ${color} ${100 - percent}%, white)`;
+/**
+* Text color for a label sitting on a brand-colored fill: the palette's
+* contrasting end, `light` in light mode and `dark` in dark mode.
+*/ var filledTextColor = (theme) => theme.isDark ? theme.colors.dark : theme.colors.light;
+/**
+* The same choice restated as a rule scoped to a `dark` class on <html>, which
+* is what apps resolving the mode in CSS key off before hydration can swap the
+* theme object. Additive: with an already-dark theme object both paths resolve
+* to the same color. Interpolate alongside `filledTextColor`.
+*/ var darkFilledTextRule = (theme) => `:root.dark & { color: ${theme.colors.dark}; }`;
+/**
+* Slim, theme-aware scrollbar for internal scroll areas (chat transcripts, code
+* blocks, tables) so the chunky native bar doesn't stand out, especially in
+* dark mode.
+*/ var thinScrollbar = css([`scrollbar-width:thin;scrollbar-color:`, ` transparent;`], ({ theme }) => theme.colors.grayLight);
+/**
 * 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
@@ -28,7 +49,7 @@ import { rgba } from "polished";
 	`;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));
+], ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.error, ({ theme }) => alpha(theme.colors.error, 30), ({ theme }) => alpha(theme.colors.error, 30));
 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) => {
@@ -84,4 +105,4 @@ var generateDirectionStyles = (size, direction) => css([
 	`;}`
 ], mq(size), direction && `${direction}`);
 //#endregion
-export { errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, statusBorderStyles };
+export { alpha, darkFilledTextRule, errorInteractiveStyles, filledTextColor, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, shade, statusBorderStyles, thinScrollbar, tint };

package/dist/utils/use-lock-body-scroll.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Freezes body scrolling while `isLocked` is true. Safe to nest: the body is
+ * restored only when every active lock has been released.
+ */
+export declare function useLockBodyScroll(isLocked: boolean): void;

package/dist/utils/use-lock-body-scroll.js

@@ -0,0 +1,25 @@
+"use client";
+"use client";
+import { useEffect } from "react";
+//#region src/lib/utils/use-lock-body-scroll.tsx
+var lockCount = 0;
+var previousOverflow = "";
+/**
+* Freezes body scrolling while `isLocked` is true. Safe to nest: the body is
+* restored only when every active lock has been released.
+*/ function useLockBodyScroll(isLocked) {
+	useEffect(() => {
+		if (!isLocked) return;
+		if (lockCount === 0) {
+			previousOverflow = document.body.style.overflow;
+			document.body.style.overflow = "hidden";
+		}
+		lockCount += 1;
+		return () => {
+			lockCount -= 1;
+			if (lockCount === 0) document.body.style.overflow = previousOverflow;
+		};
+	}, [isLocked]);
+}
+//#endregion
+export { useLockBodyScroll };

package/dist/utils/use-media-query.d.ts

@@ -0,0 +1,14 @@
+import { Breakpoints } from './theme';
+/**
+ * Subscribes to a media query. Returns `false` on the server and during the
+ * first client render so hydration matches, then re-renders with the real
+ * match. Pass a full media query string, e.g. "(max-width: 991px)".
+ */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * True while the viewport is narrower than the named breakpoint, i.e. the
+ * inverse of the `mq()` helper's min-width query. Handy for behavior (not
+ * styling) that has to change below a breakpoint, such as a side panel turning
+ * into a full-screen modal.
+ */
+export declare function useBelowBreakpoint(size: keyof Breakpoints): boolean;

package/dist/utils/use-media-query.js

@@ -0,0 +1,28 @@
+"use client";
+"use client";
+import { breakpoints } from "./theme.js";
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/lib/utils/use-media-query.tsx
+/**
+* Subscribes to a media query. Returns `false` on the server and during the
+* first client render so hydration matches, then re-renders with the real
+* match. Pass a full media query string, e.g. "(max-width: 991px)".
+*/ function useMediaQuery(query) {
+	const subscribe = useCallback((onChange) => {
+		const mediaQuery = window.matchMedia(query);
+		mediaQuery.addEventListener("change", onChange);
+		return () => mediaQuery.removeEventListener("change", onChange);
+	}, [query]);
+	const getSnapshot = useCallback(() => window.matchMedia(query).matches, [query]);
+	return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
+/**
+* True while the viewport is narrower than the named breakpoint, i.e. the
+* inverse of the `mq()` helper's min-width query. Handy for behavior (not
+* styling) that has to change below a breakpoint, such as a side panel turning
+* into a full-screen modal.
+*/ function useBelowBreakpoint(size) {
+	return useMediaQuery(`(max-width: ${breakpoints[size] - 1}px)`);
+}
+//#endregion
+export { useBelowBreakpoint, useMediaQuery };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -20,6 +20,7 @@
   "homepage": "https://cherry.al",
   "repository": "https://github.com/cherry-design-system/styled-components",
   "license": "MIT",
+  "packageManager": "pnpm@11.19.0",
   "engines": {
     "node": ">=18.0.0"
   },
@@ -40,11 +41,11 @@
     "build": "vite build",
     "build:demo": "vite build --mode demo",
     "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "screenshots": "node scripts/screenshot-previews.cjs"
   },
   "dependencies": {
-    "lucide-react": "^1.24.0",
-    "polished": "^4.3.1"
+    "lucide-react": "^1.28.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -53,23 +54,23 @@
   },
   "devDependencies": {
     "@swc/plugin-styled-components": "^12.15.0",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@typescript/typescript6": "^6.0.2",
-    "@vitejs/plugin-react-swc": "^4.3.1",
+    "@vitejs/plugin-react-swc": "^4.3.3",
     "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.5",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "next": "^16.2.12",
+    "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.3",
+    "styled-components": "^6.4.4",
     "typescript": "^7.0.2",
-    "vite": "^8.1.4",
+    "vite": "^8.2.0",
     "vite-plugin-dts": "^5.0.3"
   }
 }