@m1kapp/ui 0.1.1 → 0.1.2

package/README.md

@@ -1,4 +1,4 @@
-# @m1k/ui
+# @m1kapp/ui
 
 > Mobile-first app shell for side projects.
 > Build apps that feel like native — in minutes.
@@ -20,7 +20,7 @@
 ## Install
 
 ```bash
-npm install @m1k/ui
+npm install @m1kapp/ui
 ```
 
 ## Quick Start
@@ -38,7 +38,7 @@ import {
   Divider,
   StatChip,
   EmptyState,
-} from "@m1k/ui";
+} from "@m1kapp/ui";
 
 export default function App() {
   const [tab, setTab] = useState("home");
@@ -144,7 +144,7 @@ export default function App() {
 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.
+`@m1kapp/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).
 

package/dist/index.d.mts

@@ -110,4 +110,76 @@ interface WatermarkProps {
  */
 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 };
+declare const colors: {
+    readonly blue: "#3b82f6";
+    readonly purple: "#8b5cf6";
+    readonly green: "#10b981";
+    readonly orange: "#f97316";
+    readonly pink: "#ec4899";
+    readonly red: "#ef4444";
+    readonly yellow: "#eab308";
+    readonly cyan: "#06b6d4";
+    readonly slate: "#0f172a";
+    readonly zinc: "#27272a";
+};
+type ColorName = keyof typeof colors;
+
+interface ThemeButtonProps {
+    color: string;
+    onClick: () => void;
+    className?: string;
+}
+/**
+ * Small circular button showing the current theme color.
+ * Designed for the AppShellHeader top-right slot.
+ */
+declare function ThemeButton({ color, onClick, className }: ThemeButtonProps): react_jsx_runtime.JSX.Element;
+interface ThemeDialogProps {
+    open: boolean;
+    onClose: () => void;
+    current: string;
+    onSelect: (color: string) => void;
+    /** Override the color palette. Defaults to built-in colors. */
+    palette?: Record<string, string>;
+}
+/**
+ * Bottom-sheet style color picker dialog.
+ * Shows a 5-column grid of color circles with check on the active one.
+ */
+declare function ThemeDialog({ open, onClose, current, onSelect, palette, }: ThemeDialogProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Font presets for @m1kapp/ui.
+ * These return CSS @import strings to load fonts from official CDNs.
+ * No font files are bundled — only references to the original sources.
+ */
+declare const fonts: {
+    /** Toss Product Sans — from toss.im (free for commercial use) */
+    readonly toss: "https://static.toss.im/dist/tps.css";
+    /** Pretendard — popular Korean web font */
+    readonly pretendard: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css";
+    /** Inter — clean Latin sans-serif */
+    readonly inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap";
+};
+type FontName = keyof typeof fonts;
+/**
+ * Returns a <link> href for the given font preset.
+ * Usage in your HTML head or via a <link> tag:
+ *
+ * ```tsx
+ * <link rel="stylesheet" href={fonts.toss} />
+ * ```
+ *
+ * Or in CSS:
+ * ```css
+ * @import url("https://static.toss.im/dist/tps.css");
+ * body { font-family: "Toss Product Sans", sans-serif; }
+ * ```
+ */
+declare const fontFamily: {
+    readonly toss: "\"Toss Product Sans\", \"Pretendard\", system-ui, sans-serif";
+    readonly pretendard: "\"Pretendard Variable\", \"Pretendard\", system-ui, sans-serif";
+    readonly inter: "\"Inter\", system-ui, sans-serif";
+};
+
+export { AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, type ColorName, Divider, EmptyState, type EmptyStateProps, type FontName, Section, SectionHeader, type SectionHeaderProps, type SectionProps, StatChip, type StatChipProps, Tab, TabBar, type TabBarProps, type TabProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogProps, Watermark, type WatermarkProps, colors, fontFamily, fonts };

package/dist/index.d.ts

@@ -110,4 +110,76 @@ interface WatermarkProps {
  */
 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 };
+declare const colors: {
+    readonly blue: "#3b82f6";
+    readonly purple: "#8b5cf6";
+    readonly green: "#10b981";
+    readonly orange: "#f97316";
+    readonly pink: "#ec4899";
+    readonly red: "#ef4444";
+    readonly yellow: "#eab308";
+    readonly cyan: "#06b6d4";
+    readonly slate: "#0f172a";
+    readonly zinc: "#27272a";
+};
+type ColorName = keyof typeof colors;
+
+interface ThemeButtonProps {
+    color: string;
+    onClick: () => void;
+    className?: string;
+}
+/**
+ * Small circular button showing the current theme color.
+ * Designed for the AppShellHeader top-right slot.
+ */
+declare function ThemeButton({ color, onClick, className }: ThemeButtonProps): react_jsx_runtime.JSX.Element;
+interface ThemeDialogProps {
+    open: boolean;
+    onClose: () => void;
+    current: string;
+    onSelect: (color: string) => void;
+    /** Override the color palette. Defaults to built-in colors. */
+    palette?: Record<string, string>;
+}
+/**
+ * Bottom-sheet style color picker dialog.
+ * Shows a 5-column grid of color circles with check on the active one.
+ */
+declare function ThemeDialog({ open, onClose, current, onSelect, palette, }: ThemeDialogProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Font presets for @m1kapp/ui.
+ * These return CSS @import strings to load fonts from official CDNs.
+ * No font files are bundled — only references to the original sources.
+ */
+declare const fonts: {
+    /** Toss Product Sans — from toss.im (free for commercial use) */
+    readonly toss: "https://static.toss.im/dist/tps.css";
+    /** Pretendard — popular Korean web font */
+    readonly pretendard: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css";
+    /** Inter — clean Latin sans-serif */
+    readonly inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap";
+};
+type FontName = keyof typeof fonts;
+/**
+ * Returns a <link> href for the given font preset.
+ * Usage in your HTML head or via a <link> tag:
+ *
+ * ```tsx
+ * <link rel="stylesheet" href={fonts.toss} />
+ * ```
+ *
+ * Or in CSS:
+ * ```css
+ * @import url("https://static.toss.im/dist/tps.css");
+ * body { font-family: "Toss Product Sans", sans-serif; }
+ * ```
+ */
+declare const fontFamily: {
+    readonly toss: "\"Toss Product Sans\", \"Pretendard\", system-ui, sans-serif";
+    readonly pretendard: "\"Pretendard Variable\", \"Pretendard\", system-ui, sans-serif";
+    readonly inter: "\"Inter\", system-ui, sans-serif";
+};
+
+export { AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, type ColorName, Divider, EmptyState, type EmptyStateProps, type FontName, Section, SectionHeader, type SectionHeaderProps, type SectionProps, StatChip, type StatChipProps, Tab, TabBar, type TabBarProps, type TabProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogProps, Watermark, type WatermarkProps, colors, fontFamily, fonts };

package/dist/index.js

@@ -31,7 +31,12 @@ __export(index_exports, {
   StatChip: () => StatChip,
   Tab: () => Tab,
   TabBar: () => TabBar,
-  Watermark: () => Watermark
+  ThemeButton: () => ThemeButton,
+  ThemeDialog: () => ThemeDialog,
+  Watermark: () => Watermark,
+  colors: () => colors,
+  fontFamily: () => fontFamily,
+  fonts: () => fonts
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -62,7 +67,7 @@ function AppShellHeader({ children, className = "" }) {
   );
 }
 function AppShellContent({ children, className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `flex-1 overflow-y-auto ${className}`, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `flex-1 overflow-y-auto scrollbar-hide ${className}`, children });
 }
 
 // src/components/tab-bar.tsx
@@ -177,6 +182,108 @@ function Watermark({
     }
   );
 }
+
+// src/components/colors.ts
+var colors = {
+  blue: "#3b82f6",
+  purple: "#8b5cf6",
+  green: "#10b981",
+  orange: "#f97316",
+  pink: "#ec4899",
+  red: "#ef4444",
+  yellow: "#eab308",
+  cyan: "#06b6d4",
+  slate: "#0f172a",
+  zinc: "#27272a"
+};
+
+// src/components/theme-picker.tsx
+var import_react = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ThemeButton({ color, onClick, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "button",
+    {
+      onClick,
+      className: `w-7 h-7 rounded-full border-2 border-white dark:border-zinc-700 shadow-sm transition-transform hover:scale-110 ${className}`,
+      style: { backgroundColor: color },
+      title: "Change theme"
+    }
+  );
+}
+function ThemeDialog({
+  open,
+  onClose,
+  current,
+  onSelect,
+  palette = colors
+}) {
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  if (!open) return null;
+  const entries = Object.entries(palette);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "fixed inset-0 z-50 flex items-end justify-center", onClick: onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        className: "relative z-10 w-full max-w-[406px] mb-3 mx-3 rounded-2xl bg-white dark:bg-zinc-900 shadow-2xl overflow-hidden",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "px-4 pt-4 pb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-bold text-zinc-900 dark:text-white", children: "Theme Color" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-zinc-400 dark:text-zinc-500 mt-0.5", children: "Change the Watermark background" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 pb-3 grid grid-cols-5 gap-3 justify-items-center", children: entries.map(([name, value]) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              onClick: () => {
+                onSelect(value);
+                onClose();
+              },
+              className: `relative w-11 h-11 rounded-full transition-all hover:scale-110 ${current === value ? "ring-2 ring-offset-2 ring-offset-white dark:ring-offset-zinc-900" : ""}`,
+              style: {
+                backgroundColor: value,
+                ...current === value ? { ["--tw-ring-color"]: value } : {}
+              },
+              children: current === value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "20 6 9 17 4 12" }) }) })
+            },
+            value
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 py-3 border-t border-zinc-100 dark:border-zinc-800", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              className: "w-full py-2.5 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors",
+              children: "Close"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/fonts.ts
+var fonts = {
+  /** Toss Product Sans — from toss.im (free for commercial use) */
+  toss: "https://static.toss.im/dist/tps.css",
+  /** Pretendard — popular Korean web font */
+  pretendard: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css",
+  /** Inter — clean Latin sans-serif */
+  inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"
+};
+var fontFamily = {
+  toss: '"Toss Product Sans", "Pretendard", system-ui, sans-serif',
+  pretendard: '"Pretendard Variable", "Pretendard", system-ui, sans-serif',
+  inter: '"Inter", system-ui, sans-serif'
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppShell,
@@ -189,6 +296,11 @@ function Watermark({
   StatChip,
   Tab,
   TabBar,
-  Watermark
+  ThemeButton,
+  ThemeDialog,
+  Watermark,
+  colors,
+  fontFamily,
+  fonts
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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"]}
+{"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","../src/components/colors.ts","../src/components/theme-picker.tsx","../src/components/fonts.ts"],"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\nexport { colors } from \"./components/colors\";\nexport type { ColorName } from \"./components/colors\";\n\nexport { ThemeButton, ThemeDialog } from \"./components/theme-picker\";\nexport type { ThemeButtonProps, ThemeDialogProps } from \"./components/theme-picker\";\n\nexport { fonts, fontFamily } from \"./components/fonts\";\nexport type { FontName } from \"./components/fonts\";\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 scrollbar-hide ${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","export const colors = {\n  blue: \"#3b82f6\",\n  purple: \"#8b5cf6\",\n  green: \"#10b981\",\n  orange: \"#f97316\",\n  pink: \"#ec4899\",\n  red: \"#ef4444\",\n  yellow: \"#eab308\",\n  cyan: \"#06b6d4\",\n  slate: \"#0f172a\",\n  zinc: \"#27272a\",\n} as const;\n\nexport type ColorName = keyof typeof colors;\n","import { type ReactNode, useState, useEffect } from \"react\";\nimport { colors } from \"./colors\";\n\nexport interface ThemeButtonProps {\n  color: string;\n  onClick: () => void;\n  className?: string;\n}\n\n/**\n * Small circular button showing the current theme color.\n * Designed for the AppShellHeader top-right slot.\n */\nexport function ThemeButton({ color, onClick, className = \"\" }: ThemeButtonProps) {\n  return (\n    <button\n      onClick={onClick}\n      className={`w-7 h-7 rounded-full border-2 border-white dark:border-zinc-700 shadow-sm transition-transform hover:scale-110 ${className}`}\n      style={{ backgroundColor: color }}\n      title=\"Change theme\"\n    />\n  );\n}\n\nexport interface ThemeDialogProps {\n  open: boolean;\n  onClose: () => void;\n  current: string;\n  onSelect: (color: string) => void;\n  /** Override the color palette. Defaults to built-in colors. */\n  palette?: Record<string, string>;\n}\n\n/**\n * Bottom-sheet style color picker dialog.\n * Shows a 5-column grid of color circles with check on the active one.\n */\nexport function ThemeDialog({\n  open,\n  onClose,\n  current,\n  onSelect,\n  palette = colors,\n}: ThemeDialogProps) {\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose();\n    };\n    window.addEventListener(\"keydown\", handler);\n    return () => window.removeEventListener(\"keydown\", handler);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  const entries = Object.entries(palette);\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-end justify-center\" onClick={onClose}>\n      <div className=\"absolute inset-0 bg-black/40 backdrop-blur-sm\" />\n      <div\n        className=\"relative z-10 w-full max-w-[406px] mb-3 mx-3 rounded-2xl bg-white dark:bg-zinc-900 shadow-2xl overflow-hidden\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className=\"px-4 pt-4 pb-2\">\n          <p className=\"text-sm font-bold text-zinc-900 dark:text-white\">Theme Color</p>\n          <p className=\"text-xs text-zinc-400 dark:text-zinc-500 mt-0.5\">\n            Change the Watermark background\n          </p>\n        </div>\n\n        <div className=\"px-4 pb-3 grid grid-cols-5 gap-3 justify-items-center\">\n          {entries.map(([name, value]) => (\n            <button\n              key={value}\n              onClick={() => {\n                onSelect(value);\n                onClose();\n              }}\n              className={`relative w-11 h-11 rounded-full transition-all hover:scale-110 ${\n                current === value\n                  ? \"ring-2 ring-offset-2 ring-offset-white dark:ring-offset-zinc-900\"\n                  : \"\"\n              }`}\n              style={{\n                backgroundColor: value,\n                ...(current === value ? { [\"--tw-ring-color\" as string]: value } : {}),\n              }}\n            >\n              {current === value && (\n                <div className=\"absolute inset-0 flex items-center justify-center\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <polyline points=\"20 6 9 17 4 12\" />\n                  </svg>\n                </div>\n              )}\n            </button>\n          ))}\n        </div>\n\n        <div className=\"px-4 py-3 border-t border-zinc-100 dark:border-zinc-800\">\n          <button\n            onClick={onClose}\n            className=\"w-full py-2.5 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors\"\n          >\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n","/**\n * Font presets for @m1kapp/ui.\n * These return CSS @import strings to load fonts from official CDNs.\n * No font files are bundled — only references to the original sources.\n */\n\nexport const fonts = {\n  /** Toss Product Sans — from toss.im (free for commercial use) */\n  toss: 'https://static.toss.im/dist/tps.css',\n  /** Pretendard — popular Korean web font */\n  pretendard: 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css',\n  /** Inter — clean Latin sans-serif */\n  inter: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap',\n} as const;\n\nexport type FontName = keyof typeof fonts;\n\n/**\n * Returns a <link> href for the given font preset.\n * Usage in your HTML head or via a <link> tag:\n *\n * ```tsx\n * <link rel=\"stylesheet\" href={fonts.toss} />\n * ```\n *\n * Or in CSS:\n * ```css\n * @import url(\"https://static.toss.im/dist/tps.css\");\n * body { font-family: \"Toss Product Sans\", sans-serif; }\n * ```\n */\nexport const fontFamily = {\n  toss: '\"Toss Product Sans\", \"Pretendard\", system-ui, sans-serif',\n  pretendard: '\"Pretendard Variable\", \"Pretendard\", system-ui, sans-serif',\n  inter: '\"Inter\", system-ui, sans-serif',\n} as const;\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","import_jsx_runtime"]}

package/dist/index.mjs

@@ -27,7 +27,7 @@ function AppShellHeader({ children, className = "" }) {
   );
 }
 function AppShellContent({ children, className = "" }) {
-  return /* @__PURE__ */ jsx("div", { className: `flex-1 overflow-y-auto ${className}`, children });
+  return /* @__PURE__ */ jsx("div", { className: `flex-1 overflow-y-auto scrollbar-hide ${className}`, children });
 }
 
 // src/components/tab-bar.tsx
