@kosmeo-ui/react 0.1.0

package/dist/components/inputs/searchList/index.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import useFloatingPosition from "../../../hooks/useFloatingPosition.js";
+import useDebouncedValue from "../../../hooks/useDebouncedValue.js";
+import useScrollIntoView from "../../../hooks/useScrollIntoView.js";
+import useListKeyboard from "../../../hooks/useListKeyboard.js";
+import useOutsideClick from "../../../hooks/useOutsideClick.js";
+import Spinner from "../../feedback/spinner/index.js";
+import { useEffect, useState, useRef } from "react";
+import Portal from "../../overlays/portal/index.js";
+import Input from "../input/index.js";
+import "./styles.css";
+const SearchList = (props) => {
+    const { size = "md", required = false, disabled = false, longDropDown = false, max = 30, } = props;
+    const [inputValue, setInputValue] = useState(props.value ? String(props.value[props.labelKey]) : "");
+    const [searchValue, setSearchValue] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const dropdownRef = useRef(null);
+    const listRef = useRef(null);
+    const optionRefs = useRef([]);
+    const { anchorRef: inputWrapperRef, position: dropdownPos } = useFloatingPosition({ isOpen });
+    const query = props.queryFn(searchValue, props.searchKey, max);
+    const debouncedInput = useDebouncedValue(inputValue, 500);
+    const isTyping = inputValue !== debouncedInput && inputValue.length >= 3;
+    useEffect(() => {
+        if (props.value === null) {
+            setInputValue("");
+            setSearchValue("");
+            setIsOpen(false);
+        }
+        else if (props.value &&
+            String(props.value[props.labelKey]) !== inputValue) {
+            setInputValue(String(props.value[props.labelKey]));
+        }
+    }, [props.value]);
+    useEffect(() => {
+        if (inputValue.length === 0) {
+            props.onSelect(null);
+            if (!isOpen)
+                setSearchValue("");
+            return;
+        }
+        if (inputValue.length < 3)
+            return;
+        if (props.value && inputValue === String(props.value[props.labelKey])) {
+            setSearchValue("");
+            setIsOpen(false);
+            return;
+        }
+        setIsOpen(true);
+    }, [inputValue]);
+    useEffect(() => {
+        if (debouncedInput.length < 3) {
+            setSearchValue("");
+            return;
+        }
+        if (props.value && debouncedInput === String(props.value[props.labelKey])) {
+            setSearchValue("");
+            return;
+        }
+        setSearchValue(debouncedInput);
+    }, [debouncedInput]);
+    useOutsideClick([dropdownRef, listRef], () => setIsOpen(false));
+    useScrollIntoView(optionRefs, highlightedIndex, isOpen);
+    const handleOptionClick = (option, event) => {
+        setInputValue(String(option[props.labelKey]));
+        props.onSelect(option, event);
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+    };
+    const activeOptions = searchValue === "" && inputValue.length < 3
+        ? props.initialOptions
+        : query.data;
+    const handleKeyDown = useListKeyboard({
+        isOpen: isOpen && !!activeOptions,
+        length: activeOptions?.length ?? 0,
+        highlightedIndex,
+        setHighlightedIndex,
+        onSelect: (index) => {
+            if (activeOptions?.[index])
+                handleOptionClick(activeOptions[index]);
+        },
+        onClose: () => setIsOpen(false),
+    });
+    const handleInputFocus = () => {
+        if (inputValue.length >= 3) {
+            setIsOpen(true);
+            setSearchValue(inputValue);
+        }
+        else if (inputValue.length === 0) {
+            setIsOpen(true);
+            setSearchValue("");
+        }
+    };
+    const handleInputBlur = () => {
+        setTimeout(() => {
+            if (isOpen)
+                return;
+            if (props.value) {
+                setInputValue(String(props.value[props.labelKey]));
+                props.onSelect(props.value);
+            }
+            else {
+                setInputValue("");
+            }
+        }, 100);
+    };
+    optionRefs.current = [];
+    const dropdownList = isOpen && dropdownPos ? (_jsx("ul", { ref: listRef, className: `k-search-list-dropdown k-search-list-dropdown-portal ${longDropDown
+            ? "k-search-list-dropdown-large"
+            : "k-search-list-dropdown-small"}`, style: {
+            position: "fixed",
+            top: dropdownPos.top,
+            left: dropdownPos.left,
+            width: dropdownPos.width,
+        }, children: isTyping || query.isLoading ? (_jsx("li", { className: "k-search-list-loading", children: _jsx(Spinner, { size: "sm" }) })) : searchValue === "" && inputValue.length < 3 ? (props.initialOptions && props.initialOptions.length > 0 ? (_jsxs(_Fragment, { children: [props.initialOptions.map((option, index) => {
+                    const rendered = props.renderOption
+                        ? props.renderOption(option)
+                        : null;
+                    return (_jsx("li", { ref: (el) => {
+                            optionRefs.current[index] = el;
+                        }, className: `k-search-list-option k-search-list-option-${size} ${index === highlightedIndex
+                            ? "k-search-list-option-highlighted"
+                            : ""}`, onMouseDown: (e) => {
+                            e.preventDefault();
+                            handleOptionClick(option, e);
+                        }, onMouseOver: () => setHighlightedIndex(index), children: rendered ? rendered.node : String(option[props.labelKey]) }, index));
+                }), _jsx("li", { className: `k-search-list-info k-search-list-info-${size}`, children: "Type to filter" })] })) : (_jsx("li", { className: `k-search-list-no-results k-search-list-no-results-${size}`, children: "Start typing to search" }))) : query.data && query.data.length > 0 ? (_jsxs(_Fragment, { children: [query.data.map((option, index) => {
+                    const rendered = props.renderOption
+                        ? props.renderOption(option)
+                        : null;
+                    return (_jsx("li", { ref: (el) => {
+                            optionRefs.current[index] = el;
+                        }, className: `k-search-list-option k-search-list-option-${size} ${index === highlightedIndex
+                            ? "k-search-list-option-highlighted"
+                            : ""}`, onMouseDown: (e) => {
+                            e.preventDefault();
+                            handleOptionClick(option, e);
+                        }, onMouseOver: () => setHighlightedIndex(index), children: rendered ? rendered.node : String(option[props.labelKey]) }, index));
+                }), _jsx("li", { className: `k-search-list-info k-search-list-info-${size}`, children: "Continue typing to filter" })] })) : (_jsx("li", { className: `k-search-list-no-results k-search-list-no-results-${size}`, children: "No results found" })) })) : null;
+    return (_jsxs("div", { className: "k-search-list-container", ref: dropdownRef, children: [_jsx("div", { ref: inputWrapperRef, children: _jsx(Input, { label: props.label, required: required, disabled: disabled, value: inputValue, onChange: (e) => {
+                        const newValue = e.target.value;
+                        setInputValue(newValue);
+                    }, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: props.placeholder || "Type to search", dropDown: true, isOpen: isOpen, size: size }) }), _jsx(Portal, { children: dropdownList })] }));
+};
+export default SearchList;
+//# sourceMappingURL=index.js.map

