@petnow/ui 1.6.18 → 1.6.20

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@petnow/ui",
-  "version": "1.6.18",
+  "version": "1.6.20",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build && npm run tailwind",
-    "tailwind": "npx tailwindcss -i ./src/index.css -o ./dist/index.css --minify",
+    "tailwind": "npx @tailwindcss/cli -i ./src/index.css -o ./dist/index.css --minify",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --ext ts,tsx --fix",
     "preview": "vite preview",
@@ -18,12 +18,12 @@
     "@headlessui/react": "^2.2.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "react": "^18.2.0",
-    "react-datepicker": "^7.5.0",
+    "react": "^19.0.0",
+    "react-datepicker": "^8.0.0",
     "react-daum-postcode": "^3.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
     "react-icons": "^5.4.0",
-    "tailwind-merge": "^2.6.0"
+    "tailwind-merge": "^3.0.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -35,12 +35,13 @@
     "@storybook/react": "^8.4.6",
     "@storybook/react-vite": "^8.4.6",
     "@storybook/test": "^8.4.6",
+    "@tailwindcss/postcss": "^4.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.10.7",
-    "@types/react": "^18.3.12",
+    "@types/node": "^22.13.0",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
@@ -55,15 +56,15 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-transformer-svg": "^2.0.2",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "storybook": "^8.4.6",
-    "tailwindcss": "^3.4.17",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "storybook": "^8.5.3",
+    "tailwindcss": "^4.0.3",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.2",
-    "vite": "^6.0.7",
+    "vite": "^6.0.11",
     "vite-plugin-dts": "^4.4.0"
   },
   "main": "dist/index.es.js",
@@ -76,11 +77,11 @@
     },
     "./package.json": "./package.json",
     "./dist/*": "./dist/*",
