cherry-styled-components 0.2.2 → 0.2.4

package/dist/icon-button.d.ts

@@ -5,7 +5,8 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     "aria-label": string;
     $size?: "default" | "big" | "small";
     $error?: boolean;
+    $active?: boolean;
 }
-export declare const iconButtonStyles: (theme: Theme, $size?: "default" | "big" | "small", $error?: boolean, disabled?: boolean) => import('styled-components').RuleSet<object>;
+export declare const iconButtonStyles: (theme: Theme, $size?: "default" | "big" | "small", $error?: boolean, disabled?: boolean, $active?: boolean) => import('styled-components').RuleSet<object>;
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { IconButton };

package/dist/icon-button.js

@@ -4,7 +4,7 @@ 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";
+import { darken, lighten, rgba } from "polished";
 //#region src/lib/icon-button.tsx
 var iconButtonSizes = {
 	small: {
@@ -20,11 +20,11 @@ var iconButtonSizes = {
 		icon: 16
 	}
 };
-var iconButtonStyles = (theme, $size, $error, disabled) => {
+var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 	const { box, icon } = iconButtonSizes[$size ?? "default"];
 	return css([
 		``,
-		`;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
+		`;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;width:`,
 		`px;height:`,
 		`px;border-radius:50%;background:`,
 		`;border:solid 2px `,
@@ -34,6 +34,7 @@ var iconButtonStyles = (theme, $size, $error, disabled) => {
 		`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:`,
@@ -49,7 +50,12 @@ var iconButtonStyles = (theme, $size, $error, disabled) => {
 		`;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([
+	], theme.colors.primary, theme.colors.primary, theme.colors.primaryLight, theme.colors.primary, theme.colors.primaryLight)), !disabled && $active && css([
+		`border-color:`,
+		`;background:`,
+		`;color:`,
+		`;`
+	], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .18 : .1), theme.colors.primary), disabled && css([
 		`cursor:not-allowed;background:`,
 		`;border-color:`,
 		`;color:`,
@@ -58,11 +64,12 @@ var iconButtonStyles = (theme, $size, $error, disabled) => {
 };
 var StyledIconButton = styled.button.withConfig({
 	displayName: "icon-button__StyledIconButton",
-	componentId: "sc-def35ae6-0"
-})([``, ``], ({ theme, $size, $error, disabled }) => iconButtonStyles(theme, $size, $error, disabled));
+	componentId: "sc-e26e58e2-0"
+})([``, ``], ({ theme, $size, $error, disabled, $active }) => iconButtonStyles(theme, $size, $error, disabled, $active));
 function LocalIconButton({ ...props }, ref) {
 	return /*#__PURE__*/ jsx(StyledIconButton, {
 		type: "button",
+		"aria-pressed": props.$active === void 0 ? void 0 : props.$active,
 		...props,
 		ref
 	});

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from './password';
 export * from './range';
 export * from './select';
 export * from './space';
+export * from './tabs';
 export * from './textarea';
 export * from './theme-toggle';
 export * from './toast';

package/dist/index.js

@@ -26,8 +26,9 @@ import { Password } from "./password.js";
 import { Range } from "./range.js";
 import { Select, StyledIconWrapper } from "./select.js";
 import { Space } from "./space.js";
+import { TabContent, Tabs } from "./tabs.js";
 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, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, 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, 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, useOnClickOutside, useToastNotifications };
+export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, 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, 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, useOnClickOutside, useToastNotifications };

package/dist/modal.d.ts

@@ -6,10 +6,14 @@ export interface ModalProps {
     $title?: string;
     $width?: number;
     $hideCloseButton?: boolean;
-    /** Enables restyling via styled(Modal); applied to the overlay root. The
-        inner parts expose class hooks: .modal-inner, .modal-close, .modal-title,
-        .modal-content. */
+    /** Escape hatches for app-level restyling, both applied to the overlay
+        root. Note that wrapping with styled(Modal) does NOT work for the $-props
+        API (styled-components strips transient props before they reach the
+        wrapped component), so restyle by targeting a passed class instead. The
+        inner parts expose stable class hooks: .modal-inner, .modal-close,
+        .modal-title, .modal-content. */
     className?: string;
+    style?: React.CSSProperties;
 }
-declare function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, }: ModalProps): React.ReactPortal | null;
+declare function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, style, }: ModalProps): React.ReactPortal | null;
 export { Modal };

package/dist/modal.js

