@arkyn/components 3.0.1-beta.143 → 3.0.1-beta.145

package/dist/components/richText/index.js

@@ -19,67 +19,53 @@ import { toggleMark } from "../../services/toggleMark";
 import { hotKeys, initialValue } from "../../templates/richTextTemplates";
 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.
+ * RichText — WYSIWYG rich-text editor built on Slate.js with a configurable toolbar.
  *
- * Built on top of Slate.js, this component offers a customizable toolbar and supports
- * character limits, form integration, and error handling.
+ * **Toolbar features:** bold, italic, underline, code, H1/H2, block quote, alignment (left/center/right/justify), image and video insertion.
  *
- * @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: 10000)
- * @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
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
+ * Editor content is stored as a Slate JSON string in a hidden `<input>` for form submission.
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * @returns JSX element representing the rich text editor
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed above the editor.
+ * @param props.hiddenButtons - Toolbar button keys to hide (e.g. `["image", "code"]`).
+ * @param props.imageConfig - Enables image insertion; contains the upload endpoint and modal labels.
+ * @param props.defaultValue - Initial editor content as a Slate JSON string. Default: "[]"
+ * @param props.maxLimit - Maximum character count. Default: 10000
+ * @param props.enforceCharacterLimit - Prevents typing past `maxLimit`. Default: false
+ * @param props.onChangeCharactersCount - Callback fired on every keystroke — receives the current character count.
+ * @param props.onChange - Callback fired when editor content changes — receives the Slate `Descendant[]`.
+ * @param props.baseErrorMessage - Custom error message (overrides `useForm` context error).
+ * @param props.isError - Forces the error visual state.
+ * @param props.id - Custom id for the editable area element.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.orientation - Layout direction. Default: "horizontal"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
+ *
+ * @returns RichText JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic usage
+ * // Basic
  * <RichText name="content" />
  *
- * // With character limit and custom buttons
+ * // With character limit and hidden toolbar buttons
  * <RichText
  *   name="description"
+ *   label="Description"
  *   maxLimit={500}
- *   enforceCharacterLimit={true}
- *   hiddenButtons={["image", "code"]}
- *   onChangeCharactersCount={(count) => console.log(count)}
+ *   enforceCharacterLimit
+ *   hiddenButtons={["image", "video", "code"]}
+ *   onChangeCharactersCount={(n) => setCharCount(n)}
  * />
  *
- * // With image upload configuration
+ * // With image upload support
  * <RichText
  *   name="article"
