haru-cat 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,46 @@
+# Changelog
+
+This file records notable changes to Haru Cat. It is maintained manually and
+organized by release.
+
+## 0.0.3 — 2026-07-26
+
+### Added
+
+- Add a `visible` prop for controlling whether Haru-kun is shown.
+- Add a `fadeDuration` prop for customizing visibility transitions.
+- Add controls to the development playground for checking visibility and fade
+  duration.
+
+### Changed
+
+- Respect the user's reduced-motion preference by disabling visibility fades.
+- Mark the package as a Client Component for React Server Components
+  environments.
+- Fall back safely when the environment does not provide `matchMedia`.
+
+## 0.0.2 — 2026-07-26
+
+### Added
+
+- Add `offsetX` and `offsetY` props for independent horizontal and vertical
+  spacing.
+- Add a `responsive` prop for controlling automatic sizing on smaller screens.
+- Add controls to the development playground for checking size, offsets, and
+  responsive behavior.
+
+### Changed
+
+- Enable responsive sizing by default, including for existing usage. On smaller
+  screens, the image is limited to 30% of the viewport's shorter side. Set
+  `responsive={false}` to preserve the exact `size`.
+- Account for viewport safe-area insets when positioning Haru-kun.
+
+## 0.0.1 — 2026-07-23
+
+### Added
+
+- Publish the initial Haru Cat npm package.
+- Add the static `HaruCat` React component and Haru-kun artwork.
+- Support bottom placement, size, offset, z-index, and custom class names.
+- Include TypeScript types and ESM and CommonJS builds.

package/README.ja.md

@@ -2,8 +2,8 @@
 
 Haru Catは、小さなオリジナルキャラクター「ハルくん」をWebサイトの下部に表示するためのReactコンポーネントです。
 
-最初のリリースでは静止画像を表示します。
-アニメーションや新しい振る舞いは、今後のバージョンで追加する予定です。
+現在のHaru Catは静止画像を表示します。
+アニメーションはまだ含まれていません。
 
 [English](./README.md)
 
