cherry-styled-components 0.1.18 → 0.1.19

package/dist/accordion.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onToggle"> {
+    children: React.ReactNode;
+    title: React.ReactNode;
+    onToggle?: (isOpen: boolean) => void;
+    $inline?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
+}
+declare function Accordion({ children, title, onToggle, $inline, defaultOpen, open, ...rest }: AccordionProps): React.JSX.Element;
+export { Accordion };

package/dist/accordion.js

@@ -0,0 +1,88 @@
+"use client";
+"use client";
+import { styledText } from "./utils/typography.js";
+import { Icon } from "./icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/accordion.tsx
+var StyledAccordion = styled.div.withConfig({
+	displayName: "accordion__StyledAccordion",
+	componentId: "sc-4007375b-0"
+})([
+	`text-align:left;border-radius:`,
+	`;margin:0;`,
+	`;width:100%;background:`,
+	`;`,
+	``
+], ({ 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.h3.withConfig({
+	displayName: "accordion__StyledAccordionTitle",
+	componentId: "sc-4007375b-1"
+})([
+	`cursor:pointer;margin:0;`,
+	`;color:`,
+	`;transition:color 0.3s ease;position:relative;padding:`,
+	`;&:hover{color:`,
+	`;}& .lucide-chevron-down{position:absolute;top:50%;transform:translateY(-50%);right:`,
+	`;transition:transform 0.3s ease;`,
+	`}`
+], ({ theme }) => styledText(theme), ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "8px 40px 8px 0" : "20px 50px 20px 20px", ({ theme }) => theme.colors.primaryDark, ({ $inline }) => $inline ? "0" : "20px", ({ $isOpen }) => $isOpen && css([`transform:translateY(-50%) rotate(180deg);`]));
+var StyledAccordionContent = styled.div.withConfig({
+	displayName: "accordion__StyledAccordionContent",
+	componentId: "sc-4007375b-2"
+})([
+	`display:grid;grid-template-rows:`,
+	`;visibility:`,
+	`;transition:grid-template-rows 0.3s cubic-bezier(0.4,0,0.2,1),visibility 0.3s;@media (prefers-reduced-motion:reduce){transition:none;}`
+], ({ $isOpen }) => $isOpen ? "1fr" : "0fr", ({ $isOpen }) => $isOpen ? "visible" : "hidden");
+var StyledAccordionInner = styled.div.withConfig({
+	displayName: "accordion__StyledAccordionInner",
+	componentId: "sc-4007375b-3"
+})([`min-height:0;overflow:clip;`]);
+var StyledAccordionBody = styled.div.withConfig({
+	displayName: "accordion__StyledAccordionBody",
+	componentId: "sc-4007375b-4"
+})([
+	``,
+	`;color:`,
+	`;padding:`,
+	`;opacity:`,
+	`;transform:translateY(`,
+	`);transition:opacity 0.3s ease,transform 0.3s cubic-bezier(0.4,0,0.2,1);@media (prefers-reduced-motion:reduce){transform:none;transition:none;}`
+], ({ theme }) => styledText(theme), ({ theme }) => theme.colors.grayDark, ({ $inline }) => $inline ? "0 0 12px" : "0 20px 20px", ({ $isOpen }) => $isOpen ? 1 : 0, ({ $isOpen }) => $isOpen ? 0 : "-6px");
+function Accordion({ children, title, onToggle, $inline, defaultOpen, open, ...rest }) {
+	const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+	const isControlled = open !== void 0;
+	const isOpen = isControlled ? open : internalOpen;
+	const handleToggle = () => {
+		const next = !isOpen;
+		if (!isControlled) setInternalOpen(next);
+		onToggle?.(next);
+	};
+	return /*#__PURE__*/ jsxs(StyledAccordion, {
+		$inline,
+		...rest,
+		children: [/*#__PURE__*/ jsxs(StyledAccordionTitle, {
+			onClick: handleToggle,
+			$isOpen: isOpen,
+			$inline,
+			role: "button",
+			"aria-expanded": isOpen,
+			children: [
+				title,
+				" ",
+				/*#__PURE__*/ jsx(Icon, { name: "ChevronDown" })
+			]
+		}), /*#__PURE__*/ jsx(StyledAccordionContent, {
+			$isOpen: isOpen,
+			children: /*#__PURE__*/ jsx(StyledAccordionInner, { children: /*#__PURE__*/ jsx(StyledAccordionBody, {
+				$isOpen: isOpen,
+				$inline,
+				children
+			}) })
+		})]
+	});
+}
+//#endregion
+export { Accordion };

package/dist/avatar-dropzone.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { DropzoneRejection } from './dropzone';
+import { Icon } 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"];
+    /** Maximum file size in bytes. */
+    $maxBytes?: number;
+    /** Accessible label for the drop target. */
+    "aria-label"?: string;
+    /** Called with the selected picture, or null when it is removed. */
+    onFileChange?: (file: File | null) => void;
+    /** Called when a file is rejected (wrong type or too big). */
+    onFileRejected?: (rejection: DropzoneRejection) => void;
+}
+declare const AvatarDropzone: React.ForwardRefExoticComponent<AvatarDropzoneProps & React.RefAttributes<HTMLInputElement>>;
+export { AvatarDropzone };

package/dist/avatar-dropzone.js

@@ -0,0 +1,157 @@
+"use client";
+"use client";
+import { resetButton } from "./utils/mixins.js";
+import { Icon } 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 { rgba } from "polished";
+//#region src/lib/avatar-dropzone.tsx
+var avatarSizes = {
+	small: {
+		box: 64,
+		icon: 20
+	},
+	default: {
+		box: 96,
+		icon: 24
+	},
+	big: {
+		box: 128,
+		icon: 28
+	}
+};
+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);
+	useImperativeHandle(ref, () => inputRef.current);
+	const previewUrlRef = useRef(null);
+	previewUrlRef.current = previewUrl;
+	useEffect(() => {
+		return () => {
+			if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+		};
+	}, []);
+	const setFile = (fileList) => {
+		if (!fileList || fileList.length === 0 || disabled) return;
+		const file = fileList[0];
+		if (!matchesAccept(file, accept)) {
+			onFileRejected?.({
+				file,
+				reason: "type"
+			});
+			return;
+		}
+		if ($maxBytes && file.size > $maxBytes) {
+			onFileRejected?.({
+				file,
+				reason: "size"
+			});
+			return;
+		}
+		setPreviewUrl((current) => {
+			if (current) URL.revokeObjectURL(current);
+			return URL.createObjectURL(file);
+		});
+		onFileChange?.(file);
+	};
+	const removeFile = () => {
+		setPreviewUrl((current) => {
+			if (current) URL.revokeObjectURL(current);
+			return null;
+		});
+		onFileChange?.(null);
+	};
+	return /*#__PURE__*/ jsxs(StyledAvatarDropzoneWrapper, {
+		$size,
+		children: [
+			/*#__PURE__*/ jsx(StyledAvatarDropzone, {
+				type: "button",
+				"aria-label": ariaLabel,
+				$size,
+				$dragOver: dragOver,
+				$hasImage: !!previewUrl,
+				disabled,
+				onClick: () => !disabled && inputRef.current?.click(),
+				onDragOver: (e) => {
+					e.preventDefault();
+					if (!disabled) setDragOver(true);
+				},
+				onDragLeave: () => setDragOver(false),
+				onDrop: (e) => {
+					e.preventDefault();
+					setDragOver(false);
+					setFile(e.dataTransfer.files);
+				},
+				children: previewUrl ? /*#__PURE__*/ jsx("img", {
+					src: previewUrl,
+					alt: ""
+				}) : /*#__PURE__*/ jsx(Icon, { name: $icon })
+			}),
+			previewUrl && /*#__PURE__*/ jsx(StyledAvatarRemove, {
+				type: "button",
+				"aria-label": "Remove profile picture",
+				onClick: removeFile,
+				disabled,
+				children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+			}),
+			/*#__PURE__*/ jsx("input", {
+				ref: inputRef,
+				type: "file",
+				accept,
+				disabled,
+				hidden: true,
+				onChange: (e) => {
+					setFile(e.target.files);
+					e.target.value = "";
+				},
+				...rest
+			})
+		]
+	});
+}
+var AvatarDropzone = /*#__PURE__*/ forwardRef(LocalAvatarDropzone);
+var StyledAvatarDropzoneWrapper = styled.span.withConfig({
+	displayName: "avatar-dropzone__StyledAvatarDropzoneWrapper",
+	componentId: "sc-e18fe5e0-0"
+})([
+	`position:relative;display:inline-flex;width:`,
+	`px;height:`,
+	`px;`
+], ({ $size }) => avatarSizes[$size ?? "default"].box, ({ $size }) => avatarSizes[$size ?? "default"].box);
+var StyledAvatarDropzone = styled.button.withConfig({
+	displayName: "avatar-dropzone__StyledAvatarDropzone",
+	componentId: "sc-e18fe5e0-1"
+})([
+	``,
+	`;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px `,
+	` `,
+	`;background:`,
+	`;color:`,
+	`;transition:all 0.3s ease;& svg{width:`,
+	`px;height:`,
+	`px;color:`,
+	`;}& img{width:100%;height:100%;object-fit:cover;display:block;}`,
+	` @media (hover:hover){&:hover:not(:disabled){border-color:`,
+	`;background:`,
+	`;}}&:focus{border-color:`,
+	`;box-shadow:0 0 0 4px `,
+	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
+], resetButton, ({ $hasImage }) => $hasImage ? "solid" : "dashed", ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $size }) => avatarSizes[$size ?? "default"].icon, ({ $size }) => avatarSizes[$size ?? "default"].icon, ({ theme }) => theme.colors.primary, ({ theme, $dragOver }) => $dragOver && css([
+	`border-color:`,
+	`;background:`,
+	`;`
+], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .12 : .05)), ({ theme }) => theme.colors.primary, ({ theme }) => rgba(theme.colors.primary, theme.isDark ? .1 : .04), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
+var StyledAvatarRemove = styled.button.withConfig({
+	displayName: "avatar-dropzone__StyledAvatarRemove",
+	componentId: "sc-e18fe5e0-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:`,
+	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}@media (hover:hover){&:hover:not(:disabled){background:`,
+	`;}}&:disabled{cursor:not-allowed;opacity:0.6;}`
+], resetButton, ({ theme }) => rgba(theme.colors.dark, .6), ({ theme }) => theme.colors.error);
+//#endregion
+export { AvatarDropzone };

package/dist/button.js

@@ -77,7 +77,7 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`, $fullWidth && `width: 100%;`);
 var StyledButton = styled.button.withConfig({
 	displayName: "button__StyledButton",
-	componentId: "sc-86ae8105-0"
+	componentId: "sc-2f3ba034-0"
 })([``, ``], ({ theme, $variant, $error, $size, $outline, $fullWidth, disabled }) => buttonStyles(theme, $variant, $size, $outline, $fullWidth, $error, disabled));
 function LocalButton({ $variant = "primary", ...props }, ref) {
 	return /*#__PURE__*/ jsxs(StyledButton, {

package/dist/dropzone.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { Icon } from './icon';
+export type DropzoneRejectionReason = "type" | "size" | "count";
+export interface DropzoneRejection {
+    file: File;
+    reason: DropzoneRejectionReason;
+}
+export interface DropzoneProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "children"> {
+    /** Bold primary prompt line. */
+    $prompt?: string;
+    /** Optional "or click to browse" sub-line beneath the prompt. */
+    $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"];
+    /** 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. */
+    $inline?: boolean;
+    /** Maximum number of files kept at once. */
+    $maxFiles?: number;
+    /** Maximum size per file in bytes. */
+    $maxBytes?: number;
+    /** Called with the full current file list whenever it changes. */
+    onFilesChange?: (files: File[]) => void;
+    /** Called with the files that were rejected (wrong type, too big, over the
+        count limit) so the caller can surface an error however it likes. */
+    onFilesRejected?: (rejections: DropzoneRejection[]) => void;
+}
+/** Matches a file against an `accept` string (".pdf,image/*,text/plain"),
+    mirroring the native file-picker filter for dropped files. */
+export declare const matchesAccept: (file: File, accept?: string) => boolean;
+declare const Dropzone: React.ForwardRefExoticComponent<DropzoneProps & React.RefAttributes<HTMLInputElement>>;
+export { Dropzone };

package/dist/dropzone.js

@@ -0,0 +1,255 @@
+"use client";
+"use client";
+import { mq } from "./utils/theme.js";
+import { resetButton } from "./utils/mixins.js";
+import { Icon } 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 { rgba } from "polished";
+//#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) => {
+	if (!accept) return true;
+	return accept.split(",").some((raw) => {
+		const entry = raw.trim().toLowerCase();
+		if (!entry) return false;
+		if (entry.startsWith(".")) return file.name.toLowerCase().endsWith(entry);
+		if (entry.endsWith("/*")) return file.type.toLowerCase().startsWith(entry.slice(0, -1));
+		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) {
+	const [items, setItems] = useState([]);
+	const [dragOver, setDragOver] = useState(false);
+	const inputRef = useRef(null);
+	useImperativeHandle(ref, () => inputRef.current);
+	const itemsRef = useRef([]);
+	itemsRef.current = items;
+	useEffect(() => {
+		return () => {
+			itemsRef.current.forEach((item) => item.previewUrl && URL.revokeObjectURL(item.previewUrl));
+		};
+	}, []);
+	const limit = multiple ? $maxFiles ?? Infinity : 1;
+	const atLimit = items.length >= limit;
+	const addFiles = (fileList) => {
+		if (!fileList || disabled) return;
+		const files = Array.from(fileList);
+		const rejections = [];
+		const accepted = [];
+		const replacing = !multiple && files.length > 0;
+		const remaining = replacing ? 1 : limit - items.length;
+		for (const file of files) {
+			if (accepted.length >= remaining) {
+				rejections.push({
+					file,
+					reason: "count"
+				});
+				continue;
+			}
+			if (!matchesAccept(file, accept)) {
+				rejections.push({
+					file,
+					reason: "type"
+				});
+				continue;
+			}
+			if ($maxBytes && file.size > $maxBytes) {
+				rejections.push({
+					file,
+					reason: "size"
+				});
+				continue;
+			}
+			accepted.push({
+				key: `${file.name}-${file.size}-${Date.now()}-${accepted.length}`,
+				file,
+				previewUrl: file.type.startsWith("image/") ? URL.createObjectURL(file) : null
+			});
+		}
+		if (rejections.length > 0) onFilesRejected?.(rejections);
+		if (accepted.length === 0) return;
+		setItems((current) => {
+			const kept = replacing ? [] : current;
+			if (replacing) current.forEach((item) => item.previewUrl && URL.revokeObjectURL(item.previewUrl));
+			const next = [...kept, ...accepted];
+			onFilesChange?.(next.map((item) => item.file));
+			return next;
+		});
+	};
+	const removeItem = (key) => {
+		setItems((current) => {
+			const item = current.find((it) => it.key === key);
+			if (item?.previewUrl) URL.revokeObjectURL(item.previewUrl);
+			const next = current.filter((it) => it.key !== key);
+			onFilesChange?.(next.map((it) => it.file));
+			return next;
+		});
+	};
+	const openPicker = () => {
+		if (disabled || atLimit) return;
+		inputRef.current?.click();
+	};
+	return /*#__PURE__*/ jsxs(StyledDropzoneWrapper, { children: [
+		/*#__PURE__*/ jsxs(StyledDropzone, {
+			type: "button",
+			"aria-label": $prompt,
+			$dragOver: dragOver,
+			$inline,
+			disabled: disabled || atLimit,
+			onClick: openPicker,
+			onDragOver: (e) => {
+				e.preventDefault();
+				if (!disabled && !atLimit) setDragOver(true);
+			},
+			onDragLeave: () => setDragOver(false),
+			onDrop: (e) => {
+				e.preventDefault();
+				setDragOver(false);
+				addFiles(e.dataTransfer.files);
+			},
+			children: [
+				/*#__PURE__*/ jsx(StyledDropIcon, {
+					$inline,
+					children: /*#__PURE__*/ jsx(Icon, { name: $icon })
+				}),
+				/*#__PURE__*/ jsxs(StyledDropPrompt, {
+					$inline,
+					children: [$prompt, $browse ? /*#__PURE__*/ jsx("span", { children: $browse }) : null]
+				}),
+				$hint ? /*#__PURE__*/ jsx(StyledDropHint, {
+					$inline,
+					children: $hint
+				}) : null
+			]
+		}),
+		/*#__PURE__*/ jsx("input", {
+			ref: inputRef,
+			type: "file",
+			accept,
+			multiple,
+			disabled,
+			hidden: true,
+			onChange: (e) => {
+				addFiles(e.target.files);
+				e.target.value = "";
+			},
+			...rest
+		}),
+		items.length > 0 && /*#__PURE__*/ jsx(StyledThumbs, { children: items.map((item) => /*#__PURE__*/ jsxs(StyledThumb, {
+			title: item.file.name,
+			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, {
+				type: "button",
+				"aria-label": `Remove ${item.file.name}`,
+				onClick: () => removeItem(item.key),
+				disabled,
+				children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+			})]
+		}, item.key)) })
+	] });
+}
+var Dropzone = /*#__PURE__*/ forwardRef(LocalDropzone);
+var StyledDropzoneWrapper = styled.div.withConfig({
+	displayName: "dropzone__StyledDropzoneWrapper",
+	componentId: "sc-cf1c3c01-0"
+})([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
+var StyledDropzone = styled.button.withConfig({
+	displayName: "dropzone__StyledDropzone",
+	componentId: "sc-cf1c3c01-1"
+})([
+	``,
+	`;display:flex;flex-direction:`,
+	`;align-items:center;justify-content:center;gap:`,
+	`;width:100%;padding:`,
+	`;border-radius:`,
+	`;border:2px dashed `,
+	`;background:`,
+	`;color:`,
+	`;text-align:`,
+	`;transition:all 0.3s ease;`,
+	` @media (hover:hover){&:hover:not(:disabled){border-color:`,
+	`;background:`,
+	`;}}&:focus{border-color:`,
+	`;box-shadow:0 0 0 4px `,
+	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
+], resetButton, ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "10px" : "8px", ({ $inline }) => $inline ? "10px 14px" : "24px 20px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme, $inline }) => $inline ? "transparent" : theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $inline }) => $inline ? "left" : "center", ({ theme, $dragOver }) => $dragOver && css([
+	`border-color:`,
+	`;background:`,
+	`;`
+], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .12 : .05)), ({ theme }) => theme.colors.primary, ({ theme }) => rgba(theme.colors.primary, theme.isDark ? .1 : .04), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
+var StyledDropIcon = styled.span.withConfig({
+	displayName: "dropzone__StyledDropIcon",
+	componentId: "sc-cf1c3c01-2"
+})([
+	`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
+	`;height:`,
+	`;border-radius:`,
+	`;background:`,
+	`;border:solid 1px `,
+	`;color:`,
+	`;transition:all 0.3s ease;& svg{width:`,
+	`;height:`,
+	`;}`
+], ({ $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-cf1c3c01-3"
+})([
+	`display:flex;flex-direction:`,
+	`;flex-wrap:wrap;align-items:baseline;gap:`,
+	`;font-family:`,
+	`;font-size:`,
+	`;line-height:`,
+	`;font-weight:600;color:`,
+	`;& span{font-weight:500;color:`,
+	`;}`
+], ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "0 6px" : "2px", ({ theme }) => theme.fonts.text, ({ 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-cf1c3c01-4"
+})([
+	`font-family:`,
+	`;font-size:`,
+	`;line-height:`,
+	`;color:`,
+	`;`,
+	``
+], ({ theme }) => theme.fonts.text, ({ 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-cf1c3c01-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-cf1c3c01-6"
+})([
+	`position:relative;width:72px;height:72px;border-radius:`,
+	`;overflow:hidden;border:solid 1px `,
+	`;background:`,
+	`;& img{width:100%;height:100%;object-fit:cover;display:block;}`,
+	`{width:84px;height:84px;}`
+], ({ 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-cf1c3c01-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:`,
+	`;}& span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:`,
+	`;font-size:10px;line-height:1.2;}`
+], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.primary, ({ theme }) => theme.fonts.text);
+var StyledThumbRemove = styled.button.withConfig({
+	displayName: "dropzone__StyledThumbRemove",
+	componentId: "sc-cf1c3c01-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:`,
+	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}@media (hover:hover){&:hover:not(:disabled){background:`,
+	`;}}&:disabled{cursor:not-allowed;opacity:0.6;}`
+], resetButton, ({ theme }) => rgba(theme.colors.dark, .6), ({ theme }) => theme.colors.error);
+//#endregion
+export { Dropzone, matchesAccept };

package/dist/icon-button.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Theme } from './utils';
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    "aria-label": string;
+    $size?: "default" | "big" | "small";
+    $error?: boolean;
+}
+export declare const iconButtonStyles: (theme: Theme, $size?: "default" | "big" | "small", $error?: boolean, disabled?: boolean) => import('styled-components').RuleSet<object>;
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { IconButton };

package/dist/icon-button.js

@@ -0,0 +1,72 @@
+"use client";
+"use client";
+import { resetButton } from "./utils/mixins.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled, { css } from "styled-components";
+import { darken, lighten } from "polished";
+//#region src/lib/icon-button.tsx
+var iconButtonSizes = {
+	small: {
+		box: 24,
+		icon: 12
+	},
+	default: {
+		box: 28,
+		icon: 14
+	},
+	big: {
+		box: 32,
+		icon: 16
+	}
+};
+var iconButtonStyles = (theme, $size, $error, disabled) => {
+	const { box, icon } = iconButtonSizes[$size ?? "default"];
+	return css([
+		``,
+		`;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
+		`px;height:`,
+		`px;border-radius:50%;background:`,
+		`;border:solid 2px `,
+		`;color:`,
+		`;box-shadow:0 0 0 0px `,
+		`;transition:all 0.3s ease;& svg{width:`,
+		`px;height:`,
+		`px;}`,
+		` `,
+		``
+	], resetButton, box, box, theme.colors.light, theme.colors.grayLight, $error ? theme.colors.error : theme.colors.grayDark, $error ? lighten(.1, theme.colors.error) : theme.colors.primaryLight, icon, icon, !disabled && ($error ? css([
+		`border-color:`,
+		`;&:hover{border-color:`,
+		`;color:`,
+		`;}&:focus{box-shadow:0 0 0 4px `,
+		`;}&:active{box-shadow:0 0 0 2px `,
+		`;}`
+	], theme.colors.error, darken(.1, theme.colors.error), darken(.1, theme.colors.error), lighten(.1, theme.colors.error), lighten(.1, theme.colors.error)) : css([
+		`&:hover{border-color:`,
+		`;color:`,
+		`;}&:focus{box-shadow:0 0 0 4px `,
+		`;border-color:`,
+		`;}&:active{box-shadow:0 0 0 2px `,
+		`;}`
+	], theme.colors.primary, theme.colors.primary, theme.colors.primaryLight, theme.colors.primary, theme.colors.primaryLight)), disabled && css([
+		`cursor:not-allowed;background:`,
+		`;border-color:`,
+		`;color:`,
+		`;`
+	], theme.colors.grayLight, theme.colors.grayLight, theme.colors.gray));
+};
+var StyledIconButton = styled.button.withConfig({
+	displayName: "icon-button__StyledIconButton",
+	componentId: "sc-def35ae6-0"
+})([``, ``], ({ theme, $size, $error, disabled }) => iconButtonStyles(theme, $size, $error, disabled));
+function LocalIconButton({ ...props }, ref) {
+	return /*#__PURE__*/ jsx(StyledIconButton, {
+		type: "button",
+		...props,
+		ref
+	});
+}
+var IconButton = /*#__PURE__*/ forwardRef(LocalIconButton);
+//#endregion
+export { IconButton, iconButtonStyles };

