ivt
Version:
Ivt Components Library
221 lines (217 loc) • 8.57 kB
JavaScript
import * as React from 'react';
import React__default from 'react';
import { c as createContextScope } from '../chunks/index-DT8WgpCS.mjs';
import { P as Primitive } from '../chunks/index-DgKlJYZP.mjs';
import { c as createRovingFocusGroupScope, I as Item, R as Root } from '../chunks/index-BsG_UW8k.mjs';
import { a as Toggle, t as toggleVariants } from '../chunks/toggle-BKUFNwmI.mjs';
import { u as useControllableState } from '../chunks/index-D4FMFHi9.mjs';
import { u as useDirection } from '../chunks/index-CGLjQEjG.mjs';
import { jsx } from 'react/jsx-runtime';
import { c as cn } from '../chunks/utils-05LlW3Cl.mjs';
import 'react-dom';
import '@radix-ui/react-slot';
import '../chunks/index-Bl-WJHvp.mjs';
import '@radix-ui/react-collection';
import '../chunks/index-1tQVI0Jh.mjs';
import '../chunks/index-tkRL9Tft.mjs';
import '../chunks/index-DKOlG3mh.mjs';
import '../chunks/index-Cbm3--wc.mjs';
import 'class-variance-authority';
import '../chunks/bundle-mjs-BYcyWisL.mjs';
var TOGGLE_GROUP_NAME = "ToggleGroup";
var [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [
createRovingFocusGroupScope
]);
var useRovingFocusGroupScope = createRovingFocusGroupScope();
var ToggleGroup$1 = React__default.forwardRef((props, forwardedRef)=>{
const { type, ...toggleGroupProps } = props;
if (type === "single") {
const singleProps = toggleGroupProps;
return /* @__PURE__ */ jsx(ToggleGroupImplSingle, {
...singleProps,
ref: forwardedRef
});
}
if (type === "multiple") {
const multipleProps = toggleGroupProps;
return /* @__PURE__ */ jsx(ToggleGroupImplMultiple, {
...multipleProps,
ref: forwardedRef
});
}
throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
});
ToggleGroup$1.displayName = TOGGLE_GROUP_NAME;
var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
var ToggleGroupImplSingle = React__default.forwardRef((props, forwardedRef)=>{
const { value: valueProp, defaultValue, onValueChange = ()=>{}, ...toggleGroupSingleProps } = props;
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? "",
onChange: onValueChange,
caller: TOGGLE_GROUP_NAME
});
return /* @__PURE__ */ jsx(ToggleGroupValueProvider, {
scope: props.__scopeToggleGroup,
type: "single",
value: React__default.useMemo(()=>value ? [
value
] : [], [
value
]),
onItemActivate: setValue,
onItemDeactivate: React__default.useCallback(()=>setValue(""), [
setValue
]),
children: /* @__PURE__ */ jsx(ToggleGroupImpl, {
...toggleGroupSingleProps,
ref: forwardedRef
})
});
});
var ToggleGroupImplMultiple = React__default.forwardRef((props, forwardedRef)=>{
const { value: valueProp, defaultValue, onValueChange = ()=>{}, ...toggleGroupMultipleProps } = props;
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? [],
onChange: onValueChange,
caller: TOGGLE_GROUP_NAME
});
const handleButtonActivate = React__default.useCallback((itemValue)=>setValue((prevValue = [])=>[
...prevValue,
itemValue
]), [
setValue
]);
const handleButtonDeactivate = React__default.useCallback((itemValue)=>setValue((prevValue = [])=>prevValue.filter((value2)=>value2 !== itemValue)), [
setValue
]);
return /* @__PURE__ */ jsx(ToggleGroupValueProvider, {
scope: props.__scopeToggleGroup,
type: "multiple",
value,
onItemActivate: handleButtonActivate,
onItemDeactivate: handleButtonDeactivate,
children: /* @__PURE__ */ jsx(ToggleGroupImpl, {
...toggleGroupMultipleProps,
ref: forwardedRef
})
});
});
ToggleGroup$1.displayName = TOGGLE_GROUP_NAME;
var [ToggleGroupContext$1, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
var ToggleGroupImpl = React__default.forwardRef((props, forwardedRef)=>{
const { __scopeToggleGroup, disabled = false, rovingFocus = true, orientation, dir, loop = true, ...toggleGroupProps } = props;
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
const direction = useDirection(dir);
const commonProps = {
role: "group",
dir: direction,
...toggleGroupProps
};
return /* @__PURE__ */ jsx(ToggleGroupContext$1, {
scope: __scopeToggleGroup,
rovingFocus,
disabled,
children: rovingFocus ? /* @__PURE__ */ jsx(Root, {
asChild: true,
...rovingFocusGroupScope,
orientation,
dir: direction,
loop,
children: /* @__PURE__ */ jsx(Primitive.div, {
...commonProps,
ref: forwardedRef
})
}) : /* @__PURE__ */ jsx(Primitive.div, {
...commonProps,
ref: forwardedRef
})
});
});
var ITEM_NAME = "ToggleGroupItem";
var ToggleGroupItem$1 = React__default.forwardRef((props, forwardedRef)=>{
const valueContext = useToggleGroupValueContext(ITEM_NAME, props.__scopeToggleGroup);
const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);
const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);
const pressed = valueContext.value.includes(props.value);
const disabled = context.disabled || props.disabled;
const commonProps = {
...props,
pressed,
disabled
};
const ref = React__default.useRef(null);
return context.rovingFocus ? /* @__PURE__ */ jsx(Item, {
asChild: true,
...rovingFocusGroupScope,
focusable: !disabled,
active: pressed,
ref,
children: /* @__PURE__ */ jsx(ToggleGroupItemImpl, {
...commonProps,
ref: forwardedRef
})
}) : /* @__PURE__ */ jsx(ToggleGroupItemImpl, {
...commonProps,
ref: forwardedRef
});
});
ToggleGroupItem$1.displayName = ITEM_NAME;
var ToggleGroupItemImpl = React__default.forwardRef((props, forwardedRef)=>{
const { __scopeToggleGroup, value, ...itemProps } = props;
const valueContext = useToggleGroupValueContext(ITEM_NAME, __scopeToggleGroup);
const singleProps = {
role: "radio",
"aria-checked": props.pressed,
"aria-pressed": void 0
};
const typeProps = valueContext.type === "single" ? singleProps : void 0;
return /* @__PURE__ */ jsx(Toggle, {
...typeProps,
...itemProps,
ref: forwardedRef,
onPressedChange: (pressed)=>{
if (pressed) {
valueContext.onItemActivate(value);
} else {
valueContext.onItemDeactivate(value);
}
}
});
});
var Root2 = ToggleGroup$1;
var Item2 = ToggleGroupItem$1;
const ToggleGroupContext = /*#__PURE__*/ React.createContext({
size: "default",
variant: "default"
});
function ToggleGroup({ className, variant, size, children, ...props }) {
return /*#__PURE__*/ React.createElement(Root2, {
"data-slot": "toggle-group",
"data-variant": variant,
"data-size": size,
className: cn("group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs", className),
...props
}, /*#__PURE__*/ React.createElement(ToggleGroupContext.Provider, {
value: {
variant,
size
}
}, children));
}
function ToggleGroupItem({ className, children, variant, size, ...props }) {
const context = React.useContext(ToggleGroupContext);
return /*#__PURE__*/ React.createElement(Item2, {
"data-slot": "toggle-group-item",
"data-variant": context.variant || variant,
"data-size": context.size || size,
className: cn(toggleVariants({
variant: context.variant || variant,
size: context.size || size
}), "min-w-0 flex-1 shrink-0 rounded-none px-3 py-1 shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l", className),
...props
}, children);
}
export { ToggleGroup, ToggleGroupItem };
//# sourceMappingURL=index.mjs.map