@tapie-kr/inspire-react/dist/esm/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
*/
import { jsxs, jsx } from 'react/jsx-runtime';
import { details, summary, titleContainer, icon, rotateIcon } from './styles.css.js';
import { colorVars } from '../../../lib/style/contract/color.css.js';
import { spacingVars } from '../../../lib/style/contract/component.css.js';
import { Icon } from '../../foundations/Icon/index.js';
import { GlyphIcon } from '../../foundations/Icon/icon-set.js';
import { HStack } from '../../miscellaneous/layout/HStack/index.js';
import { VStack } from '../../miscellaneous/layout/VStack/index.js';
import cn from '../../../_virtual/index.js';
import { motion, AnimatePresence } from 'framer-motion';
import { useState, useCallback } from 'react';
import { StackAlign } from '../../../lib/layout/types.js';
import { utilityClass } from '../../../lib/style/utility.js';
import { getTransition } from '../../../utils/motion/transition.js';

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

export { Details };