@ayseaistudio/ui-components 3.12.1 → 3.12.3

package/dist/Calendar/Calendar.d.ts

@@ -21,10 +21,11 @@ interface Props {
     onDaySelection?: (dates: Date[]) => void;
     maxDate?: Date;
     highlightWeekSelection?: boolean;
-    selectionVariant?: "single" | "multi" | "week";
+    selectionVariant?: "single" | "multi" | "week" | "range";
+    onClearRange?: () => void;
 }
 export declare const Calendar: {
-    ({ property1, className, tertiaryButtonIcon, override, showPrevButton, showNextButton, padToSixWeeks, disableOutsideDays, month, year, value, onChange, selectionMode, values, onChangeMultiple, appointmentDates, onDaySelection, maxDate, highlightWeekSelection, selectionVariant, }: Props): React.JSX.Element;
+    ({ property1, className, tertiaryButtonIcon, override, showPrevButton, showNextButton, padToSixWeeks, disableOutsideDays, month, year, value, onChange, selectionMode, values, onChangeMultiple, appointmentDates, onDaySelection, maxDate, highlightWeekSelection, selectionVariant, onClearRange, }: Props): React.JSX.Element;
     propTypes: {
         property1: PropTypes.Requireable<string>;
         divideDashedWrapperDivideHorizontalDivide: PropTypes.Requireable<string>;
@@ -36,6 +37,7 @@ export declare const Calendar: {
         year: PropTypes.Requireable<number>;
         highlightWeekSelection: PropTypes.Requireable<boolean>;
         selectionVariant: PropTypes.Requireable<string>;
+        onClearRange: PropTypes.Requireable<(...args: any[]) => any>;
     };
 };
 export {};

package/dist/Calendar/Calendar.js

@@ -12,13 +12,13 @@ const normalizeVariantInput = (value) => {
     const normalized = value.toLowerCase();
     if (normalized === "single")
         return "single";
-    if (normalized === "multi" || normalized === "multiple")
+    if (normalized === "multi" || normalized === "multiple" || normalized === "range")
         return "multi";
     if (normalized === "week" || normalized === "weekly")
         return "week";
     return undefined;
 };
-export const Calendar = ({ property1, className, tertiaryButtonIcon = (_jsx(IconChevronLeft, { size: 20, color: "#6D6D6D" })), override = _jsx(IconChevronRight, { size: 20, color: "#6D6D6D" }), showPrevButton = true, showNextButton = true, padToSixWeeks = true, disableOutsideDays = false, month, year, value, onChange, selectionMode, values, onChangeMultiple, appointmentDates = [], onDaySelection, maxDate, highlightWeekSelection = true, selectionVariant, }) => {
+export const Calendar = ({ property1, className, tertiaryButtonIcon = (_jsx(IconChevronLeft, { size: 20, color: "#6D6D6D" })), override = _jsx(IconChevronRight, { size: 20, color: "#6D6D6D" }), showPrevButton = true, showNextButton = true, padToSixWeeks = true, disableOutsideDays = false, month, year, value, onChange, selectionMode, values, onChangeMultiple, appointmentDates = [], onDaySelection, maxDate, highlightWeekSelection = true, selectionVariant, onClearRange, }) => {
     const effectiveVariant = React.useMemo(() => {
         // Accept both selectionVariant and selectionMode, with case-insensitive + legacy aliases
         const fromVariant = normalizeVariantInput(selectionVariant);
@@ -66,10 +66,14 @@ export const Calendar = ({ property1, className, tertiaryButtonIcon = (_jsx(Icon
             const last = sorted[sorted.length - 1];
             if (first instanceof Date && last instanceof Date) {
                 setRangeStart(first);
-                setRangeEnd(last);
+                setRangeEnd(sorted.length > 1 ? last : null);
                 setCurrentMonth(first.getMonth());
                 setCurrentYear(first.getFullYear());
             }
+            else {
+                setRangeStart(null);
+                setRangeEnd(null);
+            }
         }
         else {
             setRangeStart(null);
@@ -322,7 +326,8 @@ export const Calendar = ({ property1, className, tertiaryButtonIcon = (_jsx(Icon
     }
     return (_jsxs("div", { className: `calendar ${className} ${property1 ? `size-${property1}` : ""}`, children: [_jsxs("div", { className: "top", children: [showPrevButton && (_jsx(TertiaryButton, { color: "black", leftIcon: tertiaryButtonIcon, size: "large", status: "default", onClick: prevMonth, "aria-label": "\u00D6nceki ay" })), _jsxs("div", { className: "label-13", children: [_jsx(Label, { bold: "on", className: "label-14", color: "black", size: "large", spacing: "on", stroke: "off", text: monthNames[currentMonth], version: "primary" }), _jsx(Label, { bold: "on", className: "label-14-year", color: "black", size: "small", spacing: "off", stroke: "off", text: currentYear.toString(), version: "secondary" })] }), showNextButton && (_jsx(TertiaryButton, { color: "black", leftIcon: override, size: "large", status: "default", onClick: nextMonth, "aria-label": "Sonraki ay" }))] }), _jsx("div", { className: "divide-dashed-12" }), _jsxs("div", { className: "days", children: [_jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Pzt.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Sal.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "\u00C7ar.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Per.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Cum.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Cmt.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Pzr.", version: "primary" })] }), _jsx("div", { className: "weeks", children: weeks.map((week, wi) => {
                     const isWeekMode = effectiveVariant === "week";
-                    const weekHasSelection = highlightWeekSelection && !isWeekMode && week.some((d) => d.currentMonth && ((selectedDays || []).includes(d.day) || d.day === selectedDay));
+                    // Haftalık görünümde tüm haftayı boyamak için kullanılır; tarih aralığı (multi) modunda devre dışı.
+                    const weekHasSelection = highlightWeekSelection && isWeekMode && week.some((d) => d.currentMonth && ((selectedDays || []).includes(d.day) || d.day === selectedDay));
                     return (_jsx("div", { className: `week${weekHasSelection ? " selected-week" : ""}${isWeekMode ? " week-mode" : ""}`, children: week.map((day, di) => {
                             const cellKey = `w${wi}-d${di}`;
                             const isToday = day.currentMonth &&
@@ -383,7 +388,7 @@ export const Calendar = ({ property1, className, tertiaryButtonIcon = (_jsx(Icon
                                 : getStatusForDay(day, cellDate);
                             return day ? (_jsx("div", { className: `calendar-year-day-clickable${isDisabled ? " disabled" : ""}${isRangeCell ? " week-range" : ""}${isStartCell ? " week-start" : ""}${isEndCell ? " week-end" : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelectDate(cellDate, day.currentMonth, weekDates), children: _jsx(CalendarYearDay, { className: `calendar-year-day-instance ${day.currentMonth ? 'current-month' : 'other-month'}${isToday ? ' today' : ''}`, size: "medium", status: status, text: day.day.toString(), taskCount: taskCount, version: day.currentMonth ? "month-day" : "different-month-day" }) }, cellKey)) : (_jsx("div", { className: "calendar-year-day-empty" }, cellKey));
                         }) }, `week-${wi}`));
-                }) })] }));
+                }) }), onClearRange && (_jsx("button", { type: "button", className: "date-range-clear-button", onClick: onClearRange, children: "Temizle" }))] }));
 };
 Calendar.propTypes = {
     property1: PropTypes.oneOf(["medium"]),
@@ -395,5 +400,6 @@ Calendar.propTypes = {
     month: PropTypes.number,
     year: PropTypes.number,
     highlightWeekSelection: PropTypes.bool,
-    selectionVariant: PropTypes.oneOf(["single", "multi", "week"]),
+    selectionVariant: PropTypes.oneOf(["single", "multi", "week", "range"]),
+    onClearRange: PropTypes.func,
 };

package/dist/Calendar/style.css

@@ -1,5 +1,5 @@
 .calendar {
-  align-items: flex-start;
+  align-items: flex-end;
   background-color: #ffffff;
   border: 1px solid;
   border-color: #e7e7e7;

package/dist/LoginInput/LoginInput.js

@@ -17,7 +17,6 @@ export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status
     const [state, dispatch] = useReducer(reducer, { status });
     const [isFocused, setIsFocused] = useState(false);
     const [inputValue, setInputValue] = useState(value);
-    const [actualType, setActualType] = useState("text");
     const [showPassword, setShowPassword] = useState(false);
     const hasPasswordToggle = version === "password";
     const autoCompleteType = version === "username"
@@ -45,17 +44,10 @@ export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status
     else if (icon && React.isValidElement(icon)) {
         finalIcon = React.cloneElement(icon, { color: iconColor });
     }
-    useEffect(() => {
-        if (version === "password") {
-            const timer = setTimeout(() => {
-                setActualType(showPassword ? "text" : "password");
-            }, 100);
-            return () => clearTimeout(timer);
-        }
-    }, [version, showPassword]);
     useEffect(() => {
         setInputValue(value || "");
     }, [value]);
+    const resolvedInputType = version === "password" ? (showPassword ? "text" : "password") : finalInputType;
     const handleInputChange = (e) => {
         const rawValue = e.target.value;
         const nextValue = singleChar ? rawValue.slice(0, 1) : rawValue;
@@ -87,7 +79,7 @@ export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status
         }, onMouseEnter: () => {
             if (state.status !== "selected")
                 dispatch("mouse_enter");
-        }, children: [_jsxs("div", { className: `placeholder-container ${isFocused || inputValue ? "active" : ""}`, children: [withIcon && _jsx("span", { className: "icon-container", children: finalIcon }), _jsx("label", { className: "placeholder", htmlFor: "login-input", children: finalPlaceholder })] }), _jsx("input", { id: `login-input-${version}`, className: `input-field ${hasPasswordToggle ? "with-password-toggle" : ""}`, type: version === "password" ? actualType : finalInputType, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, autoComplete: autoCompleteType, autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", name: inputName, maxLength: singleChar ? 1 : undefined, ref: inputRef }), hasPasswordToggle && (_jsx("button", { type: "button", className: "password-toggle", onClick: togglePasswordVisibility, tabIndex: 0, children: showPassword ? (_jsx(IconEyeOff, { size: 24, strokeWidth: 1.5 })) : (_jsx(IconEye, { size: 24, strokeWidth: 1.5 })) }))] }));
+        }, children: [_jsxs("div", { className: `placeholder-container ${isFocused || inputValue ? "active" : ""}`, children: [withIcon && _jsx("span", { className: "icon-container", children: finalIcon }), _jsx("label", { className: "placeholder", htmlFor: `login-input-${version}`, children: finalPlaceholder })] }), _jsx("input", { id: `login-input-${version}`, className: `input-field ${hasPasswordToggle ? "with-password-toggle" : ""}`, type: resolvedInputType, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, autoComplete: autoCompleteType, autoCorrect: "off", autoCapitalize: "off", spellCheck: false, name: inputName, maxLength: singleChar ? 1 : undefined, ref: inputRef }), hasPasswordToggle && (_jsx("button", { type: "button", className: "password-toggle", onClick: togglePasswordVisibility, tabIndex: 0, children: showPassword ? (_jsx(IconEyeOff, { size: 24, strokeWidth: 1.5 })) : (_jsx(IconEye, { size: 24, strokeWidth: 1.5 })) }))] }));
 };
 function reducer(state, action) {
     switch (action) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "3.12.1",
+  "version": "3.12.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,14 +12,19 @@
     "react-dom": ">=18.0.0"
   },
   "scripts": {
+    "dev": "vite",
     "build": "tsc && cpy \"src/**/*.css\" dist --parents"
   },
   "devDependencies": {
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^6.0.1",
     "cpy-cli": "^6.0.0",
-    "typescript": "^5.9.3"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.1"
   },
   "dependencies": {
     "@tabler/icons-react": "^3.35.0",