@spark-web/accordion/dist/spark-web-accordion.esm.js

--- title: Accordion storybookPath: data-display-accordion--single isExperimentalPackage: true ---

import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import { keyframes, css } from '@emotion/css';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import { Box } from '@spark-web/box';
import { Heading } from '@spark-web/heading';
import { ChevronDownIcon } from '@spark-web/icon';
import { Stack } from '@spark-web/stack';
import { useTheme } from '@spark-web/theme';
import { jsx, jsxs } from 'react/jsx-runtime';

var _excluded = ["children"];
var openAnimation = keyframes({
  from: {
    height: 0,
    opacity: 0
  },
  to: {
    height: 'var(--radix-accordion-content-height)',
    opacity: 1
  }
});
var closeAnimation = keyframes({
  from: {
    height: 'var(--radix-accordion-content-height)',
    opacity: 1
  },
  to: {
    height: 0,
    opacity: 0
  }
});
function AccordionItem(_ref) {
  var _ref$headingElement = _ref.headingElement,
    headingElement = _ref$headingElement === void 0 ? 'h3' : _ref$headingElement,
    _ref$background = _ref.background,
    background = _ref$background === void 0 ? 'surface' : _ref$background,
    children = _ref.children,
    data = _ref.data,
    label = _ref.label,
    level = _ref.level,
    value = _ref.value;
  var theme = useTheme();
  return /*#__PURE__*/jsx(AccordionPrimitive.Item, {
    value: value,
    asChild: true,
    children: /*#__PURE__*/jsxs(Box, {
      data: data,
      background: background,
      borderRadius: "medium",
      padding: "large",
      children: [/*#__PURE__*/jsx(AccordionPrimitive.Header, {
        asChild: true,
        children: /*#__PURE__*/jsx(Heading, {
          as: headingElement !== null && headingElement !== void 0 ? headingElement : 'h3',
          level: level !== null && level !== void 0 ? level : '3',
          children: /*#__PURE__*/jsx(AccordionPrimitive.Trigger, {
            asChild: true,
            children: /*#__PURE__*/jsxs(Box, {
              display: "flex",
              justifyContent: "spaceBetween",
              alignItems: "start",
              gap: "small",
              children: [/*#__PURE__*/jsx(Box, {
                flex: 1,
                children: label
              }), /*#__PURE__*/jsxs(Box, {
                display: "flex",
                alignItems: "center",
                children: ["\u200B", /*#__PURE__*/jsx(ChevronDownIcon, {
                  size: "xxsmall"
                })]
              })]
            })
          })
        })
      }), /*#__PURE__*/jsx(AccordionPrimitive.Content, {
        className: css({
          '@media screen and (prefers-reduced-motion: no-preference)': {
            '&[data-state="open"]': {
              animation: "".concat(openAnimation, " ").concat(theme.animation.standard.duration, "ms ").concat(theme.animation.standard.easing)
            },
            '&[data-state="closed"]': {
              animation: "".concat(closeAnimation, " ").concat(theme.animation.standard.duration, "ms ").concat(theme.animation.standard.easing)
            }
          }
        }),
        children: /*#__PURE__*/jsx(Box, {
          paddingTop: "xlarge",
          children: children
        })
      })]
    })
  });
}
function Accordion(_ref2) {
  var children = _ref2.children,
    rest = _objectWithoutProperties(_ref2, _excluded);
  return /*#__PURE__*/jsx(AccordionPrimitive.Root, _objectSpread(_objectSpread({
    asChild: true
  }, rest), {}, {
    children: /*#__PURE__*/jsx(Stack, {
      gap: "small",
      width: "full",
      children: children
    })
  }));
}

export { Accordion, AccordionItem };