@@ -38,18 +38,55 @@ export default function App() {
 <HaruCat position="bottom-center" />
 ```
 
+横方向と縦方向で異なる余白を指定する場合は、`offsetX`と`offsetY`を使用します。
+
+```tsx
+<HaruCat offset={16} offsetX={32} offsetY={24} />
+```
+
+`offsetX`と`offsetY`は、それぞれの方向で`offset`より優先されます。
+`bottom-center`では、横方向の余白は適用されません。
+
+`visible`を使用すると、ハルくんの表示と非表示を切り替えられます。
+`visible`の値を切り替えると、初期設定では300ミリ秒かけてフェードイン・フェードアウトします。
+
+```tsx
+<HaruCat visible={isVisible} />
+```
+
+フェード時間を変更する場合は、`fadeDuration`へミリ秒単位で指定します。
+`0`を指定すると、フェードせず即座に切り替わります。
+
+```tsx
+<HaruCat visible={isVisible} fadeDuration={500} />
+```
+
+フェードは`visible`の値が変更されたときに適用されます。
+`<HaruCat />`は初回レンダー時から表示されるため、ページ読み込み時のフェードインは行いません。
+
 ## Props
 
 | Prop | 型 | 初期値 | 説明 |
 | --- | --- | --- | --- |
 | `position` | `'bottom-left' \| 'bottom-center' \| 'bottom-right'` | `'bottom-right'` | 画面下部での表示位置です。 |
-| `size` | `number` | `120` | 画像の幅と高さをピクセル単位で指定します。 |
+| `size` | `number` | `120` | 画像の基準となる幅と高さをピクセル単位で指定します。 |
 | `offset` | `number` | `16` | 画面下端、および左右配置の場合は画面の端からの距離をピクセル単位で指定します。 |
+| `offsetX` | `number` | `undefined` | 左端または右端からの距離です。横方向では`offset`より優先されます。 |
+| `offsetY` | `number` | `undefined` | 画面下端からの距離です。縦方向では`offset`より優先されます。 |
+| `responsive` | `boolean` | `true` | 小さい画面で、画像の大きさを画面の短い辺の30%以下に調整します。 |
+| `visible` | `boolean` | `true` | ハルくんを表示するかどうかを指定します。 |
+| `fadeDuration` | `number` | `300` | フェードイン・フェードアウトの時間をミリ秒単位で指定します。`0`未満の値は`0`として扱われます。 |
 | `zIndex` | `number` | `9999` | コンポーネントのCSS `z-index`です。 |
 | `className` | `string` | `undefined` | 外側の要素に設定するクラス名です。 |
 
 コンポーネントには`position: fixed`と`pointer-events: none`が設定されています。
 そのため、ハルくんは画面下部に表示され続け、Webサイト上のボタンやリンク操作を妨げません。
+利用するWebサイトで`viewport-fit=cover`が設定されている場合、Haru Catはブラウザが提供するセーフエリアの余白を自動的に画面端からの余白へ加算します。
+
+小さい画面でも`size`を正確なピクセル値として使用したい場合は、`responsive={false}`を指定してください。
+
+Haru Catは、利用者の`prefers-reduced-motion`設定に対応しています。
+動きを減らす設定が有効な場合、表示と非表示はフェードせず即座に切り替わります。
 
 ## TypeScript
 
@@ -74,6 +111,7 @@ npm run build
 npm pack --dry-run
 ```
 
+バージョンごとの変更内容は[CHANGELOG](./CHANGELOG.md)に記録しています。
 プロジェクトの方針と今後の計画は、[Design Notes](https://github.com/Colorful12/haru-cat/blob/main/docs/design-notes.md)にまとめています。
 
 ## 制作者

package/README.md

@@ -3,8 +3,7 @@
 Haru Cat is a React component for placing Haru-kun, a small original cat
 character, at the bottom of your website.
 
-This first release displays a static image. Animations and additional behaviors
-are planned for future versions.
+Haru Cat currently displays a static image. Animation is not included yet.
 
 [日本語](./README.ja.md)
 
@@ -39,18 +38,58 @@ You can also place Haru-kun at the bottom-left or bottom-center of the viewport.
 <HaruCat position="bottom-center" />
 ```
 
+Use `offsetX` and `offsetY` when the horizontal and vertical spacing should be
+different.
+
+```tsx
+<HaruCat offset={16} offsetX={32} offsetY={24} />
+```
+
+`offsetX` and `offsetY` override `offset` on their respective axes. The
+horizontal offset does not apply to `bottom-center`.
+
+Use `visible` to show or hide Haru-kun. Changes fade over 300 milliseconds by
+default.
+
+```tsx
+<HaruCat visible={isVisible} />
+```
+
+Customize the fade duration in milliseconds with `fadeDuration`. Set it to `0`
+for an immediate change.
+
+```tsx
+<HaruCat visible={isVisible} fadeDuration={500} />
+```
+
+The fade applies when `visible` changes. `<HaruCat />` is shown immediately on
+its initial render.
+
 ## Props
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `position` | `'bottom-left' \| 'bottom-center' \| 'bottom-right'` | `'bottom-right'` | Position along the bottom of the viewport. |
-| `size` | `number` | `120` | Width and height of the image in pixels. |
+| `size` | `number` | `120` | Preferred width and height of the image in pixels. |
 | `offset` | `number` | `16` | Distance from the bottom and, when applicable, the left or right edge in pixels. |
+| `offsetX` | `number` | `undefined` | Left or right distance in pixels. Overrides `offset` on the horizontal axis. |
+| `offsetY` | `number` | `undefined` | Bottom distance in pixels. Overrides `offset` on the vertical axis. |
+| `responsive` | `boolean` | `true` | Limits the image to 30% of the viewport's shorter side on smaller screens. |
+| `visible` | `boolean` | `true` | Whether Haru-kun is shown. |
+| `fadeDuration` | `number` | `300` | Fade-in and fade-out duration in milliseconds. Values below `0` are treated as `0`. |
 | `zIndex` | `number` | `9999` | CSS `z-index` of the component. |
 | `className` | `string` | `undefined` | Class name applied to the wrapper element. |
 
 The component uses `position: fixed` and `pointer-events: none`, so Haru-kun
 stays at the bottom of the viewport without blocking buttons or links.
+When the host website uses `viewport-fit=cover`, Haru Cat automatically adds
+the safe-area insets provided by the browser to the configured edge offsets.
+
+Set `responsive={false}` when `size` must remain an exact pixel size on small
+screens.
+
+Haru Cat respects the user's `prefers-reduced-motion` setting. When reduced
+motion is requested, visibility changes happen immediately instead of fading.
 
 ## TypeScript
 
@@ -75,7 +114,8 @@ npm run build
 npm pack --dry-run
 ```
 
-See the [design notes](https://github.com/Colorful12/haru-cat/blob/main/docs/design-notes.md)
+See the [changelog](./CHANGELOG.md) for version history and the
+[design notes](https://github.com/Colorful12/haru-cat/blob/main/docs/design-notes.md)
 for the project's principles and planned direction.
 
 ## Creators

package/dist/HaruCat.d.ts

@@ -3,7 +3,12 @@ export type HaruCatProps = {
     position?: HaruCatPosition;
     size?: number;
     offset?: number;
+    offsetX?: number;
+    offsetY?: number;
+    responsive?: boolean;
+    visible?: boolean;
+    fadeDuration?: number;
     zIndex?: number;
     className?: string;
 };
-export declare function HaruCat({ position, size, offset, zIndex, className, }: HaruCatProps): import("react").JSX.Element;
+export declare function HaruCat({ position, size, offset, offsetX, offsetY, responsive, visible, fadeDuration, zIndex, className, }: HaruCatProps): import("react").JSX.Element;