@tapie-kr/inspire-react/dist/cjs/components/atoms/Details/index.js

React Component Collection for INSPIRE

'use client';
/* eslint-disable */
/*
 * INSPIRE : Creative Kit
 * React Component Collection for INSPIRE
 *
 * This file is generated automatically. Do not modify it manually
 * Generated at : 2025. 3. 4. 오후 6:18:13
 * @tapie-kr/inspire-react version: 0.2.15
 *
 * (c) 2025 TAPIE. All rights reserved.
 * MIT License
*/
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var styles_css = require('./styles.css.js');
var color_css = require('../../../lib/style/contract/color.css.js');
var component_css = require('../../../lib/style/contract/component.css.js');
var index$2 = require('../../foundations/Icon/index.js');
var iconSet = require('../../foundations/Icon/icon-set.js');
var index$1 = require('../../miscellaneous/layout/HStack/index.js');
var index = require('../../miscellaneous/layout/VStack/index.js');
var index$3 = require('../../../_virtual/index.js');
var framerMotion = require('framer-motion');
var React = require('react');
var types = require('../../../lib/layout/types.js');
var utility = require('../../../lib/style/utility.js');
var transition = require('../../../utils/motion/transition.js');

function Details(props){const{title,defaultOpen,hideDefaultIcon,disabled,onToggle}=props;const[isOpened,setIsOpened]=React.useState(defaultOpen||false);const handleDetailsClick=React.useCallback(e=>{e.preventDefault();if(disabled)return;const newIsOpened=!isOpened;setIsOpened(newIsOpened);onToggle?.(newIsOpened);},[disabled,isOpened,onToggle]);return jsxRuntime.jsxs(index.VStack,{align:types.StackAlign.START,spacing:component_css.spacingVars.micro,children:[jsxRuntime.jsxs("details",{className:styles_css.details,open:isOpened,onClick:handleDetailsClick,children:[jsxRuntime.jsx("summary",{className:styles_css.summary,children:jsxRuntime.jsxs(index$1.HStack,{className:styles_css.titleContainer,spacing:component_css.spacingVars.mini,children:[jsxRuntime.jsx(index$2.Icon,{className:index$3.default(styles_css.icon,{[styles_css.rotateIcon]:!isOpened}),name:!hideDefaultIcon&&iconSet.GlyphIcon.KEYBOARD_ARROW_DOWN,color:color_css.colorVars.content.default,size:16}),title]})}),jsxRuntime.jsx("div",{className:utility.utilityClass.visuallyHidden,children:props.children})]}),jsxRuntime.jsx(framerMotion.motion.div,{"aria-hidden":true,initial:false,animate:{height:isOpened?"auto":0},transition:transition.getTransition({duration:.35}),children:jsxRuntime.jsx(framerMotion.AnimatePresence,{initial:false,children:isOpened?jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0,y:-20},exit:{opacity:0,y:-20,transition:transition.getTransition({duration:.3})},animate:{opacity:1,y:0,transition:transition.getTransition({duration:.3,delay:.06})},children:props.children}):null})})]})}

exports.Details = Details;