@stratakit/structures/dist/Chip.js

Medium-sized component structures for the Strata design system

import { c as _c } from "react-compiler-runtime";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Role } from "@ariakit/react/role";
import { IconButton } from "@stratakit/bricks";
import { forwardRef, useSafeContext } from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { createStore, useStore } from "zustand";
import { combine } from "zustand/middleware";
import { Dismiss } from "./~utils.icons.js";
import { useInit } from "./~utils.useInit.js";
function createChipStore(initialState) {
  return createStore(combine(initialState, (set, _, store) => ({
    setLabelId: (labelId) => {
      set({
        labelId: labelId || store.getInitialState().labelId
      });
    }
  })));
}
const ChipContext = React.createContext(void 0);
function ChipProvider(props) {
  const $ = _c(5);
  const defaultLabelId = React.useId();
  let t0;
  if ($[0] !== defaultLabelId) {
    t0 = () => createChipStore({
      labelId: defaultLabelId
    });
    $[0] = defaultLabelId;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  const [store] = React.useState(t0);
  let t1;
  if ($[2] !== props.children || $[3] !== store) {
    t1 = jsx(ChipContext.Provider, {
      value: store,
      children: props.children
    });
    $[2] = props.children;
    $[3] = store;
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  return t1;
}
function useChipState(selectorFn) {
  const store = useSafeContext(ChipContext);
  return useStore(store, selectorFn);
}
const ChipRoot = forwardRef((props, forwardedRef) => {
  useInit();
  const {
    variant = "solid",
    ...rest
  } = props;
  return /* @__PURE__ */ jsx(ChipProvider, {
    children: /* @__PURE__ */ jsx(Role.div, {
      "data-_sk-variant": variant,
      ...rest,
      className: cx("\u{1F95D}Chip", props.className),
      ref: forwardedRef
    })
  });
});
const ChipLabel = forwardRef((props, forwardedRef) => {
  const labelId = useChipState((state) => state.labelId);
  const setLabelId = useChipState((state_0) => state_0.setLabelId);
  React.useEffect(() => {
    setLabelId(props.id);
  }, [setLabelId, props.id]);
  return /* @__PURE__ */ jsx(Role.span, {
    id: labelId,
    ...props,
    className: cx("\u{1F95D}ChipLabel", props.className),
    ref: forwardedRef
  });
});
const ChipDismissButton = forwardRef((props, forwardedRef) => {
  const {
    label = "Dismiss",
    ...rest
  } = props;
  const labelId = useChipState((state) => state.labelId);
  const defaultId = React.useId();
  const id = props.id ?? defaultId;
  return /* @__PURE__ */ jsx(IconButton, {
    id,
    "aria-labelledby": `${id} ${labelId}`,
    ...rest,
    label,
    className: cx("\u{1F95D}ChipDismissButton", props.className),
    variant: "ghost",
    labelVariant: "visually-hidden",
    icon: /* @__PURE__ */ jsx(Dismiss, {}),
    ref: forwardedRef
  });
});
const Chip = forwardRef((props, forwardedRef) => {
  useInit();
  const {
    onDismiss,
    label,
    ...rest
  } = props;
  return /* @__PURE__ */ jsxs(ChipRoot, {
    ...rest,
    ref: forwardedRef,
    children: [/* @__PURE__ */ jsx(ChipLabel, {
      children: label
    }), onDismiss && /* @__PURE__ */ jsx(ChipDismissButton, {
      onClick: onDismiss
    })]
  });
});
var Chip_default = Chip;
export {
  ChipDismissButton as DismissButton,
  ChipLabel as Label,
  ChipRoot as Root,
  Chip_default as default
};