@payfit/unity-components 0.0.0-alpha.6 → 0.0.0-alpha.7

package/dist/cjs/components/form-field/FormField.d.ts

@@ -1,16 +1,12 @@
-import { TextFieldProps } from 'react-aria-components';
+import { default as React } from 'react';
 import { Control, FieldPath, FieldValues } from 'react-hook-form';
-export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends TextFieldProps {
+export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends React.PropsWithChildren<object> {
     /** The form control from react-hook-form */
     control: Control<TFieldValues>;
     /** The name of the field in the form */
     name: TName;
-    /** The type of the field */
-    type: TextFieldProps['type'];
     /** Whether the field is required */
     isRequired?: boolean;
-    /** The variant of the required indicator */
-    requiredVariant?: 'required' | 'optional';
     /** Whether the field is in an invalid state */
     isInvalid?: boolean;
     /** Whether the field is in a loading state */
@@ -19,19 +15,47 @@ export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues,
     isDisabled?: boolean;
     /** Whether the field is read-only */
     isReadOnly?: boolean;
+    /** Additional class name */
+    className?: string;
 }
 /**
  * The `FormField` component represents a single field in a Unity form. It provides a set of features to manage the state of the field and its interactions, as well as a deep integration with its parent `Form` component.
- *
  * Use this component to create a field in a form with a schema-based approach. It will only work if it is a child of a [`Form` component](/?path=/docs/forms-formfield--docs).
+ * @param {FormFieldProps} props - component props to control the field name, and the reference to its form control
+ * @see {@link FormFieldProps} for all available props
+ * @example
+ * ```tsx
+ * import { Button, Input, FormLabel, FormControl, FormHelperText, FormFeedbackText } from '@payfit/unity-components'
+ * import { useUnityForm } from '@payfit/unity-components'
+ * import { z } from 'zod'
+ *
+ * const loginSchema = z.object({
+ *   email: z.string().email('Invalid email address'),
+ *   password: z.string().min(8, 'Password must be at least 8 characters'),
+ * })
+ *
+ * const MyForm = () => {
+ *   const { Form, FormField } = useUnityForm(loginSchema)
  *
- * A `FormField` is composed of the following parts:
- * - `FormLabel`: The label of the field.
- * - `FormHelperText`: A helper text that gives additional context to the field.
- * - `FormFeedbackText`: An error message that appears when the field is in an invalid state.
- * - `FormInput`: The input element of the field.
+ *   const submitForm = (values: z.infer<typeof loginSchema>) => {
+ *     console.log(values)
+ *   }
+ *
+ *   return (
+ *     <Form action={submitForm}>
+ *       <FormField name="email">
+ *         <FormLabel>Email</FormLabel>
+ *         <FormHelperText>Enter your primary email address</FormHelperText>
+ *         <FormControl>
+ *          <Input type="email"/>
+ *         </FormControl>
+ *         <FormFeedbackText/>
+ *       </FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @note Use this component directly from the `useUnityForm` hook to have type-safety based on the form schema.
  */
-export declare function FormField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ children, control, type, name, isRequired: isRequiredProp, requiredVariant, isInvalid, isLoading, isDisabled: isDisabledProp, isReadOnly, }: FormFieldProps<TFieldValues, TName>): JSX.Element;
-export declare namespace FormField {
-    var displayName: string;
-}
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps<FieldValues, string> & React.RefAttributes<HTMLDivElement>>;
+export { FormField };

