cherry-styled-components 0.2.15 → 0.2.17

package/dist/icon-dynamic.js

@@ -0,0 +1,34 @@
+"use client";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { DynamicIcon as DynamicIcon$1, iconNames } from "lucide-react/dynamic";
+//#region src/lib/icon-dynamic.tsx
+var KEBAB_NAMES = new Set(iconNames);
+function toPascal(name) {
+	return name.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+var KEBAB_BY_PASCAL = new Map(iconNames.map((name) => [toPascal(name), name]));
+function resolveIconName(name) {
+	if (KEBAB_NAMES.has(name)) return name;
+	return KEBAB_BY_PASCAL.get(toPascal(name)) ?? null;
+}
+/**
+* Renders a lucide icon chosen at runtime (CMS content, user settings). The
+* glyph is fetched on demand through `lucide-react/dynamic`, so it appears
+* after hydration once its chunk has loaded, and never in server-rendered
+* HTML. For any icon known when the code is written, use
+* `<Icon icon={Glyph} />` from the main entry instead. In a `$icon`-style
+* prop, pass it as an element: `$icon={<DynamicIcon name={n} />}`.
+*/ function DynamicIcon({ name, "aria-label": ariaLabel, ...props }) {
+	const iconName = resolveIconName(name);
+	if (!iconName) return null;
+	return /*#__PURE__*/ jsx(DynamicIcon$1, {
+		name: iconName,
+		...props,
+		"aria-label": ariaLabel,
+		"aria-hidden": !ariaLabel,
+		role: ariaLabel ? "img" : void 0
+	});
+}
+//#endregion
+export { DynamicIcon };

package/dist/icon.d.ts

@@ -1,11 +1,45 @@
-import { icons } from 'lucide-react';
-export type IconProps = keyof typeof icons;
-interface Props {
-    name: IconProps;
+import { ComponentType, ReactElement } from 'react';
+/**
+ * The props Cherry hands to an icon component. Every `lucide-react` export
+ * satisfies this, and so does any SVG component that takes a `size`.
+ */
+export interface IconGlyphProps {
+    size?: number;
+    color?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-hidden"?: boolean;
+    role?: "img";
+}
+/**
+ * An icon component: `import { ArrowRight } from "lucide-react"`, or a
+ * component of your own that accepts `IconGlyphProps`.
+ */
+export type IconComponent = ComponentType<IconGlyphProps>;
+/**
+ * What a component's `$icon`-style prop accepts: an `IconComponent`, which
+ * the component renders through `Icon` at the size it chooses, or a rendered
+ * element such as `<DynamicIcon name={n} />`, which is used as given.
+ */
+export type IconSource = IconComponent | ReactElement;
+export interface IconProps {
+    /** An imported lucide component, or any component taking `IconGlyphProps`. */
+    icon: IconComponent;
     color?: string;
     size?: number;
     className?: string;
     "aria-label"?: string;
 }
-declare const Icon: ({ name, color, size, className, "aria-label": ariaLabel, }: Props) => import("react").JSX.Element | null;
+/**
+ * Renders one icon component. It costs exactly that glyph and renders on the
+ * server. Decorative unless labelled; a labelled glyph is announced as an
+ * image. For an icon chosen at runtime, see `DynamicIcon` in the
+ * `cherry-styled-components/dynamic` subpath.
+ */
+declare const Icon: ({ icon: Glyph, color, size, className, "aria-label": ariaLabel, }: IconProps) => import("react").JSX.Element;
+/**
+ * Renders an `IconSource`: an element as given, a component through `Icon`
+ * with `props`. For components that forward a `$icon`-style prop.
+ */
+export declare function renderIcon(source: IconSource, props?: Omit<IconProps, "icon">): ReactElement;
 export { Icon };

package/dist/icon.js

@@ -1,17 +1,29 @@
+"use client";
+"use client";
 import { jsx } from "react/jsx-runtime";
-import { icons } from "lucide-react";
+import { isValidElement } from "react";
 //#region src/lib/icon.tsx
-var Icon = ({ name, color, size, className, "aria-label": ariaLabel }) => {
-	const LucideIcon = icons[name];
-	if (!LucideIcon) return null;
-	return /*#__PURE__*/ jsx(LucideIcon, {
-		color,
-		size,
-		className,
-		"aria-label": ariaLabel,
-		"aria-hidden": !ariaLabel,
-		role: ariaLabel ? "img" : void 0
+/**
+* Renders one icon component. It costs exactly that glyph and renders on the
+* server. Decorative unless labelled; a labelled glyph is announced as an
+* image. For an icon chosen at runtime, see `DynamicIcon` in the
+* `cherry-styled-components/dynamic` subpath.
+*/ var Icon = ({ icon: Glyph, color, size, className, "aria-label": ariaLabel }) => /*#__PURE__*/ jsx(Glyph, {
+	color,
+	size,
+	className,
+	"aria-label": ariaLabel,
+	"aria-hidden": !ariaLabel,
+	role: ariaLabel ? "img" : void 0
+});
+/**
+* Renders an `IconSource`: an element as given, a component through `Icon`
+* with `props`. For components that forward a `$icon`-style prop.
+*/ function renderIcon(source, props) {
+	return /*#__PURE__*/ isValidElement(source) ? source : /*#__PURE__*/ jsx(Icon, {
+		icon: source,
+		...props
 	});
-};
+}
 //#endregion
-export { Icon };
+export { Icon, renderIcon };

package/dist/index.js

@@ -7,9 +7,8 @@ import { useBelowBreakpoint, useMediaQuery } from "./utils/use-media-query.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 { Icon, renderIcon } from "./icon.js";
 import { Accordion } from "./accordion.js";
 import { Avatar } from "./avatar.js";
 import { Dropzone, matchesAccept } from "./dropzone.js";
@@ -45,4 +44,4 @@ import { Textarea } from "./textarea.js";
 import { ThemeToggle } from "./theme-toggle.js";
 import { StyledNotificationItem, StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
 import { Toggle } from "./toggle.js";
-export { Accordion, Avatar, AvatarDropzone, Box, Button, Callout, ChatContext, ChatInput, ChatLauncher, ChatMessage, ChatMessageList, ChatPanel, ChatProvider, ChatSource, ChatSources, ChatTyping, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Prose, Range, Select, Space, Spinner, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, alpha, breakpoints, buttonStyles, chatTextStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, darkFilledTextRule, errorInteractiveStyles, filledTextColor, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, proseStyles, resetButton, resetInput, resolveShowcaseCommand, resolveTheme, shade, shadows, shadowsDark, showcaseCommands, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, thinScrollbar, tint, useBelowBreakpoint, useChat, useLockBodyScroll, useMediaQuery, useOnClickOutside, useToastNotifications };
+export { Accordion, Avatar, AvatarDropzone, Box, Button, Callout, ChatContext, ChatInput, ChatLauncher, ChatMessage, ChatMessageList, ChatPanel, ChatProvider, ChatSource, ChatSources, ChatTyping, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Prose, Range, Select, Space, Spinner, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, alpha, breakpoints, buttonStyles, chatTextStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, darkFilledTextRule, errorInteractiveStyles, filledTextColor, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, proseStyles, renderIcon, resetButton, resetInput, resolveShowcaseCommand, resolveTheme, shade, shadows, shadowsDark, showcaseCommands, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, thinScrollbar, tint, useBelowBreakpoint, useChat, useLockBodyScroll, useMediaQuery, useOnClickOutside, useToastNotifications };

package/dist/input.js

@@ -5,10 +5,11 @@ import { Icon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
+import { CalendarDays, Check } from "lucide-react";
 //#region src/lib/input.tsx
 var StyledInputWrapper = styled.span.withConfig({
 	displayName: "input__StyledInputWrapper",
-	componentId: "sc-5352dea9-0"
+	componentId: "sc-8a4d191a-0"
 })([
 	`display:inline-flex;flex-wrap:`,
 	`;align-items:center;`,
@@ -20,7 +21,7 @@ var StyledInputWrapper = styled.span.withConfig({
 ], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;align-content:flex-start;`]), ({ $size }) => $size === "small" ? "14px" : "17px", ({ $size }) => $size === "small" ? "18px" : "24px", ({ $size }) => $size === "small" ? "18px" : "24px", ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledLabel = styled.label.withConfig({
 	displayName: "input__StyledLabel",
-	componentId: "sc-5352dea9-1"
+	componentId: "sc-8a4d191a-1"
 })([
 	`display:inline-block;color:`,
 	`;font-size:`,
@@ -29,7 +30,7 @@ var StyledLabel = styled.label.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg);
 var StyledInput = styled.input.withConfig({
 	displayName: "input__StyledInput",
-	componentId: "sc-5352dea9-2"
+	componentId: "sc-8a4d191a-2"
 })([
 	``,
 	`;`,
@@ -38,7 +39,7 @@ var StyledInput = styled.input.withConfig({
 	`;background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
-	`;transition:all 0.3s ease;word-break:keep-all;white-space:nowrap;display:inline-flex;&::-webkit-datetime-edit{padding:0;margin:0;vertical-align:middle;}&::-webkit-datetime-edit-fields-wrapper{padding:4px 0;margin:0;vertical-align:middle;}&::-webkit-calendar-picker-indicator{background:transparent;cursor:pointer;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:24px;height:24px;}&::-webkit-datetime-edit-text{color:`,
+	`;transition:all 0.3s ease;word-break:keep-all;white-space:nowrap;display:inline-flex;&::-webkit-datetime-edit{padding:0;margin:0;vertical-align:middle;}&::-webkit-datetime-edit-fields-wrapper{padding:4px 0;margin:0;vertical-align:middle;}&::-webkit-date-and-time-value{text-align:left;margin:0;}&::-webkit-calendar-picker-indicator{background:transparent;cursor:pointer;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:24px;height:24px;}&::-webkit-datetime-edit-text{color:`,
 	`;}&::-webkit-datetime-edit-month-field{&:focus{background:`,
 	`;color:`,
 	`;border-radius:4px;}}&::-webkit-datetime-edit-day-field{&:focus{background:`,
@@ -85,7 +86,7 @@ var StyledInput = styled.input.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledIconWrapper",
-	componentId: "sc-5352dea9-3"
+	componentId: "sc-8a4d191a-3"
 })([
 	`display:inline-flex;position:relative;line-height:0;min-width:fit-content;& em{display:block;border-radius:50%;background:`,
 	`;}& svg,& em{object-fit:contain;position:absolute;top:50%;left:50%;color:`,
@@ -93,7 +94,7 @@ var StyledIconWrapper = styled.span.withConfig({
 ], ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary);
 var StyledRadioCheckboxInput = styled.input.withConfig({
 	displayName: "input__StyledRadioCheckboxInput",
-	componentId: "sc-5352dea9-4"
+	componentId: "sc-8a4d191a-4"
 })([
 	``,
 	`;display:inline-block;background:`,
@@ -178,7 +179,7 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 });
 var StyledCustomIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledCustomIconWrapper",
-	componentId: "sc-5352dea9-5"
+	componentId: "sc-8a4d191a-5"
 })([
 	`position:relative;`,
 	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,
@@ -195,7 +196,7 @@ function LocalInput({ ...props }, ref) {
 			...props,
 			"aria-invalid": props.$error || void 0,
 			ref
-		}), !props.disabled && props.type === "checkbox" ? /*#__PURE__*/ jsx(Icon, { name: "Check" }) : /*#__PURE__*/ jsx("em", {})] }), props.$label && /*#__PURE__*/ jsx(StyledLabel, {
+		}), !props.disabled && props.type === "checkbox" ? /*#__PURE__*/ jsx(Icon, { icon: Check }) : /*#__PURE__*/ jsx("em", {})] }), props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,
 			children: props.$label
 		})]
