@phpsoftbox/react-softbox 1.15.1 → 1.16.1

package/README.md

@@ -46,6 +46,12 @@ import {
 } from '@phpsoftbox/react-softbox';
 ```
 
+```ts
+import { MarkdownEditor } from '@phpsoftbox/react-softbox/markdown';
+```
+
+`MarkdownEditor` вынесен в отдельный entrypoint, чтобы основной пакет не подтягивал `shiki`.
+
 ## Тема
 
 ```ts

package/dist/components/Input/FloatLabel/FloatLabel.module.css

@@ -1,4 +1,5 @@
 .wrapper {
+  --ui-float-label-background: var(--surface-input);
   position: relative;
   display: block;
 }
@@ -10,9 +11,10 @@
 
 .label {
   position: absolute;
-  left: 16px;
-  right: 16px;
+  left: 12px;
+  max-width: calc(100% - 24px);
   top: 16px;
+  box-sizing: border-box;
   color: var(--color-muted-2);
   font-size: var(--ui-control-font-size, var(--font-size-3));
   line-height: 1.2;
@@ -20,8 +22,8 @@
   transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
   pointer-events: none;
   z-index: 1;
-  background: var(--surface-input);
-  padding: 0;
+  background: var(--ui-float-label-background);
+  padding: 0 4px;
   border-radius: 4px;
   white-space: nowrap;
   overflow: hidden;
@@ -29,7 +31,16 @@
 }
 
 .wrapperWithHint .label {
-  right: 52px;
+  max-width: calc(100% - 64px);
+}
+
+.wrapper > textarea + .label {
+  background: var(--surface-input-solid);
+}
+
+.wrapper > input:disabled + .label,
+.wrapper > textarea:disabled + .label {
+  background: var(--surface-input-disabled);
 }
 
 .requiredMark {

package/dist/components/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import Select from './Select/Select';
 import FloatLabel from './FloatLabel/FloatLabel';
-import { InputGroup, InputAddon } from './InputGroup';
+import { InputAddon, InputGroupChoice, InputGroupLabel, InputGroupText } from './InputGroup';
 import MaskedInput from './MaskedInput';
 import NumberInput from './NumberInput';
 import DatePicker from './DatePicker';
@@ -46,8 +46,18 @@ declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivEl
     } & import("react").RefAttributes<HTMLTextAreaElement>>;
     Select: typeof Select;
     FloatLabel: typeof FloatLabel;
