@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/radio-button-group/parts/RadioButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),d=require("react-aria-components"),m=require("tailwind-variants"),x=require("../../flex/Flex.cjs"),p=require("../../text/Text.cjs"),v=require("./radio-input-selected.svg.cjs"),R=require("./radio-input-unselected.svg.cjs"),j=require("./RadioButtonHelper.cjs"),n=m.tv({slots:{base:["uy-group uy-flex uy-gap-100 uy-rounded-50 uy-items-center","data-[disabled]:uy-cursor-not-allowed","data-[readonly]:uy-cursor-not-allowed"],radio:["uy-border-border-form-enabled uy-border-solid uy-bg-surface-form-enabled","group-data-[disabled]:uy-border-border-form-disabled"],label:["uy-text-content-neutral","group-data-[disabled]:uy-text-content-neutral-disabled","group-data-[readonly]:uy-text-content-neutral group-data-[readonly]:uy-cursor-text"]},variants:{isFocusVisible:{true:"uy-outline-none uy-ring-2 uy-ring-offset-2 uy-ring-utility-focus-ring"}}}),u=t.forwardRef(({children:l,value:i,isDisabled:s,helperText:a,...c},y)=>{const{base:b,label:g}=n(),r=t.useContext(d.RadioGroupStateContext),f=t.useMemo(()=>r!=null&&r.isReadOnly?{"--radio-fill-color":"rgb(var(--uy-colors-border-form-read-only))","--radio-border-color":"rgb(var(--uy-colors-border-form-disabled))"}:{"--radio-fill-color":"rgb(var(--uy-colors-surface-primary-active))","--radio-border-color":"rgb(var(--uy-colors-border-form-active))"},[r==null?void 0:r.isReadOnly]);return o.jsxs(x.Flex,{direction:"col",gap:"50",children:[o.jsx(d.Radio,{...c,value:i,isDisabled:s,className:({isFocusVisible:e})=>b({isFocusVisible:e}),ref:y,children:({isSelected:e})=>o.jsxs(o.Fragment,{children:[e?o.jsx(v,{style:f}):o.jsx(R,{style:r!=null&&r.isReadOnly?{"--radio-border-color":"rgb(var(--uy-colors-border-form-disabled))"}:{"--radio-border-color":"rgb(var(--uy-colors-border-form-enabled))"}}),o.jsx(p.Text,{variant:"body",className:g(),children:l})]})}),a?o.jsx(j.RadioButtonHelper,{children:a}):null]})});u.displayName="RadioButton";exports.RadioButton=u;exports.radioButton=n;

package/dist/cjs/components/radio-button-group/parts/RadioButton.d.cts

@@ -0,0 +1,74 @@
+import { ReactNode } from 'react';
+import { RadioProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const radioButton: import('tailwind-variants').TVReturnType<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    base: string[];
+    radio: string[];
+    label: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    isFocusVisible: {
+        true: string;
+    };
+}>, {
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    base: string[];
+    radio: string[];
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    base: string[];
+    radio: string[];
+    label: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    isFocusVisible: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * The `RadioButton` component enables users to select a single option from a set of choices.
+ * It displays as a circular button that can be selected, and provides visual feedback for various states including selected, unselected, disabled, and read-only.
+ * @param {RadioButtonProps} props - The props for the `RadioButton` component
+ * @example
+ * ```tsx
+ * import { RadioButton, RadioButtonGroup } from '@payfit/unity-components'
+ *
+ * <RadioButtonGroup>
+ *   <RadioButton value="option1">Option 1</RadioButton>
+ *   <RadioButton value="option2">Option 2</RadioButton>
+ *   <RadioButton value="option3" isDisabled>Option 3</RadioButton>
+ * </RadioButtonGroup>
+ * ```
+ * @see {@link RadioButtonProps} for all available props
+ * @see {@link RadioButtonGroup} for the parent component
+ */
+declare const RadioButton: import('react').ForwardRefExoticComponent<RadioButtonProps & import('react').RefAttributes<HTMLLabelElement>>;
+export interface RadioButtonProps extends Omit<RadioProps, 'children'>, VariantProps<typeof radioButton> {
+    /**
+     * The content to display as the radio button's label.
+     */
+    children: ReactNode;
+    /**
+     * Optional helper text to display below the radio button.
+     * Provides additional context or instructions for the option.
+     */
+    helperText?: ReactNode;
+}
+export { RadioButton };

package/dist/cjs/components/radio-button-group/parts/RadioButtonHelper.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),n=require("../../text/Text.cjs"),e=a.forwardRef(({children:t},o)=>r.jsx(n.Text,{color:"content.neutral.low",variant:"bodySmall",className:"uy-ml-[28px]",ref:o,children:t}));e.displayName="RadioButtonHelper";exports.RadioButtonHelper=e;

