@thunderid/react 0.0.5 → 0.2.0

package/dist/components/primitives/Avatar/Avatar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.styles.js","names":["baseAvatar: string","variantStyles: Record<string, string>","imageStyles: string","skeletonStyles: string"],"sources":["../../../../src/components/primitives/Avatar/Avatar.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type AvatarVariant = 'circular' | 'square';\n\n/**\n * Creates styles for the Avatar component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the avatar in pixels\n * @param variant - The avatar variant\n * @param backgroundColor - The background color for the avatar\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  size: number,\n  variant: AvatarVariant,\n  backgroundColor?: string,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseAvatar: string = css`\n      align-items: center;\n      background: ${backgroundColor || theme.vars.colors.background.surface};\n      border: ${backgroundColor ? 'none' : `1px solid ${theme.vars.colors.border}`};\n      border-radius: ${variant === 'circular' ? '50%' : '8px'};\n      color: ${backgroundColor ? '#ffffff' : theme.vars.colors.text.primary};\n      display: flex;\n      font-size: ${size * 0.4}px;\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: 600;\n      height: ${size}px;\n      justify-content: center;\n      overflow: hidden;\n      text-shadow: ${backgroundColor ? '0 1px 2px rgba(0, 0, 0, 0.1)' : 'none'};\n      width: ${size}px;\n    `;\n\n    const variantStyles: Record<string, string> = {\n      circular: css`\n        border-radius: 50%;\n      `,\n      square: css`\n        border-radius: 8px;\n      `,\n    };\n\n    const imageStyles: string = css`\n      height: 100%;\n      object-fit: cover;\n      width: 100%;\n    `;\n\n    const skeletonStyles: string = css`\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n      background-size: 200% 100%;\n      animation: skeleton-loading 1.5s infinite;\n      border-radius: ${variant === 'circular' ? '50%' : '8px'};\n\n      @keyframes skeleton-loading {\n        0% {\n          background-position: -200% 0;\n        }\n        100% {\n          background-position: 200% 0;\n        }\n      }\n    `;\n\n    const iconStyles: string = css`\n      width: 60%;\n      height: 60%;\n      fill: ${backgroundColor ? '#ffffff' : theme.vars.colors.text.secondary};\n      opacity: 0.8;\n    `;\n\n    return {\n      avatar: baseAvatar,\n      icon: iconStyles,\n      image: imageStyles,\n      skeleton: skeletonStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, size, variant, backgroundColor]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAM,aACJ,OACA,aACA,MACA,SACA,oBAEA,cAAc;CACZ,MAAMA,aAAqB,GAAG;;oBAEd,mBAAmB,MAAM,KAAK,OAAO,WAAW,QAAQ;gBAC5D,kBAAkB,SAAS,aAAa,MAAM,KAAK,OAAO,SAAS;uBAC5D,YAAY,aAAa,QAAQ,MAAM;eAC/C,kBAAkB,YAAY,MAAM,KAAK,OAAO,KAAK,QAAQ;;mBAEzD,OAAO,GAAI;qBACT,MAAM,KAAK,WAAW,WAAW;;gBAEtC,KAAK;;;qBAGA,kBAAkB,iCAAiC,OAAO;eAChE,KAAK;;CAGhB,MAAMC,gBAAwC;EAC5C,UAAU,GAAG;;;EAGb,QAAQ,GAAG;;;EAGZ;CAED,MAAMC,cAAsB,GAAG;;;;;CAM/B,MAAMC,iBAAyB,GAAG;;;;;;uBAMf,YAAY,aAAa,QAAQ,MAAM;;;;;;;;;;;AAmB1D,QAAO;EACL,QAAQ;EACR,MATyB,GAAG;;;cAGpB,kBAAkB,YAAY,MAAM,KAAK,OAAO,KAAK,UAAU;;;EAOvE,OAAO;EACP,UAAU;EACV,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAM;CAAS;CAAgB,CAAC;AAE1D,4BAAe"}

package/dist/components/primitives/Button/Button.js

@@ -0,0 +1,92 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Button_styles_default from "./Button.styles.js";
+import Spinner_default from "../Spinner/Spinner.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/Button/Button.tsx
+const getSpinnerWidth = (sizeVal, spacingUnit) => {
+	if (sizeVal === "small") return `calc(${spacingUnit} * 1.5)`;
+	if (sizeVal === "medium") return `calc(${spacingUnit} * 2)`;
+	return `calc(${spacingUnit} * 2.5)`;
+};
+/**
+* Button component with multiple variants and types.
+*
+* @example
+* ```tsx
+* // Primary solid button
+* <Button color="primary" variant="solid">
+*   Click me
+* </Button>
+*
+* // Secondary outline button
+* <Button color="secondary" variant="outline" size="large">
+*   Cancel
+* </Button>
+*
+* // Text button with loading state
+* <Button color="tertiary" variant="text" loading>
+*   Loading...
+* </Button>
+*
+* // Button with icons
+* <Button
+*   color="primary"
+*   startIcon={<Icon />}
+*   endIcon={<Arrow />}
+* >
+*   Save and Continue
+* </Button>
+* ```
+*/
+const Button = forwardRef(({ color = "primary", variant = "solid", size = "medium", fullWidth = false, loading = false, startIcon, endIcon, children, className, disabled, style, shape = "square",...rest }, ref) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Button_styles_default(theme, colorScheme, color, variant, size, fullWidth, disabled || false, loading, shape);
+	const isIconVariant = variant === "icon";
+	const spinnerWidth = getSpinnerWidth(size, theme.vars.spacing.unit);
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		style,
+		className: cx(withVendorCSSClassPrefix(bem("button")), withVendorCSSClassPrefix(bem("button", variant)), withVendorCSSClassPrefix(bem("button", color)), withVendorCSSClassPrefix(bem("button", size)), withVendorCSSClassPrefix(bem("button", shape)), fullWidth ? withVendorCSSClassPrefix(bem("button", "fullWidth")) : void 0, loading ? withVendorCSSClassPrefix(bem("button", "loading")) : void 0, disabled || loading ? withVendorCSSClassPrefix(bem("button", "disabled")) : void 0, styles["button"], styles["size"], styles["variant"], styles["fullWidth"], styles["loading"], styles["shape"], className),
+		disabled: disabled || loading,
+		...rest,
+		children: [
+			loading && /* @__PURE__ */ jsx("span", {
+				className: cx(withVendorCSSClassPrefix(bem("button", "spinner")), styles["spinner"]),
+				children: /* @__PURE__ */ jsx(Spinner_default, {
+					size,
+					color: "currentColor",
+					style: {
+						height: spinnerWidth,
+						width: spinnerWidth
+					}
+				})
+			}),
+			!loading && isIconVariant && /* @__PURE__ */ jsx("span", {
+				className: cx(withVendorCSSClassPrefix(bem("button", "icon")), styles["icon"]),
+				children: children || startIcon || endIcon
+			}),
+			!loading && !isIconVariant && startIcon && /* @__PURE__ */ jsx("span", {
+				className: cx(withVendorCSSClassPrefix(bem("button", "start-icon")), styles["startIcon"]),
+				children: startIcon
+			}),
+			!isIconVariant && children && /* @__PURE__ */ jsx("span", {
+				className: cx(withVendorCSSClassPrefix(bem("button", "content")), styles["content"]),
+				children
+			}),
+			!loading && !isIconVariant && endIcon && /* @__PURE__ */ jsx("span", {
+				className: cx(withVendorCSSClassPrefix(bem("button", "end-icon")), styles["endIcon"]),
+				children: endIcon
+			})
+		]
+	});
+});
+Button.displayName = "Button";
+var Button_default = Button;
+
+//#endregion
+export { Button_default as default };
+//# sourceMappingURL=Button.js.map

