@neoptocom/neopto-ui 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CONSUMER_SETUP.md +127 -0
  2. package/README.md +186 -0
  3. package/dist/index.cjs +836 -0
  4. package/dist/index.d.cts +290 -0
  5. package/dist/index.d.ts +290 -0
  6. package/dist/index.js +805 -0
  7. package/dist/styles.css +109 -0
  8. package/package.json +89 -0
package/dist/styles.css ADDED
@@ -0,0 +1,109 @@
1
+ /**
2
+ * @victorfbrito/neo-ui-demo - Design Tokens & Base Styles
3
+ *
4
+ * ⚠️ IMPORTANT: This library requires Tailwind CSS v4 in your project.
5
+ *
6
+ * Quick setup:
7
+ * 1. Install: npm install -D tailwindcss @tailwindcss/postcss
8
+ * 2. Create postcss.config.js with @tailwindcss/postcss plugin
9
+ * 3. In your CSS file:
10
+ * @import "tailwindcss";
11
+ * @source "../node_modules/@victorfbrito/neo-ui-demo/dist";
12
+ * @import "@victorfbrito/neo-ui-demo/styles";
13
+ *
14
+ * See: https://github.com/victorfbrito/neo-ui-demo#installation
15
+ */
16
+
17
+ /* AUTO-GENERATED FROM tokens.json */
18
+ @theme {
19
+ --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
20
+ --font-body: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
21
+ --font-sans: var(--font-body, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif);
22
+ --color-brand: #22A9CB;
23
+ --radius-sm: 0.25rem;
24
+ --radius-md: 0.375rem;
25
+ --radius-lg: 0.5rem;
26
+ --radius-xl: 0.75rem;
27
+ --radius-2xl: 1.875rem;
28
+ --bg: #F3F4F6;
29
+ --surface: #FFFFFF;
30
+ --fg: #242832;
31
+ --muted: #E5E7EB;
32
+ --muted-fg: #6B7280;
33
+ --border: #E5E7EB;
34
+ --success: #13B59F;
35
+ --warning: #D79C2C;
36
+ --destructive: #E03737;
37
+ --info: #0E91B2;
38
+ }
39
+
40
+ :root {
41
+ --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
42
+ --font-body: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
43
+ --font-sans: var(--font-body, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif);
44
+ --color-brand: #22A9CB;
45
+ --radius-sm: 0.25rem;
46
+ --radius-md: 0.375rem;
47
+ --radius-lg: 0.5rem;
48
+ --radius-xl: 0.75rem;
49
+ --radius-2xl: 1.875rem;
50
+ --bg: #F3F4F6;
51
+ --surface: #FFFFFF;
52
+ --fg: #242832;
53
+ --muted: #E5E7EB;
54
+ --muted-fg: #6B7280;
55
+ --border: #E5E7EB;
56
+ --success: #13B59F;
57
+ --warning: #D79C2C;
58
+ --destructive: #E03737;
59
+ --info: #0E91B2;
60
+ }
61
+
62
+ .dark {
63
+ color-scheme: dark;
64
+ --bg: #242832;
65
+ --surface: #2E303B;
66
+ --fg: #E4E7EC;
67
+ --muted: #3F424F;
68
+ --muted-fg: #9D9EA2;
69
+ --border: #5C5E68;
70
+ --success: #00C8AC;
71
+ --warning: #CEB25E;
72
+ --destructive: #CE645E;
73
+ --info: #5ABDCC;
74
+ }
75
+
76
+ :root {
77
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
78
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
79
+ }
80
+
81
+ :root {
82
+ --motion-fast: 150ms;
83
+ --motion-base: 200ms;
84
+ --easing-standard: cubic-bezier(0.2, 0.0, 0, 1);
85
+ }
86
+
87
+ /* Material Symbols Font */
88
+ @font-face {
89
+ font-family: 'Material Symbols Rounded';
90
+ font-style: normal;
91
+ font-weight: 100 700;
92
+ src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v272/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzaqkNCeE.woff2) format('woff2');
93
+ font-display: swap;
94
+ }
95
+
96
+ .material-symbols-rounded {
97
+ font-family: 'Material Symbols Rounded';
98
+ font-style: normal;
99
+ font-weight: 300;
100
+ font-size: 24px;
101
+ line-height: 1;
102
+ letter-spacing: normal;
103
+ text-transform: none;
104
+ display: inline-block;
105
+ vertical-align: middle;
106
+ white-space: nowrap;
107
+ -webkit-font-smoothing: antialiased;
108
+ color: inherit;
109
+ }
package/package.json ADDED
@@ -0,0 +1,89 @@
1
+ {
2
+ "name": "@neoptocom/neopto-ui",
3
+ "version": "0.2.1",
4
+ "private": false,
5
+ "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
6
+ "keywords": [
7
+ "react",
8
+ "components",
9
+ "ui",
10
+ "tailwind",
11
+ "typescript",
12
+ "design-system",
13
+ "storybook"
14
+ ],
15
+ "author": "Your Name <victor_f_brito@outlook.com>",
16
+ "license": "MIT",
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "https://github.com/neoptocom/neopto-ui.git"
20
+ },
21
+ "homepage": "https://github.com/neoptocom/neopto-ui#readme",
22
+ "bugs": {
23
+ "url": "https://github.com/neoptocom/neopto-ui/issues"
24
+ },
25
+ "type": "module",
26
+ "main": "./dist/index.cjs",
27
+ "module": "./dist/index.js",
28
+ "types": "./dist/index.d.ts",
29
+ "exports": {
30
+ ".": {
31
+ "types": "./dist/index.d.ts",
32
+ "import": "./dist/index.js",
33
+ "require": "./dist/index.cjs"
34
+ },
35
+ "./styles": "./dist/styles.css"
36
+ },
37
+ "sideEffects": [
38
+ "**/*.css"
39
+ ],
40
+ "files": [
41
+ "dist",
42
+ "CONSUMER_SETUP.md"
43
+ ],
44
+ "scripts": {
45
+ "dev": "vite",
46
+ "build:tokens": "node scripts/build-tokens.mjs",
47
+ "build": "npm run build:tokens && tsup && npm run build:css",
48
+ "build:css": "node scripts/build-css.mjs",
49
+ "typecheck": "tsc --noEmit",
50
+ "storybook": "storybook dev -p 6006",
51
+ "build-storybook": "storybook build",
52
+ "prepublishOnly": "npm run build && npm run typecheck",
53
+ "changeset": "changeset",
54
+ "version-packages": "changeset version",
55
+ "release": "changeset publish"
56
+ },
57
+ "peerDependencies": {
58
+ "react": ">=18",
59
+ "react-dom": ">=18"
60
+ },
61
+ "dependencies": {
62
+ "tailwind-variants": "^0.2.0"
63
+ },
64
+ "devDependencies": {
65
+ "@changesets/cli": "^2.27.8",
66
+ "@storybook/addon-actions": "^8.1.0",
67
+ "@storybook/addon-essentials": "^8.1.0",
68
+ "@storybook/addon-interactions": "^8.1.0",
69
+ "@storybook/react": "^8.1.0",
70
+ "@storybook/react-vite": "^8.1.0",
71
+ "@storybook/test": "^8.1.0",
72
+ "@tailwindcss/postcss": "^4.1.13",
73
+ "@tailwindcss/vite": "^4.1.13",
74
+ "@types/react": "^18.2.0",
75
+ "@types/react-dom": "^18.2.0",
76
+ "@vitejs/plugin-react": "^5.0.3",
77
+ "autoprefixer": "^10.4.21",
78
+ "postcss": "^8.5.6",
79
+ "react": "^18.2.0",
80
+ "react-dom": "^18.2.0",
81
+ "tailwindcss": "^4.1.13",
82
+ "tsup": "^8.0.1",
83
+ "typescript": "^5.6.0",
84
+ "vite": "^5.4.0"
85
+ },
86
+ "publishConfig": {
87
+ "access": "public"
88
+ }
89
+ }