package/dist/components/inputs/searchList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/searchList/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/searchList/styles.css

@@ -0,0 +1,114 @@
+.k-search-list-container {
+  position: relative;
+  width: 100%;
+}
+
+.k-search-list-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  background-color: var(--background-color-light);
+  border: 0.0625rem solid var(--border-color);
+  border-top: none;
+  border-radius: 0 0 0.25rem 0.25rem;
+  overflow-y: auto;
+  max-height: 20rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  box-shadow:
+    0 0.25rem 0.375rem -0.0625rem var(--shadow-color),
+    0 0.125rem 0.25rem -0.125rem var(--shadow-color);
+}
+
+.k-search-list-option {
+  cursor: pointer;
+  text-align: left;
+  color: var(--text-color);
+}
+.k-search-list-dropdown-large {
+  max-height: 30rem;
+}
+
+.k-search-list-dropdown-small {
+  max-height: 12.5rem;
+}
+
+.k-search-list-option:hover,
+.k-search-list-option:focus {
+  background-color: var(--background-color-dark);
+}
+
+.k-search-list-option-highlighted {
+  background-color: var(--background-color-dark);
+  cursor: pointer;
+}
+
+.k-search-list-option-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 0.75rem;
+}
+
+.k-search-list-option-md {
+  font-size: var(--text-size-md);
+  padding: 0.75rem 1rem;
+}
+
+.k-search-list-option-lg {
+  font-size: var(--text-size-lg);
+  padding: 1rem 1.25rem;
+}
+
+.k-search-list-loading {
+  text-align: center;
+  color: var(--text-color-secondary);
+  font-style: italic;
+  padding: 0.75rem 1rem;
+  font-size: var(--text-size-sm);
+}
+
+.k-search-list-info {
+  text-align: center;
+  color: var(--text-color-secondary);
+  font-style: italic;
+  /* border-top: 0.0625rem solid var(--border-color); */
+  background-color: var(--background-color-light);
+}
+
+.k-search-list-info-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 0.75rem;
+}
+
+.k-search-list-info-md {
+  font-size: var(--text-size-md);
+  padding: 0.75rem 1rem;
+}
+
+.k-search-list-info-lg {
+  font-size: var(--text-size-lg);
+  padding: 1rem 1.25rem;
+}
+
+.k-search-list-no-results {
+  text-align: center;
+  color: var(--text-color-secondary);
+  font-style: italic;
+}
+
+.k-search-list-no-results-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.75rem 1rem;
+}
+
+.k-search-list-no-results-md {
+  font-size: var(--text-size-md);
+  padding: 1rem 1.25rem;
+}
+
+.k-search-list-no-results-lg {
+  font-size: var(--text-size-lg);
+  padding: 1.25rem 1.5rem;
+}

