krl-alfred 2.23.13 → 2.23.15

package/dist/components/CheckboxGroup/stories/CheckboxGroup.stories.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
 declare const _default: {
     title: string;
-    component: ({ options, value, onChange, name, label, disabled, size, textSize, layout, valid, labelOffset, color, verticalAlign, required, readOnly, gap, }: import("../props").CheckboxGroup) => React.JSX.Element;
+    component: (props: any) => React.JSX.Element;
     tags: string[];
     argTypes: {
         layout: {
@@ -28,6 +28,21 @@ declare const _default: {
         readOnly: {
             control: string;
         };
+        gap: {
+            control: string;
+        };
+        label: {
+            control: string;
+        };
+        options: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        onChange: {
+            action: string;
+        };
     };
 };
 export default _default;
@@ -44,19 +59,142 @@ export declare const Default: {
         layout: string;
         size: string;
         textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const Vertical: {
+    args: {
+        layout: string;
+        name: string;
+        label: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        value: string[];
+        onChange: (values: any) => void;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
     };
 };
 export declare const Horizontal: {
     args: {
+        name: string;
+        label: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        value: string[];
+        layout: string;
+        size: string;
+        onChange: (values: any) => void;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const Empty: {
+    args: {
+        options: any[];
+        value: any[];
+        label: string;
+        name: string;
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const WithoutLabel: {
+    args: {
+        label: any;
+        name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        value: string[];
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const NoneSelected: {
+    args: {
+        value: any[];
+        label: string;
         name: string;
         options: {
             label: string;
             value: string;
         }[];
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const AllSelected: {
+    args: {
         value: string[];
+        label: string;
+        name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
         onChange: (values: any) => void;
         layout: string;
         size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
     };
 };
 export declare const WithDisabledOptions: {
@@ -72,7 +210,267 @@ export declare const WithDisabledOptions: {
             disabled: boolean;
         })[];
         value: string[];
+        label: string;
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const DisabledGroup: {
+    args: {
+        disabled: boolean;
+        label: string;
+        value: string[];
+        name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const Invalid: {
+    args: {
+        valid: boolean;
+        label: string;
+        value: any[];
+        name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const Optional: {
+    args: {
+        required: boolean;
+        label: string;
+        name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        value: string[];
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const ReadOnly: {
+    args: {
+        readOnly: boolean;
+        label: string;
+        value: string[];
+        name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const Large: {
+    args: {
+        size: string;
+        textSize: string;
+        label: string;
+        name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        value: string[];
+        onChange: (values: any) => void;
+        layout: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const CustomGap: {
+    args: {
+        gap: string;
+        label: string;
+        name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        value: string[];
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const LongLabels: {
+    args: {
+        label: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        value: string[];
+        verticalAlign: string;
+        name: string;
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+    };
+};
+export declare const AllLayouts: {
+    args: {
+        name: string;
+        label: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        value: string[];
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+    render: (args: any) => React.JSX.Element;
+};
+export declare const AllSizes: {
+    args: {
+        name: string;
+        label: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        value: string[];
         onChange: (values: any) => void;
         layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+    render: (args: any) => React.JSX.Element;
+};
+export declare const Interactive: {
+    render: (args: any) => React.JSX.Element;
+    args: {
+        name: string;
+        label: string;
+        value: string[];
+        options: {
+            label: string;
+            value: string;
+        }[];
+        onChange: (values: any) => void;
+        layout: string;
+        size: string;
+        textSize: string;
+        disabled: boolean;
+        valid: boolean;
+        required: boolean;
+        readOnly: boolean;
+        gap: string;
+        labelOffset: string;
+        verticalAlign: string;
+    };
+};
+export declare const Complete: {
+    args: {
+        name: string;
+        label: string;
+        layout: string;
+        size: string;
+        textSize: string;
+        required: boolean;
+        gap: string;
+        options: ({
+            label: string;
+            value: string;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            disabled: boolean;
+        })[];
+        value: string[];
+        onChange: (values: any) => void;
+        disabled: boolean;
+        valid: boolean;
+        readOnly: boolean;
+        labelOffset: string;
+        verticalAlign: string;
     };
 };

package/dist/components/CheckboxGroup/stories/CheckboxGroup.stories.js

@@ -1,66 +1,152 @@
 "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.WithDisabledOptions = exports.Horizontal = exports.Default = void 0;
+exports.Complete = exports.Interactive = exports.AllSizes = exports.AllLayouts = exports.LongLabels = exports.CustomGap = exports.Large = exports.ReadOnly = exports.Optional = exports.Invalid = exports.DisabledGroup = exports.WithDisabledOptions = exports.AllSelected = exports.NoneSelected = exports.WithoutLabel = exports.Empty = exports.Horizontal = exports.Vertical = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var CheckboxGroup_1 = __importDefault(require("../CheckboxGroup"));
 var props_1 = require("../props");
+var defaultOptions = [
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
+];
+var baseArgs = {
+    name: "exampleCheckboxGroup",
+    label: "Select Options",
+    options: defaultOptions,
+    value: ["option1"],
+    onChange: function (values) { return console.log("Selected values:", values); },
+    layout: "vertical",
+    size: "small",
+    textSize: "medium",
+    disabled: false,
+    valid: true,
+    required: true,
+    readOnly: false,
+    gap: "1rem",
+    labelOffset: "0.5rem",
+    verticalAlign: "center",
+};
 exports.default = {
-    title: 'Components/CheckboxGroup',
-    component: CheckboxGroup_1.default,
-    tags: ['autodocs'],
+    title: "Components/CheckboxGroup",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: 520 } }, { children: (0, jsx_runtime_1.jsx)(CheckboxGroup_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
     argTypes: {
-        layout: { control: 'select', options: props_1.layouts },
-        size: { control: 'select', options: props_1.sizes },
-        textSize: { control: 'select', options: props_1.textSizes },
-        disabled: { control: 'boolean' },
-        valid: { control: 'boolean' },
-        required: { control: 'boolean' },
-        readOnly: { control: 'boolean' },
-    }
+        layout: { control: "select", options: props_1.layouts },
+        size: { control: "select", options: props_1.sizes },
+        textSize: { control: "select", options: props_1.textSizes },
+        disabled: { control: "boolean" },
+        valid: { control: "boolean" },
+        required: { control: "boolean" },
+        readOnly: { control: "boolean" },
+        gap: { control: "text" },
+        label: { control: "text" },
+        options: { control: "object" },
+        value: { control: "object" },
+        onChange: { action: "changed" },
+    },
 };
 exports.Default = {
-    args: {
-        name: "exampleCheckboxGroup",
-        label: "Select Options",
-        options: [
-            { label: "Option 1", value: "option1" },
-            { label: "Option 2", value: "option2" },
-            { label: "Option 3", value: "option3" },
-        ],
-        value: ["option1"],
-        onChange: function (values) { return console.log("Selected values:", values); },
-        layout: "vertical",
-        size: "small",
-        textSize: "medium",
-    },
+    args: __assign({}, baseArgs),
+};
+exports.Vertical = {
+    args: __assign(__assign({}, baseArgs), { layout: "vertical" }),
 };
 exports.Horizontal = {
-    args: {
-        name: "horizontalCheckboxGroup",
-        options: [
+    args: __assign(__assign({}, baseArgs), { name: "horizontalCheckboxGroup", label: "Yatay seçenekler", options: [
             { label: "Option A", value: "a" },
             { label: "Option B", value: "b" },
             { label: "Option C", value: "c" },
             { label: "Option D", value: "d" },
-        ],
-        value: ["a", "c"],
-        onChange: function (values) { return console.log("Selected values:", values); },
-        layout: "horizontal",
-        size: "medium",
-    },
+        ], value: ["a", "c"], layout: "horizontal", size: "medium" }),
+};
+exports.Empty = {
+    args: __assign(__assign({}, baseArgs), { options: [], value: [], label: "Boş grup" }),
+};
+exports.WithoutLabel = {
+    args: __assign(__assign({}, baseArgs), { label: undefined }),
+};
+exports.NoneSelected = {
+    args: __assign(__assign({}, baseArgs), { value: [], label: "Hiçbiri seçili değil" }),
+};
+exports.AllSelected = {
+    args: __assign(__assign({}, baseArgs), { value: ["option1", "option2", "option3"], label: "Tümü seçili" }),
 };
 exports.WithDisabledOptions = {
-    args: {
-        name: "disabledCheckboxGroup",
-        options: [
+    args: __assign(__assign({}, baseArgs), { name: "disabledCheckboxGroup", options: [
             { label: "Enabled Option", value: "enabled" },
             { label: "Disabled Option", value: "disabled", disabled: true },
             { label: "Another Enabled", value: "enabled2" },
-        ],
-        value: ["enabled"],
-        onChange: function (values) { return console.log("Selected values:", values); },
-        layout: "vertical",
-    },
+        ], value: ["enabled"] }),
+};
+exports.DisabledGroup = {
+    args: __assign(__assign({}, baseArgs), { disabled: true, label: "Tüm grup disabled", value: ["option1", "option2"] }),
+};
+exports.Invalid = {
+    args: __assign(__assign({}, baseArgs), { valid: false, label: "Geçersiz seçim", value: [] }),
+};
+exports.Optional = {
+    args: __assign(__assign({}, baseArgs), { required: false, label: "İsteğe bağlı seçenekler" }),
+};
+exports.ReadOnly = {
+    args: __assign(__assign({}, baseArgs), { readOnly: true, label: "Salt okunur grup", value: ["option1", "option3"] }),
+};
+exports.Large = {
+    args: __assign(__assign({}, baseArgs), { size: "large", textSize: "large", label: "Large checkbox group" }),
+};
+exports.CustomGap = {
+    args: __assign(__assign({}, baseArgs), { gap: "2rem", label: "Geniş boşluklu grup" }),
+};
+exports.LongLabels = {
+    args: __assign(__assign({}, baseArgs), { label: "Uzun etiketler", options: [
+            {
+                label: "Çok uzun birinci seçenek metni, satır kırılımını ve hizalamayı kontrol eder",
+                value: "long1",
+            },
+            {
+                label: "İkinci uzun seçenek: kullanıcıya açıklayıcı bir metin sunar",
+                value: "long2",
+            },
+            {
+                label: "Üçüncü seçenek",
+                value: "short",
+            },
+        ], value: ["long1"], verticalAlign: "flex-start" }),
+};
+exports.AllLayouts = {
+    args: baseArgs,
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: 32 } }, { children: props_1.layouts.map(function (layout) { return ((0, jsx_runtime_1.jsx)(CheckboxGroup_1.default, __assign({}, args, { name: "group_".concat(layout), layout: layout, label: "".concat(layout, " layout") }), layout)); }) }))); },
+};
+exports.AllSizes = {
+    args: baseArgs,
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: 32 } }, { children: props_1.sizes.map(function (size) { return ((0, jsx_runtime_1.jsx)(CheckboxGroup_1.default, __assign({}, args, { name: "group_size_".concat(size), size: size, label: "".concat(size, " size") }), size)); }) }))); },
+};
+var InteractiveStory = function (args) {
+    var _a = react_1.default.useState(args.value || []), value = _a[0], setValue = _a[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 520 } }, { children: [(0, jsx_runtime_1.jsx)(CheckboxGroup_1.default, __assign({}, args, { value: value, onChange: setValue })), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 16, font: "var(--caption-medium-11-13)", color: "var(--dark-opacity-50)" } }, { children: ["Se\u00E7ili: ", value.length ? value.join(", ") : "—"] }))] })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
+    args: __assign(__assign({}, baseArgs), { name: "interactiveCheckboxGroup", label: "Seçimlerini değiştir", value: ["option1"] }),
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { name: "completeCheckboxGroup", label: "Tüm özellikler aktif", layout: "horizontal", size: "medium", textSize: "large", required: false, gap: "1.5rem", options: [
+            { label: "Aktif", value: "a" },
+            { label: "Pasif seçenek", value: "b", disabled: true },
+            { label: "Üçüncü", value: "c" },
+        ], value: ["a", "c"] }),
 };

package/dist/components/CircleProgress/CircleProgress.styled.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export declare const CircleProgressStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").CircleProgress> & import("./props").CircleProgress, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").CircleProgress> & import("./props").CircleProgress, never>>> & string;
+export declare const CircleProgressStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, import("./props").CircleProgress>> & string;