package/dist/index.d.ts

@@ -1,16 +1,23 @@
 export * from './styled-components';
 export * from './utils';
+export * from './accordion';
+export * from './avatar-dropzone';
 export * from './box';
 export * from './button';
 export * from './col';
 export * from './container';
+export * from './dropzone';
 export * from './flex';
 export * from './grid';
 export * from './icon';
+export * from './icon-button';
 export * from './input';
 export * from './max-width';
+export * from './modal';
+export * from './password';
 export * from './range';
 export * from './select';
 export * from './space';
 export * from './textarea';
+export * from './toast';
 export * from './toggle';

package/dist/index.js

@@ -4,19 +4,27 @@ import { IconArrow, IconCalendar, IconCheck } from "./utils/icons.js";
 import { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark } from "./utils/theme.js";
 import { formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles } 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 { useOnClickOutside } from "./utils/use-on-click-outside.js";
 import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
+import { Icon } from "./icon.js";
+import { Accordion } from "./accordion.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 { Col } from "./col.js";
 import { Flex } from "./flex.js";
 import { Grid } from "./grid.js";
-import { Icon } from "./icon.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";
+import { Password } from "./password.js";
 import { Range } from "./range.js";
 import { Select, StyledIconWrapper } from "./select.js";
 import { Space } from "./space.js";
 import { Textarea } from "./textarea.js";
