cherry-styled-components 0.2.12 → 0.2.13

package/dist/chat-showcase.js

@@ -0,0 +1,234 @@
+"use client";
+"use client";
+import { Avatar } from "./avatar.js";
+import { Callout } from "./callout.js";
+import { ChatSource, ChatSources } from "./chat-sources.js";
+import { ChatTyping } from "./chat-typing.js";
+import { Prose } from "./prose.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import styled from "styled-components";
+//#region src/lib/chat-showcase.tsx
+var StyledStack = styled.div.withConfig({
+	displayName: "chat-showcase__StyledStack",
+	componentId: "sc-37301b14-0"
+})([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
+var StyledRow = styled.div.withConfig({
+	displayName: "chat-showcase__StyledRow",
+	componentId: "sc-37301b14-1"
+})([`display:flex;align-items:center;gap:12px;flex-wrap:wrap;`]);
+var CATALOG = [
+	{
+		group: "Form",
+		components: [
+			"Button",
+			"IconButton",
+			"Input (Checkbox / Radio via type)",
+			"Select",
+			"Textarea",
+			"Toggle",
+			"Range",
+			"Password",
+			"Dropzone",
+			"AvatarDropzone"
+		]
+	},
+	{
+		group: "Layout",
+		components: [
+			"Container",
+			"Grid",
+			"Col",
+			"Flex",
+			"Box",
+			"MaxWidth",
+			"Space"
+		]
+	},
+	{
+		group: "Interactive",
+		components: [
+			"Accordion",
+			"Tabs",
+			"Modal",
+			"Toast",
+			"ThemeToggle",
+			"Icon"
+		]
+	},
+	{
+		group: "Content",
+		components: [
+			"Prose",
+			"Callout",
+			"Avatar"
+		]
+	},
+	{
+		group: "Chat",
+		components: [
+			"ChatProvider",
+			"ChatPanel",
+			"ChatMessageList",
+			"ChatMessage",
+			"ChatInput",
+			"ChatLauncher",
+			"ChatTyping",
+			"ChatSources"
+		]
+	}
+];
+function HelpReply() {
+	return /*#__PURE__*/ jsxs(Prose, {
+		$compact: true,
+		children: [/*#__PURE__*/ jsx("p", { children: "Here is what I can render:" }), /*#__PURE__*/ jsx("ul", { children: showcaseCommands.map((command) => /*#__PURE__*/ jsxs("li", { children: [
+			/*#__PURE__*/ jsx("code", { children: command.name }),
+			" — ",
+			command.description
+		] }, command.name)) })]
+	});
+}
+function ListReply() {
+	return /*#__PURE__*/ jsxs(Prose, {
+		$compact: true,
+		children: [/*#__PURE__*/ jsx("p", { children: "The Cherry component catalog:" }), CATALOG.map(({ group, components }) => /*#__PURE__*/ jsxs(React.Fragment, { children: [/*#__PURE__*/ jsx("h6", { children: group }), /*#__PURE__*/ jsx("ul", { children: components.map((component) => /*#__PURE__*/ jsx("li", { children: component }, component)) })] }, group))]
+	});
+}
+function CalloutReply() {
+	return /*#__PURE__*/ jsxs(StyledStack, { children: [
+		/*#__PURE__*/ jsx(Callout, {
+			$type: "note",
+			children: /*#__PURE__*/ jsx("p", { children: "A note callout for supplementary details." })
+		}),
+		/*#__PURE__*/ jsx(Callout, {
+			$type: "info",
+			children: /*#__PURE__*/ jsx("p", { children: "An info callout for neutral information." })
+		}),
+		/*#__PURE__*/ jsx(Callout, {
+			$type: "warning",
+			children: /*#__PURE__*/ jsx("p", { children: "A warning callout for things to watch out for." })
+		}),
+		/*#__PURE__*/ jsx(Callout, {
+			$type: "danger",
+			children: /*#__PURE__*/ jsx("p", { children: "A danger callout for destructive outcomes." })
+		}),
+		/*#__PURE__*/ jsx(Callout, {
+			$type: "success",
+			children: /*#__PURE__*/ jsx("p", { children: "A success callout for confirmations." })
+		})
+	] });
+}
+function AvatarReply() {
+	return /*#__PURE__*/ jsxs(StyledRow, { children: [
+		/*#__PURE__*/ jsx(Avatar, {
+			$size: "small",
+			$name: "Ada Lovelace"
+		}),
+		/*#__PURE__*/ jsx(Avatar, {
+			$name: "Cherry",
+			$color: "secondary"
+		}),
+		/*#__PURE__*/ jsx(Avatar, {
+			$size: "big",
+			$color: "tertiary",
+			$alt: "Assistant"
+		})
+	] });
+}
+function ProseReply() {
+	return /*#__PURE__*/ jsxs(Prose, {
+		$compact: true,
+		children: [
+			/*#__PURE__*/ jsx("h5", { children: "Rendered markdown" }),
+			/*#__PURE__*/ jsxs("p", { children: [
+				"Prose styles ",
+				/*#__PURE__*/ jsx("a", {
+					href: "#",
+					children: "links"
+				}),
+				", lists, tables and",
+				" ",
+				/*#__PURE__*/ jsx("code", { children: "inline code" }),
+				" with Cherry typography."
+			] }),
+			/*#__PURE__*/ jsxs("ul", { children: [/*#__PURE__*/ jsx("li", { children: "First item" }), /*#__PURE__*/ jsx("li", { children: "Second item" })] }),
+			/*#__PURE__*/ jsx("div", {
+				className: "table-wrapper",
+				children: /*#__PURE__*/ jsxs("table", { children: [/*#__PURE__*/ jsx("thead", { children: /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("th", { children: "Prop" }), /*#__PURE__*/ jsx("th", { children: "Default" })] }) }), /*#__PURE__*/ jsx("tbody", { children: /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("td", { children: "$compact" }), /*#__PURE__*/ jsx("td", { children: "false" })] }) })] })
+			})
+		]
+	});
+}
+function SourcesReply() {
+	return /*#__PURE__*/ jsxs(StyledStack, { children: [/*#__PURE__*/ jsx(Prose, {
+		$compact: true,
+		children: /*#__PURE__*/ jsx("p", { children: "Source chips link an answer back to where it came from:" })
+	}), /*#__PURE__*/ jsxs(ChatSources, { children: [
+		/*#__PURE__*/ jsx(ChatSource, {
+			href: "#",
+			children: "Getting Started"
+		}),
+		/*#__PURE__*/ jsx(ChatSource, {
+			href: "#",
+			children: "Theming"
+		}),
+		/*#__PURE__*/ jsx(ChatSource, {
+			href: "#",
+			children: "Chat Kit"
+		})
+	] })] });
+}
+function TypingReply() {
+	return /*#__PURE__*/ jsxs(StyledStack, { children: [/*#__PURE__*/ jsx(Prose, {
+		$compact: true,
+		children: /*#__PURE__*/ jsx("p", { children: "The typing indicator shown while a reply is on its way:" })
+	}), /*#__PURE__*/ jsx(ChatTyping, {})] });
+}
+var showcaseCommands = [
+	{
+		name: "help",
+		description: "list these commands",
+		render: () => /*#__PURE__*/ jsx(HelpReply, {})
+	},
+	{
+		name: "list",
+		description: "the full Cherry component catalog",
+		render: () => /*#__PURE__*/ jsx(ListReply, {})
+	},
+	{
+		name: "callout",
+		description: "the five callout intents",
+		render: () => /*#__PURE__*/ jsx(CalloutReply, {})
+	},
+	{
+		name: "avatar",
+		description: "avatars with initials and icon fallbacks",
+		render: () => /*#__PURE__*/ jsx(AvatarReply, {})
+	},
+	{
+		name: "prose",
+		description: "markdown-style content with Cherry typography",
+		render: () => /*#__PURE__*/ jsx(ProseReply, {})
+	},
+	{
+		name: "sources",
+		description: "the source-chip row",
+		render: () => /*#__PURE__*/ jsx(SourcesReply, {})
+	},
+	{
+		name: "typing",
+		description: "the three-dot typing indicator",
+		render: () => /*#__PURE__*/ jsx(TypingReply, {})
+	}
+];
+/**
+* Matches a chat question against the showcase commands ("help", "/help" and
+* any casing all work) and returns the rendered demo, or null when the input
+* is not a command and should go to the transport.
+*/ function resolveShowcaseCommand(input) {
+	const name = input.trim().toLowerCase().replace(/^\//, "");
+	const command = showcaseCommands.find((entry) => entry.name === name);
+	return command ? command.render() : null;
+}
+//#endregion
+export { resolveShowcaseCommand, showcaseCommands };

package/dist/chat-sources.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ChatSourcesProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export interface ChatSourceProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: React.ReactNode;
+}
+declare const ChatSources: React.ForwardRefExoticComponent<ChatSourcesProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChatSource: React.ForwardRefExoticComponent<ChatSourceProps & React.RefAttributes<HTMLAnchorElement>>;
+export { ChatSource, ChatSources };