@@ -142,6 +142,108 @@ function Watermark({
     }
   );
 }
+
+// src/components/colors.ts
+var colors = {
+  blue: "#3b82f6",
+  purple: "#8b5cf6",
+  green: "#10b981",
+  orange: "#f97316",
+  pink: "#ec4899",
+  red: "#ef4444",
+  yellow: "#eab308",
+  cyan: "#06b6d4",
+  slate: "#0f172a",
+  zinc: "#27272a"
+};
+
+// src/components/theme-picker.tsx
+import { useEffect } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function ThemeButton({ color, onClick, className = "" }) {
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      onClick,
+      className: `w-7 h-7 rounded-full border-2 border-white dark:border-zinc-700 shadow-sm transition-transform hover:scale-110 ${className}`,
+      style: { backgroundColor: color },
+      title: "Change theme"
+    }
+  );
+}
+function ThemeDialog({
+  open,
+  onClose,
+  current,
+  onSelect,
+  palette = colors
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  if (!open) return null;
+  const entries = Object.entries(palette);
+  return /* @__PURE__ */ jsxs5("div", { className: "fixed inset-0 z-50 flex items-end justify-center", onClick: onClose, children: [
+    /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm" }),
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: "relative z-10 w-full max-w-[406px] mb-3 mx-3 rounded-2xl bg-white dark:bg-zinc-900 shadow-2xl overflow-hidden",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: "px-4 pt-4 pb-2", children: [
+            /* @__PURE__ */ jsx8("p", { className: "text-sm font-bold text-zinc-900 dark:text-white", children: "Theme Color" }),
+            /* @__PURE__ */ jsx8("p", { className: "text-xs text-zinc-400 dark:text-zinc-500 mt-0.5", children: "Change the Watermark background" })
+          ] }),
+          /* @__PURE__ */ jsx8("div", { className: "px-4 pb-3 grid grid-cols-5 gap-3 justify-items-center", children: entries.map(([name, value]) => /* @__PURE__ */ jsx8(
+            "button",
+            {
+              onClick: () => {
+                onSelect(value);
+                onClose();
+              },
+              className: `relative w-11 h-11 rounded-full transition-all hover:scale-110 ${current === value ? "ring-2 ring-offset-2 ring-offset-white dark:ring-offset-zinc-900" : ""}`,
+              style: {
+                backgroundColor: value,
+                ...current === value ? { ["--tw-ring-color"]: value } : {}
+              },
+              children: current === value && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("polyline", { points: "20 6 9 17 4 12" }) }) })
+            },
+            value
+          )) }),
+          /* @__PURE__ */ jsx8("div", { className: "px-4 py-3 border-t border-zinc-100 dark:border-zinc-800", children: /* @__PURE__ */ jsx8(
+            "button",
+            {
+              onClick: onClose,
+              className: "w-full py-2.5 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors",
+              children: "Close"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/fonts.ts
+var fonts = {
+  /** Toss Product Sans — from toss.im (free for commercial use) */
+  toss: "https://static.toss.im/dist/tps.css",
+  /** Pretendard — popular Korean web font */
+  pretendard: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css",
+  /** Inter — clean Latin sans-serif */
+  inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"
+};
+var fontFamily = {
+  toss: '"Toss Product Sans", "Pretendard", system-ui, sans-serif',
+  pretendard: '"Pretendard Variable", "Pretendard", system-ui, sans-serif',
+  inter: '"Inter", system-ui, sans-serif'
+};
 export {
   AppShell,
   AppShellContent,
@@ -153,6 +255,11 @@ export {
   StatChip,
   Tab,
   TabBar,
-  Watermark
+  ThemeButton,
+  ThemeDialog,
+  Watermark,
+  colors,
+  fontFamily,
+  fonts
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +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"]}
+{"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","../src/components/colors.ts","../src/components/theme-picker.tsx","../src/components/fonts.ts"],"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 scrollbar-hide ${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","export const colors = {\n  blue: \"#3b82f6\",\n  purple: \"#8b5cf6\",\n  green: \"#10b981\",\n  orange: \"#f97316\",\n  pink: \"#ec4899\",\n  red: \"#ef4444\",\n  yellow: \"#eab308\",\n  cyan: \"#06b6d4\",\n  slate: \"#0f172a\",\n  zinc: \"#27272a\",\n} as const;\n\nexport type ColorName = keyof typeof colors;\n","import { type ReactNode, useState, useEffect } from \"react\";\nimport { colors } from \"./colors\";\n\nexport interface ThemeButtonProps {\n  color: string;\n  onClick: () => void;\n  className?: string;\n}\n\n/**\n * Small circular button showing the current theme color.\n * Designed for the AppShellHeader top-right slot.\n */\nexport function ThemeButton({ color, onClick, className = \"\" }: ThemeButtonProps) {\n  return (\n    <button\n      onClick={onClick}\n      className={`w-7 h-7 rounded-full border-2 border-white dark:border-zinc-700 shadow-sm transition-transform hover:scale-110 ${className}`}\n      style={{ backgroundColor: color }}\n      title=\"Change theme\"\n    />\n  );\n}\n\nexport interface ThemeDialogProps {\n  open: boolean;\n  onClose: () => void;\n  current: string;\n  onSelect: (color: string) => void;\n  /** Override the color palette. Defaults to built-in colors. */\n  palette?: Record<string, string>;\n}\n\n/**\n * Bottom-sheet style color picker dialog.\n * Shows a 5-column grid of color circles with check on the active one.\n */\nexport function ThemeDialog({\n  open,\n  onClose,\n  current,\n  onSelect,\n  palette = colors,\n}: ThemeDialogProps) {\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose();\n    };\n    window.addEventListener(\"keydown\", handler);\n    return () => window.removeEventListener(\"keydown\", handler);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  const entries = Object.entries(palette);\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-end justify-center\" onClick={onClose}>\n      <div className=\"absolute inset-0 bg-black/40 backdrop-blur-sm\" />\n      <div\n        className=\"relative z-10 w-full max-w-[406px] mb-3 mx-3 rounded-2xl bg-white dark:bg-zinc-900 shadow-2xl overflow-hidden\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className=\"px-4 pt-4 pb-2\">\n          <p className=\"text-sm font-bold text-zinc-900 dark:text-white\">Theme Color</p>\n          <p className=\"text-xs text-zinc-400 dark:text-zinc-500 mt-0.5\">\n            Change the Watermark background\n          </p>\n        </div>\n\n        <div className=\"px-4 pb-3 grid grid-cols-5 gap-3 justify-items-center\">\n          {entries.map(([name, value]) => (\n            <button\n              key={value}\n              onClick={() => {\n                onSelect(value);\n                onClose();\n              }}\n              className={`relative w-11 h-11 rounded-full transition-all hover:scale-110 ${\n                current === value\n                  ? \"ring-2 ring-offset-2 ring-offset-white dark:ring-offset-zinc-900\"\n                  : \"\"\n              }`}\n              style={{\n                backgroundColor: value,\n                ...(current === value ? { [\"--tw-ring-color\" as string]: value } : {}),\n              }}\n            >\n              {current === value && (\n                <div className=\"absolute inset-0 flex items-center justify-center\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <polyline points=\"20 6 9 17 4 12\" />\n                  </svg>\n                </div>\n              )}\n            </button>\n          ))}\n        </div>\n\n        <div className=\"px-4 py-3 border-t border-zinc-100 dark:border-zinc-800\">\n          <button\n            onClick={onClose}\n            className=\"w-full py-2.5 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors\"\n          >\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n","/**\n * Font presets for @m1kapp/ui.\n * These return CSS @import strings to load fonts from official CDNs.\n * No font files are bundled — only references to the original sources.\n */\n\nexport const fonts = {\n  /** Toss Product Sans — from toss.im (free for commercial use) */\n  toss: 'https://static.toss.im/dist/tps.css',\n  /** Pretendard — popular Korean web font */\n  pretendard: 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css',\n  /** Inter — clean Latin sans-serif */\n  inter: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap',\n} as const;\n\nexport type FontName = keyof typeof fonts;\n\n/**\n * Returns a <link> href for the given font preset.\n * Usage in your HTML head or via a <link> tag:\n *\n * ```tsx\n * <link rel=\"stylesheet\" href={fonts.toss} />\n * ```\n *\n * Or in CSS:\n * ```css\n * @import url(\"https://static.toss.im/dist/tps.css\");\n * body { font-family: \"Toss Product Sans\", sans-serif; }\n * ```\n */\nexport const fontFamily = {\n  toss: '\"Toss Product Sans\", \"Pretendard\", system-ui, sans-serif',\n  pretendard: '\"Pretendard Variable\", \"Pretendard\", system-ui, sans-serif',\n  inter: '\"Inter\", system-ui, sans-serif',\n} as const;\n"],"mappings":"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","names":["jsx","jsx","jsx","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m1kapp/ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Mobile-first app shell UI components for side projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",