@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/react';
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 { Text } from '@spark-web/text';
import { useTheme } from '@spark-web/theme';
import { jsx, jsxs } from '@emotion/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
  }
});
var accordionStateStyles = 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 = useTheme();
  return jsx(AccordionPrimitive.Item, {
    value: value,
    asChild: true,
    css: accordionStateStyles,
    children: jsxs(Box, {
      data: data,
      background: background,
      borderRadius: "medium",
      padding: padding,
      children: [jsx(AccordionPrimitive.Header, {
        asChild: true,
        children: jsx(Heading, {
          as: headingElement !== null && headingElement !== void 0 ? headingElement : 'h3',
          level: level !== null && level !== void 0 ? level : '3',
          children: jsx(AccordionPrimitive.Trigger, {
            asChild: true,
            children: jsxs(Box, {
              display: "flex",
              justifyContent: justifyContent,
              alignItems: "center",
              gap: "small",
              as: "button",
              children: [jsx(Box, {
                className: openStateLabel && 'closedLabel',
                children: jsx(Text, {
                  weight: "semibold",
                  tone: headerTone,
                  children: label
                })
              }), openStateLabel ? jsx(Box, {
                className: "openedLabel",
                children: jsx(Text, {
                  weight: "semibold",
                  tone: headerTone,
                  children: openStateLabel
                })
              }) : null, jsxs(Box, {
                display: "flex",
                alignItems: "center",
                className: "chevronIcon",
                "aria-hidden": true,
                children: ["\u200B", jsx(ChevronDownIcon, {
                  size: "xxsmall",
                  tone: headerTone
                })]
              })]
            })
          })
        })
      }), jsx(AccordionPrimitive.Content, {
        css: 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, " 0.3")
            },
            '&[data-state="closed"]': {
              animation: "".concat(closeAnimation, " ").concat(theme.animation.standard.duration, "ms ").concat(theme.animation.standard.easing, " 0")
            }
          }
        }),
        children: jsx(Box, {
          paddingTop: "xlarge",
          tabIndex: 0,
          children: children
        })
      })]
    })
  });
}
function Accordion(_ref2) {
  var children = _ref2.children,
    rest = _objectWithoutProperties(_ref2, _excluded);
  return jsx(AccordionPrimitive.Root, _objectSpread(_objectSpread({
    asChild: true
  }, rest), {}, {
    children: jsx(Stack, {
      gap: "small",
      width: "full",
      children: children
    })
  }));
}

export { Accordion, AccordionItem };