@arkyn/components 3.0.1-beta.7 → 3.0.1-beta.71

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

@@ -0,0 +1,66 @@
+import { RichTextProps } from "../../types/richTextTypes";
+import "./styles.css";
+/**
+ * RichText component provides a feature-rich text editor with formatting capabilities
+ * including bold, italic, underline, code, headings, block quotes, alignment, and image insertion.
+ *
+ * Built on top of Slate.js, this component offers a customizable toolbar and supports
+ * character limits, form integration, and error handling.
+ *
+ * @param props - Configuration object for the RichText component
+ * @param props.name - The name attribute for the form field (required)
+ * @param props.hiddenButtons - Array of button keys to hide from the toolbar
+ * @param props.imageConfig - Configuration object for image insertion functionality
+ * @param props.defaultValue - Initial JSON string value for the editor content (default: "[]")
+ * @param props.enforceCharacterLimit - Whether to enforce the character limit strictly (default: false)
+ * @param props.onChangeCharactersCount - Callback function triggered when character count changes
+ * @param props.baseErrorMessage - Custom error message to display
+ * @param props.maxLimit - Maximum number of characters allowed (default: 2000)
+ * @param props.onChange - Callback function triggered when editor content changes
+ * @param props.isError - Whether the component should display in error state
+ * @param props.id - Custom ID for the editor element
+ *
+ * @returns JSX element representing the rich text editor
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RichText name="content" />
+ *
+ * // With character limit and custom buttons
+ * <RichText
+ *   name="description"
+ *   maxLimit={500}
+ *   enforceCharacterLimit={true}
+ *   hiddenButtons={["image", "code"]}
+ *   onChangeCharactersCount={(count) => console.log(count)}
+ * />
+ *
+ * // With image upload configuration
+ * <RichText
+ *   name="article"
+ *   imageConfig={{
+ *     action: "/api/upload",
+ *     modalTitle: "Insert Image",
+ *     modalInputUrlLabel: "Image URL",
+ *     modalInputImageLabel: "Upload Image"
+ *   }}
+ * />
+ * ```
+ *
+ * @description
+ * The component includes:
+ * - **Formatting**: Bold, italic, underline, code, headings (H1, H2), block quotes
+ * - **Alignment**: Left, center, right, justify
+ * - **Image Support**: Upload and URL insertion (when imageConfig is provided)
+ * - **Character Limits**: Configurable limits with visual feedback
+ * - **Form Integration**: Works with form providers and validation
+ * - **Keyboard Shortcuts**: Standard shortcuts for formatting (Ctrl+B, Ctrl+I, etc.)
+ * - **Error Handling**: Visual error states and validation messages
+ *
+ * The editor outputs JSON data representing the document structure, which can be
+ * converted to HTML using the provided utility functions.
+ */
+declare function RichText(props: RichTextProps): import("react/jsx-runtime").JSX.Element;
+export { RichText };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/richText/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAEL,aAAa,EACd,MAAM,2BAA2B,CAAC;AAMnC,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAkMrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/richText/index.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import isHotkey from "is-hotkey";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Code, Heading1, Heading2, Italic, Quote, Underline, } from "lucide-react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { createEditor, Transforms } from "slate";
+import { withHistory } from "slate-history";
+import { Editable, Slate, withReact } from "slate-react";
+import { BlockButton } from "./blockButton";
+import { Element } from "./element";
+import { InsertImage } from "./insertImage";
+import { Leaf } from "./leaf";
+import { MarkButton } from "./markButton";
+import { Toolbar } from "./toolbar";
+import { useForm } from "../../hooks/useForm";
+import { extractTextFromNode } from "../../services/extractTextFromNode";
+import { toggleMark } from "../../services/toggleMark";
+import { hotKeys, initialValue } from "../../templates/richTextTemplates";
+import { FieldError } from "../fieldError";
+import { FieldLabel } from "../fieldLabel";
+import { FieldWrapper } from "../fieldWrapper";
+import "./styles.css";
+/**
+ * RichText component provides a feature-rich text editor with formatting capabilities
+ * including bold, italic, underline, code, headings, block quotes, alignment, and image insertion.
+ *
+ * Built on top of Slate.js, this component offers a customizable toolbar and supports
+ * character limits, form integration, and error handling.
+ *
+ * @param props - Configuration object for the RichText component
+ * @param props.name - The name attribute for the form field (required)
+ * @param props.hiddenButtons - Array of button keys to hide from the toolbar
+ * @param props.imageConfig - Configuration object for image insertion functionality
+ * @param props.defaultValue - Initial JSON string value for the editor content (default: "[]")
+ * @param props.enforceCharacterLimit - Whether to enforce the character limit strictly (default: false)
+ * @param props.onChangeCharactersCount - Callback function triggered when character count changes
+ * @param props.baseErrorMessage - Custom error message to display
+ * @param props.maxLimit - Maximum number of characters allowed (default: 2000)
+ * @param props.onChange - Callback function triggered when editor content changes
+ * @param props.isError - Whether the component should display in error state
+ * @param props.id - Custom ID for the editor element
+ *
+ * @returns JSX element representing the rich text editor
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RichText name="content" />
+ *
+ * // With character limit and custom buttons
+ * <RichText
+ *   name="description"
+ *   maxLimit={500}
+ *   enforceCharacterLimit={true}
+ *   hiddenButtons={["image", "code"]}
+ *   onChangeCharactersCount={(count) => console.log(count)}
+ * />
+ *
+ * // With image upload configuration
+ * <RichText
+ *   name="article"
+ *   imageConfig={{
+ *     action: "/api/upload",
+ *     modalTitle: "Insert Image",
+ *     modalInputUrlLabel: "Image URL",
+ *     modalInputImageLabel: "Upload Image"
+ *   }}
+ * />
+ * ```
+ *
+ * @description
+ * The component includes:
+ * - **Formatting**: Bold, italic, underline, code, headings (H1, H2), block quotes
+ * - **Alignment**: Left, center, right, justify
+ * - **Image Support**: Upload and URL insertion (when imageConfig is provided)
+ * - **Character Limits**: Configurable limits with visual feedback
+ * - **Form Integration**: Works with form providers and validation
+ * - **Keyboard Shortcuts**: Standard shortcuts for formatting (Ctrl+B, Ctrl+I, etc.)
+ * - **Error Handling**: Visual error states and validation messages
+ *
+ * The editor outputs JSON data representing the document structure, which can be
+ * converted to HTML using the provided utility functions.
+ */
+function RichText(props) {
+    const { name, hiddenButtons, imageConfig, defaultValue = "[]", enforceCharacterLimit = false, onChangeCharactersCount, baseErrorMessage, maxLimit = 10, onChange, isError: baseIsError, label, showAsterisk, id, } = props;
+    const editor = useMemo(() => withHistory(withReact(createEditor())), []);
+    const { fieldErrors } = useForm();
+    function getDefaultNodes() {
+        try {
+            const parsedNodes = JSON.parse(defaultValue);
+            if (!Array.isArray(parsedNodes))
+                return initialValue;
+            if (parsedNodes.length <= 0)
+                return initialValue;
+            const isValidNodes = parsedNodes.every((node) => typeof node === "object" &&
+                node !== null &&
+                "type" in node &&
+                "children" in node);
+            return isValidNodes ? parsedNodes : initialValue;
+        }
+        catch (error) {
+            return initialValue;
+        }
+    }
+    const textFromNodes = extractTextFromNode(getDefaultNodes());
+    const [charactersCount, setCharactersCount] = useState(textFromNodes.length);
+    const [inputValue, setInputValue] = useState(JSON.stringify(getDefaultNodes()) || "[]");
+    const [onFocus, setOnFocus] = useState(false);
+    const ref = useRef(null);
+    const inputId = id || useId();
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = baseIsError || !!errorMessage;
+    const renderLeaf = useCallback(Leaf, []);
+    const renderElement = useCallback(Element, []);
+    function handleChange(value) {
+        const text = extractTextFromNode(value);
+        setCharactersCount(text.length);
+        onChangeCharactersCount && onChangeCharactersCount(text.length);
+        if (enforceCharacterLimit && text.length >= maxLimit) {
+            return;
+        }
+        else {
+            setInputValue(JSON.stringify(value));
+            onChange && onChange(value);
+            editor.children = value;
+            Transforms.setNodes(editor, { children: value });
+        }
+    }
+    const focusClass = onFocus ? "focusTrue" : "focusFalse";
+    const errorClass = isError
+        ? "errorTrue"
+        : maxLimit < charactersCount
+            ? "errorTrue"
+            : "errorFalse";
+    const className = `arkynRichText ${errorClass} ${focusClass}`;
+    const restatesCharacters = maxLimit - charactersCount;
+    function buttonIsNotHidden(format) {
+        return !hiddenButtons?.includes(format);
+    }
+    return (_jsxs(FieldWrapper, { children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, children: label })), _jsxs(Slate, { editor: editor, initialValue: getDefaultNodes(), onChange: handleChange, onValueChange: handleChange, children: [_jsxs("div", { className: className, children: [_jsxs(Toolbar, { children: [buttonIsNotHidden("headingOne") && (_jsx(BlockButton, { format: "headingOne", icon: Heading1 })), buttonIsNotHidden("headingTwo") && (_jsx(BlockButton, { format: "headingTwo", icon: Heading2 })), buttonIsNotHidden("blockQuote") && (_jsx(BlockButton, { format: "blockQuote", icon: Quote })), buttonIsNotHidden("bold") && (_jsx(MarkButton, { format: "bold", icon: Bold })), buttonIsNotHidden("italic") && (_jsx(MarkButton, { format: "italic", icon: Italic })), buttonIsNotHidden("underline") && (_jsx(MarkButton, { format: "underline", icon: Underline })), buttonIsNotHidden("code") && (_jsx(MarkButton, { format: "code", icon: Code })), buttonIsNotHidden("left") && (_jsx(BlockButton, { format: "left", icon: AlignLeft })), buttonIsNotHidden("right") && (_jsx(BlockButton, { format: "right", icon: AlignRight })), buttonIsNotHidden("center") && (_jsx(BlockButton, { format: "center", icon: AlignCenter })), buttonIsNotHidden("justify") && (_jsx(BlockButton, { format: "justify", icon: AlignJustify })), imageConfig && buttonIsNotHidden("image") && (_jsx(InsertImage, { ...imageConfig }))] }), _jsx(Editable, { className: "editorContainer", renderElement: renderElement, renderLeaf: renderLeaf, spellCheck: true, ref: ref, id: inputId, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onKeyDown: (event) => {
+                                    for (const hotkey in hotKeys) {
+                                        if (isHotkey(hotkey, event)) {
+                                            event.preventDefault();
+                                            const mark = hotKeys[hotkey];
+                                            toggleMark(editor, mark);
+                                        }
+                                    }
+                                } }), restatesCharacters < 0 && (_jsx("div", { className: "restatesCharacters", children: restatesCharacters }))] }), _jsx("input", { type: "hidden", name: name, value: inputValue.slice(0, maxLimit) }), _jsx("input", { type: "hidden", name: `${name}Count`, value: charactersCount })] }), _jsx(FieldError, { children: errorMessage })] }));
+}
+export { RichText };