@@ -222,7 +223,7 @@ function LocalInput({ ...props }, ref) {
 				}),
 				props.$iconPosition === "right" && props.$icon && props.$icon,
 				(props.type === "date" || props.type === "datetime-local" || props.type === "month" || props.type === "week" || props.type === "time") && /*#__PURE__*/ jsx(Icon, {
-					name: "CalendarDays",
+					icon: CalendarDays,
 					className: "icon-calendar"
 				})
 			]

package/dist/modal.js

@@ -9,6 +9,7 @@ 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 { X } from "lucide-react";
 import { createPortal } from "react-dom";
 //#region src/lib/modal.tsx
 var emptySubscribe = () => () => {};
@@ -21,7 +22,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-1bbfce8-0"
+	componentId: "sc-937855ae-0"
 })([
 	`position:fixed;top:0;left:0;width:100%;height:100%;background:`,
 	`;display:flex;justify-content:center;align-items:center;z-index:1010;animation:`,
@@ -35,11 +36,11 @@ var StyledModal = styled.div.withConfig({
 ], ({ 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-1bbfce8-1"
+	componentId: "sc-937855ae-1"
 })([`position:absolute;top:20px;right:20px;z-index:10;`]);
 var StyledModalTitle = styled.h2.withConfig({
 	displayName: "modal__StyledModalTitle",
-	componentId: "sc-1bbfce8-2"
+	componentId: "sc-937855ae-2"
 })([
 	`--divider-color:`,
 	`;margin:0 0 15px 0;padding:0 0 15px 0;color:`,
@@ -48,7 +49,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-1bbfce8-3"
+	componentId: "sc-937855ae-3"
 })([
 	`max-height:calc(100svh - 200px);overflow-y:auto;padding:5px;margin:-5px;--divider-color:`,
 	`;`,
@@ -101,7 +102,7 @@ function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton,
 						onClick: closeModal,
 						className: "modal-close",
 						"aria-label": "Close Modal",
-						children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+						children: /*#__PURE__*/ jsx(Icon, { icon: X })
 					})
 				}),
 				$title && /*#__PURE__*/ jsx(StyledModalTitle, {

package/dist/password.js

@@ -7,6 +7,7 @@ import { Input } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import styled, { css } from "styled-components";
+import { Eye, EyeOff } from "lucide-react";
 //#region src/lib/password.tsx
 var passwordSizes = {
 	small: {
@@ -27,7 +28,7 @@ var passwordSizes = {
 };
 var StyledPassword = styled.span.withConfig({
 	displayName: "password__StyledPassword",
-	componentId: "sc-b3beabaa-0"
+	componentId: "sc-ab5e6dd3-0"
 })([
 	`position:relative;display:inline-flex;& input{padding-right:`,
 	`;}`,
@@ -38,7 +39,7 @@ var StyledPassword = styled.span.withConfig({
 }, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledPasswordReveal = styled.span.withConfig({
 	displayName: "password__StyledPasswordReveal",
-	componentId: "sc-b3beabaa-1"
+	componentId: "sc-ab5e6dd3-1"
 })([`position:absolute;bottom:0;display:flex;align-items:center;`, ``], ({ $size }) => {
 	const { height, inset } = passwordSizes[$size ?? "default"];
 	return css([
@@ -65,7 +66,7 @@ function LocalPassword({ ...props }, ref) {
 				"aria-pressed": show,
 				title: show ? "Hide password" : "Show password",
 				onClick: () => setShow((prev) => !prev),
-				children: /*#__PURE__*/ jsx(Icon, { name: show ? "EyeOff" : "Eye" })
+				children: /*#__PURE__*/ jsx(Icon, { icon: show ? EyeOff : Eye })
 			})
 		})]
 	});

package/dist/select.js

@@ -6,10 +6,11 @@ import { StyledInputWrapper, StyledLabel } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
+import { ChevronDown } from "lucide-react";
 //#region src/lib/select.tsx
 var StyledSelect = styled.select.withConfig({
 	displayName: "select__StyledSelect",
-	componentId: "sc-65975d95-0"
+	componentId: "sc-ea1826c7-0"
 })([
 	``,
 	`;`,
@@ -38,7 +39,7 @@ var StyledSelect = styled.select.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "select__StyledIconWrapper",
-	componentId: "sc-65975d95-1"
+	componentId: "sc-ea1826c7-1"
 })([
 	`position:relative;`,
 	` & svg{position:absolute;top:50%;right:15px;width:24px;height:24px;color:`,
@@ -59,7 +60,7 @@ function LocalSelect({ ...props }, ref) {
 				"aria-invalid": props.$error || void 0,
 				ref,
 				children: props.children
-			}), /*#__PURE__*/ jsx(Icon, { name: "ChevronDown" })]
+			}), /*#__PURE__*/ jsx(Icon, { icon: ChevronDown })]
 		})]
 	});
 }

