@shapesos/clay 0.8.2 → 0.9.0

package/dist/index.cjs

@@ -16342,6 +16342,7 @@ var require_lottie = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  BUTTON_INTENT: () => BUTTON_INTENT,
   BUTTON_SIZE: () => BUTTON_SIZE,
   BUTTON_VARIANT: () => BUTTON_VARIANT,
   Button: () => Button2,
@@ -17702,66 +17703,107 @@ var import_react10 = require("react");
 
 // src/components/button/button-styles.ts
 var import_styled_components10 = __toESM(require("styled-components"), 1);
-var sizeStyles = {
-  xs: import_styled_components10.css`
-    padding: 6px 10px;
-    border-radius: 8px;
-    gap: 4px;
-  `,
-  s: import_styled_components10.css`
-    padding: 8px 12px;
-    border-radius: 10px;
-    gap: 6px;
-  `,
-  m: import_styled_components10.css`
-    padding: 10px 14px;
-    border-radius: 10px;
-    gap: 6px;
-  `
-};
-var variantStyles2 = {
-  solid: import_styled_components10.css`
-    background: ${colors["brown-100"]};
-    color: ${colors.white};
-    border: none;
-
-    &:hover:not(:disabled) {
-      background: ${colors["brown-90"]};
-    }
 
-    &:disabled {
-      background: ${colors["brown-20"]};
-      color: ${colors["brown-50"]};
-    }
-  `,
-  outline: import_styled_components10.css`
-    background: ${colors.white};
-    color: ${colors["brown-100"]};
-    border: 1px solid ${colors["brown-40"]};
-
-    &:hover:not(:disabled) {
-      background: ${colors["brown-20"]};
-    }
+// src/components/button/constants.ts
+var BUTTON_VARIANT = {
+  SOLID: "solid",
+  OUTLINE: "outline",
+  GHOST: "ghost"
+};
+var BUTTON_SIZE = {
+  XS: "xs",
+  S: "s",
+  M: "m"
+};
+var BUTTON_INTENT = {
+  PRIMARY: "primary",
+  ERROR: "error"
+};
+var ICON_POSITION = {
+  LEADING: "leading",
+  TRAILING: "trailing"
+};
 
-    &:disabled {
-      border-color: ${colors["brown-20"]};
-      color: ${colors["brown-50"]};
-    }
-  `,
-  ghost: import_styled_components10.css`
-    background: transparent;
-    color: ${colors["brown-100"]};
-    border: none;
+// src/components/button/button-styles.ts
+var intentColors = {
+  [BUTTON_INTENT.PRIMARY]: {
+    base: colors["brown-100"],
+    hover: colors["brown-90"],
+    disabledBg: colors["brown-20"],
+    disabledText: colors["brown-50"],
+    subtleHover: colors["brown-20"],
+    border: colors["brown-40"],
+    disabledBorder: colors["brown-20"]
+  },
+  [BUTTON_INTENT.ERROR]: {
+    base: colors["red-500"],
+    hover: colors["red-600"],
+    disabledBg: colors["red-100"],
+    disabledText: colors["red-200"],
+    subtleHover: colors["red-50"],
+    border: colors["red-200"],
+    disabledBorder: colors["red-100"]
+  }
+};
+var sizeValues = {
+  [BUTTON_SIZE.XS]: { padding: "6px 10px", borderRadius: "8px", gap: "4px" },
+  [BUTTON_SIZE.S]: { padding: "8px 12px", borderRadius: "10px", gap: "6px" },
+  [BUTTON_SIZE.M]: { padding: "10px 14px", borderRadius: "10px", gap: "6px" }
+};
+function sizeMixin({ $size }) {
+  const s = sizeValues[$size];
+  return import_styled_components10.css`
+    padding: ${s.padding};
+    border-radius: ${s.borderRadius};
+    gap: ${s.gap};
+  `;
+}
+var variantColorMap = {
+  [BUTTON_VARIANT.SOLID]: (c) => ({
+    background: c.base,
+    color: colors.white,
+    border: "none",
+    hoverBg: c.hover,
+    disabledBg: c.disabledBg,
+    disabledColor: c.disabledText
+  }),
+  [BUTTON_VARIANT.OUTLINE]: (c) => ({
+    background: colors.white,
+    color: c.base,
+    border: `1px solid ${c.border}`,
+    hoverBg: c.subtleHover,
+    disabledColor: c.disabledText,
+    disabledBorder: c.disabledBorder
+  }),
+  [BUTTON_VARIANT.GHOST]: (c) => ({
+    background: "transparent",
+    color: c.base,
+    border: "none",
+    hoverBg: c.subtleHover,
+    disabledColor: c.disabledText
+  })
+};
+function variantMixin({
+  $variant,
+  $intent
+}) {
+  const v = variantColorMap[$variant](intentColors[$intent]);
+  return import_styled_components10.css`
+    background: ${v.background};
+    color: ${v.color};
+    border: ${v.border};
 
     &:hover:not(:disabled) {
-      background: ${colors["brown-20"]};
+      background: ${v.hoverBg};
     }
 
     &:disabled {
-      color: ${colors["brown-50"]};
+      color: ${v.disabledColor};
+      ${v.disabledBg ? `background: ${v.disabledBg};` : ""}
+      ${v.disabledBorder ? `border-color: ${v.disabledBorder};` : ""}
     }
-  `
-};
+  `;
+}
 var StyledButton = import_styled_components10.default.button`
   display: inline-flex;
   align-items: center;
@@ -17774,31 +17816,16 @@ var StyledButton = import_styled_components10.default.button`
     cursor: not-allowed;
   }
 
-  ${({ $size }) => sizeStyles[$size]}
-  ${({ $variant }) => variantStyles2[$variant]}
+  ${sizeMixin}
+  ${variantMixin}
 `;
 
-// src/components/button/constants.ts
-var BUTTON_VARIANT = {
-  SOLID: "solid",
-  OUTLINE: "outline",
-  GHOST: "ghost"
-};
-var BUTTON_SIZE = {
-  XS: "xs",
-  S: "s",
-  M: "m"
-};
-var ICON_POSITION = {
-  LEADING: "leading",
-  TRAILING: "trailing"
-};
-
 // src/components/button/button.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Button2 = (0, import_react10.forwardRef)(function Button3({
   children,
   variant = BUTTON_VARIANT.SOLID,
+  intent = BUTTON_INTENT.PRIMARY,
   size = BUTTON_SIZE.M,
   icon,
   iconPosition = ICON_POSITION.LEADING,
@@ -17814,6 +17841,7 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
       ref,
       type: "button",
       $variant: variant,
+      $intent: intent,
       $size: size,
       disabled,
       onClick: disabled ? void 0 : onClick,
@@ -17829,6 +17857,7 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUTTON_INTENT,
   BUTTON_SIZE,
   BUTTON_VARIANT,
   Button,