@salesforce/webapp-template-feature-react-chart-experimental 1.62.2 → 1.64.0

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 (28) hide show
  1. package/dist/.a4drules/skills/feature-graphql-graphql-data-access/SKILL.md +1 -1
  2. package/dist/.a4drules/skills/feature-micro-frontend-micro-frontend/SKILL.md +1 -1
  3. package/dist/.a4drules/skills/feature-react-agentforce-conversation-client-embedded-agent/SKILL.md +1 -1
  4. package/dist/.a4drules/skills/feature-react-chart-analytics-charts/SKILL.md +1 -1
  5. package/dist/.a4drules/webapp.md +0 -2
  6. package/dist/CHANGELOG.md +19 -0
  7. package/dist/force-app/main/default/webapplications/feature-react-chart/package-lock.json +47 -47
  8. package/dist/force-app/main/default/webapplications/feature-react-chart/package.json +4 -4
  9. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/alert.tsx +61 -54
  10. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/button.tsx +57 -57
  11. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/card.tsx +86 -75
  12. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/dialog.tsx +129 -110
  13. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/field.tsx +208 -193
  14. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/index.ts +64 -64
  15. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/input.tsx +14 -14
  16. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/label.tsx +17 -14
  17. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/pagination.tsx +108 -88
  18. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/select.tsx +156 -146
  19. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/separator.tsx +19 -19
  20. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/skeleton.tsx +10 -10
  21. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/spinner.tsx +12 -11
  22. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/table.tsx +96 -69
  23. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/tabs.tsx +71 -61
  24. package/dist/force-app/main/default/webapplications/feature-react-chart/src/components.json +1 -1
  25. package/dist/force-app/main/default/webapplications/feature-react-chart/src/lib/utils.ts +3 -3
  26. package/dist/force-app/main/default/webapplications/feature-react-chart/src/styles/global.css +107 -107
  27. package/dist/package.json +1 -1
  28. package/package.json +2 -2
@@ -1,5 +1,5 @@
1
1
  ---
2
- name: graphql-data-access
2
+ name: feature-graphql-graphql-data-access
3
3
  description: Add or modify Salesforce GraphQL data access code. Use when the user asks to fetch, query, or mutate Salesforce data, or add a GraphQL operation for an object like Account, Contact, or Opportunity.
4
4
  ---
5
5
 
@@ -1,5 +1,5 @@
1
1
  ---
2
- name: micro-frontends
2
+ name: feature-micro-frontend-micro-frontend
3
3
  description: Generate a Micro Frontend LWC component for a Web Application.
4
4
  license: Proprietary. LICENSE.txt has complete terms
5
5
  metadata:
@@ -1,5 +1,5 @@
1
1
  ---
2
- name: embedded-agent
2
+ name: feature-react-agentforce-conversation-client-embedded-agent
3
3
  description: Embed an Agentforce conversation client (chat UI) into a React web application. Use when the user wants to add an employee agent, a chat client, chatbot, chat widget, chat component, conversation client, or conversational interface to their React app. Also applies when the user asks to embed or integrate any Salesforce agent — including employee agent, travel agent, HR agent, service agent, or any custom-named agent — or mentions Agentforce, Agentforce widget, Agentforce chat, or agent chat.
4
4
  ---
5
5
 
@@ -1,5 +1,5 @@
1
1
  ---
2
- name: analytics-charts
2
+ name: feature-react-chart-analytics-charts
3
3
  description: Add or change charts from raw data. Use when the user asks for a chart, graph, or analytics visualization from JSON/data.
4
4
  ---
5
5
 
@@ -75,8 +75,6 @@ Agents consistently miss these. **You must not leave them default.**
75
75
  - **Motion:** Use high-impact motion (e.g. staggered reveals).
76
76
  - **Depth:** Add atmosphere/depth in backgrounds.
77
77
 
78
- Follow **webapplications-design-system** expert knowledge for full guidance.
79
-
80
78
  # Development Cycle
81
79
 
82
80
  - Execute tasks continuously until all planned items complete in the current iteration.
