@spark-web/accordion/dist/spark-web-accordion.cjs.dev.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var css = require('@emotion/css');
var AccordionPrimitive = require('@radix-ui/react-accordion');
var box = require('@spark-web/box');
var heading = require('@spark-web/heading');
var icon = require('@spark-web/icon');
var stack = require('@spark-web/stack');
var theme = require('@spark-web/theme');
var jsxRuntime = require('react/jsx-runtime');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n["default"] = e;
  return Object.freeze(n);
}

var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);

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

exports.Accordion = Accordion;
exports.AccordionItem = AccordionItem;