@spark-web/accordion/dist/spark-web-accordion.cjs.prod.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 react = require('@emotion/react');
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 text = require('@spark-web/text');
var theme = require('@spark-web/theme');
var jsxRuntime = require('@emotion/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 = react.keyframes({
  from: {
    height: 0,
    opacity: 0
  },
  to: {
    height: 'var(--radix-accordion-content-height)',
    opacity: 1
  }
});
var closeAnimation = react.keyframes({
  from: {
    height: 'var(--radix-accordion-content-height)',
    opacity: 1
  },
  to: {
    height: 0,
    opacity: 0
  }
});
var accordionStateStyles = react.css({
  '[data-state="open"]': {
    '.chevronIcon': {
      transform: 'rotate(180deg)',
      transition: 'transform .2s'
    },
    '.closedLabel': {
      display: 'none'
    },
    '.openedLabel': {
      display: 'block'
    }
  },
  '[data-state="closed"]': {
    '.closedLabel': {
      display: 'block'
    },
    '.openedLabel': {
      display: 'none'
    }
  }
});
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,
    _ref$headerTone = _ref.headerTone,
    headerTone = _ref$headerTone === void 0 ? 'neutral' : _ref$headerTone,
    openStateLabel = _ref.openStateLabel,
    _ref$padding = _ref.padding,
    padding = _ref$padding === void 0 ? 'large' : _ref$padding,
    _ref$justifyContent = _ref.justifyContent,
    justifyContent = _ref$justifyContent === void 0 ? 'spaceBetween' : _ref$justifyContent;
  var theme$1 = theme.useTheme();
  return jsxRuntime.jsx(AccordionPrimitive__namespace.Item, {
    value: value,
    asChild: true,
    css: accordionStateStyles,
    children: jsxRuntime.jsxs(box.Box, {
      data: data,
      background: background,
      borderRadius: "medium",
      padding: padding,
      children: [jsxRuntime.jsx(AccordionPrimitive__namespace.Header, {
        asChild: true,
        children: jsxRuntime.jsx(heading.Heading, {
          as: headingElement !== null && headingElement !== void 0 ? headingElement : 'h3',
          level: level !== null && level !== void 0 ? level : '3',
          children: jsxRuntime.jsx(AccordionPrimitive__namespace.Trigger, {
            asChild: true,
            children: jsxRuntime.jsxs(box.Box, {
              display: "flex",
              justifyContent: justifyContent,
              alignItems: "center",
              gap: "small",
              as: "button",
              children: [jsxRuntime.jsx(box.Box, {
                className: openStateLabel && 'closedLabel',
                children: jsxRuntime.jsx(text.Text, {
                  weight: "semibold",
                  tone: headerTone,
                  children: label
                })
              }), openStateLabel ? jsxRuntime.jsx(box.Box, {
                className: "openedLabel",
                children: jsxRuntime.jsx(text.Text, {
                  weight: "semibold",
                  tone: headerTone,
                  children: openStateLabel
                })
              }) : null, jsxRuntime.jsxs(box.Box, {
                display: "flex",
                alignItems: "center",
                className: "chevronIcon",
                "aria-hidden": true,
                children: ["\u200B", jsxRuntime.jsx(icon.ChevronDownIcon, {
                  size: "xxsmall",
                  tone: headerTone
                })]
              })]
            })
          })
        })
      }), jsxRuntime.jsx(AccordionPrimitive__namespace.Content, {
        css: react.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, " 0.3")
            },
            '&[data-state="closed"]': {
              animation: "".concat(closeAnimation, " ").concat(theme$1.animation.standard.duration, "ms ").concat(theme$1.animation.standard.easing, " 0")
            }
          }
        }),
        children: jsxRuntime.jsx(box.Box, {
          paddingTop: "xlarge",
          tabIndex: 0,
          children: children
        })
      })]
    })
  });
}
function Accordion(_ref2) {
  var children = _ref2.children,
    rest = _objectWithoutProperties(_ref2, _excluded);
  return jsxRuntime.jsx(AccordionPrimitive__namespace.Root, _objectSpread(_objectSpread({
    asChild: true
  }, rest), {}, {
    children: jsxRuntime.jsx(stack.Stack, {
      gap: "small",
      width: "full",
      children: children
    })
  }));
}

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