amotify/UI_MAP.md

UI Component for React,NextJS,esbuild

# amotify UI Map

> AIがコンポーネントのAPIを素早く把握するための参照ファイル。  
> 型の詳細は `dist/` 配下の `.d.ts` を参照。

---

## インポート

```ts
import { Button, Input, Sheet, ... } from 'amotify'
```

---

## 共通型

| 型 | 値 |
|---|---|
| `Themecolor` | `'comun' \| 'leaf' \| 'heart' \| 'droplet' \| 'brick' \| 'flower' \| 'lip' \| 'wine' \| 'theater' \| 'bat' \| 'poizon' \| 'ufo' \| 'moon' \| 'rain' \| 'gem' \| 'drizzle' \| 'lemon' \| 'pizza' \| 'coffee' \| 'galaxy' \| ...60+` |
| `Darkmode` | `'light' \| 'auto' \| 'dark' \| 'dim'` |
| `Roundness` | `0 \| 1 \| 2 \| 3 \| 4 \| 5` |
| `Device` | `'' \| 'windows' \| 'android' \| 'iPhone' \| 'iPad' \| 'macOSX'` |
| `Browser` | `'' \| 'chrome' \| 'firefox' \| 'safari' \| 'opera' \| 'ie' \| 'edge'` |

---

## StyleProps（スタイルプロパティ）

すべてのコンポーネントは `StyleProps.States` を継承。`xcss` で生のCSSも渡せる。

| namespace | 主なプロパティ |
|---|---|
| **Pargins** | `margin` `marginTop/Right/Bottom/Left` `padding` `paddingTop/Right/Bottom/Left` |
| **Borders** | `border` `borderTop/Right/Bottom/Left` `borderWidth` `borderColor` `borderStyle` `borderRadius` |
| **Fonts** | `fontColor` `fontSize` `fontWeight` `fontHeight` `textAlign` `textDecoration` |
| **FlexGrids** | `flexSizing` `flexWrap` `flexCenter` `flexType` `flexChilds` `flexGrid` `verticalAlign` `horizontalAlign` `gridCenter` `gridCols` |
| **Sizes** | `width` `height` `maxWidth` `minWidth` `maxHeight` `minHeight` `unitWidth` `unitHeight` |
| **StyleSets** | `ssCardBox` `ssPushable` `ssSphere` `ssSquare` `ssAbsoluteCovered` `ssTextEllipsis` `ssNowrapText` `ssHiddenOnBreak` `ssEffectsOnActive` `isRounded` `isSquared` |
| **Other** | `backgroundColor` `gradients` `boxShadow` `display` `gap` `overflow` `position` `top/right/bottom/left` `opacity` `transition` `xcss` `UnderBreakPointStyles` |

**単位 (Pargins.Unit):** `0 \| '1/12' \| '1/6' \| '1/4' \| '1/3' \| '1/2' \| '2/3' \| '3/4' \| 1 \| 1.5 \| 2 \| 2.5 \| 3 \| 4 \| 6 \| 'auto' \| number`

**色 (UniColors):** `'inherit' \| 'theme' \| 'posi' \| 'nega' \| 'warn' \| 'white' \| 'black' \| 'dark' \| Themecolor`

**レイヤー色:** `'layer.0' 〜 'layer.6'`

---

## atoms/

### Box
汎用コンテナ。全HTMLタグをジェネリクスで指定可。
```ts
<Box htmlTag="section" flexType="col" padding={2}>...</Box>
```

### Flex / FlexBr / FlexMargin / Column / Span / P
Box の省略バリアント。それぞれ flex-row / break付き / margin付き / flex-col / span / p。

### FAI (Font Awesome Icon)
```ts
<FAI icon={faUser} fontSize="3.paragraph" />
// ショートカット: FAI.User / FAI.Search / FAI.Check / FAI.Trash / FAI.Plus / FAI.Gear ...
```

### Img
```ts
<Img src="..." alt="..." showExpand />
```

### Card
- Variants: `Card` `Card.Border` `Card.Plain` `Card.Cloud` `Card.Shadow`
- `jsxElement` でラップ要素を変更可

### Grid
```ts
<Grid gridCols={3} gap={2}>...</Grid>
<Grid.Layout gridTemplateColumns="..." gridTemplateRows="..." gridChildTemplates={[...]} />
```