package/dist/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.64.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.63.0...v1.64.0) (2026-03-03)
7
+
8
+ **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
9
+
10
+
11
+
12
+
13
+
14
+ # [1.63.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.62.2...v1.63.0) (2026-03-03)
15
+
16
+
17
+ ### Features
18
+
19
+ * move shadcn UI into base-react-app ([#188](https://github.com/salesforce-experience-platform-emu/webapps/issues/188)) ([366443f](https://github.com/salesforce-experience-platform-emu/webapps/commit/366443f626c5232ca56c6a5dc6da874bfb955f22))
20
+
21
+
22
+
23
+
24
+
6
25
  ## [1.62.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.62.1...v1.62.2) (2026-03-02)
7
26
 
8
27
  **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
@@ -8,8 +8,8 @@
8
8
  "name": "base-react-app",
9
9
  "version": "1.59.0",
10
10
  "dependencies": {
11
- "@salesforce/sdk-data": "^1.62.2",
12
- "@salesforce/webapp-experimental": "^1.62.2",
11
+ "@salesforce/sdk-data": "^1.64.0",
12
+ "@salesforce/webapp-experimental": "^1.64.0",
13
13
  "@tailwindcss/vite": "^4.1.17",
14
14
  "class-variance-authority": "^0.7.1",
15
15
  "clsx": "^2.1.1",
@@ -20,7 +20,7 @@
20
20
  "react-router": "^7.10.1",
21
21
  "recharts": "^2.15.4",
22
22
  "shadcn": "^3.8.5",
23
- "tailwind-merge": "^3.5.0",
23
+ "tailwind-merge": "^3.4.0",
24
24
  "tailwindcss": "^4.1.17",
25
25
  "tw-animate-css": "^1.4.0"
26
26
  },
@@ -32,7 +32,7 @@
32
32
  "@graphql-eslint/eslint-plugin": "^4.1.0",
33
33
  "@graphql-tools/utils": "^11.0.0",
34
34
  "@playwright/test": "^1.49.0",
35
- "@salesforce/vite-plugin-webapp-experimental": "^1.62.2",
35
+ "@salesforce/vite-plugin-webapp-experimental": "^1.64.0",
36
36
  "@testing-library/jest-dom": "^6.6.3",
37
37
  "@testing-library/react": "^16.1.0",
38
38
  "@testing-library/user-event": "^14.5.2",
@@ -2076,31 +2076,31 @@
2076
2076
  "license": "MIT"
2077
2077
  },
2078
2078
  "node_modules/@floating-ui/core": {
2079
- "version": "1.7.4",
2080
- "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
2081
- "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==",
2079
+ "version": "1.7.5",
2080
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
2081
+ "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
2082
2082
  "license": "MIT",
2083
2083
  "dependencies": {
2084
- "@floating-ui/utils": "^0.2.10"
2084
+ "@floating-ui/utils": "^0.2.11"
2085
2085
  }
2086
2086
  },
2087
2087
  "node_modules/@floating-ui/dom": {
2088
- "version": "1.7.5",
2089
- "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz",
2090
- "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==",
2088
+ "version": "1.7.6",
2089
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
2090
+ "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
2091
2091
  "license": "MIT",
2092
2092
  "dependencies": {
2093
- "@floating-ui/core": "^1.7.4",
2094
- "@floating-ui/utils": "^0.2.10"
2093
+ "@floating-ui/core": "^1.7.5",
2094
+ "@floating-ui/utils": "^0.2.11"
2095
2095
  }
2096
2096
  },
2097
2097
  "node_modules/@floating-ui/react-dom": {
2098
- "version": "2.1.7",
2099
- "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.7.tgz",
2100
- "integrity": "sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==",
2098
+ "version": "2.1.8",
2099
+ "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
2100
+ "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
2101
2101
  "license": "MIT",
2102
2102
  "dependencies": {
2103
- "@floating-ui/dom": "^1.7.5"
2103
+ "@floating-ui/dom": "^1.7.6"
2104
2104
  },
2105
2105
  "peerDependencies": {
2106
2106
  "react": ">=16.8.0",
@@ -2108,9 +2108,9 @@
2108
2108
  }
2109
2109
  },
2110
2110
  "node_modules/@floating-ui/utils": {
2111
- "version": "0.2.10",
2112
- "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
2113
- "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
2111
+ "version": "0.2.11",
2112
+ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
2113
+ "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
2114
2114
  "license": "MIT"
2115
2115
  },
2116
2116
  "node_modules/@graphql-codegen/add": {
@@ -3115,9 +3115,9 @@
3115
3115
  }
3116
3116
  },