package/dist/chat-sources.js

@@ -0,0 +1,41 @@
+"use client";
+"use client";
+import { alpha, interactiveStyles } from "./utils/mixins.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+//#region src/lib/chat-sources.tsx
+var StyledChatSources = styled.div.withConfig({
+	displayName: "chat-sources__StyledChatSources",
+	componentId: "sc-7fa69b52-0"
+})([`display:flex;gap:16px;flex-wrap:wrap;`]);
+var StyledChatSource = styled.a.withConfig({
+	displayName: "chat-sources__StyledChatSource",
+	componentId: "sc-7fa69b52-1"
+})([
+	`position:relative;text-decoration:none;font-size:`,
+	`;line-height:1;color:`,
+	`;display:flex;align-items:center;gap:6px;transition:all 0.3s ease;font-weight:600;white-space:nowrap;min-width:fit-content;background:`,
+	`;padding:6px 8px;border-radius:`,
+	`;`,
+	`;& svg{width:14px;height:14px;flex-shrink:0;}&:hover{color:`,
+	`;}`
+], ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.colors.primary, ({ theme }) => alpha(theme.colors.primaryLight, 10), ({ theme }) => theme.spacing.radius.xs, interactiveStyles, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark);
+function LocalChatSources({ children, ...props }, ref) {
+	return /*#__PURE__*/ jsx(StyledChatSources, {
+		...props,
+		ref,
+		children
+	});
+}
+function LocalChatSource({ children, ...props }, ref) {
+	return /*#__PURE__*/ jsx(StyledChatSource, {
+		...props,
+		ref,
+		children
+	});
+}
+var ChatSources = /*#__PURE__*/ forwardRef(LocalChatSources);
+var ChatSource = /*#__PURE__*/ forwardRef(LocalChatSource);
+//#endregion
+export { ChatSource, ChatSources };

