@semcore/button 5.44.0-prerelease.0 → 5.44.0-prerelease.4

package/lib/esm/component/ButtonLink/buttonLink.shadow.css

@@ -1,19 +1,70 @@
-SButtonLink {
-  border: none;
+SButton {
+  display: inline-flex;
   font-family: inherit;
-}
+  font-size: var(--intergalactic-fs-200, 14px);
+  color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
+  line-height: normal;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: 0;
+  background: none;
+  transition: color 0.15s ease-in-out;
 
-SButtonLink[use='primary']:not([color]) {
-  color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
+  &:active,
+  &:hover,
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+  }
+
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0;
+  }
 
   &[active],
-  &:active,
-  &:hover {
-    color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.206 263.4));
+  &:hover,
+  &:active {
+    color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
+
+    & SText {
+      border-color: currentColor;
+    }
+  }
+
+  &[enableVisited]:visited,
+  &[enableVisited]:visited:hover {
+    color: var(--intergalactic-text-link-visited, oklch(0.53 0.26 296));
+  }
+
+  SText {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: transparent;
+    transition: border-bottom-color 0.15s ease-in-out;
   }
 }
 
-SButtonLink[use='secondary']:not([color]) {
+SButton[keyboardFocused] {
+  outline-color: var(--intergalactic-keyboard-focus-outline, oklch(0.424 0.269 264.2 / 0.469));
+  outline-style: solid;
+  outline-width: 3px;
+}
+
+SButton[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
+  cursor: default;
+  /* Disable link interactions */
+  pointer-events: none;
+}
+
+SButton[use='secondary'] {
   color: var(--intergalactic-text-hint, oklch(0.088 0.026 147.7 / 0.583));
 
   &[active],
@@ -21,9 +72,97 @@ SButtonLink[use='secondary']:not([color]) {
   &:hover {
     color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
   }
+
+  SText {
+    border-bottom-width: 1px;
+    border-bottom-style: dashed;
+    border-color: currentColor;
+  }
 }
 
-SButtonLink[use='secondary'] SText {
-  text-decoration-style: dashed;
-  text-decoration-color: currentColor;
+SInner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+SAddon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+SButton SAddon {
+  &:not(:only-child):first-child {
+    margin-right: var(--intergalactic-spacing-1x, 4px);
+  }
+
+  &:not(:only-child):last-child {
+    margin-left: var(--intergalactic-spacing-1x, 4px);
+  }
+}
+
+SButton[text-color] {
+  color: var(--text-color);
+
+  &[active],
+  &:hover,
+  &:active {
+    color: var(--text-color);
+    filter: brightness(0.8);
+  }
+}
+
+SButton[size='100'] {
+  font-size: var(--intergalactic-fs-100, 12px);
+  line-height: var(--intergalactic-lh-100, 133%);
+}
+
+SButton[size='200'] {
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+}
+
+SButton[size='300'] {
+  font-size: var(--intergalactic-fs-300, 16px);
+  line-height: var(--intergalactic-lh-300, 150%);
+}
+
+SButton[size='400'] {
+  font-size: var(--intergalactic-fs-400, 20px);
+  line-height: var(--intergalactic-lh-400, 120%);
+}
+
+SButton[size='500'] {
+  font-size: var(--intergalactic-fs-500, 24px);
+  line-height: var(--intergalactic-lh-500, 117%);
+}
+
+SButton[size='600'] {
+  font-size: var(--intergalactic-fs-600, 32px);
+  line-height: var(--intergalactic-lh-600, 125%);
+}
+
+SButton[size='700'] {
+  font-size: var(--intergalactic-fs-700, 36px);
+  line-height: var(--intergalactic-lh-700, 110%);
+}
+
+SButton[size='800'] {
+  font-size: var(--intergalactic-fs-800, 48px);
+  line-height: var(--intergalactic-lh-800, 117%);
+}
+
+@media (prefers-reduced-motion) {
+  SButton {
+    transition: none;
+  }
+
+  SText {
+    transition: none;
+  }
 }

package/lib/esm/index.mjs

@@ -1,7 +1,6 @@
-import { MAP_USE_DEFAULT_THEME, default as default2 } from "./component/Button/Button.mjs";
-import "./component/Button/Button.type.mjs";
+import { default as default2 } from "./component/Button/Button.mjs";
 import { ButtonLink } from "./component/ButtonLink/ButtonLink.mjs";
-import "./component/ButtonLink/ButtonLink.type.mjs";
+import { MAP_USE_DEFAULT_THEME } from "./component/AbstractButton/AbstractButton.mjs";
 export {
   ButtonLink,
   MAP_USE_DEFAULT_THEME,

package/lib/types/component/AbstractButton/AbstractButton.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { AbstractButtonProps } from './AbstractButton.type';
+import { Component } from '@semcore/core';
+export declare const MAP_USE_DEFAULT_THEME: Record<string, string>;
+type Props = AbstractButtonProps<any, any, any>;
+export declare abstract class AbstractButton extends Component<Props, {}, {}> {
+    static displayName: string;
+    containerRef: React.RefObject<HTMLButtonElement>;
+    state: {
+        ariaLabelledByContent: null;
+    };
+    protected abstract getTextColor(): string | undefined;
+    getTextProps(): {
+        size: any;
+    };
+    getAddonProps(): {
+        size: any;
+    };
+    componentDidMount(): void;
+    renderButton({ buttonProps, children }: any): React.ReactNode;
+    renderButtonWithHint({ buttonProps, children, hintProps }: any): React.ReactNode;
+    render(): JSX.Element;
+}
+export {};

package/lib/types/component/AbstractButton/AbstractButton.type.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { PropGetterFn } from '@semcore/core';
+import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { BoxProps } from '@semcore/flex-box';
+import { NeighborItemProps } from '@semcore/neighbor-location';
+import { TooltipHintProps } from '@semcore/tooltip';
+export type AbstractButtonProps<S, U, T> = BoxProps & NeighborItemProps & KeyboardFocusProps & {
+    /** Button activity state */
+    active?: boolean;
+    /** Disabled button state */
+    disabled?: boolean;
+    /** Loading button state */
+    loading?: boolean;
+    /** Tag for the left Addon */
+    addonLeft?: React.ElementType;
+    /** Tag for the right Addon */
+    addonRight?: React.ElementType;
+    /**
+     * Placement for hint
+     * @default top
+     */
+    hintPlacement?: TooltipHintProps['placement'];
+    /** Button type. Defined in Button.type or ButtonLink.type */
+    size?: S;
+    /** Button usage. Defined in Button.type or ButtonLink.type */
+    use?: U;
+    /** Button theme. Defined in Button.type or ButtonLink.type */
+    theme?: T;
+};
+export type AbstractButtonAddonProps<S> = BoxProps & {
+    size?: S;
+};
+export type AbstractButtonTextProps<S> = BoxProps & {
+    size?: S;
+};
+export type AbstractButtonContext = {
+    getTextProps: PropGetterFn;
+    getAddonProps: PropGetterFn;
+};

package/lib/types/component/{Button → AbstractButton}/SpinButton.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+/// <reference types="react" />
 export declare const SPIN_SIZE_MAP: Record<string, string>;
-export default function SpinButton({ theme, size, ...others }: any): React.JSX.Element;
+export default function SpinButton({ theme, size, ...others }: any): JSX.Element;

package/lib/types/component/Button/Button.d.ts

@@ -1,30 +1,3 @@
-import { Component } from '@semcore/core';
-import React from 'react';
-import type { ButtonProps, ButtonComponent } from './Button.type';
-export declare const MAP_USE_DEFAULT_THEME: Record<string, string>;
-type State = {
-    ariaLabelledByContent: null | string;
-};
-export declare class RootButton extends Component<ButtonProps, [], never, {}, State> {
-    static displayName: string;
-    static style: {
-        [key: string]: string;
-    };
-    static defaultProps: {
-        use: string;
-        size: string;
-    };
-    containerRef: React.RefObject<HTMLButtonElement>;
-    state: State;
-    getTextProps(): {
-        size: "l" | "m" | undefined;
-        'hint:triggerRef': React.RefObject<HTMLButtonElement>;
-    };
-    getAddonProps(): {
-        size: "l" | "m" | undefined;
-    };
-    componentDidMount(): void;
-    render(): React.JSX.Element;
-}
+import { ButtonComponent } from './Button.type';
 declare const Button: ButtonComponent;
 export default Button;

package/lib/types/component/Button/Button.type.d.ts

@@ -1,44 +1,43 @@
-import type { BoxProps, NeighborItemProps, SimpleHintPopperProps } from '@semcore/base-components';
-import type { Intergalactic, PropGetterFn } from '@semcore/core';
-import type { NSText } from '@semcore/typography';
-import type React from 'react';
-export type ButtonProps = BoxProps & NeighborItemProps & {
-    /** Button activity state */
-    active?: boolean;
-    /** Disabled button state */
-    disabled?: boolean;
-    /** Loading button state */
-    loading?: boolean;
-    /** Tag for the left Addon */
-    addonLeft?: React.ElementType;
-    /** Tag for the right Addon */
-    addonRight?: React.ElementType;
-    /**
-   * Placement for hint
-   * @default top
-   */
-    hintPlacement?: SimpleHintPopperProps['placement'];
-    /** Button size.
-   * @default `m`
-   */
-    size?: 'l' | 'm';
-    /** Button usage.
-   * @default `primary`
-   */
-    use?: 'primary' | 'secondary' | 'tertiary';
-    /** Button theme.
-   * @default undefined
-   */
-    theme?: 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert';
-};
-export type ButtonTextProps = NSText.Props;
-export type ButtonAddonProps = BoxProps;
-export type ButtonContext = {
-    getTextProps: PropGetterFn;
-    getAddonProps: PropGetterFn;
-};
+import { UnknownProperties, Intergalactic } from '@semcore/core';
+import { AbstractButtonAddonProps, AbstractButtonContext, AbstractButtonTextProps, AbstractButtonProps } from '../AbstractButton/AbstractButton.type';
+/**
+ *  Button size
+ * @default m
+ */
+export type ButtonSize = 'l' | 'm';
+/**
+ *  Button type
+ * @default secondary
+ */
+type Use = 'primary' | 'secondary' | 'tertiary';
+/**
+ * @deprecated don't use it. use `danger` for incorrect or danger behavior and `brand` for the orange one.
+ */
+type DeprecatedTheme = 'warning';
+/** Button theme */
+type Theme = 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert';
+/** @deprecated */
+export interface IButtonProps extends ButtonProps, UnknownProperties {
+}
+export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme | DeprecatedTheme>;
+/** @deprecated */
+export interface IButtonTextProps extends ButtonTextProps, UnknownProperties {
+}
+export type ButtonTextProps = AbstractButtonTextProps<ButtonSize>;
+/** @deprecated */
+export interface IButtonAddonProps extends ButtonAddonProps, UnknownProperties {
+}
+export type ButtonAddonProps = AbstractButtonAddonProps<ButtonSize>;
+/** @deprecated */
+export interface IButtonContext extends ButtonContext, UnknownProperties {
+}
+export type ButtonContext = AbstractButtonContext;
 export type ButtonChildren = {
     Text: Intergalactic.Component<'span', ButtonTextProps>;
     Addon: Intergalactic.Component<'span', ButtonAddonProps>;
 };
-export type ButtonComponent = Intergalactic.Component<'button', ButtonProps, ButtonContext> & ButtonChildren;
+export type ButtonComponent = Intergalactic.Component<'button', ButtonProps, ButtonContext> & {
+    Text: Intergalactic.Component<'span', ButtonTextProps>;
+    Addon: Intergalactic.Component<'span', ButtonAddonProps>;
+};
+export {};

package/lib/types/component/ButtonLink/ButtonLink.d.ts

@@ -1,2 +1,2 @@
-import type { ButtonLinkComponent } from './ButtonLink.type';
+import { ButtonLinkComponent } from './ButtonLink.type';
 export declare const ButtonLink: ButtonLinkComponent;

package/lib/types/component/ButtonLink/ButtonLink.type.d.ts

@@ -1,19 +1,25 @@
-import type { BoxProps } from '@semcore/base-components';
-import type { Intergalactic } from '@semcore/core';
-import type { LinkProps } from '@semcore/link';
-import type { NSText } from '@semcore/typography';
-import type { ButtonContext } from '../Button/Button.type';
-export type ButtonLinkProps = Intergalactic.InternalTypings.EfficientOmit<LinkProps, 'enableVisited'> & {
-    /**
-     *  Button link type
-     * @default primary
-     */
-    use?: 'primary' | 'secondary';
-};
-export type ButtonLinkTextProps = NSText.Props;
-export type ButtonLinkAddonProps = BoxProps;
+import { Intergalactic } from '@semcore/core';
+import { AbstractButtonAddonProps, AbstractButtonContext, AbstractButtonTextProps, AbstractButtonProps } from '../AbstractButton/AbstractButton.type';
+/**
+ *  Button link size
+ * @default m
+ */
+export type ButtonLinkSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
+/**
+ *  Button link type
+ * @default primary
+ */
+type Use = 'primary' | 'secondary';
+export type ButtonLinkProps = AbstractButtonProps<ButtonLinkSize, Use, never>;
+export type ButtonLinkTextProps = AbstractButtonTextProps<ButtonLinkSize>;
+export type ButtonLinkAddonProps = AbstractButtonAddonProps<ButtonLinkSize>;
+export type ButtonLinkContext = AbstractButtonContext;
 export type ButtonLinkChildren = {
     Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
     Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;
 };
-export type ButtonLinkComponent = Intergalactic.Component<'button', ButtonLinkProps, ButtonContext> & ButtonLinkChildren;
+export type ButtonLinkComponent = Intergalactic.Component<'button', ButtonLinkProps, ButtonLinkContext> & {
+    Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
+    Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;
+};
+export {};

package/lib/types/index.d.ts

@@ -1,4 +1,5 @@
-export { default, MAP_USE_DEFAULT_THEME } from './component/Button/Button';
+export { default } from './component/Button/Button';
 export * from './component/Button/Button.type';
 export * from './component/ButtonLink/ButtonLink';
 export * from './component/ButtonLink/ButtonLink.type';
+export { MAP_USE_DEFAULT_THEME } from './component/AbstractButton/AbstractButton';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/button",
   "description": "Semrush Button Component",
-  "version": "5.44.0-prerelease.0",
+  "version": "5.44.0-prerelease.4",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,14 +14,14 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "5.42.0-prerelease.0",
-    "@semcore/neighbor-location": "4.41.0-prerelease.0",
-    "@semcore/spin": "5.42.0-prerelease.0",
-    "@semcore/tooltip": "6.50.0-prerelease.0",
-    "@semcore/utils": "4.49.0-prerelease.0"
+    "@semcore/flex-box": "5.42.0-prerelease.4",
+    "@semcore/neighbor-location": "4.41.0-prerelease.4",
+    "@semcore/spin": "5.42.0-prerelease.4",
+    "@semcore/tooltip": "6.50.0-prerelease.4",
+    "@semcore/utils": "4.49.0-prerelease.4"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.0",
+    "@semcore/core": "^2.40.0-prerelease.4",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },