albinasoft-ui-package 1.0.4 → 1.0.6

package/dist/CustomTextarea/CustomTextarea.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var fa_1 = require("react-icons/fa");
+var CustomTextarea = function (_a) {
+    var id = _a.id, name = _a.name, label = _a.label, value = _a.value, placeholder = _a.placeholder, _b = _a.required, required = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, _c = _a.conditionalErrorVisible, conditionalErrorVisible = _c === void 0 ? false : _c, conditionalErrorMessage = _a.conditionalErrorMessage, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.rows, rows = _f === void 0 ? 3 : _f, description = _a.description, tooltip = _a.tooltip, style = _a.style, className = _a.className, onChange = _a.onChange;
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement("div", { className: "form-group" },
+            react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
+            react_1.default.createElement("div", { className: "position-relative" },
+                tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(tooltip) }, tooltip) },
+                    react_1.default.createElement("textarea", { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, className: "form-control", style: style, required: required, disabled: disabled, readOnly: readOnly, rows: rows }))) : (react_1.default.createElement("textarea", { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, className: "form-control", style: style, required: required, disabled: disabled, readOnly: readOnly, rows: rows })),
+                required && (react_1.default.createElement("div", { className: "invalid-feedback text-danger" },
+                    react_1.default.createElement("div", { className: "description-icon" },
+                        react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
+                    react_1.default.createElement("div", { className: "description-text" },
+                        react_1.default.createElement("span", null, errorMessage || 'Bu alan boş bırakılamaz.')))),
+                conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning" },
+                    react_1.default.createElement("div", { className: "description-icon" },
+                        react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
+                    react_1.default.createElement("div", { className: "description-text" },
+                        react_1.default.createElement("span", null, conditionalErrorMessage)))),
+                description && (react_1.default.createElement("div", { className: "form-description text-secondary" },
+                    react_1.default.createElement("div", { className: "description-icon" },
+                        react_1.default.createElement(fa_1.FaInfoCircle, null)),
+                    react_1.default.createElement("div", { className: "description-text" },
+                        react_1.default.createElement("span", null, description))))))));
+};
+exports.default = CustomTextarea;

package/dist/CustomTreeView/CustomTreeView.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import 'react-checkbox-tree/lib/react-checkbox-tree.css';
+interface CustomTreeViewProps {
+    label?: string;
+    value: string[];
+    treeData: TreeNode[];
+    onChange: (selected: string[]) => void;
+}
+export interface TreeNode {
+    label: string;
+    value: string;
+    children?: TreeNode[];
+}
+declare const CustomTreeView: React.FC<CustomTreeViewProps>;
+export default CustomTreeView;

package/dist/CustomTreeView/CustomTreeView.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_checkbox_tree_1 = __importDefault(require("react-checkbox-tree"));
+require("react-checkbox-tree/lib/react-checkbox-tree.css");
+var fa_1 = require("react-icons/fa");
+var CustomTreeView = function (_a) {
+    var label = _a.label, value = _a.value, treeData = _a.treeData, onChange = _a.onChange;
+    var _b = (0, react_1.useState)(value), checked = _b[0], setChecked = _b[1]; // Seçilen düğümler
+    var _c = (0, react_1.useState)([]), expanded = _c[0], setExpanded = _c[1]; // Genişletilen düğümler
+    var handleCheck = function (checkedNodes) {
+        setChecked(checkedNodes);
+        onChange(checkedNodes);
+    };
+    return (react_1.default.createElement("div", null,
+        label && react_1.default.createElement("label", null, label),
+        react_1.default.createElement(react_checkbox_tree_1.default, { nodes: treeData, checked: checked, expanded: expanded, onCheck: handleCheck, onExpand: setExpanded, icons: {
+                check: react_1.default.createElement(fa_1.FaCheckSquare, { color: "#4caf50" }),
+                //uncheck: <FaSquare color="#f44336" />,
+                uncheck: react_1.default.createElement(fa_1.FaSquare, { color: "currentColor" }),
+                halfCheck: react_1.default.createElement(fa_1.FaMinusSquare, { color: "#ff9800" }),
+                expandClose: react_1.default.createElement(fa_1.FaChevronRight, { color: "#3f51b5" }),
+                expandOpen: react_1.default.createElement(fa_1.FaChevronDown, { color: "#3f51b5" }),
+                expandAll: react_1.default.createElement(fa_1.FaChevronRight, { color: "#2196f3" }),
+                collapseAll: react_1.default.createElement(fa_1.FaChevronDown, { color: "#2196f3" }),
+                parentClose: react_1.default.createElement(fa_1.FaFolder, { color: "#ff9800" }),
+                parentOpen: react_1.default.createElement(fa_1.FaFolderOpen, { color: "#ff9800" }),
+                leaf: react_1.default.createElement(fa_1.FaFile, { color: "#607d8b" }),
+                // parentClose: null, 
+                // parentOpen: null, 
+                // leaf: null,
+            } })));
+};
+exports.default = CustomTreeView;