package/dist/components/inputs/searchSelect/index.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { PropsWithSize } from "../../types.js";
+import "../searchList/styles.css";
+interface SearchSelectProps<T> extends PropsWithSize {
+    /** **_Optional_** label above the field. */
+    label?: string;
+    /** The currently selected option, or null. */
+    value: T | null;
+    /** In-memory options to choose from (filtered client-side as the user types). */
+    options: T[];
+    /** Visible label for an option. */
+    getOptionLabel: (option: T) => string;
+    /** Stable React key for an option. */
+    getOptionKey: (option: T) => string;
+    /** Fired ONLY on an explicit pick — never on blur, so it can't clobber edits. */
+    onSelect: (option: T) => void;
+    /** **_Optional_** custom dropdown row renderer. */
+    renderOption?: (option: T) => ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    longDropDown?: boolean;
+}
+declare const SearchSelect: <T>(props: SearchSelectProps<T>) => import("react").JSX.Element;
+export default SearchSelect;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/searchSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/searchSelect/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,0BAA0B,CAAC;AAElC,UAAU,iBAAiB,CAAC,CAAC,CAAE,SAAQ,aAAa;IAClD,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,iFAAiF;IACjF,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,mCAAmC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IACtC,sCAAsC;IACtC,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IACpC,iFAAiF;IACjF,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,mDAAmD;IACnD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,SAAS,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,GAAI,CAAC,EAAG,OAAO,iBAAiB,CAAC,CAAC,CAAC,gCA4IpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/inputs/searchSelect/index.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useFloatingPosition from "../../../hooks/useFloatingPosition.js";
+import useScrollIntoView from "../../../hooks/useScrollIntoView.js";
+import useListKeyboard from "../../../hooks/useListKeyboard.js";
+import useOutsideClick from "../../../hooks/useOutsideClick.js";
+import { useEffect, useRef, useState } from "react";
+import Portal from "../../overlays/portal/index.js";
+import Input from "../input/index.js";
+import "../searchList/styles.css";
+const SearchSelect = (props) => {
+    const { size = "md", required = false, disabled = false, longDropDown = false, } = props;
+    const selectedLabel = props.value ? props.getOptionLabel(props.value) : "";
+    const selectedLabelRef = useRef(selectedLabel);
+    selectedLabelRef.current = selectedLabel;
+    const [inputValue, setInputValue] = useState(selectedLabel);
+    const [isOpen, setIsOpen] = useState(false);
+    const [filtering, setFiltering] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const dropdownRef = useRef(null);
+    const listRef = useRef(null);
+    const optionRefs = useRef([]);
+    const { anchorRef: inputWrapperRef, position: dropdownPos } = useFloatingPosition({ isOpen });
+    useEffect(() => {
+        setInputValue(selectedLabel);
+        setFiltering(false);
+    }, [selectedLabel]);
+    const filterText = inputValue.trim().toLowerCase();
+    const filtered = filtering && filterText
+        ? props.options.filter((o) => props.getOptionLabel(o).toLowerCase().includes(filterText))
+        : props.options;
+    const restore = () => {
+        setInputValue(selectedLabelRef.current);
+        setFiltering(false);
+        setIsOpen(false);
+    };
+    useOutsideClick([dropdownRef, listRef], restore);
+    useScrollIntoView(optionRefs, highlightedIndex, isOpen);
+    const choose = (option) => {
+        props.onSelect(option);
+        setInputValue(props.getOptionLabel(option));
+        setFiltering(false);
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+    };
+    const handleKeyDown = useListKeyboard({
+        isOpen,
+        length: filtered.length,
+        highlightedIndex,
+        setHighlightedIndex,
+        onSelect: (i) => {
+            if (filtered[i])
+                choose(filtered[i]);
+        },
+        onClose: () => setIsOpen(false),
+    });
+    optionRefs.current = [];
+    const dropdownList = isOpen && dropdownPos ? (_jsx("ul", { ref: listRef, className: `k-search-list-dropdown k-search-list-dropdown-portal ${longDropDown ? "large" : "small"}`, style: {
+            position: "fixed",
+            top: dropdownPos.top,
+            left: dropdownPos.left,
+            width: dropdownPos.width,
+        }, children: filtered.length > 0 ? (filtered.map((option, index) => (_jsx("li", { ref: (el) => {
+                optionRefs.current[index] = el;
+            }, className: `k-search-list-option k-search-list-option-${size} ${index === highlightedIndex
+                ? "k-search-list-option-highlighted"
+                : ""}`, onMouseDown: (e) => {
+                e.preventDefault();
+                choose(option);
+            }, onMouseOver: () => setHighlightedIndex(index), children: props.renderOption
+                ? props.renderOption(option)
+                : props.getOptionLabel(option) }, props.getOptionKey(option))))) : (_jsx("li", { className: `k-search-list-no-results k-search-list-no-results-${size}`, children: "No results found" })) })) : null;
+    return (_jsxs("div", { className: "k-search-list-container", ref: dropdownRef, children: [_jsx("div", { ref: inputWrapperRef, children: _jsx(Input, { label: props.label, required: required, disabled: disabled, value: inputValue, onChange: (e) => {
+                        setInputValue(e.target.value);
+                        setFiltering(true);
+                        setIsOpen(true);
+                    }, onKeyDown: handleKeyDown, onFocus: () => setIsOpen(true), onBlur: () => {
+                        setTimeout(restore, 100);
+                    }, placeholder: props.placeholder || "Select...", dropDown: true, isOpen: isOpen, size: size }) }), _jsx(Portal, { children: dropdownList })] }));
+};
+export default SearchSelect;
+//# sourceMappingURL=index.js.map

