Convert app into @modernsk/ui component library package

- Add library entry (src/index.ts) re-exporting all components, theme,
  and TooltipProvider
- Add shippable stylesheet (src/styles/index.css): tokens + components
  only, font inlined as base64 at build time
- Build with tsup (ESM + CJS + .d.ts) and esbuild for CSS
- package.json: exports map, files, sideEffects, peerDependencies
  (react/react-dom), correct deps (radix-ui), prepare-on-install
- Fix phantom dependency: declare radix-ui, drop unused @radix-ui/themes
- Remove Storybook boilerplate, Tailwind/PostCSS (unused)
- Keep App.tsx + Rsbuild as dev-only playground (not published)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-05-30 23:14:34 +03:00
commit 01d41c2346
24 changed files with 7390 additions and 0 deletions
+32
View File
@@ -0,0 +1,32 @@
@import './tokens.css';
@import './components.css';
*{ box-sizing:border-box; margin:0; padding:0; }
html{ height:100%; }
body{
min-height:100vh;
font-family:var(--font-sans);
color:var(--fg-1);
-webkit-font-smoothing:antialiased;
}
/* Kitchen Sink layout helpers (ported from the prototype's inline <style>) */
.wrap{ max-width:1100px; margin:0 auto; padding:64px 40px 120px; position:relative; z-index:1; }
.word{ font-family:var(--font-display); font-size:30px; letter-spacing:.01em; text-transform:uppercase; }
.word b{ color:var(--lime); font-weight:400; }
.sub{ color:var(--fg-2); font-size:15px; margin-top:8px; max-width:560px; line-height:1.5; }
.topbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
section{ margin-top:52px; }
.sec-label{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-3); margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.sec-label::after{ content:""; flex:1; height:1px; background:var(--hair); }
.grid{ display:grid; gap:18px; }
.cluster{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.stack{ display:flex; flex-direction:column; gap:14px; }
.cap{ font-size:11px; font-weight:600; color:var(--fg-3); text-transform:uppercase; letter-spacing:.14em; margin-bottom:10px; }
.lab{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--fg-3); margin-bottom:5px; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.panel{ padding:20px; }