package/dist/spinner.d.ts

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

package/dist/spinner.js

@@ -3,18 +3,19 @@
 import { Icon } from "./icon.js";
 import { jsx } from "react/jsx-runtime";
 import styled, { keyframes } from "styled-components";
+import { LoaderCircle } from "lucide-react";
 //#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"
+	componentId: "sc-af2b088c-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,
+var Spinner = ({ icon = LoaderCircle, ...props }) => /*#__PURE__*/ jsx(StyledSpinner, {
+	icon,
 	...props
 });
 //#endregion

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

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

package/dist/theme-toggle.js

@@ -6,10 +6,11 @@ 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 { MoonStar, Sun } from "lucide-react";
 //#region src/lib/theme-toggle.tsx
 var StyledThemeToggle = styled.button.withConfig({
 	displayName: "theme-toggle__StyledThemeToggle",
-	componentId: "sc-f8700a2a-0"
+	componentId: "sc-85f678d3-0"
 })([
 	``,
 	` `,
@@ -45,7 +46,7 @@ function LocalThemeToggle({ onClick, $shortcut = false, ...props }, ref) {
 			onClick?.(event);
 		},
 		ref,
-		children: [/*#__PURE__*/ jsx(Icon, { name: "Sun" }), /*#__PURE__*/ jsx(Icon, { name: "MoonStar" })]
+		children: [/*#__PURE__*/ jsx(Icon, { icon: Sun }), /*#__PURE__*/ jsx(Icon, { icon: MoonStar })]
 	});
 }
 var ThemeToggle = /*#__PURE__*/ forwardRef(LocalThemeToggle);