package/dist/components/inputs/searchSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/searchSelect/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/select/index.d.ts

@@ -0,0 +1,31 @@
+import { PropsWithSize } from "../../types.js";
+import "./styles.css";
+export interface SelectOption<T = string> {
+    value: T;
+    label: string;
+}
+interface SelectProps<T = string> extends PropsWithSize {
+    /** **_Optional_** if the field is disabled */
+    disabled?: boolean;
+    /** **_Optional_** label that appears above the select */
+    label?: string;
+    /** **_Optional_** whether the field is required (shows red asterisk and enables validation) */
+    required?: boolean;
+    /** **_Optional_** ID of the field. If one is not provided, it will be randomly generated */
+    id?: string;
+    /** **_Optional_** placeholder text for the first option */
+    placeholder?: string;
+    /** **_Optional_** current selected value */
+    value?: T;
+    /** **_Optional_** options to display in the select */
+    options: SelectOption<T>[];
+    /** **_Optional_** function that is called when the value changes */
+    onChange?: (value: T | undefined) => void;
+    /** **_Optional_** function that is called when the select is focused */
+    onFocus?: React.FocusEventHandler<HTMLSelectElement>;
+    /** **_Optional_** function that is called when the select loses focus */
+    onBlur?: React.FocusEventHandler<HTMLSelectElement>;
+}
+declare const Select: <T extends string = string>(props: SelectProps<T>) => import("react").JSX.Element;
+export default Select;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/select/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM;IACtC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,WAAW,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,aAAa;IACrD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,sDAAsD;IACtD,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1C,wEAAwE;IACxE,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACrD;AAED,QAAA,MAAM,MAAM,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,OAAO,WAAW,CAAC,CAAC,CAAC,gCAgE/D,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/inputs/select/index.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FieldShell from "../../forms/fieldShell/index.js";
+import { useLayoutEffect } from "react";
+import "./styles.css";
+const Select = (props) => {
+    const { size = "md", disabled = false, required = false } = props;
+    const selectId = props.id || `select-${Math.random().toString(36).substring(2, 9)}`;
+    const selectClasses = ["k-select", `k-select-${size}`]
+        .filter(Boolean)
+        .join(" ");
+    // When no value matches any option and there's no placeholder,
+    // the browser displays the first option but React state is out of sync.
+    // Fire onChange synchronously (layout effect) so parent state is updated
+    // before other effects run.
+    useLayoutEffect(() => {
+        if (!props.onChange || props.options.length === 0)
+            return;
+        const currentValue = props.value || "";
+        const hasMatch = props.options.some((o) => String(o.value) === String(currentValue)) ||
+            (props.placeholder && currentValue === "");
+        if (!hasMatch) {
+            props.onChange(props.options[0].value);
+        }
+    }, [props.options, props.value, props.placeholder]);
+    const handleChange = (e) => {
+        const selectedValue = e.target.value;
+        if (props.onChange) {
+            props.onChange(selectedValue === "" ? undefined : selectedValue);
+        }
+    };
+    return (_jsx(FieldShell, { label: props.label, required: required, htmlFor: selectId, className: "k-select-container", children: _jsx("div", { className: "k-select-wrapper", children: _jsxs("select", { id: selectId, value: props.value || "", required: required, disabled: disabled, onChange: handleChange, onFocus: props.onFocus, onBlur: props.onBlur, className: selectClasses, children: [props.placeholder && (_jsx("option", { value: "", disabled: required, children: props.placeholder })), props.options.map((option, index) => (_jsx("option", { value: option.value, children: option.label }, index)))] }) }) }));
+};
+export default Select;
+//# sourceMappingURL=index.js.map