package/dist/cjs/components/radio-button-group/parts/RadioButtonHelper.d.cts

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+export type RadioButtonHelperProps = PropsWithChildren;
+/**
+ * The `RadioButtonHelper` component provides additional context or instructions for radio button options.
+ * It displays as smaller, lower-contrast text positioned below the radio button to help users understand the option better.
+ * @example
+ * ```tsx
+ * import { RadioButton, RadioButtonHelper } from '@payfit/unity-components'
+ *
+ * <RadioButton value="option1">
+ *   Option 1
+ *   <RadioButtonHelper>Additional information about this option</RadioButtonHelper>
+ * </RadioButton>
+ * ```
+ */
+declare const RadioButtonHelper: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { RadioButtonHelper };

package/dist/cjs/components/radio-button-group/parts/radio-input-selected.svg.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("react");function a(e){if(e&&typeof e=="object"&&"default"in e)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const r=a(i),c=e=>r.createElement("svg",{width:20,height:20,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},r.createElement("g",{id:"Radio input"},r.createElement("path",{id:"Background",d:"M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z",fill:"white",stroke:"var(--radio-border-color, #0157B2)",strokeWidth:1.25}),r.createElement("path",{id:"Foreground",d:"M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z",fill:"var(--radio-fill-color, #0157B2)"})));module.exports=c;

package/dist/cjs/components/radio-button-group/parts/radio-input-unselected.svg.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("react");function i(e){if(e&&typeof e=="object"&&"default"in e)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const o=i(c),a=e=>o.createElement("svg",{width:20,height:20,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},o.createElement("g",{id:"Radio input"},o.createElement("path",{id:"Background",d:"M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z",fill:"white",stroke:"var(--radio-border-color, #CDCED6)",strokeWidth:1.25})));module.exports=a;

package/dist/cjs/components/radio-button-group-field/RadioButtonGroupField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),j=require("react-hook-form"),q=require("../form-field/FormField.cjs"),R=require("../form-field/parts/FormControl.cjs"),b=require("../form-field/parts/FormFeedbackText.cjs"),h=require("../form-field/parts/FormHelperText.cjs"),y=require("../form-field/parts/FormLabel.cjs"),B=require("../radio-button-group/RadioButtonGroup.cjs"),o=p.forwardRef(({children:r,label:t,isReadOnly:n,isDisabled:i,isInvalid:s,isRequired:c,name:u,requiredVariant:l,feedbackText:d,helperText:a},m)=>{const{control:F}=j.useFormContext(),x={isRequired:c,isInvalid:s,isDisabled:i,isReadOnly:n};return e.jsxs(q.FormField,{control:F,name:u,...x,ref:m,className:"uy-gap-150",children:[e.jsxs("div",{className:"uy-flex-col uy-gap-50",children:[e.jsx(y.FormLabel,{requiredVariant:l,children:t}),e.jsx(h.FormHelperText,{children:a}),e.jsx(b.FormFeedbackText,{children:d})]}),e.jsx(R.FormControl,{children:e.jsx(B.RadioButtonGroup,{children:r})})]})});o.displayName="RadioButtonGroupField";exports.RadioButtonGroupField=o;

package/dist/cjs/components/radio-button-group-field/RadioButtonGroupField.d.cts

@@ -0,0 +1,47 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { LabelProps } from '../label/Label.cjs';
+/**
+ * RadioButtonGroupField component provides a form field with radio button group functionality.
+ * It integrates with React Hook Form for form state management and validation.
+ * @template TFieldValues - The type of the form values
+ * @template TName - The type of the field name
+ */
+interface RadioButtonGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the radio button group. */
+    label: string;
+    /** Helper text to display below the radio button group. */
+    helperText?: ReactNode;
+    /** Whether the radio button group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the radio button group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the radio button group is invalid. */
+    isInvalid?: boolean;
+    /** Feedback text to display, typically used for error messages. */
+    feedbackText?: ReactNode;
+}
+/**
+ * A form field component that wraps a group of radio buttons.
+ *
+ * This component provides a complete form field with label, helper text, and validation feedback.
+ * It integrates with React Hook Form for form state management and validation.
+ * @example
+ * ```tsx
+ * <RadioButtonGroupField
+ *   name="fruit"
+ *   label="Choose your favorite fruit"
+ *   helperText="Select one option"
+ * >
+ *   <RadioButton value="Apple">Apple</RadioButton>
+ *   <RadioButton value="Banana">Banana</RadioButton>
+ *   <RadioButton value="Orange">Orange</RadioButton>
+ * </RadioButtonGroupField>
+ * @remarks
+ * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/forms-radiobuttongroupfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/43631a-radio-group)
+ * ```
+ */
+declare const RadioButtonGroupField: import('react').ForwardRefExoticComponent<RadioButtonGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
+export { RadioButtonGroupField };

