kelt-ui-kit-react 1.2.3 → 1.2.5

package/src/search/search.css

@@ -1,59 +1,59 @@
-.search {
-  position: relative;
-  .search-input {
-    border: 0px;
-    background-color: #ebe8e8;
-    border-radius: 4px;
-    padding: 0.75rem;
-    flex-direction: row;
-    align-items: center;
-    .bi {
-      color: #868585;
-      font-size: 1rem;
-    }
-    input {
-      border: none;
-      background-color: transparent;
-      border-radius: 0px;
-      padding: 0px;
-      margin-left: 0.25rem;
-      padding: 0.25rem 0.5rem;
-      width: 100%;
-      outline: none;
-      min-width: auto;
-    }
-  }
-  .search-result {
-    position: absolute;
-    width: 100%;
-    top: 70px;
-    border: 1px solid #cfbdbd;
-    min-height: 100px;
-    z-index: 3;
-    background-color: #fff;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
-    padding: 0rem 1rem;
-    .search-result-close {
-      position: relative;
-
-      .toggle-btn {
-        position: absolute;
-        right: -10px;
-        top: 10px;
-
-        .bi {
-          font-size: 1rem;
-        }
-      }
-    }
-
-    .search-result-content {
-      margin-right: 1rem;
-      padding: 1rem 0rem;
-      & > div {
-        max-height: 350px;
-        overflow: auto;
-      }
-    }
-  }
-}
+.search {
+  position: relative;
+  .search-input {
+    border: 0px;
+    background-color: #ebe8e8;
+    border-radius: 4px;
+    padding: 0.75rem;
+    flex-direction: row;
+    align-items: center;
+    .bi {
+      color: #868585;
+      font-size: 1rem;
+    }
+    input {
+      border: none;
+      background-color: transparent;
+      border-radius: 0px;
+      padding: 0px;
+      margin-left: 0.25rem;
+      padding: 0.25rem 0.5rem;
+      width: 100%;
+      outline: none;
+      min-width: auto;
+    }
+  }
+  .search-result {
+    position: absolute;
+    width: 100%;
+    top: 70px;
+    border: 1px solid #cfbdbd;
+    min-height: 100px;
+    z-index: 3;
+    background-color: #fff;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
+    padding: 0rem 1rem;
+    .search-result-close {
+      position: relative;
+
+      .toggle-btn {
+        position: absolute;
+        right: -10px;
+        top: 10px;
+
+        .bi {
+          font-size: 1rem;
+        }
+      }
+    }
+
+    .search-result-content {
+      margin-right: 1rem;
+      padding: 1rem 0rem;
+      & > div {
+        max-height: 350px;
+        overflow: auto;
+      }
+    }
+  }
+}

package/src/select/Select.tsx