package/dist/components/richText/insertImage/index.d.ts

@@ -0,0 +1,5 @@
+import { RichTextInsertImageProps } from "../../../types/richTextTypes";
+import "./styles.css";
+declare function InsertImage(props: RichTextInsertImageProps): import("react/jsx-runtime").JSX.Element;
+export { InsertImage };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/richText/insertImage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/insertImage/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAWxE,OAAO,cAAc,CAAC;AAEtB,iBAAS,WAAW,CAAC,KAAK,EAAE,wBAAwB,2CAsGnD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/richText/insertImage/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Image } from "lucide-react";
+import { useState } from "react";
+import { useSlate } from "slate-react";
+import { Button } from "../../button";
+import { ImageUpload } from "../../imageUpload";
+import { Input } from "../../input";
+import { ModalContainer } from "../../modal/modalContainer";
+import { ModalFooter } from "../../modal/modalFooter";
+import { ModalHeader } from "../../modal/modalHeader";
+import { TabButton } from "../../tab/tabButton";
+import { TabContainer } from "../../tab/tabContainer";
+import "./styles.css";
+function InsertImage(props) {
+    const { action, tabLabels = ["Adicionar URL", "Upload de arquivo"], modalCancelButton = "Cancelar", modalConfirmButton = "Confirmar", modalInputImageLabel = "Imagem:", modalInputUrlLabel = "URL da imagem:", modalTitle = "Inserir imagem", } = props;
+    const editor = useSlate();
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const [imageURL, setImageURL] = useState("");
+    const [uploadType, setUploadType] = useState("url");
+    function handleMouseDown(event) {
+        event.preventDefault();
+        if (!imageURL || imageURL === "")
+            return;
+        editor.insertNodes([
+            { type: "paragraph", children: [{ text: "" }] },
+            { type: "image", src: imageURL, children: [{ text: "" }] },
+            { type: "paragraph", children: [{ text: "" }] },
+        ]);
+        setModalIsVisible(false);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "arkynRichTextInsertImage", onMouseDown: () => setModalIsVisible(true), children: _jsx(Image, {}) }), _jsxs(ModalContainer, { isVisible: modalIsVisible, makeInvisible: () => setModalIsVisible(false), children: [_jsx(ModalHeader, { children: modalTitle }), _jsxs("div", { className: "arkynRichTextInsertImageModalContent", children: [_jsxs(TabContainer, { defaultValue: uploadType, onChange: setUploadType, children: [_jsx(TabButton, { value: "url", children: tabLabels[0] }), _jsx(TabButton, { value: "file", children: tabLabels[1] })] }), uploadType === "url" && (_jsxs(_Fragment, { children: [_jsx(Input, { type: "text", name: "richTextImageURL", label: modalInputUrlLabel, showAsterisk: true, defaultValue: imageURL, onChange: (e) => setImageURL(e.target.value) }), imageURL && (_jsx("img", { className: "arkynRichTextInsertImageModalPreviewImage", src: imageURL, alt: "preview" }))] })), uploadType === "file" && (_jsx(ImageUpload, { name: "richTextImageURL", action: action, label: modalInputImageLabel, showAsterisk: true, defaultValue: imageURL, onChange: (url) => setImageURL(url) }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", scheme: "danger", variant: "outline", onClick: () => setModalIsVisible(false), children: modalCancelButton }), _jsx(Button, { type: "button", onClick: handleMouseDown, children: modalConfirmButton })] })] })] }));
+}
+export { InsertImage };

package/dist/components/richText/leaf/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/leaf/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,iBAAS,IAAI,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,eAAe,2CAO5D;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/richText/markButton/index.d.ts

@@ -0,0 +1,10 @@
+import { LucideIcon } from "lucide-react";
+import { RichTextMarkFormatType } from "../../../types/richTextTypes";
+import "./styles.css";
+type MarkButtonProps = {
+    format: RichTextMarkFormatType;
+    icon: LucideIcon;
+};
+declare function MarkButton({ format, icon: Icon }: MarkButtonProps): import("react/jsx-runtime").JSX.Element;
+export { MarkButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/richText/markButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/markButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,sBAAsB,CAAC;IAC/B,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,eAAe,2CAoB1D;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/richText/markButton/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlate } from "slate-react";
+import { isMarkActive } from "../../../services/isMarkActive";
+import { toggleMark } from "../../../services/toggleMark";
+import "./styles.css";
+function MarkButton({ format, icon: Icon }) {
+    const editor = useSlate();
+    const isActive = isMarkActive(editor, format);
+    const activeClass = isActive ? "activeTrue" : "activeFalse";
+    function handleMouseDown(event) {
+        event.preventDefault();
+        toggleMark(editor, format);
+    }
+    return (_jsx("button", { type: "button", className: "arkynRichTextMarkButton " + activeClass, onMouseDown: handleMouseDown, children: _jsx(Icon, {}) }));
+}
+export { MarkButton };

package/dist/components/richText/toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAE1C;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

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 };