package/dist/toast.d.ts

@@ -27,14 +27,14 @@ interface ToastNotificationsProviderProps {
 }
 declare function ToastNotificationsProvider({ children, }: ToastNotificationsProviderProps): React.JSX.Element;
 export declare const StyledNotifications: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style"> & {
-    style?: import('styled-components/dist/types').CSSPropertiesWithVars | React.CSSProperties | undefined;
+    style?: React.CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
 }, {
     theme: Theme;
     $align?: ToastAlign;
     $bottom?: boolean;
 }>> & string;
 export declare const StyledNotificationItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style"> & {
-    style?: import('styled-components/dist/types').CSSPropertiesWithVars | React.CSSProperties | undefined;
+    style?: React.CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
 }, {
     theme: Theme;
     $color: ToastColor;

package/dist/toast.js

@@ -5,12 +5,13 @@ import { IconButton } from "./icon-button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import styled, { css } from "styled-components";
+import { CircleCheck, CircleX, Info, TriangleAlert, X } from "lucide-react";
 //#region src/lib/toast.tsx
 var statusIcons = {
-	success: "CircleCheck",
-	error: "CircleX",
-	warning: "TriangleAlert",
-	info: "Info"
+	success: CircleCheck,
+	error: CircleX,
+	warning: TriangleAlert,
+	info: Info
 };
 var EXIT_DURATION_MS = 400;
 var ToastNotificationsContext = /*#__PURE__*/ createContext({
@@ -52,11 +53,11 @@ function ToastNotificationsProvider({ children }) {
 }
 var StyledNotifications = styled.ul.withConfig({
 	displayName: "toast__StyledNotifications",
-	componentId: "sc-623506e7-0"
+	componentId: "sc-5ff21b00-0"
 })([`position:fixed;z-index:99999;margin:0;padding:0;list-style:none;left:20px;right:20px;pointer-events:none;`, ``], ({ $bottom }) => $bottom ? css([`bottom:20px;`]) : css([`top:20px;`]));
 var StyledNotificationItem = styled.li.withConfig({
 	displayName: "toast__StyledNotificationItem",
-	componentId: "sc-623506e7-1"
+	componentId: "sc-5ff21b00-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;`,
@@ -126,7 +127,7 @@ function NotificationItem({ notification, $align, $bottom }) {
 				children: [
 					/*#__PURE__*/ jsx("span", {
 						className: "status-icon",
-						children: /*#__PURE__*/ jsx(Icon, { name: statusIcons[notification.color] || statusIcons.info })
+						children: /*#__PURE__*/ jsx(Icon, { icon: statusIcons[notification.color] ?? statusIcons.info })
 					}),
 					/*#__PURE__*/ jsx("span", {
 						className: "message",
@@ -137,7 +138,7 @@ function NotificationItem({ notification, $align, $bottom }) {
 						className: "close-button",
 						"aria-label": "Dismiss notification",
 						onClick: () => setPhase("exiting"),
-						children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+						children: /*#__PURE__*/ jsx(Icon, { icon: X })
 					})
 				]
 			})

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

@@ -2,6 +2,46 @@
 "use client";
 import { useEffect, useRef } from "react";
 //#region src/lib/utils/use-on-click-outside.tsx
+var NATIVE_PICKER_SELECTOR = [
+	"select",
+	"input[type=\"date\"]",
+	"input[type=\"datetime-local\"]",
+	"input[type=\"month\"]",
+	"input[type=\"time\"]",
+	"input[type=\"week\"]"
+].join(",");
+var RECENT_PRESS_MS = 400;
+var subscriberCount = 0;
+var lastPressAt = Number.NEGATIVE_INFINITY;
+var pickerBlurredAt = Number.NEGATIVE_INFINITY;
+var capture = {
+	capture: true,
+	passive: true
+};
+function notePress() {
+	lastPressAt = performance.now();
+}
+function noteFocusOut(event) {
+	const target = event.target;
+	if (target instanceof Element && target.matches(NATIVE_PICKER_SELECTOR)) pickerBlurredAt = performance.now();
+}
+function subscribeToPresses() {
+	if (subscriberCount++ > 0) return;
+	document.addEventListener("pointerdown", notePress, capture);
+	document.addEventListener("touchstart", notePress, capture);
+	document.addEventListener("focusout", noteFocusOut, true);
+}
+function unsubscribeFromPresses() {
+	if (--subscriberCount > 0) return;
+	document.removeEventListener("pointerdown", notePress, capture);
+	document.removeEventListener("touchstart", notePress, capture);
+	document.removeEventListener("focusout", noteFocusOut, true);
+}
+function isStrayPickerEvent() {
+	const now = performance.now();
+	const active = document.activeElement;
+	return (active instanceof Element && active.matches(NATIVE_PICKER_SELECTOR) || now - pickerBlurredAt < RECENT_PRESS_MS) && now - lastPressAt >= RECENT_PRESS_MS;
+}
 function useOnClickOutside(refs, cb) {
 	const latest = useRef({
 		refs,
@@ -16,11 +56,14 @@ function useOnClickOutside(refs, cb) {
 	useEffect(() => {
 		function handleClickOutside(event) {
 			const { refs, cb } = latest.current;
+			if (isStrayPickerEvent()) return;
 			if (refs.every((ref) => !ref.current || !ref.current.contains(event.target))) cb();
 		}
+		subscribeToPresses();
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => {
 			document.removeEventListener("mousedown", handleClickOutside);
+			unsubscribeFromPresses();
 		};
 	}, []);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -10,6 +10,14 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./next": {
+      "types": "./dist/styled-components/registry.d.ts",
+      "import": "./dist/styled-components/registry.js"
+    },
+    "./dynamic": {
+      "types": "./dist/icon-dynamic.d.ts",
+      "import": "./dist/icon-dynamic.js"
     }
   },
   "files": [
@@ -20,7 +28,7 @@
   "homepage": "https://cherry.al",
   "repository": "https://github.com/cherry-design-system/styled-components",
   "license": "MIT",
-  "packageManager": "pnpm@11.20.0",
+  "packageManager": "pnpm@12.3.4",
   "engines": {
     "node": ">=18.0.0"
   },
@@ -44,33 +52,32 @@
     "format:check": "prettier --check .",
     "screenshots": "node scripts/screenshot-previews.cjs"
   },
-  "dependencies": {
-    "lucide-react": "^1.28.0"
-  },
   "peerDependencies": {
+    "lucide-react": "^1.31.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "styled-components": "^6.0.0"
   },
   "devDependencies": {
-    "@swc/plugin-styled-components": "^12.15.0",
-    "@types/node": "^26.1.2",
+    "@swc/plugin-styled-components": "^14.0.0",
+    "@types/node": "^26.4.1",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@types/react-dom": "^19.2.7",
     "@typescript/typescript6": "^6.0.2",
     "@vitejs/plugin-react-swc": "^4.3.3",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.3",
-    "next": "^16.3.0",
-    "playwright-core": "^1.62.1",
+    "eslint-plugin-react-refresh": "^0.5.6",
+    "lucide-react": "^1.41.0",
+    "next": "^16.3.4",
+    "playwright-core": "^1.63.0",
     "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.5.0",
+    "sharp": "^0.35.4",
+    "styled-components": "^6.5.3",
     "typescript": "^7.0.2",
-    "vite": "^8.2.0",
-    "vite-plugin-dts": "^5.0.3"
+    "vite": "^8.2.2",
+    "vite-plugin-dts": "^5.1.0"
   }
 }