@musecat/uikit 0.1.1

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Musecat Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,51 @@
+# @musecat/uikit
+
+A Next.js 16 + React 19 + TypeScript UI Design component library.
+
+## Installation
+
+```bash
+npm install @musecat/uikit
+```
+
+## Usage
+
+Built with `View` and `Pressable` layout primitives.
+
+```tsx
+import { View, Pressable, ImageView } from "@musecat/uikit";
+
+export default function Example() {
+  return (
+    <View column gap={16} padding={24} radius="Regular" background="BaseLight2">
+      <ImageView src="/avatar.png" radius="Circle" width={48} height={48} />
+
+      <Pressable
+        radius="Bold"
+        background={["BaseFull", "BaseFull", "Base1TP2"]}
+        padding={12}
+        align="center"
+        justify="center"
+      >
+        <View typography="Button1" color="ReversedBaseFull">
+          Action
+        </View>
+      </Pressable>
+    </View>
+  );
+}
+```
+
+## Acknowledgements
+
+- [Motion (Framer Motion)](https://motion.dev/)
+- [dnd-kit](https://dndkit.com/)
+- [Embla Carousel](https://www.embla-carousel.com/)
+- [figma-squircle](https://github.com/phamfoo/figma-squircle)
+- [Sonner](https://sonner.emilkowal.ski/)
+- [es-hangul](https://es-hangul.toss.im/)
+- [MapLibre GL JS](https://maplibre.org/)
+
+## License
+
+[MIT License](./LICENSE) © Musecat Team.

package/index.ts

@@ -0,0 +1,78 @@
+// Frameworks
+export { default as View } from "@/packages/Frameworks/View/View";
+export { default as Pressable } from "@/packages/Frameworks/Pressable/Pressable";
+export { default as ImageView } from "@/packages/Frameworks/View/ImageView/Image";
+export { default as HScrollView } from "@/packages/Frameworks/View/HScrollView/HScrollView";
+export { default as DNDView } from "@/packages/Frameworks/View/DNDView/DNDView";
+export { default as Dialog, useDialog } from "@/packages/Frameworks/Dialog/Dialog";
+export { dialog, DialogStore } from "@/packages/Frameworks/Dialog/Dialog.store";
+export type { DialogInstance } from "@/packages/Frameworks/Dialog/Dialog.store";
+export { default as DialogBootstrap } from "@/packages/Frameworks/Dialog/Dialog.boot";
+export { default as ToasterBootstrap, toast } from "@/packages/Frameworks/Toaster/Toaster.boot";
+export type { ToasterBootstrapProps } from "@/packages/Frameworks/Toaster/Toaster.types";
+export { default as Squircle } from "@/packages/Frameworks/Squircle/Squircle";
+export { default as EdgeEffect } from "@/packages/Frameworks/EdgeEffect/EdgeEffect";
+export { motionTransitions, motionPresets } from "@/packages/Frameworks/Motion/Motion.presets";
+export { default as StopParentInteraction } from "@/packages/Frameworks/_shared/StopParentInteraction";
+export { useScrollLock } from "@/packages/Frameworks/_shared/bodyScrollLock";
+export { useControllableState } from "@/packages/Frameworks/_shared/useControllableState";
+export { Size, SizePX } from "@/packages/Frameworks/_shared/sizing";
+export { normalizeUIKitImageSrc, normalizeBrandIconClass, normalizeLang } from "@/packages/Frameworks/_shared/normalize";
+export { LAYER_Z_INDEX } from "@/packages/Frameworks/_shared/layer.constants";
+export { default as DialogHeader } from "@/packages/Frameworks/Dialog/contents/Dialog.header";
+export { default as DialogFooter } from "@/packages/Frameworks/Dialog/contents/Dialog.footer";
+
+// Theme
+export {
+  Shadow,
+  Border,
+  BackgroundBlur,
+  resolveThemeClasses,
+  resolveThemeHasBorder,
+  type ThemePreset,
+  type ThemePaint,
+  type ThemeBackgroundPaint,
+  type ThemeBorderPaint,
+  type ThemeBorderWidth,
+  type ThemeShadow,
+  type ShadowScale,
+  type ThemeSystemProps,
+  type BorderProps,
+  type BackgroundBlurValue,
+} from "@/packages/Frameworks/Theme/Theme.types";
+export { Radius } from "@/packages/Frameworks/Theme/Radius.types";
+export type { RadiusProps, RadiusValue, RadiusScale } from "@/packages/Frameworks/Theme/Radius.types";
+
+// Components
+export { default as Box } from "@/packages/Components/Box/Box";
+export { default as Button } from "@/packages/Components/Button/Button";
+export { default as Card } from "@/packages/Components/Card/Card";
+export { default as CardDefault } from "@/packages/Components/Card/Card.default";
+export { default as CardFoldable } from "@/packages/Components/Card/Card.foldable";
+export { default as Checkbox } from "@/packages/Components/Checkbox/Checkbox";
+export { default as CodeBox } from "@/packages/Components/CodeBox/CodeBox";
+export { default as ContextMenu } from "@/packages/Components/ContextMenu/ContextMenu";
+export { default as ContributionGraph } from "@/packages/Components/ContributionGraph/ContributionGraph";
+export { default as DatePicker } from "@/packages/Components/DatePicker/DatePicker";
+export { default as Divider } from "@/packages/Components/Divider/Divider";
+export { default as Header } from "@/packages/Components/Header/Header";
+export { default as Icon } from "@/packages/Components/Icon/Icon";
+export { default as Input } from "@/packages/Components/Input/Input";
+export { default as Label } from "@/packages/Components/Label/Label";
+export { default as Layout, LayoutGrid, LayoutSection } from "@/packages/Components/Layout/Layout";
+export { default as MapOSM } from "@/packages/Components/Maps/OSM/MapOSM";
+export { default as Nav } from "@/packages/Components/Nav/Nav";
+export { default as Pagination } from "@/packages/Components/Pagination/Pagination";
+export { default as Pill } from "@/packages/Components/Pill/Pill";
+export { default as Profile } from "@/packages/Components/Profile/Profile";
+export { default as Progress } from "@/packages/Components/Progress/Progress";
+export { default as Radio } from "@/packages/Components/Radio/Radio";
+export { default as Select } from "@/packages/Components/Select/Select";
+export { default as Skeleton } from "@/packages/Components/Skeleton/Skeleton";
+export { default as Spinner } from "@/packages/Components/Spinner/Spinner";
+export { default as Text } from "@/packages/Components/Text/Text";
+export { default as TimePicker } from "@/packages/Components/TimePicker/TimePicker";
+export { default as Timeline } from "@/packages/Components/Timeline/Timeline";
+export { default as Title } from "@/packages/Components/Title/Title";
+export { default as Toggle } from "@/packages/Components/Toggle/Toggle";
+export { default as Tooltip } from "@/packages/Components/Tooltip/Tooltip";

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@musecat/uikit",
+  "version": "0.1.1",
+  "private": false,
+  "type": "module",
+  "description": "High-performance Next.js React UI component library with Squircle shapes, theme tokens, and gesture-driven overlays",
+  "author": "Musecat Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TheTechclip/UIKit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TheTechclip/UIKit/issues"
+  },
+  "homepage": "https://musecat.app",
+  "keywords": [
+    "react",
+    "nextjs",
+    "uikit",
+    "components",
+    "squircle",
+    "framer-motion",
+    "dialog",
+    "bottom-sheet",
+    "date-picker"
+  ],
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./*": "./*"
+  },
+  "files": [
+    "index.ts",
+    "packages/",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.scss"
+  ],
+  "overrides": {
+    "@swc/helpers": "0.5.23"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "biome check",
+    "format": "prettier --write . && biome format --write",
+    "lint:css": "stylelint \"packages/**/*.scss\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@musecat/functionkit": "^1.0.1",
+    "@use-funnel/browser": "^0.0.17",
+    "clsx": "^2.1.1",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "embla-carousel-wheel-gestures": "^8.1.0",
+    "figma-squircle": "1.1.0",
+    "maplibre-gl": "^5.24.0",
+    "motion": "^12.42.2",
+    "next": "16.2.10",
+    "next-intl": "^4.13.1",
+    "prismjs": "^1.30.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "sharp": "^0.35.3",
+    "sonner": "^2.0.7"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.5.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^26",
+    "@types/prismjs": "^1.26.6",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.9.5",
+    "sass": "^1.101.0",
+    "stylelint": "^17.14.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "stylelint-declaration-strict-value": "^1.11.1",
+    "stylelint-scss": "^7.2.0",
+    "ts-morph": "^28.0.0",
+    "typescript": "^6",
+    "vitest": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10"
+  }
+}

package/packages/Components/Box/Box.tsx

@@ -0,0 +1,173 @@
+import { createContext, useContext } from "react";
+import type {
+  BoxContentProps,
+  BoxFooterProps,
+  BoxProps,
+} from "@/packages/Components/Box/Box.types";
+import Divider from "@/packages/Components/Divider/Divider";
+import Icon from "@/packages/Components/Icon/Icon";
+import Spinner from "@/packages/Components/Spinner/Spinner";
+import Text from "@/packages/Components/Text/Text";
+import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import View from "@/packages/Frameworks/View/View";
+
+const BoxContentContext = createContext(false);
+
+export function useInBoxContent() {
+  return useContext(BoxContentContext);
+}
+
+export default function Box({
+  themePreset,
+  background,
+  color,
+  themeInteractive,
+  selected,
+  border,
+  children,
+  radius,
+  shadow,
+  style,
+  className,
+  "data-color-mode": dataTheme,
+}: BoxProps) {
+  return (
+    <View
+      column
+      gap={0}
+      className={className}
+      padding={4}
+      height="min-content"
+      data-color-mode={dataTheme}
+      border={border}
+      radius={radius ?? "Regular"}
+      shadow={shadow}
+      themePreset={themePreset ?? "UIPrimary"}
+      background={background}
+      color={color}
+      themeInteractive={themeInteractive}
+      selected={selected}
+      style={{ overflow: "hidden", ...style }}
+    >
+      {children}
+    </View>
+  );
+}
+
+export function BoxContent({
+  title,
+  titleSize,
+  children,
+  contentClassName,
+  contentStyle,
+  "data-color-mode": dataTheme,
+  icon,
+  loading,
+  card,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+}: BoxContentProps) {
+  return (
+    <>
+      {(title || icon || loading) && (
+        <View
+          alignItems="center"
+          data-color-mode={dataTheme}
+          gap={6}
+          justifyContent="space-between"
+          padding={[8, 12, 4, 12]}
+          fullWidth
+        >
+          <View alignItems="center" gap={6} data-color-mode={dataTheme}>
+            {icon && <Icon size={12} {...icon} />}
+            {title && <Text type={titleSize || "Footnote"}>{title}</Text>}
+          </View>
+          {loading && <Spinner size={12} opacity={0.6} />}
+        </View>
+      )}
+      {children && (
+        <BoxContentContext.Provider value>
+          <View
+            column
+            gap={card ? 2 : undefined}
+            className={contentClassName}
+            data-color-mode={dataTheme}
+            padding={
+              padding !== undefined ? padding : card ? 0 : [6, 12, 12, 12]
+            }
+            paddingHorizontal={paddingHorizontal}
+            paddingVertical={paddingVertical}
+            style={contentStyle}
+          >
+            {children}
+          </View>
+        </BoxContentContext.Provider>
+      )}
+    </>
+  );
+}
+
+export function BoxFooter({
+  title,
+  titleSize,
+  children,
+  className,
+  style,
+  "data-color-mode": dataTheme,
+  icon,
+  pressable,
+  divider,
+  radius,
+  themePreset,
+  background,
+  color,
+  border,
+  shadow,
+  themeInteractive,
+  selected,
+  disabled,
+  readOnly,
+  backgroundBlur,
+}: BoxFooterProps) {
+  return (
+    <View column gap={0}>
+      <Divider gradient {...divider} marginVertical={2} />
+      <Pressable
+        data-color-mode={dataTheme}
+        className={className}
+        style={{ textAlign: "center", ...style }}
+        alignItems="center"
+        justifyContent="center"
+        gap={6}
+        padding={[10, 12]}
+        fullWidth
+        radius={radius ?? "Light"}
+        {...pressable}
+        themePreset={pressable?.themePreset ?? themePreset}
+        background={pressable?.background ?? background}
+        color={pressable?.color ?? color}
+        border={pressable?.border ?? border}
+        shadow={pressable?.shadow ?? shadow}
+        themeInteractive={
+          pressable?.themeInteractive ?? themeInteractive ?? true
+        }
+        selected={pressable?.selected ?? selected}
+        disabled={pressable?.disabled ?? disabled}
+        readOnly={pressable?.readOnly ?? readOnly}
+        backgroundBlur={pressable?.backgroundBlur ?? backgroundBlur}
+      >
+        {title && (
+          <Text type={titleSize || "Footnote"} opacity={0.6}>
+            {title}
+          </Text>
+        )}
+        {children}
+        {icon && <Icon size={14} opacity={0.6} {...icon} />}
+      </Pressable>
+    </View>
+  );
+}
+
+Box.Content = BoxContent;
+Box.Footer = BoxFooter;

package/packages/Components/Box/Box.types.ts

@@ -0,0 +1,48 @@
+import type { DividerProps } from "@/packages/Components/Divider/Divider.types";
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { TitleProps } from "@/packages/Components/Title/Title.types";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type {
+  BorderProps,
+  ThemeSystemProps,
+} from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface BoxProps extends ThemeSystemProps, RadiusProps, BorderProps {
+  "data-color-mode"?: string;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface BoxContentProps {
+  "data-color-mode"?: string;
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  titleSize?: TitleProps["titleType"];
+  contentClassName?: string;
+  contentStyle?: React.CSSProperties;
+  icon?: IconProps;
+  loading?: boolean;
+  titleCustom?: React.ReactNode;
+  card?: boolean;
+  padding?: UIKitSizeValue;
+  paddingHorizontal?: UIKitSizeValue;
+  paddingVertical?: UIKitSizeValue;
+}
+
+export interface BoxFooterProps
+  extends ThemeSystemProps,
+    BorderProps,
+    RadiusProps {
+  "data-color-mode"?: string;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+  titleSize?: TitleProps["titleType"];
+  icon?: IconProps;
+  pressable?: PressableProps;
+  divider?: DividerProps;
+}