@balby/booking-search 1.0.0 → 1.0.2

package/README.md

@@ -1,6 +1,6 @@
 # BookingSearch (React)
 
-[![npm version](https://img.shields.io/npm/v/@booking-search/react.svg)](https://www.npmjs.com/package/@booking-search/react)
+[![npm version](https://img.shields.io/npm/v/@balby/booking-search.svg)](https://www.npmjs.com/package/@balby/booking-search)
 [![Coverage](https://img.shields.io/badge/coverage-94.73%25-brightgreen.svg)](./coverage)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org/)
@@ -45,8 +45,8 @@ npm install react react-dom tailwindcss
 ### Basic Usage
 
 ```tsx
-import { BookingSearch } from '@booking-search/react'
-import type { BookingSearchPayload, Location, AvailabilityDay } from '@booking-search/react'
+import { BookingSearch } from '@balby/booking-search'
+import type { BookingSearchPayload, Location, AvailabilityDay } from '@balby/booking-search'
 
 const locations: Location[] = [
   { id: '1', name: 'Rome, Italy', type: 'City', countryCode: 'IT' },

package/dist/components/booking-search/date-range-picker.d.ts

@@ -0,0 +1,2 @@
+import type { DateRangePickerProps } from "../../types/booking";
+export declare function DateRangePicker({ availability, value, onChange, disabled, className, minNights, tabIndex }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/booking-search/guest-selector.d.ts

@@ -0,0 +1,2 @@
+import type { GuestSelectorProps } from "../../types/booking";
+export declare function GuestSelector({ value, onChange, maxAdults, maxChildren, disabled, className, tabIndex }: GuestSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/booking-search/index.d.ts

@@ -0,0 +1,24 @@
+import type { BookingSearchProps } from "../../types/booking";
+import type { JSX } from "react";
+/**
+ * A component that provides a booking search interface. Users can select a destination, date range, and number of guests.
+ * It supports both desktop and mobile layouts.
+ *
+ * @param {Object} props - The properties object.
+ * @param {Array} props.availability - The data specifying available dates for booking.
+ * @param {Array} props.locations - The list of available locations for selection.
+ * @param {Function} props.onSearch - Callback function triggered when the search is submitted. Receives selected search criteria as an argument.
+ * @param {Object} [props.defaultValues] - Default values for location, check-in and check-out dates, and guest count.
+ * @param {string} [props.searchButtonText='Cerca'] - Text for the search button.
+ * @param {string} [props.locationPlaceholder='Dove vuoi andare?'] - Placeholder text for the location input field.
+ * @param {number} [props.minNights=1] - Minimum number of nights for the date range picker.
+ * @param {number} [props.maxAdults=30] - Maximum number of adult guests allowed.
+ * @param {number} [props.maxChildren=10] - Maximum number of child guests allowed.
+ * @param {string} [props.className] - Additional CSS class for customizing the component style.
+ *
+ * @return {JSX.Element} A booking search component containing inputs for location, date range, and guest selection, along with a search button.
+ */
+export declare function BookingSearch({ availability, locations, onSearch, defaultValues, searchButtonText, locationPlaceholder, minNights, maxAdults, maxChildren, className, }: BookingSearchProps): JSX.Element;
+export { LocationCombobox } from "./location-combobox";
+export { DateRangePicker } from "./date-range-picker";
+export { GuestSelector } from "./guest-selector";

package/dist/components/booking-search/location-combobox.d.ts

@@ -0,0 +1,2 @@
+import type { LocationComboboxProps } from "../../types/booking";
+export declare function LocationCombobox({ locations, value, onChange, placeholder, disabled, className, tabIndex, title }: LocationComboboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/booking-search/ui/command.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, };

package/dist/components/booking-search/ui/dialog.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogTitle, };

package/dist/components/booking-search/ui/popover.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/demo.d.ts

@@ -0,0 +1 @@
+import "./styles/output.css";

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * BookingSearch Component
+ */
+import "./styles/output.css";
+export { BookingSearch } from "./components/booking-search";
+export { LocationCombobox, DateRangePicker, GuestSelector, } from "./components/booking-search";
+export type { AvailabilityDay, SearchLocation, GuestData, BookingSearchPayload, BookingSearchProps, LocationComboboxProps, DateRangePickerProps, GuestSelectorProps, GuestStepperProps, } from "./types/booking";
+export { cn } from "./lib/utils";

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/types/booking.d.ts

@@ -0,0 +1,153 @@
+/**
+ * Represents availability and price for a single day
+ */
+export interface AvailabilityDay {
+    /** Date in ISO format (YYYY-MM-DD) */
+    date: string;
+    /** Price for this date */
+    price: number;
+    /** Whether the date is available for booking */
+    isAvailable: boolean;
+}
+/**
+ * Selectable location for booking search
+ */
+export interface SearchLocation {
+    id: string;
+    name: string;
+    /** Type of location (city, hotel, region, etc.) */
+    type?: string;
+    /** ISO country code */
+    countryCode?: string;
+}
+/**
+ * Guest data
+ */
+export interface GuestData {
+    adults: number;
+    children: number;
+}
+/**
+ * Payload emitted by the component when user performs a search
+ */
+export interface BookingSearchPayload {
+    /** Selected location */
+    location: SearchLocation | null;
+    /** Check-in date */
+    checkIn: Date | null;
+    /** Check-out date */
+    checkOut: Date | null;
+    /** Number of adults */
+    adults: number;
+    /** Number of children */
+    children: number;
+}
+/**
+ * Props for the main BookingSearch component
+ */
+export interface BookingSearchProps {
+    /** Availability and prices for dates */
+    availability: AvailabilityDay[];
+    /** List of available locations for search */
+    locations: SearchLocation[];
+    /** Callback called when user initiates a search */
+    onSearch: (payload: BookingSearchPayload) => void;
+    /** Initial values (optional) */
+    defaultValues?: Partial<BookingSearchPayload>;
+    /** Search button text */
+    searchButtonText?: string;
+    /** Placeholder for location field */
+    locationPlaceholder?: string;
+    /** Minimum number of nights required */
+    minNights?: number;
+    /** Maximum number of adults */
+    maxAdults?: number;
+    /** Maximum number of children */
+    maxChildren?: number;
+    /** Custom CSS class */
+    className?: string;
+}
+/**
+ * Props for the LocationCombobox component
+ */
+export interface LocationComboboxProps {
+    /** List of locations to display */
+    locations: SearchLocation[];
+    /** Currently selected location */
+    value: SearchLocation | null;
+    /** Callback when location changes */
+    onChange: (location: SearchLocation | null) => void;
+    /** Optional title for the combobox */
+    title?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the combobox is disabled */
+    disabled?: boolean;
+    /** Custom CSS class */
+    className?: string;
+    /** Tab index */
+    tabIndex?: number;
+}
+/**
+ * Props for the DateRangePicker component
+ */
+export interface DateRangePickerProps {
+    /** Availability and prices for dates */
+    availability: AvailabilityDay[];
+    /** Selected date range */
+    value: {
+        from: Date | null;
+        to: Date | null;
+    };
+    /** Callback when date range changes */
+    onChange: (range: {
+        from: Date | null;
+        to: Date | null;
+    }) => void;
+    /** Minimum number of nights required */
+    minNights?: number;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Custom CSS class */
+    className?: string;
+    /** Tab index */
+    tabIndex?: number;
+}
+/**
+ * Props for the GuestSelector component
+ */
+export interface GuestSelectorProps {
+    /** Current guest data */
+    value: GuestData;
+    /** Callback when guest data changes */
+    onChange: (guests: GuestData) => void;
+    /** Maximum number of adults */
+    maxAdults?: number;
+    /** Maximum number of children */
+    maxChildren?: number;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom CSS class */
+    className?: string;
+    /** Tab index */
+    tabIndex?: number;
+}
+/**
+ * Props for the GuestStepper component (internal)
+ */
+export interface GuestStepperProps {
+    /** Label for the stepper */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Current value */
+    value: number;
+    /** Callback to increment */
+    onIncrement: () => void;
+    /** Callback to decrement */
+    onDecrement: () => void;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balby/booking-search",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -45,12 +45,12 @@
     "dev:css": "bun run build:css && bunx concurrently \"bun --watch index.ts\" \"bun run watch:css\"",
     "build": "bun run build:css && bun build src/index.ts --outdir=dist --target=browser --format=esm",
     "build:css": "tailwindcss -i ./src/styles/globals.css -o ./src/styles/output.css --minify",
+    "build:types": "tsc -p tsconfig.build.json",
     "watch:css": "tailwindcss -i ./src/styles/globals.css -o ./src/styles/output.css --watch",
     "type-check": "tsc --noEmit",
     "test": "bun test src/components/booking-search/tests/",
     "test:coverage": "bun test --coverage src/components/booking-search/tests/",
-    "prepublishOnly": "bun run type-check && bun run test && bun run build",
-    "ts:check": "tsc --noEmit"
+    "prepublishOnly": "bun run type-check && bun run test && bun run build"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.0.11",
@@ -70,6 +70,7 @@
     "tailwindcss": ">=3.0.0"
   },
   "dependencies": {
+    "@balby/booking-search": "^1.0.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",