+import { StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
 import { Toggle } from "./toggle.js";
-export { Box, Button, CherryThemeProvider, Col, Container, Flex, GlobalStyles, Grid, Icon, IconArrow, IconCalendar, IconCheck, Input, MaxWidth, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, Textarea, ThemeContext, Toggle, breakpoints, buttonStyles, colors, colorsDark, createTypographyStyle, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, lineHeights, mq, resetButton, resetInput, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark };
+export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotifications, Textarea, ThemeContext, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createTypographyStyle, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, useOnClickOutside, useToastNotifications };

package/dist/input.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { IStyledComponent } from 'styled-components';
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     children?: React.ReactNode;
     $wrapperClassName?: string;
     $label?: string;

package/dist/input.js

@@ -8,7 +8,7 @@ import styled, { css } from "styled-components";
 //#region src/lib/input.tsx
 var StyledInputWrapper = styled.span.withConfig({
 	displayName: "input__StyledInputWrapper",
-	componentId: "sc-df1aa532-0"
+	componentId: "sc-f9d22714-0"
 })([
 	`display:inline-flex;flex-wrap:`,
 	`;align-items:center;`,
@@ -17,7 +17,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;`]), ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledLabel = styled.label.withConfig({
 	displayName: "input__StyledLabel",
-	componentId: "sc-df1aa532-1"
+	componentId: "sc-f9d22714-1"
 })([
 	`display:inline-block;color:`,
 	`;font-size:`,
@@ -26,7 +26,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-df1aa532-2"
+	componentId: "sc-f9d22714-2"
 })([
 	``,
 	`;`,
@@ -76,11 +76,11 @@ var StyledInput = styled.input.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledIconWrapper",
-	componentId: "sc-df1aa532-3"
+	componentId: "sc-f9d22714-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%;transform:translate(-50%,-50%) scale(0.7);opacity:0;pointer-events:none;transition:all 0.3s ease;}`], ({ theme }) => theme.colors.primary);
 var StyledRadioCheckboxInput = styled.input.withConfig({
 	displayName: "input__StyledRadioCheckboxInput",
-	componentId: "sc-df1aa532-4"
+	componentId: "sc-f9d22714-4"
 })([
 	``,
 	`;display:inline-block;background:`,
@@ -165,7 +165,7 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 });
 var StyledCustomIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledCustomIconWrapper",