@@ -21,7 +21,7 @@ var innerRiseIn = keyframes([`from{transform:translateY(40px);}to{transform:tran
 var innerSinkOut = keyframes([`from{transform:translateY(0);}to{transform:translateY(40px);}`]);
 var StyledModal = styled.div.withConfig({
 	displayName: "modal__StyledModal",
-	componentId: "sc-e8a3a913-0"
+	componentId: "sc-14a8d5c-0"
 })([
 	`position:fixed;top:0;left:0;width:100%;height:100%;background:`,
 	`;display:flex;justify-content:center;align-items:center;z-index:1010;animation:`,
@@ -35,11 +35,11 @@ var StyledModal = styled.div.withConfig({
 ], ({ theme }) => rgba(theme.colors.primary, .5), ({ $isClosing }) => $isClosing ? overlayFadeOut : overlayFadeIn, ({ $isClosing }) => $isClosing && css([`pointer-events:none;`]), ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ $isClosing }) => $isClosing ? innerSinkOut : innerRiseIn, mq("lg"), ({ $width }) => $width && css([`max-width:`, `px;`], $width));
 var StyledModalClose = styled(IconButton).withConfig({
 	displayName: "modal__StyledModalClose",
-	componentId: "sc-e8a3a913-1"
+	componentId: "sc-14a8d5c-1"
 })([`position:absolute;top:20px;right:20px;z-index:10;`]);
 var StyledModalTitle = styled.h2.withConfig({
 	displayName: "modal__StyledModalTitle",
-	componentId: "sc-e8a3a913-2"
+	componentId: "sc-14a8d5c-2"
 })([
 	`--divider-color:`,
 	`;margin:0 0 15px 0;padding:0 0 15px 0;color:`,
@@ -48,13 +48,13 @@ var StyledModalTitle = styled.h2.withConfig({
 ], ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.dark, ({ theme }) => styledH5(theme));
 var StyledModalContent = styled.div.withConfig({
 	displayName: "modal__StyledModalContent",
-	componentId: "sc-e8a3a913-3"
+	componentId: "sc-14a8d5c-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, $hideCloseButton, className }) {
+function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, style }) {
 	const wrapperRef = useRef(null);
 	const elmRef = useRef(null);
 	const isClient = useIsClient();
@@ -85,6 +85,7 @@ function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton,
 		$isClosing: isClosing,
 		$width,
 		className,
+		style,
 		onAnimationEnd: handleAnimationEnd,
 		children: /*#__PURE__*/ jsxs("div", {
 			className: "modal-inner",

package/dist/tabs.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface TabContentProps {
+    title: string;
+    children: React.ReactNode;
+}
+declare function TabContent({ children }: TabContentProps): React.JSX.Element;
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    children: React.ReactNode;
+    onTabChange?: (index: number) => void;
+    defaultActiveTab?: number;
+    activeTab?: number;
+}
+declare function Tabs({ children, onTabChange, defaultActiveTab, activeTab, ...rest }: TabsProps): React.JSX.Element;
+export { Tabs, TabContent };

package/dist/tabs.js

@@ -0,0 +1,120 @@
+"use client";
+"use client";
+import { resetButton } from "./utils/mixins.js";
+import { styledText } from "./utils/typography.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useId, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+//#region src/lib/tabs.tsx
+var StyledTabs = styled.div.withConfig({
+	displayName: "tabs__StyledTabs",
+	componentId: "sc-7af80746-0"
+})([`width:100%;`]);
+var StyledTabsList = styled.div.withConfig({
+	displayName: "tabs__StyledTabsList",
+	componentId: "sc-7af80746-1"
+})([
+	`display:flex;overflow-x:auto;border-radius:`,
+	` `,
+	` 0 0;background:`,
+	`;border:solid 1px `,
+	`;`
+], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight);
+var StyledTabButton = styled.button.withConfig({
+	displayName: "tabs__StyledTabButton",
+	componentId: "sc-7af80746-2"
+})([
+	``,
+	`;flex:1;min-width:fit-content;padding:12px 20px;`,
+	`;font-weight:600;color:`,
+	`;border-bottom:solid 3px transparent;transition:color 0.2s ease,background 0.2s ease,border-color 0.2s ease;@media (prefers-reduced-motion:reduce){transition:none;}&:not(:last-child){border-right:solid 1px `,
+	`;}&:focus-visible{border-radius:`,
+	`;outline:solid 2px `,
+	`;outline-offset:-4px;border-bottom-color:transparent;}`,
+	``
+], resetButton, ({ theme }) => styledText(theme), ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.primary, ({ theme, $isActive }) => $isActive ? css([
+	`color:`,
+	`;border-bottom-color:`,
+	`;`
+], theme.colors.primary, theme.colors.primary) : css([
+	`@media (hover:hover){&:hover{color:`,
+	`;background:`,
+	`;}}`
+], theme.colors.primary, rgba(theme.colors.primaryLight, .1)));
+var StyledTabPanel = styled.div.withConfig({
+	displayName: "tabs__StyledTabPanel",
+	componentId: "sc-7af80746-3"
+})([
+	``,
+	`;color:`,
+	`;background:`,
+	`;padding:20px;border:solid 1px `,
+	`;border-top:none;border-radius:0 0 `,
+	` `,
+	`;`
+], ({ theme }) => styledText(theme), ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.spacing.radius.lg);
+function TabContent({ children }) {
+	return /*#__PURE__*/ jsx(Fragment, { children });
+}
+function Tabs({ children, onTabChange, defaultActiveTab, activeTab, ...rest }) {
+	const [internalActive, setInternalActive] = useState(defaultActiveTab ?? 0);
+	const isControlled = activeTab !== void 0;
+	const baseId = useId();
+	const tabRefs = useRef([]);
+	const tabs = React.Children.toArray(children).filter((child) => /*#__PURE__*/ React.isValidElement(child) && typeof child.props.title === "string" && child.props.title.trim() !== "");
+	const active = Math.min(isControlled ? activeTab : internalActive, Math.max(tabs.length - 1, 0));
+	const selectTab = (index) => {
+		if (!isControlled) setInternalActive(index);
+		onTabChange?.(index);
+	};
+	const handleKeyDown = (event) => {
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+				next = (active + 1) % tabs.length;
+				break;
+			case "ArrowLeft":
+				next = (active - 1 + tabs.length) % tabs.length;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = tabs.length - 1;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		selectTab(next);
+		tabRefs.current[next]?.focus();
+	};
+	return /*#__PURE__*/ jsxs(StyledTabs, {
+		...rest,
+		children: [/*#__PURE__*/ jsx(StyledTabsList, {
+			role: "tablist",
+			onKeyDown: handleKeyDown,
+			children: tabs.map((tab, index) => /*#__PURE__*/ jsx(StyledTabButton, {
+				type: "button",
+				role: "tab",
+				id: `${baseId}-tab-${index}`,
+				"aria-selected": index === active,
+				"aria-controls": `${baseId}-panel-${index}`,
+				tabIndex: index === active ? 0 : -1,
+				$isActive: index === active,
+				ref: (node) => {
+					tabRefs.current[index] = node;
+				},
+				onClick: () => selectTab(index),
+				children: tab.props.title
+			}, index))
+		}), /*#__PURE__*/ jsx(StyledTabPanel, {
+			role: "tabpanel",
+			id: `${baseId}-panel-${active}`,
+			"aria-labelledby": `${baseId}-tab-${active}`,
+			children: tabs[active]?.props.children
+		})]
+	});
+}
+//#endregion
+export { TabContent, Tabs };

package/dist/theme-toggle.js

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import { resetButton } from "./utils/mixins.js";
+import { interactiveStyles, resetButton } from "./utils/mixins.js";
 import { ThemeContext } from "./styled-components/theme-provider.js";
 import { Icon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -10,19 +10,19 @@ import { rgba } from "polished";
 //#region src/lib/theme-toggle.tsx
 var StyledThemeToggle = styled.button.withConfig({
 	displayName: "theme-toggle__StyledThemeToggle",
-	componentId: "sc-cc0c1ca5-0"
+	componentId: "sc-fe6f1d3-0"
 })([
 	``,
-	` width:56px;height:30px;border-radius:30px;display:flex;position:relative;margin:auto 0;transform:scale(1);background:`,
-	`;border:1px solid `,
-	`;transition:all 0.3s ease;&::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:`,
+	` `,
+	` width:56px;height:30px;border-radius:30px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;position:relative;margin:auto 0;background:`,
+	`;border-color:`,
+	`;&::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:`,
 	`;transition:all 0.3s ease;z-index:1;`,
 	`}`,
-	` & svg{width:16px;height:16px;object-fit:contain;margin:auto;transition:all 0.3s ease;position:relative;z-index:2;}& .lucide-sun{transform:translateX(1px);}& svg[stroke]{stroke:`,
-	`;}&:hover{transform:scale(1.05);color:`,
-	`;& svg[stroke]{stroke:`,
-	`;}}&:active{transform:scale(0.97);}`
-], resetButton, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => rgba(theme.colors.primaryLight, .2), ({ theme }) => theme.isDark && css([`transform:translateX(26px);`]), ({ $hidden }) => $hidden && css([`display:none;`]), ({ theme }) => theme.colors.primary, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark);
+	` & svg{width:16px;height:16px;object-fit:contain;transition:all 0.3s ease;position:relative;z-index:2;}& svg[stroke]{stroke:`,
+	`;}@media (hover:hover){&:hover svg[stroke]{stroke:`,
+	`;}}`
+], resetButton, interactiveStyles, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => rgba(theme.colors.primaryLight, .2), ({ theme }) => theme.isDark && css([`transform:translateX(26px);`]), ({ $hidden }) => $hidden && css([`display:none;`]), ({ theme }) => theme.colors.primary, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark);
 function LocalThemeToggle({ onClick, ...props }, ref) {
 	const { toggleTheme } = useContext(ThemeContext);
 	return /*#__PURE__*/ jsxs(StyledThemeToggle, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",