package/dist/components/inputs/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/select/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/select/styles.css

@@ -0,0 +1,66 @@
+.k-select-container {
+  width: 100%;
+}
+
+.k-select-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.k-select {
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem;
+  color: var(--text-color);
+  width: 100%;
+  box-sizing: border-box;
+  line-height: 1.5;
+  transition:
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  background-color: var(--background-color-light);
+  cursor: pointer;
+}
+
+.k-select-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.69rem 0.75rem;
+}
+
+.k-select-md {
+  font-size: var(--text-size-md);
+  padding: 0.84rem 1rem;
+}
+
+.k-select-lg {
+  font-size: var(--text-size-lg);
+  padding: 0.98rem 1.25rem;
+}
+
+.k-select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px var(--border-shadow-color-active);
+}
+
+.k-select:disabled {
+  background-color: var(--background-color-disabled);
+  color: var(--text-color-disabled);
+  cursor: not-allowed;
+  border-color: var(--border-color-disabled);
+}
+
+.k-select option {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  padding: 0.5rem;
+}
+
+.k-select:invalid {
+  border-color: var(--danger-color);
+}
+
+.k-select:hover:not(:disabled) {
+  border-color: var(--border-color-hover);
+}

package/dist/components/inputs/switch/index.d.ts

@@ -0,0 +1,14 @@
+import "./styles.css";
+interface SwitchProps {
+    checked: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
+    labelLocation?: "left" | "right";
+    disabled?: boolean;
+    isLoading?: boolean;
+    size?: "sm" | "md";
+    id?: string;
+}
+declare const Switch: (props: SwitchProps) => import("react").JSX.Element;
+export default Switch;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,UAAU,WAAW;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,gCAsCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/inputs/switch/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+const Switch = (props) => {
+    const { labelLocation = "right", disabled = false, isLoading = false, size = "md", } = props;
+    const inputId = props.id || `switch-${Math.random().toString(36).substring(2, 9)}`;
+    return (_jsxs("div", { className: `k-switch-container k-switch-${labelLocation}`, children: [props.label && labelLocation === "left" && (_jsx("label", { className: "k-switch-label", htmlFor: inputId, children: props.label })), _jsxs("div", { className: `k-switch-track k-switch-${size}${props.checked ? " k-switch-on" : ""}${disabled || isLoading ? " k-switch-disabled" : ""}${isLoading ? " k-switch-loading" : ""}`, children: [_jsx("input", { id: inputId, type: "checkbox", checked: props.checked, onChange: props.onChange, disabled: disabled || isLoading, className: "k-switch-input" }), _jsx("span", { className: "k-switch-thumb" })] }), props.label && labelLocation === "right" && (_jsx("label", { className: "k-switch-label", htmlFor: inputId, children: props.label }))] }));
+};
+export default Switch;
+//# sourceMappingURL=index.js.map

package/dist/components/inputs/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/switch/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,cAAc,CAAC;AAatB,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IACpC,MAAM,EACJ,aAAa,GAAG,OAAO,EACvB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,IAAI,GAAG,IAAI,GACZ,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GACX,KAAK,CAAC,EAAE,IAAI,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAErE,OAAO,CACL,eAAK,SAAS,EAAE,+BAA+B,aAAa,EAAE,aAC3D,KAAK,CAAC,KAAK,IAAI,aAAa,KAAK,MAAM,IAAI,CAC1C,gBAAO,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,OAAO,YAC/C,KAAK,CAAC,KAAK,GACN,CACT,EACD,eACE,SAAS,EAAE,2BAA2B,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,GAAG,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,aAE7K,gBACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,SAAS,EAAC,gBAAgB,GAC1B,EACF,eAAM,SAAS,EAAC,gBAAgB,GAAG,IAC/B,EACL,KAAK,CAAC,KAAK,IAAI,aAAa,KAAK,OAAO,IAAI,CAC3C,gBAAO,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,OAAO,YAC/C,KAAK,CAAC,KAAK,GACN,CACT,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}