@teamsparta/stack-chip/dist/chunk-KPU2QILI.mjs

stack chip

import {
  ChipGroupProvider
} from "./chunk-7RKFGZXB.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-FUJQIYOF.mjs";

// src/ChipGroup.tsx
import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
import { Flex } from "@teamsparta/stack-flex";
import { useControllableState } from "@teamsparta/stack-utils";
import { forwardRef } from "react";
import { jsx } from "@emotion/react/jsx-runtime";
var ChipGroup = forwardRef(
  (_a, ref) => {
    var _b = _a, {
      value: valueFromProps,
      defaultValue,
      onValueChange,
      multiple = false,
      disabled = false,
      children,
      orientation,
      dir = "ltr",
      loop = true,
      direction = "row",
      gap = 8,
      wrap = "wrap",
      align = "start",
      justify = "start",
      size
    } = _b, restProps = __objRest(_b, [
      "value",
      "defaultValue",
      "onValueChange",
      "multiple",
      "disabled",
      "children",
      "orientation",
      "dir",
      "loop",
      "direction",
      "gap",
      "wrap",
      "align",
      "justify",
      "size"
    ]);
    const initialValue = multiple ? [] : "";
    const [value, setValue] = useControllableState({
      prop: valueFromProps,
      defaultProp: defaultValue != null ? defaultValue : initialValue,
      // FIXME: 추후 타입 처리 필요
      onChange: onValueChange
    });
    const toggleValue = (clickedValue) => {
      if (multiple) {
        const currentValues = Array.isArray(value) ? value : [];
        const index = currentValues.indexOf(clickedValue);
        if (index > -1) {
          const newValue = [...currentValues];
          newValue.splice(index, 1);
          setValue(newValue);
        } else {
          setValue([...currentValues, clickedValue]);
        }
      } else {
        const currentValue = value;
        setValue(currentValue === clickedValue ? "" : clickedValue);
      }
    };
    return /* @__PURE__ */ jsx(
      ChipGroupProvider,
      {
        value,
        multiple,
        disabled,
        toggleValue,
        size,
        children: /* @__PURE__ */ jsx(
          RovingFocusGroup.Root,
          __spreadProps(__spreadValues({
            asChild: true,
            ref,
            loop,
            orientation,
            dir,
            role: "group"
          }, restProps), {
            children: /* @__PURE__ */ jsx(
              Flex,
              {
                direction,
                gap,
                wrap,
                align,
                justify,
                children
              }
            )
          })
        )
      }
    );
  }
);
ChipGroup.displayName = "ChipGroup";

export {
  ChipGroup
};