mautourco-components 0.1.2 → 0.2.0

package/dist/components/atoms/RatingStar/RatingStar.js

@@ -0,0 +1,54 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Star Rating atom
+ *
+ * Displays a row of stars from 0 to `max` (default: 5),
+ * using tokens from Components/rating-star.
+ * Can be used in read-only mode or interactive mode.
+ */
+export var RatingStar = function (_a) {
+    var value = _a.value, _b = _a.max, max = _b === void 0 ? 5 : _b, _c = _a.interactive, interactive = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, ariaLabel = _a["aria-label"];
+    var handleClick = function (index) {
+        if (!interactive || disabled || !onChange)
+            return;
+        onChange(index + 1);
+    };
+    var handleKeyDown = function (event) {
+        if (!interactive || disabled || !onChange)
+            return;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            onChange(Math.min(max, value + 1));
+        }
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            onChange(Math.max(0, value - 1));
+        }
+    };
+    var stars = Array.from({ length: max }, function (_, index) {
+        var isSelected = index < value;
+        var starClass = [
+            'rating-star__icon',
+            isSelected ? 'rating-star__icon--selected' : 'rating-star__icon--default',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (_jsx("button", __assign({ type: "button", className: "rating-star__button", onClick: function () { return handleClick(index); }, disabled: disabled || !interactive, "aria-hidden": !interactive, tabIndex: interactive ? 0 : -1 }, { children: _jsx("span", __assign({ className: starClass }, { children: "\u2605" })) }), index));
+    });
+    var containerClasses = ['rating-star', interactive ? 'rating-star--interactive' : '', className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", __assign({ className: containerClasses, role: interactive ? 'slider' : 'img', "aria-valuemin": interactive ? 0 : undefined, "aria-valuemax": interactive ? max : undefined, "aria-valuenow": interactive ? value : undefined, "aria-label": ariaLabel, tabIndex: interactive && !disabled ? 0 : -1, onKeyDown: handleKeyDown }, { children: stars })));
+};
+export default RatingStar;

package/dist/components/atoms/SegmentedButton/SegmentedButton.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface SegmentedButtonOption {
+    /** Valeur de l'option */
+    value: string;
+    /** Libellé affiché */
+    label: string;
+    /** État désactivé */
+    disabled?: boolean;
+}
+export interface SegmentedButtonProps {
+    /** Options du bouton segmenté */
+    options: SegmentedButtonOption[];
+    /** Valeur sélectionnée */
+    value: string;
+    /** Handler de changement */
+    onChange: (value: string) => void;
+    /** Orientation du bouton segmenté */
+    orientation?: 'horizontal' | 'vertical';
+    /** État désactivé pour tout le groupe */
+    disabled?: boolean;
+    /** Classes CSS supplémentaires */
+    className?: string;
+    /** Nom du groupe pour l'accessibilité */
+    name?: string;
+}
+declare const SegmentedButton: React.FC<SegmentedButtonProps>;
+export default SegmentedButton;

package/dist/components/atoms/SegmentedButton/SegmentedButton.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+var SegmentedButton = function (_a) {
+    var options = _a.options, value = _a.value, onChange = _a.onChange, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? '' : _d, name = _a.name;
+    var containerClasses = [
+        'segmented-button',
+        "segmented-button--".concat(orientation),
+        disabled && 'segmented-button--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var handleClick = function (optionValue, optionDisabled) {
+        if (!disabled && !optionDisabled && optionValue !== value) {
+            onChange(optionValue);
+        }
+    };
+    var getButtonClasses = function (option, index) {
+        var isSelected = option.value === value;
+        var isFirst = index === 0;
+        var isLast = index === options.length - 1;
+        var isDisabled = disabled || option.disabled;
+        return [
+            'segmented-button__item',
+            isSelected && 'segmented-button__item--selected',
+            isFirst && 'segmented-button__item--first',
+            isLast && 'segmented-button__item--last',
+            isDisabled && 'segmented-button__item--disabled',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    };
+    return (_jsx("div", __assign({ className: containerClasses, role: "group", "aria-label": name }, { children: options.map(function (option, index) {
+            var isSelected = option.value === value;
+            var isDisabled = disabled || option.disabled;
+            return (_jsx("button", __assign({ type: "button", className: getButtonClasses(option, index), onClick: function () { return handleClick(option.value, option.disabled); }, disabled: isDisabled, "aria-pressed": isSelected, "aria-label": option.label }, { children: _jsx("span", __assign({ className: "segmented-button__label" }, { children: option.label })) }), option.value));
+        }) })));
+};
+export default SegmentedButton;

package/dist/components/atoms/Slider/Slider.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export type SliderVariant = 'full' | 'half';
+export interface SliderProps {
+    /**
+     * Current value of the slider (controlled mode).
+     */
+    value: number;
+    /**
+     * Minimum value.
+     */
+    min?: number;
+    /**
+     * Maximum value.
+     */
+    max?: number;
+    /**
+     * Step between values.
+     */
+    step?: number;
+    /**
+     * Called when the value changes.
+     */
+    onChange: (value: number) => void;
+    /**
+     * Visual variant (from Figma: Type=Full | Type=Half).
+     */
+    variant?: SliderVariant;
+    /**
+     * Whether the slider is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Accessible label (aria-label) if no visible label is provided.
+     */
+    'aria-label'?: string;
+    /**
+     * Optional id to link with an external label.
+     */
+    id?: string;
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+}
+/**
+ * Slider atom.
+ *
+ * Represents a single horizontal slider control (rail + thumb),
+ * matching the Figma Slider component (Full / Half variants).
+ */
+export declare const Slider: React.FC<SliderProps>;
+export default Slider;

package/dist/components/atoms/Slider/Slider.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Slider atom.
+ *
+ * Represents a single horizontal slider control (rail + thumb),
+ * matching the Figma Slider component (Full / Half variants).
+ */
+export var Slider = function (_a) {
+    var value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, onChange = _a.onChange, _e = _a.variant, variant = _e === void 0 ? 'full' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, id = _a.id, _g = _a.className, className = _g === void 0 ? '' : _g, ariaLabel = _a["aria-label"];
+    var handleChange = function (event) {
+        var next = Number(event.target.value);
+        onChange(next);
+    };
+    var classes = ['slider', "slider--".concat(variant), disabled ? 'slider--disabled' : '', className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", __assign({ className: "slider-container" }, { children: _jsx("input", { id: id, type: "range", className: classes, min: min, max: max, step: step, value: value, onChange: handleChange, disabled: disabled, "aria-label": ariaLabel }) })));
+};
+export default Slider;

package/dist/components/molecules/Calendar/CalendarInput.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+export interface CalendarInputProps {
+    /** Placeholder text */
+    placeholder?: string;
+    /** Selected date value (formatted as string) */
+    value?: string;
+    /** State of the input: default, active, typing, disabled, success, error */
+    state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
+    /** Helper/support text below input */
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Callback when the input is clicked */
+    onClick?: () => void;
+    /** Callback when calendar icon is clicked */
+    onCalendarClick?: () => void;
+    /** Callback when input value changes */
+    onChange?: (value: string) => void;
+    /** Callback when input gains focus */
+    onFocus?: () => void;
+    /** Callback when input loses focus */
+    onBlur?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the calendar icon has full bg*/
+    iconBGFull?: boolean;
+    /** Position of the calendar icon: left or right */
+    iconPosition?: "left" | "right";
+    /** Show chevron on the right when icon is on the left */
+    showChevron?: boolean;
+    /** Whether the calendar popover is open */
+    isOpen?: boolean;
+}
+declare const CalendarInput: React.FC<CalendarInputProps>;
+export default CalendarInput;

package/dist/components/molecules/Calendar/CalendarInput.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import Icon from "../../atoms/Icon/Icon";
+var CalendarInput = function (_a) {
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select date" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, onClick = _a.onClick, onCalendarClick = _a.onCalendarClick, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.iconBGFull, iconBGFull = _g === void 0 ? true : _g, _h = _a.iconPosition, iconPosition = _h === void 0 ? "right" : _h, _j = _a.showChevron, showChevron = _j === void 0 ? false : _j, _k = _a.isOpen, isOpen = _k === void 0 ? false : _k;
+    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
+    var _m = useState(value), localValue = _m[0], setLocalValue = _m[1];
+    var _o = useState(false), isTyping = _o[0], setIsTyping = _o[1];
+    var finalState = disabled ? "disabled" : state;
+    var displayState = isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
+    var handleInputChange = function (e) {
+        var newValue = e.target.value;
+        setLocalValue(newValue);
+        setIsTyping(true);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    var handleFocus = function () {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    };
+    var handleBlur = function () {
+        setIsFocused(false);
+        setIsTyping(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    };
+    var handleCalendarClick = function () {
+        if (!disabled) {
+            onCalendarClick === null || onCalendarClick === void 0 ? void 0 : onCalendarClick();
+        }
+    };
+    // keep localValue in sync when parent changes `value` (controlled)
+    React.useEffect(function () {
+        setLocalValue(value);
+    }, [value]);
+    var iconButton = (_jsx("button", __assign({ type: "button", className: "calendar-input__icon-button ".concat(iconBGFull ? " calendar-input__icon-button--full-bg" : "", " calendar-input__icon-button--").concat(iconPosition), onClick: handleCalendarClick, disabled: disabled, "aria-label": "Open calendar picker", title: "Select date" }, { children: _jsx(Icon, { name: "calendar", size: "sm", className: "calendar-input__icon" }) })));
+    return (_jsxs("div", __assign({ className: "calendar-input calendar-input--".concat(displayState, " calendar-input--icon-").concat(iconPosition, " ").concat(className).trim(), "data-node-id": "3425:11289", onClick: onClick }, { children: [iconPosition === "left" && iconButton, _jsxs("div", __assign({ className: "calendar-input__input-wrapper" }, { children: [_jsx("input", { type: "text", className: "calendar-input__field", placeholder: placeholder, value: localValue || placeholder, disabled: disabled, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, readOnly: true, "aria-label": "Select date" }), iconPosition === "left" && showChevron && (_jsx("div", __assign({ className: "calendar-input__chevron ".concat(isOpen ? 'calendar-input__chevron--open' : '') }, { children: _jsx(Icon, { name: "chevron-down", size: "sm" }) })))] })), iconPosition === "right" && iconButton] })));
+};
+export default CalendarInput;

package/dist/components/molecules/Calendar/DateTime.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { DateRange } from "react-day-picker";
+export interface DateTimeProps {
+    mode?: "calendar" | "time" | "both";
+    selectionMode?: "single" | "range";
+    numberOfMonths?: 1 | 2;
+    disableBeforeToday?: boolean;
+    disableToday?: boolean;
+    defaultDateRange?: DateRange;
+    defaultTime?: {
+        hour: string;
+        minute: string;
+        meridiem: "AM" | "PM";
+    };
+    onChange?: (payload: {
+        dateRange?: DateRange;
+        time?: {
+            hour: string;
+            minute: string;
+            meridiem: "AM" | "PM";
+        };
+    }) => void;
+}
+declare const DateTime: React.FC<DateTimeProps>;
+export default DateTime;

package/dist/components/molecules/Calendar/DateTime.js

@@ -0,0 +1,106 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Calendar } from "../../ui/calendar";
+import { Button } from "../../ui/button";
+import TimePicker from "./TimePicker";
+import Icon from "../../atoms/Icon/Icon";
+var DateTime = function (_a) {
+    var _b, _c, _d;
+    var _e = _a.mode, mode = _e === void 0 ? "both" : _e, _f = _a.selectionMode, selectionMode = _f === void 0 ? "range" : _f, _g = _a.numberOfMonths, numberOfMonths = _g === void 0 ? 2 : _g, _h = _a.disableBeforeToday, disableBeforeToday = _h === void 0 ? true : _h, _j = _a.disableToday, disableToday = _j === void 0 ? false : _j, defaultDateRange = _a.defaultDateRange, defaultTime = _a.defaultTime, onChange = _a.onChange;
+    var _k = useState(defaultDateRange), dateRange = _k[0], setDateRange = _k[1];
+    var _l = useState((_b = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.hour) !== null && _b !== void 0 ? _b : "12"), hours = _l[0], setHours = _l[1];
+    var _m = useState((_c = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.minute) !== null && _c !== void 0 ? _c : "00"), minutes = _m[0], setMinutes = _m[1];
+    var _o = useState((_d = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.meridiem) !== null && _d !== void 0 ? _d : "AM"), amPm = _o[0], setAmPm = _o[1];
+    // notify parent when date or time changes
+    useEffect(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            dateRange: dateRange !== null && dateRange !== void 0 ? dateRange : undefined,
+            time: mode === "calendar" ? undefined : { hour: hours, minute: minutes, meridiem: amPm },
+        });
+    }, [dateRange, hours, minutes, amPm, onChange, mode]);
+    var handleSelect = function (val) {
+        if (!val) {
+            setDateRange(undefined);
+            return;
+        }
+        if (val instanceof Date) {
+            setDateRange({ from: val, to: val });
+            return;
+        }
+        if (Array.isArray(val)) {
+            var sorted = val.slice().sort(function (a, b) { return +a - +b; });
+            setDateRange({ from: sorted[0], to: sorted[sorted.length - 1] });
+            return;
+        }
+        setDateRange(val);
+    };
+    var resetTime = function () {
+        setHours("12");
+        setMinutes("00");
+        setAmPm("AM");
+    };
+    var clearSelection = function () {
+        setDateRange(undefined);
+        resetTime();
+    };
+    var selectToday = function () {
+        var today = new Date();
+        today.setHours(0, 0, 0, 0);
+        setDateRange({ from: today, to: today });
+    };
+    var calendarMode = selectionMode === "single" ? "single" : "range";
+    var buildDisabled = function () {
+        var disabled = [];
+        if (disableBeforeToday) {
+            var today = new Date();
+            today.setHours(0, 0, 0, 0);
+            disabled.push({ before: today });
+        }
+        if (disableToday) {
+            var today = new Date();
+            today.setHours(0, 0, 0, 0);
+            disabled.push(today);
+        }
+        return disabled.length ? disabled : undefined;
+    };
+    var disabledDays = buildDisabled();
+    return (_jsxs("div", __assign({ className: "calendar--dropdown" }, { children: [mode !== "time" && (function () {
+                var calendarProps = {
+                    mode: calendarMode,
+                    selected: dateRange,
+                    onSelect: handleSelect,
+                    weekStartsOn: 1,
+                    showOutsideDays: false,
+                    numberOfMonths: numberOfMonths,
+                    disabled: disabledDays,
+                    className: "p-0",
+                    formatters: {
+                        formatWeekdayName: function (weekday, options) {
+                            var _a;
+                            return weekday
+                                .toLocaleDateString((_a = options === null || options === void 0 ? void 0 : options.locale) === null || _a === void 0 ? void 0 : _a.code, { weekday: "short" })
+                                .toUpperCase();
+                        },
+                    },
+                };
+                return _jsx(Calendar, __assign({}, calendarProps));
+            })(), mode !== "calendar" && (_jsx("div", __assign({ className: "".concat(mode === "both" ? "calendar--time_container_separated" : "") }, { children: _jsx(TimePicker, { label: "Time", hour: hours, minute: minutes, meridiem: amPm, onChange: function (h, m, mm) {
+                        var hh = String(Math.max(0, Math.min(12, Number(h || 0)))).padStart(2, "0");
+                        var mmn = String(Math.max(0, Math.min(59, Number(m || 0)))).padStart(2, "0");
+                        setHours(hh);
+                        setMinutes(mmn);
+                        setAmPm(mm);
+                    } }) }))), mode !== "time" && (_jsxs("div", __assign({ className: "calendar--footer" }, { children: [_jsxs(Button, __assign({ variant: "ghost", size: "sm", onClick: selectToday, type: "button", className: "calendar--footer--button", disabled: disableToday }, { children: [_jsx(Icon, { name: "calendar-outline", size: "sm" }), "Today"] })), _jsx(Button, __assign({ variant: "ghost", size: "sm", onClick: clearSelection, type: "button", className: "calendar--footer--button" }, { children: "Clear" }))] })))] })));
+};
+export default DateTime;

package/dist/components/molecules/Calendar/TimePicker.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface TimePickerProps {
+    label?: string;
+    hour?: string;
+    minute?: string;
+    meridiem?: "AM" | "PM";
+    state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
+    disabled?: boolean;
+    errorMessage?: string;
+    successMessage?: string;
+    onChange?: (hour: string, minute: string, meridiem: "AM" | "PM") => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+declare const TimePicker: React.FC<TimePickerProps>;
+export default TimePicker;

package/dist/components/molecules/Calendar/TimePicker.js

@@ -0,0 +1,91 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+var clampTwoDigits = function (val) {
+    return val.replace(/\D/g, "").slice(-2);
+};
+var TimePicker = function (_a) {
+    var _b = _a.label, label = _b === void 0 ? "Time" : _b, _c = _a.hour, hour = _c === void 0 ? "" : _c, _d = _a.minute, minute = _d === void 0 ? "" : _d, _e = _a.meridiem, meridiem = _e === void 0 ? "AM" : _e, _f = _a.state, state = _f === void 0 ? "default" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur;
+    var _h = useState(hour), localHour = _h[0], setLocalHour = _h[1];
+    var _j = useState(minute), localMinute = _j[0], setLocalMinute = _j[1];
+    var _k = useState(meridiem), localMeridiem = _k[0], setLocalMeridiem = _k[1];
+    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
+    var _m = useState(false), isTyping = _m[0], setIsTyping = _m[1];
+    // Keep local state in sync when parent props change (e.g. Clear button)
+    useEffect(function () {
+        if (hour !== localHour)
+            setLocalHour(hour);
+    }, [hour]);
+    useEffect(function () {
+        if (minute !== localMinute)
+            setLocalMinute(minute);
+    }, [minute]);
+    useEffect(function () {
+        if (meridiem !== localMeridiem)
+            setLocalMeridiem(meridiem);
+    }, [meridiem]);
+    var finalState = disabled ? "disabled" : state;
+    var displayState = isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
+    var emitChange = function (h, m, mm) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(h, m, mm);
+    };
+    var handleHourChange = function (e) {
+        var raw = clampTwoDigits(e.target.value);
+        if (raw === "") {
+            setLocalHour("");
+            setIsTyping(true);
+            emitChange("", localMinute, localMeridiem);
+            return;
+        }
+        var num = Number(raw || 0);
+        if (num > 12)
+            num = 12;
+        var val = String(num).padStart(2, "0");
+        setLocalHour(val);
+        setIsTyping(true);
+        emitChange(val, localMinute, localMeridiem);
+    };
+    var handleMinuteChange = function (e) {
+        var raw = clampTwoDigits(e.target.value);
+        if (raw === "") {
+            setLocalMinute("");
+            setIsTyping(true);
+            emitChange(localHour, "", localMeridiem);
+            return;
+        }
+        var num = Number(raw || 0);
+        if (num > 59)
+            num = 59;
+        var val = String(num).padStart(2, "0");
+        setLocalMinute(val);
+        setIsTyping(true);
+        emitChange(localHour, val, localMeridiem);
+    };
+    var handleMeridiemClick = function (value) {
+        if (disabled)
+            return;
+        setLocalMeridiem(value);
+        emitChange(localHour, localMinute, value);
+    };
+    var handleFocus = function () {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    };
+    var handleBlur = function () {
+        setIsFocused(false);
+        setIsTyping(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    };
+    return (_jsxs("div", __assign({ className: "time-picker-wrapper", "data-state": displayState }, { children: [label && _jsx("div", __assign({ className: "time-picker__div" }, { children: label })), _jsxs("div", __assign({ className: "time-picker time-picker--".concat(displayState) }, { children: [_jsx("input", { className: "time-picker__input", type: "text", inputMode: "numeric", pattern: "[0-9]*", value: localHour, placeholder: "00", onChange: handleHourChange, onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, "aria-label": "Hour", "data-unit": "hour" }), _jsx("div", __assign({ className: "time-picker__colon" }, { children: ":" })), _jsx("input", { className: "time-picker__input", type: "text", inputMode: "numeric", pattern: "[0-9]*", value: localMinute, placeholder: "00", onChange: handleMinuteChange, onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, "aria-label": "Minute", "data-unit": "minute" }), _jsxs("div", __assign({ className: "time-picker__am-pm", role: "tablist", "aria-label": "AM/PM selector" }, { children: [_jsx("button", __assign({ type: "button", className: "time-picker__seg time-picker__seg--left ".concat(localMeridiem === "AM" ? "time-picker__seg--selected" : ""), onClick: function () { return handleMeridiemClick("AM"); }, disabled: disabled, "aria-pressed": localMeridiem === "AM" }, { children: "AM" })), _jsx("button", __assign({ type: "button", className: "time-picker__seg time-picker__seg--right ".concat(localMeridiem === "PM" ? "time-picker__seg--selected" : ""), onClick: function () { return handleMeridiemClick("PM"); }, disabled: disabled, "aria-pressed": localMeridiem === "PM" }, { children: "PM" }))] }))] }))] })));
+};
+export default TimePicker;

package/dist/components/molecules/LocationDropdown/LocationDropdown.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import '../../../styles/components/molecule/location-dropdown.css';
+export interface LocationOption {
+    id: string | number;
+    label: string;
+    type: 'airport' | 'port' | 'accommodation';
+    disabled?: boolean;
+}
+export interface LocationGroup {
+    id: string;
+    label: string;
+    options: LocationOption[];
+}
+export interface LocationData {
+    id: string | number;
+    locationName: string;
+}
+export interface LocationDropdownProps {
+    options?: LocationOption[];
+    groups?: LocationGroup[];
+    selectedValue?: string | number | null;
+    placeholder?: string;
+    label?: string;
+    onSelectionChange: (location: LocationData | null) => void;
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    type?: 'airport-port' | 'accommodation' | 'pickup-dropoff';
+    maxHeight?: number;
+    direction?: 'pickup' | 'dropoff';
+    showGroupTitles?: boolean;
+}
+declare const LocationDropdown: React.FC<LocationDropdownProps>;
+export default LocationDropdown;