- *   imageConfig={{
- *     action: "/api/upload",
- *     modalTitle: "Insert Image",
- *     modalInputUrlLabel: "Image URL",
- *     modalInputImageLabel: "Upload Image"
- *   }}
+ *   label="Article Body"
+ *   imageConfig={{ action: "/api/upload" }}
  * />
  * ```
- *
- * @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, videoConfig, className: wrapperClassName = "", defaultValue = "[]", enforceCharacterLimit = false, onChangeCharactersCount, baseErrorMessage, maxLimit = 10000, onChange, isError: baseIsError, label, showAsterisk, id, orientation = "horizontal", unShowFieldTemplate = false, } = props;

package/dist/components/searchPlaces.d.ts

@@ -1,70 +1,72 @@
 import type { StandaloneSearchBoxProps } from "@react-google-maps/api";
 import { JSX } from "react";
 import { InputProps } from "./input";
-/**
- * Props for the SearchPlaces component.
- * @typedef {Object} SearchPlacesProps
- * @property {StandaloneSearchBoxProps["options"]} [options] - Google Maps StandaloneSearchBox configuration options
- * @property {(value: string) => void} [onChange] - Callback fired when the input value changes
- * @property {(place: PlaceData) => void} [onPlaceChanged] - Callback fired when a place is selected from the autocomplete suggestions
- */
+/** Structured address data extracted from a Google Places result. */
+type PlaceData = {
+    /** Street name (e.g. `"Rua Exemplo"`). */
+    street: string;
+    /** City name (e.g. `"São Paulo"`). */
+    city: string;
+    /** Full state name (e.g. `"São Paulo"`). */
+    state: string;
+    /** Neighborhood / district name. */
+    neighborhood: string;
+    /** Postal / ZIP code. */
+    postalCode: string;
+    /** State abbreviation (e.g. `"SP"`). */
+    stateShortName: string;
+    /** Street number (e.g. `"123"`). */
+    streetNumber: string;
+    /** Geographic coordinates of the place. */
+    coordinates: {
+        lat: number;
+        lng: number;
+    };
+};
 type SearchPlacesProps = {
+    /** Google Maps `StandaloneSearchBox` options (e.g. `componentRestrictions`, `bounds`). */
     options?: StandaloneSearchBoxProps["options"];
+    /** Callback fired every time the input text changes. Receives the current string value. */
     onChange?: (e: string) => void;
-    onPlaceChanged?: (e: {
-        street: string;
-        city: string;
-        state: string;
-        neighborhood: string;
-        postalCode: string;
-        stateShortName: string;
-        streetNumber: string;
-        coordinates: {
-            lat: number;
-            lng: number;
-        };
-    }) => void;
+    /**
+     * Callback fired when the user selects a place from the autocomplete suggestions.
+     * Receives a structured {@link PlaceData} object.
+     */
+    onPlaceChanged?: (e: PlaceData) => void;
 } & Omit<InputProps, "onLoad" | "onChange" | "type">;
 /**
- * SearchPlaces component - A Google Places autocomplete input field.
+ * SearchPlaces — text input with Google Places autocomplete that returns structured address data.
+ *
+ * Requires the Google Maps JavaScript API with the Places library to be loaded.
+ * Built on `@react-google-maps/api`'s `StandaloneSearchBox`.
+ *
+ * @param props.options - Google Maps search box options (e.g. restrict by country).
+ * @param props.onChange - Fires on every keystroke — receives the current text value.
+ * @param props.onPlaceChanged - Fires when the user selects a suggestion — receives structured address data.
  *
- * This component integrates with Google Maps API to provide address autocomplete functionality.
- * When a user selects a place from the suggestions, it extracts and returns structured address data
- * including street, city, state, neighborhood, postal code, and geographic coordinates.
+ * **...Other valid `Input` properties (except `onLoad`, `onChange`, `type`)**
+ *
+ * @returns SearchPlaces JSX element (an `Input` wrapped in `StandaloneSearchBox`).
  *
- * @component
  * @example
  * ```tsx
  * <SearchPlaces