### Placeholder
```ts
<Placeholder backgroundColor="cloud" width={1} height={3} />
```

### Logo
- Sizes: `S \| R \| L \| 2L \| 3L` / Colors: `normal \| white`
- Sub: `Logo.Brands.MingooLogoH` `Logo.Brands.Google` `Logo.Brands.LINE` ...

### CacheRender
```ts
<CacheRender params={deps}>{children}</CacheRender>
```

---

## fn/

### Button / Label / Anchor

**Tones:** `plain \| link \| normal \| border \| prime \| sub \| clear \| fillToBorder \| borderToFill`  
**Colors:** `plain \| theme \| posi \| nega \| warn \| cloud \| trans \| white` (Anchor は `+layer`)  
**Sizes:** `plain \| xsmall \| small \| regular \| large`

```ts
// tone + color + size を個別指定
<Button tone="prime" color="theme" size="regular">送信</Button>

// 省略バリアント (Tone.Size の形式)
<Button.Prime.R>送信</Button.Prime.R>
<Button.Border.S>キャンセル</Button.Border.S>

// フォーム送信
<Button onFormSubmit={['formName', ({ body, isValid, serialLock }) => { ... }]} />
```

- `isLocked` `isActive` `isActiveStyles` でロック/アクティブ制御
- Label は `htmlFor` 追加 / Anchor は `href` `newTab` `sync` `download` 追加

---

### Input（全フォーム入力）

**共通props (CoreInput):**
```ts
name, form, componentId, required, enableFormSubmit, showInitValidation,
onValidate, onUpdateValue, onUpdateValidValue, onUserAction,
override: 'never' (default)
```

**onValidate シグネチャ:**
```ts
(value: T, eventType: 'init'|'update'|'update.remote'|'override'|'refresh', opt: Status)
  => Promise<{ ok: boolean; notice?: { type: 'valid'|'invalid'|'warn'; label: ReactElement }[] }>
```

**tone (BoxTone):** `'border' \| 'cloud' \| 'bottomBorder' \| 'plain'`

---

#### Input.TextField
```ts
<Input.TextField
  restrict="email"  // 'text'|'katakana'|'hankaku.katakana'|'number'|'digitNumber'|'tel'|'email'|'url'|'fileName'|'password'|'postal'|'creditCard'|'concealed'
  multiline autoHeight maxLength={200}
  clearButton leftIcon={<FAI.Search />}
/>
// バリアント
<Input.TextField.Email />  <Input.TextField.Tel />  <Input.TextField.Password />
<Input.TextField.Postal />  <Input.TextField.Money.JPY />
```

#### Input.Select
```ts
<Input.Select
  options={[{ value: 'a', label: <>A</> }]}
  pickerPosition={1}  // 1|2|3|4
  nativePicker
/>
```

#### Input.Autocomplete
```ts
<Input.Autocomplete
  options={[...]}
  multiSelect
  onDynamicSearchOptions={async (keyword) => [...]}
  onSelectorRender={({ option, isSelected, onAdd }) => <div />}
/>
```

#### Input.Drum
```ts
<Input.Drum options={[{ value: 1, label: <>1月</> }, null, ...]} isHorizontal />
```

#### Input.Radio / Input.Checkbox / Input.List
```ts
<Input.Radio options={[{ value: 'a', label: <>A</> }]} tone="border" />
// Variants: .Normal .Border .Cloud .Simple .Vivid
<Input.Checkbox options={[...]} />
```

#### Input.Checker
```ts
<Input.Checker label={<>同意する</>} value={true} />
```

#### Input.Segmented
```ts
<Input.Segmented options={[...]} />
// Variants: .Cloud .CloudTheme .CloudMono .Border .BorderVivid .Bottomline
```

#### Input.Slider
```ts
<Input.Slider min={0} max={100} step={1} color="theme" legends />
<Input.Slider.Range min={0} max={100} step={1} />
// Variants: .Small .Medium .Large / .Range.Small .Range.Medium .Range.Large
```

#### Input.Switch
```ts
<Input.Switch size="regular" color="theme" isApply />
// Variants: .S .R .L
```

#### Input.Time
```ts
<Input.Time.Date value="2024-01-01" min="2020-01-01" />
<Input.Time.Clock />  <Input.Time.Week />  <Input.Time.Month />  <Input.Time.Year />
<Input.Time.Locale.JP.WarekiDate />
<Input.Time.Periods.Date value={['2024-01-01', '2024-12-31']} />
```

