cherry-styled-components 0.1.17 → 0.1.19

package/dist/select.js

@@ -41,24 +41,24 @@ var StyledIconWrapper = styled.span.withConfig({
 	componentId: "sc-b63bf03d-1"
 })([`position:relative;`, ` & svg{position:absolute;top:50%;right:15px;transform:translateY(-50%) rotate(0);transition:all 0.3s ease;pointer-events:none;}& select{padding-right:40px;}& select:active:not([disabled]) ~ svg,& select:focus:not([disabled]) ~ svg{transform:translateY(-50%) rotate(180deg);}`], ({ $fullWidth }) => fullWidthStyles($fullWidth));
 function LocalSelect({ ...props }, ref) {
-	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,
 		$label: props.$label,
 		className: props.$wrapperClassName,
-		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+		children: [props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,
 			children: props.$label
-		}), /* @__PURE__ */ jsxs(StyledIconWrapper, {
+		}), /*#__PURE__*/ jsxs(StyledIconWrapper, {
 			$fullWidth: props.$fullWidth,
-			children: [/* @__PURE__ */ jsx(StyledSelect, {
+			children: [/*#__PURE__*/ jsx(StyledSelect, {
 				...props,
 				"aria-invalid": props.$error || void 0,
 				ref,
 				children: props.children
-			}), /* @__PURE__ */ jsx(IconArrow, { "aria-hidden": "true" })]
+			}), /*#__PURE__*/ jsx(IconArrow, { "aria-hidden": "true" })]
 		})]
 	});
 }
-var Select = /* @__PURE__ */ forwardRef(LocalSelect);
+var Select = /*#__PURE__*/ forwardRef(LocalSelect);
 //#endregion
 export { Select, StyledIconWrapper };

package/dist/space.js

