@tapie-kr/inspire-react/dist/cjs/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
*/
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var styles_css = require('./styles.css.js');
var component_css = require('../../../lib/style/contract/component.css.js');
var index$2 = require('../../foundations/Icon/index.js');
var index$3 = require('../../foundations/Typography/index.js');
var index = require('../../miscellaneous/layout/HStack/index.js');
var context = require('../../molecules/SegmentGroup/context.js');
var index$1 = require('../../../_virtual/index.js');
var React = require('react');
var shared = require('../../foundations/Typography/shared.js');

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

exports.Segment = Segment;