#### Input.Filer
```ts
<Input.Filer accept="image" limit={5} isNameEditable />
// プログラム操作
Input.Filer.fn.openDialog({ accept: 'image', multiple: true, onChange: (files) => {} })
```

#### Input.Segmented / Input.Color / Input.Contenteditable / Input.DigitCharacters
```ts
<Input.Color />
<Input.Contenteditable />
<Input.DigitCharacters />
```

#### Input.CollectForm
フォームグループのラッパー。`form` 属性でフォーム名を揃える。

---

### Sheet（モーダル・ドロワー）

```ts
// 表示 (Wrapper をルートに配置必須)
Sheet.Wrapper()  // ルートに一度だけ配置

Sheet.open('bottomCenter', {
  content: <MyContent />,
  size: 'R',  // 'XS'|'S'|'R'|'L'|'2L'|'3L'|'MAX'
  sheetID: 'mySheet',
  backgroundEffect: true,
  closeAtAroundClick: true,
  closeAtEscapeKeyDown: true,
  closeAtSwipeDown: true,
})

Sheet.close('mySheet')
Sheet.closeAll()
Sheet.update('mySheet', { size: 'L' })
Sheet.image(params, src)  // 画像表示ショートカット

// Type: 'topLeft'|'topCenter'|'topRight'|'middleLeft'|'middleCenter'|'middleRight'
//       'bottomLeft'|'bottomCenter'|'bottomRight'
//       'drawer.left'|'drawer.right'|'drawer.bottom'|'custom'
```

---

### Snackbar（トースト通知）

```ts
Snackbar.Wrapper()  // ルートに配置

Snackbar.add({ children: <>保存しました</>, secondsToClose: 3, snackID: 'save' })
Snackbar.add({ customChildren: ({ close }) => <div onClick={close}>✕</div> })
Snackbar.remove('save')
Snackbar.removeALL()
```

---

### Tooltips

```ts
Tooltips.open({ event, content: <MyTip />, tipsID: 'tip1', nextToCursor: true })
Tooltips.close('tip1')
Tooltips.closeALL()
Tooltips.notice(<>エラー</>, { closeToSeconds: 5 })
Tooltips.Body  // ツールチップ内のコンテナ
```

---

### Table / DataGrid

**Table:** `Table.Normal` / `Table.Data` (ソート・フィルタ・選択・ドラッグ付き)

**DataGrid:**
```ts
<DataGrid
  header={[{ key: 'name', label: <>名前</>, sortable: 1, filterable: true }]}
  body={[{ name: { data: '田中' } }]}
  footer={{ name: { data: '合計' } }}
  tone="border"  // 'border'|'border.vertical'|'border.horizontal'|false
  onSelected={(rows) => {}}
  onSorted={(col, sort) => {}}
/>
// 付属コンポーネント
<DataGrid.SearchInput datagridID="id" />
<DataGrid.Paging datagridID="id" />
<DataGrid.RowCount datagridID="id" options={[10, 25, 50]} />
<DataGrid.Info datagridID="id" />
// メソッド
DataGrid.getBodyRows('id')
DataGrid.reset('id')
DataGrid.refreshBody('id')
```

---

### Loader

```ts
Loader.Wrapper()  // ルートに配置

<Loader.Theme.R />  // Color.Size の形式
// Colors: Theme / Posi / Nega / Warn / White / Cloud
// Sizes: S / R / L / XL / MAX

Loader.fn.corner.active()   // コーナーローダー表示
Loader.fn.corner.stop()
Loader.fn.mini.active('id')  // インラインローダー表示
Loader.fn.mini.stop('id')
Loader.fn.stopALL()
```

---

### RootViewController（アプリシェル）

```ts
<RootViewController.Base
  topNavigation={<RootViewController.TopNavigation>...</RootViewController.TopNavigation>}
  footerNavigation={<RootViewController.FooterNavigation>...</RootViewController.FooterNavigation>}
  sideNavigation={<RootViewController.SideNavigation>...</RootViewController.SideNavigation>}
/>
<RootViewController.Comps.Button path="/home" pathGroup={['/home', /^\/sub/]}>
  ホーム
</RootViewController.Comps.Button>

// 計測値
RootViewController.fn.viewHeight / viewWidth / contentHeight / contentWidth
RootViewController.fn.topNavHeight / footerNavHeight / safeAreaTop / safeAreaBottom
```

