@caspeco/casper-ui-library 10.4.0 → 10.5.0

package/dist/components/button/button-recipe.js

@@ -1,319 +1,284 @@
-import { isTouchScreenDevice as c } from "../../theme/theme-helper.js";
-import { ThemeSpaceToken as r, ThemeFontSizeToken as t, ThemeColorToken as e, ThemeRadiusToken as a, ThemeFontToken as i, ThemeBorderToken as d } from "../../theme/theme-tokens.js";
-import { defineRecipe as l } from "@chakra-ui/react";
-const g = {
-  fontFamily: i.SubHeader,
-  borderRadius: a.XLarge,
-  border: d.XSmall + " transparent",
-  fontWeight: "medium",
-  cursor: "pointer",
-  WebkitTapHighlightColor: "transparent",
-  _disabled: {
-    cursor: "not-allowed",
-    opacity: 0.48
-  },
-  // _open styling is applied when the button is used as a menu trigger and the menu is open.
-  _open: {
-    color: e.OnAccent,
-    background: e.AccentActive
-  }
+import { isTouchScreenDevice as e } from "../../theme/theme-helper.js";
+import { ThemeBorderToken as t, ThemeColorToken as n, ThemeFontSizeToken as r, ThemeFontToken as i, ThemeRadiusToken as a, ThemeSpaceToken as o } from "../../theme/theme-tokens.js";
+import { defineRecipe as s } from "@chakra-ui/react";
+//#region lib/components/button/button-recipe.ts
+var c = {
+	fontFamily: i.SubHeader,
+	borderRadius: a.XLarge,
+	border: t.XSmall + " transparent",
+	fontWeight: "medium",
+	cursor: "pointer",
+	WebkitTapHighlightColor: "transparent",
+	_disabled: {
+		cursor: "not-allowed",
+		opacity: .48
+	},
+	_open: {
+		color: n.OnAccent,
+		background: n.AccentActive
+	}
+}, l = {
+	background: n.Accent,
+	color: n.OnAccent,
+	_hover: { "&:not(:active, [data-state=open])": { background: e() ? n.Accent : n.AccentHover } },
+	_active: {
+		background: n.AccentActive,
+		color: n.OnAccent
+	},
+	_open: {
+		background: n.AccentActive,
+		color: n.OnAccent
+	}
 }, u = {
-  background: e.Accent,
-  color: e.OnAccent,
-  _hover: {
-    "&:not(:active, [data-state=open])": {
-      background: c() ? e.Accent : e.AccentHover
-    }
-  },
-  _active: {
-    background: e.AccentActive,
-    color: e.OnAccent
-  },
-  _open: {
-    background: e.AccentActive,
-    color: e.OnAccent
-  }
-}, A = {
-  background: e.AccentContainer,
-  color: e.OnAccentContainer,
-  _hover: {
-    "&:not(:active, [data-state=open])": {
-      background: c() ? e.AccentContainer : e.AccentHover,
-      color: c() ? e.OnAccentContainer : e.OnAccent
-    }
-  },
-  _active: {
-    background: e.AccentActive,
-    color: e.OnAccent
-  },
-  _open: {
-    background: e.AccentActive,
-    color: e.OnAccent
-  }
-}, b = {
-  color: e.OnBackground,
-  fontWeight: "medium",
-  _hover: {
-    "&:not(:active, [data-state=open])": {
-      color: e.OnBackground,
-      bg: c() ? "none" : e.AccentHoverAlpha,
-      textDecoration: "none"
-    }
-  },
-  _active: {
-    bg: e.AccentActiveAlpha,
-    color: e.OnBackground
-  },
-  _open: {
-    bg: e.AccentActiveAlpha,
-    color: e.OnBackground
-  }
+	background: n.AccentContainer,
+	color: n.OnAccentContainer,
+	_hover: { "&:not(:active, [data-state=open])": {
+		background: e() ? n.AccentContainer : n.AccentHover,
+		color: e() ? n.OnAccentContainer : n.OnAccent
+	} },
+	_active: {
+		background: n.AccentActive,
+		color: n.OnAccent
+	},
+	_open: {
+		background: n.AccentActive,
+		color: n.OnAccent
+	}
+}, d = {
+	color: n.OnBackground,
+	fontWeight: "medium",
+	_hover: { "&:not(:active, [data-state=open])": {
+		color: n.OnBackground,
+		bg: e() ? "none" : n.AccentHoverAlpha,
+		textDecoration: "none"
+	} },
+	_active: {
+		bg: n.AccentActiveAlpha,
+		color: n.OnBackground
+	},
+	_open: {
+		bg: n.AccentActiveAlpha,
+		color: n.OnBackground
+	}
+}, f = {
+	background: n.Error,
+	color: n.OnAccent,
+	_hover: { "&:not(:active, [data-state=open])": { background: e() ? n.Error : n.ErrorHover } },
+	_active: {
+		background: n.ErrorActive,
+		color: n.OnAccent
+	},
+	_open: {
+		background: n.ErrorActive,
+		color: n.OnAccent
+	}
 }, p = {
-  background: e.Error,
-  color: e.OnAccent,
-  _hover: {
-    "&:not(:active, [data-state=open])": {
-      background: c() ? e.Error : e.ErrorHover
-    }
-  },
-  _active: {
-    background: e.ErrorActive,
-    color: e.OnAccent
-  },
-  _open: {
-    background: e.ErrorActive,
-    color: e.OnAccent
-  }
-}, v = {
-  color: e.OnBackground,
-  fontFamily: i.Body,
-  borderRadius: 0,
-  fontWeight: "normal",
-  background: "transparent",
-  textDecorationLine: "underline",
-  lineHeight: "normal",
-  textUnderlineOffset: "3px",
-  width: "fit-content",
-  height: "auto",
-  px: 0,
-  border: 0,
-  _hover: {
-    "&:not(:active, [data-state=open])": {
-      color: c() ? e.OnBackground : e.AccentHover
-    }
-  },
-  _active: {
-    color: e.AccentActive,
-    background: "transparent"
-  },
-  _disabled: {
-    textDecoration: "none"
-  }
-}, s = {
-  flex: "1",
-  fontWeight: "normal",
-  font: i.Body,
-  bg: e.AccentContainer,
-  color: e.OnAccentContainer,
-  borderRadius: "2px",
-  _hover: {
-    textDecoration: "underline"
-  },
-  // [data-active] is the controlled 'isActive'-state of SegmentedControl
-  "&[data-active]": {
-    bg: e.Surface,
-    color: e.OnSurface,
-    fontWeight: "medium"
-  },
-  // Native :active selctor, seen when button is in pressed state
-  "&:active": {
-    bg: e.AccentHoverAlpha,
-    color: e.OnAccentContainer,
-    _disabled: {
-      bg: e.AccentContainer,
-      color: e.OnAccentContainer
-    },
-    "&[data-active]": {
-      bg: e.Surface,
-      color: e.OnSurface,
-      fontWeight: "medium",
-      _disabled: {
-        bg: e.Surface,
-        color: e.OnSurface
-      }
-    }
-  }
-}, h = {
-  background: "transparent",
-  color: e.OnBackground,
-  borderColor: e.OnBackgroundBorder,
-  _hover: {
-    "&:not(:active, [data-state=open])": {
-      borderColor: "transparent",
-      color: e.OnBackground,
-      background: e.AccentHoverAlpha
-    }
-  },
-  _active: {
-    borderColor: "transparent",
-    background: e.AccentActiveAlpha,
-    color: e.OnBackground
-  },
-  _open: {
-    borderColor: "transparent",
-    background: e.AccentActiveAlpha,
-    color: e.OnBackground
-  }
-}, o = '&[aria-pressed="true"]', n = '&[aria-pressed="false"]', k = {
-  // Base style
-  borderRadius: a.Small,
-  borderColor: e.OnSurfaceBorder,
-  paddingX: r.Small,
-  // Pressed state
-  [`${o}`]: {
-    background: e.Accent,
-    color: e.OnAccent
-  },
-  // Not pressed state
-  [`${n}`]: {
-    background: e.Surface,
-    color: e.OnSurface
-  },
-  // Hover styles
-  "@media(hover: hover)": {
-    [`${o}&:hover`]: {
-      background: e.AccentHover,
-      borderColor: e.AccentHover,
-      _disabled: {
-        background: e.Accent,
-        borderColor: e.Accent
-      }
-    },
-    [`${n}&:hover`]: {
-      background: e.AccentHoverAlpha,
-      color: e.OnSurface,
-      _disabled: {
-        background: e.Surface,
-        color: e.OnSurface
-      }
-    }
-  },
-  // Active styles
-  [`${o}:active`]: {
-    color: e.OnAccent,
-    background: e.AccentActive
-  },
-  [`${n}:active`]: {
-    color: e.OnSurface,
-    background: e.AccentActiveAlpha
-  },
-  // Define general disabled styles last to ensure they are not overridden
-  [`${o}:disabled`]: {
-    color: e.OnAccent,
-    background: e.Accent,
-    borderColor: e.Accent
-  },
-  [`${n}:disabled`]: {
-    color: e.OnSurface,
-    background: e.Surface
-  }
+	color: n.OnBackground,
+	fontFamily: i.Body,
+	borderRadius: 0,
+	fontWeight: "normal",
+	background: "transparent",
+	textDecorationLine: "underline",
+	lineHeight: "normal",
+	textUnderlineOffset: "3px",
+	width: "fit-content",
+	height: "auto",
+	px: 0,
+	border: 0,
+	_hover: { "&:not(:active, [data-state=open])": { color: e() ? n.OnBackground : n.AccentHover } },
+	_active: {
+		color: n.AccentActive,
+		background: "transparent"
+	},
+	_disabled: { textDecoration: "none" }
 }, m = {
-  borderRadius: a.Small,
-  border: "none",
-  paddingX: r.Small,
-  [`${n}`]: {
-    background: "transparent",
-    color: e.OnSurface
-  },
-  [`${o}`]: {
-    background: e.AccentContainer,
-    color: e.OnAccentContainer
-  },
-  "@media(hover: hover)": {
-    [`${n}&:hover`]: {
-      background: e.AccentHoverAlpha,
-      color: e.OnSurface,
-      _disabled: {
-        background: "transparent"
-      }
-    },
-    [`${o}&:hover`]: {
-      background: e.AccentHoverAlpha,
-      color: e.OnSurface,
-      _disabled: {
-        background: e.AccentContainer
-      }
-    }
-  },
-  [`${n}:active`]: {
-    background: e.AccentActiveAlpha,
-    color: e.OnSurface
-  },
-  [`${o}:active`]: {
-    background: e.AccentActiveAlpha,
-    color: e.OnSurface
-  },
-  [`${o}:disabled`]: {
-    background: e.AccentContainer,
-    color: e.OnAccentContainer
-  },
-  [`${n}:disabled`]: {
-    background: "transparent",
-    color: e.OnSurface
-  }
-}, x = l({
-  base: g,
-  variants: {
-    variant: {
-      primary: u,
-      secondary: A,
-      ghost: b,
-      link: v,
-      segmentedControl: s,
-      tertiary: h,
-      toggle: k,
-      toggleGhost: m,
-      alert: p
-    },
-    size: {
-      xl: {
-        paddingX: "24px",
-        height: "56px",
-        minWidth: "56px",
-        fontSize: t.Large,
-        gap: r.Small
-      },
-      lg: {
-        paddingX: "16px",
-        height: "48px",
-        minWidth: "48px",
-        fontSize: t.Medium,
-        gap: r.Small
-      },
-      md: {
-        paddingX: "16px",
-        height: "40px",
-        minWidth: "40px",
-        fontSize: t.Medium,
-        gap: r.Small
-      },
-      sm: {
-        paddingX: "8px",
-        height: "32px",
-        minWidth: "32px",
-        fontSize: t.Small,
-        gap: r.Small
-      },
-      xs: {
-        paddingX: "8px",
-        height: "24px",
-        minWidth: "24px",
-        fontSize: t.Small,
-        gap: r.Small
-      }
-    }
-  }
+	flex: "1",
+	fontWeight: "normal",
+	font: i.Body,
+	bg: n.AccentContainer,
+	color: n.OnAccentContainer,
+	borderRadius: "2px",
+	_hover: { textDecoration: "underline" },
+	"&[data-active]": {
+		bg: n.Surface,
+		color: n.OnSurface,
+		fontWeight: "medium"
+	},
+	"&:active": {
+		bg: n.AccentHoverAlpha,
+		color: n.OnAccentContainer,
+		_disabled: {
+			bg: n.AccentContainer,
+			color: n.OnAccentContainer
+		},
+		"&[data-active]": {
+			bg: n.Surface,
+			color: n.OnSurface,
+			fontWeight: "medium",
+			_disabled: {
+				bg: n.Surface,
+				color: n.OnSurface
+			}
+		}
+	}
+}, h = {
+	background: "transparent",
+	color: n.OnBackground,
+	borderColor: n.OnBackgroundBorder,
+	_hover: { "&:not(:active, [data-state=open])": {
+		borderColor: "transparent",
+		color: n.OnBackground,
+		background: n.AccentHoverAlpha
+	} },
+	_active: {
+		borderColor: "transparent",
+		background: n.AccentActiveAlpha,
+		color: n.OnBackground
+	},
+	_open: {
+		borderColor: "transparent",
+		background: n.AccentActiveAlpha,
+		color: n.OnBackground
+	}
+}, g = "&[aria-pressed=\"true\"]", _ = "&[aria-pressed=\"false\"]", v = {
+	borderRadius: a.Small,
+	borderColor: n.OnSurfaceBorder,
+	paddingX: o.Small,
+	[`${g}`]: {
+		background: n.Accent,
+		color: n.OnAccent
+	},
+	[`${_}`]: {
+		background: n.Surface,
+		color: n.OnSurface
+	},
+	"@media(hover: hover)": {
+		[`${g}&:hover`]: {
+			background: n.AccentHover,
+			borderColor: n.AccentHover,
+			_disabled: {
+				background: n.Accent,
+				borderColor: n.Accent
+			}
+		},
+		[`${_}&:hover`]: {
+			background: n.AccentHoverAlpha,
+			color: n.OnSurface,
+			_disabled: {
+				background: n.Surface,
+				color: n.OnSurface
+			}
+		}
+	},
+	[`${g}:active`]: {
+		color: n.OnAccent,
+		background: n.AccentActive
+	},
+	[`${_}:active`]: {
+		color: n.OnSurface,
+		background: n.AccentActiveAlpha
+	},
+	[`${g}:disabled`]: {
+		color: n.OnAccent,
+		background: n.Accent,
+		borderColor: n.Accent
+	},
+	[`${_}:disabled`]: {
+		color: n.OnSurface,
+		background: n.Surface
+	}
+}, y = {
+	borderRadius: a.Small,
+	border: "none",
+	paddingX: o.Small,
+	[`${_}`]: {
+		background: "transparent",
+		color: n.OnSurface
+	},
+	[`${g}`]: {
+		background: n.AccentContainer,
+		color: n.OnAccentContainer
+	},
+	"@media(hover: hover)": {
+		[`${_}&:hover`]: {
+			background: n.AccentHoverAlpha,
+			color: n.OnSurface,
+			_disabled: { background: "transparent" }
+		},
+		[`${g}&:hover`]: {
+			background: n.AccentHoverAlpha,
+			color: n.OnSurface,
+			_disabled: { background: n.AccentContainer }
+		}
+	},
+	[`${_}:active`]: {
+		background: n.AccentActiveAlpha,
+		color: n.OnSurface
+	},
+	[`${g}:active`]: {
+		background: n.AccentActiveAlpha,
+		color: n.OnSurface
+	},
+	[`${g}:disabled`]: {
+		background: n.AccentContainer,
+		color: n.OnAccentContainer
+	},
+	[`${_}:disabled`]: {
+		background: "transparent",
+		color: n.OnSurface
+	}
+}, b = s({
+	base: c,
+	variants: {
+		variant: {
+			primary: l,
+			secondary: u,
+			ghost: d,
+			link: p,
+			segmentedControl: m,
+			tertiary: h,
+			toggle: v,
+			toggleGhost: y,
+			alert: f
+		},
+		size: {
+			xl: {
+				paddingX: "24px",
+				height: "56px",
+				minWidth: "56px",
+				fontSize: r.Large,
+				gap: o.Small
+			},
+			lg: {
+				paddingX: "16px",
+				height: "48px",
+				minWidth: "48px",
+				fontSize: r.Medium,
+				gap: o.Small
+			},
+			md: {
+				paddingX: "16px",
+				height: "40px",
+				minWidth: "40px",
+				fontSize: r.Medium,
+				gap: o.Small
+			},
+			sm: {
+				paddingX: "8px",
+				height: "32px",
+				minWidth: "32px",
+				fontSize: r.Small,
+				gap: o.Small
+			},
+			xs: {
+				paddingX: "8px",
+				height: "24px",
+				minWidth: "24px",
+				fontSize: r.Small,
+				gap: o.Small
+			}
+		}
+	}
 });
-export {
-  x as buttonRecipe
-};
+//#endregion
+export { b as buttonRecipe };