- *   placeholder="Digite o endereço"
- *   onChange={(value) => console.log('Input:', value)}
+ *   name="address"
+ *   label="Address"
+ *   placeholder="Start typing an address…"
+ *   options={{ componentRestrictions: { country: "br" } }}
+ *   onChange={(v) => setRawAddress(v)}
  *   onPlaceChanged={(place) => {
- *     console.log('Selected place:', place);
- *     // place = {
- *     //   street: "Rua exemplo",
- *     //   city: "São Paulo",
- *     //   state: "São Paulo",
- *     //   neighborhood: "Centro",
- *     //   postalCode: "01310-100",
- *     //   stateShortName: "SP",
- *     //   streetNumber: "123",
- *     //   coordinates: { lat: -23.5505, lng: -46.6333 }
- *     // }
- *   }}
- *   options={{
- *     componentRestrictions: { country: "br" }
+ *     setAddress({
+ *       street: place.street,
+ *       city: place.city,
+ *       state: place.state,
+ *       postalCode: place.postalCode,
+ *       coordinates: place.coordinates,
+ *     });
  *   }}
  * />
  * ```
- *
- * @param {SearchPlacesProps} props - Component props
- * @param {StandaloneSearchBoxProps["options"]} [props.options] - Google Maps API options for filtering/customizing search results
- * @param {(value: string) => void} [props.onChange] - Handler called when the input text changes
- * @param {(place: PlaceData) => void} [props.onPlaceChanged] - Handler called when a place is selected, receives structured address data
- * @returns {JSX.Element} An input field with Google Places autocomplete functionality
- *
- * @requires Google Maps JavaScript API with Places library loaded
- * @requires @react-google-maps/api package
  */
 declare function SearchPlaces(props: SearchPlacesProps): JSX.Element;
 export { SearchPlaces };

package/dist/components/searchPlaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchPlaces.d.ts","sourceRoot":"","sources":["../../src/components/searchPlaces.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAC;AACtC,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAY5C;;;;;;GAMG;AACH,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,wBAAwB,CAAC,SAAS,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,cAAc,EAAE,MAAM,CAAC;QACvB,YAAY,EAAE,MAAM,CAAC;QACrB,WAAW,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;KAC3C,KAAK,IAAI,CAAC;CACZ,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAmF3D;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"searchPlaces.d.ts","sourceRoot":"","sources":["../../src/components/searchPlaces.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAC;AACtC,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAQ5C,qEAAqE;AACrE,KAAK,SAAS,GAAG;IACf,0CAA0C;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,YAAY,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,wBAAwB,CAAC,SAAS,CAAC,CAAC;IAC9C,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAmF3D;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/searchPlaces.js

@@ -3,45 +3,38 @@ import { StandaloneSearchBox } from "@react-google-maps/api";
 import { useState } from "react";
 import { Input } from "./input";
 /**
- * SearchPlaces component - A Google Places autocomplete input field.
+ * SearchPlaces — text input with Google Places autocomplete that returns structured address data.
  *
- * This component integrates with Google Maps API to provide address autocomplete functionality.
- * When a user selects a place from the suggestions, it extracts and returns structured address data
- * including street, city, state, neighborhood, postal code, and geographic coordinates.
+ * Requires the Google Maps JavaScript API with the Places library to be loaded.
+ * Built on `@react-google-maps/api`'s `StandaloneSearchBox`.
+ *
+ * @param props.options - Google Maps search box options (e.g. restrict by country).
+ * @param props.onChange - Fires on every keystroke — receives the current text value.
+ * @param props.onPlaceChanged - Fires when the user selects a suggestion — receives structured address data.
+ *
+ * **...Other valid `Input` properties (except `onLoad`, `onChange`, `type`)**
+ *
+ * @returns SearchPlaces JSX element (an `Input` wrapped in `StandaloneSearchBox`).
  *
- * @component
  * @example
  * ```tsx
  * <SearchPlaces
