@maxsteinwender/sort-ui 0.1.0 → 0.1.1

package/README.md

@@ -2,6 +2,41 @@
 
 A coded design system based on the [Sort UI Kit](https://sortui.company) — Figma components translated into production-ready Next.js components, documented in Storybook.
 
+**npm package:** [`@maxsteinwender/sort-ui`](https://www.npmjs.com/package/@maxsteinwender/sort-ui)
+
+## Install
+
+```bash
+npm install @maxsteinwender/sort-ui
+```
+
+**Usage:**
+
+```tsx
+// 1. Import styles once in your app root (e.g. layout.tsx, _app.tsx, main.tsx)
+import '@maxsteinwender/sort-ui/styles.css'
+
+// 2. Import components
+import { Button, Avatar, StatusBadge } from '@maxsteinwender/sort-ui'
+```
+
+**Next.js with Tailwind (optional):** extend your Tailwind config with Sort UI tokens:
+
+```js
+// tailwind.config.js
+import sortUIPreset from '@maxsteinwender/sort-ui/tailwind-preset'
+
+export default {
+  presets: [sortUIPreset],
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@maxsteinwender/sort-ui/dist/**/*.js',
+  ],
+}
+```
+
+---
+
 ## Overview
 
 | | |

package/dist/styles.css

@@ -13024,7 +13024,7 @@
 @font-face {
   font-family: 'Redaction';
 
-  src: url('/fonts/Redaction/webfonts/Redaction-Regular.woff2') format('woff2');
+  src: url('./fonts/Redaction/webfonts/Redaction-Regular.woff2') format('woff2');
 
   font-weight: 400;
 
@@ -13036,7 +13036,7 @@
 @font-face {
   font-family: 'Redaction';
 
-  src: url('/fonts/Redaction/webfonts/Redaction-Italic.woff2') format('woff2');
+  src: url('./fonts/Redaction/webfonts/Redaction-Italic.woff2') format('woff2');
 
   font-weight: 400;
 
@@ -13048,7 +13048,7 @@
 @font-face {
   font-family: 'Redaction';
 
-  src: url('/fonts/Redaction/webfonts/Redaction-Bold.woff2') format('woff2');
+  src: url('./fonts/Redaction/webfonts/Redaction-Bold.woff2') format('woff2');
 
   font-weight: 700;
 
@@ -13062,7 +13062,7 @@
 @font-face {
   font-family: 'Redaction 35';
 
-  src: url('/fonts/Redaction/webfonts/Redaction_35-Regular.woff2') format('woff2');
+  src: url('./fonts/Redaction/webfonts/Redaction_35-Regular.woff2') format('woff2');
 
   font-weight: 400;
 
@@ -13074,7 +13074,7 @@
 @font-face {
   font-family: 'Redaction 35';
 
-  src: url('/fonts/Redaction/webfonts/Redaction_35-Italic.woff2') format('woff2');
+  src: url('./fonts/Redaction/webfonts/Redaction_35-Italic.woff2') format('woff2');
 
   font-weight: 400;
 
@@ -13086,7 +13086,7 @@
 @font-face {
   font-family: 'Redaction 35';
 
-  src: url('/fonts/Redaction/webfonts/Redaction_35-Bold.woff2') format('woff2');
+  src: url('./fonts/Redaction/webfonts/Redaction_35-Bold.woff2') format('woff2');
 
   font-weight: 700;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxsteinwender/sort-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A coded design system based on Sort UI Kit — Figma components as production-ready Next.js/Tailwind components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -28,8 +28,10 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "build:lib": "tsup && npm run build:lib:css",
+    "build:lib": "tsup && npm run build:lib:css && npm run build:lib:fonts && npm run build:lib:fix-font-urls",
     "build:lib:css": "tailwindcss -i src/app/globals.css -o dist/styles.css --config tailwind.config.ts",
+    "build:lib:fonts": "mkdir -p dist/fonts/Redaction && cp -r public/fonts/Redaction/webfonts dist/fonts/Redaction/",
+    "build:lib:fix-font-urls": "sed -i '' \"s|url('/fonts/|url('./fonts/|g\" dist/styles.css",
     "start": "next start",
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",