package/dist/components/CustomButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface CustomButtonProps {
+    id?: string;
+    label: React.ReactNode;
+    name?: string;
+    onClick: (event: React.FormEvent) => void;
+    style?: React.CSSProperties;
+    className?: string;
+    tooltip?: string;
+    disabled?: boolean;
+}
+declare const CustomButton: React.FC<CustomButtonProps>;
+export default CustomButton;

package/dist/components/CustomButton.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var CustomButton = function (_a) {
+    var id = _a.id, name = _a.name, label = _a.label, onClick = _a.onClick, style = _a.style, className = _a.className, tooltip = _a.tooltip, disabled = _a.disabled;
+    var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
+    var handleClick = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    event.preventDefault();
+                    setIsLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    return [4 /*yield*/, onClick(event)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var buttonClassName = className || 'btn btn-primary';
+    return tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "top", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(tooltip) }, tooltip) },
+        react_1.default.createElement("span", null,
+            react_1.default.createElement("button", { className: buttonClassName, onClick: handleClick, disabled: isLoading || disabled, style: style }, isLoading ? (react_1.default.createElement("span", { className: "spinner spinner-border spinner-border-sm", role: "status", "aria-hidden": "true" })) : (label))))) : (react_1.default.createElement("button", { className: buttonClassName, onClick: handleClick, disabled: isLoading || disabled, style: style }, isLoading ? (react_1.default.createElement("span", { className: "spinner spinner-border spinner-border-sm", role: "status", "aria-hidden": "true" })) : (label)));
+};
+exports.default = CustomButton;

package/dist/components/CustomCheckbox.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface CustomCheckboxProps {
+    id?: string;
+    name?: string;
+    label: string;
+    value: boolean;
+    required?: boolean;
+    errorMessage?: string;
+    conditionalErrorVisible?: boolean;
+    conditionalErrorMessage?: string;
+    tooltip?: string;
+    description?: string | null;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const CustomCheckbox: React.FC<CustomCheckboxProps>;
+export default CustomCheckbox;

package/dist/components/CustomCheckbox.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var fa_1 = require("react-icons/fa");
+var CustomCheckbox = function (_a) {
+    var id = _a.id, name = _a.name, label = _a.label, value = _a.value, _b = _a.required, required = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, conditionalErrorVisible = _a.conditionalErrorVisible, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _c = _a.disabled, disabled = _c === void 0 ? false : _c, className = _a.className, style = _a.style, onChange = _a.onChange;
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement("div", { className: "form-check form-group", style: style },
+            tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id || name) }, tooltip) : react_1.default.createElement(react_1.default.Fragment, null) },
+                react_1.default.createElement("input", { id: id, name: name, type: "checkbox", className: "form-check-input", checked: value, disabled: disabled, onChange: onChange, required: required }))) : (react_1.default.createElement("input", { id: id, name: name, type: "checkbox", className: "form-check-input", checked: value, disabled: disabled, onChange: onChange, required: required })),
+            react_1.default.createElement("label", { htmlFor: id, className: "form-check-label" }, label),
+            required && (react_1.default.createElement("div", { className: "invalid-feedback text-danger" },
+                react_1.default.createElement("div", { className: "description-icon" },
+                    react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
+                react_1.default.createElement("div", { className: "description-text" },
+                    react_1.default.createElement("span", null, errorMessage || 'Bu seçim zorunludur.')))),
+            conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning" },
+                react_1.default.createElement("div", { className: "description-icon" },
+                    react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
+                react_1.default.createElement("div", { className: "description-text" },
+                    react_1.default.createElement("span", null, conditionalErrorMessage)))),
+            description && (react_1.default.createElement("div", { className: "form-description text-secondary" },
+                react_1.default.createElement("div", { className: "description-icon" },
+                    react_1.default.createElement(fa_1.FaInfoCircle, null)),
+                react_1.default.createElement("div", { className: "description-text" },
+                    react_1.default.createElement("span", null, description)))))));
+};
+exports.default = CustomCheckbox;