-    Group: typeof InputGroup;
+    Group: (({ stretch, className, children, ...props }: import("react").HTMLAttributes<HTMLDivElement> & {
+        stretch?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element) & {
+        Addon: typeof InputAddon;
+        Label: typeof InputGroupLabel;
+        Text: typeof InputGroupText;
+        Choice: typeof InputGroupChoice;
+    };
     Addon: typeof InputAddon;
+    GroupLabel: typeof InputGroupLabel;
+    GroupText: typeof InputGroupText;
+    GroupChoice: typeof InputGroupChoice;
     MaskedInput: typeof MaskedInput;
     Number: typeof NumberInput;
     DatePicker: typeof DatePicker;

package/dist/components/Input/Input.js

@@ -3,7 +3,7 @@ import InputField from './Field';
 import Textarea from './Textarea/Textarea';
 import Select from './Select/Select';
 import FloatLabel from './FloatLabel/FloatLabel';
-import { InputGroup, InputAddon } from './InputGroup';
+import { InputGroup, InputAddon, InputGroupChoice, InputGroupLabel, InputGroupText } from './InputGroup';
 import MaskedInput from './MaskedInput';
 import NumberInput from './NumberInput';
 import DatePicker from './DatePicker';
@@ -24,6 +24,9 @@ const Input = Object.assign(FormField, {
     FloatLabel,
     Group: InputGroup,
     Addon: InputAddon,
+    GroupLabel: InputGroupLabel,
+    GroupText: InputGroupText,
+    GroupChoice: InputGroupChoice,
     MaskedInput,
     Number: NumberInput,
     DatePicker,

package/dist/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,UAAU,MAAM,SAAS,CAAC;AACjC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,IAAI,MAAM,aAAa,CAAC;AAE/B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IACrC,KAAK,EAAE,SAAS,CAAC,KAAK;IACtB,OAAO,EAAE,SAAS,CAAC,OAAO;IAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ;IAC5B,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,QAAQ;IAClB,MAAM;IACN,UAAU;IACV,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,UAAU;IACjB,WAAW;IACX,MAAM,EAAE,WAAW;IACnB,UAAU;IACV,UAAU;IACV,SAAS,EAAE,eAAe;IAC1B,KAAK;IACL,MAAM;IACN,QAAQ;IACR,YAAY;IACZ,IAAI;IACJ,SAAS;CACV,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,UAAU,MAAM,SAAS,CAAC;AACjC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACzG,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,IAAI,MAAM,aAAa,CAAC;AAE/B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IACrC,KAAK,EAAE,SAAS,CAAC,KAAK;IACtB,OAAO,EAAE,SAAS,CAAC,OAAO;IAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ;IAC5B,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,QAAQ;IAClB,MAAM;IACN,UAAU;IACV,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,UAAU;IACjB,UAAU,EAAE,eAAe;IAC3B,SAAS,EAAE,cAAc;IACzB,WAAW,EAAE,gBAAgB;IAC7B,WAAW;IACX,MAAM,EAAE,WAAW;IACnB,UAAU;IACV,UAAU;IACV,SAAS,EAAE,eAAe;IAC1B,KAAK;IACL,MAAM;IACN,QAAQ;IACR,YAAY;IACZ,IAAI;IACJ,SAAS;CACV,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/components/Input/InputGroup.d.ts

@@ -3,9 +3,20 @@ import './InputGroup.module.css';
 type GroupProps = React.HTMLAttributes<HTMLDivElement> & {
     stretch?: boolean;
 };
-type AddonProps = React.HTMLAttributes<HTMLDivElement> & {
+type AddonVariant = 'default' | 'label' | 'muted' | 'choice';
+type AddonProps = React.HTMLAttributes<HTMLElement> & {
     as?: React.ElementType;
+    variant?: AddonVariant;
+};
+declare function InputGroupRoot({ stretch, className, children, ...props }: GroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputAddon({ as, variant, className, ...props }: AddonProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputGroupLabel(props: Omit<AddonProps, 'variant'>): import("react/jsx-runtime").JSX.Element;
+export declare function InputGroupText(props: Omit<AddonProps, 'variant'>): import("react/jsx-runtime").JSX.Element;
+export declare function InputGroupChoice(props: Omit<AddonProps, 'variant'>): import("react/jsx-runtime").JSX.Element;
+export declare const InputGroup: typeof InputGroupRoot & {
+    Addon: typeof InputAddon;
+    Label: typeof InputGroupLabel;
+    Text: typeof InputGroupText;
+    Choice: typeof InputGroupChoice;
 };
-export declare function InputGroup({ stretch, className, children, ...props }: GroupProps): import("react/jsx-runtime").JSX.Element;
-export declare function InputAddon({ as, className, ...props }: AddonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input/InputGroup.js

@@ -5,21 +5,44 @@ const GROUP_CLASS = 'rsb-input-group';
 const GROUP_STRETCH_CLASS = 'rsb-input-group--stretch';
 const ITEM_CLASS = 'rsb-group-item';
 const ADDON_CLASS = 'rsb-input-addon';
-export function InputGroup({ stretch = false, className, children, ...props }) {
+const mergeClassNames = (...classes) => classes.filter(Boolean).join(' ');
+function InputGroupRoot({ stretch = false, className, children, ...props }) {
     const classes = [GROUP_CLASS, stretch ? GROUP_STRETCH_CLASS : null, className].filter(Boolean).join(' ');
     const items = React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) {
             return child;
         }
         const element = child;
-        const childClassName = [element.props.className, ITEM_CLASS].filter(Boolean).join(' ');
+        const childClassName = mergeClassNames(element.props.className, ITEM_CLASS);
         return React.cloneElement(element, { className: childClassName });
     });
     return (_jsx("div", { className: classes, ...props, children: items }));
 }
-export function InputAddon({ as = 'div', className, ...props }) {
+export function InputAddon({ as = 'div', variant = 'default', className, ...props }) {
     const Component = as;
-    const classes = [ADDON_CLASS, ITEM_CLASS, className].filter(Boolean).join(' ');
+    const classes = [
+        ADDON_CLASS,
+        `${ADDON_CLASS}--${variant}`,
+        ITEM_CLASS,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
     return _jsx(Component, { className: classes, ...props });
 }
+export function InputGroupLabel(props) {
+    return _jsx(InputAddon, { as: "span", ...props, variant: "label" });
+}
+export function InputGroupText(props) {
+    return _jsx(InputAddon, { as: "span", ...props, variant: "muted" });
+}
+export function InputGroupChoice(props) {
+    return _jsx(InputAddon, { as: "span", ...props, variant: "choice" });
+}
+export const InputGroup = Object.assign(InputGroupRoot, {
+    Addon: InputAddon,
+    Label: InputGroupLabel,
+    Text: InputGroupText,
+    Choice: InputGroupChoice,
+});
 //# sourceMappingURL=InputGroup.js.map

package/dist/components/Input/InputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","sourceRoot":"","sources":["../../../src/components/Input/InputGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AACtC,MAAM,mBAAmB,GAAG,0BAA0B,CAAC;AACvD,MAAM,UAAU,GAAG,gBAAgB,CAAC;AACpC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAUtC,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc;IACvF,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzG,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,OAAO,GAAG,KAAmD,CAAC;QACpE,MAAM,cAAc,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvF,OAAO,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,YAC/B,KAAK,GACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,EAAE,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAc;IACxE,MAAM,SAAS,GAAG,EAAuB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/E,OAAO,KAAC,SAAS,IAAC,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACtD,CAAC"}
+{"version":3,"file":"InputGroup.js","sourceRoot":"","sources":["../../../src/components/Input/InputGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AACtC,MAAM,mBAAmB,GAAG,0BAA0B,CAAC;AACvD,MAAM,UAAU,GAAG,gBAAgB,CAAC;AACpC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAatC,MAAM,eAAe,GAAG,CAAC,GAAG,OAAiD,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEpH,SAAS,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc;IACpF,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzG,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,OAAO,GAAG,KAAmD,CAAC;QACpE,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC5E,OAAO,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,YAC/B,KAAK,GACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,EAAE,GAAG,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAc;IAC7F,MAAM,SAAS,GAAG,EAAuB,CAAC;IAC1C,MAAM,OAAO,GAAG;QACd,WAAW;QACX,GAAG,WAAW,KAAK,OAAO,EAAE;QAC5B,UAAU;QACV,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,KAAC,SAAS,IAAC,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACtD,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,KAAkC;IAChE,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,KAAK,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAkC;IAC/D,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,KAAK,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAkC;IACjE,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,KAAK,KAAK,EAAE,OAAO,EAAC,QAAQ,GAAG,CAAC;AAC9D,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IACtD,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,gBAAgB;CACzB,CAAC,CAAC"}

package/dist/components/Input/InputGroup.module.css

@@ -2,14 +2,37 @@
   display: flex;
   align-items: stretch;
   gap: 0;
+  width: 100%;
+  min-width: 0;
 }
 
 :global(.rsb-input-group--stretch) > :global(.rsb-group-item) {
-  flex: 1;
+  flex: 0 0 auto;
   min-width: 0;
 }
 
+:global(.rsb-input-group--stretch > .rsb-group-item:not(.rsb-input-addon):not(.btn):not(.rsb-radio)) {
+  flex: 1 1 0;
+}
+
 :global(.rsb-input-group) > :global(.rsb-group-item) {
+  position: relative;
+  border-radius: 0 !important;
+  min-height: var(--ui-control-height, 48px);
+}
+
+:global(.rsb-input-group) > :global(.rsb-group-item):focus,
+:global(.rsb-input-group) > :global(.rsb-group-item):focus-within {
+  z-index: 2;
+}
+
+:global(.rsb-input-group) > :global(.rsb-group-item.btn) {
+  min-height: var(--ui-control-height, 48px);
+  box-shadow: none;
+  flex: 0 0 auto;
+}
+
+:global(.rsb-input-group) > :global(.rsb-group-item) > :where(input, button, textarea) {
   border-radius: 0 !important;
 }
 
@@ -18,11 +41,21 @@
   border-bottom-left-radius: var(--radius-sm) !important;
 }
 
+:global(.rsb-input-group) > :global(.rsb-group-item):first-child > :where(input, button, textarea) {
+  border-top-left-radius: var(--radius-sm) !important;
+  border-bottom-left-radius: var(--radius-sm) !important;
+}
+
 :global(.rsb-input-group) > :global(.rsb-group-item):last-child {
   border-top-right-radius: var(--radius-sm) !important;
   border-bottom-right-radius: var(--radius-sm) !important;
 }
 
+:global(.rsb-input-group) > :global(.rsb-group-item):last-child > :where(input, button, textarea) {
+  border-top-right-radius: var(--radius-sm) !important;
+  border-bottom-right-radius: var(--radius-sm) !important;
+}
+
 :global(.rsb-input-group) > :global(.rsb-group-item) + :global(.rsb-group-item) {
   margin-left: -1px;
 }
@@ -30,9 +63,52 @@
 :global(.rsb-input-addon) {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  min-height: var(--ui-control-height, 48px);
   padding: 0 12px;
-  border: 1px solid rgba(30, 99, 233, 0.25);
-  background: var(--surface-input);
+  border: 1px solid var(--color-line);
+  background: var(--surface-input-muted);
+  color: var(--color-muted);
+  font-size: var(--ui-control-font-size, var(--font-size-3));
+  font-weight: 600;
+  line-height: var(--ui-control-line-height, 1.2);
+  white-space: nowrap;
+}
+
+:global(.rsb-input-addon--label),
+:global(.rsb-input-addon--muted) {
+  background: var(--surface-input-muted);
   color: var(--color-muted);
+  border-color: var(--color-line);
+}
+
+:global(.rsb-input-addon--label) {
+  color: var(--color-muted-2);
+  font-size: var(--font-size-2);
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+:global(.rsb-input-addon--muted) {
+  font-weight: 500;
+}
+
+:global(.rsb-input-addon--choice) {
+  gap: 10px;
+  padding: 0 14px;
+  background: var(--surface-input-muted);
+  border-color: var(--color-line);
+}
+
+:global(.rsb-input-addon--choice) > :global(.rsb-radio) {
+  align-items: center;
+}
+
+:global(.rsb-input-group) > :global(.rsb-radio.rsb-group-item) {
+  align-items: center;
+  min-height: var(--ui-control-height, 48px);
+  padding: 0 14px;
+  border: 1px solid var(--color-line);
+  background: var(--surface-input-muted);
   white-space: nowrap;
 }

package/dist/components/Input/Radio/Radio.js

@@ -4,7 +4,7 @@ import styles from './Radio.module.css';
 import Hint from '../Hint/Hint';
 export default function Radio({ id, label, description, hint, hintPlacement = 'auto', className, ...props }) {
     const inputId = id ?? React.useId();
-    const classes = [styles.radio, className].filter(Boolean).join(' ');
+    const classes = [styles.radio, 'rsb-radio', className].filter(Boolean).join(' ');
     return (_jsxs("label", { className: classes, htmlFor: inputId, children: [_jsx("input", { id: inputId, type: "radio", className: styles.input, ...props }), _jsx("span", { className: styles.control, "aria-hidden": "true" }), _jsxs("span", { className: styles.texts, children: [label ? (_jsxs("span", { className: styles.labelWrap, children: [_jsx("span", { className: styles.label, children: label }), _jsx(Hint, { content: hint, placement: hintPlacement, ariaLabel: "\u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430 \u043A radio-\u043F\u043E\u043B\u044E" })] })) : null, description ? _jsx("span", { className: styles.description, children: description }) : null] })] }));
 }
 //# sourceMappingURL=Radio.js.map

package/dist/components/Input/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../src/components/Input/Radio/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,IAAI,MAAM,cAAc,CAAC;AAUhC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IAChH,MAAM,OAAO,GAAG,EAAE,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpE,OAAO,CACL,iBAAO,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,aACzC,gBAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,KAAM,KAAK,GAAI,EACvE,eAAM,SAAS,EAAE,MAAM,CAAC,OAAO,iBAAc,MAAM,GAAG,EACtD,gBAAM,SAAS,EAAE,MAAM,CAAC,KAAK,aAC1B,KAAK,CAAC,CAAC,CAAC,CACP,gBAAM,SAAS,EAAE,MAAM,CAAC,SAAS,aAC/B,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAQ,EAC7C,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAC,8FAAwB,GAAG,IAC/E,CACR,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,WAAW,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC1E,IACD,CACT,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../src/components/Input/Radio/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,IAAI,MAAM,cAAc,CAAC;AAUhC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IAChH,MAAM,OAAO,GAAG,EAAE,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjF,OAAO,CACL,iBAAO,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,aACzC,gBAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,KAAM,KAAK,GAAI,EACvE,eAAM,SAAS,EAAE,MAAM,CAAC,OAAO,iBAAc,MAAM,GAAG,EACtD,gBAAM,SAAS,EAAE,MAAM,CAAC,KAAK,aAC1B,KAAK,CAAC,CAAC,CAAC,CACP,gBAAM,SAAS,EAAE,MAAM,CAAC,SAAS,aAC/B,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAQ,EAC7C,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAC,8FAAwB,GAAG,IAC/E,CACR,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,WAAW,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC1E,IACD,CACT,CAAC;AACJ,CAAC"}

package/dist/components/Input/Select/Select.d.ts

@@ -55,6 +55,7 @@ type SharedProps<T extends string | number, M = unknown> = {
     floatLabel?: boolean;
     endActions?: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 };
 type SingleProps<T extends string | number, M = unknown> = SharedProps<T, M> & {
     multiple?: false;
@@ -88,7 +89,7 @@ type MultiProps<T extends string | number, M = unknown> = SharedProps<T, M> & {
     onChange?: (value: T[], options: SelectOption<T, M>[]) => void;
 };
 type Props<T extends string | number, M = unknown> = SingleProps<T, M> | SingleClearableProps<T, M> | SingleAllowEmptyProps<T, M> | MultiProps<T, M>;
-declare function Select<T extends string | number = string | number, M = unknown>({ label, id, name, required, options, value, defaultValue, placeholder, multiple, searchable, clearable, clearLabel, allowEmptyValue, emptyOptionLabel, emptyOptionValue, loadingText, emptyText, creatable, createLabel, creatingText, onCreateOption, loadOptions, request, onAfterRequest, renderOption, renderValue, placement, portal, disabled, floatLabel, endActions, className, onChange, }: Props<T, M>): import("react/jsx-runtime").JSX.Element;
+declare function Select<T extends string | number = string | number, M = unknown>({ label, id, name, required, options, value, defaultValue, placeholder, multiple, searchable, clearable, clearLabel, allowEmptyValue, emptyOptionLabel, emptyOptionValue, loadingText, emptyText, creatable, createLabel, creatingText, onCreateOption, loadOptions, request, onAfterRequest, renderOption, renderValue, placement, portal, disabled, floatLabel, endActions, className, style, onChange, }: Props<T, M>): import("react/jsx-runtime").JSX.Element;
 declare namespace Select {
     var supportsFloatLabel: boolean;
     var floatLabelKind: string;

package/dist/components/Input/Select/Select.js

@@ -12,7 +12,7 @@ const defaultMapOptions = (data) => {
     }
     return [];
 };
-export default function Select({ label, id, name, required = false, options = [], value, defaultValue, placeholder = 'Выберите...', multiple = false, searchable = false, clearable = false, clearLabel = 'Очистить', allowEmptyValue = false, emptyOptionLabel = 'Не выбрано', emptyOptionValue, loadingText = 'Загрузка...', emptyText = 'Нет данных', creatable = false, createLabel = (nextQuery) => `Добавить "${nextQuery}"`, creatingText = 'Добавление...', onCreateOption, loadOptions, request, onAfterRequest, renderOption, renderValue, placement = 'auto', portal = true, disabled = false, floatLabel = false, endActions, className, onChange, }) {
+export default function Select({ label, id, name, required = false, options = [], value, defaultValue, placeholder = 'Выберите...', multiple = false, searchable = false, clearable = false, clearLabel = 'Очистить', allowEmptyValue = false, emptyOptionLabel = 'Не выбрано', emptyOptionValue, loadingText = 'Загрузка...', emptyText = 'Нет данных', creatable = false, createLabel = (nextQuery) => `Добавить "${nextQuery}"`, creatingText = 'Добавление...', onCreateOption, loadOptions, request, onAfterRequest, renderOption, renderValue, placement = 'auto', portal = true, disabled = false, floatLabel = false, endActions, className, style, onChange, }) {
     const resolvedOptions = options;
     const resolvedLoadOptions = loadOptions;
     const resolvedRequest = request;
@@ -28,6 +28,7 @@ export default function Select({ label, id, name, required = false, options = []
     const shouldPortal = portal && canPortal;
     const [items, setItems] = React.useState(resolvedOptions);
     const [createdItems, setCreatedItems] = React.useState([]);
+    const containerRef = React.useRef(null);
     const controlRef = React.useRef(null);
     const optionRefs = React.useRef([]);
     const activeOptionSourceRef = React.useRef('sync');
@@ -35,10 +36,9 @@ export default function Select({ label, id, name, required = false, options = []
         gap: 6,
         align: 'left',
         placement,
-        anchorRef: controlRef,
+        anchorRef: containerRef,
         strategy: shouldPortal ? 'fixed' : 'absolute',
     });
-    const containerRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const listRef = React.useRef(null);
     const generatedId = React.useId();
@@ -116,7 +116,8 @@ export default function Select({ label, id, name, required = false, options = []
                 return;
             }
             const target = event.target;
-            const insideControl = containerRef.current.contains(target);
+            const eventPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+            const insideControl = containerRef.current.contains(target) || eventPath.includes(containerRef.current);
             const insideDropdown = dropdownRef.current ? dropdownRef.current.contains(target) : false;
             if (!insideControl && !insideDropdown) {
                 setOpen(false);
@@ -153,6 +154,11 @@ export default function Select({ label, id, name, required = false, options = []
             }
         }
     }, [open, searchable]);
+    React.useEffect(() => {
+        if (!open && query !== '') {
+            setQuery('');
+        }
+    }, [open, query]);
     const allOptions = React.useMemo(() => (emptyOption ? [emptyOption, ...mergedItems] : mergedItems), [emptyOption, mergedItems]);
     const optionMap = React.useMemo(() => {
         return new Map(allOptions.map((item) => [item.value, item]));
@@ -201,6 +207,14 @@ export default function Select({ label, id, name, required = false, options = []
     const hasValue = multiple ? selectedValues.length > 0 : selectedValues !== undefined;
     const isEmptySelection = !multiple && allowEmpty && selectedValues === resolvedEmptyValue;
     const floatActive = floatLabel && (open || hasValue);
+    const showInlineSearch = searchable && open;
+    const searchPlaceholder = React.useMemo(() => {
+        if (!hasValue) {
+            return placeholder;
+        }
+        const selectedLabel = selectedList.map((item) => item.label).filter(Boolean).join(', ');
+        return selectedLabel || placeholder;
+    }, [hasValue, selectedList, placeholder]);
     const displayedOptions = React.useMemo(() => {
         if (isRemote) {
             const filtered = mergedItems;
@@ -443,7 +457,7 @@ export default function Select({ label, id, name, required = false, options = []
             setCreating(false);
         }
     };
-    const controlWidth = controlRef.current?.getBoundingClientRect().width;
+    const controlWidth = containerRef.current?.getBoundingClientRect().width;
     const resolvedDropdownStyle = shouldPortal
         ? {
             ...dropdownStyle,
@@ -451,49 +465,49 @@ export default function Select({ label, id, name, required = false, options = []
             minWidth: controlWidth ? `${controlWidth}px` : undefined,
         }
         : dropdownStyle;
-    const dropdown = open ? (_jsxs("div", { className: [styles.dropdown, shouldPortal ? styles.dropdownPortal : null].filter(Boolean).join(' '), ref: dropdownRef, style: resolvedDropdownStyle, children: [searchable ? (_jsx("input", { ref: inputRef, className: styles.search, placeholder: "\u041F\u043E\u0438\u0441\u043A...", value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
-                    if (event.key === 'Enter' && canCreate) {
+    const dropdown = open ? (_jsx("div", { className: [styles.dropdown, shouldPortal ? styles.dropdownPortal : null].filter(Boolean).join(' '), ref: dropdownRef, style: resolvedDropdownStyle, children: _jsxs("div", { className: styles.list, role: "listbox", id: listId, ref: listRef, children: [loading ? _jsx("div", { className: styles.status, children: loadingText }) : null, !loading && !canCreate && (allowEmpty ? displayedOptions.length <= 1 : displayedOptions.length === 0) ? (_jsx("div", { className: styles.status, children: emptyText })) : null, !loading && canCreate ? (_jsxs("button", { type: "button", className: [styles.option, styles.optionCreate].filter(Boolean).join(' '), onMouseDown: (event) => {
                         event.preventDefault();
                         void handleCreateOption();
-                    }
-                } })) : null, _jsxs("div", { className: styles.list, role: "listbox", id: listId, ref: listRef, children: [loading ? _jsx("div", { className: styles.status, children: loadingText }) : null, !loading && !canCreate && (allowEmpty ? displayedOptions.length <= 1 : displayedOptions.length === 0) ? (_jsx("div", { className: styles.status, children: emptyText })) : null, !loading && canCreate ? (_jsxs("button", { type: "button", className: [styles.option, styles.optionCreate].filter(Boolean).join(' '), onMouseDown: (event) => {
-                            event.preventDefault();
+                    }, onClick: (event) => {
+                        if (event.detail === 0) {
                             void handleCreateOption();
-                        }, onClick: (event) => {
-                            if (event.detail === 0) {
-                                void handleCreateOption();
-                            }
-                        }, disabled: creating, children: [_jsx("span", { children: creating ? creatingText : createLabel(trimmedQuery) }), _jsx("span", { className: styles.createMark, children: "+" })] })) : null, !loading
-                        ? displayedOptions.map((option, index) => {
-                            const selected = multiple
-                                ? option.value !== null && selectedValues.includes(option.value)
-                                : selectedValues === option.value;
-                            const active = index === activeOptionIndex;
-                            return (_jsxs("button", { type: "button", className: [
-                                    styles.option,
-                                    selected ? styles.optionSelected : null,
-                                    active ? styles.optionActive : null,
-                                    option.disabled ? styles.optionDisabled : null,
-                                ]
-                                    .filter(Boolean)
-                                    .join(' '), ref: (node) => {
-                                    optionRefs.current[index] = node;
-                                }, role: "option", "aria-selected": selected, "aria-label": option.label, onMouseEnter: () => {
-                                    activeOptionSourceRef.current = 'mouse';
-                                    setActiveOptionIndex(index);
-                                }, onMouseDown: (event) => {
-                                    event.preventDefault();
+                        }
+                    }, disabled: creating, children: [_jsx("span", { children: creating ? creatingText : createLabel(trimmedQuery) }), _jsx("span", { className: styles.createMark, children: "+" })] })) : null, !loading
+                    ? displayedOptions.map((option, index) => {
+                        const selected = multiple
+                            ? option.value !== null && selectedValues.includes(option.value)
+                            : selectedValues === option.value;
+                        const active = index === activeOptionIndex;
+                        return (_jsxs("button", { type: "button", className: [
+                                styles.option,
+                                selected ? styles.optionSelected : null,
+                                active ? styles.optionActive : null,
+                                option.disabled ? styles.optionDisabled : null,
+                            ]
+                                .filter(Boolean)
+                                .join(' '), ref: (node) => {
+                                optionRefs.current[index] = node;
+                            }, role: "option", "aria-selected": selected, "aria-label": option.label, onMouseEnter: () => {
+                                activeOptionSourceRef.current = 'mouse';
+                                setActiveOptionIndex(index);
+                            }, onMouseDown: (event) => {
+                                event.preventDefault();
+                                handleSelect(option);
+                            }, onClick: (event) => {
+                                if (event.detail === 0) {
                                     handleSelect(option);
-                                }, onClick: (event) => {
-                                    if (event.detail === 0) {
-                                        handleSelect(option);
-                                    }
-                                }, disabled: option.disabled, children: [renderOption
-                                        ? renderOption(option, { selected, active, multiple })
-                                        : _jsx("span", { className: styles.optionLabel, children: option.label }), selected ? _jsx("span", { className: styles.check, children: "\u2713" }) : null] }, option.value ?? '__empty'));
-                        })
-                        : null] })] })) : null;
-    return (_jsxs("div", { className: [styles.wrapper, className].filter(Boolean).join(' '), "data-open": open, "data-has-value": hasValue, "data-multiple": multiple ? 'true' : 'false', "data-has-query": query.length > 0, "data-has-label": hasLabel, "data-float-label": floatLabel ? 'true' : undefined, "data-float-active": floatActive ? 'true' : undefined, "data-has-clear": showClear ? 'true' : undefined, ref: containerRef, onKeyDown: handleKeyDown, children: [label ? (_jsx("span", { id: labelId, className: styles.label, children: label })) : null, _jsx("button", { type: "button", className: styles.control, style: controlStyle, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, "aria-labelledby": label ? labelId : undefined, id: controlId, onClick: () => !disabled && setOpen((prev) => !prev), disabled: disabled, ref: controlRef, children: _jsx("div", { className: styles.value, children: hasValue ? (multiple ? (selectedList.map((item) => (_jsxs("div", { className: styles.tag, children: [renderValue ? renderValue(item) : item.label, _jsx("span", { role: "button", tabIndex: 0, className: styles.remove, onClick: (event) => {
+                                }
+                            }, disabled: option.disabled, children: [renderOption
+                                    ? renderOption(option, { selected, active, multiple })
+                                    : _jsx("span", { className: styles.optionLabel, children: option.label }), selected ? _jsx("span", { className: styles.check, children: "\u2713" }) : null] }, option.value ?? '__empty'));
+                    })
+                    : null] }) })) : null;
+    return (_jsxs("div", { className: [styles.wrapper, className].filter(Boolean).join(' '), "data-open": open, "data-has-value": hasValue, "data-multiple": multiple ? 'true' : 'false', "data-has-query": query.length > 0, "data-has-label": hasLabel, "data-float-label": floatLabel ? 'true' : undefined, "data-float-active": floatActive ? 'true' : undefined, "data-has-clear": showClear ? 'true' : undefined, ref: containerRef, style: { ...style, ...controlStyle }, onKeyDown: handleKeyDown, children: [label ? (_jsx("span", { id: labelId, className: styles.label, children: label })) : null, showInlineSearch ? (_jsx("input", { ref: inputRef, id: controlId, className: styles.controlSearch, style: controlStyle, value: query, placeholder: searchPlaceholder, autoComplete: "off", spellCheck: false, role: "combobox", "aria-autocomplete": "list", "aria-expanded": open, "aria-controls": listId, "aria-labelledby": label ? labelId : undefined, disabled: disabled, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                    if (event.key === 'Enter' && canCreate) {
+                        event.preventDefault();
+                        void handleCreateOption();
+                    }
+                } })) : (_jsx("button", { type: "button", className: styles.control, style: controlStyle, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, "aria-labelledby": label ? labelId : undefined, id: controlId, onClick: () => !disabled && setOpen((prev) => !prev), disabled: disabled, ref: controlRef, children: _jsx("div", { className: styles.value, children: hasValue ? (multiple ? (selectedList.map((item) => (_jsxs("div", { className: styles.tag, children: [renderValue ? renderValue(item) : item.label, _jsx("span", { role: "button", tabIndex: 0, className: styles.remove, onClick: (event) => {
                                     event.stopPropagation();
                                     handleRemove(item.value);
                                 }, onKeyDown: (event) => {
@@ -502,7 +516,7 @@ export default function Select({ label, id, name, required = false, options = []
                                         event.stopPropagation();
                                         handleRemove(item.value);
                                     }
-                                }, "aria-label": `Удалить ${item.label}`, children: "\u00D7" })] }, String(item.value))))) : (_jsx("span", { className: styles.singleValue, children: selectedList[0] ? (renderValue ? renderValue(selectedList[0]) : selectedList[0].label) : null }))) : (_jsx("span", { className: [styles.placeholder, styles.singleValue].join(' '), children: placeholder })) }) }), _jsxs(ActionStack, { className: styles.controls, children: [endActions, showClear ? (_jsx("span", { role: "button", tabIndex: 0, className: styles.clearButton, "aria-label": clearLabel, onMouseDown: (event) => event.preventDefault(), onClick: handleClear, onKeyDown: (event) => {
+                                }, "aria-label": `Удалить ${item.label}`, children: "\u00D7" })] }, String(item.value))))) : (_jsx("span", { className: styles.singleValue, children: selectedList[0] ? (renderValue ? renderValue(selectedList[0]) : selectedList[0].label) : null }))) : (_jsx("span", { className: [styles.placeholder, styles.singleValue].join(' '), children: placeholder })) }) })), _jsxs(ActionStack, { className: styles.controls, children: [endActions, showClear ? (_jsx("span", { role: "button", tabIndex: 0, className: styles.clearButton, "aria-label": clearLabel, onMouseDown: (event) => event.preventDefault(), onClick: handleClear, onKeyDown: (event) => {
                             if (event.key === 'Enter' || event.key === ' ') {
                                 event.preventDefault();
                                 handleClear(event);