-	componentId: "sc-df1aa532-5"
+	componentId: "sc-f9d22714-5"
 })([
 	`position:relative;`,
 	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,

package/dist/modal.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ModalProps {
+    children: React.ReactNode;
+    $isOpen: boolean;
+    $onClose: () => void;
+    $title?: string;
+    $width?: number;
+}
+declare function Modal({ children, $isOpen, $onClose, $title, $width }: ModalProps): React.ReactPortal | null;
+export { Modal };

package/dist/modal.js

@@ -0,0 +1,96 @@
+"use client";
+"use client";
+import { mq } from "./utils/theme.js";
+import { styledH5, styledText } from "./utils/typography.js";
+import { useOnClickOutside } from "./utils/use-on-click-outside.js";
+import { Icon } from "./icon.js";
+import { IconButton } from "./icon-button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+import { createPortal } from "react-dom";
+//#region src/lib/modal.tsx
+var emptySubscribe = () => () => {};
+function useIsClient() {
+	return useSyncExternalStore(emptySubscribe, () => true, () => false);
+}
+var StyledModal = styled.div.withConfig({
+	displayName: "modal__StyledModal",
+	componentId: "sc-43ca5273-0"
+})([
+	`position:fixed;top:0;left:0;width:100%;height:100%;background:`,
+	`;display:flex;justify-content:center;align-items:center;z-index:1010;pointer-events:none;opacity:0;transition:all 0.3s ease;`,
+	` & .modal-inner{background:`,
+	`;border-radius:`,
+	`;padding:20px;max-width:calc(100% - 40px);width:100%;margin:auto;position:relative;transform:translateY(40px);transition:all 0.3s ease;`,
+	` `,
+	`{max-width:500px;`,
+	`}}`
+], ({ theme }) => rgba(theme.colors.primary, .5), ({ $isOpen }) => $isOpen && css([`opacity:1;pointer-events:all;`]), ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ $isOpen }) => $isOpen && css([`transform:translateY(0);`]), mq("lg"), ({ $width }) => $width && css([`max-width:`, `px;`], $width));
+var StyledModalClose = styled(IconButton).withConfig({
+	displayName: "modal__StyledModalClose",
+	componentId: "sc-43ca5273-1"
+})([`position:absolute;top:20px;right:20px;z-index:10;`]);
+var StyledModalTitle = styled.h2.withConfig({
+	displayName: "modal__StyledModalTitle",
+	componentId: "sc-43ca5273-2"
+})([
+	`--divider-color:`,
+	`;margin:0 0 15px 0;padding:0 0 15px 0;color:`,
+	`;position:relative;`,
+	`;&::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--divider-color);}`
+], ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.dark, ({ theme }) => styledH5(theme));
+var StyledModalContent = styled.div.withConfig({
+	displayName: "modal__StyledModalContent",
+	componentId: "sc-43ca5273-3"
+})([
+	`max-height:calc(100svh - 200px);overflow-y:auto;padding:5px;margin:-5px;--divider-color:`,
+	`;`,
+	`;& hr{margin:20px 0;border:none;border-bottom:solid 1px var(--divider-color);}`
+], ({ theme }) => theme.colors.grayLight, ({ theme }) => styledText(theme));
+function Modal({ children, $isOpen, $onClose, $title, $width }) {
+	const wrapperRef = useRef(null);
+	const elmRef = useRef(null);
+	const isClient = useIsClient();
+	const closeModal = useCallback(() => {
+		$onClose();
+	}, [$onClose]);
+	useEffect(() => {
+		if (!$isOpen) return;
+		function handleKeydown(event) {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				closeModal();
+			}
+		}
+		document.addEventListener("keydown", handleKeydown);
+		return () => document.removeEventListener("keydown", handleKeydown);
+	}, [$isOpen, closeModal]);
+	useOnClickOutside([elmRef, wrapperRef], $isOpen ? closeModal : () => {});
+	if (!isClient) return null;
+	return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(StyledModal, {
+		$isOpen,
+		$width,
+		children: /*#__PURE__*/ jsxs("div", {
+			className: "modal-inner",
+			ref: wrapperRef,
+			children: [
+				/*#__PURE__*/ jsx("span", {
+					ref: elmRef,
+					children: /*#__PURE__*/ jsx(StyledModalClose, {
+						$size: "small",
+						onClick: closeModal,
+						className: "modal-close",
+						"aria-label": "Close Modal",
+						children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+					})
+				}),
+				$title && /*#__PURE__*/ jsx(StyledModalTitle, { children: $title }),
+				/*#__PURE__*/ jsx(StyledModalContent, { children })
+			]
+		})
+	}), document.body);
+}
+//#endregion
+export { Modal };