---

### PageViewController

```ts
<PageViewController viewIndex={0} views={[<PageA />, <PageB />]} />
```

---

### SwipeView

```ts
<SwipeView
  options={{ loop: true, autoSwipems: 3000, visibilitySurroundSlide: true }}
  onSlideCallback={(idx, eventType) => {}}
>
  {slides}
</SwipeView>
```

---

### TabBar

```ts
<TabBar
  tabIndex={0}
  tabs={[{ label: 'タブ1' }, { label: 'タブ2' }]}
  onTabChange={(idx) => {}}
/>
```

---

### Plate

```ts
<Plate size="R">...</Plate>
// Sizes: 'MIN'|'XS'|'S'|'R'|'L'|'XL'|'MAX'
```

---

### Effect

```ts
<Ripple>クリック要素</Ripple>
<Pudding>バウンス要素</Pudding>
<FadeIn animationTime={300} animationDelay={100}>...</FadeIn>
<FadeUp>...</FadeUp>
```

---

### Cropper

```ts
<Cropper
  aspectRatio="16:9"  // '1:1'|'16:9'|'9:16'|'4:3'|'3:4'|'3:1'|'1:2'|[w,h]
  onProcessFinished={(files) => {}}
/>
```

---

## mols/

### Accordion
```ts
<Accordion defaultOpen accordionID="acc1" slideAnimation="fast" onToggleEvent={(open) => {}}>
  コンテンツ
</Accordion>
Accordion.fn.open('acc1') / .close('acc1') / .toggle('acc1') / .isOpen('acc1')
```

### Literal（見出し・テキスト）
```ts
<Literal.Title>タイトル</Literal.Title>
<Literal.SubTitle />  <Literal.ThirdTitle />  <Literal.Paragraph />
<Literal.Description />  <Literal.Mini />  <Literal.Micro />
<Literal.NowrapSpan />
```

### List / ListItem / Row
```ts
// レイアウトヘルパー
<List.Center>...</List.Center>  <List.Left />  <List.Right />  <List.Separate />
<Row.Center />  <Row.Left />  <Row.Right />  <Row.Separate />
```

### LinkifyText
```ts
<LinkifyText text="URLを含むテキスト https://example.com" />
```

### MarkerPen
テキスト中のキーワードをハイライト表示。

---

## @utils/

### Config
```ts
Config.launch({ themeColor: 'comun', darkMode: 'light', roundness: 2 })
Config.get()          // 現在の設定取得
Config.update.themeColor('heart')
Config.update.darkMode('dark')
Config.update.roundness(3)
Config.get().screen.isBreakpoint()  // レスポンシブ判定
```

### pageRouter
```ts
pageRouter.push('/path')          // 遷移
pageRouter.push('/path', true)    // 新タブ
pageRouter.back()
pageRouter.open('https://...')    // 外部URL
pageRouter.pushSync('/path')      // 同期遷移
pageRouter.pushAsync('/path')     // 非同期遷移
```

### useRemote（コンポーネント間通信）
```ts
// 送信
useRemote.bridge('channelKey', { data: '...' })
// 受信 (useEffect内など)
const msg = useRemote.catch<MyType>('channelKey')
```

### useRouterEffect
```ts
useRouterEffect({ beforeCB: () => {}, afterCB: () => {}, afterFirstCB: () => {} })
```

### useUpdateEffect
マウント時をスキップする `useEffect`。

### dragEffect
```ts
// ドラッグ開始
dragEffect.Start('itemType', { startEvent, dragElement }, ({ idx, end }) => {})
// ドロップエリア
<dragEffect.DropArea dragInfo={{ type: 'itemType', marker: 'bottom' }}>...</dragEffect.DropArea>
<dragEffect.DropSign dragInfo={{ type: 'itemType' }} />
dragEffect.AutoScroll(event)
```

### ThemeColors / ColorRecords
```ts
ThemeColors.comun.hex          // '#...'
ThemeColors.heart.alfa(0.5)    // 'rgba(..., 0.5)'
ColorRecords                   // { name: Themecolor, hex: string, isBrand: boolean }[]
```

### LaunchReactApp
```ts
<LaunchReactApp inlineCSS isRootPage>
  <App />
</LaunchReactApp>
```