package/dist/components/CustomDateTimePicker.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+declare enum TimeFormat {
+    H = "HH",
+    M = "mm",
+    HM = "HH:mm"
+}
+interface CustomDateTimePickerProps {
+    id?: string;
+    name?: string;
+    label: string;
+    value: Date | null;
+    placeholder?: string;
+    required?: boolean;
+    errorMessage?: string;
+    conditionalErrorVisible?: boolean;
+    conditionalErrorMessage?: string;
+    tooltip?: string;
+    description?: string | null;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    showTimeSelect?: boolean;
+    showTimeSelectOnly?: boolean;
+    timeFormat?: TimeFormat;
+    timeIntervals?: number;
+    onChange: (date: Date | null) => void;
+}
+declare const CustomDateTimePicker: React.FC<CustomDateTimePickerProps>;
+export { CustomDateTimePicker, TimeFormat };
+export default CustomDateTimePicker;

package/dist/components/CustomDateTimePicker.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeFormat = exports.CustomDateTimePicker = void 0;
+var react_1 = __importDefault(require("react"));
+var react_datepicker_1 = __importDefault(require("react-datepicker"));
+require("react-datepicker/dist/react-datepicker.css");
+var react_bootstrap_1 = require("react-bootstrap");
+var fa_1 = require("react-icons/fa");
+var TimeFormat;
+(function (TimeFormat) {
+    TimeFormat["H"] = "HH";
+    TimeFormat["M"] = "mm";
+    TimeFormat["HM"] = "HH:mm";
+})(TimeFormat || (TimeFormat = {}));
+exports.TimeFormat = TimeFormat;
+var CustomDateTimePicker = function (_a) {
+    var id = _a.id, name = _a.name, label = _a.label, value = _a.value, placeholder = _a.placeholder, _b = _a.required, required = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, _c = _a.conditionalErrorVisible, conditionalErrorVisible = _c === void 0 ? false : _c, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, style = _a.style, showTimeSelect = _a.showTimeSelect, showTimeSelectOnly = _a.showTimeSelectOnly, _e = _a.timeFormat, timeFormat = _e === void 0 ? TimeFormat.HM : _e, timeIntervals = _a.timeIntervals, onChange = _a.onChange;
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement("div", { className: "form-group" },
+            react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
+            react_1.default.createElement("div", { className: "position-relative" },
+                react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id) }, tooltip) : react_1.default.createElement(react_1.default.Fragment, null) },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(react_datepicker_1.default, { id: id, name: name, selected: value, onChange: onChange, className: "form-control ".concat(className || ''), placeholderText: placeholder, disabled: disabled, required: required, showTimeSelect: showTimeSelect || false, showTimeSelectOnly: showTimeSelectOnly || false, showTimeCaption: false, timeFormat: timeFormat, dateFormat: showTimeSelectOnly ? timeFormat : showTimeSelect ? "dd.MM.yyyy HH:mm" : "dd.MM.yyyy", timeIntervals: timeFormat == TimeFormat.H ? 60 : timeFormat == TimeFormat.M ? 1 : timeIntervals ? timeIntervals : 30 }))),
+                required && !value && (react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
+                    react_1.default.createElement("div", { className: "description-icon" },
+                        react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
+                    react_1.default.createElement("div", { className: "description-text" },
+                        react_1.default.createElement("span", null, errorMessage || 'This field is required.')))),
+                conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning mt-2" },
+                    react_1.default.createElement("div", { className: "description-icon" },
+                        react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
+                    react_1.default.createElement("div", { className: "description-text" },
+                        react_1.default.createElement("span", null, conditionalErrorMessage)))),
+                description && (react_1.default.createElement("div", { className: "form-description text-secondary mt-2" },
+                    react_1.default.createElement("div", { className: "description-icon" },
+                        react_1.default.createElement(fa_1.FaInfoCircle, null)),
+                    react_1.default.createElement("div", { className: "description-text" },
+                        react_1.default.createElement("span", null, description))))))));
+};
+exports.CustomDateTimePicker = CustomDateTimePicker;
+exports.default = CustomDateTimePicker;