package/dist/password.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { InputProps } from './input';
+export type PasswordProps = Omit<InputProps, "type" | "$icon" | "$iconPosition">;
+declare const Password: React.ForwardRefExoticComponent<PasswordProps & React.RefAttributes<HTMLInputElement>>;
+export { Password };

package/dist/password.js

@@ -0,0 +1,75 @@
+"use client";
+"use client";
+import { fullWidthStyles } from "./utils/mixins.js";
+import { Icon } from "./icon.js";
+import { IconButton } from "./icon-button.js";
+import { Input } from "./input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/password.tsx
+var passwordSizes = {
+	small: {
+		height: 40,
+		inset: 8,
+		button: 24
+	},
+	default: {
+		height: 50,
+		inset: 11,
+		button: 28
+	},
+	big: {
+		height: 60,
+		inset: 16,
+		button: 28
+	}
+};
+var StyledPassword = styled.span.withConfig({
+	displayName: "password__StyledPassword",
+	componentId: "sc-b3beabaa-0"
+})([
+	`position:relative;display:inline-flex;& input{padding-right:`,
+	`;}`,
+	``
+], ({ $size }) => {
+	const { inset, button } = passwordSizes[$size ?? "default"];
+	return `${inset + button + 10}px`;
+}, ({ $fullWidth }) => fullWidthStyles($fullWidth));
+var StyledPasswordReveal = styled.span.withConfig({
+	displayName: "password__StyledPasswordReveal",
+	componentId: "sc-b3beabaa-1"
+})([`position:absolute;bottom:0;display:flex;align-items:center;`, ``], ({ $size }) => {
+	const { height, inset } = passwordSizes[$size ?? "default"];
+	return css([
+		`right:`,
+		`px;height:`,
+		`px;`
+	], inset, height);
+});
+function LocalPassword({ ...props }, ref) {
+	const [show, setShow] = useState(false);
+	return /*#__PURE__*/ jsxs(StyledPassword, {
+		$size: props.$size,
+		$fullWidth: props.$fullWidth,
+		children: [/*#__PURE__*/ jsx(Input, {
+			...props,
+			type: show ? "text" : "password",
+			ref
+		}), /*#__PURE__*/ jsx(StyledPasswordReveal, {
+			$size: props.$size,
+			children: /*#__PURE__*/ jsx(IconButton, {
+				$size: props.$size === "small" ? "small" : "default",
+				$error: props.$error,
+				"aria-label": show ? "Hide password" : "Show password",
+				"aria-pressed": show,
+				title: show ? "Hide password" : "Show password",
+				onClick: () => setShow((prev) => !prev),
+				children: /*#__PURE__*/ jsx(Icon, { name: show ? "EyeOff" : "Eye" })
+			})
+		})]
+	});
+}
+var Password = /*#__PURE__*/ forwardRef(LocalPassword);
+//#endregion
+export { Password };

