open-index/open-npm huggingface dataset:
npm package: @ihab_giihan/core
Description: Shared package extracted from the speechear project. It can contain UI components, shared styles, and common app-level utilities.
Latest version: 0.1.3

# @ihab_giihan/core

Shared package extracted from the speechear project. It can contain UI components, shared styles, and common app-level utilities.

## Build

1. From repository root:

```bash
cd packages/core
npm install
npm run build
```

빌드 결과는 `packages/core/dist`에 생성됩니다.

## Usage

```js
import { CoreScope, MenuButton, NoticeBox } from '@ihab_giihan/core'
import '@ihab_giihan/core/styles.css'

function App() {
	return (
		<CoreScope>
			<MenuButton item={{ key: 'home', label: 'Home' }} />
			<NoticeBox title="Notice" lines={['Scoped styles only apply inside CoreScope.']} />
		</CoreScope>
	)
}
```

## Subpath Imports

```js
import { CoreScope, Button, Faq } from '@ihab_giihan/core/components'
import { useMediaQuery, useFontScale } from '@ihab_giihan/core/hooks'
import { speak, stopSpeaking, editLine } from '@ihab_giihan/core/utils'
import '@ihab_giihan/core/styles.css'
```

`CoreScope` is required when you render styled package components in another project. The package CSS is namespaced under `.ihab-core-scope` so it does not leak into the host app.

## Notes
- 이 패키지는 `react`와 `react-dom`을 peer dependency로 사용합니다.
- CSS 및 빌드 설정은 프로젝트 스타일에 맞춰 추가 조정이 필요합니다.

## CSS

공용 스타일은 번들된 CSS 파일로 추출됩니다. 프로젝트에서 사용하려면 패키지의 CSS를 수동으로 임포트하세요:

```js
import '@ihab_giihan/core/styles.css'
import React from 'react'
import { CoreScope, MenuButton } from '@ihab_giihan/core'

function App(){
	return (
	  <CoreScope>
	    <MenuButton item={{ key: 'home', label: 'Home' }} />
	  </CoreScope>
	)
}
```

또는 번들러(예: Vite/CRA)에 CSS 자동 포함 설정을 추가할 수 있습니다.