From 687a98e27eb3354c0cd87d1206af26644d6b72c5 Mon Sep 17 00:00:00 2001 From: Serpentariu13 Date: Tue, 10 Feb 2026 15:53:31 +0300 Subject: [PATCH 1/4] bump ver --- package.json | 2 +- packages/core/package.json | 2 +- packages/icons/package.json | 2 +- packages/system/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 38675023b..80b7e05d0 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "stage-ui", "author": "Script Heads", - "version": "0.7.58", + "version": "0.7.59", "license": "MIT", "private": true, "workspaces": [ diff --git a/packages/core/package.json b/packages/core/package.json index afdce6971..115566857 100755 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/core", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.58", + "version": "0.7.59", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", diff --git a/packages/icons/package.json b/packages/icons/package.json index 5e969247b..94261929d 100755 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/icons", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.58", + "version": "0.7.59", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", diff --git a/packages/system/package.json b/packages/system/package.json index b47c5ee4b..b570c615e 100755 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/system", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.58", + "version": "0.7.59", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", From 6b6c80aea233433a99d928b25d46bfe620348098 Mon Sep 17 00:00:00 2001 From: Serpentariu13 Date: Tue, 10 Feb 2026 15:56:46 +0300 Subject: [PATCH 2/4] Ver bump --- package.json | 2 +- packages/core/package.json | 2 +- packages/icons/package.json | 2 +- packages/system/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 80b7e05d0..17a94e7e1 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "stage-ui", "author": "Script Heads", - "version": "0.7.59", + "version": "0.7.61", "license": "MIT", "private": true, "workspaces": [ diff --git a/packages/core/package.json b/packages/core/package.json index 115566857..4eb4fb1b9 100755 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/core", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.59", + "version": "0.7.61", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", diff --git a/packages/icons/package.json b/packages/icons/package.json index 94261929d..20baa6eac 100755 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/icons", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.59", + "version": "0.7.61", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", diff --git a/packages/system/package.json b/packages/system/package.json index b570c615e..dc272b12e 100755 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/system", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.59", + "version": "0.7.61", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", From 1afb44434cd4d2a515a7546e1f9df509c7bbc85a Mon Sep 17 00:00:00 2001 From: Serpentariu13 Date: Tue, 10 Feb 2026 16:41:14 +0300 Subject: [PATCH 3/4] Change types --- package.json | 2 +- .../core/control/Button/PolymorphicButton.tsx | 4 +- packages/core/control/Button/styles.ts | 19 ++-- packages/core/control/Button/types.ts | 96 +++++++++---------- packages/core/package.json | 2 +- packages/icons/package.json | 2 +- packages/system/package.json | 2 +- packages/testbed/src/index.tsx | 82 +++++++++++++--- 8 files changed, 129 insertions(+), 80 deletions(-) diff --git a/package.json b/package.json index 17a94e7e1..db4e16dac 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "stage-ui", "author": "Script Heads", - "version": "0.7.61", + "version": "0.7.62", "license": "MIT", "private": true, "workspaces": [ diff --git a/packages/core/control/Button/PolymorphicButton.tsx b/packages/core/control/Button/PolymorphicButton.tsx index 5bd4f6be3..089a3b210 100644 --- a/packages/core/control/Button/PolymorphicButton.tsx +++ b/packages/core/control/Button/PolymorphicButton.tsx @@ -28,9 +28,9 @@ type PropsToOmit = keyof (AsProp & P) type PolymorphicRef = React.ComponentPropsWithRef['ref'] -type Props = ButtonTypes.PolymorphicProps & +type Props = ButtonTypes.PolymorphicProps & AsProp & - Omit, PropsToOmit> + Omit, PropsToOmit>> const PolymorphicButtonComponent = ( props: Props, diff --git a/packages/core/control/Button/styles.ts b/packages/core/control/Button/styles.ts index 76fe1c83f..b89ef0c26 100755 --- a/packages/core/control/Button/styles.ts +++ b/packages/core/control/Button/styles.ts @@ -3,17 +3,14 @@ import { colorProp } from '@stage-ui/system' import Types from './types' -const styles: Stage.CreateClasses = ( - theme, - props, -) => { - const { - size = 'm', - decoration = 'filled', - shape = 'rounded', - disabled, - uppercase, - } = props +const styles: Stage.CreateClasses< + Types.Classes, + Types.Props | Types.PolymorphicProps +> = (theme, props) => { + const { size = 'm', decoration = 'filled', shape = 'rounded' } = props + const disabled = 'disabled' in props ? props.disabled : undefined + const uppercase = 'uppercase' in props ? props.uppercase : undefined + const color = colorProp(props.color, theme) || theme.color.primary const isDark = color.contrast(theme.color.onPrimary) > 2.4 diff --git a/packages/core/control/Button/types.ts b/packages/core/control/Button/types.ts index d5bcd98ec..d00843635 100755 --- a/packages/core/control/Button/types.ts +++ b/packages/core/control/Button/types.ts @@ -1,11 +1,50 @@ -import React from 'react' +import React, { ComponentPropsWithoutRef } from 'react' declare namespace ButtonTypes { type Decoration = 'filled' | 'outline' | 'text' | 'plain' type Shape = 'square' | 'rounded' | 'round' type Type = 'submit' | 'reset' | 'button' type ChildAlign = 'left' | 'right' - interface Props extends Stage.AllProps { + + interface SharedProps { + /** + * Sizes of button + * @display Sizes + * @link /props/#size + * @default m + */ + size?: Stage.Sizes + /** + * Defines how button look + * @default filled + */ + decoration?: Decoration + /** + * Shape of button + * @default rounded + */ + shape?: Shape + + /** + * Color of button + */ + color?: Stage.ColorProp + + /** + * same as label + */ + children?: React.ReactNode + /** + * Place for items to the right of children + */ + rightChild?: React.ReactNode + /** + * Place for items to the left of children + */ + leftChild?: React.ReactNode + } + + interface Props extends Stage.AllProps, SharedProps { /** * Specifies that the button should have input focus when the page loads */ @@ -53,47 +92,16 @@ declare namespace ButtonTypes { */ value?: string | string[] | number - /** - * Sizes of button - * @display Sizes - * @link /props/#size - * @default m - */ - size?: Stage.Sizes - /** - * Defines how button look - * @default filled - */ - decoration?: Decoration - /** - * Shape of button - * @default rounded - */ - shape?: Shape /** * Make button's text uppercase */ uppercase?: boolean - /** - * Color of button - */ - color?: Stage.ColorProp + /** * Button's label */ label?: React.ReactNode - /** - * same as label - */ - children?: React.ReactNode - /** - * Place for items to the right of children - */ - rightChild?: React.ReactNode - /** - * Place for items to the left of children - */ - leftChild?: React.ReactNode + /** * Async onClick */ @@ -105,21 +113,9 @@ declare namespace ButtonTypes { loadingComponent?: React.ReactNode } - interface PolymorphicProps - extends Pick< - Props, - | 'leftChild' - | 'rightChild' - | 'type' - | 'size' - | 'shape' - | 'disabled' - | 'uppercase' - | 'decoration' - | 'color' - | 'children' - | 'style' - > {} + interface PolymorphicProps + extends Stage.AllProps, Classes>, + SharedProps {} type Classes = { /** diff --git a/packages/core/package.json b/packages/core/package.json index 4eb4fb1b9..50574b99a 100755 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/core", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.61", + "version": "0.7.62", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", diff --git a/packages/icons/package.json b/packages/icons/package.json index 20baa6eac..4f5700f58 100755 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/icons", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.61", + "version": "0.7.62", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", diff --git a/packages/system/package.json b/packages/system/package.json index dc272b12e..8297ac151 100755 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/system", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.61", + "version": "0.7.62", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", diff --git a/packages/testbed/src/index.tsx b/packages/testbed/src/index.tsx index 14503769c..be29900fa 100755 --- a/packages/testbed/src/index.tsx +++ b/packages/testbed/src/index.tsx @@ -1,20 +1,76 @@ import { light } from './theme' -import { DatePicker, Modal, modal, Viewport } from '@stage-ui/core' +import { + Button, + DatePicker, + Drop, + Modal, + modal, + PolymorphicButton, + ReactFocusTrap, + TextField, + Viewport, +} from '@stage-ui/core' import ReactDOM from 'react-dom' -import { useState } from 'react' +import { useState, useEffect, useRef, HTMLProps } from 'react' +import LinkTypes from '@stage-ui/core/content/Link/types' +import ButtonTypes from '@stage-ui/core/control/Button/types' const App: React.FC = () => { - const handleOpen = () => { - modal({ - preventEscapeClose: true, - render: () => { - return <>123 - }, - overlayClose: false, - }) - } - - return null + const [open, setOpen] = useState(false) + const debouncedOpen = useDebounce(open, 1000) + const targetRef = useRef(null) + + const linkProps: ButtonTypes.PolymorphicProps<'a'> = {} + return ( +
+ + +
123
+ + + } + style={(t) => ({ + cursor: 'pointer', + textDecoration: 'none !important', + width: '100%', + fontSize: '1.125rem', + color: `${t.color.gray[900].string()} !important`, + '&:hover': { + backgroundColor: t.color.gray[100].string(), + }, + })} + borderColor="border" + decoration="outline" + size="xl" + {...linkProps} + > + Продолжить с Яндекс ID + +
+ ) +} + +export function useDebounce(value: T, delay: number): T { + const [debouncedValue, setDebouncedValue] = useState(value) + + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedValue(value) + }, delay) + + return () => { + clearTimeout(handler) + } + }, [value, delay]) + + return debouncedValue } ReactDOM.render( From 113719862826e7a410da88128aa3132577924a5d Mon Sep 17 00:00:00 2001 From: Serpentariu13 Date: Tue, 10 Feb 2026 16:57:22 +0300 Subject: [PATCH 4/4] Handle disabled --- package.json | 2 +- .../core/control/Button/PolymorphicButton.tsx | 32 ++++++++++++++++++- packages/core/control/Button/types.ts | 10 +++--- packages/core/package.json | 2 +- packages/icons/package.json | 2 +- packages/system/package.json | 2 +- packages/testbed/src/index.tsx | 1 + 7 files changed, 42 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index db4e16dac..e1da72d52 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "stage-ui", "author": "Script Heads", - "version": "0.7.62", + "version": "0.7.63", "license": "MIT", "private": true, "workspaces": [ diff --git a/packages/core/control/Button/PolymorphicButton.tsx b/packages/core/control/Button/PolymorphicButton.tsx index 089a3b210..6c645bdb7 100644 --- a/packages/core/control/Button/PolymorphicButton.tsx +++ b/packages/core/control/Button/PolymorphicButton.tsx @@ -1,9 +1,12 @@ /* eslint-disable react/button-has-type */ /* eslint-disable react/destructuring-assignment */ import React, { + ComponentProps, forwardRef, ForwardRefRenderFunction, HTMLProps, + MouseEvent, + PropsWithoutRef, ReactChild, ReactNode, Ref, @@ -36,13 +39,33 @@ const PolymorphicButtonComponent = ( props: Props, ref: PolymorphicRef, ) => { - let { leftChild, rightChild, children, as = 'button', style, ...restProps } = props + let { + leftChild, + rightChild, + children, + as = 'button', + style, + disabled, + onClick, + ...restProps + } = props const { classes, attributes, events, styleProps } = useSystem( 'PolymorphicButton', props, createClasses, ) + const handleOnClick = (e: MouseEvent>>) => { + if (disabled) { + e.preventDefault() + return + } + if (onClick) { + onClick?.(e) + return + } + } + return jsx(as, { ...attributes, ...events, @@ -56,7 +79,14 @@ const PolymorphicButtonComponent = ( ), ref, + + onClick: handleOnClick, + ...restProps, + + ...(disabled && { + tabIndex: -1, + }), }) } diff --git a/packages/core/control/Button/types.ts b/packages/core/control/Button/types.ts index d00843635..f155053a5 100755 --- a/packages/core/control/Button/types.ts +++ b/packages/core/control/Button/types.ts @@ -42,6 +42,11 @@ declare namespace ButtonTypes { * Place for items to the left of children */ leftChild?: React.ReactNode + + /** + * Prevents the user from interacting with the button + */ + disabled?: boolean } interface Props extends Stage.AllProps, SharedProps { @@ -49,10 +54,7 @@ declare namespace ButtonTypes { * Specifies that the button should have input focus when the page loads */ autoFocus?: boolean - /** - * Prevents the user from interacting with the button - */ - disabled?: boolean + /** * The
element to associate the button with */ diff --git a/packages/core/package.json b/packages/core/package.json index 50574b99a..f3f21ae89 100755 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/core", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.62", + "version": "0.7.63", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", diff --git a/packages/icons/package.json b/packages/icons/package.json index 4f5700f58..cf04a69bc 100755 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/icons", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.62", + "version": "0.7.63", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", diff --git a/packages/system/package.json b/packages/system/package.json index 8297ac151..5197e5306 100755 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,7 +1,7 @@ { "name": "@stage-ui/system", "description": "Flexible UI components library declared by your own Design System.", - "version": "0.7.62", + "version": "0.7.63", "license": "MIT", "homepage": "https://stageui.shds.io/", "bugs": "https://github.com/script-heads/stage-ui/issues", diff --git a/packages/testbed/src/index.tsx b/packages/testbed/src/index.tsx index be29900fa..de3d73487 100755 --- a/packages/testbed/src/index.tsx +++ b/packages/testbed/src/index.tsx @@ -28,6 +28,7 @@ const App: React.FC = () => {
123