@veladent/booking-widget 0.0.0-stage → 1.0.4-dev.11

package/types/booking/react/src/components/service-step.d.ts

@@ -0,0 +1,2 @@
+import type { BookingStepComponentProps } from "../component-types.js";
+export declare function ServiceStep({ classNames }: BookingStepComponentProps): import("react").JSX.Element;

package/types/booking/react/src/components/step-header.d.ts

@@ -0,0 +1,2 @@
+import type { StepHeaderProps } from "../component-types.js";
+export declare function StepHeader({ backLabel, className, direction, hideBack, onBack, step, title, }: StepHeaderProps): import("react").JSX.Element;

package/types/booking/react/src/components/summary-modal.d.ts

@@ -0,0 +1,2 @@
+import type { BookingStepComponentProps } from "../component-types.js";
+export declare function SummaryModal({ classNames }: BookingStepComponentProps): import("react").JSX.Element | null;

package/types/booking/react/src/components/treatment-step.d.ts

@@ -0,0 +1,2 @@
+import type { BookingStepComponentProps } from "../component-types.js";
+export declare function TreatmentStep({ classNames }: BookingStepComponentProps): import("react").JSX.Element;

package/types/booking/react/src/components/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function cx(...values: Array<string | undefined | false>): string;
+export declare function formatMoney(value: number | null | undefined, currencyCode: string, locale: string): string;
+export declare function parseBookingDate(value: string): import("@internationalized/date").CalendarDate | null;
+export declare function formatBookingDateTimeSafe(value: string, locale: string, timeZone: string): string;
+export declare function formatBookingTimeSafe(value: string, locale: string, timeZone: string): string;
+export declare function formatBookingDateSafe(value: string, locale: string, timeZone: string): string;
+export declare function dateDistance(first: string, second: string): number;
+export declare function getInitials(value: string): string;

package/types/booking/react/src/environment.d.ts

@@ -0,0 +1,16 @@
+declare global {
+    interface ImportMetaEnv {
+        readonly VITE_VELADENT_BOOKING_API_KEY?: string;
+        readonly VITE_VELADENT_BOOKING_API_URL?: string;
+    }
+    interface ImportMeta {
+        readonly env: ImportMetaEnv;
+    }
+}
+export declare function resolveBookingConnection(props: {
+    baseUrl?: string;
+    publishableKey?: string;
+}): {
+    baseUrl: string;
+    publishableKey: string | undefined;
+};

package/types/booking/react/src/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./booking-context.js";
+export { useVeladantBooking as useVeladentBooking } from "./booking-context.js";
+export * from "./booking-parts.js";
+export * from "./booking-widget.js";
+export * from "./component-types.js";
+export * from "./components/index.js";

package/types/booking/react/src/verification-session.d.ts

@@ -0,0 +1,12 @@
+export interface VerifiedBookingSession {
+    expiresAt: number;
+    mode: "existing" | "new";
+    phone: string;
+    token: string;
+}
+export declare function readVerifiedSession(key?: string): VerifiedBookingSession | null;
+export declare function writeVerifiedSession(key: string | undefined, session: VerifiedBookingSession | null): void;
+export declare function readPendingCheckout(key?: string): BookingResult | null;
+export declare function writePendingCheckout(key: string | undefined, result: BookingResult | null, paymentStarted?: boolean): void;
+export declare function readPendingPaymentStarted(key: string | undefined, sessionId: string): boolean;
+import type { BookingResult } from "@veladent/booking-core";

package/types/ui/src/components/application/date-picker/calendar.d.ts

