@petnow/ui 1.6.24 → 1.7.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 (9) hide show
  1. package/README.md +5 -0
  2. package/dist/index.css +2 -3
  3. package/dist/index.es.js +536 -536
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.umd.js +9 -9
  6. package/dist/index.umd.js.map +1 -1
  7. package/package.json +6 -6
  8. package/tailwind.css +152 -0
  9. package/tailwind.config.ts +0 -158
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@petnow/ui",
3
- "version": "1.6.24",
3
+ "version": "1.7.1",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",
7
7
  "build": "tsc && vite build && npm run tailwind",
8
- "tailwind": "npx tailwindcss -i ./src/index.css -o ./dist/index.css --minify",
8
+ "tailwind": "npx @tailwindcss/cli -i ./src/index.css -o ./dist/index.css --minify",
9
9
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10
10
  "lint:fix": "eslint . --ext ts,tsx --fix",
11
11
  "preview": "vite preview",
@@ -35,6 +35,7 @@
35
35
  "@storybook/react": "^8.4.6",
36
36
  "@storybook/react-vite": "^8.4.6",
37
37
  "@storybook/test": "^8.4.6",
38
+ "@tailwindcss/postcss": "^4.0.0",
38
39
  "@testing-library/jest-dom": "^6.6.3",
39
40
  "@testing-library/react": "^16.1.0",
40
41
  "@testing-library/user-event": "^14.6.1",
@@ -45,7 +46,6 @@
45
46
  "@typescript-eslint/eslint-plugin": "^7.18.0",
46
47
  "@typescript-eslint/parser": "^7.18.0",
47
48
  "@vitejs/plugin-react": "^4.3.4",
48
- "autoprefixer": "^10.4.20",
49
49
  "eslint": "^8.57.0",
50
50
  "eslint-plugin-import": "^2.31.0",
51
51
  "eslint-plugin-react-hooks": "^5.0.0",
@@ -59,7 +59,7 @@
59
59
  "prettier": "^3.4.2",
60
60
  "prettier-plugin-tailwindcss": "^0.6.11",
61
61
  "storybook": "^8.5.3",
62
- "tailwindcss": "^3.4.17",
62
+ "tailwindcss": "^4.0.3",
63
63
  "ts-jest": "^29.2.5",
64
64
  "ts-node": "^10.9.2",
65
65
  "typescript": "^5.7.2",
@@ -76,11 +76,11 @@
76
76
  },
77
77
  "./package.json": "./package.json",
78
78
  "./dist/*": "./dist/*",
79
- "./tailwind.config": "./tailwind.config.ts"
79
+ "./tailwind.css": "./tailwind.css"
80
80
  },
81
81
  "files": [
82
82
  "dist",
83
- "tailwind.config.ts"
83
+ "tailwind.css"
84
84
  ],