package/dist/cjs/components/form-field/FormField.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),o=require("react"),L=require("react-hook-form"),_=require("tailwind-variants"),g=require("../../hooks/use-id.js"),P=require("../form/Form.context.js"),D=require("./FormField.context.js"),I=require("./parts/FormContextualLink.js"),M=require("./parts/FormHelperText.js"),w=require("./utils/isFieldRequired.js"),E=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=E(o),N=_.tv({slots:{base:"uy-flex uy-flex-col uy-gap-100"}}),m=o.forwardRef(({children:e,control:f,name:r,isInvalid:p,isLoading:F,isReadOnly:x,className:q,isRequired:h,isDisabled:y},b)=>{const C=g(),{schema:i}=P.useUnityFormProvider(),{fieldState:{invalid:R},formState:s}=L.useController({name:r,control:f}),v=o.useMemo(()=>w.isFieldRequired(i,r),[i,r]),{hasHelperText:j,hasContextualLink:k}=o.useMemo(()=>{let n=!1,l=!1;const a=T=>{c.default.Children.forEach(T,u=>{if(!c.default.isValidElement(u))return;const t=u;t.type===M.FormHelperText?n=!0:t.type===I.FormContextualLink&&(l=!0),t.props&&typeof t.props=="object"&&"children"in t.props&&a(t.props.children)})};return a(e),{hasHelperText:n,hasContextualLink:l}},[e]),H={name:r,isLoading:F,isReadOnly:x,hasHelperText:j,hasContextualLink:k,id:C,isRequired:h??v,isInvalid:p??R,isDisabled:y??(s.isSubmitting||s.disabled)},{base:S}=N();return d.jsx("div",{ref:b,className:S({className:q}),children:d.jsx(D.FormFieldProvider,{...H,children:e})})});m.displayName="FormField";exports.FormField=m;

package/dist/cjs/components/form-field/parts/FormContextualLink.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),u=require("react-aria-components"),l=require("../../link/Link.js"),c=require("../../text/Text.js"),d=require("../FormField.context.js"),a=s.forwardRef(({children:e,href:n,onPress:i},o)=>{const{formContextualLinkId:r}=d.useFormField();return n?t.jsx(l.Link,{id:r,color:"secondary",variant:"standalone","data-unity-slot":"contextual-link",href:n,ref:o,children:t.jsx(c.Text,{variant:"actionSmall",children:e})}):t.jsx(u.Button,{id:r,onPress:i,"data-unity-slot":"contextual-link",className:"uy-typography-body-small uy-w-fit",ref:o,children:e})});a.displayName="FormContextualLink";exports.FormContextualLink=a;

package/dist/cjs/components/form-field/parts/FormControl.d.ts

@@ -0,0 +1,7 @@
+import { Slot } from '@radix-ui/react-slot';
+export type FormControlProps = React.ComponentProps<typeof Slot>;
+declare function FormControl({ ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
+declare namespace FormControl {
+    var displayName: string;
+}
+export { FormControl };

package/dist/cjs/components/form-field/parts/FormControl.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react/jsx-runtime"),g=require("react"),v=require("@radix-ui/react-slot"),x=require("react-aria"),a=require("react-hook-form"),C=require("../FormField.context.js");function n({...d}){const{name:l,hasHelperText:i,hasContextualLink:c,fieldState:e,formLabelId:u,formItemId:m,formDescriptionId:o,formMessageId:s,formContextualLinkId:b}=C.useFormField(),{control:f}=a.useFormContext(),{field:{ref:p,...q}}=a.useController({name:l,control:f}),{error:t}=e,y=g.useMemo(()=>[t?s:void 0,i?o:void 0].filter(Boolean).join(" "),[t,i,o,s]),r={isDisabled:e.isDisabled,isInvalid:e.isInvalid,isLoading:e.isLoading,isReadOnly:e.isReadOnly,isRequired:e.isRequired},F=x.mergeProps(d,r,q);return I.jsx(v.Slot,{...F,ref:p,"data-slot":"form-control",id:m,"aria-labelledby":u,"aria-describedby":y,"aria-details":c?b:void 0,"aria-invalid":r.isInvalid,"aria-disabled":r.isDisabled,"aria-required":r.isRequired,"aria-busy":r.isLoading})}n.displayName="FormControl";exports.FormControl=n;

package/dist/cjs/components/form-field/parts/FormFeedbackText.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),c=require("react"),l=require("../../text/Text.js"),u=require("../FormField.context.js"),r=c.forwardRef(({children:o,...s},n)=>{const{fieldState:{error:e,isInvalid:a},formMessageId:i}=u.useFormField(),t=e?String(e.message):o;return!a||!t?null:d.jsx(l.Text,{...s,id:i,ref:n,"data-unity-slot":"form-feedback-text",className:"uy-typography-body-small-strong uy-text-content-form-invalid",children:t})});r.displayName="FormFeedbackText";exports.FormFeedbackText=r;

package/dist/cjs/components/form-field/parts/FormHelperText.d.ts

@@ -3,5 +3,5 @@
  */
 declare const FormHelperText: import('react').ForwardRefExoticComponent<{
     children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLParagraphElement>>;
+} & import('react').RefAttributes<HTMLElement>>;
 export { FormHelperText };

package/dist/cjs/components/form-field/parts/FormHelperText.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),l=require("react"),s=require("../../text/Text.js"),c=require("../FormField.context.js"),e=l.forwardRef(({children:t,...r},o)=>{const{formDescriptionId:n}=c.useFormField();return i.jsx(s.Text,{...r,id:n,"data-unity-slot":"helper-text",variant:"bodySmall",color:"content.neutral.low",ref:o,children:t})});e.displayName="HelperText";exports.FormHelperText=e;

