@tapie-kr/inspire-react/dist/esm/components/atoms/Segment/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 { segment, active } from './styles.css.js';
import { spacingVars } from '../../../lib/style/contract/component.css.js';
import { Icon } from '../../foundations/Icon/index.js';
import { Typography } from '../../foundations/Typography/index.js';
import { HStack } from '../../miscellaneous/layout/HStack/index.js';
import { SegmentGroupContext } from '../../molecules/SegmentGroup/context.js';
import cn from '../../../_virtual/index.js';
import { useContext, useMemo, useCallback } from 'react';
import { TypographyWeight } from '../../foundations/Typography/shared.js';

function Segment(props){const{value,onChange}=useContext(SegmentGroupContext);const isContextInitialized=value!==undefined&&onChange!==undefined;const isActive=useMemo(()=>value===props.value,[value,props.value]);const handleClick=useCallback(()=>{onChange?.(props.value);},[onChange,props.value]);return jsxs(HStack,{fullWidth:isContextInitialized,spacing:spacingVars.mini,className:cn(segment,{[active]:isActive}),onClick:handleClick,children:[jsx(Icon,{name:props.leadingIcon,size:20}),jsx(Typography.Petite,{weight:isActive?TypographyWeight.SEMIBOLD:TypographyWeight.MEDIUM,children:props.label})]})}

export { Segment };