@arkyn/components 3.0.1-beta.69 → 3.0.1-beta.70

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

@@ -0,0 +1,125 @@
+import { LucideIcon } from "lucide-react";
+import { FocusEvent } from "react";
+type SelectProps = {
+    name: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    id?: string;
+    value?: string;
+    defaultValue?: string;
+    showAsterisk?: boolean;
+    label?: string;
+    errorMessage?: string;
+    placeholder?: string;
+    notFoundText?: string;
+    className?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    isLoading?: boolean;
+    isSearchable?: boolean;
+    closeOnSelect?: boolean;
+    onSearch?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
+    size?: "md" | "lg";
+    variant?: "solid" | "outline" | "underline";
+    prefix?: string | LucideIcon;
+    leftIcon?: LucideIcon;
+    optionMaxHeight?: number;
+};
+/**
+ * Select component - used for selecting sle options from a dropdown list with support for search, labels, and validation
+ *
+ * @param props - Select component properties
+ * @param props.name - Required field name for form handling
+ * @param props.options - Array of options with label and value properties
+ * @param props.id - Optional unique identifier for the component
+ * @param props.value - Controlled value of selected option
+ * @param props.defaultValue - Default selected value. Default: ""
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.label - Optional label text to display above the select
+ * @param props.errorMessage - Error message to display below the select
+ * @param props.placeholder - Placeholder text when no options are selected. Default: "Selecione..."
+ * @param props.notFoundText - Text to display when no options match search. Default: "Sem opções disponíveis"
+ * @param props.className - Additional CSS classes to apply
+ * @param props.disabled - Whether the select is disabled. Default: false
+ * @param props.readOnly - Whether the select is read-only. Default: false
+ * @param props.isLoading - Controls loading state with spinner. Default: false
+ * @param props.isSearchable - Whether the select supports search functionality. Default: false
+ * @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default: false
+ * @param props.onSearch - Callback function called when search value changes
+ * @param props.onChange - Callback function called when selected value changes
+ * @param props.onFocus - Callback function called when select gains focus
+ * @param props.onBlur - Callback function called when select loses focus
+ * @param props.size - Select size. Default: "md"
+ * @param props.variant - Visual variant of the select. Default: "solid"
+ * @param props.prefix - Text or icon to display at the beginning of the select
+ * @param props.leftIcon - Optional icon to display on the left side
+ * @param props.optionMaxHeight - Maximum height for the options dropdown
+ *
+ * @returns Select JSX element wrapped in FieldWrapper with optional label and error
+ *
+ * @example
+ * ```tsx
+ * // Basic select
+ * <Select
+ *   name="category:"
+ *   options={[
+ *     { label: "Technology", value: "tech" },
+ *     { label: "Design", value: "design" },
+ *     { label: "Marketing", value: "marketing" }
+ *   ]}
+ * />
+ *
+ * // Select with label and validation
+ * <Select
+ *   name="skill"
+ *   label="Select your skill:"
+ *   showAsterisk
+ *   errorMessage="Please select at least one skill"
+ *   options={skillOptions}
+ *   placeholder="Choose your skills..."
+ * />
+ *
+ * // Searchable select with custom styling
+ * <Select
+ *   name="country"
+ *   label="Country:"
+ *   isSearchable
+ *   variant="outline"
+ *   size="lg"
+ *   leftIcon={GlobeIcon}
+ *   options={countryOptions}
+ *   notFoundText="No countries found"
+ * />
+ *
+ * // Controlled select with callbacks
+ * <Select
+ *   name="tag"
+ *   label="Tag:"
+ *   value={selectedTag}
+ *   onChange={setSelectedTag}
+ *   onSearch={handleSearch}
+ *   closeOnSelect={false}
+ *   isLoading={isLoadingTags}
+ *   options={tagOptions}
+ * />
+ *
+ * // Select with prefix and custom behavior
+ * <Select
+ *   name="department"
+ *   label="Department:"
+ *   prefix="Dept:"
+ *   closeOnSelect={true}
+ *   variant="underline"
+ *   defaultValue="hr"
+ *   options={departmentOptions}
+ * />
+ * ```
+ */
+declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+export { Select };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAA2B,MAAM,OAAO,CAAC;AAgB5D,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAE5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAEjD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,QAAQ,CAAC,EAAE,UAAU,CAAC;IAEtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAkKjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/select/index.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { useForm } from "../../hooks/useForm";
+import { IconRenderer } from "../../services/iconRenderer";
+import { FieldError } from "../fieldError";
+import { FieldLabel } from "../fieldLabel";
+import { FieldWrapper } from "../fieldWrapper";
+import { SelectChevron } from "./selectChevron";
+import { SelectContainer } from "./selectContainer";
+import { SelectContent } from "./selectContent";
+import { SelectOption } from "./selectOption";
+import { SelectOptionsContainer } from "./selectOptionsContainer";
+import { SelectOverlay } from "./selectOverlay";
+import { SelectSpinner } from "./selectSpinner";
+/**
+ * Select component - used for selecting sle options from a dropdown list with support for search, labels, and validation
+ *
+ * @param props - Select component properties
+ * @param props.name - Required field name for form handling
+ * @param props.options - Array of options with label and value properties
+ * @param props.id - Optional unique identifier for the component
+ * @param props.value - Controlled value of selected option
+ * @param props.defaultValue - Default selected value. Default: ""
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.label - Optional label text to display above the select
+ * @param props.errorMessage - Error message to display below the select
+ * @param props.placeholder - Placeholder text when no options are selected. Default: "Selecione..."
+ * @param props.notFoundText - Text to display when no options match search. Default: "Sem opções disponíveis"
+ * @param props.className - Additional CSS classes to apply
+ * @param props.disabled - Whether the select is disabled. Default: false
+ * @param props.readOnly - Whether the select is read-only. Default: false
+ * @param props.isLoading - Controls loading state with spinner. Default: false
+ * @param props.isSearchable - Whether the select supports search functionality. Default: false
+ * @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default: false
+ * @param props.onSearch - Callback function called when search value changes
+ * @param props.onChange - Callback function called when selected value changes
+ * @param props.onFocus - Callback function called when select gains focus
+ * @param props.onBlur - Callback function called when select loses focus
+ * @param props.size - Select size. Default: "md"
+ * @param props.variant - Visual variant of the select. Default: "solid"
+ * @param props.prefix - Text or icon to display at the beginning of the select
+ * @param props.leftIcon - Optional icon to display on the left side
+ * @param props.optionMaxHeight - Maximum height for the options dropdown
+ *
+ * @returns Select JSX element wrapped in FieldWrapper with optional label and error
+ *
+ * @example
+ * ```tsx
+ * // Basic select
+ * <Select
+ *   name="category:"
+ *   options={[
+ *     { label: "Technology", value: "tech" },
+ *     { label: "Design", value: "design" },
+ *     { label: "Marketing", value: "marketing" }
+ *   ]}
+ * />
+ *
+ * // Select with label and validation
+ * <Select
+ *   name="skill"
+ *   label="Select your skill:"
+ *   showAsterisk
+ *   errorMessage="Please select at least one skill"
+ *   options={skillOptions}
+ *   placeholder="Choose your skills..."
+ * />
+ *
+ * // Searchable select with custom styling
+ * <Select
+ *   name="country"
+ *   label="Country:"
+ *   isSearchable
+ *   variant="outline"
+ *   size="lg"
+ *   leftIcon={GlobeIcon}
+ *   options={countryOptions}
+ *   notFoundText="No countries found"
+ * />
+ *
+ * // Controlled select with callbacks
+ * <Select
+ *   name="tag"
+ *   label="Tag:"
+ *   value={selectedTag}
+ *   onChange={setSelectedTag}
+ *   onSearch={handleSearch}
+ *   closeOnSelect={false}
+ *   isLoading={isLoadingTags}
+ *   options={tagOptions}
+ * />
+ *
+ * // Select with prefix and custom behavior
+ * <Select
+ *   name="department"
+ *   label="Department:"
+ *   prefix="Dept:"
+ *   closeOnSelect={true}
+ *   variant="underline"
+ *   defaultValue="hr"
+ *   options={departmentOptions}
+ * />
+ * ```
+ */
+function Select(props) {
+    const { name, options, className = "", placeholder = "Selecione...", closeOnSelect = false, defaultValue = "", errorMessage: baseErrorMessage, isLoading = false, readOnly = false, isSearchable = false, id, label, optionMaxHeight, showAsterisk, leftIcon: LeftIcon, onSearch, onChange, onBlur, notFoundText = "Sem opções disponíveis", onFocus, disabled: baseDisabled = false, prefix, size = "md", value, variant = "solid", } = props;
+    const { fieldErrors } = useForm();
+    const selectRef = useRef(null);
+    const selectId = id || useId();
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = !!errorMessage;
+    const disabled = baseDisabled || isLoading || readOnly;
+    const iconSizes = { md: 20, lg: 20 };
+    const iconSize = iconSizes[size];
+    const [search, setSearch] = useState("");
+    const [isFocused, setIsFocused] = useState(false);
+    const [selectedOptions, setSelectedOptions] = useState(defaultValue);
+    const forceSelectedOptions = value || selectedOptions;
+    function optionHasSelected(value) {
+        return forceSelectedOptions === value;
+    }
+    function getOptionLabel(value) {
+        const option = options.find((option) => option.value === value);
+        return option?.label || "";
+    }
+    function handleContainerFocus() {
+        if (disabled || !selectRef?.current || isFocused)
+            return;
+        setIsFocused(true);
+        selectRef.current.focus();
+        onFocus && onFocus();
+    }
+    function handleBlur() {
+        setIsFocused(false);
+        if (onBlur && selectRef.current)
+            selectRef.current.blur();
+    }
+    function handleSearch(value) {
+        setSearch(value);
+        if (onSearch)
+            onSearch(value);
+    }
+    function handleChangeValue(value) {
+        if (optionHasSelected(value)) {
+            setSelectedOptions("");
+            if (onChange)
+                onChange("");
+        }
+        else {
+            setSelectedOptions(value);
+            if (onChange)
+                onChange(value);
+        }
+        if (closeOnSelect)
+            handleBlur();
+    }
+    const mappedOptions = options.filter((option) => {
+        if (props.onSearch)
+            return true;
+        if (!props.isSearchable)
+            return true;
+        if (option.label.toLowerCase().includes(search.toLowerCase()))
+            return true;
+        return false;
+    });
+    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(SelectContainer, { handleContainerFocus: handleContainerFocus, disabled: disabled, isError: isError, isFocused: isFocused, isLoading: isLoading, readOnly: readOnly, size: size, variant: variant, className: className, prefixExists: !!prefix, id: selectId, children: [_jsx("input", { ref: selectRef, name: name, value: JSON.stringify(forceSelectedOptions), type: "hidden" }), _jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsxs(SelectContent, { size: size, children: [forceSelectedOptions !== "" && (_jsx("p", { children: getOptionLabel(forceSelectedOptions) })), forceSelectedOptions === "" && _jsx("p", { children: placeholder })] }), _jsxs(SelectOptionsContainer, { isFocused: isFocused, isSearchable: isSearchable, search: search, onSearch: handleSearch, children: [mappedOptions.map(({ label, value }) => (_jsx(SelectOption, { label: label, value: value, size: size, handleChangeValue: handleChangeValue, optionHasSelected: optionHasSelected }, value))), mappedOptions.length <= 0 && _jsx("p", { children: notFoundText })] }), _jsx(SelectChevron, { disabled: disabled, isFocused: isFocused, readOnly: readOnly, iconSize: iconSize, isLoading: isLoading }), _jsx(SelectSpinner, { iconSize: iconSize, isLoading: isLoading }), _jsx(SelectOverlay, { handleBlur: handleBlur, isFocused: isFocused })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { Select };

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

@@ -0,0 +1,11 @@
+import "./styles.css";
+type SelectChevronProps = {
+    isLoading: boolean;
+    iconSize: number;
+    disabled: boolean;
+    readOnly: boolean;
+    isFocused: boolean;
+};
+declare function SelectChevron(props: SelectChevronProps): import("react/jsx-runtime").JSX.Element;
+export { SelectChevron };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectChevron/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAY/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import "./styles.css";
+function SelectChevron(props) {
+    const { iconSize, isLoading, disabled, readOnly, isFocused } = props;
+    const notAnimate = disabled || readOnly ? "notAnimate" : "";
+    const focused = isFocused ? "focused" : "";
+    const className = `arkynSelectChevron ${notAnimate} ${focused}`;
+    if (isLoading)
+        return _jsx(_Fragment, {});
+    return (_jsx(ChevronDown, { className: className, size: iconSize, strokeWidth: 2.5 }));
+}
+export { SelectChevron };

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

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type SelectContainerProps = {
+    children: ReactNode;
+    handleContainerFocus: () => void;
+    prefixExists: boolean;
+    isError: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    isLoading: boolean;
+    isFocused: boolean;
+    className?: string;
+    id: string;
+    variant: "solid" | "outline" | "underline";
+    size: "md" | "lg";
+};
+declare function SelectContainer(props: SelectContainerProps): import("react/jsx-runtime").JSX.Element;
+export { SelectContainer };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC3C,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA8BnD;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+function SelectContainer(props) {
+    const { children, handleContainerFocus, disabled, isError, isLoading, isFocused, className, readOnly, variant, size, id, prefixExists, } = props;
+    const hasPrefix = prefixExists ? "hasPrefix" : "";
+    const errored = isError ? "errored" : "";
+    const opacity = disabled || readOnly || isLoading ? "opacity" : "";
+    const focused = isFocused ? "focused" : "";
+    return (_jsx("section", { id: id, className: `arkynSelectContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`, onClick: handleContainerFocus, children: children }));
+}
+export { SelectContainer };

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type SelectContentProps = {
+    children: ReactNode;
+    size: "md" | "lg";
+};
+declare function SelectContent(props: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+export { SelectContent };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAI/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+function SelectContent(props) {
+    const { children, size } = props;
+    const className = `arkynSelectContent ${size}`;
+    return _jsx("div", { className: className, children: children });
+}
+export { SelectContent };

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

@@ -0,0 +1,11 @@
+import "./styles.css";
+type SelectOptionProps = {
+    value: string;
+    label: string;
+    size: "md" | "lg";
+    optionHasSelected: (value: string) => boolean;
+    handleChangeValue: (value: string) => void;
+};
+declare function SelectOption(props: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
+export { SelectOption };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAW7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import "./styles.css";
+function SelectOption(props) {
+    const { label, optionHasSelected, handleChangeValue, value, size } = props;
+    const hasActive = optionHasSelected(value) ? "active" : "";
+    const className = `arkynSelectOption ${size} ${hasActive}`;
+    return (_jsxs("div", { onClick: () => handleChangeValue(value), className: className, children: [label, " ", _jsx(Check, {})] }));
+}
+export { SelectOption };

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

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type SelectOptionsContainerProps = {
+    isFocused: boolean;
+    isSearchable: boolean;
+    children: ReactNode;
+    search: string;
+    onSearch: (value: string) => void;
+};
+declare function SelectOptionsContainer(props: SelectOptionsContainerProps): import("react/jsx-runtime").JSX.Element;
+export { SelectOptionsContainer };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectOptionsContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,SAAS,EAA+B,MAAM,OAAO,CAAC;AAK5E,OAAO,cAAc,CAAC;AAEtB,KAAK,2BAA2B,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,iBAAS,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CA8DjE;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

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

@@ -0,0 +1,44 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useScrollLock } from "../../../hooks/useScrollLock";
+import { Input } from "../../input";
+import "./styles.css";
+function SelectOptionsContainer(props) {
+    const { children, isFocused, isSearchable, search, onSearch } = props;
+    const containerRef = useRef(null);
+    const [position, setPosition] = useState("bottom");
+    useScrollLock(isFocused);
+    useEffect(() => {
+        if (!isFocused)
+            return;
+        const checkContainerPosition = () => {
+            if (!containerRef.current)
+                return;
+            const parentElement = containerRef.current.parentElement;
+            if (!parentElement)
+                return;
+            const parentRect = parentElement.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const estimatedContainerHeight = 300;
+            const spaceBelow = viewportHeight - parentRect.bottom;
+            if (spaceBelow < estimatedContainerHeight &&
+                parentRect.top > estimatedContainerHeight) {
+                setPosition("top");
+            }
+            else {
+                setPosition("bottom");
+            }
+        };
+        checkContainerPosition();
+    }, [isFocused]);
+    function handleSearch(e) {
+        if (!isSearchable)
+            return;
+        onSearch(e.target.value);
+    }
+    if (!isFocused)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { ref: containerRef, className: `arkynSelectOptionsContainer ${position}`, children: [isSearchable && (_jsx(Input, { type: "search", name: "search-select", variant: "underline", leftIcon: Search, value: search, onChange: handleSearch })), children] }));
+}
+export { SelectOptionsContainer };

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

@@ -0,0 +1,8 @@
+import "./styles.css";
+type SelectOverlayProps = {
+    isFocused: boolean;
+    handleBlur: () => void;
+};
+declare function SelectOverlay(props: SelectOverlayProps): import("react/jsx-runtime").JSX.Element;
+export { SelectOverlay };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAI/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+function SelectOverlay(props) {
+    const { isFocused, handleBlur } = props;
+    if (!isFocused)
+        return _jsx(_Fragment, {});
+    return _jsx("aside", { className: "arkynSelectOverlay", onClick: handleBlur });
+}
+export { SelectOverlay };

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

@@ -0,0 +1,8 @@
+import "./styles.css";
+type SelectSpinnerProps = {
+    iconSize: number;
+    isLoading: boolean;
+};
+declare function SelectSpinner(props: SelectSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export { SelectSpinner };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectSpinner/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAO/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+import "./styles.css";
+function SelectSpinner(props) {
+    const { iconSize, isLoading } = props;
+    if (!isLoading)
+        return _jsx(_Fragment, {});
+    return (_jsx(Loader2, { className: "arkynSelectSpinner", size: iconSize, strokeWidth: 2.5 }));
+}
+export { SelectSpinner };

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export { PhoneInput } from "./components/phoneInput";
 export { Popover } from "./components/popover";
 export { RadioBox } from "./components/radio/radioBox";
 export { RadioGroup } from "./components/radio/radioGroup";
+export { Select } from "./components/select";
 export { Slider } from "./components/slider";
 export { Switch } from "./components/switch";
 export { TabButton } from "./components/tab/tabButton";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG1D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -32,6 +32,7 @@ export { PhoneInput } from "./components/phoneInput";
 export { Popover } from "./components/popover";
 export { RadioBox } from "./components/radio/radioBox";
 export { RadioGroup } from "./components/radio/radioGroup";
+export { Select } from "./components/select";
 export { Slider } from "./components/slider";
 export { Switch } from "./components/switch";
 export { TabButton } from "./components/tab/tabButton";