@@ -0,0 +1,14 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import type { CalendarProps as AriaCalendarProps, DateValue } from "react-aria-components";
+export declare const CalendarContextProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+interface CalendarProps extends AriaCalendarProps<DateValue> {
+    /**
+     * The content to render between the header and the calendar grid.
+     * If not provided, a default layout will be rendered with a date input and a today button.
+     */
+    children?: ReactNode;
+    /** The dates to highlight. */
+    highlightedDates?: DateValue[];
+}
+export declare const Calendar: ({ highlightedDates, className, children, ...props }: CalendarProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/application/date-picker/cell.d.ts

@@ -0,0 +1,11 @@
+import type { CalendarCellProps as AriaCalendarCellProps } from "react-aria-components";
+interface CalendarCellProps extends AriaCalendarCellProps {
+    /** Whether the cell is highlighted. */
+    isHighlighted?: boolean;
+    /** Whether the calendar is a range calendar. */
+    isRangeCalendar?: boolean;
+    /** Whether to show out of range dates. */
+    showOutOfRangeDates?: boolean;
+}
+export declare const CalendarCell: ({ date, isHighlighted, showOutOfRangeDates, ...props }: CalendarCellProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/application/date-picker/date-picker.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import type { DatePickerProps as AriaDatePickerProps, PopoverProps as AriaPopoverProps, DateValue } from "react-aria-components";
+import { type ButtonProps } from "../../base/buttons/button.js";
+interface DatePickerProps extends AriaDatePickerProps<DateValue> {
+    /** The function to call when the apply button is clicked. */
+    onApply?: () => void;
+    /** The function to call when the cancel button is clicked. */
+    onCancel?: () => void;
+    placeholder?: string;
+    popoverClassName?: string;
+    popoverProps?: Omit<AriaPopoverProps, "children" | "className">;
+    showFooter?: boolean;
+    showToday?: boolean;
+    size?: ButtonProps["size"];
+    timeZone?: string;
+    /** Custom trigger rendered inside the accessible date picker group. */
+    trigger?: ReactNode;
+}
+export declare const DatePicker: ({ value: valueProp, defaultValue, onChange, onApply, onCancel, size, showFooter, showToday, timeZone, trigger, placeholder, popoverClassName, popoverProps, ...props }: DatePickerProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/avatar/avatar.d.ts

@@ -0,0 +1,64 @@
+import { type FC, type ReactNode } from "react";
+export interface AvatarProps {
+    alt?: string;
+    /**
+     * Display a badge (i.e. company logo).
+     */
+    badge?: ReactNode;
+    /**
+     * Display an outer border around the avatar.
+     */
+    border?: boolean;
+    className?: string;
+    /**
+     * The class name for the main child of the avatar.
+     */
+    contentClassName?: string;
+    /**
+     * Display an inner contrast border around the avatar image.
+     */
+    contrastBorder?: boolean;
+    /**
+     * Display a count badge.
+     */
+    count?: number;
+    /**
+     * Whether the avatar should show a focus ring when the parent group is in focus.
+     * For example, when the avatar is wrapped inside a link.
+     *
+     * @default false
+     */
+    focusable?: boolean;
+    /**
+     * The initials of the user to display if no image is available.
+     */
+    initials?: string;
+    /**
+     * A placeholder to display if no image is available.
+     */
+    placeholder?: ReactNode;
+    /**
+     * An icon to display if no image is available.
+     */
+    placeholderIcon?: FC<{
+        className?: string;
+    }>;
+    /**
+     * Whether the avatar should be rounded.
+     * @default true
+     */
+    rounded?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    src?: string | null;
+    /**
+     * Display a status indicator.
+     */
+    status?: "online" | "offline";
+    /**
+     * Display a verified tick icon.
+     *
+     * @default false
+     */
+    verified?: boolean;
+}
+export declare const Avatar: ({ size, src, alt, initials, placeholder, placeholderIcon: PlaceholderIcon, border, badge, status, verified, count, focusable, rounded, className, contentClassName, }: AvatarProps) => import("react").JSX.Element;

package/types/ui/src/components/base/avatar/base-components/avatar-add-button.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProps as AriaButtonProps } from "react-aria-components";
+interface AvatarAddButtonProps extends AriaButtonProps {
+    className?: string;
+    size: "xs" | "sm" | "md";
+    title?: string;
+}
+export declare const AvatarAddButton: ({ size, className, title, ...props }: AvatarAddButtonProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/avatar/base-components/avatar-company-icon.d.ts

@@ -0,0 +1,7 @@
+interface AvatarCompanyIconProps {
+    alt?: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    src: string;
+}
+export declare const AvatarCompanyIcon: ({ size, src, alt, }: AvatarCompanyIconProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/avatar/base-components/avatar-count.d.ts

@@ -0,0 +1,6 @@
+interface AvatarCountProps {
+    className?: string;
+    count: number;
+}
+export declare const AvatarCount: ({ count, className }: AvatarCountProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/avatar/base-components/avatar-online-indicator.d.ts

@@ -0,0 +1,7 @@
+interface AvatarOnlineIndicatorProps {
+    className?: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    status: "online" | "offline";
+}
+export declare const AvatarOnlineIndicator: ({ size, status, className, }: AvatarOnlineIndicatorProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/avatar/base-components/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./avatar-add-button.js";
+export * from "./avatar-company-icon.js";
+export * from "./avatar-online-indicator.js";
+export * from "./verified-tick.js";

package/types/ui/src/components/base/avatar/base-components/verified-tick.d.ts

@@ -0,0 +1,6 @@
+interface VerifiedTickProps {
+    className?: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+}
+export declare const VerifiedTick: ({ size, className }: VerifiedTickProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/buttons/button.d.ts

@@ -0,0 +1,104 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from "react";
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
+export declare const styles: {
+    colors: {
+        "link-color": {
+            root: string;
+        };
+        "link-destructive": {
+            root: string;
+        };
+        "link-gray": {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        "primary-destructive": {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        "secondary-destructive": {
+            root: string;
+        };
+        tertiary: {
+            root: string;
+        };
+        "tertiary-destructive": {
+            root: string;
+        };
+    };
+    common: {
+        icon: string;
+        root: string;
+    };
+    sizes: {
+        lg: {
+            linkRoot: string;
+            root: string;
+        };
+        md: {
+            linkRoot: string;
+            root: string;
+        };
+        sm: {
+            linkRoot: string;
+            root: string;
+        };
+        xl: {
+            linkRoot: string;
+            root: string;
+        };
+        xs: {
+            linkRoot: string;
+            root: string;
+        };
+    };
+};
+/**
+ * Common props shared between button and anchor variants
+ */
+export interface CommonProps {
+    /** The color variant of the button */
+    color?: keyof typeof styles.colors;
+    /** Icon component or element to show before the text */
+    iconLeading?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Icon component or element to show after the text */
+    iconTrailing?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** Shows a loading spinner and disables the button */
+    isLoading?: boolean;
+    /** Removes horizontal padding from the text content */
+    noTextPadding?: boolean;
+    /** When true, keeps the text visible during loading state */
+    showTextWhileLoading?: boolean;
+    /** The size variant of the button */
+    size?: keyof typeof styles.sizes;
+}
+/**
+ * Props for the button variant (non-link)
+ */
+export interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "slot">, HTMLButtonElement> {
+    /** Press handler for React Aria button */
+    onPress?: AriaButtonProps["onPress"];
+    /** Slot name for react-aria component */
+    slot?: AriaButtonProps["slot"];
+}
+/**
+ * Props for the link variant (anchor tag)
+ */
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">, HTMLAnchorElement> {
+    /** Options for the configured client side router. */
+    routerOptions?: AriaLinkProps["routerOptions"];
+}
+/** Union type of button and link props */
+export type Props = ButtonProps | LinkProps;
+export declare const Button: ({ size, color, children, className, noTextPadding, iconLeading: IconLeading, iconTrailing: IconTrailing, isDisabled: disabled, isLoading: loading, showTextWhileLoading, ...otherProps }: Props) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/checkbox/checkbox.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode, Ref } from "react";
+import { type CheckboxProps as AriaCheckboxProps } from "react-aria-components";
+export interface CheckboxBaseProps {
+    className?: string;
+    isDisabled?: boolean;
+    isFocusVisible?: boolean;
+    isIndeterminate?: boolean;
+    isSelected?: boolean;
+    size?: "sm" | "md";
+}
+export declare function CheckboxBase({ className, isSelected, isDisabled, isIndeterminate, size, isFocusVisible, }: CheckboxBaseProps): import("react").JSX.Element;
+export declare namespace CheckboxBase {
+    var displayName: string;
+}
+interface CheckboxProps extends AriaCheckboxProps {
+    hint?: ReactNode;
+    label?: ReactNode;
+    ref?: Ref<HTMLLabelElement>;
+    size?: "sm" | "md";
+    tabIndex?: number;
+}
+export declare function Checkbox({ label, hint, size, className, ...ariaCheckboxProps }: CheckboxProps): import("react").JSX.Element;
+export declare namespace Checkbox {
+    var displayName: string;
+}
+export {};

package/types/ui/src/components/base/input/hint-text.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode, Ref } from "react";
+import type { TextProps as AriaTextProps } from "react-aria-components";
+interface HintTextProps extends AriaTextProps {
+    children: ReactNode;
+    /** Indicates that the hint text is an error message. */
+    isInvalid?: boolean;
+    ref?: Ref<HTMLElement>;
+    size?: "sm" | "md";
+}
+export declare function HintText({ isInvalid, className, size, ...props }: HintTextProps): import("react").JSX.Element;
+export declare namespace HintText {
+    var displayName: string;
+}
+export {};

package/types/ui/src/components/base/input/input-date.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentType, type HTMLAttributes, type ReactNode, type Ref } from "react";
+import type { DateInputProps as AriaDateInputProps } from "react-aria-components";
+import { type DateFieldProps as AriaDateFieldProps, type DateValue } from "react-aria-components";
+export interface InputDateBaseProps extends Omit<AriaDateInputProps, "children"> {
+    groupRef?: Ref<HTMLDivElement>;
+    /** Icon component to display on the left side of the input. */
+    icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
+    /** Class name for the icon. */
+    iconClassName?: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    ref?: Ref<HTMLInputElement>;
+    /** Keyboard shortcut to display. */
+    shortcut?: string | boolean;
+    /**
+     * Input size.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Tooltip message on hover. */
+    tooltip?: string;
+    /** Class name for the tooltip. */
+    tooltipClassName?: string;
+    /** Class name for the input wrapper. */
+    wrapperClassName?: string;
+}
+export declare const InputDateBase: ({ tooltip, shortcut, groupRef, size, isInvalid, isDisabled, icon: Icon, wrapperClassName, tooltipClassName, iconClassName, ...inputProps }: Omit<InputDateBaseProps, "label" | "hint">) => import("react").JSX.Element;
+interface InputProps extends AriaDateFieldProps<DateValue>, Pick<InputDateBaseProps, "ref" | "size" | "placeholder" | "icon" | "shortcut" | "tooltip" | "groupRef" | "iconClassName" | "wrapperClassName" | "tooltipClassName"> {
+    /** Whether to hide required indicator from label */
+    hideRequiredIndicator?: boolean;
+    /** Helper text displayed below the input */
+    hint?: ReactNode;
+    /** Class name for the input. */
+    inputClassName?: string;
+    /** Label text for the input */
+    label?: string;
+}
+export declare const InputDate: ({ size, placeholder, icon: Icon, label, hint, shortcut, hideRequiredIndicator, className, ref, groupRef, tooltip, iconClassName, inputClassName, wrapperClassName, tooltipClassName, ...props }: InputProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/input/input.d.ts

@@ -0,0 +1,63 @@
+import { type ComponentType, type HTMLAttributes, type ReactNode, type Ref } from "react";
+import type { InputProps as AriaInputProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+export interface InputBaseProps extends Omit<AriaInputProps, "size"> {
+    groupRef?: Ref<HTMLDivElement>;
+    /** Icon component to display on the left side of the input. */
+    icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
+    /** Class name for the icon. */
+    iconClassName?: string;
+    /** Class name for the input. */
+    inputClassName?: string;
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** Whether the input is invalid. */
+    isInvalid?: boolean;
+    /** Whether the input is required. */
+    isRequired?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    ref?: Ref<HTMLInputElement>;
+    /** Keyboard shortcut to display. */
+    shortcut?: string | boolean;
+    /**
+     * Input size.
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Tooltip message on hover. */
+    tooltip?: string;
+    /** Class name for the tooltip. */
+    tooltipClassName?: string;
+    /** Class name for the input wrapper. */
+    wrapperClassName?: string;
+}
+export declare function InputBase({ ref, tooltip, shortcut, groupRef, size, isInvalid, isDisabled, isRequired, icon: Icon, placeholder, wrapperClassName, tooltipClassName, inputClassName, iconClassName, type, ...inputProps }: InputBaseProps): import("react").JSX.Element;
+export declare namespace InputBase {
+    var displayName: string;
+}
+interface TextFieldContextProps extends Partial<Pick<InputBaseProps, "size" | "wrapperClassName" | "inputClassName" | "iconClassName" | "tooltipClassName">> {
+}
+export interface TextFieldProps extends Omit<AriaTextFieldProps, "autoComplete" | "spellCheck">, TextFieldContextProps {
+    autoComplete?: string;
+    spellCheck?: boolean | "true" | "false" | string;
+}
+export declare function TextField({ className, size, inputClassName, wrapperClassName, iconClassName, tooltipClassName, spellCheck, ...props }: TextFieldProps): import("react").JSX.Element;
+export declare namespace TextField {
+    var displayName: string;
+}
+export interface InputProps extends Omit<AriaTextFieldProps, "autoComplete" | "spellCheck" | "onInput" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onPaste">, Pick<InputBaseProps, "ref" | "placeholder" | "icon" | "shortcut" | "tooltip" | "groupRef" | "size" | "wrapperClassName" | "inputClassName" | "iconClassName" | "tooltipClassName" | "autoComplete" | "autoFocus" | "inputMode" | "pattern" | "spellCheck" | "autoCapitalize" | "autoCorrect" | "onInput" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onPaste" | "name" | "id" | "tabIndex" | "form"> {
+    /** Whether to hide required indicator from label */
+    hideRequiredIndicator?: boolean;
+    /** Helper text displayed below the input */
+    hint?: ReactNode;
+    /** Label text for the input */
+    label?: string;
+    max?: string | number;
+    min?: string | number;
+    step?: string | number;
+}
+export declare function Input({ size, placeholder, icon: Icon, label, hint, shortcut, hideRequiredIndicator, className, ref, groupRef, tooltip, iconClassName, inputClassName, wrapperClassName, tooltipClassName, type, min, max, step, name, autoComplete, autoFocus, inputMode, pattern, spellCheck, autoCapitalize, autoCorrect, onInput, onFocus, onBlur, onKeyDown, onKeyUp, onPaste, id, tabIndex, form, ...props }: InputProps): import("react").JSX.Element;
+export declare namespace Input {
+    var displayName: string;
+}
+export {};

package/types/ui/src/components/base/input/label.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode, Ref } from "react";
+import type { LabelProps as AriaLabelProps } from "react-aria-components";
+interface LabelProps extends AriaLabelProps {
+    children: ReactNode;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+    ref?: Ref<HTMLLabelElement>;
+    tooltip?: string;
+    tooltipDescription?: string;
+}
+export declare function Label({ isInvalid, isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps): import("react").JSX.Element;
+export declare namespace Label {
+    var displayName: string;
+}
+export {};

package/types/ui/src/components/base/input/pin-input.d.ts

@@ -0,0 +1,55 @@
+import { OTPInput } from "input-otp";
+import type { ComponentPropsWithRef } from "react";
+import { HintText } from "./hint-text.js";
+import { Label as LabelBase } from "./label.js";
+type PinInputSize = "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg";
+interface PinInputContextType {
+    disabled: boolean;
+    id: string;
+    invalid: boolean;
+    size: PinInputSize;
+}
+export declare const usePinInputContext: () => PinInputContextType;
+interface RootProps extends ComponentPropsWithRef<"div"> {
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: PinInputSize;
+}
+declare const Root: {
+    ({ className, size, disabled, invalid, ...props }: RootProps): import("react").JSX.Element;
+    displayName: string;
+};
+type GroupProps = ComponentPropsWithRef<typeof OTPInput> & {
+    width?: number;
+    inputClassName?: string;
+};
+declare const Group: {
+    ({ inputClassName, containerClassName, width, maxLength, ...props }: GroupProps): import("react").JSX.Element;
+    displayName: string;
+};
+declare const Slot: {
+    ({ index, className, ...props }: ComponentPropsWithRef<"div"> & {
+        index: number;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+declare const Separator: {
+    (props: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+    displayName: string;
+};
+declare const Label: {
+    (props: ComponentPropsWithRef<typeof LabelBase>): import("react").JSX.Element;
+    displayName: string;
+};
+declare const Description: {
+    (props: ComponentPropsWithRef<typeof HintText>): import("react").JSX.Element;
+    displayName: string;
+};
+declare const PinInput: typeof Root & {
+    Slot: typeof Slot;
+    Label: typeof Label;
+    Group: typeof Group;
+    Separator: typeof Separator;
+    Description: typeof Description;
+};
+export { PinInput };

package/types/ui/src/components/base/select/combobox.d.ts

@@ -0,0 +1,14 @@
+import type { FC, ReactNode, RefAttributes } from "react";
+import type { ComboBoxProps as AriaComboBoxProps, ListBoxProps as AriaListBoxProps } from "react-aria-components";
+import { type CommonProps, type SelectItemType } from "./select-shared.js";
+interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    children: AriaListBoxProps<SelectItemType>["children"];
+    /** Leading icon component displayed before the input. */
+    icon?: FC | ReactNode;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcut?: boolean;
+    shortcutClassName?: string;
+}
+export declare const ComboBox: ({ placeholder, shortcut, size, children, items, shortcutClassName, icon, hideRequiredIndicator, menuTrigger, ...otherProps }: ComboBoxProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/select/popover.d.ts

@@ -0,0 +1,7 @@
+import type { RefAttributes } from "react";
+import type { PopoverProps as AriaPopoverProps } from "react-aria-components";
+interface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {
+    size: "sm" | "md" | "lg";
+}
+export declare const Popover: (props: PopoverProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/select/select-item.d.ts

@@ -0,0 +1,10 @@
+import type { ListBoxItemProps as AriaListBoxItemProps } from "react-aria-components";
+import type { SelectItemType } from "./select-shared.js";
+interface SelectItemProps extends Omit<AriaListBoxItemProps<SelectItemType>, "id">, SelectItemType {
+    /** The selection indicator to be displayed on the item. */
+    selectionIndicator?: "checkmark" | "checkbox" | "none";
+    /** The alignment of the selection indicator. */
+    selectionIndicatorAlign?: "left" | "right";
+}
+export declare const SelectItem: ({ label, id, value, avatarUrl, supportingText, isDisabled, icon: Icon, className, children, selectionIndicator, selectionIndicatorAlign, ...props }: SelectItemProps) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/base/select/select-shared.d.ts

@@ -0,0 +1,58 @@
+import type { FC, ReactNode } from "react";
+export interface SelectItemType {
+    /** Avatar image URL. */
+    avatarUrl?: string;
+    /** Leading icon component or element. */
+    icon?: FC | ReactNode;
+    /** Unique identifier for the item. */
+    id: string | number;
+    /** Whether the item is disabled. */
+    isDisabled?: boolean;
+    /** The primary display text. */
+    label?: string;
+    /** Secondary text displayed alongside the label. */
+    supportingText?: string;
+}
+export interface CommonProps {
+    /** Whether to hide the required indicator from the label. */
+    hideRequiredIndicator?: boolean;
+    /** Helper text displayed below the input. */
+    hint?: string;
+    /** Field label displayed above the input. */
+    label?: string;
+    /** Placeholder text when no value is selected. */
+    placeholder?: string;
+    /**
+     * The size of the component.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Tooltip text for the help icon next to the label. */
+    tooltip?: string;
+}
+export declare const sizes: {
+    lg: {
+        root: string;
+        shortcut: string;
+        text: string;
+        textContainer: string;
+        withIcon: string;
+    };
+    md: {
+        root: string;
+        shortcut: string;
+        text: string;
+        textContainer: string;
+        withIcon: string;
+    };
+    sm: {
+        root: string;
+        shortcut: string;
+        text: string;
+        textContainer: string;
+        withIcon: string;
+    };
+};
+export declare const SelectContext: import("react").Context<{
+    size: "sm" | "md" | "lg";
+}>;