@@ -41,11 +41,11 @@ var StyledSpace = styled.span.withConfig({
 	``
 ], ({ $horizontal, $size }) => $size ? styles($size, $horizontal || false) : "", (props) => responsiveStyles(props));
 function LocalSpace({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledSpace, {
+	return /*#__PURE__*/ jsx(StyledSpace, {
 		...props,
 		ref
 	});
 }
-var Space = /* @__PURE__ */ forwardRef(LocalSpace);
+var Space = /*#__PURE__*/ forwardRef(LocalSpace);
 //#endregion
 export { Space };

package/dist/styled-components/registry.js

@@ -11,9 +11,9 @@ function StyledComponentsRegistry({ children }) {
 	useServerInsertedHTML(() => {
 		const styles = styledComponentsStyleSheet.getStyleElement();
 		styledComponentsStyleSheet.instance.clearTag();
-		return /* @__PURE__ */ jsx(Fragment, { children: styles });
+		return /*#__PURE__*/ jsx(Fragment, { children: styles });
 	});
-	return /* @__PURE__ */ jsx(StyleSheetManager, {
+	return /*#__PURE__*/ jsx(StyleSheetManager, {
 		sheet: isServer ? styledComponentsStyleSheet.instance : void 0,
 		enableVendorPrefixes: true,
 		children

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

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useEffect, useState } from "react";
 import { ThemeProvider } from "styled-components";
 //#region src/lib/styled-components/theme-provider.tsx
-var ThemeContext = /* @__PURE__ */ createContext({ setTheme: () => {} });
+var ThemeContext = /*#__PURE__*/ createContext({ setTheme: () => {} });
 function CherryThemeProvider({ children, theme, themeDark }) {
 	const [currentTheme, setTheme] = useState(theme);
 	useEffect(() => {
@@ -19,11 +19,11 @@ function CherryThemeProvider({ children, theme, themeDark }) {
 		}
 	}, [theme, themeDark]);
 	const GlobalStylesComponent = GlobalStyles(currentTheme);
-	return /* @__PURE__ */ jsx(ThemeProvider, {
+	return /*#__PURE__*/ jsx(ThemeProvider, {
 		theme: currentTheme,
-		children: /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+		children: /*#__PURE__*/ jsxs(ThemeContext.Provider, {
 			value: { setTheme },
-			children: [/* @__PURE__ */ jsx(GlobalStylesComponent, {}), children]
+			children: [/*#__PURE__*/ jsx(GlobalStylesComponent, {}), children]
 		})
 	});
 }

package/dist/textarea.js

@@ -41,15 +41,15 @@ var StyledTextarea = styled.textarea.withConfig({
 		color: ${theme.colors.gray};
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 function LocalTextarea({ ...props }, ref) {
-	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,
 		$label: props.$label,
 		className: props.$wrapperClassName,
-		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+		children: [props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,
 			$label: props.$label,
 			children: props.$label
-		}), /* @__PURE__ */ jsx(StyledTextarea, {
+		}), /*#__PURE__*/ jsx(StyledTextarea, {
 			...props,
 			"aria-invalid": props.$error || void 0,
 			ref,
@@ -57,6 +57,6 @@ function LocalTextarea({ ...props }, ref) {
 		})]
 	});
 }
-var Textarea = /* @__PURE__ */ forwardRef(LocalTextarea);
+var Textarea = /*#__PURE__*/ forwardRef(LocalTextarea);
 //#endregion
 export { Textarea };

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/toggle.js

@@ -57,26 +57,26 @@ var StyledToggle = styled.input.withConfig({
 			}
 		}`);
 function LocalToggle({ type = "checkbox", ...props }, ref) {
-	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,
 		$label: props.$label,
 		className: props.$wrapperClassName,
-		children: [/* @__PURE__ */ jsxs(StyledToggleWrapper, { children: [/* @__PURE__ */ jsx(StyledToggle, {
+		children: [/*#__PURE__*/ jsxs(StyledToggleWrapper, { children: [/*#__PURE__*/ jsx(StyledToggle, {
 			...props,
 			type,
 			role: "switch",
 			ref
-		}), /* @__PURE__ */ jsx(StyledFakeToggle, {
+		}), /*#__PURE__*/ jsx(StyledFakeToggle, {
 			$error: props.$error,
 			$success: props.$success,
 			className: "fake-toggle",
 			$size: props.$size
-		})] }), props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+		})] }), props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,
 			children: props.$label
 		})]
 	});
 }
-var Toggle = /* @__PURE__ */ forwardRef(LocalToggle);
+var Toggle = /*#__PURE__*/ forwardRef(LocalToggle);
 //#endregion
 export { Toggle };

package/dist/utils/icons.js

@@ -5,14 +5,14 @@ import { useTheme } from "styled-components";
 //#region src/lib/utils/icons.tsx
 function IconCheck({ ...props }) {
 	const theme = useTheme();
-	return /* @__PURE__ */ jsx("svg", {
+	return /*#__PURE__*/ jsx("svg", {
 		width: "12",
 		height: "10",
 		viewBox: "0 0 12 10",
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg",
 		...props,
-		children: /* @__PURE__ */ jsx("path", {
+		children: /*#__PURE__*/ jsx("path", {
 			d: "M10 2L4.4 8L2 5.75",
 			stroke: theme.colors.primary,
 			strokeWidth: "3",
@@ -23,14 +23,14 @@ function IconCheck({ ...props }) {
 }
 function IconArrow({ ...props }) {
 	const theme = useTheme();
-	return /* @__PURE__ */ jsx("svg", {
+	return /*#__PURE__*/ jsx("svg", {
 		width: "16",
 		height: "10",
 		viewBox: "0 0 16 10",
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg",
 		...props,
-		children: /* @__PURE__ */ jsx("path", {
+		children: /*#__PURE__*/ jsx("path", {
 			d: "M2 2L8 8L14 2",
 			stroke: theme.colors.primary,
 			strokeWidth: "3",
@@ -40,7 +40,7 @@ function IconArrow({ ...props }) {
 	});
 }
 function IconCalendar({ ...props }) {
-	return /* @__PURE__ */ jsxs("svg", {
+	return /*#__PURE__*/ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: "24",
 		height: "24",
@@ -52,22 +52,22 @@ function IconCalendar({ ...props }) {
 		strokeLinejoin: "round",
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("path", { d: "M8 2v4" }),
-			/* @__PURE__ */ jsx("path", { d: "M16 2v4" }),
-			/* @__PURE__ */ jsx("rect", {
+			/*#__PURE__*/ jsx("path", { d: "M8 2v4" }),
+			/*#__PURE__*/ jsx("path", { d: "M16 2v4" }),
+			/*#__PURE__*/ jsx("rect", {
 				width: "18",
 				height: "18",
 				x: "3",
 				y: "4",
 				rx: "2"
 			}),
-			/* @__PURE__ */ jsx("path", { d: "M3 10h18" }),
-			/* @__PURE__ */ jsx("path", { d: "M8 14h.01" }),
-			/* @__PURE__ */ jsx("path", { d: "M12 14h.01" }),
-			/* @__PURE__ */ jsx("path", { d: "M16 14h.01" }),
-			/* @__PURE__ */ jsx("path", { d: "M8 18h.01" }),
-			/* @__PURE__ */ jsx("path", { d: "M12 18h.01" }),
-			/* @__PURE__ */ jsx("path", { d: "M16 18h.01" })
+			/*#__PURE__*/ jsx("path", { d: "M3 10h18" }),
+			/*#__PURE__*/ jsx("path", { d: "M8 14h.01" }),
+			/*#__PURE__*/ jsx("path", { d: "M12 14h.01" }),
+			/*#__PURE__*/ jsx("path", { d: "M16 14h.01" }),
+			/*#__PURE__*/ jsx("path", { d: "M8 18h.01" }),
+			/*#__PURE__*/ jsx("path", { d: "M12 18h.01" }),
+			/*#__PURE__*/ jsx("path", { d: "M16 18h.01" })
 		]
 	});
 }

package/dist/{src/lib/utils → 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/{src/lib/utils → utils}/mixins.d.ts

@@ -9,3 +9,6 @@ export declare const generateColsStyles: (size: keyof Breakpoints<number>, cols:
 export declare const generateColSpanStyles: (size: keyof Breakpoints<number>, span: number) => import('styled-components').RuleSet<object>;
 export declare const generatePaddingStyles: (size: keyof Breakpoints<number>, padding: number | "none") => import('styled-components').RuleSet<object>;
 export declare const generateJustifyContentStyles: (size: keyof Breakpoints<number>, justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") => import('styled-components').RuleSet<object>;
+export declare const generateAlignItemsStyles: (size: keyof Breakpoints<number>, alignItems?: "stretch" | "center" | "flex-start" | "flex-end" | "baseline") => import('styled-components').RuleSet<object>;
+export declare const generateAlignContentStyles: (size: keyof Breakpoints<number>, alignContent?: "stretch" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") => import('styled-components').RuleSet<object>;
+export declare const generateDirectionStyles: (size: keyof Breakpoints<number>, direction?: "row" | "column" | "row-reverse" | "column-reverse") => import('styled-components').RuleSet<object>;

package/dist/utils/mixins.js

@@ -42,5 +42,20 @@ var generateJustifyContentStyles = (size, justifyContent) => css([
 	`{justify-content:`,
 	`;}`
 ], mq(size), justifyContent && `${justifyContent}`);
+var generateAlignItemsStyles = (size, alignItems) => css([
+	``,
+	`{align-items:`,
+	`;}`
+], mq(size), alignItems && `${alignItems}`);
+var generateAlignContentStyles = (size, alignContent) => css([
+	``,
+	`{align-content:`,
+	`;}`
+], mq(size), alignContent && `${alignContent}`);
+var generateDirectionStyles = (size, direction) => css([
+	``,
+	`{flex-direction:`,
+	`;}`
+], mq(size), direction && `${direction}`);
 //#endregion
-export { formElementHeightStyles, fullWidthStyles, generateColSpanStyles, generateColsStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles };
+export { formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles };

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.17",
+  "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.8.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.8.0",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@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.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "next": "^16.2.3",
-    "prettier": "^3.8.2",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "@vitejs/plugin-react-swc": "^4.3.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "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.0",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.8",
-    "vite-plugin-dts": "^4.5.4"
+    "styled-components": "^6.4.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.3",
+    "vite-plugin-dts": "^5.0.3"
   }
 }

package/dist/src/lib/flex.d.ts

@@ -1,27 +0,0 @@
-import { default as React } from 'react';
-type JustifyContentType = "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
-type GapType = number | "none";
-interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
-    $justifyContent?: JustifyContentType;
-    $xsJustifyContent?: JustifyContentType;
-    $smJustifyContent?: JustifyContentType;
-    $mdJustifyContent?: JustifyContentType;
-    $lgJustifyContent?: JustifyContentType;
-    $xlJustifyContent?: JustifyContentType;
-    $xxlJustifyContent?: JustifyContentType;
-    $xxxlJustifyContent?: JustifyContentType;
-    $wrap?: "wrap" | "nowrap" | "wrap-reverse";
-    $gap?: GapType;
-    $xsGap?: GapType;
-    $smGap?: GapType;
-    $mdGap?: GapType;
-    $lgGap?: GapType;
-    $xlGap?: GapType;
-    $xxlGap?: GapType;
-    $xxxlGap?: GapType;
-    $direction?: "row" | "column" | "row-reverse" | "column-reverse";
-    $fullWidth?: boolean;
-}
-declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
-export { Flex };