package/dist/cjs/components/search/Search.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("react"),u=require("react-aria-components"),I=require("react-intl"),M=require("tailwind-variants"),N=require("../icon-button/CircularIconButton.cjs"),s=require("../icon/Icon.cjs"),q=require("../spinner/Spinner.cjs"),i=M.tv({slots:{base:["uy-w-full uy-flex uy-gap-100 uy-border uy-border-solid uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-border-border-form-enabled uy-items-center","enabled:uy-border-border-form-enabled enabled:uy-bg-surface-danger-enabled enabled:uy-border-border-form-enabled","focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-utility-focus-ring focus-visible:uy-ring-offset-2 focus-visible:uy-border-border-form-focus focus-visible:uy-bg-surface-form-focus","active:uy-border-border-form-active","group-data-[disabled=true]:uy-border-border-form-disabled group-data-[disabled=true]:uy-bg-surface-form-disabled","group-data-[invalid=true]:uy-border-border-form-error group-data-[invalid=true]:uy-bg-surface-form-error"],input:["uy-h-300 uy-typography-body uy-flex-grow uy-outline-none [&::-webkit-search-cancel-button]:uy-hidden","enabled:uy-text-content-form-enabled","hover:uy-text-content-form-hover","focus-visible:uy-text-content-form-focus","active:uy-text-content-form-active","group-data-[invalid=true]:uy-bg-surface-form-error"],icon:["group-data-[disabled=true]:uy-text-content-neutral-lowest-disabled"],invalidIcon:["uy-hidden","group-data-[invalid=true]:uy-block"],wrapperState:["uy-flex uy-items-center"],feedbackText:["uy-typography-body-small-strong uy-text-content-form-invalid"],closeButton:["uy-text-content-neutral-enabled group-data-[empty=true]:uy-hidden"]},variants:{isReadOnly:{true:{base:"uy-bg-surface-form-disabled",icon:"uy-text-content-neutral-lowest-disabled",button:"uy-bg-surface-form-error uy-text-content-neutral-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-read-only uy-placeholder-content-form-read-only"},false:{base:["uy-bg-surface-form-enabled","hover:uy-border-border-form-hover hover:uy-bg-surface-form-hover"],icon:"uy-text-content-neutral-lowest",input:"uy-bg-text-content-form-active uy-placeholder-content-neutral-lowest"}}}}),C=({intl:a,placeholder:r,isDisabled:t})=>t?"":r||a.formatMessage({id:"unity:component:search:placeholder",defaultMessage:"Search"}),l=w.forwardRef(({isLoading:a=!1,isInvalid:r,isDisabled:t,isReadOnly:n,name:c,placeholder:d,feedbackText:y,label:b,...f},m)=>{const{base:g,icon:p,input:h,invalidIcon:v,wrapperState:x,feedbackText:S,closeButton:j}=i({isReadOnly:n}),o=I.useIntl();return e.jsxs(u.SearchField,{"aria-label":b,className:"uy-group",name:c,ref:m,isInvalid:r,isDisabled:t||n,isReadOnly:n,...f,children:[e.jsxs("div",{className:g(),children:[e.jsx(s.Icon,{src:"MagnifyingGlassOutlined",className:p(),"aria-hidden":"true"}),e.jsx(u.Input,{className:h(),placeholder:C({intl:o,placeholder:d,isDisabled:t})}),e.jsxs("div",{className:x(),children:[e.jsx(s.Icon,{className:v(),src:"WarningCircleOutlined",color:"content.form.invalid",alt:o.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),a&&e.jsx(q.Spinner,{label:o.formatMessage({id:"unity:component:common:loading:label",defaultMessage:"Loading..."}),color:"primary",size:"small","aria-hidden":"true"}),e.jsx(N.CircularIconButton,{asElement:"button",title:o.formatMessage({id:"unity:component:common:clear:title",defaultMessage:"Clear"}),className:j(),icon:"CloseOutlined"})]})]}),e.jsx(u.FieldError,{className:S(),children:y})]})});l.displayName="Search";exports.Search=l;exports.search=i;

package/dist/cjs/components/search/Search.d.cts

@@ -0,0 +1,180 @@
+import { ReactNode } from 'react';
+import { SearchFieldProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const search: import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+    feedbackText: string[];
+    closeButton: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}>, {
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+    feedbackText: string[];
+    closeButton: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+    feedbackText: string[];
+    closeButton: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export interface SearchProps extends VariantProps<typeof search>, SearchFieldProps {
+    /**
+     * Use this when search results are being fetched asynchronously.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Text displayed below the search field, typically used for error messages.
+     * Only visible when isInvalid is true.
+     */
+    feedbackText?: ReactNode;
+    /**
+     * Custom placeholder text for the search input.
+     * @default "Search"
+     */
+    placeholder?: string;
+    /**
+     * A label used as aria-label for the search input
+     */
+    label: string;
+}
+/**
+ * The `Search` component enables users to search or filter content within your application. The component
+ * supports various states including loading, invalid, disabled, and read-only modes to handle different
+ * @param {SearchProps} props - The props for the Search component
+ * @see {@link SearchProps} for all available props
+ * @example
+ * ```tsx
+ * import { Search } from '@payfit/unity-components'
+ *
+ * function OnChangeExample() {
+ *   const [filteredItems, setFilteredItems] = useState(items)
+ *
+ *   const handleChange = (value) => {
+ *     setFilteredItems(
+ *       value !== '' ? items.filter(item => item.name.includes(value)) : items
+ *     )
+ *   }
+ *
+ *   return (
+ *     <>
+ *       <Search onChange={handleChange} />
+ *       {filteredItems.map(item => (
+ *         <div key={item.id}>{item.name}</div>
+ *       ))}
+ *     </>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/search--docs)
+ */
+declare const Search: import('react').ForwardRefExoticComponent<SearchProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Search };

package/dist/cjs/components/segmented-button-group/SegmentedButtonGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),i=require("react-aria"),s=require("react-stately"),a=require("./SegmentedButtonGroups.context.cjs"),o=e=>{const{children:r}=e,t=s.useRadioGroupState(e),{radioGroupProps:n}=i.useRadioGroup({...e,orientation:"horizontal"},t);return u.jsx("div",{...n,className:"uy-bg-surface-neutral-lowest uy-pl-50 uy-pr-50 uy-pt-50 uy-pb-50 uy-flex uy-gap-50 uy-rounded-75 uy-w-fit",children:u.jsx(a.SegmentedButtonGroupProvider,{state:t,children:r})})};o.displayName="SegmentedButtonGroup";exports.SegmentedButtonGroup=o;

