@n3wth/ui 0.1.0

package/dist/tokens/colors.d.ts

@@ -0,0 +1,56 @@
+export declare const colors: {
+    readonly dark: {
+        readonly bg: "#000000";
+        readonly bgSecondary: "#0a0a0a";
+        readonly white: "#ffffff";
+        readonly grey: {
+            readonly 100: "#f5f5f7";
+            readonly 200: "#e8e8ed";
+            readonly 300: "#c7c7cc";
+            readonly 400: "#86868b";
+            readonly 600: "#6e6e73";
+            readonly 800: "#1d1d1f";
+        };
+        readonly accent: "#ffffff";
+        readonly accentSoft: "rgba(255, 255, 255, 0.15)";
+        readonly glass: {
+            readonly bg: "rgba(255, 255, 255, 0.05)";
+            readonly border: "rgba(255, 255, 255, 0.1)";
+            readonly highlight: "rgba(255, 255, 255, 0.15)";
+        };
+        readonly category: {
+            readonly sage: "#30d158";
+            readonly coral: "#ff6961";
+            readonly mint: "#64d2ff";
+            readonly gold: "#ffd60a";
+        };
+    };
+    readonly light: {
+        readonly bg: "#ffffff";
+        readonly bgSecondary: "#f5f5f7";
+        readonly white: "#1d1d1f";
+        readonly grey: {
+            readonly 100: "#1d1d1f";
+            readonly 200: "#3a3a3c";
+            readonly 300: "#48484a";
+            readonly 400: "#636366";
+            readonly 600: "#8e8e93";
+            readonly 800: "#e5e5ea";
+        };
+        readonly accent: "#1d1d1f";
+        readonly accentSoft: "rgba(0, 0, 0, 0.1)";
+        readonly glass: {
+            readonly bg: "rgba(0, 0, 0, 0.03)";
+            readonly border: "rgba(0, 0, 0, 0.08)";
+            readonly highlight: "rgba(0, 0, 0, 0.12)";
+        };
+        readonly category: {
+            readonly sage: "#248a3d";
+            readonly coral: "#d70015";
+            readonly mint: "#0071e3";
+            readonly gold: "#b25000";
+        };
+    };
+};
+export type ColorMode = keyof typeof colors;
+//# sourceMappingURL=colors.d.ts.map

package/dist/tokens/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDT,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,MAAM,CAAA"}

package/dist/tokens/effects.d.ts

@@ -0,0 +1,20 @@
+export declare const effects: {
+    readonly transition: {
+        readonly fast: "0.15s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly base: "0.2s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly slow: "0.3s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly spring: "0.35s cubic-bezier(0.4, 0, 0.2, 1)";
+    };
+    readonly backdropBlur: {
+        readonly sm: "8px";
+        readonly md: "12px";
+        readonly lg: "20px";
+        readonly xl: "40px";
+    };
+    readonly scale: {
+        readonly press: "0.96";
+        readonly hover: "1.02";
+        readonly active: "1.05";
+    };
+};
+//# sourceMappingURL=effects.d.ts.map

package/dist/tokens/effects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"effects.d.ts","sourceRoot":"","sources":["../../src/tokens/effects.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;CAqBV,CAAA"}

package/dist/tokens/index.d.ts

@@ -0,0 +1,5 @@
+export * from './colors';
+export * from './typography';
+export * from './spacing';
+export * from './effects';
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA"}

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,28 @@
+export declare const spacing: {
+    readonly px: "1px";
+    readonly 0: "0";
+    readonly 0.5: "0.125rem";
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 16: "4rem";
+    readonly 20: "5rem";
+    readonly 24: "6rem";
+    readonly 32: "8rem";
+};
+export declare const borderRadius: {
+    readonly none: "0";
+    readonly sm: "0.25rem";
+    readonly md: "0.5rem";
+    readonly lg: "1rem";
+    readonly xl: "1.25rem";
+    readonly '2xl': "1.5rem";
+    readonly full: "9999px";
+};
+//# sourceMappingURL=spacing.d.ts.map

package/dist/tokens/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/tokens/spacing.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;CAiBV,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAA"}