package/dist/components/primitives/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>","useTheme","styles: Record<string, string | null>","useStyles","isIconVariant: boolean","spinnerWidth: string","Spinner"],"sources":["../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ButtonHTMLAttributes, forwardRef, ReactNode, ForwardRefExoticComponent, RefAttributes, Ref} from 'react';\nimport useStyles from './Button.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Spinner, {SpinnerSize} from '../Spinner/Spinner';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /**\n   * The button color that determines the color scheme\n   */\n  color?: ButtonColor;\n  /**\n   * Icon to display after the button text\n   */\n  endIcon?: ReactNode;\n  /**\n   * Whether the button should take the full width of its container\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether the button is in a loading state\n   */\n  loading?: boolean;\n  /**\n   * The shape of the button: square or round\n   */\n  shape?: 'square' | 'round';\n  /**\n   * The size of the button\n   */\n  size?: ButtonSize;\n  /**\n   * Icon to display before the button text\n   */\n  startIcon?: ReactNode;\n  /**\n   * The button variant that determines the visual style\n   */\n  variant?: ButtonVariant;\n}\n\nconst getSpinnerWidth = (sizeVal: ButtonSize, spacingUnit: string): string => {\n  if (sizeVal === 'small') {\n    return `calc(${spacingUnit} * 1.5)`;\n  }\n  if (sizeVal === 'medium') {\n    return `calc(${spacingUnit} * 2)`;\n  }\n  return `calc(${spacingUnit} * 2.5)`;\n};\n\n/**\n * Button component with multiple variants and types.\n *\n * @example\n * ```tsx\n * // Primary solid button\n * <Button color=\"primary\" variant=\"solid\">\n *   Click me\n * </Button>\n *\n * // Secondary outline button\n * <Button color=\"secondary\" variant=\"outline\" size=\"large\">\n *   Cancel\n * </Button>\n *\n * // Text button with loading state\n * <Button color=\"tertiary\" variant=\"text\" loading>\n *   Loading...\n * </Button>\n *\n * // Button with icons\n * <Button\n *   color=\"primary\"\n *   startIcon={<Icon />}\n *   endIcon={<Arrow />}\n * >\n *   Save and Continue\n * </Button>\n * ```\n */\nconst Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(\n  (\n    {\n      color = 'primary',\n      variant = 'solid',\n      size = 'medium',\n      fullWidth = false,\n      loading = false,\n      startIcon,\n      endIcon,\n      children,\n      className,\n      disabled,\n      style,\n      shape = 'square',\n      ...rest\n    }: ButtonProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string | null> = useStyles(\n      theme,\n      colorScheme,\n      color,\n      variant,\n      size,\n      fullWidth,\n      disabled || false,\n      loading,\n      shape,\n    );\n\n    const isIconVariant: boolean = variant === 'icon';\n\n    const spinnerWidth: string = getSpinnerWidth(size, theme.vars.spacing.unit);\n\n    return (\n      <button\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('button')),\n          withVendorCSSClassPrefix(bem('button', variant)),\n          withVendorCSSClassPrefix(bem('button', color)),\n          withVendorCSSClassPrefix(bem('button', size)),\n          withVendorCSSClassPrefix(bem('button', shape)),\n          fullWidth ? withVendorCSSClassPrefix(bem('button', 'fullWidth')) : undefined,\n          loading ? withVendorCSSClassPrefix(bem('button', 'loading')) : undefined,\n          disabled || loading ? withVendorCSSClassPrefix(bem('button', 'disabled')) : undefined,\n          styles['button'],\n          styles['size'],\n          styles['variant'],\n          styles['fullWidth'],\n          styles['loading'],\n          styles['shape'],\n          className,\n        )}\n        disabled={disabled || loading}\n        {...rest}\n      >\n        {loading && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'spinner')), styles['spinner'])}>\n            <Spinner\n              size={size as SpinnerSize}\n              color=\"currentColor\"\n              style={{\n                height: spinnerWidth,\n                width: spinnerWidth,\n              }}\n            />\n          </span>\n        )}\n        {!loading && isIconVariant && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'icon')), styles['icon'])}>\n            {children || startIcon || endIcon}\n          </span>\n        )}\n        {!loading && !isIconVariant && startIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'start-icon')), styles['startIcon'])}>\n            {startIcon}\n          </span>\n        )}\n        {!isIconVariant && children && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'content')), styles['content'])}>{children}</span>\n        )}\n        {!loading && !isIconVariant && endIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'end-icon')), styles['endIcon'])}>{endIcon}</span>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;;;AAgEA,MAAM,mBAAmB,SAAqB,gBAAgC;AAC5E,KAAI,YAAY,QACd,QAAO,QAAQ,YAAY;AAE7B,KAAI,YAAY,SACd,QAAO,QAAQ,YAAY;AAE7B,QAAO,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC7B,MAAMA,SAAoF,YAKtF,EACE,QAAQ,WACR,UAAU,SACV,OAAO,UACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,WACA,UACA,OACA,QAAQ,SACR,GAAG,QAEL,QACG;CACH,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAwCC,sBAC5C,OACA,aACA,OACA,SACA,MACA,WACA,YAAY,OACZ,SACA,MACD;CAED,MAAMC,gBAAyB,YAAY;CAE3C,MAAMC,eAAuB,gBAAgB,MAAM,MAAM,KAAK,QAAQ,KAAK;AAE3E,QACE,qBAAC;EACM;EACE;EACP,WAAW,GACT,yBAAyB,IAAI,SAAS,CAAC,EACvC,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAChD,yBAAyB,IAAI,UAAU,MAAM,CAAC,EAC9C,yBAAyB,IAAI,UAAU,KAAK,CAAC,EAC7C,yBAAyB,IAAI,UAAU,MAAM,CAAC,EAC9C,YAAY,yBAAyB,IAAI,UAAU,YAAY,CAAC,GAAG,QACnE,UAAU,yBAAyB,IAAI,UAAU,UAAU,CAAC,GAAG,QAC/D,YAAY,UAAU,yBAAyB,IAAI,UAAU,WAAW,CAAC,GAAG,QAC5E,OAAO,WACP,OAAO,SACP,OAAO,YACP,OAAO,cACP,OAAO,YACP,OAAO,UACP,UACD;EACD,UAAU,YAAY;EACtB,GAAI;;GAEH,WACC,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;cACxF,oBAACC;KACO;KACN,OAAM;KACN,OAAO;MACL,QAAQ;MACR,OAAO;MACR;MACD;KACG;GAER,CAAC,WAAW,iBACX,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;cACjF,YAAY,aAAa;KACrB;GAER,CAAC,WAAW,CAAC,iBAAiB,aAC7B,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,aAAa,CAAC,EAAE,OAAO,aAAa;cAC5F;KACI;GAER,CAAC,iBAAiB,YACjB,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAgB;GAE9G,CAAC,WAAW,CAAC,iBAAiB,WAC7B,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,WAAW,CAAC,EAAE,OAAO,WAAW;cAAG;KAAe;;GAExG;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}