85
85
  "publishConfig": {
86
86
  "access": "public"
package/tailwind.css ADDED
@@ -0,0 +1,152 @@
1
+ @import "tailwindcss";
2
+
3
+ @theme {
4
+ --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
5
+ --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops));
6
+
7
+ --color-petnow-orange-0: #0a0b0c;
8
+ --color-petnow-orange-10: #3b1b12;
9
+ --color-petnow-orange-20: #6c2a19;
10
+ --color-petnow-orange-30: #9d3a1f;
11
+ --color-petnow-orange-40: #ce4926;
12
+ --color-petnow-orange-50: #ff592c;
13
+ --color-petnow-orange-60: #ff7a56;
14
+ --color-petnow-orange-70: #ff9b80;
15
+ --color-petnow-orange-80: #ffbdab;
16
+ --color-petnow-orange-90: #ffded5;
17
+ --color-petnow-orange-95: #ffeeea;
18
+ --color-petnow-orange-99: #fff7f4;
19
+ --color-petnow-orange-100: #ffffff;
20
+ --color-petnow-orange-primary: #ff592c;
21
+ --color-petnow-orange-secondary: #ffeeea;
22
+ --color-petnow-orange-tertiary: #fff7f4;
23
+
24
+ --color-petnow-blue-0: #0a0b0c;
25
+ --color-petnow-blue-10: #152437;
26
+ --color-petnow-blue-20: #213d63;
27
+ --color-petnow-blue-30: #2c578e;
28
+ --color-petnow-blue-40: #3870ba;
29
+ --color-petnow-blue-50: #4389e5;
30
+ --color-petnow-blue-60: #69a1ea;
31
+ --color-petnow-blue-70: #8eb8ef;
32
+ --color-petnow-blue-80: #b4d0f5;
33
+ --color-petnow-blue-90: #d9e7fa;
34
+ --color-petnow-blue-95: #ecf3fc;
35
+ --color-petnow-blue-99: #f6f9fe;
36
+ --color-petnow-blue-100: #ffffff;
37
+ --color-petnow-blue-primary: #4389e5;
38
+ --color-petnow-blue-secondary: #ecf3fc;
39
+ --color-petnow-blue-tertiary: #f6f9fe;
40
+
41
+ --color-petnow-red-50: #ff4055;
42
+ --color-petnow-red-95: #ffecf1;
43
+ --color-petnow-red-99: #fff5f8;
44
+ --color-petnow-red-primary: #ff4055;
45
+
46
+ --color-petnow-green-50: #42d48e;
47
+ --color-petnow-green-95: #ecfbf4;
48
+ --color-petnow-green-99: #f6fdf9;
49
+ --color-petnow-green-primary: #42d48e;
50
+
51
+ --color-petnow-purple-50: #af50dc;
52
+ --color-petnow-purple-95: #f7edfb;
53
+ --color-petnow-purple-99: #fbf6fd;
54
+ --color-petnow-purple-primary: #af50dc;
55
+
56
+ --color-petnow-yellow-50: #ffd22d;
57
+ --color-petnow-yellow-95: #fff8e0;
58
+ --color-petnow-yellow-99: #fffbeb;
59
+ --color-petnow-yellow-primary: #ffd22d;
60
+
61
+ --color-petnow-grey-0: #0a0b0c;
62
+ --color-petnow-grey-10: #16181a;
63
+ --color-petnow-grey-20: #2c2f34;
64
+ --color-petnow-grey-30: #42474d;
65
+ --color-petnow-grey-40: #585e67;
66
+ --color-petnow-grey-50: #6e7681;
67
+ --color-petnow-grey-60: #8b919a;
68
+ --color-petnow-grey-70: #a8adb3;
69
+ --color-petnow-grey-80: #c5c8cd;
70
+ --color-petnow-grey-90: #e2e4e6;
71
+ --color-petnow-grey-95: #f0f1f2;
72
+ --color-petnow-grey-99: #f8f8f9;
73
+ --color-petnow-grey-100: #ffffff;
74
+ --color-petnow-grey-primary: #c5c8cd;
75
+ --color-petnow-grey-secondary: #8b919a;
76
+ --color-petnow-grey-tertiary: #585e67;
77
+
78
+ --color-background-primary: #ffffff;
79
+ --color-background-secondary: #f8f8f9;
80
+ --color-background-tertiary: #f0f1f2;
81
+
82
+ --color-black: #2c2f34;
83
+ --color-error: #ff323e;
84
+
85
+ --text-display-large: font-bold text-[34px] leading-[46px] tracking-normal;
86
+ --text-display-medium: font-bold text-[28px] leading-[38px] tracking-normal;
87
+ --text-title-large: font-bold text-[24px] leading-[34px] tracking-normal;
88
+ --text-title-medium: font-bold text-[20px] leading-[30px] tracking-normal;
89
+ --text-title-small: font-bold text-[18px] leading-[26px] tracking-normal;
90
+ --text-label-large: font-bold text-[16px] leading-[24px] tracking-normal;
91
+ --text-label-medium: font-bold text-[14px] leading-[22px] tracking-normal;
92
+ --text-label-small: font-bold text-[12px] leading-[18px] tracking-normal;
93
+ --text-body-large: font-medium text-[16px] leading-[24px] tracking-normal;
94
+ --text-body-medium: font-medium text-[14px] leading-[22px] tracking-normal;
95
+ --text-body-small: font-medium text-[12px] leading-[18px] tracking-normal;
96
+ --text-caption-large: font-normal text-[16px] leading-[24px] tracking-normal;
97
+ --text-caption-medium: font-normal text-[14px] leading-[22px] tracking-normal;
98
+ --text-caption-small: font-normal text-[12px] leading-[18px] tracking-normal;
99
+ --text-badge: font-medium text-[11px] leading-[16px] tracking-normal;
100
+
101
+ @keyframes shimmer {
102
+ 100% {
103
+ transform: translateX(350%) rotate(25deg);
104
+ }
105
+ }
106
+ }
107
+
108
+ .text-display-large {
109
+ @apply text-[34px] leading-[46px] font-bold tracking-normal;
110
+ }
111
+ .text-display-medium {
112
+ @apply text-[28px] leading-[38px] font-bold tracking-normal;
113
+ }
114
+ .text-title-large {
115
+ @apply text-[24px] leading-[34px] font-bold tracking-normal;
116
+ }
117
+ .text-title-medium {
118
+ @apply text-[20px] leading-[30px] font-bold tracking-normal;
119
+ }
120
+ .text-title-small {
121
+ @apply text-[18px] leading-[26px] font-bold tracking-normal;
122
+ }
123
+ .text-label-large {
124
+ @apply text-[16px] leading-[24px] font-bold tracking-normal;
125
+ }
126
+ .text-label-medium {
127
+ @apply text-[14px] leading-[22px] font-bold tracking-normal;
128
+ }
129
+ .text-label-small {
130
+ @apply text-[12px] leading-[18px] font-bold tracking-normal;
131
+ }
132
+ .text-body-large {
133
+ @apply text-[16px] leading-[24px] font-medium tracking-normal;
134
+ }
135
+ .text-body-medium {
136
+ @apply text-[14px] leading-[22px] font-medium tracking-normal;
137
+ }
138
+ .text-body-small {
139
+ @apply text-[12px] leading-[18px] font-medium tracking-normal;
140
+ }
141
+ .text-caption-large {
142
+ @apply text-[16px] leading-[24px] font-normal tracking-normal;
143
+ }
144
+ .text-caption-medium {
145
+ @apply text-[14px] leading-[22px] font-normal tracking-normal;
146
+ }
147
+ .text-caption-small {
148
+ @apply text-[12px] leading-[18px] font-normal tracking-normal;
149
+ }
150
+ .text-badge {
151
+ @apply text-[11px] leading-[16px] font-medium tracking-normal;
152
+ }
package/tailwind.config.ts DELETED
@@ -1,158 +0,0 @@
1
- /** @type {import('tailwindcss').Config} */
2
-
3
- export default {
4
- content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
5
- theme: {
6
- extend: {
7
- backgroundImage: {
8
- "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
9
- "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
10
- },
11
- keyframes: {
12
- shimmer: {
13
- "100%": {
14
- transform: "translateX(350%) rotate(25deg)",
15
- },
16
- },
17
- },
18
- colors: {
19
- petnowOrange: {
20
- primary: "#FF592C",
21
- secondary: "#FFEEEA",
22
- tertiary: "#FFF7F4",
23
- 0: "#0A0B0C",
24
- 10: "#3B1B12",
25
- 20: "#6C2A19",
26
- 30: "#9D3A1F",
27
- 40: "#CE4926",
28
- 50: "#FF592C",
29
- 60: "#FF7A56",
30
- 70: "#FF9B80",
31
- 80: "#FFBDAB",
32
- 90: "#FFDED5",
33
- 95: "#FFEEEA",
34
- 99: "#FFF7F4",
35
- 100: "#FFFFFF",
36
- },
37
- petnowBlue: {
38
- primary: "#4389E5",
39
- secondary: "#ECF3FC",
40
- tertiary: "#F6F9FE",
41
- 0: "#0A0B0C",
42
- 10: "#152437",
43
- 20: "#213D63",
44
- 30: "#2C578E",
45
- 40: "#3870BA",
46
- 50: "#4389E5",
47
- 60: "#69A1EA",
48
- 70: "#8EB8EF",
49
- 80: "#B4D0F5",
50
- 90: "#D9E7FA",
51
- 95: "#ECF3FC",
52
- 99: "#F6F9FE",
53
- 100: "#FFFFFF",
54
- },
55
- petnowRed: {
56
- primary: "#FF4055",
57
- 50: "#FF4055",
58
- 95: "#FFECF1",
59
- 99: "#FFF5F8",
60
- },
61
- petnowGreen: {
62
- primary: "#42D48E",
63
- 50: "#42D48E",
64
- 95: "#ECFBF4",
65
- 99: "#F6FDF9",
66
- },
67
- petnowPurple: {
68
- primary: "#AF50DC",
69
- 50: "#AF50DC",
70
- 95: "#F7EDFB",
71
- 99: "#FBF6FD",
72
- },
73
- petnowYellow: {
74
- primary: "#FFD22D",
75
- 50: "#FFD22D",
76
- 95: "#FFF8E0",
77
- 99: "#FFFBEB",
78
- },
79
- petnowGrey: {
80
- primary: "#C5C8CD",
81
- secondary: "#8B919A",
82
- tertiary: "#585E67",
83
- 0: "#0A0B0C",
84
- 10: "#16181A",
85
- 20: "#2C2F34",
86
- 30: "#42474D",
87
- 40: "#585E67",
88
- 50: "#6E7681",
89
- 60: "#8B919A",
90
- 70: "#A8ADB3",
91
- 80: "#C5C8CD",
92
- 90: "#E2E4E6",
93
- 95: "#F0F1F2",
94
- 99: "#F8F8F9",
95
- 100: "#FFFFFF",
96
- },
97
- background: {
98
- primary: "#FFFFFF",
99
- secondary: "#F8F8F9",
100
- tertiary: "#F0F1F2",
101
- },
102
- black: "#2C2F34",
103
- error: "#FF323E",
104
- },
105
- },
106
- },
107
- plugins: [
108
- ({ addUtilities }: { addUtilities: any }) => {
109
- addUtilities({
110
- ".text-displayLarge": {
111
- "@apply font-bold text-[34px] leading-[46px] tracking-normal": "",
112
- },
113
- ".text-displayMedium": {
114
- "@apply font-bold text-[28px] leading-[38px] tracking-normal": "",
115
- },
116
- ".text-titleLarge": {
117
- "@apply font-bold text-[24px] leading-[34px] tracking-normal": "",
118
- },
119
- ".text-titleMedium": {
120
- "@apply font-bold text-[20px] leading-[30px] tracking-normal": "",
121
- },
122
- ".text-titleSmall": {
123
- "@apply font-bold text-[18px] leading-[26px] tracking-normal": "",
124
- },
125
- ".text-labelLarge": {
126
- "@apply font-bold text-[16px] leading-[24px] tracking-normal": "",
127
- },
128
- ".text-labelMedium": {
129
- "@apply font-bold text-[14px] leading-[22px] tracking-normal": "",
130
- },
131
- ".text-labelSmall": {
132
- "@apply font-bold text-[12px] leading-[18px] tracking-normal": "",
133
- },
134
- ".text-bodyLarge": {
135
- "@apply font-medium text-[16px] leading-[24px] tracking-normal": "",
136
- },
137
- ".text-bodyMedium": {
138
- "@apply font-medium text-[14px] leading-[22px] tracking-normal": "",
139
- },
140
- ".text-bodySmall": {
141
- "@apply font-medium text-[12px] leading-[18px] tracking-normal": "",
142
- },
143
- ".text-captionLarge": {
144
- "@apply font-normal text-[16px] leading-[24px] tracking-normal": "",
145
- },
146
- ".text-captionMedium": {
147
- "@apply font-normal text-[14px] leading-[22px] tracking-normal": "",
148
- },
149
- ".text-captionSmall": {
150
- "@apply font-normal text-[12px] leading-[18px] tracking-normal": "",
151
- },
152
- ".text-badge": {
153
- "@apply font-medium text-[11px] leading-[16px] tracking-normal": "",
154
- },
155
- });
156
- },
157
- ],
158
- };