@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/TimePicker.stories.js

@@ -0,0 +1,966 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get AppointmentBooking () {
+        return AppointmentBooking;
+    },
+    get CustomMinuteStep () {
+        return CustomMinuteStep;
+    },
+    get Default () {
+        return Default;
+    },
+    get Disabled () {
+        return Disabled;
+    },
+    get EventPlanning () {
+        return EventPlanning;
+    },
+    get RestaurantReservation () {
+        return RestaurantReservation;
+    },
+    get SchedulingForm () {
+        return SchedulingForm;
+    },
+    get TwelveHourFormat () {
+        return TwelveHourFormat;
+    },
+    get TwentyFourHourFormat () {
+        return TwentyFourHourFormat;
+    },
+    get WithError () {
+        return WithError;
+    },
+    get WithHelpText () {
+        return WithHelpText;
+    },
+    get WithPlaceholder () {
+        return WithPlaceholder;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _transformers = require("../utilities/transformers.js");
+var _TimePicker = /*#__PURE__*/ _interop_require_default(require("../components/TimePicker.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var _default = {
+    title: 'Litho/TimePicker',
+    component: _TimePicker.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A TimePicker component that allows users to select specific times using an intuitive interface. TimePickers support various time formats and can be configured for different use cases."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    args: {
+        label: 'Select time',
+        value: null
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Label for the time picker'
+        },
+        value: {
+            control: 'text',
+            description: 'Selected time value'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the input'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the time picker is disabled'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message to display'
+        },
+        helpText: {
+            control: 'text',
+            description: 'Additional descriptive text'
+        },
+        format: {
+            control: 'select',
+            options: [
+                '12h',
+                '24h'
+            ],
+            description: 'Time format (12-hour or 24-hour)'
+        },
+        minuteStep: {
+            control: 'number',
+            description: 'Step increment for minutes'
+        },
+        onChange: {
+            action: 'timeChanged',
+            description: 'Callback when time selection changes'
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)(args.value), 2), selectedTime = _useState[0], setSelectedTime = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, _object_spread_props(_object_spread({}, args), {
+            value: selectedTime,
+            onChange: function(time) {
+                var _args_onChange;
+                setSelectedTime(time);
+                (_args_onChange = args.onChange) === null || _args_onChange === void 0 ? void 0 : _args_onChange.call(args, time);
+            }
+        }));
+    }
+};
+var WithPlaceholder = {
+    args: {
+        placeholder: 'Choose a time...'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)(null), 2), selectedTime = _useState[0], setSelectedTime = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, _object_spread_props(_object_spread({}, args), {
+            value: selectedTime,
+            onChange: setSelectedTime
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Time picker with placeholder text when no time is selected.'
+            }
+        }
+    }
+};
+var WithHelpText = {
+    args: {
+        label: 'Meeting time',
+        helpText: 'Select the time when the meeting will start'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)(null), 2), selectedTime = _useState[0], setSelectedTime = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, _object_spread_props(_object_spread({}, args), {
+            value: selectedTime,
+            onChange: setSelectedTime
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Time picker with additional help text for context.'
+            }
+        }
+    }
+};
+var WithError = {
+    args: {
+        label: 'Appointment time',
+        error: 'Please select a valid time',
+        value: 'invalid-time'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)(args.value), 2), selectedTime = _useState[0], setSelectedTime = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, _object_spread_props(_object_spread({}, args), {
+            value: selectedTime,
+            onChange: setSelectedTime
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Time picker with error state for validation.'
+            }
+        }
+    }
+};
+var Disabled = {
+    args: {
+        label: 'Disabled time picker',
+        disabled: true,
+        value: '14:30'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Disabled time picker that cannot be interacted with.'
+            }
+        }
+    }
+};
+var TwentyFourHourFormat = {
+    args: {
+        label: 'Time (24-hour format)',
+        format: '24h',
+        helpText: 'Use 24-hour format (e.g., 14:30)'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)('09:00'), 2), selectedTime = _useState[0], setSelectedTime = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, _object_spread_props(_object_spread({}, args), {
+            value: selectedTime,
+            onChange: setSelectedTime
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Time picker configured for 24-hour time format.'
+            }
+        }
+    }
+};
+var TwelveHourFormat = {
+    args: {
+        label: 'Time (12-hour format)',
+        format: '12h',
+        helpText: 'Use 12-hour format with AM/PM'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)('2:30 PM'), 2), selectedTime = _useState[0], setSelectedTime = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, _object_spread_props(_object_spread({}, args), {
+            value: selectedTime,
+            onChange: setSelectedTime
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Time picker configured for 12-hour time format with AM/PM.'
+            }
+        }
+    }
+};
+var CustomMinuteStep = {
+    args: {
+        label: 'Appointment slot',
+        minuteStep: 15,
+        helpText: 'Available in 15-minute intervals'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)(null), 2), selectedTime = _useState[0], setSelectedTime = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, _object_spread_props(_object_spread({}, args), {
+            value: selectedTime,
+            onChange: setSelectedTime
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Time picker with custom minute step for scheduling appointments.'
+            }
+        }
+    }
+};
+var SchedulingForm = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)('09:00'), 2), startTime = _useState[0], setStartTime = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)('17:00'), 2), endTime = _useState1[0], setEndTime = _useState1[1];
+        var _useState2 = _sliced_to_array((0, _react.useState)('12:00'), 2), breakStart = _useState2[0], setBreakStart = _useState2[1];
+        var _useState3 = _sliced_to_array((0, _react.useState)('13:00'), 2), breakEnd = _useState3[0], setBreakEnd = _useState3[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Work Schedule",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "6",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                        columns: 2,
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
+                                label: "Start time",
+                                value: startTime,
+                                onChange: setStartTime,
+                                format: "24h",
+                                helpText: "When do you start work?"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
+                                label: "End time",
+                                value: endTime,
+                                onChange: setEndTime,
+                                format: "24h",
+                                helpText: "When do you finish work?"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                        columns: 2,
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
+                                label: "Break start",
+                                value: breakStart,
+                                onChange: setBreakStart,
+                                format: "24h",
+                                helpText: "When does your break start?"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
+                                label: "Break end",
+                                value: breakEnd,
+                                onChange: setBreakEnd,
+                                format: "24h",
+                                helpText: "When does your break end?"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        background: "subdued",
+                        padding: "4",
+                        borderRadius: "default",
+                        paddingBlockStart: "4",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Schedule Summary"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                    children: [
+                                        "Work hours: ",
+                                        startTime,
+                                        " - ",
+                                        endTime
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                    children: [
+                                        "Break time: ",
+                                        breakStart,
+                                        " - ",
+                                        breakEnd
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                    children: [
+                                        "Total work time: ",
+                                        function() {
+                                            var start = parseInt(startTime.split(':')[0]);
+                                            var end = parseInt(endTime.split(':')[0]);
+                                            var breakDuration = parseInt(breakEnd.split(':')[0]) - parseInt(breakStart.split(':')[0]);
+                                            return end - start - breakDuration;
+                                        }(),
+                                        " hours"
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        paddingBlockStart: "4",
+                        borderBlockStart: "divider",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            primary: true,
+                            children: "Save Schedule"
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Work schedule form using multiple time pickers with automatic calculation.'
+            }
+        }
+    }
+};
+var EventPlanning = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)([
+            {
+                id: 1,
+                name: 'Opening Ceremony',
+                startTime: '09:00',
+                endTime: '10:00'
+            },
+            {
+                id: 2,
+                name: 'Keynote Speech',
+                startTime: '10:30',
+                endTime: '11:30'
+            },
+            {
+                id: 3,
+                name: 'Lunch Break',
+                startTime: '12:00',
+                endTime: '13:00'
+            }
+        ]), 2), events = _useState[0], setEvents = _useState[1];
+        var updateEventTime = function(eventId, field, time) {
+            setEvents(events.map(function(event) {
+                return event.id === eventId ? _object_spread_props(_object_spread({}, event), _define_property({}, field, time)) : event;
+            }));
+        };
+        var addEvent = function() {
+            var newEvent = {
+                id: Date.now(),
+                name: 'New Event',
+                startTime: '14:00',
+                endTime: '15:00'
+            };
+            setEvents(_to_consumable_array(events).concat([
+                newEvent
+            ]));
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Event Timeline",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "6",
+                children: [
+                    events.map(function(event) {
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            border: "default",
+                            borderRadius: "default",
+                            background: "subdued",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: event.name
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                                        columns: 2,
+                                        gap: "4",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
+                                                label: "Start time",
+                                                value: event.startTime,
+                                                onChange: function(time) {
+                                                    return updateEventTime(event.id, 'startTime', time);
+                                                },
+                                                format: "24h"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
+                                                label: "End time",
+                                                value: event.endTime,
+                                                onChange: function(time) {
+                                                    return updateEventTime(event.id, 'endTime', time);
+                                                },
+                                                format: "24h"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }, event.id);
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        paddingBlockStart: "4",
+                        borderBlockStart: "divider",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                    onClick: addEvent,
+                                    children: "Add Event"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                    primary: true,
+                                    children: "Save Timeline"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Event planning interface with multiple time pickers for scheduling.'
+            }
+        }
+    }
+};
+var AppointmentBooking = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)('2024-03-15'), 2), selectedDate = _useState[0], setSelectedDate = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)(null), 2), selectedTime = _useState1[0], setSelectedTime = _useState1[1];
+        var _useState2 = _sliced_to_array((0, _react.useState)('30'), 2), duration = _useState2[0], setDuration = _useState2[1];
+        var availableSlots = [
+            '09:00',
+            '09:30',
+            '10:00',
+            '10:30',
+            '11:00',
+            '11:30',
+            '14:00',
+            '14:30',
+            '15:00',
+            '15:30',
+            '16:00',
+            '16:30'
+        ];
+        var bookedSlots = [
+            '10:30',
+            '15:00',
+            '16:00'
+        ];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Book Appointment",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "8",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                        columns: 2,
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "Select Date"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                        type: "date",
+                                        value: selectedDate,
+                                        onChange: function(e) {
+                                            return setSelectedDate(e.target.value);
+                                        },
+                                        style: {
+                                            padding: '0.5rem',
+                                            border: '1px solid #ccc',
+                                            borderRadius: '4px',
+                                            width: '100%'
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "Duration"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("select", {
+                                        value: duration,
+                                        onChange: function(e) {
+                                            return setDuration(e.target.value);
+                                        },
+                                        style: {
+                                            padding: '0.5rem',
+                                            border: '1px solid #ccc',
+                                            borderRadius: '4px',
+                                            width: '100%'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                value: "15",
+                                                children: "15 minutes"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                value: "30",
+                                                children: "30 minutes"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                value: "60",
+                                                children: "1 hour"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                value: "90",
+                                                children: "1.5 hours"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Available Time Slots"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
+                                columns: "auto-fit",
+                                gap: "2",
+                                minItemWidth: "120px",
+                                children: availableSlots.map(function(slot) {
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+                                        onClick: function() {
+                                            return setSelectedTime(slot);
+                                        },
+                                        disabled: bookedSlots.includes(slot),
+                                        style: {
+                                            padding: '0.75rem',
+                                            border: '1px solid #ccc',
+                                            borderRadius: '4px',
+                                            backgroundColor: bookedSlots.includes(slot) ? '#f5f5f5' : selectedTime === slot ? '#2196f3' : 'white',
+                                            color: bookedSlots.includes(slot) ? '#999' : selectedTime === slot ? 'white' : 'black',
+                                            cursor: bookedSlots.includes(slot) ? 'not-allowed' : 'pointer',
+                                            opacity: bookedSlots.includes(slot) ? 0.5 : 1
+                                        },
+                                        children: [
+                                            slot,
+                                            bookedSlots.includes(slot) && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                                style: {
+                                                    fontSize: '0.7rem'
+                                                },
+                                                children: "Booked"
+                                            })
+                                        ]
+                                    }, slot);
+                                })
+                            })
+                        ]
+                    }),
+                    selectedTime && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        padding: "4",
+                        background: "success-subdued",
+                        borderRadius: "default",
+                        border: "success",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Appointment Summary"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                    children: [
+                                        "Date: ",
+                                        selectedDate
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                    children: [
+                                        "Time: ",
+                                        selectedTime
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                    children: [
+                                        "Duration: ",
+                                        duration,
+                                        " minutes"
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    paddingBlockStart: "4",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        primary: true,
+                                        children: "Confirm Booking"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Appointment booking system with time slot selection and availability display.'
+            }
+        }
+    }
+};
+var RestaurantReservation = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(null), 2), reservationTime = _useState[0], setReservationTime = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)('2'), 2), partySize = _useState1[0], setPartySize = _useState1[1];
+        var _useState2 = _sliced_to_array((0, _react.useState)(''), 2), specialRequests = _useState2[0], setSpecialRequests = _useState2[1];
+        var dinnerSlots = [
+            '17:00',
+            '17:30',
+            '18:00',
+            '18:30',
+            '19:00',
+            '19:30',
+            '20:00',
+            '20:30',
+            '21:00',
+            '21:30',
+            '22:00'
+        ];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Make a Reservation",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "6",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                        columns: "2fr 1fr",
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
+                                label: "Preferred time",
+                                value: reservationTime,
+                                onChange: setReservationTime,
+                                format: "24h",
+                                helpText: "Select your preferred dining time",
+                                placeholder: "Choose time..."
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "Party Size"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("select", {
+                                        value: partySize,
+                                        onChange: function(e) {
+                                            return setPartySize(e.target.value);
+                                        },
+                                        style: {
+                                            padding: '0.5rem',
+                                            border: '1px solid #ccc',
+                                            borderRadius: '4px',
+                                            width: '100%'
+                                        },
+                                        children: [
+                                            1,
+                                            2,
+                                            3,
+                                            4,
+                                            5,
+                                            6,
+                                            7,
+                                            8
+                                        ].map(function(size) {
+                                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("option", {
+                                                value: size,
+                                                children: [
+                                                    size,
+                                                    " ",
+                                                    size === 1 ? 'person' : 'people'
+                                                ]
+                                            }, size);
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Special Requests"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("textarea", {
+                                value: specialRequests,
+                                onChange: function(e) {
+                                    return setSpecialRequests(e.target.value);
+                                },
+                                placeholder: "Any dietary restrictions, seating preferences, or special occasions...",
+                                style: {
+                                    width: '100%',
+                                    minHeight: '80px',
+                                    padding: '0.5rem',
+                                    border: '1px solid #ccc',
+                                    borderRadius: '4px',
+                                    resize: 'vertical'
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        padding: "4",
+                        background: "subdued",
+                        borderRadius: "default",
+                        border: "primary",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Available Times Tonight"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
+                                    gap: "1",
+                                    wrap: true,
+                                    children: dinnerSlots.map(function(slot) {
+                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                            style: {
+                                                padding: '0.25rem 0.5rem',
+                                                backgroundColor: reservationTime === slot ? '#2196f3' : '#e1e1e1',
+                                                color: reservationTime === slot ? 'white' : 'black',
+                                                borderRadius: '12px',
+                                                fontSize: '0.8rem',
+                                                cursor: 'pointer'
+                                            },
+                                            onClick: function() {
+                                                return setReservationTime(slot);
+                                            },
+                                            children: slot
+                                        }, slot);
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        paddingBlockStart: "4",
+                        borderBlockStart: "divider",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            primary: true,
+                            disabled: !reservationTime,
+                            children: "Reserve Table"
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Restaurant reservation system with time picker and additional booking details.'
+            }
+        }
+    }
+};