package/dist/cjs/components/form-field/parts/FormLabel.d.ts

@@ -1,8 +1,8 @@
+import { LabelProps } from '../../label/Label.js';
+export type FormLabelProps = Omit<LabelProps, 'isRequired'>;
 /**
  * FormLabel is a component that displays a label for a form field.
  * It is used to provide context for the form field.
  */
-declare const FormLabel: import('react').ForwardRefExoticComponent<{
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLLabelElement>>;
+declare const FormLabel: import('react').ForwardRefExoticComponent<FormLabelProps & import('react').RefAttributes<HTMLLabelElement>>;
 export { FormLabel };

package/dist/cjs/components/form-field/parts/FormLabel.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),u=require("../../label/Label.js"),c=require("../FormField.context.js"),r=d.forwardRef(({children:t,...e},o)=>{const{requiredVariant:a}=e,{formLabelId:i,formItemId:l,fieldState:{isRequired:s}}=c.useFormField();return n.jsx(u.Label,{ref:o,id:i,isRequired:s,requiredVariant:a,htmlFor:l,className:"uy-leading-100",...e,children:t})});r.displayName="Label";exports.FormLabel=r;

package/dist/cjs/components/form-field/utils/isFieldRequired.d.ts

@@ -0,0 +1,8 @@
+import { ZodObject, ZodRawShape } from 'zod';
+/**
+ * Determines if a field is required based on its path in a Zod schema
+ * @param schema - The Zod schema object
+ * @param fieldPath - The path to the field (e.g., "preferences.marketing")
+ * @returns true if the field is required, false if optional or not found
+ */
+export declare function isFieldRequired(schema: ZodObject<ZodRawShape> | null | undefined, fieldPath: string): boolean;

package/dist/cjs/components/form-field/utils/isFieldRequired.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("zod");function f(n,l){try{if(!n)return!1;const r=l.split(".");let i=n.shape,e;for(let t=0;t<r.length;t++){const o=r[t];if(e=i[o],!e)return!1;if(t<r.length-1){const s=e instanceof a.z.ZodOptional?e._def.innerType.shape:e.shape;if(!s)return!1;i=s}}return e?!(e instanceof a.z.ZodOptional):!1}catch{return!1}}exports.isFieldRequired=f;