package/dist/cjs/components/segmented-button-group/SegmentedButtonGroup.d.cts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { RadioGroupProps } from 'react-aria-components';
+export interface BasedSegmentedButtonGroupProps extends Omit<RadioGroupProps, 'children' | 'style' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'validationBehavior' | 'isRequired' | 'validate' | 'defaultValue'> {
+    /**
+     * The content of the `SegmentedButtonGroup`. Should contain `ToggleButton` components as children.
+     */
+    children: ReactNode;
+}
+export interface UncontrolledSegmentedButtonGroupProps extends BasedSegmentedButtonGroupProps, Required<Pick<RadioGroupProps, 'defaultValue'>> {
+}
+/**
+ * The `SegmentedButtonGroup` component is an accessible control that allows users to select one option from a set of mutually exclusive options.
+ * It's similar to a radio group but styled as connected buttons, providing a more compact and visually distinct selection mechanism.
+ * Use this component when you need to:
+ * - Present a small set of related but mutually exclusive options
+ * - Create a toggle between different views or modes
+ * - Provide a compact alternative to radio buttons or tabs
+ * - Allow users to switch between different states of the same content*
+ * The component supports both controlled and uncontrolled usage patterns.
+ * @see {@link ToggleButton} - The child component used within SegmentedButtonGroup
+ * @see {@link https://react-spectrum.adobe.com/react-aria/useRadioGroup.html|React Aria useRadioGroup} - The underlying hook used for accessibility
+ * @see {@link https://www.payfit.design/24f360409/p/2745fe-segmented-control|Design System Documentation}
+ * @example
+ * Basic usage:
+ * ```tsx
+ * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
+ *
+ * function Example() {
+ *   return (
+ *     <SegmentedButtonGroup>
+ *       <ToggleButton value="option1">Option 1</ToggleButton>
+ *       <ToggleButton value="option2">Option 2</ToggleButton>
+ *       <ToggleButton value="option3">Option 3</ToggleButton>
+ *     </SegmentedButtonGroup>
+ *   )
+ * }
+ * ```
+ */
+declare const SegmentedButtonGroup: {
+    (props: UncontrolledSegmentedButtonGroupProps | BasedSegmentedButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SegmentedButtonGroup };

package/dist/cjs/components/segmented-button-group/SegmentedButtonGroups.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),e=n.createContext({state:{}});function u({children:t,state:o}){return r.jsx(e.Provider,{value:{state:o},children:t})}exports.SegmentedButtonGroupContext=e;exports.SegmentedButtonGroupProvider=u;

