@musecat/uikit 0.1.2 → 0.2.0

package/.agents/references/Components/Box.md

@@ -40,7 +40,7 @@ interface BoxFooterProps extends ThemeSystemProps, BorderProps, RadiusProps {
 ## Example Code
 
 ```tsx
-import Box from "@/packages/Components/Box/Box";
+import { Box } from "@musecat/uikit";
 
 export default function Example() {
   return (

package/.agents/references/Components/Button.md

@@ -33,7 +33,7 @@ interface ButtonProps extends ThemeSystemProps, RadiusProps, BorderProps {
 ## Example Code
 
 ```tsx
-import Button from "@/packages/Components/Button/Button";
+import { Button } from "@musecat/uikit";
 
 export default function Example() {
   return (

package/.agents/references/Components/Card.md

@@ -45,7 +45,7 @@ type CardProps = CardDefaultProps | CardFoldableProps;
 ## Example Code
 
 ```tsx
-import Card from "@/packages/Components/Card/Card";
+import { Card } from "@musecat/uikit";
 
 export default function Example() {
   return (

package/.agents/references/Components/Checkbox.md

@@ -33,7 +33,7 @@ interface CheckboxProps
 ## Example Code
 
 ```tsx
-import Checkbox from "@/packages/Components/Checkbox/Checkbox";
+import { Checkbox } from "@musecat/uikit";
 
 export default function Example() {
   return (

package/.agents/references/Components/CodeBox.md

@@ -22,7 +22,7 @@ interface CodeBoxProps extends ThemeSystemProps, RadiusProps, BorderProps {
 ## Example Code
 
 ```tsx
-import CodeBox from "@/packages/Components/CodeBox/CodeBox";
+import { CodeBox } from "@musecat/uikit";
 
 export default function Example() {
   const sampleCode = `const hello = 'world';\nconsole.log(hello);`;

package/.agents/references/Components/ContextMenu.md

@@ -40,7 +40,7 @@ interface ContextMenuProps {
 ## Example Code
 
 ```tsx
-import ContextMenu from "@/packages/Components/ContextMenu/ContextMenu";
+import { ContextMenu } from "@musecat/uikit";
 import { useRef, useState } from "react";
 
 export default function Example() {

package/.agents/references/Components/ContributionGraph.md

@@ -39,7 +39,7 @@ export interface ContributionGraphProps
 ## 4. Example Code
 
 ```tsx
-import ContributionGraph from "@/packages/Components/ContributionGraph/ContributionGraph";
+import { ContributionGraph } from "@musecat/uikit";
 
 export default function Example() {
   const data = [

package/.agents/references/Components/DatePicker.md

@@ -63,7 +63,7 @@ export interface DatePickerProps {
 ## 4. Example Code
 
 ```tsx
-import DatePicker from "@/packages/Components/DatePicker/DatePicker";
+import { DatePicker } from "@musecat/uikit";
 
 export default function Example() {
   return (

package/.agents/references/Components/Divider.md

@@ -32,7 +32,7 @@ export interface DividerProps {
 ## 4. Example Code
 
 ```tsx
-import Divider from "@/packages/Components/Divider/Divider";
+import { Divider } from "@musecat/uikit";
 
 export default function Example() {
   return (

package/.agents/references/Components/Header.md

@@ -27,9 +27,9 @@ export interface HeaderProps {
 ## 4. Example Code
 
 ```tsx
-import Header from "@/packages/Components/Header/Header";
-import Icon from "@/packages/Components/Icon/Icon";
-import Text from "@/packages/Components/Text/Text";
+import { Header } from "@musecat/uikit";
+import { Icon } from "@musecat/uikit";
+import { Text } from "@musecat/uikit";
 
 export default function Example() {
   return (

package/.agents/references/Components/Icon.md

@@ -54,7 +54,7 @@ export interface IconProps extends ThemeSystemProps, RadiusProps, BorderProps {
 ## 4. Example Code
 
 ```tsx
-import Icon from "@/packages/Components/Icon/Icon";
+import { Icon } from "@musecat/uikit";
 
 export default function Example() {
   return (

package/.agents/references/Components/Input.md

@@ -36,7 +36,7 @@ _(LabelSharedProps includes `title`, `required`, `hint`, ThemeSystemProps, etc.)
 ## 4. Example Code
 
 ```tsx
-import Input from "@/packages/Components/Input/Input";
+import { Input } from "@musecat/uikit";
 
 export default function Example() {
   return (

package/.agents/references/Components/Label.md

@@ -55,8 +55,8 @@ export type LabelSharedProps = Omit<
 ## 4. Example Code
 
 ```tsx
-import Label from "@/packages/Components/Label/Label";
-import Checkbox from "@/packages/Components/Checkbox/Checkbox"; // virtual import
+import { Label } from "@musecat/uikit";
+import { Checkbox } from "@musecat/uikit"; // virtual import
 
 export default function Example() {
   return (

package/.agents/references/Components/Layout.md

@@ -63,8 +63,8 @@ export interface DocsLayoutProps {
 ## Example Code
 
 ```tsx
-import Layout from "@/packages/Components/Layout/Layout";
-import DocsLayout from "@/packages/Components/Layout/Layout.docs";
+import { Layout } from "@musecat/uikit";
+import { DocsLayout } from "@musecat/uikit";
 
 // Basic layout and section split
 export function MyPage() {

package/.agents/references/Components/Maps.md

@@ -38,7 +38,7 @@ export interface MapOSMProps {
 ## Example Code
 
 ```tsx
-import MapOSM from "@/packages/Components/Maps/OSM/MapOSM";
+import { MapOSM } from "@musecat/uikit";
 import { useState } from "react";
 
 export function LocationPicker() {

package/.agents/references/Components/Nav.md

@@ -42,7 +42,7 @@ export interface NavProps extends RadiusProps {
 ## Example Code
 
 ```tsx
-import Nav from "@/packages/Components/Nav/Nav";
+import { Nav } from "@musecat/uikit";
 import { useState } from "react";
 
 export function TabNavigation() {

package/.agents/references/Components/Pagination.md

@@ -40,7 +40,7 @@ export interface PaginationProps extends ThemeSystemProps, BorderProps {
 ## Example Code
 
 ```tsx
-import Pagination from "@/packages/Components/Pagination/Pagination";
+import { Pagination } from "@musecat/uikit";
 import { useState } from "react";
 
 export function DataList() {

package/.agents/references/Components/Pill.md

@@ -49,7 +49,7 @@ export interface PillProps extends ThemeSystemProps, RadiusProps, BorderProps {
 ## Example Code
 
 ```tsx
-import Pill from "@/packages/Components/Pill/Pill";
+import { Pill } from "@musecat/uikit";
 
 export function TagList() {
   return (

package/.agents/references/Components/Profile.md

@@ -54,7 +54,7 @@ export interface ProfileProps {
 ## Example Code
 
 ```tsx
-import Profile from "@/packages/Components/Profile/Profile";
+import { Profile } from "@musecat/uikit";
 
 export function UserHeader() {
   return (

package/.agents/references/Components/Progress.md

@@ -14,7 +14,7 @@ A linear progress bar component that visualizes task progress as a percentage. I
 
 ```tsx
 // Progress.types.ts
-import { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import { RadiusProps } from "@musecat/uikit";
 import type {
   ThemeBackgroundPaint,
   ThemePaint,
@@ -38,7 +38,7 @@ export interface ProgressProps extends RadiusProps {
 ## Example Code
 
 ```tsx
-import Progress from "@/packages/Components/Progress/Progress";
+import { Progress } from "@musecat/uikit";
 
 export function FileUploadStatus({
   progressPercentage,

package/.agents/references/Components/Radio.md

@@ -13,7 +13,7 @@ The `Radio` component provides a radio button UI that lets the user select a sin
 ## Type Signatures
 
 ```typescript
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { RadiusProps } from "@musecat/uikit";
 import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
 import type {
   BorderProps,
@@ -39,7 +39,7 @@ export interface RadioProps
 ## Example Code
 
 ```tsx
-import Radio from "@/packages/Components/Radio/Radio";
+import { Radio } from "@musecat/uikit";
 import { useState } from "react";
 
 export default function RadioExample() {

package/.agents/references/Components/Select.md

@@ -55,7 +55,7 @@ export interface SelectProps<
 ## Example Code
 
 ```tsx
-import Select from "@/packages/Components/Select/Select";
+import { Select } from "@musecat/uikit";
 import { useState } from "react";
 
 export default function SelectExample() {

package/.agents/references/Components/Skeleton.md

@@ -29,7 +29,7 @@ export interface SkeletonProps {
 ## Example Code
 
 ```tsx
-import Skeleton from "@/packages/Components/Skeleton/Skeleton";
+import { Skeleton } from "@musecat/uikit";
 
 export default function SkeletonExample() {
   return (

package/.agents/references/Components/Spinner.md

@@ -37,7 +37,7 @@ export interface SpinnerProps {
 ## Example Code
 
 ```tsx
-import Spinner from "@/packages/Components/Spinner/Spinner";
+import { Spinner } from "@musecat/uikit";
 
 export default function SpinnerExample() {
   return (

package/.agents/references/Components/Text.md

@@ -51,7 +51,7 @@ export interface TextProps {
 ## Example Code
 
 ```tsx
-import Text from "@/packages/Components/Text/Text";
+import { Text } from "@musecat/uikit";
 
 export default function TextExample() {
   return (

package/.agents/references/Components/TimePicker.md

@@ -41,7 +41,7 @@ export interface TimePickerProps {
 ## Example Code
 
 ```tsx
-import TimePicker from "@/packages/Components/TimePicker/TimePicker";
+import { TimePicker } from "@musecat/uikit";
 import { useState } from "react";
 
 export default function TimePickerExample() {

package/.agents/references/Components/Timeline.md

@@ -41,8 +41,8 @@ export interface TimelineProps {
 ## Example Code
 
 ```tsx
-import Timeline from "@/packages/Components/Timeline/Timeline";
-import Text from "@/packages/Components/Text/Text";
+import { Timeline } from "@musecat/uikit";
+import { Text } from "@musecat/uikit";
 
 export default function TimelineExample() {
   const events = [

package/.agents/references/Frameworks/DNDView.md

@@ -46,7 +46,7 @@ export interface DNDViewProps<T> extends ViewProps {
 ## Example Code
 
 ```tsx
-import View from "@/packages/Frameworks/View";
+import { View } from "@musecat/uikit";
 import { useState } from "react";
 
 function SortableList() {

package/.agents/references/Frameworks/Dialog.md

@@ -63,8 +63,8 @@ dialog.popover = (anchor: HTMLElement, props: Omit<DialogProps, "mode">) =>
 ## Example Code
 
 ```tsx
-import Dialog, { dialog } from "@/packages/Frameworks/Dialog/Dialog";
-import Pressable from "@/packages/Frameworks/Pressable";
+import { Dialog, dialog } from "@musecat/uikit";
+import { Pressable } from "@musecat/uikit";
 import { useState } from "react";
 
 function Example() {

package/.agents/references/Frameworks/EdgeEffect.md

@@ -23,8 +23,8 @@ export interface EdgeEffectProps extends Omit<ViewProps, "children"> {
 ## Example Code
 
 ```tsx
-import EdgeEffect from "@/packages/Frameworks/EdgeEffect";
-import View from "@/packages/Frameworks/View";
+import { EdgeEffect } from "@musecat/uikit";
+import { View } from "@musecat/uikit";
 
 function ScrollContainer() {
   return (

package/.agents/references/Frameworks/HScrollView.md

@@ -47,8 +47,8 @@ export interface HScrollViewProps extends Omit<
 ## Example Code
 
 ```tsx
-import HScrollView from "@/packages/Frameworks/View/HScrollView/HScrollView";
-import View from "@/packages/Frameworks/View";
+import { HScrollView } from "@musecat/uikit";
+import { View } from "@musecat/uikit";
 
 function HorizontalList() {
   return (

package/.agents/references/Frameworks/ImageView.md

@@ -43,7 +43,7 @@ export interface ImageProps extends RadiusProps {
 ## Example Code
 
 ```tsx
-import View from "@/packages/Frameworks/View";
+import { View } from "@musecat/uikit";
 
 function PhotoGallery() {
   const images = [

package/.agents/references/Frameworks/Motion.md

@@ -37,7 +37,7 @@ export const motionPresets = {
 
 ```tsx
 import { motion } from "motion/react";
-import { motionPresets } from "@/packages/Frameworks/Motion";
+import { motionPresets } from "@musecat/uikit";
 
 function AnimatedModal({ isOpen, children }) {
   return (

package/.agents/references/Frameworks/Pressable.md

@@ -44,7 +44,7 @@ export interface PressableProps
 ## Example Code
 
 ```tsx
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import { Pressable } from "@musecat/uikit";
 
 function Example() {
   return (

package/.agents/references/Frameworks/Squircle.md

@@ -33,7 +33,7 @@ export interface SquircleProps extends Omit<
 ## Example Code
 
 ```tsx
-import Squircle from "@/packages/Frameworks/Squircle";
+import { Squircle } from "@musecat/uikit";
 
 function Card() {
   return (

package/.agents/references/Frameworks/Theme.md

@@ -51,7 +51,7 @@ import {
   resolveThemeClasses,
   Border,
   Shadow,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "@musecat/uikit";
 import clsx from "clsx";
 
 function CustomBox(props: ThemeSystemProps) {

package/.agents/references/Frameworks/Toaster.md

@@ -34,7 +34,7 @@ export interface ToasterBootstrapProps extends ToasterProps {
 
 ```tsx
 // 1. Render at the top level (App component, etc.)
-import ToasterBootstrap from "@/packages/Frameworks/Toaster/Toaster.boot";
+import { ToasterBootstrap } from "@musecat/uikit";
 
 export default function App() {
   return (
@@ -46,7 +46,7 @@ export default function App() {
 }
 
 // 2. Show toast
-import { toast } from "@/packages/Frameworks/Toaster/Toaster.boot";
+import { toast } from "@musecat/uikit";
 
 function MyComponents() {
   const handleSuccess = () => {

package/.agents/references/Frameworks/View.md

@@ -57,7 +57,7 @@ export interface ViewProps
 ## Example Code
 
 ```tsx
-import View from "@/packages/Frameworks/View/View";
+import { View } from "@musecat/uikit";
 
 function Card() {
   return (

package/.agents/references/Frameworks/_shared.md

@@ -51,9 +51,9 @@ export function useScrollLock(locked?: boolean): { lockScroll: () => void, openS
 ## Example Code
 
 ```tsx
-import { Size } from "@/packages/Frameworks/_shared/sizing";
-import { useScrollLock } from "@/packages/Frameworks/_shared/bodyScrollLock";
-import { useControllableState } from "@/packages/Frameworks/_shared/useControllableState";
+import { Size } from "@musecat/uikit";
+import { useScrollLock } from "@musecat/uikit";
+import { useControllableState } from "@musecat/uikit";
 
 function MyComponent({ value, defaultValue, width }) {
   // Scroll lock

package/AGENTS.md

@@ -0,0 +1,54 @@
+You are a concise coding assistant.
+
+## Stack
+
+- Primary stack: Next.js 16 + TypeScript.
+
+## Documentation References
+
+- Before using or modifying any component, framework, or style, you MUST read the corresponding documentation in `.agents/references/`.
+- **Documentation MUST Be Updated Immediately:** Every time you add, modify, or remove a component, framework, style, or any exported API/type, you MUST update the corresponding `.agents/references/` doc in the **same batch of tool calls** — not later, not after tests, not when asked. You must check what changed and update refs before moving to the next task.
+- If references have drifted from the actual code due to manual changes, analyze the source code and git history to align them.
+- **README Maintenance:** If you add, remove, or modify external package dependencies, you MUST update the Acknowledgements section in `README.md`.
+- **README Examples:** If the usage logic or APIs of core layout components (`View`, `Pressable`, `ImageView`) change, you MUST update the example code block in `README.md` to reflect those changes.
+
+## Test Failure Resolution
+
+When a test fails, do not blindly patch it to turn green. Reason about intent:
+1. Understand the component's design contract — what it should do vs. what it actually does.
+2. If the test correctly captures the intended behavior and the code violates it, fix the code.
+3. If the code correctly implements the intended behavior and the test reflects outdated assumptions, fix the test.
+4. If neither is clearly right, treat the component's source as the source of truth and align the test to match, unless you have explicit user instruction to change the behavior.
+
+## Design Token Enforcement
+
+- Theme design tokens (Radius, Color, Spacing, etc.) MUST be used at all times. Hardcoding raw pixel values, inline colors, or any literal style values instead of using the token system is strictly prohibited.
+
+## Theme & Token System Guidelines
+
+1. **Radius Scale Usage**
+   - Use standard tokens: `None`, `Light`, `Regular`, `Bold`, `ExtraBold`, `Heavy`, `Circle`.
+   - Explicit `cornerRadius` or directional radius arrays are supported.
+   - Centralized `RADIUS_TOKEN` mapping via `RadiusValue()` must be used.
+
+2. **Color & Paint Tokens**
+   - Palette colors must use the JSON expansion/SCSS mapping (e.g. `Red1TP3`, `BaseLight3`).
+   - Background props support state-specific mappings: `[idle, hover, active]`.
+   - Border props support paint tokens, width-only fallback (`Base1TP1`), and directional width arrays.
+   - Use `UISecondary` / `ReversedUISecondary` presets for default interactive element states (e.g., checked, selected).
+
+3. **Core Component Selection**
+   - Do not use raw HTML elements (`div`, `button`, `a`, `Link`) when custom layout blocks are available. `View` and `Pressable` are foundational primitives replacing these elements.
+   - Use `View` for structural layout. It dynamically resolves theme props, handles disabling/readonly state forwarding, and automatically applies `Squircle` clips when `radius` is present.
+   - Use `Pressable` for interactive elements. It renders polymorphic wrappers (button, a, Link, label) with proper radius resolution.
+   - **Layout & Sizing Defaults:** `View` and `Pressable` inherently use `display: flex` and support layout props like `gap`, `width`, and `height`.
+     - Numeric values for sizing/spacing props are automatically converted to `rem` values.
+     - For responsive or bounded sizing, use `min`, `max`, and `clamp` functions on `width` and `height` props.
+     - Avoid redundant inline styles or unnecessary utility classes by leveraging these built-in properties.
+- Package is published as `@musecat/uikit` on GitHub Packages. The root `index.ts` is the single entry point.
+   - **No internal barrels:** Directories must NOT contain `index.ts` re-exports. Always import from the definitive source file. The single exception is the root `index.ts` (npm package entry).
+   - **Type Referencing & Image:** Both components support various other props. You MUST refer to the TypeScript definitions of `View` and `Pressable` to check available attributes. For rendering images, use the custom `ImageView` component instead of the native `img` element.
+
+4. **Squircle & Motion Integration**
+   - `Squircle` renders SVG clip paths dynamically using `figma-squircle`.
+   - Avoid passing raw animate objects containing width/height directly to Framer Motion on Squircle elements to prevent base-style clip-path reset bugs. Use imperative controls (`useAnimationControls`) or animate wrapping wrappers instead.

package/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/README.md

@@ -50,6 +50,8 @@ This package includes `.agents/references/` directory with detailed documentatio
 - [es-hangul](https://es-hangul.toss.im/)
 - [MapLibre GL JS](https://maplibre.org/)
 
+Built with [tsup](https://tsup.egoist.dev/) and [TypeScript](https://www.typescriptlang.org/).
+
 ## License
 
 [MIT License](./LICENSE) © Musecat Team.

package/global.d.ts

@@ -0,0 +1,6 @@
+declare module "*.module.scss" {
+	const classes: { readonly [key: string]: string };
+	export default classes;
+}
+
+declare module "*.css";

package/i18n/messages/en/uikit.json

@@ -0,0 +1,50 @@
+{
+  "UIKit": {
+    "presets": {
+      "alert": {
+        "title": "Heads up.",
+        "caption": "Review the information and continue.",
+        "confirm": "Confirm"
+      },
+      "confirm": {
+        "title": "Confirmation required.",
+        "caption": "Review the details and choose how to proceed.",
+        "confirm": "Continue",
+        "cancel": "Cancel"
+      },
+      "error": {
+        "title": "Something went wrong.",
+        "caption": "Please try again in a moment.",
+        "confirm": "Confirm"
+      },
+      "success": {
+        "title": "Completed.",
+        "caption": "Your request was completed successfully.",
+        "confirm": "Confirm"
+      }
+    },
+    "actions": {
+      "cancel": "Cancel",
+      "close": "Close",
+      "confirm": "Confirm",
+      "submit": "Submit",
+      "submitting": "Processing...",
+      "required": "Required"
+    },
+    "ui": {
+      "select": "Select",
+      "noResults": "No results",
+      "imageGallery": "Image gallery",
+      "dateSelect": "Select date",
+      "dateRangeSelect": "Select date range",
+      "pagination": "Pagination",
+      "previous": "Previous",
+      "next": "Next",
+      "goToPage": "Go to page",
+      "currentPage": "Current page {value}",
+      "goToPageItem": "Go to page {value}",
+      "less": "Less",
+      "more": "More"
+    }
+  }
+}

package/i18n/messages/jp/uikit.json

@@ -0,0 +1,50 @@
+{
+  "UIKit": {
+    "presets": {
+      "alert": {
+        "title": "ご案内します。",
+        "caption": "内容を確認してから続行してください。",
+        "confirm": "確認"
+      },
+      "confirm": {
+        "title": "確認が必要です。",
+        "caption": "内容を確認して、進行するかどうか選択してください。",
+        "confirm": "続ける",
+        "cancel": "キャンセル"
+      },
+      "error": {
+        "title": "問題が発生しました。",
+        "caption": "しばらくしてから再度お試しください。",
+        "confirm": "確認"
+      },
+      "success": {
+        "title": "完了しました。",
+        "caption": "リクエストは正常に処理されました。",
+        "confirm": "確認"
+      }
+    },
+    "actions": {
+      "cancel": "キャンセル",
+      "close": "閉じる",
+      "confirm": "確認",
+      "submit": "送信",
+      "submitting": "処理中...",
+      "required": "必須"
+    },
+    "ui": {
+      "select": "選択",
+      "noResults": "結果なし",
+      "imageGallery": "画像ギャラリー",
+      "dateSelect": "日付を選択",
+      "dateRangeSelect": "期間を選択",
+      "pagination": "ページ移動",
+      "previous": "前へ",
+      "next": "次へ",
+      "goToPage": "ページへ移動",
+      "currentPage": "現在のページ {value}",
+      "goToPageItem": "{value}ページへ移動",
+      "less": "少ない",
+      "more": "多い"
+    }
+  }
+}