package/dist/cjs/components/full-page-loader/FullPageLoader.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare const fullPageLoader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-w-full uy-h-screen uy-flex uy-place-items-center uy-justify-center", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-w-full uy-h-screen uy-flex uy-place-items-center uy-justify-center", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export type FullPageLoaderProps = {
+    label?: ReactNode;
+};
+/**
+ * The `FullPageLoader` component should used to inform the user that the entire page content is loading
+ */
+declare const FullPageLoader: {
+    ({ label }: FullPageLoaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { FullPageLoader };

package/dist/cjs/components/full-page-loader/FullPageLoader.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react-aria"),n=require("react-intl"),i=require("tailwind-variants"),u=require("../spinner/Spinner.js"),a=i.tv({base:"uy-w-full uy-h-screen uy-flex uy-place-items-center uy-justify-center"}),r=({label:s})=>{const t=l.useId();return e.jsxs("main",{id:t,className:a(),"aria-busy":"true",children:[e.jsx("h1",{className:"uy-sr-only",children:s??e.jsx(n.FormattedMessage,{id:"unity:component:full-page-loader:label",defaultMessage:"Content is loading..."})}),e.jsx(u.Spinner,{label:"",size:"medium",role:"presentation"})]})};r.displayName="FullPageLoader";exports.FullPageLoader=r;exports.fullPageLoader=a;

package/dist/cjs/components/icon/Icon.d.ts

@@ -570,5 +570,5 @@ export type IconProps = VariantProps<typeof icon> & Pick<HTMLAttributes<HTMLSpan
 /**
  * The `Icon` component displays an icon from the Unity icon set.
  */
-export declare function Icon({ alt, color, size, src, role, display, ...rest }: IconProps): JSX.Element;
+export declare function Icon({ alt, color, size, src, role, display, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/icon-button/CircularIconButton.d.ts

@@ -7,7 +7,7 @@ export type CircularIconButtonProps = AriaButtonProps & {
     isDisabled?: boolean;
 };
 export declare const circularIconButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export declare function CircularIconButton(props: CircularIconButtonProps): JSX.Element;
+export declare function CircularIconButton(props: CircularIconButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CircularIconButton {
     var displayName: string;
 }

package/dist/cjs/components/icon-button/IconButton.d.ts

@@ -19,7 +19,7 @@ interface IconButtonVariantsSecondaryProps extends IconButtonBaseProps, Omit<Ico
 }
 interface IconButtonVariantsGhostProps extends IconButtonBaseProps, Omit<IconButtonGhost, 'variant' | 'color'>, Required<Pick<IconButtonGhost, 'variant' | 'color'>> {
 }
-export declare function IconButton(props: IconButtonVariantsPrimaryProps | IconButtonVariantsSecondaryProps | IconButtonVariantsGhostProps): JSX.Element;
+export declare function IconButton(props: IconButtonVariantsPrimaryProps | IconButtonVariantsSecondaryProps | IconButtonVariantsGhostProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IconButton {
     var displayName: string;
 }

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

@@ -0,0 +1,4 @@
+export { CheckboxGroup } from './checkbox-group/CheckboxGroup.js';
+export type { CheckboxGroupProps } from './checkbox-group/CheckboxGroup.js';
+export { CheckboxGroupField } from './checkbox-group-field/CheckboxGroupField.js';
+export type { CheckboxGroupFieldProps } from './checkbox-group-field/CheckboxGroupField.js';

package/dist/cjs/components/input/Input.d.ts

@@ -0,0 +1,48 @@
+import { ReactElement } from 'react';
+import { InputProps as AriaInputProps } from 'react-aria-components';
+export interface InputProps extends Omit<AriaInputProps, 'prefix' | 'style' | 'className'> {
+    /**
+     * The type of the input field
+     * @default 'text'
+     */
+    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
+    /** Element to display before the input field */
+    prefix?: ReactElement;
+    /** Element to display after the input field */
+    suffix?: ReactElement;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /**
+     * Clear button click handler
+     */
+    onClearButtonPress?: () => void;
+}
+/**
+ * The `Input` components displays a styled, single HTML `<input>` field whose type is text-compatible (`text`, `password`, `email`, `tel`, `url`, `search`), and follows the Unity design system language. It supports multiple states out of the box and can be used as a controlled or uncontrolled component. It is also compatible with the `Form` and `FormField` component as a form control.
+ * @param {InputProps} props - Regular props from the `<input>` HTML element, plus state-related props
+ * @see {@link InputProps} for all available props
+ * @example
+ * ```tsx
+ * import { Input } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const [value, setValue] = useState()
+ *
+ *   const handleInputChange = (e) => {
+ *     setValue(e.target.value)
+ *   }
+ *
+ *   return <Input type="text" placeholder="write something..." value={value} onChange={handleInputChange} />
+ * }
+ * ```
+ */
+declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/cjs/components/input/Input.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),w=require("react-aria-components"),I=require("react-intl"),j=require("tailwind-variants"),N=require("../icon-button/CircularIconButton.js"),q=require("../icon/Icon.js"),M=require("../spinner/Spinner.js"),S=j.tv({slots:{base:"uy-flex uy-h-500 uy-border uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active",prefix:"uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-r uy-rounded-l-100 active:uy-border-border-form-active",inputWrapper:"uy-flex uy-gap-50 uy-flex-grow uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100",input:"uy-flex-grow uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest",state:"uy-flex uy-gap-50 uy-items-center",suffix:"uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-rounded-r-100 active:uy-border-border-form-active"},variants:{isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error",prefix:"uy-bg-surface-form-error uy-border-border-form-error",inputWrapper:"uy-bg-surface-form-error",input:"uy-bg-surface-form-error",state:"uy-text-content-form-error",suffix:"uy-bg-surface-form-error uy-border-border-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",prefix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-readonly",inputWrapper:"uy-border-border-form-disabled uy-bg-surface-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-readonly",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-readonly"}},isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",prefix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled",inputWrapper:"uy-bg-surface-form-disabled uy-text-content-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",prefix:"uy-bg-surface-neutral-low uy-border-border-form-enabled uy-text-content-form-enabled",inputWrapper:"uy-border-border-form-enabled uy-bg-surface-form-enabled",input:"uy-text-content-form-enabled uy-bg-surface-form-enabled",state:"uy-text-content-neutral-disabled",suffix:"uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"}}]}),l=h.forwardRef(({type:f="text",prefix:a,suffix:s,isInvalid:d,isLoading:r,isDisabled:u,isReadOnly:o,onClearButtonPress:t,...i},y)=>{const n=I.useIntl(),{base:b,prefix:c,inputWrapper:m,input:p,state:x,suffix:g}=S({isInvalid:!!d,isReadOnly:!!o,isDisabled:!!u}),v=i.value&&!r&&!o&&!u;return e.jsxs("div",{className:b(),children:[a?e.jsx("span",{className:c(),children:a}):null,e.jsxs("div",{className:m(),children:[e.jsx(w.Input,{...i,ref:y,type:f,className:p(),"aria-busy":r,readOnly:o,disabled:u}),e.jsxs("div",{className:x(),children:[r&&e.jsx(M.Spinner,{color:"inherit",size:"small",label:n.formatMessage({id:"unity:component:form-field:form-input:spinner:label",defaultMessage:"Loading"})}),d&&e.jsx(q.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:n.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),v&&e.jsx(N.CircularIconButton,{title:n.formatMessage({id:"unity:component:form-field:form-input:clear:title",defaultMessage:"Clear"}),className:"uy-text-content-neutral-enabled",icon:"CloseOutlined",onPress:()=>{t==null||t()}})]})]}),s?e.jsx("span",{className:g(),children:s}):null]})});l.displayName="Input";exports.Input=l;

package/dist/cjs/components/label/Label.d.ts

@@ -0,0 +1,17 @@
+import { LabelProps as AriaLabelProps } from 'react-aria-components';
+export interface LabelProps extends AriaLabelProps {
+    /**
+     * Whether the field is required.
+     */
+    isRequired?: boolean;
+    /**
+     * The variant of the required label.
+     */
+    requiredVariant?: 'required' | 'optional';
+}
+/**
+ * FormLabel is a component that displays a label for a form field.
+ * It is used to provide context for the form field.
+ */
+declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/cjs/components/label/Label.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),g=require("react-aria"),t=require("react-aria-components"),m=require("tailwind-variants"),q=m.tv({slots:{base:"uy-typography-body-strong uy-text-content-form-enabled uy-flex uy-gap-25",asterisk:"uy-text-content-danger",optionalTag:"uy-typography-body"},variants:{variant:{strong:{base:"uy-typography-body-strong"},body:{base:"uy-typography-body"}}},defaultVariants:{variant:"strong"}}),o=b.forwardRef(({children:i,...a},l)=>{const s=t.useSlottedContext(t.InputContext),c=g.mergeProps({isRequired:s==null?void 0:s["aria-required"]},a),{isRequired:r=!1,requiredVariant:n="required",...u}=c,{base:y,asterisk:d,optionalTag:p}=q();return e.jsxs(t.Label,{...u,ref:l,className:y({className:a.className}),children:[i,n==="required"&&r&&e.jsxs("span",{className:d(),children:["*",e.jsx("span",{className:"uy-sr-only",children:"required"})]}),n==="optional"&&!r&&e.jsx("span",{className:p({className:a.className}),children:"(optional)"})]})});o.displayName="Label";exports.Label=o;

package/dist/cjs/components/link/Link.d.ts

@@ -8,6 +8,10 @@ export type LinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
      * The URL the link navigates to.
      */
     href: HTMLAnchorElement['href'] | NavRouterLinkProps['to'];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLLinkElement>['id'];
     /**
      * The link's display variant. Links can be inline with text or standalone (block).
      * @default 'inline'
@@ -38,6 +42,10 @@ declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps
      * The URL the link navigates to.
      */
     href: HTMLAnchorElement["href"] | NavRouterLinkProps["to"];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLLinkElement>["id"];
     /**
      * The link's display variant. Links can be inline with text or standalone (block).
      * @default 'inline'
@@ -59,5 +67,7 @@ declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps
      */
     isCurrent?: Pick<HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
     maxCharactersTruncation?: number;
+} & {
+    children?: import('react').ReactNode | undefined;
 } & import('react').RefAttributes<HTMLAnchorElement>>;
 export { Link };

package/dist/cjs/components/link/Link.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),q=require("react"),v=require("@payfit/unity-icons"),g=require("react-aria-components"),x=require("../../providers/router/RouterProvider.js"),L=require("./Link.variants.js"),R=require("./utils.js"),u=q.forwardRef(({href:t,children:a,variant:l="inline",color:d="primary",isDisabled:i=!1,isCurrent:m=void 0,isExternal:y,maxCharactersTruncation:o,...e},k)=>{const s=x.useRouter(),r=y??R.isExternalUrl(t),n=!r&&s?s.isActive(t.toString()):m,p=L.link({variant:l,color:d,isDisabled:i,isTruncated:!!o});return c.jsxs(g.Link,{...e,href:t,ref:k,style:{"--uy-link-max-w":`${o}ch`},className:p,isDisabled:i,target:r?"_blank":e.target,rel:r&&!e.rel?"noopener noreferrer":e.rel,...n!==void 0&&{"data-current":n,"aria-current":n?"page":void 0},children:[a,r&&c.jsx(v.IconSprite,{src:"ArrowSquareOutOutlined",color:"currentColor",width:"1em",height:"1em",role:"presentation",className:"uy-self-center uy-inline"})]})});u.displayName="Link";exports.Link=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),v=require("react"),g=require("@payfit/unity-icons"),x=require("react-aria-components"),L=require("../../providers/router/RouterProvider.js"),R=require("./Link.variants.js"),S=require("./utils.js"),u=v.forwardRef(({href:t,children:l,variant:a="inline",color:d="primary",isDisabled:o=!1,isCurrent:y=void 0,isExternal:k,maxCharactersTruncation:n,...e},m)=>{const s=L.useRouter(),r=k??S.isExternalUrl(t),i=!r&&s?s.isActive(t.toString()):y,p=R.link({variant:a,color:d,isDisabled:o,isTruncated:!!n}),q=!!n;return c.jsxs(x.Link,{...e,href:t,ref:m,style:q?{"--uy-link-max-w":`${n}ch`}:{},className:p,isDisabled:o,target:r?"_blank":e.target,rel:r&&!e.rel?"noopener noreferrer":e.rel,...i!==void 0&&{"data-current":i,"aria-current":i?"page":void 0},children:[l,r&&c.jsx(g.IconSprite,{src:"ArrowSquareOutOutlined",color:"currentColor",width:"1em",height:"1em",role:"presentation",className:"uy-self-center uy-inline"})]})});u.displayName="Link";exports.Link=u;

package/dist/cjs/components/menu/Menu.d.ts

@@ -3,7 +3,7 @@ interface MenuProps {
     defaultOpen?: MenuTriggerProps['defaultOpen'];
     children?: MenuTriggerProps['children'];
 }
-export declare function Menu({ defaultOpen, children }: MenuProps): JSX.Element;
+export declare function Menu({ defaultOpen, children }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Menu {
     var displayName: string;
 }

package/dist/cjs/components/menu/parts/MenuContent.d.ts

@@ -4,7 +4,7 @@ interface MenuContent {
     placement?: PopoverProps['placement'];
     width?: number;
 }
-export declare function MenuContent({ children, placement, width, }: PropsWithChildren<MenuContent>): JSX.Element;
+export declare function MenuContent({ children, placement, width, }: PropsWithChildren<MenuContent>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuContent {
     var displayName: string;
 }

package/dist/cjs/components/menu/parts/MenuHeader.d.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 interface MenuHeaderProps {
     className?: string;
 }
-export declare function MenuHeader({ children, className, }: PropsWithChildren<MenuHeaderProps>): JSX.Element;
+export declare function MenuHeader({ children, className, }: PropsWithChildren<MenuHeaderProps>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuHeader {
     var displayName: string;
 }

package/dist/cjs/components/menu/parts/MenuItem.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { MenuItemProps as MenuItemAriaComponentProps } from 'react-aria-components';
 import { DataAttributes } from '../../../types/DataAttributes.js';
 interface MenuItemProps extends DataAttributes {
@@ -8,7 +8,7 @@ interface MenuItemProps extends DataAttributes {
     prefix?: ReactNode;
     className?: string;
 }
-export declare function MenuItem({ prefix, children, href, onAction, className, ...dataAttributes }: MenuItemProps): JSX.Element;
+export declare function MenuItem({ prefix, children, href, onAction, className, ...dataAttributes }: PropsWithChildren<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuItem {
     var displayName: string;
 }

package/dist/cjs/components/menu/parts/MenuSeparator.d.ts

@@ -1,4 +1,4 @@
-export declare function MenuSeparator(): JSX.Element;
+export declare function MenuSeparator(): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuSeparator {
     var displayName: string;
 }

package/dist/cjs/components/menu/parts/MenuTrigger.d.ts

@@ -3,7 +3,7 @@ interface MenuTriggerProps {
     className?: string;
     asChild?: boolean;
 }
-export declare function MenuTrigger({ children, asChild, className, }: PropsWithChildren<MenuTriggerProps>): JSX.Element;
+export declare function MenuTrigger({ children, asChild, className, }: PropsWithChildren<MenuTriggerProps>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuTrigger {
     var displayName: string;
 }

package/dist/cjs/components/nav/Nav.d.ts

@@ -6,7 +6,7 @@ export type NavProps = PropsWithChildren<Pick<HTMLAttributes<HTMLDivElement>, 'a
 /**
  * The `Nav` component represents a vertical navigation menu with optional title and navigation items of multiple types.
  */
-export declare function Nav({ children, title, ...rest }: NavProps): JSX.Element;
+export declare function Nav({ children, title, ...rest }: NavProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Nav {
     var displayName: string;
 }

package/dist/cjs/components/nav/parts/NavGroup.d.ts

@@ -23,7 +23,7 @@ type NavGroupProps = {
 /**
  * The `NavGroup` component represents a tree of navigation items grouped under a single root element in a `Nav` component. It can be expanded or collapsed to show or hide its children.
  */
-export declare function NavGroup({ children, label, prefix, suffix, defaultExpanded, isExpanded: controlledIsExpanded, onToggle, ...dataAttributes }: NavGroupProps): JSX.Element;
+export declare function NavGroup({ children, label, prefix, suffix, defaultExpanded, isExpanded: controlledIsExpanded, onToggle, ...dataAttributes }: NavGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NavGroup {
     var displayName: string;
 }

package/dist/cjs/components/nav/parts/NavItem.d.ts

@@ -272,7 +272,7 @@ export type NavItemProps = Pick<VariantProps<typeof navItem>, 'level'> & PropsWi
 /**
  * The `NavItem` component represents a single, fully accessible navigation item in a `Nav` component, with support for custom elements at the start or the end of the element. It can render a link or a button depending on the provided properties.
  */
-export declare function NavItem({ children, level, prefix, suffix, onPress, href, isCurrent, isDisabled, ...dataAttributes }: NavItemProps): JSX.Element;
+export declare function NavItem({ children, level, prefix, suffix, onPress, href, isCurrent, isDisabled, ...dataAttributes }: NavItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NavItem {
     var displayName: string;
 }

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

@@ -0,0 +1,52 @@
+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'];
+    /** 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/Select.js

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

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

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

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

@@ -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.js"),m=require("../../icon/Icon.js"),p=y.tv({slots:{base:"uy-flex uy-gap-100 uy-border 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",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}=p();return e.jsxs(e.Fragment,{children:[e.jsxs(t.SearchField,{className:a(),ref:n,children:[e.jsx(m.Icon,{src:"MagnifyingGlassOutlined","aria-hidden":"true"}),e.jsx(t.Input,{className:s()}),e.jsx(d.CircularIconButton,{title:u.formatMessage({id:"unity:component:form-field:form-input: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/SelectButton.d.ts

@@ -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/SelectButton.js

@@ -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.js"),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-100 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}}),n=b.forwardRef(({isDisabled:r,isInvalid:t,isReadOnly:s,isOpen:u},l)=>{const i=m.useIntl(),{base:c,selectValue:d,iconWrapper:y,icon:f}=v({isDisabled:r,isInvalid:t,isReadOnly:s});return e.jsxs(o.Button,{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"})]})]})});n.displayName="SelectButton";exports.SelectButton=n;

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

@@ -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.context.js

@@ -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.d.ts

@@ -0,0 +1,6 @@
+import { default as React, ReactNode } from 'react';
+import { ListBoxItemProps } from 'react-aria-components';
+declare const SelectOption: React.ForwardRefExoticComponent<Omit<ListBoxItemProps<object>, "children"> & {
+    children: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { SelectOption };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),f=require("react-aria-components"),x=require("tailwind-variants"),p=require("../../icon/Icon.js"),b=require("./SelectOption.context.js"),m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=m(i),v=x.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"}]}),l=i.forwardRef((t,a)=>{const{children:s,isDisabled:u}=t,o=typeof r.default.Children.toArray(s)[0]=="string"?r.default.Children.toArray(s)[0]:void 0;return e.jsx(f.ListBoxItem,{ref:a,...t,textValue:o,className:({isHovered:n,isPressed:c,isFocusVisible:d,isSelected:y})=>v({isHovered:n,isPressed:c,isFocusVisible:d,isSelected:y,isDisabled:u}),children:({isSelected:n})=>e.jsx(b.SelectOptionProvider,{isDisabled:u,children:n?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:s})}),e.jsx(p.Icon,{src:"CheckOutlined"})]}):e.jsx(e.Fragment,{children:s})})})});l.displayName="SelectOption";exports.SelectOption=l;

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

@@ -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/SelectOptionGroup.js

@@ -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/SelectOptionHelper.d.ts

@@ -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/parts/SelectOptionHelper.js

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