Files

T

olly 01d41c2346 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>

2026-05-30 23:14:34 +03:00

1.6 KiB

Raw Blame History

@modernsk/ui

Tactile, dark-first React component library built on Radix primitives. Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.

Install

Git-hosted (pin to a tag):

npm install github:YOUR_ORG/modernsk-ui#v0.1.0

react and react-dom (>=18) are peer dependencies — your app provides them. The package builds itself on install via the prepare script.

Usage

Import the stylesheet once at your app root, then use components anywhere:

import '@modernsk/ui/styles.css';
import { ThemeProvider, TooltipProvider, Button, Card } from '@modernsk/ui';

export function App() {
  return (
    <ThemeProvider>
      <TooltipProvider delayDuration={200}>
        <Card>
          <Button variant="primary">Click</Button>
        </Card>
      </TooltipProvider>
    </ThemeProvider>
  );
}

ThemeProvider manages dark/light via data-theme on <html> and persists to localStorage. Read it with useTheme().
TooltipProvider must wrap any tree that uses <Tooltip>.
All visuals come from CSS custom properties in the shipped stylesheet; the self-hosted display font is inlined, so no extra asset hosting is needed.

Develop

A live playground (every component on one page) runs via Rsbuild:

npm run dev      # playground at http://localhost:3000
npm run build    # build the publishable package into dist/
npm run lint

What ships

npm publish / git-install exposes only dist/ — built ESM + CJS, .d.ts types, and styles.css. The playground (src/App.tsx, Rsbuild config) is dev-only and never published.