@teamsparta/stack-chip
Version:
stack chip
55 lines (52 loc) • 1.56 kB
JavaScript
import {
Chip
} from "./chunk-C6WYQNC2.mjs";
import {
useChipGroupContext
} from "./chunk-7RKFGZXB.mjs";
import {
__objRest,
__spreadValues
} from "./chunk-FUJQIYOF.mjs";
// src/ChipButton.tsx
import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
import { composeEventHandlers } from "@teamsparta/stack-utils";
import { forwardRef } from "react";
import { jsx } from "@emotion/react/jsx-runtime";
var ChipButton = forwardRef(
(_a, ref) => {
var _b = _a, { value, disabled, onClick, size: sizeFromProps } = _b, restProps = __objRest(_b, ["value", "disabled", "onClick", "size"]);
const {
value: selectedValue,
multiple,
disabled: groupDisabled,
toggleValue,
size: sizeFromContext
} = useChipGroupContext("ChipButton");
const size = sizeFromProps != null ? sizeFromProps : sizeFromContext;
const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.includes(value) : selectedValue === value;
const isDisabled = disabled || groupDisabled;
return /* @__PURE__ */ jsx(
RovingFocusGroup.Item,
{
ref,
focusable: !isDisabled,
active: isSelected,
asChild: true,
children: /* @__PURE__ */ jsx(
Chip,
__spreadValues({
selected: isSelected,
disabled: isDisabled,
size,
onClick: composeEventHandlers(onClick, () => toggleValue(value))
}, restProps)
)
}
);
}
);
ChipButton.displayName = "ChipButton";
export {
ChipButton
};