package/dist/tokens/typography.d.ts

@@ -0,0 +1,46 @@
+export declare const typography: {
+    readonly fontFamily: {
+        readonly display: "'Mona Sans', system-ui, sans-serif";
+        readonly sans: "'Geist Sans', system-ui, sans-serif";
+        readonly mono: "'Geist Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace";
+    };
+    readonly fontSize: {
+        readonly xs: "0.6875rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "2rem";
+        readonly '4xl': "2.5rem";
+        readonly '5xl': "3rem";
+        readonly '6xl': "4rem";
+        readonly '7xl': "5rem";
+        readonly '8xl': "6rem";
+        readonly '9xl': "8rem";
+        readonly '10xl': "10rem";
+    };
+    readonly fontWeight: {
+        readonly light: "300";
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+        readonly extrabold: "800";
+        readonly black: "900";
+    };
+    readonly letterSpacing: {
+        readonly tighter: "-0.05em";
+        readonly tight: "-0.025em";
+        readonly normal: "0";
+        readonly wide: "0.08em";
+    };
+    readonly lineHeight: {
+        readonly none: "1";
+        readonly tight: "1.1";
+        readonly snug: "1.25";
+        readonly normal: "1.5";
+        readonly relaxed: "1.625";
+    };
+};
+//# sourceMappingURL=typography.d.ts.map

package/dist/tokens/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/tokens/typography.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Cb,CAAA"}

package/dist/utils/cn.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@n3wth/ui",
+  "version": "0.1.0",
+  "description": "Atomic design system for Newth sites - flat, minimal, iOS-inspired",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/styles.css",
+    "./tailwind": "./tailwind.preset.js"
+  },
+  "files": [
+    "dist",
+    "tailwind.preset.js",
+    "public"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "demo": "vite --config vite.demo.config.ts",
+    "demo:build": "vite build --config vite.demo.config.ts",
+    "build": "tsc && vite build && node -e \"const fs=require('fs');const css=fs.readFileSync('src/styles.css','utf8').replace(/@import 'tailwindcss';\\n\\n/,'');fs.writeFileSync('dist/styles.css',css)\"",
+    "lint": "eslint src",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.5.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "tailwind",
+    "atomic-design"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/n3wth/ui"
+  }
+}

package/tailwind.preset.js

@@ -0,0 +1,59 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      fontFamily: {
+        display: ['Mona Sans', 'system-ui', 'sans-serif'],
+        sans: ['Geist Sans', 'system-ui', 'sans-serif'],
+        mono: ['Geist Mono', 'ui-monospace', 'SF Mono', 'Menlo', 'Monaco', 'monospace'],
+      },
+      colors: {
+        bg: 'var(--color-bg)',
+        'bg-secondary': 'var(--color-bg-secondary)',
+        white: 'var(--color-white)',
+        grey: {
+          100: 'var(--color-grey-100)',
+          200: 'var(--color-grey-200)',
+          300: 'var(--color-grey-300)',
+          400: 'var(--color-grey-400)',
+          600: 'var(--color-grey-600)',
+          800: 'var(--color-grey-800)',
+        },
+        accent: 'var(--color-accent)',
+        'accent-soft': 'var(--color-accent-soft)',
+        sage: 'var(--color-sage)',
+        coral: 'var(--color-coral)',
+        mint: 'var(--color-mint)',
+        gold: 'var(--color-gold)',
+        glass: {
+          bg: 'var(--glass-bg)',
+          border: 'var(--glass-border)',
+          highlight: 'var(--glass-highlight)',
+        },
+      },
+      borderRadius: {
+        DEFAULT: '1rem',
+        card: '1.25rem',
+        pill: '9999px',
+      },
+      transitionTimingFunction: {
+        'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)',
+        'spring': 'cubic-bezier(0.4, 0, 0.2, 1)',
+      },
+      animation: {
+        'fade-up': 'fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards',
+        'gradient-shift': 'gradientShift 8s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeUp: {
+          from: { opacity: '0', transform: 'translateY(24px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        gradientShift: {
+          '0%, 100%': { backgroundPosition: '0% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
+        },
+      },
+    },
+  },
+}