package/dist/cjs/components/segmented-button-group/SegmentedButtonGroups.context.d.cts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { RadioGroupState } from 'react-stately';
+interface SegmentedButtonGroupContextValue {
+    state: RadioGroupState;
+}
+export declare const SegmentedButtonGroupContext: import('react').Context<SegmentedButtonGroupContextValue>;
+export declare function SegmentedButtonGroupProvider({ children, state, }: PropsWithChildren<SegmentedButtonGroupContextValue>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/segmented-button-group/parts/ToggleButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),a=require("react-aria"),h=require("react-intl"),v=require("tailwind-variants"),P=require("../../icon/Icon.cjs"),w=require("../../spinner/Spinner.cjs"),I=require("../SegmentedButtonGroups.context.cjs"),S=v.tv({slots:{base:["uy-rounded-50 uy-pt-50 uy-pb-50 uy-pr-150 uy-flex uy-gap-25","active:uy-gb-surface-neutral-pressed"],wrapper:["uy-flex uy-gap-50 uy-items-center uy-typography-action","active:uy-text-content-neutral-pressed"]},variants:{isSelected:{true:{base:"uy-bg-surface-neutral-enabled uy-shadow-raising"}},isLoading:{true:{base:"uy-bg-surface-neutral-disabled uy-cursor-not-allowed",wrapper:"uy-text-content-inverted-disabled"}},isFocusVisible:{true:{base:"uy-outline-none uy-ring-2 uy-ring-ring uy-ring-offset-2 uy-ring-utility-focus-ring"}},hasPrefixIcon:{true:"",false:""}},compoundVariants:[{isLoading:!1,isSelected:!1,className:{base:"hover:uy-bg-surface-neutral-hover",wrapper:"uy-text-content-neutral-enabled hover:uy-text-content-neutral-hover"}},{isLoading:!0,hasPrefixIcon:!1,className:{base:"uy-pl-150 uy-cursor-not-allowed"}},{isLoading:!0,hasPrefixIcon:!0,className:{base:"uy-pl-150 uy-cursor-not-allowed"}},{isLoading:!1,hasPrefixIcon:!1,className:{base:"uy-pl-150 uy-cursor-pointer"}},{isLoading:!1,hasPrefixIcon:!0,className:{base:"uy-pl-50 uy-cursor-pointer"}}],defaultVariants:{isSelected:!1,isLoading:!1,hasPrefixIcon:!1}}),j=({intl:t,children:o,isLoading:u,prefixIcon:s,isSelected:n})=>u?e.jsx(w.Spinner,{label:t.formatMessage({id:"unity:component:common:loading:label",defaultMessage:"Loading..."}),color:"inherit",size:"small"}):e.jsxs(e.Fragment,{children:[s?e.jsx(P.Icon,{src:n?`${s}Filled`:`${s}Outlined`,color:"inherit",role:"presentation"}):null,o]}),g=i.forwardRef((t,o)=>{const{children:u,value:s,prefixIcon:n,isLoading:r}=t,{state:l}=i.useContext(I.SegmentedButtonGroupContext),c=i.useRef(null),{inputProps:y}=a.useRadio(t,l,c),{focusProps:f,isFocusVisible:p}=a.useFocusRing(),b=h.useIntl(),d=l.selectedValue===s,{base:x,wrapper:m}=S({isSelected:d,hasPrefixIcon:!!n,isLoading:r,isFocusVisible:p});return e.jsxs("label",{ref:o,className:x(),"aria-disabled":r,children:[e.jsx(a.VisuallyHidden,{children:e.jsx("input",{...a.mergeProps(y,f),ref:c,disabled:r})}),e.jsx("span",{className:m(),children:j({intl:b,children:u,isLoading:r,isSelected:d,prefixIcon:n})})]})});g.displayName="ToggleButton";exports.ToggleButton=g;

package/dist/cjs/components/segmented-button-group/parts/ToggleButton.d.cts

@@ -0,0 +1,47 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { AriaRadioProps } from 'react-aria';
+import { IconName } from '../../../types/utils.cjs';
+export interface ToggleButtonProps extends AriaRadioProps {
+    /**
+     * The icon to display before the button text.
+     * The icon will automatically switch between outlined and filled variants based on the selection state:
+     * - When selected: Uses the filled variant (`${prefixIcon}Filled`)
+     * - When not selected: Uses the outlined variant (`${prefixIcon}Outlined`)
+     */
+    prefixIcon?: IconName<UnityIcon>;
+    /**
+     * Whether the button is in a loading state.
+     * When `true`, the button content is replaced with a spinner and the button becomes non-interactive.
+     * Use this prop to indicate that an action is being processed after the button is clicked.
+     * @default false
+     */
+    isLoading?: boolean;
+}
+/**
+ * The `ToggleButton` component is a specialized button used within a `SegmentedButtonGroup`.
+ * It functions like a radio button but is styled as a button, providing a more visual selection mechanism.
+ *
+ * `ToggleButton`s can display text, icons, or both, and support various states including selected, loading, and focused.
+ * They should always be used as children of a `SegmentedButtonGroup` component, which manages their selection state.
+ * @remarks
+ * This component must be used inside a SegmentedButtonGroup component
+ * @see {@link SegmentedButtonGroup} - The parent component required for ToggleButton
+ * @see {@link https://react-spectrum.adobe.com/react-aria/useRadio.html|React Aria useRadio} - The underlying hook used for accessibility
+ * @example
+ * Basic usage within a SegmentedButtonGroup:
+ * ```tsx
+ * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
+ *
+ * function Example() {
+ *   return (
+ *     <SegmentedButtonGroup defaultValue="option1">
+ *       <ToggleButton value="option1">Option 1</ToggleButton>
+ *       <ToggleButton value="option2">Option 2</ToggleButton>
+ *       <ToggleButton value="option3">Option 3</ToggleButton>
+ *     </SegmentedButtonGroup>
+ *   )
+ * }
+ * ```
+ */
+declare const ToggleButton: import('react').ForwardRefExoticComponent<ToggleButtonProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { ToggleButton };