-    "./tailwind.config": "./tailwind.config.ts"
+    "./tailwind.css": "./tailwind.css"
   },
   "files": [
     "dist",
-    "tailwind.config.ts"
+    "tailwind.css"
   ],
   "publishConfig": {
     "access": "public"

package/tailwind.css

@@ -0,0 +1,106 @@
+@import "tailwindcss";
+
+@theme {
+  --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
+  --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops));
+
+  --color-petnow-orange-0: #0a0b0c;
+  --color-petnow-orange-10: #3b1b12;
+  --color-petnow-orange-20: #6c2a19;
+  --color-petnow-orange-30: #9d3a1f;
+  --color-petnow-orange-40: #ce4926;
+  --color-petnow-orange-50: #ff592c;
+  --color-petnow-orange-60: #ff7a56;
+  --color-petnow-orange-70: #ff9b80;
+  --color-petnow-orange-80: #ffbdab;
+  --color-petnow-orange-90: #ffded5;
+  --color-petnow-orange-95: #ffeeea;
+  --color-petnow-orange-99: #fff7f4;
+  --color-petnow-orange-100: #ffffff;
+  --color-petnow-orange-primary: #ff592c;
+  --color-petnow-orange-secondary: #ffeeea;
+  --color-petnow-orange-tertiary: #fff7f4;
+
+  --color-petnow-blue-0: #0a0b0c;
+  --color-petnow-blue-10: #152437;
+  --color-petnow-blue-20: #213d63;
+  --color-petnow-blue-30: #2c578e;
+  --color-petnow-blue-40: #3870ba;
+  --color-petnow-blue-50: #4389e5;
+  --color-petnow-blue-60: #69a1ea;
+  --color-petnow-blue-70: #8eb8ef;
+  --color-petnow-blue-80: #b4d0f5;
+  --color-petnow-blue-90: #d9e7fa;
+  --color-petnow-blue-95: #ecf3fc;
+  --color-petnow-blue-99: #f6f9fe;
+  --color-petnow-blue-100: #ffffff;
+  --color-petnow-blue-primary: #4389e5;
+  --color-petnow-blue-secondary: #ecf3fc;
+  --color-petnow-blue-tertiary: #f6f9fe;
+
+  --color-petnow-red-50: #ff4055;
+  --color-petnow-red-95: #ffecf1;
+  --color-petnow-red-99: #fff5f8;
+  --color-petnow-red-primary: #ff4055;
+
+  --color-petnow-green-50: #42d48e;
+  --color-petnow-green-95: #ecfbf4;
+  --color-petnow-green-99: #f6fdf9;
+  --color-petnow-green-primary: #42d48e;
+
+  --color-petnow-purple-50: #af50dc;
+  --color-petnow-purple-95: #f7edfb;
+  --color-petnow-purple-99: #fbf6fd;
+  --color-petnow-purple-primary: #af50dc;
+
+  --color-petnow-yellow-50: #ffd22d;
+  --color-petnow-yellow-95: #fff8e0;
+  --color-petnow-yellow-99: #fffbeb;
+  --color-petnow-yellow-primary: #ffd22d;
+
+  --color-petnow-grey-0: #0a0b0c;
+  --color-petnow-grey-10: #16181a;
+  --color-petnow-grey-20: #2c2f34;
+  --color-petnow-grey-30: #42474d;
+  --color-petnow-grey-40: #585e67;
+  --color-petnow-grey-50: #6e7681;
+  --color-petnow-grey-60: #8b919a;
+  --color-petnow-grey-70: #a8adb3;
+  --color-petnow-grey-80: #c5c8cd;
+  --color-petnow-grey-90: #e2e4e6;
+  --color-petnow-grey-95: #f0f1f2;
+  --color-petnow-grey-99: #f8f8f9;
+  --color-petnow-grey-100: #ffffff;
+  --color-petnow-grey-primary: #c5c8cd;
+  --color-petnow-grey-secondary: #8b919a;
+  --color-petnow-grey-tertiary: #585e67;
+
+  --color-background-primary: #ffffff;
+  --color-background-secondary: #f8f8f9;
+  --color-background-tertiary: #f0f1f2;
+
+  --color-black: #2c2f34;
+  --color-error: #ff323e;
+
+  --text-display-large: @apply font-bold text-[34px] leading-[46px] tracking-normal;
+  --text-display-medium: @apply font-bold text-[28px] leading-[38px] tracking-normal;
+  --text-title-large: @apply font-bold text-[24px] leading-[34px] tracking-normal;
+  --text-title-medium: @apply font-bold text-[20px] leading-[30px] tracking-normal;
+  --text-title-small: @apply font-bold text-[18px] leading-[26px] tracking-normal;
+  --text-label-large: @apply font-bold text-[16px] leading-[24px] tracking-normal;
+  --text-label-medium: @apply font-bold text-[14px] leading-[22px] tracking-normal;
+  --text-label-small: @apply font-bold text-[12px] leading-[18px] tracking-normal;
+  --text-body-large: @apply font-medium text-[16px] leading-[24px] tracking-normal;
+  --text-body-medium: @apply font-medium text-[14px] leading-[22px] tracking-normal;
+  --text-body-small: @apply font-medium text-[12px] leading-[18px] tracking-normal;
+  --text-caption-large: @apply font-normal text-[16px] leading-[24px] tracking-normal;
+  --text-caption-medium: @apply font-normal text-[14px] leading-[22px] tracking-normal;
+  --text-caption-small: @apply font-normal text-[12px] leading-[18px] tracking-normal;
+  --text-badge: @apply font-medium text-[11px] leading-[16px] tracking-normal;
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(350%) rotate(25deg);
+    }
+  }
+}

package/tailwind.config.ts

