@zenithui/time-picker/dist/components/toggle-group/index.js

A ZenithUi Time Picker is React component enables users to select a time from a predefined list of options.

import { jsx } from "react/jsx-runtime";
import { cn } from "@zenithui/utils";
import { createContext, forwardRef, useCallback, useContext, useEffect, useState } from "react";
const ToggleGroupContext = /*#__PURE__*/ createContext(void 0);
const ToggleGroupRoot = /*#__PURE__*/ forwardRef(({ type = "single", value, onValueChange, className, children, ...props }, ref)=>{
    if ("single" === type && Array.isArray(value)) throw new Error("ToggleGroup: value must be a string when type is single");
    if ("multiple" === type && !Array.isArray(value)) throw new Error("ToggleGroup: value must be an array when type is multiple");
    const [selectedValues, setSelectedValues] = useState(value ?? ("single" === type ? "" : []));
    useEffect(()=>{
        setSelectedValues(value ?? ("single" === type ? "" : []));
    }, [
        value,
        type
    ]);
    const toggleValue = useCallback((toggle)=>{
        if ("single" === type) {
            setSelectedValues(toggle);
            onValueChange?.(toggle);
        } else setSelectedValues((prev)=>{
            const prevArray = Array.isArray(prev) ? prev : [];
            const newValues = prevArray.includes(toggle) ? prevArray.filter((v)=>v !== toggle) : [
                ...prevArray,
                toggle
            ];
            onValueChange?.(newValues);
            return newValues;
        });
    }, [
        onValueChange,
        type
    ]);
    return /*#__PURE__*/ jsx(ToggleGroupContext.Provider, {
        value: {
            selectedValues,
            toggleValue,
            type
        },
        children: /*#__PURE__*/ jsx("div", {
            ...props,
            ref: ref,
            role: "group",
            className: cn(className, "toggle-group"),
            children: children
        })
    });
});
const ToggleGroupItem = /*#__PURE__*/ forwardRef(({ value, disabled, className, children, ...props }, ref)=>{
    const context = useContext(ToggleGroupContext);
    if (!context) throw new Error("ToggleGroupItem must be used within a ToggleGroup");
    const { selectedValues, toggleValue, type } = context;
    const isSelected = "single" === type ? selectedValues === value : selectedValues.includes(value);
    return /*#__PURE__*/ jsx("button", {
        ...props,
        ref: ref,
        type: "button",
        role: "switch",
        className: cn(className, "toggle-group-item"),
        "aria-label": value,
        "aria-checked": isSelected,
        "aria-pressed": isSelected,
        "data-disabled": disabled ?? false,
        disabled: disabled,
        onClick: ()=>toggleValue(value),
        children: children
    });
});
export { ToggleGroupItem, ToggleGroupRoot };