package/dist/chat-typing.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface ChatTypingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The label before the dots. */
+    children?: React.ReactNode;
+}
+declare const ChatTyping: React.ForwardRefExoticComponent<ChatTypingProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatTyping };

package/dist/chat-typing.js

@@ -0,0 +1,44 @@
+"use client";
+"use client";
+import { chatTextStyles } from "./chat-message.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled, { keyframes } from "styled-components";
+//#region src/lib/chat-typing.tsx
+var dotFade = keyframes([`0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}`]);
+var StyledChatTyping = styled.div.withConfig({
+	displayName: "chat-typing__StyledChatTyping",
+	componentId: "sc-ef02cd3b-0"
+})([
+	`width:100%;font-weight:600;color:`,
+	`;`,
+	`;& .chat-typing-dot{animation:`,
+	` 1s ease infinite;&:nth-child(2){animation-delay:0.2s;}&:nth-child(3){animation-delay:0.4s;}}@media (prefers-reduced-motion:reduce){& .chat-typing-dot{animation:none;}}`
+], ({ theme }) => theme.colors.dark, ({ theme }) => chatTextStyles(theme), dotFade);
+function LocalChatTyping({ children = "Answering", ...props }, ref) {
+	return /*#__PURE__*/ jsxs(StyledChatTyping, {
+		role: "status",
+		...props,
+		ref,
+		children: [children, /*#__PURE__*/ jsxs("span", {
+			"aria-hidden": "true",
+			children: [
+				/*#__PURE__*/ jsx("span", {
+					className: "chat-typing-dot",
+					children: "."
+				}),
+				/*#__PURE__*/ jsx("span", {
+					className: "chat-typing-dot",
+					children: "."
+				}),
+				/*#__PURE__*/ jsx("span", {
+					className: "chat-typing-dot",
+					children: "."
+				})
+			]
+		})]
+	});
+}
+var ChatTyping = /*#__PURE__*/ forwardRef(LocalChatTyping);
+//#endregion
+export { ChatTyping };