package/dist/toast.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { Theme } from './utils';
+export type ToastColor = "info" | "success" | "error" | "warning";
+export interface ToastConfig {
+    color?: ToastColor;
+    autoHide?: number;
+}
+type Toast = {
+    text: string;
+    status: "hidden" | "visible";
+    color: ToastColor;
+    autoHide: number;
+};
+declare const ToastNotificationsContext: React.Context<{
+    notifications: Toast[];
+    addNotification: (text: string, config?: ToastConfig) => void;
+}>;
+declare function useToastNotifications(): {
+    notifications: Toast[];
+    addNotification: (text: string, config?: ToastConfig) => void;
+};
+interface ToastNotificationsProviderProps {
+    children: React.ReactNode;
+}
+declare function ToastNotificationsProvider({ children, }: ToastNotificationsProviderProps): React.JSX.Element;
+export declare const StyledNotifications: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "theme" | "$align" | "$bottom"> & {
+    theme: Theme;
+    $align?: "center" | "left" | "right";
+    $bottom?: boolean;
+}, never> & Partial<Pick<import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "theme" | "$align" | "$bottom"> & {
+    theme: Theme;
+    $align?: "center" | "left" | "right";
+    $bottom?: boolean;
+}, never>>> & string;
+export interface ToastNotificationsProps {
+    $align?: "center" | "left" | "right";
+    $bottom?: boolean;
+}
+declare function ToastNotifications({ $align, $bottom, }: ToastNotificationsProps): React.JSX.Element;
+export { ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications, };

