cherry-styled-components 0.2.3 → 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/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.3",
+  "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",