package/dist/components/primitives/Button/Button.styles.js

@@ -0,0 +1,344 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/Button/Button.styles.ts
+/**
+* Creates styles for the Button component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param color - The button color
+* @param variant - The button variant
+* @param size - The button size
+* @param fullWidth - Whether the button should take full width
+* @param disabled - Whether the button is disabled
+* @param loading - Whether the button is in loading state
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled, loading, shape = "square") => useMemo(() => {
+	const iconSizeMap = {
+		large: `calc(${theme.vars.spacing.unit} * 5)`,
+		medium: `calc(${theme.vars.spacing.unit} * 4)`,
+		small: `calc(${theme.vars.spacing.unit} * 3)`
+	};
+	const iconDimension = iconSizeMap[size] || iconSizeMap["medium"];
+	const baseButton = css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: calc(${theme.vars.spacing.unit} * 1);
+      border-radius: ${shape === "round" ? "50%" : theme.vars.components?.Button?.root?.borderRadius || theme.vars.borderRadius.medium};
+      font-weight: 500;
+      cursor: ${disabled || loading ? "not-allowed" : "pointer"};
+      outline: none;
+      text-decoration: none;
+      white-space: nowrap;
+      width: ${fullWidth ? "100%" : "auto"};
+      opacity: ${disabled || loading ? .6 : 1};
+      font-family: ${theme.vars.typography.fontFamily};
+      border-width: 1px;
+      border-style: solid;
+      ${variant === "icon" ? `
+        padding: 0;
+        min-width: unset;
+        min-height: unset;
+        width: ${iconDimension};
+        height: ${iconDimension};
+        justify-content: center;
+        align-items: center;
+      ` : ""}
+    `;
+	const sizeStyles = {
+		large: css`
+        ${variant === "icon" ? `font-size: ${theme.vars.typography.fontSizes.lg};` : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);
+             font-size: ${theme.vars.typography.fontSizes.lg};
+             min-height: calc(${theme.vars.spacing.unit} * 5);`}
+      `,
+		medium: css`
+        ${variant === "icon" ? `font-size: ${theme.vars.typography.fontSizes.md};` : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);
+             font-size: ${theme.vars.typography.fontSizes.md};
+             min-height: calc(${theme.vars.spacing.unit} * 4);`}
+      `,
+		small: css`
+        ${variant === "icon" ? `font-size: ${theme.vars.typography.fontSizes.sm};` : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);
+             font-size: ${theme.vars.typography.fontSizes.sm};
+             min-height: calc(${theme.vars.spacing.unit} * 3);`}
+      `
+	};
+	const variantStyles = {
+		"primary-icon": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.primary.main};
+        border-color: transparent;
+        &:hover:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.hover};
+          color: ${theme.vars.colors.primary.dark};
+        }
+        &:active:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.selected};
+          color: ${theme.vars.colors.primary.dark};
+        }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          color: ${theme.vars.colors.primary.dark};
+          outline: none;
+        }
+      `,
+		"primary-outline": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.primary.main};
+        border-color: ${theme.vars.colors.primary.main};
+        &:hover:not(:disabled) {
+          background-color: ${theme.vars.colors.primary.main};
+          color: ${theme.vars.colors.primary.contrastText};
+        }
+        &:active:not(:disabled) {
+          background-color: ${theme.vars.colors.primary.main};
+          color: ${theme.vars.colors.primary.contrastText};
+          opacity: 0.9;
+        }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.primary.main};
+          color: ${theme.vars.colors.primary.contrastText};
+          opacity: 0.9;
+        }
+      `,
+		"primary-solid": css`
+        background-color: ${theme.vars.colors.primary.main};
+        color: ${theme.vars.colors.primary.contrastText};
+        border-color: ${theme.vars.colors.primary.main};
+        &:hover:not(:disabled) {
+          background-color: ${theme.vars.colors.primary.main};
+          opacity: 0.9;
+        }
+        &:active:not(:disabled) {
+          background-color: ${theme.vars.colors.primary.main};
+          opacity: 0.8;
+        }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.primary.main};
+          opacity: 0.8;
+        }
+      `,
+		"primary-text": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.primary.main};
+        border-color: transparent;
+        &:hover:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.hover};
+        }
+        &:active:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.selected};
+        }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          outline: none;
+        }
+      `,
+		"secondary-icon": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.secondary.main};
+        border-color: transparent;
+        &:hover:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.hover};
+          color: ${theme.vars.colors.secondary.dark};
+        }
+        &:active:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.selected};
+          color: ${theme.vars.colors.secondary.dark};
+        }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          color: ${theme.vars.colors.secondary.dark};
+          outline: none;
+        }
+      `,
+		"secondary-outline": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.secondary.main};
+        border-color: ${theme.vars.colors.secondary.main};
+        &:hover:not(:disabled) {
+          background-color: ${theme.vars.colors.secondary.main};
+          color: ${theme.vars.colors.secondary.contrastText};
+        }
+        &:active:not(:disabled) {
+          background-color: ${theme.vars.colors.secondary.main};
+          color: ${theme.vars.colors.secondary.contrastText};
+          opacity: 0.9;
+        }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.secondary.main};
+          color: ${theme.vars.colors.secondary.contrastText};
+          opacity: 0.9;
+        }
+      `,
+		"secondary-solid": css`
+        background-color: ${theme.vars.colors.secondary.main};
+        color: ${theme.vars.colors.secondary.contrastText};
+        border-color: ${theme.vars.colors.secondary.main};
+        &:hover:not(:disabled) {
+          background-color: ${theme.vars.colors.secondary.main};
+          opacity: 0.9;
+        }
+        &:active:not(:disabled) {
+          background-color: ${theme.vars.colors.secondary.main};
+          opacity: 0.8;
+        }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.secondary.main};
+          opacity: 0.8;
+        }
+      `,
+		"secondary-text": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.secondary.main};
+        border-color: transparent;
+        &:hover:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.hover};
+        }
+        &:active:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.selected};
+        }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          outline: none;
+        }
+      `,
+		"tertiary-icon": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.text.secondary};
+        border-color: transparent;
+        &:hover:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.hover};
+          color: ${theme.vars.colors.text.primary};
+        }
+        &:active:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.selected};
+          color: ${theme.vars.colors.text.primary};
+        }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          color: ${theme.vars.colors.text.primary};
+          outline: none;
+        }
+      `,
+		"tertiary-outline": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.text.secondary};
+        border-color: ${theme.vars.colors.border};
+        &:hover:not(:disabled) {
+          background-color: ${theme.vars.colors.action.hover};
+          border-color: ${theme.vars.colors.text.secondary};
+        }
+        &:active:not(:disabled) {
+          background-color: ${theme.vars.colors.action.selected};
+          border-color: ${theme.vars.colors.text.primary};
+        }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.action.focus};
+          border-color: ${theme.vars.colors.text.primary};
+        }
+      `,
+		"tertiary-solid": css`
+        background-color: ${theme.vars.colors.text.secondary};
+        color: ${theme.vars.colors.background.surface};
+        border-color: ${theme.vars.colors.text.secondary};
+        &:hover:not(:disabled) {
+          background-color: ${theme.vars.colors.text.primary};
+          color: ${theme.vars.colors.background.surface};
+        }
+        &:active:not(:disabled) {
+          background-color: ${theme.vars.colors.text.primary};
+          color: ${theme.vars.colors.background.surface};
+          opacity: 0.9;
+        }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.text.primary};
+          color: ${theme.vars.colors.background.surface};
+          opacity: 0.9;
+        }
+      `,
+		"tertiary-text": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.text.secondary};
+        border-color: transparent;
+        &:hover:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.hover};
+          color: ${theme.vars.colors.text.primary};
+        }
+        &:active:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.selected};
+          color: ${theme.vars.colors.text.primary};
+        }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          color: ${theme.vars.colors.text.primary};
+          outline: none;
+        }
+      `
+	};
+	const spinnerStyles = css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+	const iconStyles = css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+	return {
+		button: baseButton,
+		content: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+		endIcon: iconStyles,
+		fullWidth: fullWidth ? css`
+            width: 100%;
+          ` : null,
+		icon: iconStyles,
+		loading: loading ? css`
+            pointer-events: none;
+          ` : null,
+		shape: shape === "round" ? css`
+              border-radius: 50%;
+            ` : null,
+		size: sizeStyles[size],
+		spinner: spinnerStyles,
+		startIcon: iconStyles,
+		variant: variantStyles[`${color}-${variant}`] || variantStyles["primary-solid"]
+	};
+}, [
+	theme,
+	colorScheme,
+	color,
+	variant,
+	size,
+	fullWidth,
+	disabled,
+	loading
+]);
+var Button_styles_default = useStyles;
+
+//#endregion
+export { Button_styles_default as default };
+//# sourceMappingURL=Button.styles.js.map

package/dist/components/primitives/Button/Button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","names":["iconSizeMap: Record<string, string>","iconDimension: string","baseButton: string","sizeStyles: Record<string, string>","variantStyles: Record<string, string>","spinnerStyles: string","iconStyles: string"],"sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Button component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param color - The button color\n * @param variant - The button variant\n * @param size - The button size\n * @param fullWidth - Whether the button should take full width\n * @param disabled - Whether the button is disabled\n * @param loading - Whether the button is in loading state\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  color: ButtonColor,\n  variant: ButtonVariant,\n  size: ButtonSize,\n  fullWidth: boolean,\n  disabled: boolean,\n  loading: boolean,\n  shape: 'square' | 'round' = 'square',\n): Record<string, string | null> =>\n  useMemo(() => {\n    const iconSizeMap: Record<string, string> = {\n      large: `calc(${theme.vars.spacing.unit} * 5)`,\n      medium: `calc(${theme.vars.spacing.unit} * 4)`,\n      small: `calc(${theme.vars.spacing.unit} * 3)`,\n    };\n\n    const iconDimension: string = iconSizeMap[size] || iconSizeMap['medium'];\n\n    const baseButton: string = css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n      border-radius: ${shape === 'round'\n        ? '50%'\n        : theme.vars.components?.Button?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-weight: 500;\n      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n      outline: none;\n      text-decoration: none;\n      white-space: nowrap;\n      width: ${fullWidth ? '100%' : 'auto'};\n      opacity: ${disabled || loading ? 0.6 : 1};\n      font-family: ${theme.vars.typography.fontFamily};\n      border-width: 1px;\n      border-style: solid;\n      ${variant === 'icon'\n        ? `\n        padding: 0;\n        min-width: unset;\n        min-height: unset;\n        width: ${iconDimension};\n        height: ${iconDimension};\n        justify-content: center;\n        align-items: center;\n      `\n        : ''}\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.lg};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n             font-size: ${theme.vars.typography.fontSizes.lg};\n             min-height: calc(${theme.vars.spacing.unit} * 5);`}\n      `,\n      medium: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.md};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);\n             font-size: ${theme.vars.typography.fontSizes.md};\n             min-height: calc(${theme.vars.spacing.unit} * 4);`}\n      `,\n      small: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.sm};`\n          : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);\n             font-size: ${theme.vars.typography.fontSizes.sm};\n             min-height: calc(${theme.vars.spacing.unit} * 3);`}\n      `,\n    };\n\n    const variantStyles: Record<string, string> = {\n      'primary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.primary.dark};\n          outline: none;\n        }\n      `,\n      'primary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'primary-solid': css`\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n      `,\n      'primary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'secondary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.secondary.dark};\n          outline: none;\n        }\n      `,\n      'secondary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'secondary-solid': css`\n        background-color: ${theme.vars.colors.secondary.main};\n        color: ${theme.vars.colors.secondary.contrastText};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n      `,\n      'secondary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'tertiary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n      'tertiary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: ${theme.vars.colors.border};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.action.hover};\n          border-color: ${theme.vars.colors.text.secondary};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.action.selected};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.action.focus};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      'tertiary-solid': css`\n        background-color: ${theme.vars.colors.text.secondary};\n        color: ${theme.vars.colors.background.surface};\n        border-color: ${theme.vars.colors.text.secondary};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n      `,\n      'tertiary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n    };\n\n    const spinnerStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const iconStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const contentStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    return {\n      button: baseButton,\n      content: contentStyles,\n      endIcon: iconStyles,\n      fullWidth: fullWidth\n        ? css`\n            width: 100%;\n          `\n        : null,\n      icon: iconStyles,\n      loading: loading\n        ? css`\n            pointer-events: none;\n          `\n        : null,\n      shape:\n        shape === 'round'\n          ? css`\n              border-radius: 50%;\n            `\n          : null,\n      size: sizeStyles[size],\n      spinner: spinnerStyles,\n      startIcon: iconStyles,\n      variant: variantStyles[`${color}-${variant}`] || variantStyles['primary-solid'],\n    };\n  }, [theme, colorScheme, color, variant, size, fullWidth, disabled, loading]);\n\nexport default useStyles;\n"],"mappings":"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"}