package/dist/toast.js

@@ -0,0 +1,115 @@
+"use client";
+"use client";
+import { Icon } from "./icon.js";
+import { IconButton } from "./icon-button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/toast.tsx
+var statusIcons = {
+	success: "CircleCheck",
+	error: "CircleX",
+	warning: "TriangleAlert",
+	info: "Info"
+};
+var ToastNotificationsContext = /*#__PURE__*/ createContext({
+	notifications: [],
+	addNotification: () => null
+});
+function useToastNotifications() {
+	return useContext(ToastNotificationsContext);
+}
+function ToastNotificationsProvider({ children }) {
+	const [notifications, setNotifications] = useState([]);
+	const addNotification = (text, config) => {
+		setNotifications((prev) => [...prev, {
+			text,
+			status: "hidden",
+			color: config?.color || "info",
+			autoHide: config?.autoHide || 0
+		}]);
+		setTimeout(() => {
+			setNotifications((prev) => prev.map((toast) => toast.status === "hidden" ? {
+				...toast,
+				status: "visible"
+			} : toast));
+		}, 50);
+	};
+	return /*#__PURE__*/ jsx(ToastNotificationsContext.Provider, {
+		value: {
+			notifications,
+			addNotification
+		},
+		children
+	});
+}
+var StyledNotifications = styled.ul.withConfig({
+	displayName: "toast__StyledNotifications",
+	componentId: "sc-1dfe4a8-0"
+})([
+	`position:fixed;z-index:99999;margin:0;padding:0;list-style:none;`,
+	` `,
+	` `,
+	` `,
+	` & li{justify-content:center;display:flex;margin:0;opacity:0;pointer-events:none;transform:translateY(-20px);padding:0;max-height:0;transition:opacity 0.2s ease,transform 0.2s ease,max-height 0.25s ease 0.15s,margin 0.25s ease 0.15s;`,
+	` `,
+	` & .item{display:inline-flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 40px));padding:10px 10px 10px 18px;margin:0;border-radius:`,
+	`;background:`,
+	`;border:solid 1px `,
+	`;box-shadow:`,
+	`;color:`,
+	`;font-size:`,
+	`;line-height:`,
+	`;font-weight:500;& .status-icon{display:inline-flex;flex-shrink:0;& svg{width:20px;height:20px;color:`,
+	`;}}& .message{flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere;}& .close-button{flex-shrink:0;}}&.error{& .item .status-icon svg{color:`,
+	`;}}&.success{& .item .status-icon svg{color:`,
+	`;}}&.warning{& .item .status-icon svg{color:`,
+	`;}}&.info{& .item .status-icon svg{color:`,
+	`;}}&.visible{opacity:1;pointer-events:all;transform:translateY(0);max-height:320px;transition:max-height 0.25s ease,margin 0.25s ease,opacity 0.2s ease 0.15s,transform 0.2s ease 0.15s;`,
+	`}&.static{position:relative;z-index:10;}}`
+], ({ $align }) => $align === "center" && css([`left:50%;transform:translateX(-50%);`]), ({ $align }) => $align === "right" && css([`right:20px;`]), ({ $align }) => $align === "left" && css([`left:20px;`]), ({ $bottom }) => $bottom ? css([`bottom:20px;`]) : css([`top:20px;`]), ({ $align }) => $align === "right" && css([`justify-content:flex-end;`]), ({ $align }) => $align === "left" && css([`justify-content:flex-start;`]), ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.isDark ? theme.shadows.sm : theme.shadows.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg, ({ theme }) => theme.colors.info, ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.success, ({ theme }) => theme.colors.warning, ({ theme }) => theme.colors.info, ({ $bottom }) => $bottom ? css([`margin-top:10px;`]) : css([`margin-bottom:10px;`]));
+function ToastNotifications({ $align = "center", $bottom }) {
+	const { notifications } = useToastNotifications();
+	return /*#__PURE__*/ jsx(StyledNotifications, {
+		$align,
+		$bottom,
+		children: notifications.map((notification, i) => /*#__PURE__*/ jsx(NotificationItem, { ...notification }, i))
+	});
+}
+function NotificationItem(notification) {
+	const [visible, setVisible] = useState(true);
+	useEffect(() => {
+		if (!notification.autoHide) return;
+		const timeout = setTimeout(() => setVisible(false), notification.autoHide);
+		return () => clearTimeout(timeout);
+	}, [notification.autoHide]);
+	return /*#__PURE__*/ jsx("li", {
+		className: [
+			visible ? notification.status : "hidden",
+			notification.color,
+			!notification.autoHide && "static"
+		].filter(Boolean).join(" "),
+		children: /*#__PURE__*/ jsxs("span", {
+			className: "item",
+			children: [
+				/*#__PURE__*/ jsx("span", {
+					className: "status-icon",
+					children: /*#__PURE__*/ jsx(Icon, { name: statusIcons[notification.color] || statusIcons.info })
+				}),
+				/*#__PURE__*/ jsx("span", {
+					className: "message",
+					children: notification.text
+				}),
+				/*#__PURE__*/ jsx(IconButton, {
+					$size: "small",
+					className: "close-button",
+					"aria-label": "Dismiss notification",
+					onClick: () => setVisible(false),
+					children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications };

package/dist/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './icons';
 export * from './mixins';
 export * from './theme';
 export * from './typography';
+export * from './use-on-click-outside';

package/dist/utils/use-on-click-outside.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useOnClickOutside(refs: RefObject<HTMLElement | null>[], cb: () => void): void;

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

@@ -0,0 +1,17 @@
+"use client";
+"use client";
+import { useEffect } from "react";
+//#region src/lib/utils/use-on-click-outside.tsx
+function useOnClickOutside(refs, cb) {
+	useEffect(() => {
+		function handleClickOutside(event) {
+			if (refs && refs.map((ref) => ref && ref.current && ref.current.contains(event.target)).every((i) => i === false)) cb();
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [refs, cb]);
+}
+//#endregion
+export { useOnClickOutside };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -41,7 +41,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "lucide-react": "^1.21.0",
+    "lucide-react": "^1.23.0",
     "polished": "^4.3.1"
   },
   "peerDependencies": {
@@ -50,21 +50,21 @@
     "styled-components": "^6.0.0"
   },
   "devDependencies": {
-    "@swc/plugin-styled-components": "^12.14.0",
-    "@types/node": "^26.0.1",
+    "@swc/plugin-styled-components": "^12.14.1",
+    "@types/node": "^26.1.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.3.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "next": "^16.2.9",
-    "prettier": "^3.9.1",
+    "next": "^16.2.10",
+    "prettier": "^3.9.4",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "styled-components": "^6.4.3",
     "typescript": "^6.0.3",
-    "vite": "^8.1.0",
+    "vite": "^8.1.3",
     "vite-plugin-dts": "^5.0.3"
   }
 }