package/dist/components/CustomDivider.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+declare enum Color {
+    DEFAULT = "currentColor",
+    PRIMARY = "text-primary",
+    SECONDARY = "text-secondary",
+    SUCCESS = "text-success",
+    WARNING = "text-warning",
+    DANGER = "text-danger",
+    INFO = "text-info",
+    DARK = "text-dark",
+    LIGHT = "text-light"
+}
+declare enum Alignment {
+    LEFT = "left",
+    CENTER = "center",
+    RIGHT = "right"
+}
+declare enum Thickness {
+    T1 = "1px",
+    T2 = "2px",
+    T3 = "3px",
+    T4 = "4px",
+    T5 = "5px",
+    T6 = "6px",
+    T8 = "8px",
+    T10 = "10px",
+    T12 = "12px",
+    T16 = "16px",
+    T24 = "24px"
+}
+declare enum Width {
+    W10 = "10%",
+    W25 = "25%",
+    W33 = "33%",
+    W50 = "50%",
+    W66 = "66%",
+    W75 = "75%",
+    W100 = "100%"
+}
+interface CustomDividerProps {
+    id?: string;
+    color?: Color;
+    thickness?: Thickness;
+    width?: Width;
+    alignment?: Alignment;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const CustomDivider: React.FC<CustomDividerProps>;
+export { CustomDivider, Color, Alignment, Thickness, Width };
+export default CustomDivider;

package/dist/components/CustomDivider.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Width = exports.Thickness = exports.Alignment = exports.Color = exports.CustomDivider = void 0;
+var react_1 = __importDefault(require("react"));
+var Color;
+(function (Color) {
+    Color["DEFAULT"] = "currentColor";
+    Color["PRIMARY"] = "text-primary";
+    Color["SECONDARY"] = "text-secondary";
+    Color["SUCCESS"] = "text-success";
+    Color["WARNING"] = "text-warning";
+    Color["DANGER"] = "text-danger";
+    Color["INFO"] = "text-info";
+    Color["DARK"] = "text-dark";
+    Color["LIGHT"] = "text-light";
+})(Color || (Color = {}));
+exports.Color = Color;
+var Alignment;
+(function (Alignment) {
+    Alignment["LEFT"] = "left";
+    Alignment["CENTER"] = "center";
+    Alignment["RIGHT"] = "right";
+})(Alignment || (Alignment = {}));
+exports.Alignment = Alignment;
+var Thickness;
+(function (Thickness) {
+    Thickness["T1"] = "1px";
+    Thickness["T2"] = "2px";
+    Thickness["T3"] = "3px";
+    Thickness["T4"] = "4px";
+    Thickness["T5"] = "5px";
+    Thickness["T6"] = "6px";
+    Thickness["T8"] = "8px";
+    Thickness["T10"] = "10px";
+    Thickness["T12"] = "12px";
+    Thickness["T16"] = "16px";
+    Thickness["T24"] = "24px";
+})(Thickness || (Thickness = {}));
+exports.Thickness = Thickness;
+var Width;
+(function (Width) {
+    Width["W10"] = "10%";
+    Width["W25"] = "25%";
+    Width["W33"] = "33%";
+    Width["W50"] = "50%";
+    Width["W66"] = "66%";
+    Width["W75"] = "75%";
+    Width["W100"] = "100%";
+})(Width || (Width = {}));
+exports.Width = Width;
+var CustomDivider = function (_a) {
+    var id = _a.id, _b = _a.color, color = _b === void 0 ? Color.DEFAULT : _b, // Varsayılan renk (gri ton)
+    _c = _a.thickness, // Varsayılan renk (gri ton)
+    thickness = _c === void 0 ? Thickness.T1 : _c, // Varsayılan kalınlık
+    _d = _a.width, // Varsayılan kalınlık
+    width = _d === void 0 ? Width.W100 : _d, // Varsayılan genişlik
+    _e = _a.alignment, // Varsayılan genişlik
+    alignment = _e === void 0 ? Alignment.CENTER : _e, // Varsayılan hizalama
+    _f = _a.className, // Varsayılan hizalama
+    className = _f === void 0 ? '' : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
+    var combinedClassName = "".concat(color, " ").concat(className).trim();
+    // Hizalama stilini belirleme
+    var alignmentStyle = {
+        marginLeft: alignment === 'left' ? '0' : 'auto',
+        marginRight: alignment === 'right' ? '0' : 'auto',
+    };
+    return (react_1.default.createElement("hr", { id: id || "custom-divider-".concat(Date.now()), 
+        //className={`custom-divider ${className}`.trim()}
+        className: "custom-divider ".concat(combinedClassName), style: __assign(__assign({ border: 'none', borderTop: "".concat(thickness, " solid"), // Çizgiyi oluştur
+            width: width }, alignmentStyle), style) }));
+};
+exports.CustomDivider = CustomDivider;
+exports.default = CustomDivider;

package/dist/components/CustomForm.d.ts

@@ -0,0 +1,159 @@
+import React from 'react';
+import { TreeNode } from './CustomTreeView';
+declare enum ElementType {
+    INPUT = "input",
+    TEXTAREA = "textarea",
+    CHECKBOX = "checkbox",
+    RADIO = "radio",
+    SELECT = "select",
+    DATETIMEPICKER = "datetimepicker",
+    TEXT = "text",
+    DIVIDER = "divider",
+    RICHTEXTBOX = "richtextbox",
+    TREEVIEW = "treeview",
+    BUTTON = "button"
+}
+interface InputElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface TextareaElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+interface CheckboxElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: boolean;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface RadioButtonElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string;
+    options: {
+        id: string;
+        label: string;
+        value: string;
+    }[];
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface SelectElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string[];
+    options: {
+        id: string;
+        label: string;
+        value: string;
+    }[];
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (value: string | string[]) => void;
+}
+interface DateTimePickerElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: Date | null;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (e: Date | null) => void;
+}
+interface TextElement {
+    id: string;
+    type: ElementType;
+    value: string;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+interface DividerElement {
+    id?: string;
+    type: ElementType;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface RichTextboxElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (value: string) => void;
+}
+interface TreeViewElement {
+    id?: string;
+    type: ElementType;
+    label?: string;
+    value: string[];
+    treeData: TreeNode[];
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (selected: string[]) => void;
+}
+interface ButtonElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    className?: string;
+    onClick: (event: React.FormEvent) => void;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+}
+type FormElement = InputElement | TextareaElement | CheckboxElement | RadioButtonElement | SelectElement | DateTimePickerElement | TextElement | DividerElement | RichTextboxElement | TreeViewElement | ButtonElement;
+interface CustomFormProps {
+    elements: FormElement[];
+    onSubmit: (formValues: Record<string, any>) => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    handleCancel?: () => void;
+    showConfirmButton?: boolean;
+    showCancelButton?: boolean;
+}
+declare const CustomForm: React.FC<CustomFormProps>;
+export { CustomForm, ElementType };
+export default CustomForm;