3117
3117
  "node_modules/@hono/node-server": {
3118
- "version": "1.19.9",
3119
- "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.9.tgz",
3120
- "integrity": "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw==",
3118
+ "version": "1.19.10",
3119
+ "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.10.tgz",
3120
+ "integrity": "sha512-hZ7nOssGqRgyV3FVVQdfi+U4q02uB23bpnYpdvNXkYTRRyWx84b7yf1ans+dnJ/7h41sGL3CeQTfO+ZGxuO+Iw==",
3121
3121
  "license": "MIT",
3122
3122
  "engines": {
3123
3123
  "node": ">=18.14.1"
@@ -6069,19 +6069,19 @@
6069
6069
  }
6070
6070
  },
6071
6071
  "node_modules/@salesforce/sdk-core": {
6072
- "version": "1.62.2",
6073
- "resolved": "https://registry.npmjs.org/@salesforce/sdk-core/-/sdk-core-1.62.2.tgz",
6074
- "integrity": "sha512-ubBzdb6d0Or1VYcCUW3CkrTiTcYZ3NETUaMlh8velcTDxrJkQMLeydbfmagLHJnAtJ8OLxn6HEDoGpQjOtzHsw==",
6072
+ "version": "1.64.0",
6073
+ "resolved": "https://registry.npmjs.org/@salesforce/sdk-core/-/sdk-core-1.64.0.tgz",
6074
+ "integrity": "sha512-f3liX7/HaNYo/Qi7wpZG0vNFdKekshmJZYrMV3A0Bn/vefLNQToEBpU/sWqqJcyGyxYXCkttUvNmmMCXnBuJsA==",
6075
6075
  "license": "SEE LICENSE IN LICENSE.txt"
6076
6076
  },
6077
6077
  "node_modules/@salesforce/sdk-data": {
6078
- "version": "1.62.2",
6079
- "resolved": "https://registry.npmjs.org/@salesforce/sdk-data/-/sdk-data-1.62.2.tgz",
6080
- "integrity": "sha512-qmB7VZ1yrM4RqGjjyRE2yRwlbmvAKw6+rzFhxSU6BYF6Oa1tVTe+2fFreWpD7ediLd9vbbpIoIe+8riD+9Hahg==",
6078
+ "version": "1.64.0",
6079
+ "resolved": "https://registry.npmjs.org/@salesforce/sdk-data/-/sdk-data-1.64.0.tgz",
6080
+ "integrity": "sha512-2kO9WxniddrOLYapY2YdmeB8tXsFXHBhko1Fo5TEzAXLnr7D3qERpsJpSTycsQmHJk/GHit4e93VtV0RIfaJ5A==",
6081
6081
  "license": "SEE LICENSE IN LICENSE.txt",
6082
6082
  "dependencies": {
6083
6083
  "@conduit-client/salesforce-lightning-service-worker": "^3.7.0",
6084
- "@salesforce/sdk-core": "^1.62.2"
6084
+ "@salesforce/sdk-core": "^1.64.0"
6085
6085
  }
6086
6086
  },
6087
6087
  "node_modules/@salesforce/ts-types": {
@@ -6094,15 +6094,15 @@
6094
6094
  }
6095
6095
  },
