cherry-styled-components 0.2.16 → 0.2.18

package/README.md

@@ -10,7 +10,7 @@ Cherry Design System is a versatile foundation for projects. It offers a white l
 Install the package along with its peer dependencies:
 
 ```bash
-npm install cherry-styled-components react react-dom styled-components
+npm install cherry-styled-components react react-dom styled-components lucide-react
 ```
 
 ## Quick Start
@@ -38,6 +38,8 @@ The built-in `theme` and `themeDark` objects are a starting point; both are plai
 
 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), interactive components (Accordion, Modal, Toast, ThemeToggle, Icon, IconButton), content components (Prose, Callout, Avatar), and a chat kit (see below). See the [component docs](https://cherry.al/) for the full API.
 
+Icons come from [lucide](https://lucide.dev/icons/), a peer dependency. Pass an imported component, `<Icon icon={ArrowRight} />`, which ships only that glyph and renders on the server. Component icon props such as Avatar's `$icon` take the same component, or a rendered element. For an icon chosen at runtime, import `DynamicIcon` from `cherry-styled-components/dynamic`: it resolves a name on demand, and only apps that import that subpath carry lucide's dynamic import map.
+
 ## Chat kit
 
 Cherry ships everything needed to build an AI-assistant chat UI, split into a headless provider and presentational components. The provider owns panel state, focus management, the transcript, and streaming bookkeeping; **the app owns the transport** — Cherry never fetches, parses SSE, or assumes an endpoint.

package/dist/accordion.js

@@ -5,10 +5,11 @@ import { Icon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import styled, { css } from "styled-components";
+import { ChevronDown } from "lucide-react";
 //#region src/lib/accordion.tsx
 var StyledAccordion = styled.div.withConfig({
 	displayName: "accordion__StyledAccordion",
-	componentId: "sc-20594240-0"
+	componentId: "sc-bafb2fc7-0"
 })([
 	`text-align:left;border-radius:`,
 	`;margin:0;`,
@@ -18,7 +19,7 @@ var StyledAccordion = styled.div.withConfig({
 ], ({ theme, $inline }) => $inline ? "0" : theme.spacing.radius.lg, ({ theme }) => styledText(theme), ({ theme }) => theme.colors.light, ({ theme, $inline }) => !$inline && css([`border:solid 1px `, `;`], theme.colors.grayLight));
 var StyledAccordionTitle = styled.button.withConfig({
 	displayName: "accordion__StyledAccordionTitle",
-	componentId: "sc-20594240-1"
+	componentId: "sc-bafb2fc7-1"
 })([
 	`appearance:none;border:none;background:none;font-family:inherit;text-align:left;width:100%;box-sizing:border-box;font-weight:700;cursor:pointer;margin:0;`,
 	`;color:`,
@@ -32,7 +33,7 @@ var StyledAccordionTitle = styled.button.withConfig({
 ], ({ theme }) => styledText(theme), ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "8px 40px 8px 0" : "20px 50px 20px 20px", ({ theme }) => theme.colors.primaryDark, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "0" : "20px", ({ $isOpen }) => $isOpen && css([`transform:translateY(-50%) rotate(180deg);`]));
 var StyledAccordionContent = styled.div.withConfig({
 	displayName: "accordion__StyledAccordionContent",
-	componentId: "sc-20594240-2"
+	componentId: "sc-bafb2fc7-2"
 })([
 	`display:grid;grid-template-rows:`,
 	`;visibility:`,
@@ -40,11 +41,11 @@ var StyledAccordionContent = styled.div.withConfig({
 ], ({ $isOpen }) => $isOpen ? "1fr" : "0fr", ({ $isOpen }) => $isOpen ? "visible" : "hidden");
 var StyledAccordionInner = styled.div.withConfig({
 	displayName: "accordion__StyledAccordionInner",
-	componentId: "sc-20594240-3"
+	componentId: "sc-bafb2fc7-3"
 })([`min-height:0;overflow:clip;`]);
 var StyledAccordionBody = styled.div.withConfig({
 	displayName: "accordion__StyledAccordionBody",
-	componentId: "sc-20594240-4"
+	componentId: "sc-bafb2fc7-4"
 })([
 	``,
 	`;color:`,
@@ -74,7 +75,7 @@ function Accordion({ children, title, onToggle, $inline, defaultOpen, open, ...r
 			children: [
 				title,
 				" ",
-				/*#__PURE__*/ jsx(Icon, { name: "ChevronDown" })
+				/*#__PURE__*/ jsx(Icon, { icon: ChevronDown })
 			]
 		}), /*#__PURE__*/ jsx(StyledAccordionContent, {
 			$isOpen: isOpen,

package/dist/avatar-dropzone.d.ts

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
 import { DropzoneRejection } from './dropzone';
-import { Icon } from './icon';
+import { IconSource } from './icon';
 export interface AvatarDropzoneProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "children" | "multiple"> {
     /** Visual scale, following the IconButton size scale. */
     $size?: "default" | "big" | "small";
-    /** Lucide icon shown while no picture is selected. */
-    $icon?: React.ComponentProps<typeof Icon>["name"];
+    /** Icon shown while no picture is selected: an imported lucide component, or a rendered element. */
+    $icon?: IconSource;
     /** Maximum file size in bytes. */
     $maxBytes?: number;
     /** Accessible label for the drop target. */

package/dist/avatar-dropzone.js

@@ -1,11 +1,12 @@
 "use client";
 "use client";
 import { alpha, resetButton } from "./utils/mixins.js";
-import { Icon } from "./icon.js";
+import { Icon, renderIcon } from "./icon.js";
 import { matchesAccept } from "./dropzone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import styled, { css } from "styled-components";
+import { User, X } from "lucide-react";
 //#region src/lib/avatar-dropzone.tsx
 var avatarSizes = {
 	small: {
@@ -21,7 +22,7 @@ var avatarSizes = {
 		icon: 28
 	}
 };
-function LocalAvatarDropzone({ $size, $icon = "User", $maxBytes, "aria-label": ariaLabel = "Upload profile picture", onFileChange, onFileRejected, accept = "image/*", disabled, ...rest }, ref) {
+function LocalAvatarDropzone({ $size, $icon = User, $maxBytes, "aria-label": ariaLabel = "Upload profile picture", onFileChange, onFileRejected, accept = "image/*", disabled, ...rest }, ref) {
 	const [previewUrl, setPreviewUrl] = useState(null);
 	const [dragOver, setDragOver] = useState(false);
 	const inputRef = useRef(null);
@@ -87,14 +88,14 @@ function LocalAvatarDropzone({ $size, $icon = "User", $maxBytes, "aria-label": a
 				children: previewUrl ? /*#__PURE__*/ jsx("img", {
 					src: previewUrl,
 					alt: ""
-				}) : /*#__PURE__*/ jsx(Icon, { name: $icon })
+				}) : renderIcon($icon)
 			}),
 			previewUrl && /*#__PURE__*/ jsx(StyledAvatarRemove, {
 				type: "button",
 				"aria-label": "Remove profile picture",
 				onClick: removeFile,
 				disabled,
-				children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+				children: /*#__PURE__*/ jsx(Icon, { icon: X })
 			}),
 			/*#__PURE__*/ jsx("input", {
 				ref: inputRef,
@@ -114,7 +115,7 @@ function LocalAvatarDropzone({ $size, $icon = "User", $maxBytes, "aria-label": a
 var AvatarDropzone = /*#__PURE__*/ forwardRef(LocalAvatarDropzone);
 var StyledAvatarDropzoneWrapper = styled.span.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarDropzoneWrapper",
-	componentId: "sc-758cb640-0"
+	componentId: "sc-b516c8e0-0"
 })([
 	`position:relative;display:inline-flex;width:`,
 	`px;height:`,
@@ -122,7 +123,7 @@ var StyledAvatarDropzoneWrapper = styled.span.withConfig({
 ], ({ $size }) => avatarSizes[$size ?? "default"].box, ({ $size }) => avatarSizes[$size ?? "default"].box);
 var StyledAvatarDropzone = styled.button.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarDropzone",
-	componentId: "sc-758cb640-1"
+	componentId: "sc-b516c8e0-1"
 })([
 	``,
 	`;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px `,
@@ -146,7 +147,7 @@ var StyledAvatarDropzone = styled.button.withConfig({
 ], theme.colors.primary, alpha(theme.colors.primary, theme.isDark ? 12 : 5), alpha(theme.colors.primary, 12)), ({ theme }) => theme.colors.primary, ({ theme }) => alpha(theme.colors.primary, theme.isDark ? 10 : 4), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
 var StyledAvatarRemove = styled.button.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarRemove",
-	componentId: "sc-758cb640-2"
+	componentId: "sc-b516c8e0-2"
 })([
 	``,
 	`;position:absolute;top:0;right:0;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#ffffff;background:`,

package/dist/avatar.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconProps } from './icon';
+import { IconSource } from './icon';
 export type AvatarSize = "small" | "default" | "big";
 export type AvatarColor = "primary" | "secondary" | "tertiary" | "gray";
 export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -9,8 +9,8 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
     $alt?: string;
     /** Full name or label; the first letters of its first two words are shown. */
     $name?: string;
-    /** Fallback icon used when there is no image and no name. */
-    $icon?: IconProps;
+    /** Fallback icon used when there is no image and no name: an imported lucide component, or a rendered element. */
+    $icon?: IconSource;
     $color?: AvatarColor;
 }
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/avatar.js

@@ -1,10 +1,11 @@
 "use client";
 "use client";
 import { darkFilledTextRule, filledTextColor } from "./utils/mixins.js";
-import { Icon } from "./icon.js";
+import { renderIcon } from "./icon.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
+import { User } from "lucide-react";
 //#region src/lib/avatar.tsx
 var avatarSizes = {
 	small: {
@@ -31,7 +32,7 @@ function toInitials(name) {
 }
 var StyledAvatar = styled.span.withConfig({
 	displayName: "avatar__StyledAvatar",
-	componentId: "sc-d3a5da79-0"
+	componentId: "sc-3c0e28ca-0"
 })([``, `;`], ({ theme, $size = "default", $color = "primary" }) => {
 	const { box } = avatarSizes[$size];
 	return css([
@@ -44,7 +45,7 @@ var StyledAvatar = styled.span.withConfig({
 		`;& img{width:100%;height:100%;object-fit:cover;display:block;}`
 	], box, box, avatarColors[$color](theme), filledTextColor(theme), Math.round(box * .38), darkFilledTextRule(theme));
 });
-function LocalAvatar({ $size = "default", $src, $alt, $name, $icon = "User", $color, ...props }, ref) {
+function LocalAvatar({ $size = "default", $src, $alt, $name, $icon = User, $color, ...props }, ref) {
 	const initials = $name ? toInitials($name) : "";
 	const fallbackLabel = $src || initials ? void 0 : $alt ?? $name;
 	return /*#__PURE__*/ jsx(StyledAvatar, {
@@ -57,10 +58,7 @@ function LocalAvatar({ $size = "default", $src, $alt, $name, $icon = "User", $co
 		children: $src ? /*#__PURE__*/ jsx("img", {
 			src: $src,
 			alt: $alt ?? $name ?? ""
-		}) : initials ? initials : /*#__PURE__*/ jsx(Icon, {
-			name: $icon,
-			size: avatarSizes[$size].icon
-		})
+		}) : initials ? initials : renderIcon($icon, { size: avatarSizes[$size].icon })
 	});
 }
 var Avatar = /*#__PURE__*/ forwardRef(LocalAvatar);

package/dist/callout.d.ts

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
-import { IconProps } from './icon';
+import { IconSource } from './icon';
 export type CalloutType = "note" | "info" | "warning" | "danger" | "success";
 export interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     $type?: CalloutType;
-    /** Overrides the icon the type would pick, or supplies one when untyped. */
-    $icon?: IconProps;
+    /** Overrides the icon the type would pick, or supplies one when untyped: an imported lucide component, or a rendered element. */
+    $icon?: IconSource;
     /** Renders without an icon. */
     $hideIcon?: boolean;
 }

package/dist/callout.js

@@ -1,10 +1,11 @@
 "use client";
 "use client";
 import { styledSmall } from "./utils/typography.js";
-import { Icon } from "./icon.js";
+import { renderIcon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
+import { Check, CircleAlert, Info, OctagonAlert, TriangleAlert } from "lucide-react";
 //#region src/lib/callout.tsx
 var calloutTints = {
 	note: {
@@ -69,11 +70,11 @@ var calloutTints = {
 	}
 };
 var calloutIcons = {
-	note: "CircleAlert",
-	info: "Info",
-	warning: "TriangleAlert",
-	danger: "OctagonAlert",
-	success: "Check"
+	note: CircleAlert,
+	info: Info,
+	warning: TriangleAlert,
+	danger: OctagonAlert,
+	success: Check
 };
 var tintStyles = (tint) => css([
 	`border-color:`,
@@ -83,7 +84,7 @@ var tintStyles = (tint) => css([
 ], tint.border, tint.background, tint.text);
 var StyledCallout = styled.div.withConfig({
 	displayName: "callout__StyledCallout",
-	componentId: "sc-84e10f5e-0"
+	componentId: "sc-46cf6e91-0"
 })([
 	`background:`,
 	`;border:solid 1px `,
@@ -99,17 +100,14 @@ var StyledCallout = styled.div.withConfig({
 	`;}`
 ], tintStyles(calloutTints[$type].light), theme.isDark && tintStyles(calloutTints[$type].dark), tintStyles(calloutTints[$type].dark)));
 function LocalCallout({ children, $type, $icon, $hideIcon, ...props }, ref) {
-	const iconName = $icon ?? ($type ? calloutIcons[$type] : void 0);
+	const icon = $icon ?? ($type ? calloutIcons[$type] : void 0);
 	return /*#__PURE__*/ jsxs(StyledCallout, {
 		$type,
 		...props,
 		ref,
-		children: [!$hideIcon && iconName && /*#__PURE__*/ jsx("span", {
+		children: [!$hideIcon && icon && /*#__PURE__*/ jsx("span", {
 			className: "callout-icon",
-			children: /*#__PURE__*/ jsx(Icon, {
-				name: iconName,
-				size: 16
-			})
+			children: renderIcon(icon, { size: 16 })
 		}), /*#__PURE__*/ jsx("span", {
 			className: "callout-content",
 			children

package/dist/chat-input.js

@@ -8,6 +8,7 @@ import { Spinner } from "./spinner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import styled, { createGlobalStyle, css, keyframes } from "styled-components";
+import { ArrowUp } from "lucide-react";
 //#region src/lib/chat-input.tsx
 var GLOW_COLORS = [
 	"#cc5555",
@@ -75,7 +76,7 @@ var sparkleFloat = keyframes([`0%,100%{opacity:0;transform:translateY(0) scale(0
 var conicStops = (colors) => [...colors, colors[0]].join(", ");
 var StyledChatForm = styled.form.withConfig({
 	displayName: "chat-input__StyledChatForm",
-	componentId: "sc-d9366e15-0"
+	componentId: "sc-88c29886-0"
 })([
 	`display:flex;gap:10px;justify-content:center;align-items:flex-end;background:`,
 	`;padding:20px;width:100%;flex-shrink:0;border-top:solid 1px `,
@@ -83,7 +84,7 @@ var StyledChatForm = styled.form.withConfig({
 ], ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight);
 var StyledInputWrapper = styled.div.withConfig({
 	displayName: "chat-input__StyledInputWrapper",
-	componentId: "sc-d9366e15-1"
+	componentId: "sc-88c29886-1"
 })([`position:relative;flex:1;min-width:0;`, ``], ({ $glow, $glowColors = GLOW_COLORS, theme }) => $glow && css([
 	`isolation:isolate;&::before{content:"";position:absolute;inset:0;border-radius:`,
 	`;background:conic-gradient( from var(--cherry-gradient-angle),`,
@@ -97,7 +98,7 @@ var StyledInputWrapper = styled.div.withConfig({
 ], theme.spacing.radius.xs, conicStops($glowColors), rotateGradient, theme.spacing.radius.xs, conicStops($glowColors.map((color) => alpha(color, 40))), rotateGradient, theme.spacing.radius.xs, theme.spacing.radius.xs));
 var StyledRadiantGlow = styled.div.withConfig({
 	displayName: "chat-input__StyledRadiantGlow",
-	componentId: "sc-d9366e15-2"
+	componentId: "sc-88c29886-2"
 })([
 	`position:absolute;inset:-10px;border-radius:20px;pointer-events:none;z-index:-2;opacity:0.6;transition:all 0.3s ease;&::before{content:"";position:absolute;inset:0;border-radius:inherit;background:conic-gradient( from var(--cherry-gradient-angle),`,
 	` );animation:`,
@@ -107,11 +108,11 @@ var StyledRadiantGlow = styled.div.withConfig({
 ], ({ $glowColors = GLOW_COLORS }) => conicStops($glowColors.map((color) => alpha(color, 40))), rotateGradient, pulseGlow, ({ $isActive }) => $isActive && css([`opacity:1;`]));
 var StyledSparkleContainer = styled.div.withConfig({
 	displayName: "chat-input__StyledSparkleContainer",
-	componentId: "sc-d9366e15-3"
+	componentId: "sc-88c29886-3"
 })([`position:absolute;inset:-30px;pointer-events:none;overflow:hidden;border-radius:30px;z-index:-3;opacity:0;transition:all 0.3s ease;`, ` @media (prefers-reduced-motion:reduce){display:none;}`], ({ $isActive }) => $isActive && css([`opacity:1;`]));
 var StyledSparkle = styled.div.withConfig({
 	displayName: "chat-input__StyledSparkle",
-	componentId: "sc-d9366e15-4"
+	componentId: "sc-88c29886-4"
 })([
 	`position:absolute;width:4px;height:4px;border-radius:50%;background:`,
 	`;box-shadow:0 0 6px `,
@@ -123,7 +124,7 @@ var StyledSparkle = styled.div.withConfig({
 ], ({ $color }) => $color, ({ $color }) => $color, ({ $left }) => $left, ({ $top }) => $top, sparkleFloat, ({ $delay }) => $delay);
 var StyledTextarea = styled.textarea.withConfig({
 	displayName: "chat-input__StyledTextarea",
-	componentId: "sc-d9366e15-5"
+	componentId: "sc-88c29886-5"
 })([
 	`position:relative;z-index:1;display:block;box-sizing:border-box;width:100%;resize:none;font-family:inherit;line-height:1.5;color:`,
 	`;background:`,
@@ -147,7 +148,7 @@ var StyledTextarea = styled.textarea.withConfig({
 ], theme.colors.primaryLight, theme.colors.primary, theme.colors.primaryLight, theme.colors.primary, theme.colors.primaryLight));
 var StyledSendButton = styled(Button).withConfig({
 	displayName: "chat-input__StyledSendButton",
-	componentId: "sc-d9366e15-6"
+	componentId: "sc-88c29886-6"
 })([`flex-shrink:0;`, `;min-height:0;position:relative;& svg,& .lucide{transition:none;position:absolute;inset:0;margin:auto;}`], formElementHeightStyles());
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function LocalChatInput({ value, onValueChange, onSend, $loading, $glow = false, $glowColors, $maxRows, placeholder = "Ask AI Assistant...", "aria-label": ariaLabel = "Ask a question", ...props }, ref) {
@@ -247,7 +248,7 @@ function LocalChatInput({ value, onValueChange, onSend, $loading, $glow = false,
 				type: "submit",
 				disabled: loading || !hasContent,
 				"aria-label": loading ? "Loading response" : "Submit question",
-				children: loading ? /*#__PURE__*/ jsx(Spinner, {}) : /*#__PURE__*/ jsx(Icon, { name: "ArrowUp" })
+				children: loading ? /*#__PURE__*/ jsx(Spinner, {}) : /*#__PURE__*/ jsx(Icon, { icon: ArrowUp })
 			})
 		]
 	});

package/dist/chat-launcher.js

@@ -6,6 +6,7 @@ import { ChatContext } from "./chat-provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import styled, { createGlobalStyle, css, keyframes } from "styled-components";
+import { Sparkles } from "lucide-react";
 //#region src/lib/chat-launcher.tsx
 var GLOW_COLORS = [
 	"#cc5555",
@@ -21,7 +22,7 @@ var pulseGlow = keyframes([`0%,100%{opacity:0.5;filter:blur(16px);}50%{opacity:1
 var conicStops = (colors) => [...colors, colors[0]].join(", ");
 var StyledChatLauncher = styled.button.withConfig({
 	displayName: "chat-launcher__StyledChatLauncher",
-	componentId: "sc-64539cc0-0"
+	componentId: "sc-61e3ed78-0"
 })([
 	``,
 	`;appearance:none;outline:none;cursor:pointer;box-sizing:border-box;height:30px;background:`,
@@ -68,7 +69,7 @@ function LocalChatLauncher({ children, $glow = false, $glowColors, onClick, "ari
 			}),
 			/*#__PURE__*/ jsx("span", {
 				className: "chat-launcher-inner",
-				children: children ?? /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(Icon, { name: "Sparkles" }), "Ask AI"] })
+				children: children ?? /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(Icon, { icon: Sparkles }), "Ask AI"] })
 			})
 		]
 	})] });

package/dist/chat-panel.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconProps } from './icon';
+import { IconSource } from './icon';
 export type ChatPanelVariant = "drawer" | "inline" | "fullscreen";
 export interface ChatPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -15,7 +15,8 @@ export interface ChatPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     $width?: number;
     /** Header title. Pass null to render no header text. */
     $title?: React.ReactNode;
-    $titleIcon?: IconProps | null;
+    /** Header icon: an imported lucide component, or a rendered element. Pass null for none. */
+    $titleIcon?: IconSource | null;
     /** Extra header controls (reset button, …), placed before the close button. */
     $actions?: React.ReactNode;
     $hideCloseButton?: boolean;

package/dist/chat-panel.js

@@ -3,18 +3,19 @@
 import { mq } from "./utils/theme.js";
 import { useLockBodyScroll } from "./utils/use-lock-body-scroll.js";
 import { useBelowBreakpoint } from "./utils/use-media-query.js";
-import { Icon } from "./icon.js";
+import { Icon, renderIcon } from "./icon.js";
 import { ChatContext } from "./chat-provider.js";
 import { IconButton } from "./icon-button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect, useRef } from "react";
 import styled, { css } from "styled-components";
+import { Sparkles, X } from "lucide-react";
 //#region src/lib/chat-panel.tsx
 var DEFAULT_WIDTH = 420;
 var FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
 var StyledChatPanel = styled.div.withConfig({
 	displayName: "chat-panel__StyledChatPanel",
-	componentId: "sc-701cc462-0"
+	componentId: "sc-82bb81a5-0"
 })([
 	`display:flex;flex-direction:column;background:`,
 	`;color:`,
@@ -40,7 +41,7 @@ var StyledChatPanel = styled.div.withConfig({
 		`;}`
 	], $side, !$isVisible && css([`transform:translateX(`, `);opacity:0;visibility:hidden;transition-delay:0s,0s,0.3s;`], $side === "left" ? "-100%" : "100%"), mq("lg"), $width, $side === "left" ? "right" : "left", theme.colors.grayLight);
 });
-function LocalChatPanel({ children, $variant = "drawer", $side = "right", $width = DEFAULT_WIDTH, $title = "AI Assistant", $titleIcon = "Sparkles", $actions, $hideCloseButton, "aria-label": ariaLabel, ...props }, ref) {
+function LocalChatPanel({ children, $variant = "drawer", $side = "right", $width = DEFAULT_WIDTH, $title = "AI Assistant", $titleIcon = Sparkles, $actions, $hideCloseButton, "aria-label": ariaLabel, ...props }, ref) {
 	const { isOpen, close, inputRef } = useContext(ChatContext);
 	const panelRef = useRef(null);
 	const isBelowLg = useBelowBreakpoint("lg");
@@ -145,14 +146,14 @@ function LocalChatPanel({ children, $variant = "drawer", $side = "right", $width
 			className: "chat-header",
 			children: [/*#__PURE__*/ jsxs("span", {
 				className: "chat-header-title",
-				children: [$titleIcon && /*#__PURE__*/ jsx(Icon, { name: $titleIcon }), $title !== null && /*#__PURE__*/ jsx("h3", { children: $title })]
+				children: [$titleIcon && renderIcon($titleIcon), $title !== null && /*#__PURE__*/ jsx("h3", { children: $title })]
 			}), /*#__PURE__*/ jsxs("span", {
 				className: "chat-header-actions",
 				children: [$actions, isOverlay && !$hideCloseButton && /*#__PURE__*/ jsx(IconButton, {
 					onClick: () => close(),
 					"aria-label": "Close chat",
 					title: "Close chat",
-					children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+					children: /*#__PURE__*/ jsx(Icon, { icon: X })
 				})]
 			})]
 		}), children]

package/dist/dropzone.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { Icon } from './icon';
+import { IconSource } from './icon';
 export type DropzoneRejectionReason = "type" | "size" | "count";
 export interface DropzoneRejection {
     file: File;
@@ -12,8 +12,8 @@ export interface DropzoneProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     $browse?: string;
     /** Optional smaller hint line (accepted types / limits). */
     $hint?: string;
-    /** Lucide icon shown in the rounded-square tile. */
-    $icon?: React.ComponentProps<typeof Icon>["name"];
+    /** Icon shown in the rounded-square tile: an imported lucide component, or a rendered element. */
+    $icon?: IconSource;
     /** Compact, flush variant: horizontal layout, tighter padding, and a
         transparent background so it sits on whatever surface it's embedded in
         (a form row, modal, or list) next to regular inputs. */

package/dist/dropzone.js

@@ -2,10 +2,11 @@
 "use client";
 import { mq } from "./utils/theme.js";
 import { alpha, resetButton } from "./utils/mixins.js";
-import { Icon } from "./icon.js";
+import { Icon, renderIcon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import styled, { css } from "styled-components";
+import { File, FileUp, X } from "lucide-react";
 //#region src/lib/dropzone.tsx
 /** Matches a file against an `accept` string (".pdf,image/*,text/plain"),
 mirroring the native file-picker filter for dropped files. */ var matchesAccept = (file, accept) => {
@@ -18,7 +19,7 @@ mirroring the native file-picker filter for dropped files. */ var matchesAccept
 		return file.type.toLowerCase() === entry;
 	});
 };
-function LocalDropzone({ $prompt = "Drag & drop files here", $browse, $hint, $icon = "FileUp", $inline, $maxFiles, $maxBytes, onFilesChange, onFilesRejected, accept, multiple, disabled, ...rest }, ref) {
+function LocalDropzone({ $prompt = "Drag & drop files here", $browse, $hint, $icon = FileUp, $inline, $maxFiles, $maxBytes, onFilesChange, onFilesRejected, accept, multiple, disabled, ...rest }, ref) {
 	const [items, setItems] = useState([]);
 	const [dragOver, setDragOver] = useState(false);
 	const inputRef = useRef(null);
@@ -111,7 +112,7 @@ function LocalDropzone({ $prompt = "Drag & drop files here", $browse, $hint, $ic
 			children: [
 				/*#__PURE__*/ jsx(StyledDropIcon, {
 					$inline,
-					children: /*#__PURE__*/ jsx(Icon, { name: $icon })
+					children: renderIcon($icon)
 				}),
 				/*#__PURE__*/ jsxs(StyledDropPrompt, {
 					$inline,
@@ -141,12 +142,12 @@ function LocalDropzone({ $prompt = "Drag & drop files here", $browse, $hint, $ic
 			children: [item.previewUrl ? /*#__PURE__*/ jsx("img", {
 				src: item.previewUrl,
 				alt: item.file.name
-			}) : /*#__PURE__*/ jsxs(StyledThumbFile, { children: [/*#__PURE__*/ jsx(Icon, { name: "File" }), /*#__PURE__*/ jsx("span", { children: item.file.name })] }), /*#__PURE__*/ jsx(StyledThumbRemove, {
+			}) : /*#__PURE__*/ jsxs(StyledThumbFile, { children: [/*#__PURE__*/ jsx(Icon, { icon: File }), /*#__PURE__*/ jsx("span", { children: item.file.name })] }), /*#__PURE__*/ jsx(StyledThumbRemove, {
 				type: "button",
 				"aria-label": `Remove ${item.file.name}`,
 				onClick: () => removeItem(item.key),
 				disabled,
-				children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+				children: /*#__PURE__*/ jsx(Icon, { icon: X })
 			})]
 		}, item.key)) })
 	] });
@@ -154,11 +155,11 @@ function LocalDropzone({ $prompt = "Drag & drop files here", $browse, $hint, $ic
 var Dropzone = /*#__PURE__*/ forwardRef(LocalDropzone);
 var StyledDropzoneWrapper = styled.div.withConfig({
 	displayName: "dropzone__StyledDropzoneWrapper",
-	componentId: "sc-a5a0875f-0"
+	componentId: "sc-1391bc72-0"
 })([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
 var StyledDropzone = styled.button.withConfig({
 	displayName: "dropzone__StyledDropzone",
-	componentId: "sc-a5a0875f-1"
+	componentId: "sc-1391bc72-1"
 })([
 	``,
 	`;font-family:inherit;display:flex;flex-direction:`,
@@ -183,7 +184,7 @@ var StyledDropzone = styled.button.withConfig({
 ], theme.colors.primary, alpha(theme.colors.primary, theme.isDark ? 12 : 5), alpha(theme.colors.primary, 12)), ({ theme }) => theme.colors.primary, ({ theme }) => alpha(theme.colors.primary, theme.isDark ? 10 : 4), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
 var StyledDropIcon = styled.span.withConfig({
 	displayName: "dropzone__StyledDropIcon",
-	componentId: "sc-a5a0875f-2"
+	componentId: "sc-1391bc72-2"
 })([
 	`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
 	`;height:`,
@@ -197,7 +198,7 @@ var StyledDropIcon = styled.span.withConfig({
 ], ({ $inline }) => $inline ? "32px" : "44px", ({ $inline }) => $inline ? "32px" : "44px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "18px" : "22px", ({ $inline }) => $inline ? "18px" : "22px");
 var StyledDropPrompt = styled.span.withConfig({
 	displayName: "dropzone__StyledDropPrompt",
-	componentId: "sc-a5a0875f-3"
+	componentId: "sc-1391bc72-3"
 })([
 	`display:flex;flex-direction:`,
 	`;flex-wrap:wrap;align-items:baseline;gap:`,
@@ -209,7 +210,7 @@ var StyledDropPrompt = styled.span.withConfig({
 ], ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "0 6px" : "2px", ({ theme }) => theme.fontSizes.text.xs, ({ theme }) => theme.lineHeights.text.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayDark);
 var StyledDropHint = styled.span.withConfig({
 	displayName: "dropzone__StyledDropHint",
-	componentId: "sc-a5a0875f-4"
+	componentId: "sc-1391bc72-4"
 })([
 	`font-family:inherit;font-size:`,
 	`;line-height:`,
@@ -219,11 +220,11 @@ var StyledDropHint = styled.span.withConfig({
 ], ({ theme }) => theme.fontSizes.small.xs, ({ theme }) => theme.lineHeights.small.xs, ({ theme }) => theme.colors.gray, ({ $inline }) => $inline && css([`margin-left:auto;`]));
 var StyledThumbs = styled.div.withConfig({
 	displayName: "dropzone__StyledThumbs",
-	componentId: "sc-a5a0875f-5"
+	componentId: "sc-1391bc72-5"
 })([`display:grid;grid-template-columns:repeat(auto-fill,72px);gap:10px;`, `{grid-template-columns:repeat(auto-fill,84px);}`], mq("sm"));
 var StyledThumb = styled.div.withConfig({
 	displayName: "dropzone__StyledThumb",
-	componentId: "sc-a5a0875f-6"
+	componentId: "sc-1391bc72-6"
 })([
 	`position:relative;width:72px;height:72px;border-radius:`,
 	`;overflow:hidden;border:solid 1px `,
@@ -233,7 +234,7 @@ var StyledThumb = styled.div.withConfig({
 ], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, mq("sm"));
 var StyledThumbFile = styled.span.withConfig({
 	displayName: "dropzone__StyledThumbFile",
-	componentId: "sc-a5a0875f-7"
+	componentId: "sc-1391bc72-7"
 })([
 	`display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;padding:6px;color:`,
 	`;& svg{width:20px;height:20px;color:`,
@@ -241,7 +242,7 @@ var StyledThumbFile = styled.span.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.primary);
 var StyledThumbRemove = styled.button.withConfig({
 	displayName: "dropzone__StyledThumbRemove",
-	componentId: "sc-a5a0875f-8"
+	componentId: "sc-1391bc72-8"
 })([
 	``,
 	`;position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#ffffff;background:`,

package/dist/icon-dynamic.d.ts

@@ -0,0 +1,24 @@
+import { IconName as LucideDynamicName } from 'lucide-react/dynamic';
+import { icons } from 'lucide-react';
+/**
+ * A lucide icon referenced by name: the PascalCase export name
+ * (`"ArrowRight"`) or lucide's own kebab-case id (`"arrow-right"`).
+ */
+export type IconName = keyof typeof icons | LucideDynamicName;
+export interface DynamicIconProps {
+    /** The icon, by name. An unknown name renders nothing. */
+    name: IconName;
+    color?: string;
+    size?: number;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * 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} />}`.
+ */
+export declare function DynamicIcon({ name, "aria-label": ariaLabel, ...props }: DynamicIconProps): import("react").JSX.Element | null;

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

@@ -8,7 +8,7 @@ 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 { 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";
@@ -44,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, 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/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.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/toggle.js

@@ -8,11 +8,11 @@ import styled from "styled-components";
 //#region src/lib/toggle.tsx
 var StyledToggleWrapper = styled.span.withConfig({
 	displayName: "toggle__StyledToggleWrapper",
-	componentId: "sc-279a0aa6-0"
+	componentId: "sc-aa895e38-0"
 })([`display:inline-block;margin:auto 0;position:relative;vertical-align:middle;`]);
 var StyledFakeToggle = styled.span.withConfig({
 	displayName: "toggle__StyledFakeToggle",
-	componentId: "sc-279a0aa6-1"
+	componentId: "sc-aa895e38-1"
 })([
 	`display:block;border:solid 2px `,
 	`;background:`,
@@ -32,7 +32,7 @@ var StyledFakeToggle = styled.span.withConfig({
 }, ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px", ({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px");
 var StyledToggle = styled.input.withConfig({
 	displayName: "toggle__StyledToggle",
-	componentId: "sc-279a0aa6-2"
+	componentId: "sc-aa895e38-2"
 })([
 	``,
 	`;position:absolute;left:0;top:0;width:100%;height:100%;outline:none;z-index:10;&:checked ~ .fake-toggle{&::before{max-width:46px;background:`,
@@ -41,21 +41,11 @@ var StyledToggle = styled.input.withConfig({
 	`;}&:focus:not([disabled]) ~ .fake-toggle{outline:none;border-color:`,
 	`;box-shadow:0 0 0 4px `,
 	`;}&:active:not([disabled]) ~ .fake-toggle{box-shadow:0 0 0 2px `,
-	`;}`,
-	``
-], resetButton, ({ theme }) => theme.colors.primaryLight, ({ $size }) => $size === "big" ? "25px" : $size === "small" ? "20px" : "25px", ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ disabled, theme }) => disabled && `cursor: not-allowed;
-
-		& ~ .fake-toggle {
-			border-color: ${theme.colors.gray};
-
-			&::before {
-				background: ${theme.colors.grayLight};
-			}
-
-			&::after {
-				background: ${theme.colors.gray};
-			}
-		}`);
+	`;}&:disabled{cursor:not-allowed;}&:disabled ~ .fake-toggle,&:disabled:checked ~ .fake-toggle{border-color:`,
+	`;&::before{background:`,
+	`;}&::after{background:`,
+	`;}}`
+], resetButton, ({ theme }) => theme.colors.primaryLight, ({ $size }) => $size === "big" ? "25px" : $size === "small" ? "20px" : "25px", ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.gray);
 function LocalToggle({ type = "checkbox", ...props }, ref) {
 	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -14,6 +14,10 @@
     "./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": [
@@ -24,7 +28,7 @@
   "homepage": "https://cherry.al",
   "repository": "https://github.com/cherry-design-system/styled-components",
   "license": "MIT",
-  "packageManager": "pnpm@11.21.0",
+  "packageManager": "pnpm@12.4.1",
   "engines": {
     "node": ">=18.0.0"
   },
@@ -48,33 +52,32 @@
     "format:check": "prettier --check .",
     "screenshots": "node scripts/screenshot-previews.cjs"
   },
-  "dependencies": {
-    "lucide-react": "^1.31.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.19.0",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@swc/plugin-styled-components": "^14.0.0",
+    "@types/node": "^26.4.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@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.4",
-    "next": "^16.3.1",
-    "playwright-core": "^1.62.1",
+    "eslint-plugin-react-refresh": "^0.5.6",
+    "lucide-react": "^1.44.0",
+    "next": "^16.3.4",
+    "playwright-core": "^1.63.0",
     "prettier": "^3.9.6",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "sharp": "^0.35.3",
-    "styled-components": "^6.5.2",
+    "sharp": "^0.35.4",
+    "styled-components": "^6.5.3",
     "typescript": "^7.0.2",
-    "vite": "^8.2.1",
-    "vite-plugin-dts": "^5.0.3"
+    "vite": "^8.3.0",
+    "vite-plugin-dts": "^5.1.0"
   }
 }