cherry-styled-components 0.2.15 → 0.2.17

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.
@@ -100,11 +102,10 @@ A Next.js App Router setup looks like this:
 ```tsx
 // app/layout.tsx (server component)
 import { cookies } from "next/headers";
-import {
-  ClientThemeProvider,
-  StyledComponentsRegistry,
-  themeInitScript,
-} from "cherry-styled-components";
+// StyledComponentsRegistry is the one export that depends on Next, so it ships
+// from the `/next` subpath instead of the package root.
+import { StyledComponentsRegistry } from "cherry-styled-components/next";
+import { ClientThemeProvider, themeInitScript } from "cherry-styled-components";
 import { theme, themeDark } from "./theme";
 
 export default async function RootLayout({ children }) {

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;