package/dist/index.d.ts

@@ -1,9 +1,20 @@
 export * from './styled-components';
 export * from './utils';
 export * from './accordion';
+export * from './avatar';
 export * from './avatar-dropzone';
 export * from './box';
 export * from './button';
+export * from './callout';
+export * from './chat-input';
+export * from './chat-launcher';
+export * from './chat-message';
+export * from './chat-message-list';
+export * from './chat-panel';
+export * from './chat-provider';
+export * from './chat-showcase';
+export * from './chat-sources';
+export * from './chat-typing';
 export * from './col';
 export * from './container';
 export * from './dropzone';
@@ -15,9 +26,11 @@ export * from './input';
 export * from './max-width';
 export * from './modal';
 export * from './password';
+export * from './prose';
 export * from './range';
 export * from './select';
 export * from './space';
+export * from './spinner';
 export * from './tabs';
 export * from './textarea';
 export * from './theme-toggle';

package/dist/index.js

@@ -1,7 +1,9 @@
 import { GlobalStyles } from "./utils/global.js";
 import { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark } from "./utils/theme.js";
-import { alpha, errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, shade, statusBorderStyles, tint } from "./utils/mixins.js";
+import { alpha, darkFilledTextRule, errorInteractiveStyles, filledTextColor, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, shade, statusBorderStyles, thinScrollbar, tint } from "./utils/mixins.js";
 import { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText } from "./utils/typography.js";
+import { useLockBodyScroll } from "./utils/use-lock-body-scroll.js";
+import { useBelowBreakpoint, useMediaQuery } from "./utils/use-media-query.js";
 import { useOnClickOutside } from "./utils/use-on-click-outside.js";
 import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
 import { ClientThemeProvider } from "./styled-components/client-theme-provider.js";
@@ -9,15 +11,28 @@ import { StyledComponentsRegistry } from "./styled-components/registry.js";
 import { createThemeInitScript, resolveTheme, themeInitScript } from "./styled-components/theme-init.js";
 import { Icon } from "./icon.js";
 import { Accordion } from "./accordion.js";
+import { Avatar } from "./avatar.js";
 import { Dropzone, matchesAccept } from "./dropzone.js";
 import { AvatarDropzone } from "./avatar-dropzone.js";
 import { Container } from "./container.js";
 import { Box } from "./box.js";
 import { Button, buttonStyles } from "./button.js";
+import { Callout } from "./callout.js";
+import { ChatSource, ChatSources } from "./chat-sources.js";
+import { ChatMessage, chatTextStyles } from "./chat-message.js";
+import { ChatTyping } from "./chat-typing.js";
+import { Prose, proseStyles } from "./prose.js";
+import { resolveShowcaseCommand, showcaseCommands } from "./chat-showcase.js";
+import { ChatContext, ChatProvider, useChat } from "./chat-provider.js";
+import { Spinner } from "./spinner.js";
+import { ChatInput } from "./chat-input.js";
+import { ChatLauncher } from "./chat-launcher.js";
+import { ChatMessageList } from "./chat-message-list.js";
+import { IconButton, iconButtonStyles } from "./icon-button.js";
+import { ChatPanel } from "./chat-panel.js";
 import { Col } from "./col.js";
 import { Flex } from "./flex.js";
 import { Grid } from "./grid.js";