package/dist/cjs/components/select/Select.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),t=require("react-aria-components"),N=require("tailwind-variants"),B=require("./parts/SearchInput.cjs"),C=require("./parts/SelectButton.cjs"),P=N.tv({slots:{base:"uy-flex uy-flex-col uy-gap-100 uy-w-full",popover:"uy-rounded-75 uy-border uy-border-solid uy-border-border-neutral uy-w-[var(--trigger-width)] uy-bg-surface-neutral",listbox:"uy-overflow-y-auto uy-max-h-[296px] uy-pt-100 uy-pb-100 uy-pl-100 uy-pr-100"}}),O=({children:s,items:o,placeholder:r,name:y,isDisabled:n,isInvalid:l,isReadOnly:c,value:u,defaultValue:x,onChange:a,isSearchable:f=!1,onBlur:S,...b},m)=>{const[j,v]=d.useState(!1),{contains:g}=t.useFilter({sensitivity:"base"}),{base:h,popover:q,listbox:i}=P(),w=u!==void 0||a!==void 0?{selectedKey:u,onSelectionChange:a}:{defaultSelectedKey:x};return e.jsxs(t.Select,{onOpenChange:v,...b,ref:m,className:h(),name:y,placeholder:n?void 0:r,isDisabled:n||c,isInvalid:l,onBlur:S,...w,children:[e.jsx(C.SelectButton,{isDisabled:n,isInvalid:l,isReadOnly:c,isOpen:j}),e.jsx(t.Popover,{offset:1,containerPadding:8,className:q(),children:f?e.jsxs(t.Autocomplete,{filter:g,children:[e.jsx(B.SearchInput,{}),e.jsx(t.ListBox,{items:o,className:i(),children:s})]}):e.jsx(t.ListBox,{items:o,className:i(),children:s})})]})},p=d.forwardRef(function(o,r){return O(o,r)});p.displayName="Select";exports.Select=p;

package/dist/cjs/components/select/Select.d.cts