@@ -1,53 +1,53 @@
-import "./select.css";
-import { SelectOptionInterface } from "./selectOption.interface";
-export interface SelectProps {
-  id?: string;
-  label?: string;
-  title?: string;
-  disabled?: boolean;
-  defaultValue?: string;
-  value?: string;
-  className?: string;
-  options: SelectOptionInterface[];
-  onChange?: (value: string) => void;
-  placeholder?: string;
-}
-
-export const Select = ({
-  id,
-  label,
-  options,
-  className,
-  disabled,
-  defaultValue,
-  onChange,
-  value,
-  placeholder,
-}: SelectProps): JSX.Element => {
-  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedValue = event.target.value;
-    if (onChange) {
-      onChange(selectedValue);
-    }
-  };
-  return (
-    <div id={id} className={`select-container ${className ? className : ""}`}>
-      {label && <label className="select-container-label">{label}</label>}
-      <select
-        disabled={disabled}
-        className="select-container-select"
-        value={value ?? defaultValue ?? ""}
-        onChange={handleChange}
-      >
-        {placeholder && !defaultValue && (
-          <option value="">{placeholder}</option>
-        )}
-        {options.map((option, index) => (
-          <option key={index} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
+import "./select.css";
+import { SelectOptionInterface } from "./selectOption.interface";
+export interface SelectProps {
+  id?: string;
+  label?: string;
+  title?: string;
+  disabled?: boolean;
+  defaultValue?: string;
+  value?: string;
+  className?: string;
+  options: SelectOptionInterface[];
+  onChange?: (value: string) => void;
+  placeholder?: string;
+}
+
+export const Select = ({
+  id,
+  label,
+  options,
+  className,
+  disabled,
+  defaultValue,
+  onChange,
+  value,
+  placeholder,
+}: SelectProps): JSX.Element => {
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = event.target.value;
+    if (onChange) {
+      onChange(selectedValue);
+    }
+  };
+  return (
+    <div id={id} className={`select-container ${className ? className : ""}`}>
+      {label && <label className="select-container-label">{label}</label>}
+      <select
+        disabled={disabled}
+        className="select-container-select"
+        value={value ?? defaultValue ?? ""}
+        onChange={handleChange}
+      >
+        {placeholder && !defaultValue && (
+          <option value="">{placeholder}</option>
+        )}
+        {options.map((option, index) => (
+          <option key={index} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};

package/src/select/Select.view.tsx

@@ -1,71 +1,71 @@
-import { useMemo } from "react";
-import { Select } from "./Select";
-
-export const SelectView = () => {
-  const selectData = useMemo(() => {
-    return [
-      {
-        id: "select",
-        title: "Select",
-        className: "select-component",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-disabled",
-        title: "Select Disabled",
-        className: "select-component",
-        disabled: true,
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-placeholder",
-        title: "Select Placeholder",
-        className: "select-component",
-        placeholder: "Select an option",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-default-value",
-        title: "Select Default Value",
-        className: "select-component",
-        defaultValue: "option2",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-value",
-        title: "Select Value",
-        className: "select-component",
-        value: "option3",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-    ];
-  }, []);
-
-  return (
-    <>
-      {selectData.map((data) => (
-        <Select {...data} />
-      ))}
-    </>
-  );
-};
+import { useMemo } from "react";
+import { Select } from "./Select";
+
+export const SelectView = () => {
+  const selectData = useMemo(() => {
+    return [
+      {
+        id: "select",
+        title: "Select",
+        className: "select-component",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-disabled",
+        title: "Select Disabled",
+        className: "select-component",
+        disabled: true,
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-placeholder",
+        title: "Select Placeholder",
+        className: "select-component",
+        placeholder: "Select an option",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-default-value",
+        title: "Select Default Value",
+        className: "select-component",
+        defaultValue: "option2",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-value",
+        title: "Select Value",
+        className: "select-component",
+        value: "option3",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+    ];
+  }, []);
+
+  return (
+    <>
+      {selectData.map((data) => (
+        <Select {...data} />
+      ))}
+    </>
+  );
+};

package/src/select/select.css

@@ -1,51 +1,51 @@
-.select-container {
-  position: relative;
-  &::after,
-  &::before {
-    --size: 0.3rem;
-    content: "";
-    position: absolute;
-    right: 1rem;
-    pointer-events: none;
-  }
-
-  &::before {
-    border-left: var(--size) solid transparent;
-    border-right: var(--size) solid transparent;
-    border-bottom: var(--size) solid black;
-    top: 40%;
-  }
-
-  &::after {
-    border-left: var(--size) solid transparent;
-    border-right: var(--size) solid transparent;
-    border-top: var(--size) solid black;
-    top: 55%;
-  }
-  .select-container-label {
-    font-weight: bold;
-    color: #333;
-    margin-bottom: 2px;
-  }
-  .select-container-select {
-    appearance: none;
-    width: 100%;
-    font-size: 1rem;
-    padding: 0.675em 6em 0.675em 1em;
-    background-color: #fff;
-    border: 1px solid #caced1;
-    border-radius: 0.25rem;
-    color: #000;
-    cursor: pointer;
-    &:disabled {
-      background-color: #e9ecef;
-      color: #6c757d;
-      cursor: not-allowed;
-    }
-    &:focus {
-      border-color: #007bff;
-      outline: none;
-      background-color: #fff;
-    }
-  }
-}
+.select-container {
+  position: relative;
+  &::after,
+  &::before {
+    --size: 0.3rem;
+    content: "";
+    position: absolute;
+    right: 1rem;
+    pointer-events: none;
+  }
+
+  &::before {
+    border-left: var(--size) solid transparent;
+    border-right: var(--size) solid transparent;
+    border-bottom: var(--size) solid black;
+    top: 40%;
+  }
+
+  &::after {
+    border-left: var(--size) solid transparent;
+    border-right: var(--size) solid transparent;
+    border-top: var(--size) solid black;
+    top: 55%;
+  }
+  .select-container-label {
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 2px;
+  }
+  .select-container-select {
+    appearance: none;
+    width: 100%;
+    font-size: 1rem;
+    padding: 0.675em 6em 0.675em 1em;
+    background-color: #fff;
+    border: 1px solid #caced1;
+    border-radius: 0.25rem;
+    color: #000;
+    cursor: pointer;
+    &:disabled {
+      background-color: #e9ecef;
+      color: #6c757d;
+      cursor: not-allowed;
+    }
+    &:focus {
+      border-color: #007bff;
+      outline: none;
+      background-color: #fff;
+    }
+  }
+}

package/src/select/selectOption.interface.ts

@@ -1,4 +1,4 @@
-export interface SelectOptionInterface {
-  value: string;
-  label: string;
-}
+export interface SelectOptionInterface {
+  value: string;
+  label: string;
+}