@@ -1,158 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-
-export default {
-  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-      keyframes: {
-        shimmer: {
-          "100%": {
-            transform: "translateX(350%) rotate(25deg)",
-          },
-        },
-      },
-      colors: {
-        petnowOrange: {
-          primary: "#FF592C",
-          secondary: "#FFEEEA",
-          tertiary: "#FFF7F4",
-          0: "#0A0B0C",
-          10: "#3B1B12",
-          20: "#6C2A19",
-          30: "#9D3A1F",
-          40: "#CE4926",
-          50: "#FF592C",
-          60: "#FF7A56",
-          70: "#FF9B80",
-          80: "#FFBDAB",
-          90: "#FFDED5",
-          95: "#FFEEEA",
-          99: "#FFF7F4",
-          100: "#FFFFFF",
-        },
-        petnowBlue: {
-          primary: "#4389E5",
-          secondary: "#ECF3FC",
-          tertiary: "#F6F9FE",
-          0: "#0A0B0C",
-          10: "#152437",
-          20: "#213D63",
-          30: "#2C578E",
-          40: "#3870BA",
-          50: "#4389E5",
-          60: "#69A1EA",
-          70: "#8EB8EF",
-          80: "#B4D0F5",
-          90: "#D9E7FA",
-          95: "#ECF3FC",
-          99: "#F6F9FE",
-          100: "#FFFFFF",
-        },
-        petnowRed: {
-          primary: "#FF4055",
-          50: "#FF4055",
-          95: "#FFECF1",
-          99: "#FFF5F8",
-        },
-        petnowGreen: {
-          primary: "#42D48E",
-          50: "#42D48E",
-          95: "#ECFBF4",
-          99: "#F6FDF9",
-        },
-        petnowPurple: {
-          primary: "#AF50DC",
-          50: "#AF50DC",
-          95: "#F7EDFB",
-          99: "#FBF6FD",
-        },
-        petnowYellow: {
-          primary: "#FFD22D",
-          50: "#FFD22D",
-          95: "#FFF8E0",
-          99: "#FFFBEB",
-        },
-        petnowGrey: {
-          primary: "#C5C8CD",
-          secondary: "#8B919A",
-          tertiary: "#585E67",
-          0: "#0A0B0C",
-          10: "#16181A",
-          20: "#2C2F34",
-          30: "#42474D",
-          40: "#585E67",
-          50: "#6E7681",
-          60: "#8B919A",
-          70: "#A8ADB3",
-          80: "#C5C8CD",
-          90: "#E2E4E6",
-          95: "#F0F1F2",
-          99: "#F8F8F9",
-          100: "#FFFFFF",
-        },
-        background: {
-          primary: "#FFFFFF",
-          secondary: "#F8F8F9",
-          tertiary: "#F0F1F2",
-        },
-        black: "#2C2F34",
-        error: "#FF323E",
-      },
-    },
-  },
-  plugins: [
-    ({ addUtilities }: { addUtilities: any }) => {
-      addUtilities({
-        ".text-displayLarge": {
-          "@apply font-bold text-[34px] leading-[46px] tracking-normal": "",
-        },
-        ".text-displayMedium": {
-          "@apply font-bold text-[28px] leading-[38px] tracking-normal": "",
-        },
-        ".text-titleLarge": {
-          "@apply font-bold text-[24px] leading-[34px] tracking-normal": "",
-        },
-        ".text-titleMedium": {
-          "@apply font-bold text-[20px] leading-[30px] tracking-normal": "",
-        },
-        ".text-titleSmall": {
-          "@apply font-bold text-[18px] leading-[26px] tracking-normal": "",
-        },
-        ".text-labelLarge": {
-          "@apply font-bold text-[16px] leading-[24px] tracking-normal": "",
-        },
-        ".text-labelMedium": {
-          "@apply font-bold text-[14px] leading-[22px] tracking-normal": "",
-        },
-        ".text-labelSmall": {
-          "@apply font-bold text-[12px] leading-[18px] tracking-normal": "",
-        },
-        ".text-bodyLarge": {
-          "@apply font-medium text-[16px] leading-[24px] tracking-normal": "",
-        },
-        ".text-bodyMedium": {
-          "@apply font-medium text-[14px] leading-[22px] tracking-normal": "",
-        },
-        ".text-bodySmall": {
-          "@apply font-medium text-[12px] leading-[18px] tracking-normal": "",
-        },
-        ".text-captionLarge": {
-          "@apply font-normal text-[16px] leading-[24px] tracking-normal": "",
-        },
-        ".text-captionMedium": {
-          "@apply font-normal text-[14px] leading-[22px] tracking-normal": "",
-        },
-        ".text-captionSmall": {
-          "@apply font-normal text-[12px] leading-[18px] tracking-normal": "",
-        },
-        ".text-badge": {
-          "@apply font-medium text-[11px] leading-[16px] tracking-normal": "",
-        },
-      });
-    },
-  ],
-};