6096
6096
  "node_modules/@salesforce/vite-plugin-webapp-experimental": {
6097
- "version": "1.62.2",
6098
- "resolved": "https://registry.npmjs.org/@salesforce/vite-plugin-webapp-experimental/-/vite-plugin-webapp-experimental-1.62.2.tgz",
6099
- "integrity": "sha512-0E8od/tOqTh4Yla62CpMlkDuoGKXbQiz4IugnPdul2AOCFBkt4khe+F5xRgWKKkKNZuPZWvJ4pm6niEuWiVviQ==",
6097
+ "version": "1.64.0",
6098
+ "resolved": "https://registry.npmjs.org/@salesforce/vite-plugin-webapp-experimental/-/vite-plugin-webapp-experimental-1.64.0.tgz",
6099
+ "integrity": "sha512-BR3sQdYrC3owDwlOESbO8hERhgfmtv0art7J3ONV1Hz36+vNI8EOU5j8d6jBMNtBgJb3I3pz9PXfDN+9RcP/1g==",
6100
6100
  "dev": true,
6101
6101
  "license": "SEE LICENSE IN LICENSE.txt",
6102
6102
  "dependencies": {
6103
6103
  "@babel/core": "^7.28.4",
6104
6104
  "@babel/helper-plugin-utils": "^7.28.3",
6105
- "@salesforce/webapp-experimental": "^1.62.2"
6105
+ "@salesforce/webapp-experimental": "^1.64.0"
6106
6106
  },
6107
6107
  "engines": {
6108
6108
  "node": ">=20.0.0"
@@ -6112,13 +6112,13 @@
6112
6112
  }
6113
6113
  },
6114
6114
  "node_modules/@salesforce/webapp-experimental": {
6115
- "version": "1.62.2",
6116
- "resolved": "https://registry.npmjs.org/@salesforce/webapp-experimental/-/webapp-experimental-1.62.2.tgz",
6117
- "integrity": "sha512-WiAy3nLcsga3fwJaO3Nn0dGyIGve/WENZCcGF6bjjus2MbQPdMJ8Rx2jqxmVgxGYtLrnad9hGOXI/VShL95qxw==",
6115
+ "version": "1.64.0",
6116
+ "resolved": "https://registry.npmjs.org/@salesforce/webapp-experimental/-/webapp-experimental-1.64.0.tgz",
6117
+ "integrity": "sha512-thc2TVaO1/tw/Gj5uE8KkHQpqlLzf9c9cg+ppgaX+fOsZL37UVHi6LKVCGZ1/MCImg2Hp69MrROuKORdSq9Stg==",
6118
6118
  "license": "SEE LICENSE IN LICENSE.txt",
6119
6119
  "dependencies": {
6120
6120
  "@salesforce/core": "^8.23.4",
6121
- "@salesforce/sdk-data": "^1.62.2",
6121
+ "@salesforce/sdk-data": "^1.64.0",
6122
6122
  "axios": "^1.7.7",
6123
6123
  "micromatch": "^4.0.8",
6124
6124
  "path-to-regexp": "^8.3.0"
@@ -8176,9 +8176,9 @@
8176
8176
  }
8177
8177
  },
