@m1kapp/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 m1k
+
+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,153 @@
+# @m1k/ui
+
+> Mobile-first app shell for side projects.
+> Build apps that feel like native — in minutes.
+
+```
+┌─────────────────────┐
+│ Header (sticky)     │
+├─────────────────────┤
+│                     │
+│ Content (scroll)    │
+│                     │
+├─────────────────────┤
+│ TabBar (sticky)     │
+└─────────────────────┘
+     rounded, shadow
+     floating on color
+```
+
+## Install
+
+```bash
+npm install @m1k/ui
+```
+
+## Quick Start
+
+```tsx
+import {
+  Watermark,
+  AppShell,
+  AppShellHeader,
+  AppShellContent,
+  TabBar,
+  Tab,
+  Section,
+  SectionHeader,
+  Divider,
+  StatChip,
+  EmptyState,
+} from "@m1k/ui";
+
+export default function App() {
+  const [tab, setTab] = useState("home");
+
+  return (
+    <Watermark color="#3b82f6" text="myapp">
+      <AppShell>
+        <AppShellHeader>
+          <span className="text-2xl font-black">myapp</span>
+        </AppShellHeader>
+
+        <AppShellContent>
+          <Section>
+            <h1 className="text-xl font-bold">Hello</h1>
+          </Section>
+
+          <Divider />
+
+          <Section className="flex gap-3">
+            <StatChip label="Today" value={42} />
+            <StatChip label="Total" value={1234} />
+          </Section>
+        </AppShellContent>
+
+        <TabBar>
+          <Tab
+            active={tab === "home"}
+            onClick={() => setTab("home")}
+            label="Home"
+            icon={<span>🏠</span>}
+          />
+          <Tab
+            active={tab === "profile"}
+            onClick={() => setTab("profile")}
+            label="Profile"
+            icon={<span>👤</span>}
+          />
+        </TabBar>
+      </AppShell>
+    </Watermark>
+  );
+}
+```
+
+## Components
+
+### Layout
+
+| Component | Description |
+|-----------|-------------|
+| `Watermark` | Full-screen colored background with text pattern. The "floating app" look. |
+| `AppShell` | Mobile app container (rounded, shadow, ring) |
+| `AppShellHeader` | Sticky top header with blur backdrop |
+| `AppShellContent` | Scrollable main content area |
+| `TabBar` | Sticky bottom navigation |
+| `Tab` | Individual tab button |
+
+### Content
+
+| Component | Description |
+|-----------|-------------|
+| `Section` | Padded content section (px-4) |
+| `SectionHeader` | Small uppercase section title |
+| `Divider` | Horizontal separator line |
+| `StatChip` | Compact stat display (label + number) |
+| `EmptyState` | Placeholder with icon and message |
+
+## Props
+
+### `Watermark`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `#0f172a` | Background color |
+| `text` | `string` | `m1k` | Watermark pattern text |
+| `maxWidth` | `number` | `430` | Max width of content area |
+| `padding` | `number` | `12` | Padding around the shell |
+
+### `AppShell`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `maxWidth` | `number` | `430` | Max width |
+| `className` | `string` | | Additional classes |
+
+### `Tab`
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `active` | `boolean` | Whether tab is selected |
+| `onClick` | `() => void` | Click handler |
+| `icon` | `ReactNode` | Tab icon |
+| `label` | `string` | Tab label text |
+| `activeColor` | `string?` | Color when active |
+
+## Requirements
+
+- React 18+
+- Tailwind CSS 4+
+
+## Philosophy
+
+In the AI era, building a side project takes a day.
+But making it *feel* like an app still takes effort.
+
+`@m1k/ui` gives you the mobile app shell — header, scrollable content, bottom tabs, floating on a colored background — so you can focus on what matters: your idea.
+
+Built and battle-tested in [m1k](https://m1k.app).
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,113 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+
+interface AppShellProps {
+    children: ReactNode;
+    className?: string;
+    /** Max width of the shell. Default: 430px */
+    maxWidth?: number;
+    style?: CSSProperties;
+}
+/**
+ * Mobile app-like container with rounded corners, shadow, and ring.
+ * Centers content and constrains width for a phone-like viewport.
+ */
+declare function AppShell({ children, className, maxWidth, style, }: AppShellProps): react_jsx_runtime.JSX.Element;
+interface AppShellHeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Sticky top header with blur backdrop.
+ */
+declare function AppShellHeader({ children, className }: AppShellHeaderProps): react_jsx_runtime.JSX.Element;
+interface AppShellContentProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Scrollable main content area.
+ */
+declare function AppShellContent({ children, className }: AppShellContentProps): react_jsx_runtime.JSX.Element;
+
+interface TabBarProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Sticky bottom navigation tab bar.
+ */
+declare function TabBar({ children, className }: TabBarProps): react_jsx_runtime.JSX.Element;
+interface TabProps {
+    active: boolean;
+    onClick: () => void;
+    icon: ReactNode;
+    label: string;
+    /** Active tab color. Default: current text color */
+    activeColor?: string;
+}
+/**
+ * Individual tab button for the TabBar.
+ */
+declare function Tab({ active, onClick, icon, label, activeColor }: TabProps): react_jsx_runtime.JSX.Element;
+
+interface SectionProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Padded section wrapper (px-4).
+ */
+declare function Section({ children, className }: SectionProps): react_jsx_runtime.JSX.Element;
+interface SectionHeaderProps {
+    children: ReactNode;
+}
+/**
+ * Small uppercase section title.
+ */
+declare function SectionHeader({ children }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Horizontal divider line with margin.
+ */
+declare function Divider({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface StatChipProps {
+    label: string;
+    value: number;
+    className?: string;
+}
+/**
+ * Compact stat display chip with label and number.
+ */
+declare function StatChip({ label, value, className }: StatChipProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    message: string;
+    icon?: ReactNode;
+}
+/**
+ * Empty state placeholder with icon and message.
+ */
+declare function EmptyState({ message, icon }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface WatermarkProps {
+    children: ReactNode;
+    /** Background color */
+    color?: string;
+    /** Watermark text. Default: "m1k" */
+    text?: string;
+    /** Max width of content area. Default: 430 */
+    maxWidth?: number;
+    /** Padding around the app shell. Default: 12px */
+    padding?: number;
+}
+/**
+ * Full-screen colored background with repeating text watermark pattern.
+ * Wraps the AppShell and provides the "floating app" look.
+ */
+declare function Watermark({ children, color, text, maxWidth, padding, }: WatermarkProps): react_jsx_runtime.JSX.Element;
+
+export { AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, Divider, EmptyState, type EmptyStateProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, StatChip, type StatChipProps, Tab, TabBar, type TabBarProps, type TabProps, Watermark, type WatermarkProps };

package/dist/index.d.ts

@@ -0,0 +1,113 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+
+interface AppShellProps {
+    children: ReactNode;
+    className?: string;
+    /** Max width of the shell. Default: 430px */
+    maxWidth?: number;
+    style?: CSSProperties;
+}
+/**
+ * Mobile app-like container with rounded corners, shadow, and ring.
+ * Centers content and constrains width for a phone-like viewport.
+ */
+declare function AppShell({ children, className, maxWidth, style, }: AppShellProps): react_jsx_runtime.JSX.Element;
+interface AppShellHeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Sticky top header with blur backdrop.
+ */
+declare function AppShellHeader({ children, className }: AppShellHeaderProps): react_jsx_runtime.JSX.Element;
+interface AppShellContentProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Scrollable main content area.
+ */
+declare function AppShellContent({ children, className }: AppShellContentProps): react_jsx_runtime.JSX.Element;
+
+interface TabBarProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Sticky bottom navigation tab bar.
+ */
+declare function TabBar({ children, className }: TabBarProps): react_jsx_runtime.JSX.Element;
+interface TabProps {
+    active: boolean;
+    onClick: () => void;
+    icon: ReactNode;
+    label: string;
+    /** Active tab color. Default: current text color */
+    activeColor?: string;
+}
+/**
+ * Individual tab button for the TabBar.
+ */
+declare function Tab({ active, onClick, icon, label, activeColor }: TabProps): react_jsx_runtime.JSX.Element;
+
+interface SectionProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Padded section wrapper (px-4).
+ */
+declare function Section({ children, className }: SectionProps): react_jsx_runtime.JSX.Element;
+interface SectionHeaderProps {
+    children: ReactNode;
+}
+/**
+ * Small uppercase section title.
+ */
+declare function SectionHeader({ children }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Horizontal divider line with margin.
+ */
+declare function Divider({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface StatChipProps {
+    label: string;
+    value: number;
+    className?: string;
+}
+/**
+ * Compact stat display chip with label and number.
+ */
+declare function StatChip({ label, value, className }: StatChipProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    message: string;
+    icon?: ReactNode;
+}
+/**
+ * Empty state placeholder with icon and message.
+ */
+declare function EmptyState({ message, icon }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface WatermarkProps {
+    children: ReactNode;
+    /** Background color */
+    color?: string;
+    /** Watermark text. Default: "m1k" */
+    text?: string;
+    /** Max width of content area. Default: 430 */
+    maxWidth?: number;
+    /** Padding around the app shell. Default: 12px */
+    padding?: number;
+}
+/**
+ * Full-screen colored background with repeating text watermark pattern.
+ * Wraps the AppShell and provides the "floating app" look.
+ */
+declare function Watermark({ children, color, text, maxWidth, padding, }: WatermarkProps): react_jsx_runtime.JSX.Element;
+
+export { AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, Divider, EmptyState, type EmptyStateProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, StatChip, type StatChipProps, Tab, TabBar, type TabBarProps, type TabProps, Watermark, type WatermarkProps };

package/dist/index.js

@@ -0,0 +1,194 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AppShell: () => AppShell,
+  AppShellContent: () => AppShellContent,
+  AppShellHeader: () => AppShellHeader,
+  Divider: () => Divider,
+  EmptyState: () => EmptyState,
+  Section: () => Section,
+  SectionHeader: () => SectionHeader,
+  StatChip: () => StatChip,
+  Tab: () => Tab,
+  TabBar: () => TabBar,
+  Watermark: () => Watermark
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/app-shell.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AppShell({
+  children,
+  className = "",
+  maxWidth = 430,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: `w-full h-full flex flex-col bg-white dark:bg-zinc-950 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 rounded-2xl overflow-hidden ${className}`,
+      style: { maxWidth, ...style },
+      children
+    }
+  );
+}
+function AppShellHeader({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "header",
+    {
+      className: `sticky top-0 z-20 px-4 py-3 flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-t-2xl ${className}`,
+      children
+    }
+  );
+}
+function AppShellContent({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `flex-1 overflow-y-auto ${className}`, children });
+}
+
+// src/components/tab-bar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function TabBar({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "nav",
+    {
+      className: `sticky bottom-0 z-20 border-t border-zinc-200 dark:border-zinc-800 flex bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-b-2xl ${className}`,
+      children
+    }
+  );
+}
+function Tab({ active, onClick, icon, label, activeColor }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      onClick,
+      className: `flex-1 flex flex-col items-center gap-0.5 py-2.5 transition-colors ${!active ? "text-zinc-300 dark:text-zinc-600" : ""}`,
+      style: active ? { color: activeColor } : void 0,
+      children: [
+        icon,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px] font-medium", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/section.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Section({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { className: `px-4 ${className}`, children });
+}
+function SectionHeader({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "text-[11px] font-semibold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider mb-3", children });
+}
+
+// src/components/divider.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Divider({ className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `mx-4 my-6 h-px bg-zinc-200 dark:bg-zinc-800 ${className}` });
+}
+
+// src/components/stat-chip.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function StatChip({ label, value, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `flex-1 rounded-xl bg-zinc-100 dark:bg-zinc-900 px-3 py-3 text-center ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[10px] text-zinc-500 dark:text-zinc-400 font-medium mb-0.5", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-lg font-bold tabular-nums text-zinc-900 dark:text-white", children: value.toLocaleString() })
+  ] });
+}
+
+// src/components/empty-state.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function EmptyState({ message, icon }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 gap-2", children: [
+    icon || /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "text-zinc-200 dark:text-zinc-700", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 15h8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "9", cy: "9", r: "1", fill: "currentColor", stroke: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "15", cy: "9", r: "1", fill: "currentColor", stroke: "none" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-zinc-400 dark:text-zinc-500", children: message })
+  ] });
+}
+
+// src/components/watermark.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function buildSvgPattern(text, opacity = 0.08) {
+  const w = 220;
+  const h = 120;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">
+    <text x="10" y="45" font-family="system-ui,sans-serif" font-size="44" font-weight="900" fill="white" opacity="${opacity}">${text}</text>
+    <text x="120" y="100" font-family="system-ui,sans-serif" font-size="44" font-weight="900" fill="white" opacity="${opacity}">${text}</text>
+  </svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+function Watermark({
+  children,
+  color = "#0f172a",
+  text = "m1k",
+  maxWidth = 430,
+  padding = 12
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: "h-dvh w-full relative overflow-hidden",
+      style: { backgroundColor: color, transition: "background-color 0.5s ease" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            className: "absolute inset-0 pointer-events-none select-none",
+            style: {
+              backgroundImage: buildSvgPattern(text),
+              backgroundRepeat: "repeat",
+              transform: "rotate(-12deg) scale(1.5)",
+              transformOrigin: "center center"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            className: "relative z-10 h-full flex items-center justify-center mx-auto",
+            style: { maxWidth, padding },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppShell,
+  AppShellContent,
+  AppShellHeader,
+  Divider,
+  EmptyState,
+  Section,
+  SectionHeader,
+  StatChip,
+  Tab,
+  TabBar,
+  Watermark
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/app-shell.tsx","../src/components/tab-bar.tsx","../src/components/section.tsx","../src/components/divider.tsx","../src/components/stat-chip.tsx","../src/components/empty-state.tsx","../src/components/watermark.tsx"],"sourcesContent":["export { AppShell, AppShellHeader, AppShellContent } from \"./components/app-shell\";\nexport type { AppShellProps, AppShellHeaderProps, AppShellContentProps } from \"./components/app-shell\";\n\nexport { TabBar, Tab } from \"./components/tab-bar\";\nexport type { TabBarProps, TabProps } from \"./components/tab-bar\";\n\nexport { Section, SectionHeader } from \"./components/section\";\nexport type { SectionProps, SectionHeaderProps } from \"./components/section\";\n\nexport { Divider } from \"./components/divider\";\n\nexport { StatChip } from \"./components/stat-chip\";\nexport type { StatChipProps } from \"./components/stat-chip\";\n\nexport { EmptyState } from \"./components/empty-state\";\nexport type { EmptyStateProps } from \"./components/empty-state\";\n\nexport { Watermark } from \"./components/watermark\";\nexport type { WatermarkProps } from \"./components/watermark\";\n","import { type ReactNode, type CSSProperties } from \"react\";\n\nexport interface AppShellProps {\n  children: ReactNode;\n  className?: string;\n  /** Max width of the shell. Default: 430px */\n  maxWidth?: number;\n  style?: CSSProperties;\n}\n\n/**\n * Mobile app-like container with rounded corners, shadow, and ring.\n * Centers content and constrains width for a phone-like viewport.\n */\nexport function AppShell({\n  children,\n  className = \"\",\n  maxWidth = 430,\n  style,\n}: AppShellProps) {\n  return (\n    <div\n      className={`w-full h-full flex flex-col bg-white dark:bg-zinc-950 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 rounded-2xl overflow-hidden ${className}`}\n      style={{ maxWidth, ...style }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface AppShellHeaderProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Sticky top header with blur backdrop.\n */\nexport function AppShellHeader({ children, className = \"\" }: AppShellHeaderProps) {\n  return (\n    <header\n      className={`sticky top-0 z-20 px-4 py-3 flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-t-2xl ${className}`}\n    >\n      {children}\n    </header>\n  );\n}\n\nexport interface AppShellContentProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Scrollable main content area.\n */\nexport function AppShellContent({ children, className = \"\" }: AppShellContentProps) {\n  return (\n    <div className={`flex-1 overflow-y-auto ${className}`}>\n      {children}\n    </div>\n  );\n}\n","import { type ReactNode } from \"react\";\n\nexport interface TabBarProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Sticky bottom navigation tab bar.\n */\nexport function TabBar({ children, className = \"\" }: TabBarProps) {\n  return (\n    <nav\n      className={`sticky bottom-0 z-20 border-t border-zinc-200 dark:border-zinc-800 flex bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-b-2xl ${className}`}\n    >\n      {children}\n    </nav>\n  );\n}\n\nexport interface TabProps {\n  active: boolean;\n  onClick: () => void;\n  icon: ReactNode;\n  label: string;\n  /** Active tab color. Default: current text color */\n  activeColor?: string;\n}\n\n/**\n * Individual tab button for the TabBar.\n */\nexport function Tab({ active, onClick, icon, label, activeColor }: TabProps) {\n  return (\n    <button\n      onClick={onClick}\n      className={`flex-1 flex flex-col items-center gap-0.5 py-2.5 transition-colors ${\n        !active ? \"text-zinc-300 dark:text-zinc-600\" : \"\"\n      }`}\n      style={active ? { color: activeColor } : undefined}\n    >\n      {icon}\n      <span className=\"text-[10px] font-medium\">{label}</span>\n    </button>\n  );\n}\n","import { type ReactNode } from \"react\";\n\nexport interface SectionProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Padded section wrapper (px-4).\n */\nexport function Section({ children, className = \"\" }: SectionProps) {\n  return <section className={`px-4 ${className}`}>{children}</section>;\n}\n\nexport interface SectionHeaderProps {\n  children: ReactNode;\n}\n\n/**\n * Small uppercase section title.\n */\nexport function SectionHeader({ children }: SectionHeaderProps) {\n  return (\n    <h2 className=\"text-[11px] font-semibold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider mb-3\">\n      {children}\n    </h2>\n  );\n}\n","/**\n * Horizontal divider line with margin.\n */\nexport function Divider({ className = \"\" }: { className?: string }) {\n  return <div className={`mx-4 my-6 h-px bg-zinc-200 dark:bg-zinc-800 ${className}`} />;\n}\n","export interface StatChipProps {\n  label: string;\n  value: number;\n  className?: string;\n}\n\n/**\n * Compact stat display chip with label and number.\n */\nexport function StatChip({ label, value, className = \"\" }: StatChipProps) {\n  return (\n    <div className={`flex-1 rounded-xl bg-zinc-100 dark:bg-zinc-900 px-3 py-3 text-center ${className}`}>\n      <p className=\"text-[10px] text-zinc-500 dark:text-zinc-400 font-medium mb-0.5\">\n        {label}\n      </p>\n      <p className=\"text-lg font-bold tabular-nums text-zinc-900 dark:text-white\">\n        {value.toLocaleString()}\n      </p>\n    </div>\n  );\n}\n","import { type ReactNode } from \"react\";\n\nexport interface EmptyStateProps {\n  message: string;\n  icon?: ReactNode;\n}\n\n/**\n * Empty state placeholder with icon and message.\n */\nexport function EmptyState({ message, icon }: EmptyStateProps) {\n  return (\n    <div className=\"flex flex-col items-center justify-center py-12 gap-2\">\n      {icon || (\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"text-zinc-200 dark:text-zinc-700\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 15h8\" />\n          <circle cx=\"9\" cy=\"9\" r=\"1\" fill=\"currentColor\" stroke=\"none\" />\n          <circle cx=\"15\" cy=\"9\" r=\"1\" fill=\"currentColor\" stroke=\"none\" />\n        </svg>\n      )}\n      <p className=\"text-sm text-zinc-400 dark:text-zinc-500\">{message}</p>\n    </div>\n  );\n}\n","import { type ReactNode } from \"react\";\n\nexport interface WatermarkProps {\n  children: ReactNode;\n  /** Background color */\n  color?: string;\n  /** Watermark text. Default: \"m1k\" */\n  text?: string;\n  /** Max width of content area. Default: 430 */\n  maxWidth?: number;\n  /** Padding around the app shell. Default: 12px */\n  padding?: number;\n}\n\nfunction buildSvgPattern(text: string, opacity: number = 0.08): string {\n  const w = 220;\n  const h = 120;\n  const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${w}\" height=\"${h}\">\n    <text x=\"10\" y=\"45\" font-family=\"system-ui,sans-serif\" font-size=\"44\" font-weight=\"900\" fill=\"white\" opacity=\"${opacity}\">${text}</text>\n    <text x=\"120\" y=\"100\" font-family=\"system-ui,sans-serif\" font-size=\"44\" font-weight=\"900\" fill=\"white\" opacity=\"${opacity}\">${text}</text>\n  </svg>`;\n  return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`;\n}\n\n/**\n * Full-screen colored background with repeating text watermark pattern.\n * Wraps the AppShell and provides the \"floating app\" look.\n */\nexport function Watermark({\n  children,\n  color = \"#0f172a\",\n  text = \"m1k\",\n  maxWidth = 430,\n  padding = 12,\n}: WatermarkProps) {\n  return (\n    <div\n      className=\"h-dvh w-full relative overflow-hidden\"\n      style={{ backgroundColor: color, transition: \"background-color 0.5s ease\" }}\n    >\n      <div\n        className=\"absolute inset-0 pointer-events-none select-none\"\n        style={{\n          backgroundImage: buildSvgPattern(text),\n          backgroundRepeat: \"repeat\",\n          transform: \"rotate(-12deg) scale(1.5)\",\n          transformOrigin: \"center center\",\n        }}\n      />\n      <div\n        className=\"relative z-10 h-full flex items-center justify-center mx-auto\"\n        style={{ maxWidth, padding }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,158 @@
+"use client";
+
+// src/components/app-shell.tsx
+import { jsx } from "react/jsx-runtime";
+function AppShell({
+  children,
+  className = "",
+  maxWidth = 430,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `w-full h-full flex flex-col bg-white dark:bg-zinc-950 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 rounded-2xl overflow-hidden ${className}`,
+      style: { maxWidth, ...style },
+      children
+    }
+  );
+}
+function AppShellHeader({ children, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: `sticky top-0 z-20 px-4 py-3 flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-t-2xl ${className}`,
+      children
+    }
+  );
+}
+function AppShellContent({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `flex-1 overflow-y-auto ${className}`, children });
+}
+
+// src/components/tab-bar.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function TabBar({ children, className = "" }) {
+  return /* @__PURE__ */ jsx2(
+    "nav",
+    {
+      className: `sticky bottom-0 z-20 border-t border-zinc-200 dark:border-zinc-800 flex bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-b-2xl ${className}`,
+      children
+    }
+  );
+}
+function Tab({ active, onClick, icon, label, activeColor }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: `flex-1 flex flex-col items-center gap-0.5 py-2.5 transition-colors ${!active ? "text-zinc-300 dark:text-zinc-600" : ""}`,
+      style: active ? { color: activeColor } : void 0,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-medium", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/section.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Section({ children, className = "" }) {
+  return /* @__PURE__ */ jsx3("section", { className: `px-4 ${className}`, children });
+}
+function SectionHeader({ children }) {
+  return /* @__PURE__ */ jsx3("h2", { className: "text-[11px] font-semibold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider mb-3", children });
+}
+
+// src/components/divider.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Divider({ className = "" }) {
+  return /* @__PURE__ */ jsx4("div", { className: `mx-4 my-6 h-px bg-zinc-200 dark:bg-zinc-800 ${className}` });
+}
+
+// src/components/stat-chip.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function StatChip({ label, value, className = "" }) {
+  return /* @__PURE__ */ jsxs2("div", { className: `flex-1 rounded-xl bg-zinc-100 dark:bg-zinc-900 px-3 py-3 text-center ${className}`, children: [
+    /* @__PURE__ */ jsx5("p", { className: "text-[10px] text-zinc-500 dark:text-zinc-400 font-medium mb-0.5", children: label }),
+    /* @__PURE__ */ jsx5("p", { className: "text-lg font-bold tabular-nums text-zinc-900 dark:text-white", children: value.toLocaleString() })
+  ] });
+}
+
+// src/components/empty-state.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function EmptyState({ message, icon }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-12 gap-2", children: [
+    icon || /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "text-zinc-200 dark:text-zinc-700", children: [
+      /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx6("path", { d: "M8 15h8" }),
+      /* @__PURE__ */ jsx6("circle", { cx: "9", cy: "9", r: "1", fill: "currentColor", stroke: "none" }),
+      /* @__PURE__ */ jsx6("circle", { cx: "15", cy: "9", r: "1", fill: "currentColor", stroke: "none" })
+    ] }),
+    /* @__PURE__ */ jsx6("p", { className: "text-sm text-zinc-400 dark:text-zinc-500", children: message })
+  ] });
+}
+
+// src/components/watermark.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function buildSvgPattern(text, opacity = 0.08) {
+  const w = 220;
+  const h = 120;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">
+    <text x="10" y="45" font-family="system-ui,sans-serif" font-size="44" font-weight="900" fill="white" opacity="${opacity}">${text}</text>
+    <text x="120" y="100" font-family="system-ui,sans-serif" font-size="44" font-weight="900" fill="white" opacity="${opacity}">${text}</text>
+  </svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+function Watermark({
+  children,
+  color = "#0f172a",
+  text = "m1k",
+  maxWidth = 430,
+  padding = 12
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "h-dvh w-full relative overflow-hidden",
+      style: { backgroundColor: color, transition: "background-color 0.5s ease" },
+      children: [
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "absolute inset-0 pointer-events-none select-none",
+            style: {
+              backgroundImage: buildSvgPattern(text),
+              backgroundRepeat: "repeat",
+              transform: "rotate(-12deg) scale(1.5)",
+              transformOrigin: "center center"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "relative z-10 h-full flex items-center justify-center mx-auto",
+            style: { maxWidth, padding },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AppShell,
+  AppShellContent,
+  AppShellHeader,
+  Divider,
+  EmptyState,
+  Section,
+  SectionHeader,
+  StatChip,
+  Tab,
+  TabBar,
+  Watermark
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/app-shell.tsx","../src/components/tab-bar.tsx","../src/components/section.tsx","../src/components/divider.tsx","../src/components/stat-chip.tsx","../src/components/empty-state.tsx","../src/components/watermark.tsx"],"sourcesContent":["import { type ReactNode, type CSSProperties } from \"react\";\n\nexport interface AppShellProps {\n  children: ReactNode;\n  className?: string;\n  /** Max width of the shell. Default: 430px */\n  maxWidth?: number;\n  style?: CSSProperties;\n}\n\n/**\n * Mobile app-like container with rounded corners, shadow, and ring.\n * Centers content and constrains width for a phone-like viewport.\n */\nexport function AppShell({\n  children,\n  className = \"\",\n  maxWidth = 430,\n  style,\n}: AppShellProps) {\n  return (\n    <div\n      className={`w-full h-full flex flex-col bg-white dark:bg-zinc-950 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 rounded-2xl overflow-hidden ${className}`}\n      style={{ maxWidth, ...style }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface AppShellHeaderProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Sticky top header with blur backdrop.\n */\nexport function AppShellHeader({ children, className = \"\" }: AppShellHeaderProps) {\n  return (\n    <header\n      className={`sticky top-0 z-20 px-4 py-3 flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-t-2xl ${className}`}\n    >\n      {children}\n    </header>\n  );\n}\n\nexport interface AppShellContentProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Scrollable main content area.\n */\nexport function AppShellContent({ children, className = \"\" }: AppShellContentProps) {\n  return (\n    <div className={`flex-1 overflow-y-auto ${className}`}>\n      {children}\n    </div>\n  );\n}\n","import { type ReactNode } from \"react\";\n\nexport interface TabBarProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Sticky bottom navigation tab bar.\n */\nexport function TabBar({ children, className = \"\" }: TabBarProps) {\n  return (\n    <nav\n      className={`sticky bottom-0 z-20 border-t border-zinc-200 dark:border-zinc-800 flex bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-b-2xl ${className}`}\n    >\n      {children}\n    </nav>\n  );\n}\n\nexport interface TabProps {\n  active: boolean;\n  onClick: () => void;\n  icon: ReactNode;\n  label: string;\n  /** Active tab color. Default: current text color */\n  activeColor?: string;\n}\n\n/**\n * Individual tab button for the TabBar.\n */\nexport function Tab({ active, onClick, icon, label, activeColor }: TabProps) {\n  return (\n    <button\n      onClick={onClick}\n      className={`flex-1 flex flex-col items-center gap-0.5 py-2.5 transition-colors ${\n        !active ? \"text-zinc-300 dark:text-zinc-600\" : \"\"\n      }`}\n      style={active ? { color: activeColor } : undefined}\n    >\n      {icon}\n      <span className=\"text-[10px] font-medium\">{label}</span>\n    </button>\n  );\n}\n","import { type ReactNode } from \"react\";\n\nexport interface SectionProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Padded section wrapper (px-4).\n */\nexport function Section({ children, className = \"\" }: SectionProps) {\n  return <section className={`px-4 ${className}`}>{children}</section>;\n}\n\nexport interface SectionHeaderProps {\n  children: ReactNode;\n}\n\n/**\n * Small uppercase section title.\n */\nexport function SectionHeader({ children }: SectionHeaderProps) {\n  return (\n    <h2 className=\"text-[11px] font-semibold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider mb-3\">\n      {children}\n    </h2>\n  );\n}\n","/**\n * Horizontal divider line with margin.\n */\nexport function Divider({ className = \"\" }: { className?: string }) {\n  return <div className={`mx-4 my-6 h-px bg-zinc-200 dark:bg-zinc-800 ${className}`} />;\n}\n","export interface StatChipProps {\n  label: string;\n  value: number;\n  className?: string;\n}\n\n/**\n * Compact stat display chip with label and number.\n */\nexport function StatChip({ label, value, className = \"\" }: StatChipProps) {\n  return (\n    <div className={`flex-1 rounded-xl bg-zinc-100 dark:bg-zinc-900 px-3 py-3 text-center ${className}`}>\n      <p className=\"text-[10px] text-zinc-500 dark:text-zinc-400 font-medium mb-0.5\">\n        {label}\n      </p>\n      <p className=\"text-lg font-bold tabular-nums text-zinc-900 dark:text-white\">\n        {value.toLocaleString()}\n      </p>\n    </div>\n  );\n}\n","import { type ReactNode } from \"react\";\n\nexport interface EmptyStateProps {\n  message: string;\n  icon?: ReactNode;\n}\n\n/**\n * Empty state placeholder with icon and message.\n */\nexport function EmptyState({ message, icon }: EmptyStateProps) {\n  return (\n    <div className=\"flex flex-col items-center justify-center py-12 gap-2\">\n      {icon || (\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"text-zinc-200 dark:text-zinc-700\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 15h8\" />\n          <circle cx=\"9\" cy=\"9\" r=\"1\" fill=\"currentColor\" stroke=\"none\" />\n          <circle cx=\"15\" cy=\"9\" r=\"1\" fill=\"currentColor\" stroke=\"none\" />\n        </svg>\n      )}\n      <p className=\"text-sm text-zinc-400 dark:text-zinc-500\">{message}</p>\n    </div>\n  );\n}\n","import { type ReactNode } from \"react\";\n\nexport interface WatermarkProps {\n  children: ReactNode;\n  /** Background color */\n  color?: string;\n  /** Watermark text. Default: \"m1k\" */\n  text?: string;\n  /** Max width of content area. Default: 430 */\n  maxWidth?: number;\n  /** Padding around the app shell. Default: 12px */\n  padding?: number;\n}\n\nfunction buildSvgPattern(text: string, opacity: number = 0.08): string {\n  const w = 220;\n  const h = 120;\n  const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${w}\" height=\"${h}\">\n    <text x=\"10\" y=\"45\" font-family=\"system-ui,sans-serif\" font-size=\"44\" font-weight=\"900\" fill=\"white\" opacity=\"${opacity}\">${text}</text>\n    <text x=\"120\" y=\"100\" font-family=\"system-ui,sans-serif\" font-size=\"44\" font-weight=\"900\" fill=\"white\" opacity=\"${opacity}\">${text}</text>\n  </svg>`;\n  return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`;\n}\n\n/**\n * Full-screen colored background with repeating text watermark pattern.\n * Wraps the AppShell and provides the \"floating app\" look.\n */\nexport function Watermark({\n  children,\n  color = \"#0f172a\",\n  text = \"m1k\",\n  maxWidth = 430,\n  padding = 12,\n}: WatermarkProps) {\n  return (\n    <div\n      className=\"h-dvh w-full relative overflow-hidden\"\n      style={{ backgroundColor: color, transition: \"background-color 0.5s ease\" }}\n    >\n      <div\n        className=\"absolute inset-0 pointer-events-none select-none\"\n        style={{\n          backgroundImage: buildSvgPattern(text),\n          backgroundRepeat: \"repeat\",\n          transform: \"rotate(-12deg) scale(1.5)\",\n          transformOrigin: \"center center\",\n        }}\n      />\n      <div\n        className=\"relative z-10 h-full flex items-center justify-center mx-auto\"\n        style={{ maxWidth, padding }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsx","jsx","jsx","jsxs","jsx","jsxs","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@m1kapp/ui",
+  "version": "0.1.0",
+  "description": "Mobile-first app shell UI components for side projects",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "demo": "cd demo && npm run dev",
+    "demo:build": "cd demo && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.0.0",
+    "tsup": "^8.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "mobile",
+    "app-shell",
+    "tailwind",
+    "side-project",
+    "m1k"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yoominho/m1k-ui"
+  },
+  "homepage": "https://m1k.app"
+}