@@ -0,0 +1,54 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { SelectProps as AriaSelectProps } from 'react-aria-components';
+export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'style' | 'className' | 'selectedKey' | 'onSelectionChange'> {
+    /** In static mode, contains <SelectOption /> and <SelectOptionGroup /> components, in dynamic mode, contains a function to render items passed to the component*/
+    children: ReactNode | ((item: T) => ReactNode);
+    /** In dynamic mode, contains the items to display in the select */
+    items?: Iterable<T>;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** The value of the selected item */
+    value?: AriaSelectProps<T>['selectedKey'];
+    /** The default value of the selected item in uncontrolled mode */
+    defaultValue?: AriaSelectProps<T>['defaultSelectedKey'];
+    /** Function trigger when a item is selected */
+    onChange?: AriaSelectProps<T>['onSelectionChange'];
+    /** Whether the search input should be displayed or not */
+    isSearchable?: boolean;
+}
+type SelectComponent = (<TItems extends object>(props: SelectProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `Select` component is used to render a list of options
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *  vegetable: z.string()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form, FormField } = useUnityForm(schema)
+ *
+ *   return (
+ *    <Form action={handleSubmit}>
+ *      <FormField name="vegetable">
+ *        <FormLabel>Vegetables</FormLabel>
+ *        <FormHelperText>Select your favorite vegetable</FormHelperText>
+ *        <FormControl>
+ *          <Select>
+ *            <SelectOption id="Cabbage">Cabbage</SelectOption>
+ *            <SelectOption id="Broccoli">Broccoli</SelectOption>
+ *           <SelectOption id="Carrots">Carrots</SelectOption>
+ *          </Select>
+ *        </FormControl>
+ *      </FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ */
+declare const Select: SelectComponent;
+export { Select };

package/dist/cjs/components/select/parts/SearchInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("react-aria-components"),l=require("react-intl"),y=require("tailwind-variants"),d=require("../../icon-button/CircularIconButton.cjs"),p=require("../../icon/Icon.cjs"),m=y.tv({slots:{base:"uy-flex uy-gap-100 uy-border uy-border-solid uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-border-border-form-active uy-text-content-form-active uy-mt-100 uy-mb-100 uy-ml-100 uy-mr-100 uy-typography-body",input:"uy-flex-grow uy-outline-none [&::-webkit-search-cancel-button]:uy-hidden",button:"uy-text-content-neutral-enabled",separator:"uy-h-[1px] uy-bg-surface-neutral-lowest uy-w-full uy-mt-100"}}),r=i.forwardRef((b,n)=>{const u=l.useIntl(),{base:a,input:s,button:o,separator:c}=m();return e.jsxs(e.Fragment,{children:[e.jsxs(t.SearchField,{className:a(),ref:n,"data-dd-privacy":"mask",children:[e.jsx(p.Icon,{src:"MagnifyingGlassOutlined","aria-hidden":"true"}),e.jsx(t.Input,{className:s()}),e.jsx(d.CircularIconButton,{title:u.formatMessage({id:"unity:component:common:clear:title",defaultMessage:"Clear"}),className:o(),icon:"CloseOutlined"})]}),e.jsx("div",{"aria-hidden":"true",className:c()})]})});r.displayName="SearchInput";exports.SearchInput=r;

package/dist/cjs/components/select/parts/SearchInput.d.cts

@@ -0,0 +1,2 @@
+declare const SearchInput: import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>;
+export { SearchInput };

package/dist/cjs/components/select/parts/SelectButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),o=require("react-aria-components"),m=require("react-intl"),p=require("tailwind-variants"),a=require("../../icon/Icon.cjs"),v=p.tv({slots:{base:"uy-flex uy-flex-row uy-gap-100 uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-border-solid focus-visible:uy-ring-2 focus-visible:uy-ring-utility-focus-ring focus-visible:uy-ring-offset-2 uy-outline-none uy-border",selectValue:"uy-whitespace-nowrap uy-text-ellipsis uy-typography-body uy-flex-grow uy-text-left data-[placeholder]:uy-text-content-neutral-lowest",iconWrapper:"uy-flex uy-gap-50",icon:""},variants:{isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",selectValue:"uy-text-content-form-disabled"}},isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled",selectValue:"uy-text-content-form-readonly",icon:"uy-text-content-primary-disabled"}}},compoundVariants:[{isDisabled:!1,isInvalid:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled hover:uy-border-border-form-hover uy-bg-surface-form-enabled hover:uy-bg-surface-form-hover active:uy-border-border-form-active",selectValue:"uy-text-content-neutral-enabled hover:uy-text-content-neutral-hover",icon:"uy-text-content-form-enabled hover:uy-text-content-form-hover"}}],defaultVariants:{isDisabled:!1,isInvalid:!1,isReadOnly:!1}}),s=b.forwardRef(({isDisabled:r,isInvalid:t,isReadOnly:n,isOpen:u},l)=>{const i=m.useIntl(),{base:c,selectValue:d,iconWrapper:y,icon:f}=v({isDisabled:r,isInvalid:t,isReadOnly:n});return e.jsxs(o.Button,{"data-dd-privacy":"mask",className:c(),ref:l,isDisabled:r,children:[e.jsx(o.SelectValue,{className:d()}),e.jsxs("div",{className:y(),children:[t&&e.jsx(a.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:i.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),e.jsx(a.Icon,{className:f(),"aria-hidden":"true",src:u?"CaretUpOutlined":"CaretDownOutlined"})]})]})});s.displayName="SelectButton";exports.SelectButton=s;

package/dist/cjs/components/select/parts/SelectButton.d.cts

@@ -0,0 +1,8 @@
+export interface SelectButtonProps {
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    isOpen: boolean;
+}
+declare const SelectButton: import('react').ForwardRefExoticComponent<SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { SelectButton };

package/dist/cjs/components/select/parts/SelectOption.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),y=require("react-aria-components"),f=require("tailwind-variants"),x=require("../../icon/Icon.cjs"),b=require("./SelectOption.context.cjs"),p=f.tv({base:"uy-flex uy-flex-col uy-typography-body uy-rounded-50 uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-outline-none",variants:{isFocusVisible:{true:"uy-outline-offset-2 uy-outline-2 uy-outline-utility-focus-ring"},isHovered:{true:"uy-bg-surface-neutral-hover uy-text-content-neutral"},isPressed:{true:"uy-bg-surface-neutral-pressed uy-text-content-neutral-pressed"},isSelected:{true:"uy-bg-surface-neutral-active uy-text-content-neutral-active"},isDisabled:{true:"uy-text-content-neutral-disabled"}},compoundVariants:[{isFocusVisible:!1,isHovered:!1,isPressed:!1,isSelected:!1,isDisabled:!1,class:"uy-bg-surface-neutral-enabled uy-text-content-neutral-enabled"}]}),r=d.forwardRef((s,i)=>{const{children:n,isDisabled:u,textValue:l}=s;return e.jsx(y.ListBoxItem,{...s,ref:i,"data-dd-privacy":"mask",textValue:l,className:({isHovered:t,isPressed:a,isFocusVisible:c,isSelected:o})=>p({isHovered:t,isPressed:a,isFocusVisible:c,isSelected:o,isDisabled:u}),children:({isSelected:t})=>e.jsx(b.SelectOptionProvider,{isDisabled:u,children:t?e.jsxs("div",{className:"uy-flex uy-justify-between",children:[e.jsx("div",{className:"uy-flex uy-flex-col",children:e.jsx(e.Fragment,{children:n})}),e.jsx(x.Icon,{src:"CheckOutlined"})]}):e.jsx(e.Fragment,{children:n})})})});r.displayName="SelectOption";exports.SelectOption=r;

package/dist/cjs/components/select/parts/SelectOption.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("react"),t=o.createContext({isDisabled:void 0});function r({children:e,isDisabled:n}){return i.jsx(t.Provider,{value:{isDisabled:n},children:e})}function c(){const e=o.useContext(t);if(!e)throw new Error("useSelectOptionContext must be used within an SelectOptionProvider");return e}exports.SelectOptionContext=t;exports.SelectOptionProvider=r;exports.useSelectOptionContext=c;

package/dist/cjs/components/select/parts/SelectOption.context.d.cts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+interface SelectOptionContextValue {
+    isDisabled: boolean | undefined;
+}
+export declare const SelectOptionContext: import('react').Context<SelectOptionContextValue>;
+export declare function SelectOptionProvider({ children, isDisabled, }: PropsWithChildren<SelectOptionContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useSelectOptionContext(): SelectOptionContextValue;
+export {};

package/dist/cjs/components/select/parts/SelectOption.d.cts

@@ -0,0 +1,13 @@
+import { default as React, ReactNode } from 'react';
+import { ListBoxItemProps } from 'react-aria-components';
+/**
+ * SelectOption component for displaying options in a Select dropdown.
+ * @note The `textValue` prop (inherited from ListBoxItemProps) is used for searching when the content
+ * of the option is more complex than a simple string (e.g., contains components
+ * like Avatar, Flex, etc.). Providing this prop enables search functionality
+ * for complex content options.
+ */
+declare const SelectOption: React.ForwardRefExoticComponent<Omit<ListBoxItemProps<object>, "children"> & {
+    children: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { SelectOption };

package/dist/cjs/components/select/parts/SelectOptionGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),o=require("react-aria-components"),p=require("tailwind-variants"),y=p.tv({slots:{base:"",header:"uy-text-content-neutral-enabled uy-typography-body-strong uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150",separator:"uy-h-[1px] uy-bg-surface-neutral-lowest uy-w-full uy-mb-100 uy-mt-100 last:uy-hidden"}}),d=({label:n,children:r,items:t},a)=>{const{base:u,header:i,separator:c}=y();return e.jsxs(e.Fragment,{children:[e.jsxs(o.ListBoxSection,{ref:a,className:u(),id:n,items:t,children:[e.jsx(o.Header,{className:i(),children:n}),t?e.jsx(o.Collection,{items:t,children:r}):e.jsx(e.Fragment,{children:r})]}),e.jsx(o.Separator,{orientation:"horizontal",className:c()})]})},s=l.forwardRef(function(r,t){return d(r,t)});s.displayName="SelectOptionGroup";exports.SelectOptionGroup=s;

package/dist/cjs/components/select/parts/SelectOptionGroup.d.cts

@@ -0,0 +1,12 @@
+import { ForwardedRef, JSX } from 'react';
+import { ListBoxSectionProps } from 'react-aria-components';
+export interface SelectOptionGroupProps<T extends object> extends ListBoxSectionProps<T> {
+    label: string;
+}
+type SelectOptionGroupComponent = (<TItems extends object>(props: SelectOptionGroupProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+declare const SelectOptionGroup: SelectOptionGroupComponent;
+export { SelectOptionGroup };

package/dist/cjs/components/select/parts/SelectOptionHelper.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),i=require("tailwind-variants"),l=require("./SelectOption.context.cjs"),c=i.tv({base:"uy-typography-body",variants:{isDisabled:{true:"uy-text-content-neutral-disabled",false:"uy-text-content-neutral-low"}}}),e=o.forwardRef(({children:t},n)=>{const{isDisabled:s}=l.useSelectOptionContext(),r=c({isDisabled:s});return a.jsx("span",{className:r,ref:n,"data-dd-privacy":"mask",children:t})});e.displayName="SelectOptionHelper";exports.SelectOptionHelper=e;

package/dist/cjs/components/select/parts/SelectOptionHelper.d.cts

@@ -0,0 +1,4 @@
+declare const SelectOptionHelper: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { SelectOptionHelper };

package/dist/cjs/components/select-field/SelectField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),y=require("react-hook-form"),f=require("tailwind-variants"),p=require("../form-field/FormField.cjs"),h=require("../form-field/parts/FormControl.cjs"),T=require("../form-field/parts/FormFeedbackText.cjs"),g=require("../form-field/parts/FormHelperText.cjs"),k=require("../form-field/parts/FormLabel.cjs"),C=require("../select/Select.cjs"),H=f.tv({base:"uy-flex uy-flex-col uy-gap-100"}),R=({children:o,feedbackText:t,helperText:r,isRequired:n,label:i,name:c,requiredVariant:s,isDisabled:F,isInvalid:u,isReadOnly:d,placeholder:m,items:a,...x},q)=>{const{control:S}=y.useFormContext(),j={isRequired:n,isInvalid:u,isDisabled:F,isReadOnly:d};return e.jsxs(p.FormField,{control:S,name:c,className:H(),...j,children:[e.jsx(k.FormLabel,{requiredVariant:s,children:i}),r&&e.jsx(g.FormHelperText,{children:r}),e.jsx(h.FormControl,{children:e.jsx(C.Select,{ref:q,name:c,placeholder:m,items:a,...x,children:o})}),e.jsx(T.FormFeedbackText,{children:t})]})},l=b.forwardRef(function(t,r){return R(t,r)});l.displayName="SelectField";exports.SelectField=l;