@aegov/design-system-react/dist/components/Accordion/Accordion.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactAccordion = require("@radix-ui/react-accordion");
var _tailwindMerge = require("tailwind-merge");
var _zod = require("zod");
var _react2 = require("@phosphor-icons/react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const accordonStyles = `
  @keyframes slideDown {
  from { height: 0 }
  to { height: var(--radix-accordion-content-height) }
  }
  @keyframes slideUp {
  from { height: var(--radix-accordion-content-height) }
  to { height: 0 }
  }
  .accordion-content[data-state='open'] {
  animation: slideDown 300ms ease-out;
  }

  .accordion-content[data-state='closed'] {
  animation: slideUp 300ms ease-out;
  }
`;
const AccordionItemSchema = _zod.z.object({
  value: _zod.z.string(),
  title: _zod.z.string(),
  children: _zod.z.any(),
  icon: _zod.z.any().optional(),
  iconRotateDeg: _zod.z.number().optional().default(180)
});
const AccordionSchema = _zod.z.object({
  items: _zod.z.array(AccordionItemSchema),
  multiple: _zod.z.boolean().optional(),
  defaultValue: _zod.z.union([_zod.z.string(), _zod.z.array(_zod.z.string())]).optional(),
  className: _zod.z.string().optional(),
  collapsible: _zod.z.boolean().optional()
});
const AccordionItem = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef(({
  value,
  title,
  children,
  icon: Icon = _react2.CaretDown,
  iconRotateDeg = 180
}, ref) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactAccordion.Item, {
  ref: ref,
  value: value,
  className: "border-b border-gray-200 [.accordion-wrapper_&:last-child]:border-0"
}, /*#__PURE__*/_react.default.createElement(_reactAccordion.Header, {
  className: "w-full"
}, /*#__PURE__*/_react.default.createElement(_reactAccordion.Trigger, {
  className: "group flex w-full items-center justify-between pe-3 ps-3 pb-5 pt-5 text-left text-base font-semibold text-gray-900 aria-expanded:text-aegold-600 hover:text-aegold-600 focus:text-aegold-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 hover:transition-colors duration-150"
}, title, /*#__PURE__*/_react.default.createElement(Icon, {
  weight: "bold",
  className: "h-5 w-5 shrink-0 text-gray-500 transition-transform duration-200 group-hover:text-primary-600 group-data-[state=open]:[transform:rotate(var(--rotation-deg))]",
  style: {
    '--rotation-deg': `${iconRotateDeg}deg`,
    transition: 'transform 0.2s ease-out'
  }
}))), /*#__PURE__*/_react.default.createElement(_reactAccordion.Content, {
  className: "accordion-content overflow-hidden"
}, /*#__PURE__*/_react.default.createElement("div", {
  className: "pb-5 pt-5 ps-3 pe-3 text-gray-700 [&_.accordion-wrapper]:px-4"
}, children))))));
AccordionItem.displayName = 'AccordionItem';
const Accordion = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    items,
    multiple = false,
    defaultValue,
    className,
    collapsible = true,
    onValueChange,
    ...rest
  } = AccordionSchema.parse(props);
  return /*#__PURE__*/_react.default.createElement(_reactAccordion.Root, _extends({
    ref: ref,
    type: multiple ? 'multiple' : 'single',
    defaultValue: defaultValue,
    collapsible: collapsible.toString(),
    className: (0, _tailwindMerge.twMerge)('accordion-wrapper w-full', className),
    onValueChange: onValueChange
  }, rest), /*#__PURE__*/_react.default.createElement("style", null, accordonStyles), items.map(item => /*#__PURE__*/_react.default.createElement(AccordionItem, _extends({
    key: item.value
  }, item))));
});
Accordion.displayName = 'Accordion';
Accordion.defaultProps = {
  multiple: false,
  collapsible: true,
  className: ''
};
var _default = exports.default = Accordion;