@knapsack/sandbox-components 4.71.8--canary.5182.6970410.0 → 4.71.8--canary.5173.cb78e19.0

package/dist/css/ks-sandbox-styles.css

@@ -99,6 +99,9 @@
   --collections-theme-text-subtle-basis-dark: #bec3d3;
   --collections-theme-text-subtle-basis-light: #6e7a82;
   --color-black: var(--color-neutral-800);
+  --color-error: #ff5c46;
+  --color-success: #6bc313;
+  --color-warning: #fab120;
   --color-white: #ffffff;
   --color-neutral-100: #fafafb;
   --color-neutral-200: #f6f6f7;
@@ -1238,8 +1241,7 @@ body {
 .button {
   border-radius: 4px;
   border-radius: var(--radius-small);
-  border: 1px solid #7a34ed;
-  border: 1px solid var(--brand-color);
+  border: 1px solid;
   font-family: Inter;
   font-family: var(--brand-font-family);
   font-weight: 600;
@@ -1283,19 +1285,64 @@ body {
     }
 
 .button--type-outlined {
-      background-color: #ffffff;
-      background-color: var(--color-white);
+      background-color: transparent;
       color: #7a34ed;
       color: var(--brand-color);
+      border-color: #7a34ed;
+      border-color: var(--brand-color);
     }
 
+.button--type-outlined.button--mode-success {
+        color: #6bc313;
+        color: var(--color-success);
+        border-color: #6bc313;
+        border-color: var(--color-success);
+      }
+
+.button--type-outlined.button--mode-error {
+        color: #ff5c46;
+        color: var(--color-error);
+        border-color: #ff5c46;
+        border-color: var(--color-error);
+      }
+
+.button--type-outlined.button--mode-warning {
+        color: #fab120;
+        color: var(--color-warning);
+        border-color: #fab120;
+        border-color: var(--color-warning);
+      }
+
 .button--type-filled {
       background-color: #7a34ed;
       background-color: var(--brand-color);
       color: #ffffff;
       color: var(--color-white);
+      border-color: #7a34ed;
+      border-color: var(--brand-color);
     }
 
+.button--type-filled.button--mode-success {
+        background-color: #6bc313;
+        background-color: var(--color-success);
+        border-color: #6bc313;
+        border-color: var(--color-success);
+      }
+
+.button--type-filled.button--mode-error {
+        background-color: #ff5c46;
+        background-color: var(--color-error);
+        border-color: #ff5c46;
+        border-color: var(--color-error);
+      }
+
+.button--type-filled.button--mode-warning {
+        background-color: #fab120;
+        background-color: var(--color-warning);
+        border-color: #fab120;
+        border-color: var(--color-warning);
+      }
+
 .card {
   border: solid 1px var(--color-border);
   border-radius: 8px;

package/dist/react/button.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface ButtonProps {
+    mode?: 'default' | 'success' | 'error' | 'warning';
     type?: 'filled' | 'outlined';
     size?: 'small' | 'medium' | 'large';
     label: string;

package/dist/react/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiBxC,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACnD,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmBxC,CAAC"}

package/dist/react/button.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
-export const Button = ({ type = 'filled', size = 'medium', label = 'Button', }) => {
+export const Button = ({ mode = 'default', type = 'filled', size = 'medium', label = 'Button', }) => {
     return (_jsx("button", { type: "button", className: clsx({
             button: true,
+            [`button--mode-${mode}`]: true,
             [`button--size-${size}`]: true,
             [`button--type-${type}`]: true,
         }), children: label }));

package/dist/react/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAS5B,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,QAAQ,GACjB,EAAE,EAAE;IACH,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC;YACd,MAAM,EAAE,IAAI;YACZ,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI;YAC9B,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI;SAC/B,CAAC,YAED,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAU5B,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,QAAQ,GACjB,EAAE,EAAE;IACH,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC;YACd,MAAM,EAAE,IAAI;YACZ,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI;YAC9B,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI;YAC9B,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI;SAC/B,CAAC,YAED,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.71.8--canary.5182.6970410.0",
+  "version": "4.71.8--canary.5173.cb78e19.0",
   "type": "module",
   "exports": {
     "./css": "./dist/css/ks-sandbox-styles.css",
@@ -44,11 +44,11 @@
     "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.71.8--canary.5182.6970410.0",
-    "@knapsack/postcss-config-starter": "4.71.8--canary.5182.6970410.0",
-    "@knapsack/prettier-config": "4.71.8--canary.5182.6970410.0",
-    "@knapsack/sandbox-tokens": "4.71.8--canary.5182.6970410.0",
-    "@knapsack/typescript-config-starter": "4.71.8--canary.5182.6970410.0",
+    "@knapsack/eslint-config-starter": "4.71.8--canary.5173.cb78e19.0",
+    "@knapsack/postcss-config-starter": "4.71.8--canary.5173.cb78e19.0",
+    "@knapsack/prettier-config": "4.71.8--canary.5173.cb78e19.0",
+    "@knapsack/sandbox-tokens": "4.71.8--canary.5173.cb78e19.0",
+    "@knapsack/typescript-config-starter": "4.71.8--canary.5173.cb78e19.0",
     "@types/node": "^20.17.6",
     "@types/react": "^18.3.12",
     "esbuild": "^0.24.0",
@@ -68,5 +68,5 @@
     "directory": "apps/ui/libs/sandbox-components",
     "type": "git"
   },
-  "gitHead": "697041098dc0b76480579d6981d42ad7bb2bc9c8"
+  "gitHead": "cb78e19c9cb91714933ca754c2402616311f72e5"
 }

package/src/css/button.css

@@ -1,6 +1,6 @@
 .button {
   border-radius: var(--radius-small);
-  border: 1px solid var(--brand-color);
+  border: 1px solid;
   font-family: var(--brand-font-family);
   font-weight: 600;
   transition: all 0.3s ease;
@@ -23,12 +23,38 @@
   }
   &--type {
     &-outlined {
-      background-color: var(--color-white);
+      background-color: transparent;
       color: var(--brand-color);
+      border-color: var(--brand-color);
+      &.button--mode-success {
+        color: var(--color-success);
+        border-color: var(--color-success);
+      }
+      &.button--mode-error {
+        color: var(--color-error);
+        border-color: var(--color-error);
+      }
+      &.button--mode-warning {
+        color: var(--color-warning);
+        border-color: var(--color-warning);
+      }
     }
     &-filled {
       background-color: var(--brand-color);
       color: var(--color-white);
+      border-color: var(--brand-color);
+      &.button--mode-success {
+        background-color: var(--color-success);
+        border-color: var(--color-success);
+      }
+      &.button--mode-error {
+        background-color: var(--color-error);
+        border-color: var(--color-error);
+      }
+      &.button--mode-warning {
+        background-color: var(--color-warning);
+        border-color: var(--color-warning);
+      }
     }
   }
 }

package/src/react/button.tsx

@@ -2,12 +2,14 @@ import { clsx } from 'clsx';
 import React from 'react';
 
 interface ButtonProps {
+  mode?: 'default' | 'success' | 'error' | 'warning';
   type?: 'filled' | 'outlined';
   size?: 'small' | 'medium' | 'large';
   label: string;
 }
 
 export const Button: React.FC<ButtonProps> = ({
+  mode = 'default',
   type = 'filled',
   size = 'medium',
   label = 'Button',
@@ -17,6 +19,7 @@ export const Button: React.FC<ButtonProps> = ({
       type="button"
       className={clsx({
         button: true,
+        [`button--mode-${mode}`]: true,
         [`button--size-${size}`]: true,
         [`button--type-${type}`]: true,
       })}