ivt/dist/chunks/toggle-Du3jnh1s.mjs

Ivt Components Library

import * as React from 'react';
import { P as Primitive, c as composeEventHandlers } from './index-Dsw02Eup.mjs';
import { u as useControllableState } from './index-1toTCGyr.mjs';
import { jsx } from 'react/jsx-runtime';
import { cva } from 'class-variance-authority';
import { c as cn } from './utils-BDcRwQMd.mjs';

var NAME = "Toggle";
var Toggle$1 = React.forwardRef((props, forwardedRef)=>{
    const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props;
    const [pressed, setPressed] = useControllableState({
        prop: pressedProp,
        onChange: onPressedChange,
        defaultProp: defaultPressed ?? false,
        caller: NAME
    });
    return /* @__PURE__ */ jsx(Primitive.button, {
        type: "button",
        "aria-pressed": pressed,
        "data-state": pressed ? "on" : "off",
        "data-disabled": props.disabled ? "" : void 0,
        ...buttonProps,
        ref: forwardedRef,
        onClick: composeEventHandlers(props.onClick, ()=>{
            if (!props.disabled) {
                setPressed(!pressed);
            }
        })
    });
});
Toggle$1.displayName = NAME;
var Root = Toggle$1;

const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium cursor-pointer hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
    variants: {
        variant: {
            default: "bg-transparent",
            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
        },
        size: {
            default: "h-9 px-2 min-w-9",
            sm: "h-8 px-1.5 min-w-8",
            lg: "h-10 px-2.5 min-w-10"
        }
    },
    defaultVariants: {
        variant: "default",
        size: "default"
    }
});
function Toggle({ className, variant, size, ...props }) {
    return /*#__PURE__*/ React.createElement(Root, {
        "data-slot": "toggle",
        className: cn(toggleVariants({
            variant,
            size,
            className
        })),
        ...props
    });
}

export { Toggle as T, Toggle$1 as a, toggleVariants as t };
//# sourceMappingURL=toggle-Du3jnh1s.mjs.map