8178
8178
  "node_modules/caniuse-lite": {
8179
- "version": "1.0.30001775",
8180
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001775.tgz",
8181
- "integrity": "sha512-s3Qv7Lht9zbVKE9XoTyRG6wVDCKdtOFIjBGg3+Yhn6JaytuNKPIjBMTMIY1AnOH3seL5mvF+x33oGAyK3hVt3A==",
8179
+ "version": "1.0.30001776",
8180
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001776.tgz",
8181
+ "integrity": "sha512-sg01JDPzZ9jGshqKSckOQthXnYwOEP50jeVFhaSFbZcOy05TiuuaffDOfcwtCisJ9kNQuLBFibYywv2Bgm9osw==",
8182
8182
  "funding": [
8183
8183
  {
8184
8184
  "type": "opencollective",
@@ -9393,9 +9393,9 @@
9393
9393
  "license": "MIT"
9394
9394
  },
9395
9395
  "node_modules/electron-to-chromium": {
9396
- "version": "1.5.302",
9397
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.302.tgz",
9398
- "integrity": "sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==",
9396
+ "version": "1.5.307",
9397
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.307.tgz",
9398
+ "integrity": "sha512-5z3uFKBWjiNR44nFcYdkcXjKMbg5KXNdciu7mhTPo9tB7NbqSNP2sSnGR+fqknZSCwKkBN+oxiiajWs4dT6ORg==",
9399
9399
  "license": "ISC"
9400
9400
  },
9401
9401
  "node_modules/emoji-regex": {
@@ -11556,9 +11556,9 @@
11556
11556
  }
11557
11557
  },
11558
11558
  "node_modules/hono": {
11559
- "version": "4.12.3",
11560
- "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.3.tgz",
11561
- "integrity": "sha512-SFsVSjp8sj5UumXOOFlkZOG6XS9SJDKw0TbwFeV+AJ8xlST8kxK5Z/5EYa111UY8732lK2S/xB653ceuaoGwpg==",
11559
+ "version": "4.12.4",
11560
+ "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.4.tgz",
11561
+ "integrity": "sha512-ooiZW1Xy8rQ4oELQ++otI2T9DsKpV0M6c6cO6JGx4RTfav9poFFLlet9UMXHZnoM1yG0HWGlQLswBGX3RZmHtg==",
11562
11562
  "license": "MIT",
11563
11563
  "engines": {
11564
11564
  "node": ">=16.9.0"
@@ -15,8 +15,8 @@
15
15
  "graphql:schema": "node scripts/get-graphql-schema.mjs"
16
16
  },
17
17
  "dependencies": {
18
- "@salesforce/sdk-data": "^1.62.2",
19
- "@salesforce/webapp-experimental": "^1.62.2",
18
+ "@salesforce/sdk-data": "^1.64.0",
19
+ "@salesforce/webapp-experimental": "^1.64.0",
20
20
  "@tailwindcss/vite": "^4.1.17",
21
21
  "class-variance-authority": "^0.7.1",
22
22
  "clsx": "^2.1.1",
@@ -27,7 +27,7 @@
27
27
  "react-router": "^7.10.1",
28
28
  "recharts": "^2.15.4",
29
29
  "shadcn": "^3.8.5",
30
- "tailwind-merge": "^3.5.0",
30
+ "tailwind-merge": "^3.4.0",
31
31
  "tailwindcss": "^4.1.17",
32
32
  "tw-animate-css": "^1.4.0"
33
33
  },
@@ -39,7 +39,7 @@
39
39
  "@graphql-eslint/eslint-plugin": "^4.1.0",
40
40
  "@graphql-tools/utils": "^11.0.0",
41
41
  "@playwright/test": "^1.49.0",
42
- "@salesforce/vite-plugin-webapp-experimental": "^1.62.2",
42
+ "@salesforce/vite-plugin-webapp-experimental": "^1.64.0",
43
43
  "@testing-library/jest-dom": "^6.6.3",
44
44
  "@testing-library/react": "^16.1.0",
45
45
  "@testing-library/user-event": "^14.5.2",
@@ -1,69 +1,76 @@
1
- import * as React from "react";
2
- import { cva, type VariantProps } from "class-variance-authority";
1
+ import * as React from 'react';
2
+ import { cva, type VariantProps } from 'class-variance-authority';
3
3
 
4
- import { cn } from "../../lib/utils";
4
+ import { cn } from '../../lib/utils';
5
5
 
6
6
  const alertVariants = cva(
7
- "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
8
- {
9
- variants: {
10
- variant: {
11
- default: "bg-card text-card-foreground",
12
- destructive:
13
- "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
14
- },
15
- },
16
- defaultVariants: {
17
- variant: "default",
18
- },
19
- },
7
+ "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
8
+ {
9
+ variants: {
10
+ variant: {
11
+ default: 'bg-card text-card-foreground',
12
+ destructive:
13
+ 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
14
+ },
15
+ },
16
+ defaultVariants: {
17
+ variant: 'default',
18
+ },
19
+ }
20
20
  );
21
21
 
22
22
  function Alert({
23
- className,
24
- variant,
25
- ...props
26
- }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
27
- return (
28
- <div
29
- data-slot="alert"
30
- role="alert"
31
- className={cn(alertVariants({ variant }), className)}
32
- {...props}
33
- />
34
- );
23
+ className,
24
+ variant,
25
+ ...props
26
+ }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
27
+ return (
28
+ <div
29
+ data-slot="alert"
30
+ role="alert"
31
+ className={cn(alertVariants({ variant }), className)}
32
+ {...props}
33
+ />
34
+ );
35
35
  }
36
36
 
37
- function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
38
- return (
39
- <div
40
- data-slot="alert-title"
41
- className={cn(
42
- "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
43
- className,
44
- )}
45
- {...props}
46
- />
47
- );
37
+ function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
38
+ return (
39
+ <div
40
+ data-slot="alert-title"
41
+ className={cn(
42
+ 'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
43
+ className
44
+ )}
45
+ {...props}
46
+ />
47
+ );
48
48
  }
49
49
 