- *   placeholder="Digite o endereço"
- *   onChange={(value) => console.log('Input:', value)}
+ *   name="address"
+ *   label="Address"
+ *   placeholder="Start typing an address…"
+ *   options={{ componentRestrictions: { country: "br" } }}
+ *   onChange={(v) => setRawAddress(v)}
  *   onPlaceChanged={(place) => {
- *     console.log('Selected place:', place);
- *     // place = {
- *     //   street: "Rua exemplo",
- *     //   city: "São Paulo",
- *     //   state: "São Paulo",
- *     //   neighborhood: "Centro",
- *     //   postalCode: "01310-100",
- *     //   stateShortName: "SP",
- *     //   streetNumber: "123",
- *     //   coordinates: { lat: -23.5505, lng: -46.6333 }
- *     // }
- *   }}
- *   options={{
- *     componentRestrictions: { country: "br" }
+ *     setAddress({
+ *       street: place.street,
+ *       city: place.city,
+ *       state: place.state,
+ *       postalCode: place.postalCode,
+ *       coordinates: place.coordinates,
+ *     });
  *   }}
  * />
  * ```
- *
- * @param {SearchPlacesProps} props - Component props
- * @param {StandaloneSearchBoxProps["options"]} [props.options] - Google Maps API options for filtering/customizing search results
- * @param {(value: string) => void} [props.onChange] - Handler called when the input text changes
- * @param {(place: PlaceData) => void} [props.onPlaceChanged] - Handler called when a place is selected, receives structured address data
- * @returns {JSX.Element} An input field with Google Places autocomplete functionality
- *
- * @requires Google Maps JavaScript API with Places library loaded
- * @requires @react-google-maps/api package
  */
 function SearchPlaces(props) {
     const { onChange, onPlaceChanged, options, ...rest } = props;

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

@@ -1,127 +1,132 @@
 import { LucideIcon } from "lucide-react";
 import { FocusEvent } from "react";
 type SelectProps = {
+    /** Field name for form submission. Required. */
     name: string;
+    /** Array of selectable options. Required. */
     options: {
         label: string;
         value: string;
     }[];
+    /** Optional HTML id for the underlying hidden input. */
     id?: string;
+    /** Controlled selected value. */
     value?: string;
+    /** Uncontrolled default selected value. @default "" */
     defaultValue?: string;
+    /** Displays an asterisk on the label to signal a required field. */
     showAsterisk?: boolean;
+    /** Optional label text displayed above the select. */
     label?: string;
+    /** Validation error message displayed below the select. */
     errorMessage?: string;
+    /** Placeholder text shown when no option is selected. @default "Selecione..." */
     placeholder?: string;
+    /** Text shown when no options match the search query. @default "Sem opções disponíveis" */
     notFoundText?: string;
+    /** Additional CSS class applied to the wrapper element. */
     className?: string;
+    /** Disables all interactions. @default false */
     disabled?: boolean;
+    /** Prevents value changes while keeping the current value visible. @default false */
     readOnly?: boolean;
+    /** Shows a loading spinner and disables interactions. @default false */
     isLoading?: boolean;
+    /** Enables search/filter within the dropdown. @default false */
     isSearchable?: boolean;
+    /** Closes the dropdown after an option is selected. @default true */
     closeOnSelect?: boolean;
+    /** Callback fired when the search query changes. Use for async option loading. */
     onSearch?: (value: string) => void;
+    /** Callback fired when the selected value changes. */
     onChange?: (value: string) => void;
+    /** Callback fired when the select gains focus. */
     onFocus?: () => void;
+    /** Callback fired when the select loses focus. */
     onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
+    /**
+     * Select size.
+     * @default "md"
+     */
     size?: "md" | "lg";
+    /**
+     * Visual style variant.
+     * - `solid`: filled background.
+     * - `outline`: bordered, transparent background.
+     * - `underline`: bottom border only.
+     * @default "solid"
+     */
     variant?: "solid" | "outline" | "underline";
+    /** Text or icon rendered at the far left, outside the select area. */
     prefix?: string | LucideIcon;
+    /** Lucide icon rendered inside the select on the left. */
     leftIcon?: LucideIcon;
+    /** Maximum height (in px) of the options dropdown. */
     optionMaxHeight?: number;
+    /** When true, skips `FieldTemplate` wrapper (label and error text). @default false */
     unShowFieldTemplate?: boolean;
+    /**
+     * Layout direction forwarded to `FieldTemplate`.
+     * @default "horizontal"
+     */
     orientation?: "horizontal" | "vertical" | "horizontalReverse";
 };
 /**
- * Select component - used for selecting sle options from a dropdown list with support for search, labels, and validation
+ * Select — single-option dropdown with optional search, label, validation, and form integration.
  *
- * @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: true
- * @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
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * @returns Select JSX element wrapped in FieldWrapper with optional label and error
+ * @param props.name - Field name for form submission. Required.
+ * @param props.options - Array of selectable options (`{ label, value }`). Required.
+ * @param props.value - Controlled selected value.
+ * @param props.defaultValue - Uncontrolled default value. Default: ""
+ * @param props.label - Label text displayed above the select.
+ * @param props.placeholder - Placeholder shown when nothing is selected. Default: "Selecione..."
+ * @param props.errorMessage - Validation error message.
+ * @param props.isSearchable - Enables search/filter within the dropdown. Default: false
+ * @param props.isLoading - Shows a loading spinner and disables interactions. Default: false
+ * @param props.closeOnSelect - Closes the dropdown after selecting. Default: true
+ * @param props.onChange - Callback fired when the selected value changes.
+ * @param props.onSearch - Callback fired when the search query changes.
+ * @param props.size - Select size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
+ * @param props.orientation - Layout direction. Default: "horizontal"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
+ *
+ * @returns Select JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic select
+ * // Basic
  * <Select
- *   name="category:"
+ *   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
+ * // With label, validation, and searchable
  * <Select
  *   name="country"
- *   label="Country:"
+ *   label="Country"
+ *   showAsterisk
  *   isSearchable
- *   variant="outline"
- *   size="lg"
- *   leftIcon={GlobeIcon}
  *   options={countryOptions}
+ *   errorMessage={errors.country}
  *   notFoundText="No countries found"
  * />
  *
- * // Controlled select with callbacks
+ * // Controlled with async search
  * <Select
  *   name="tag"
- *   label="Tag:"
+ *   label="Tag"
  *   value={selectedTag}
  *   onChange={setSelectedTag}
- *   onSearch={handleSearch}
- *   closeOnSelect={false}
+ *   onSearch={fetchTagOptions}
  *   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;

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

@@ -1 +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;AAc5D,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;IAEzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuKjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"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;AAc5D,KAAK,WAAW,GAAG;IACjB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qEAAqE;IACrE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC5C,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuKjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/select/index.js

@@ -11,95 +11,61 @@ 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
+ * Select — single-option dropdown with optional search, label, validation, and form integration.
  *
- * @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: true
- * @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
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * @returns Select JSX element wrapped in FieldWrapper with optional label and error
+ * @param props.name - Field name for form submission. Required.
+ * @param props.options - Array of selectable options (`{ label, value }`). Required.
+ * @param props.value - Controlled selected value.
+ * @param props.defaultValue - Uncontrolled default value. Default: ""
+ * @param props.label - Label text displayed above the select.
+ * @param props.placeholder - Placeholder shown when nothing is selected. Default: "Selecione..."
+ * @param props.errorMessage - Validation error message.
+ * @param props.isSearchable - Enables search/filter within the dropdown. Default: false
+ * @param props.isLoading - Shows a loading spinner and disables interactions. Default: false
+ * @param props.closeOnSelect - Closes the dropdown after selecting. Default: true
+ * @param props.onChange - Callback fired when the selected value changes.
+ * @param props.onSearch - Callback fired when the search query changes.
+ * @param props.size - Select size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
+ * @param props.orientation - Layout direction. Default: "horizontal"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
+ *
+ * @returns Select JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic select
+ * // Basic
  * <Select
- *   name="category:"
+ *   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
+ * // With label, validation, and searchable
  * <Select
  *   name="country"
- *   label="Country:"
+ *   label="Country"
+ *   showAsterisk
  *   isSearchable
- *   variant="outline"
- *   size="lg"
- *   leftIcon={GlobeIcon}
  *   options={countryOptions}
+ *   errorMessage={errors.country}
  *   notFoundText="No countries found"
  * />
  *
- * // Controlled select with callbacks
+ * // Controlled with async search
  * <Select
  *   name="tag"
- *   label="Tag:"
+ *   label="Tag"
  *   value={selectedTag}
  *   onChange={setSelectedTag}
- *   onSearch={handleSearch}
- *   closeOnSelect={false}
+ *   onSearch={fetchTagOptions}
  *   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) {