-import { IconButton, iconButtonStyles } from "./icon-button.js";
 import { Input, StyledInputWrapper, StyledLabel } from "./input.js";
 import { MaxWidth } from "./max-width.js";
 import { Modal } from "./modal.js";
@@ -30,4 +45,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, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, alpha, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shade, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, tint, 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, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, alpha, breakpoints, buttonStyles, chatTextStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, darkFilledTextRule, errorInteractiveStyles, filledTextColor, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, proseStyles, resetButton, resetInput, resolveShowcaseCommand, resolveTheme, shade, shadows, shadowsDark, showcaseCommands, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, thinScrollbar, tint, useBelowBreakpoint, useChat, useLockBodyScroll, useMediaQuery, useOnClickOutside, useToastNotifications };

package/dist/prose.d.ts

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

package/dist/prose.js

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

package/dist/spinner.d.ts

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

package/dist/spinner.js

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

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

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { ThemeProvider } from "styled-components";
 //#region src/lib/styled-components/client-theme-provider.tsx
-var THEME_COOKIE_MAX_AGE = 3600 * 24 * 365;
+var THEME_COOKIE_MAX_AGE = 31536e3;
 function readThemeCookie() {
 	const cookie = document.cookie.split(";").map((c) => c.trim()).find((c) => c.startsWith("theme="));
 	const value = cookie ? cookie.split("=")[1] : void 0;

package/dist/toast.d.ts

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

package/dist/utils/index.d.ts

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

package/dist/utils/mixins.d.ts

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

package/dist/utils/mixins.js

@@ -11,6 +11,21 @@ import { css } from "styled-components";
 /** Darkens a color by mixing it toward black. See `alpha` for why it is CSS. */ var shade = (color, percent) => `color-mix(in srgb, ${color} ${100 - percent}%, black)`;
 /** Lightens a color by mixing it toward white. See `alpha` for why it is CSS. */ var tint = (color, percent) => `color-mix(in srgb, ${color} ${100 - percent}%, white)`;
 /**
+* Text color for a label sitting on a brand-colored fill: the palette's
+* contrasting end, `light` in light mode and `dark` in dark mode.
+*/ var filledTextColor = (theme) => theme.isDark ? theme.colors.dark : theme.colors.light;
+/**
+* The same choice restated as a rule scoped to a `dark` class on <html>, which
+* is what apps resolving the mode in CSS key off before hydration can swap the
+* theme object. Additive: with an already-dark theme object both paths resolve
+* to the same color. Interpolate alongside `filledTextColor`.
+*/ var darkFilledTextRule = (theme) => `:root.dark & { color: ${theme.colors.dark}; }`;
+/**
+* Slim, theme-aware scrollbar for internal scroll areas (chat transcripts, code
+* blocks, tables) so the chunky native bar doesn't stand out, especially in
+* dark mode.
+*/ var thinScrollbar = css([`scrollbar-width:thin;scrollbar-color:`, ` transparent;`], ({ theme }) => theme.colors.grayLight);
+/**
 * Hover/focus/active affordance for interactive surfaces (cards, tiles,
 * links-as-blocks): a transparent 1px border that picks up the primary color
 * on hover, with a soft focus ring. Pair with resetButton for clickable
@@ -90,4 +105,4 @@ var generateDirectionStyles = (size, direction) => css([
 	`;}`
 ], mq(size), direction && `${direction}`);
 //#endregion
-export { alpha, errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, shade, statusBorderStyles, tint };
+export { alpha, darkFilledTextRule, errorInteractiveStyles, filledTextColor, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, shade, statusBorderStyles, thinScrollbar, tint };

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

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