@ayseaistudio/ui-components 3.5.0 → 3.5.2

package/dist/Checkbox/Checkbox.d.ts

@@ -8,9 +8,10 @@ interface Props {
     className?: string;
     fieldClassName?: string;
     onClick?: () => void;
+    onChange?: () => void;
 }
 export declare const Checkbox: {
-    ({ text, size, status, color, className, fieldClassName, onClick, }: Props): React.JSX.Element;
+    ({ text, size, status, color, className, fieldClassName, onClick, onChange, }: Props): React.JSX.Element;
     propTypes: {
         text: PropTypes.Requireable<string>;
         withText: PropTypes.Requireable<boolean>;

package/dist/Checkbox/Checkbox.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { useReducer } from "react";
 import "./style.css";
 import { IconCheck } from "@tabler/icons-react";
-export const Checkbox = ({ text, size, status, color, className, fieldClassName, onClick, }) => {
+export const Checkbox = ({ text, size, status, color, className, fieldClassName, onClick, onChange, }) => {
     const initialState = {
         size: size ?? "large",
         status: status ?? "selected",
@@ -17,6 +17,7 @@ export const Checkbox = ({ text, size, status, color, className, fieldClassName,
         }, onClick: () => {
             dispatch("click");
             onClick?.();
+            onChange?.();
         }, children: [_jsx("div", { className: `field ${fieldClassName}`, children: state.status === "selected" && (_jsx(IconCheck, { className: `${state.size === "large" ? "class" : (state.size === "x-small") ? "class-2" : "class-3"}`, color: ["lime", "mauve"].includes(state.color) ? "#3D3D3D" : "#F1F1F1" })) }), text && _jsx("div", { className: "text", children: text })] }));
 };
 function reducer(state, action) {

package/dist/SelectionButton/SelectionButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-import { useReducer } from "react";
+import { useReducer, useEffect } from "react";
 import "./style.css";
 export const SelectionButton = ({ text, leftIcon, rightIcon, size, color, status, className, onClick, }) => {
     const [state, dispatch] = useReducer(reducer, {
@@ -8,17 +8,30 @@ export const SelectionButton = ({ text, leftIcon, rightIcon, size, color, status
         color: color || "black",
         status: status || "default",
     });
+    // Prop'tan gelen status değiştiğinde state'i güncelle (controlled component)
+    useEffect(() => {
+        if (status !== undefined) {
+            dispatch({ type: "set_status", payload: status });
+        }
+    }, [status]);
     return (_jsxs("div", { className: `selection-button ${state.size} ${state.status} ${state.color} ${className}`, onMouseEnter: () => {
-            dispatch("mouse_enter");
+            if (state.status === "default") {
+                dispatch({ type: "mouse_enter" });
+            }
         }, onClick: () => {
-            dispatch("click");
             onClick && onClick();
+            // Sadece user interaction'da toggle yap, prop kontrolü parent'ta
+            if (status === undefined) {
+                dispatch({ type: "click" });
+            }
         }, onMouseLeave: () => {
-            dispatch("mouse_leave");
+            if (state.status === "hover") {
+                dispatch({ type: "mouse_leave" });
+            }
         }, children: [leftIcon && (_jsx("span", { className: `${state.size === "small" ? "class icon" : "class-2 icon"}`, children: leftIcon })), text && _jsx("div", { className: "button", children: text }), rightIcon && (_jsx("span", { className: `${state.size === "small" ? "class icon" : "class-2 icon"}`, children: rightIcon }))] }));
 };
 function reducer(state, action) {
-    switch (action) {
+    switch (action.type) {
         case "mouse_enter":
             return state.status === "default"
                 ? { ...state, status: "hover" }
@@ -29,8 +42,11 @@ function reducer(state, action) {
                 : state;
         case "click":
             return { ...state, status: state.status === "selected" ? "default" : "selected" };
+        case "set_status":
+            return { ...state, status: action.payload };
+        default:
+            return state;
     }
-    return state;
 }
 SelectionButton.propTypes = {
     text: PropTypes.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "3.5.0",
+  "version": "3.5.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",