50
- function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
51
- return (
52
- <div
53
- data-slot="alert-description"
54
- className={cn(
55
- "text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
56
- className,
57
- )}
58
- {...props}
59
- />
60
- );
50
+ function AlertDescription({
51
+ className,
52
+ ...props
53
+ }: React.ComponentProps<'div'>) {
54
+ return (
55
+ <div
56
+ data-slot="alert-description"
57
+ className={cn(
58
+ 'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
59
+ className
60
+ )}
61
+ {...props}
62
+ />
63
+ );
61
64
  }
62
65
 
63
- function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
64
- return (
65
- <div data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props} />
66
- );
66
+ function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
67
+ return (
68
+ <div
69
+ data-slot="alert-action"
70
+ className={cn('absolute top-2 right-2', className)}
71
+ {...props}
72
+ />
73
+ );
67
74
  }
68
75
 
69
76
  export { Alert, AlertTitle, AlertDescription, AlertAction };
@@ -1,67 +1,67 @@
1
- import * as React from "react";
2
- import { cva, type VariantProps } from "class-variance-authority";
3
- import { Slot } from "radix-ui";
1
+ import * as React from 'react';
2
+ import { cva, type VariantProps } from 'class-variance-authority';
3
+ import { Slot } from 'radix-ui';
4
4
 
5
- import { cn } from "../../lib/utils";
5
+ import { cn } from '../../lib/utils';
6
6
 
7
7
  const buttonVariants = cva(
8
- "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
9
- {
10
- variants: {
11
- variant: {
12
- default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
13
- outline:
14
- "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
15
- secondary:
16
- "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
17
- ghost:
18
- "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
19
- destructive:
20
- "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
21
- link: "text-primary underline-offset-4 hover:underline",
22
- },
23
- size: {
24
- default:
25
- "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
26
- xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
27
- sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
28
- lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
29
- icon: "size-8",
30
- "icon-xs":
31
- "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
32
- "icon-sm":
33
- "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
34
- "icon-lg": "size-9",
35
- },
36
- },
37
- defaultVariants: {
38
- variant: "default",
39
- size: "default",
40
- },
41
- },
8
+ "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
9
+ {
10
+ variants: {
11
+ variant: {
12
+ default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
13
+ outline:
14
+ 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
15
+ secondary:
16
+ 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
17
+ ghost:
18
+ 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
19
+ destructive:
20
+ 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
21
+ link: 'text-primary underline-offset-4 hover:underline',
22
+ },
23
+ size: {
24
+ default:
25
+ 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
26
+ xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
27
+ sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
28
+ lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
29
+ icon: 'size-8',
30
+ 'icon-xs':
31
+ "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
32
+ 'icon-sm':
33
+ 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
34
+ 'icon-lg': 'size-9',
35
+ },
36
+ },
37
+ defaultVariants: {
38
+ variant: 'default',
39
+ size: 'default',
40
+ },
41
+ }
42
42
  );
43
43
 
44
44
  function Button({
45
- className,
46
- variant = "default",
47
- size = "default",
48
- asChild = false,
49
- ...props
50
- }: React.ComponentProps<"button"> &
51
- VariantProps<typeof buttonVariants> & {
52
- asChild?: boolean;
53
- }) {
54
- const Comp = asChild ? Slot.Root : "button";
45
+ className,
46
+ variant = 'default',
47
+ size = 'default',
48
+ asChild = false,
49
+ ...props
50
+ }: React.ComponentProps<'button'> &
51
+ VariantProps<typeof buttonVariants> & {
52
+ asChild?: boolean;
53
+ }) {
54
+ const Comp = asChild ? Slot.Root : 'button';
55
55
 
56
- return (
57
- <Comp
58
- data-slot="button"
59
- data-variant={variant}
60
- data-size={size}
61
- className={cn(buttonVariants({ variant, size, className }))}
62
- {...(props as any)}
63
- />
64
- );
56
+ return (
57
+ <Comp
58
+ data-slot="button"
59
+ data-variant={variant}
60
+ data-size={size}
61
+ className={cn(buttonVariants({ variant, size, className }))}
62
+ {...(props as any)}
63
+ />
64
+ );
65
65
  }
66
66
 
67
67
  export { Button, buttonVariants };