@via-profit/ui-kit 0.3.0 → 0.5.0

package/PhoneField/usePhoneUtils.js

@@ -3,15 +3,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePhoneUtils = void 0;
+exports.usePhoneUtils = exports.dropExtraPluses = exports.templateToMask = void 0;
 const react_1 = __importDefault(require("react"));
-const UnknownFlag_1 = __importDefault(require("./UnknownFlag"));
+const Unknown_1 = __importDefault(require("./flags/Unknown"));
+const useMasked_1 = require("../MaskedField/useMasked");
+/**
+ * Converts a phone template to a mask: «x» is a digit, other chars are literals
+ */
+const templateToMask = (template) => template.split('').map(char => (char === 'x' ? /\d/ : char));
+exports.templateToMask = templateToMask;
+/**
+ * «+» is allowed only as the first char of a parsed phone, the other ones are dropped
+ */
+const dropExtraPluses = (parsed) => {
+    const { text, caret } = parsed;
+    const removedBeforeCaret = (text.slice(1, Math.max(caret, 1)).match(/\+/g) || []).length;
+    return {
+        text: text.charAt(0) + text.slice(1).replace(/\+/g, ''),
+        caret: caret - removedBeforeCaret,
+    };
+};
+exports.dropExtraPluses = dropExtraPluses;
 const usePhoneUtils = (params) => {
     const { templates } = params;
+    const masked = (0, useMasked_1.useMasked)();
     const templatesList = react_1.default.useMemo(() => templates.concat([
         [
             null,
-            react_1.default.createElement(UnknownFlag_1.default, { key: "unknnown" }),
+            react_1.default.createElement(Unknown_1.default, { key: "unknnown" }),
             null,
             '+x xxx xxx-xx-xx',
             '+7 987 654-32-10',
@@ -61,44 +80,18 @@ const usePhoneUtils = (params) => {
         if (inputValue === '') {
             return data;
         }
-        const { countryCode, callingCode, CountryFlag, template, placeholder } = getTemplateInfo(inputValue);
-        const mask = template.split('').map(c => (c === 'x' ? /\d/ : c));
-        let charIndex = 0;
-        for (let patternIndex = 0; patternIndex < mask.length; patternIndex++) {
-            if (charIndex >= inputValue.length) {
-                break;
-            }
-            const char = inputValue[charIndex];
-            const template = mask[patternIndex];
-            // If put +, but not first
-            if (charIndex !== 0 && char === '+') {
-                break;
-            }
-            if (template instanceof RegExp && new RegExp(template).test(char)) {
-                data.text = `${data.text}${char}`;
-                charIndex += 1;
-            }
-            if (typeof template === 'string' && template === char) {
-                data.text = `${data.text}${char}`;
-                charIndex += 1;
-            }
-            if (typeof template === 'string' && template !== char) {
-                data.text = `${data.text}${template}`;
-                if (charIndex < caret) {
-                    data.caret += 1;
-                }
-            }
-        }
-        // const templateLength = template.replace(/[^x\d]/g, '').split('').length;
-        // const valueLength = inputValue.replace(/[^\d]/g, '').split('').length;
-        const number = data.text.replace(/[^0-9]/g, '').substring((callingCode === null || callingCode === void 0 ? void 0 : callingCode.length) || 0);
-        return Object.assign(Object.assign({}, data), { countryCode,
+        // The mask engine is shared with <MaskedField>, only the template is phone-specific
+        const normalized = (0, exports.dropExtraPluses)({ text: inputValue, caret });
+        const { countryCode, callingCode, CountryFlag, template, placeholder } = getTemplateInfo(normalized.text);
+        const formatted = masked.formatParsedInput(normalized.text, (0, exports.templateToMask)(template), normalized.caret);
+        const number = formatted.text.replace(/[^0-9]/g, '').substring((callingCode === null || callingCode === void 0 ? void 0 : callingCode.length) || 0);
+        return Object.assign(Object.assign({}, data), { text: formatted.text, caret: formatted.caret, countryCode,
             callingCode,
             CountryFlag,
             template,
             placeholder,
-            number, isValid: validateParsedInput(data.text, template) });
-    }, [getTemplateInfo, templatesList, validateParsedInput]);
+            number, isValid: validateParsedInput(formatted.text, template) });
+    }, [getTemplateInfo, templatesList, validateParsedInput, masked]);
     /**
      * Parse phone string
      */

package/Popper/Popper.d.ts

@@ -16,9 +16,9 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly isOpen: boolean;
     /**
      * The HTML element to which the popper will be attached and positioned relative to.
-     * If `null` or undefined, the popper will not be positioned.
+     * While it is `null`, the popper stays hidden even if `isOpen` is `true`.
      *
-     * @default undefined
+     * @required
      * @example
      * ```tsx
      * const [anchor, setAnchor] = useState<HTMLButtonElement | null>(null);
@@ -38,13 +38,33 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
      * ```
      */
     readonly anchorPos?: AnchorPos;
+    /**
+     * Placements to try right after `anchorPos` when `autoFlip` is enabled.
+     * For `auto` placements this is the full list of placements to try.
+     * For the other placements `auto` and `*-fill` values of this list are ignored.
+     *
+     * @default undefined
+     * @example
+     * ```tsx
+     * <Popper anchorPos="bottom-fill" autoFlip alternativePlacements={['top-fill']}>...</Popper>
+     * ```
+     */
     readonly alternativePlacements?: readonly AnchorPos[];
+    /**
+     * Called when the actual placement changes, e.g. after a flip caused by `autoFlip`
+     *
+     * @default undefined
+     * @example
+     * ```tsx
+     * <Popper autoFlip onAnchorPosChanged={placement => setArrowSide(placement)}>...</Popper>
+     * ```
+     */
     readonly onAnchorPosChanged?: (anchorPos: AnchorPos) => void;
     /**
      * The z-index value for the popper container.
      * Used to control the stacking order of the popper relative to other elements.
      *
-     * @default theme.zIndex.modal
+     * @default theme.zIndex.modal for the `fixed` strategy, not set for `absolute`
      * @example
      * ```tsx
      * <Popper zIndex={9999}>...</Popper>
@@ -78,8 +98,9 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly offset?: number;
     /**
      * The positioning strategy to use.
-     * - `'fixed'`: Positions relative to the viewport. Works reliably in all cases.
-     * - `'absolute'`: Positions relative to the nearest positioned ancestor.
+     * - `'fixed'`: Renders into a portal and positions relative to the viewport.
+     *              The popper is kept inside the viewport and is not clipped by `overflow: hidden` parents.
+     * - `'absolute'`: Renders in place and positions relative to the nearest positioned ancestor.
      *                 When using 'absolute', make sure a parent element has `position: relative`.
      *
      * @default 'fixed'
@@ -92,13 +113,12 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly positionStrategy?: PositionStrategy;
     /**
      * Minimum distance (in pixels) that the popper must maintain from the viewport edges.
-     * Used to prevent the popper from being positioned too close to the screen boundaries.
-     * The popper will try to flip to another placement if it cannot maintain this margin.
+     * With `autoFlip` a placement that breaks this margin is skipped.
+     * With the `fixed` strategy the popper is also shifted to keep this margin.
      *
      * @default 30
      * @example
      * ```tsx
-     * // Larger margin for better visibility
      * <Popper viewportMargin={16}>...</Popper>
      *
      * // No margin (allow touching edges)

package/Popper/Popper.js

@@ -33,10 +33,11 @@ const react_1 = __importDefault(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const PopperContainer_1 = __importDefault(require("./PopperContainer"));
 const usePopper_1 = require("./usePopper");
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 __exportStar(require("./usePopper"), exports);
 exports.PORTAL_ID = 'ui-kit-portal';
 const Popper = (props, ref) => {
-    const { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
+    const _a = (0, useThemeProps_1.default)('Popper', props), { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = _a, nativeProps = __rest(_a, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
     const [domLoaded, setDomLoaded] = react_1.default.useState(false);
     const { actualPlacement, style, popperRef, isVisible } = (0, usePopper_1.usePopper)({
         anchorElement,

package/Popper/usePopper.d.ts

@@ -2,9 +2,8 @@ import React from 'react';
 import { PositionStrategy } from './PopperContainer';
 /**
  * Base directions for popper positioning.
- * These are the primary axes around which the popper can be placed.
+ * The popper is centered along the chosen side of the anchor.
  *
- * @default 'bottom' (when used as anchorPos)
  * @example
  * ```tsx
  * type Direction = 'top' | 'bottom' | 'left' | 'right';
@@ -12,38 +11,31 @@ import { PositionStrategy } from './PopperContainer';
  */
 export type Direction = 'top' | 'left' | 'right' | 'bottom';
 /**
- * Auto placement modifiers that enable intelligent positioning.
- * The popper will automatically choose the best placement that fits in the viewport.
- * - `auto`: Dynamically selects the optimal direction
- * - `auto-top`, `auto-bottom`, `auto-left`, `auto-right`: Auto placement with priority given to the specified direction
+ * Auto placements. With `autoFlip` the popper picks the first placement that fits in the viewport.
+ * - `auto`: Tries all placements starting with the bottom ones
+ * - `auto-top`, `auto-bottom`, `auto-left`, `auto-right`: Tries all placements starting with the specified side
+ *
+ * Without `autoFlip` `auto` works as `bottom`, `auto-top` as `top` and so on.
  *
  * @example
  * ```tsx
  * // Will try to place on top first, but will flip if needed
- * <Popper anchorPos="auto-top">...</Popper>
- *
- * // Will try all directions equally
- * <Popper anchorPos="auto">...</Popper>
+ * <Popper anchorPos="auto-top" autoFlip>...</Popper>
  * ```
  */
 export type AutoModifier = 'auto' | 'auto-top' | 'auto-bottom' | 'auto-left' | 'auto-right';
 /**
- * Precise placement modifiers for fine-tuned positioning.
- * These combine a base direction with specific alignment options:
- * - `start`/`end`: Aligns to the beginning or end of the anchor (useful for RTL layouts)
- * - `left`/`right`: Horizontal alignment for vertical placements
- * - `top`/`bottom`: Vertical alignment for horizontal placements
+ * Placements that combine a side with an alignment along it:
+ * - `start`/`end`: Aligns to the left/right edge of the anchor (text direction is not taken into account)
+ * - `left`/`right`: Same as `start`/`end`
+ * - `top`/`bottom`: Vertical alignment for the left and right sides
+ * - `fill`: Stretches the popper to the anchor width
  *
  * @example
  * ```tsx
- * // Corner placements
- * <Popper anchorPos="top-left">Aligns to top-left corner</Popper>
- *
- * // Logical placements (RTL-friendly)
- * <Popper anchorPos="bottom-start">Aligns to bottom edge, start side</Popper>
- *
- * // Side alignments
- * <Popper anchorPos="left-top">Aligns to left side, top edge</Popper>
+ * <Popper anchorPos="bottom-start">Below the anchor, aligned to its left edge</Popper>
+ * <Popper anchorPos="left-top">Left of the anchor, aligned to its top edge</Popper>
+ * <Popper anchorPos="bottom-fill">Below the anchor, as wide as the anchor</Popper>
  * ```
  */
 export type Modifier = 'top-start' | 'top-end' | 'top-left' | 'top-right' | 'bottom-end' | 'bottom-start' | 'bottom-right' | 'bottom-left' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'bottom-fill' | 'top-fill';
@@ -54,12 +46,13 @@ export type Modifier = 'top-start' | 'top-end' | 'top-left' | 'top-right' | 'bot
  *
  * Categories:
  * - **Basic directions**: `top`, `bottom`, `left`, `right` - Centered placement
- * - **Corner placements**: `top-left`, `top-right`, `bottom-left`, `bottom-right` - Aligned to corners
- * - **Logical placements**: `top-start`, `top-end`, `bottom-start`, `bottom-end` - RTL-aware alignment
+ * - **Edge placements**: `top-start`, `top-end`, `bottom-start`, `bottom-end`
+ *   and their aliases `top-left`, `top-right`, `bottom-left`, `bottom-right`
  * - **Side alignments**: `left-top`, `left-bottom`, `right-top`, `right-bottom` - Edge-aligned
- * - **Auto placements**: `auto`, `auto-top`, `auto-bottom`, `auto-left`, `auto-right` - Intelligent positioning
+ * - **Fill placements**: `top-fill`, `bottom-fill` - As wide as the anchor
+ * - **Auto placements**: `auto`, `auto-top`, `auto-bottom`, `auto-left`, `auto-right` - Picked by `autoFlip`
  *
- * @default 'bottom'
+ * @default 'auto'
  * @example
  * ```tsx
  * // Basic centered placement
@@ -69,10 +62,7 @@ export type Modifier = 'top-start' | 'top-end' | 'top-left' | 'top-right' | 'bot
  * <Popper anchorPos="top-right">Attached to top-right corner</Popper>
  *
  * // Auto placement with priority
- * <Popper anchorPos="auto-left">Try left first, then find best fit</Popper>
- *
- * // RTL-aware placement
- * <Popper anchorPos="top-start">Respects text direction</Popper>
+ * <Popper anchorPos="auto-left" autoFlip>Try left first, then find best fit</Popper>
  * ```
  */
 export type AnchorPos = Direction | Modifier | AutoModifier;

package/README.md

@@ -1,17 +1,34 @@
-## Установка.
+# @via-profit/ui-kit
 
-Для работы требуются следующие модули:
-
-- react
-- react-dom
-- @emotion/styled - CSS In JS
-- @emotion/react - CSS In JS React
-- react-popper - Выпадающие меню
+Набор React-компонентов для интерфейсов: поля ввода, кнопки, календарь, меню, модальные окна и другие. Компоненты оформлены по теме, которую вы задаёте один раз для всего приложения.
 
+## Установка
 
 ```bash
-$ npm install @emotion/react @emotion/styled react react-dom react-popper
+npm install @via-profit/ui-kit @emotion/react @emotion/styled react react-dom
+```
+
+Пакету нужны `react` и `react-dom` версии 18.2 и новее, `@emotion/react` и `@emotion/styled` версии 11.10.6 и новее.
+
+## Быстрый старт
 
+```tsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import ThemeProvider, { createTheme } from '@via-profit/ui-kit/ThemeProvider';
+import Button from '@via-profit/ui-kit/Button';
+
+const theme = createTheme();
+
+createRoot(document.getElementById('app')!).render(
+  <ThemeProvider theme={theme}>
+    <Button color="primary">Привет</Button>
+  </ThemeProvider>,
+);
 ```
 
-## Документация [здесь](./docs/README.md)
+## Документация
+
+[Документация](https://github.com/via-profit/ui-kit/blob/master/packages/ui-kit/docs/README.md) — установка, тема оформления, общие принципы и описание всех компонентов.
+
+[Список изменений](./CHANGELOG.md)

package/Radio/RadioBox.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type RadioBoxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    /**
+     * Paints the border with the error color
+     */
+    readonly error?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    /**
+     * Paints the border with the error color
+     */
+    readonly error?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/Radio/RadioBox.js

@@ -0,0 +1,102 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const useRadioColor_1 = __importDefault(require("./useRadioColor"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const Root = styled_1.default.span `
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1.15em;
+  height: 1.15em;
+`;
+/**
+ * The checked look comes from the `:checked` state of the input, not from the props:
+ * the browser unchecks the other radio buttons of the same `name` itself
+ * (data attributes, not class names: emotion labels are absent in the published package)
+ */
+const StyledInput = styled_1.default.input `
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: inherit;
+  z-index: 1;
+
+  &:checked + [data-radio-circle] {
+    border-color: ${({ theme, $color, $error }) => $error ? theme.color.error.toString() : $color.toString()};
+  }
+
+  &:checked + [data-radio-circle] [data-radio-dot] {
+    transform: scale(1);
+  }
+
+  &:focus-visible + [data-radio-circle] {
+    outline: 0.14em solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 0.14em;
+  }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme, '&:focus-visible + [data-radio-circle]')}
+`;
+const Circle = styled_1.default.span `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border-width: 0.1em;
+  border-style: solid;
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  transition: border-color 150ms ease-out;
+  border-color: ${({ theme, $error }) => $error ? theme.color.error.toString() : theme.color.textPrimary.alpha(0.4).toString()};
+
+  ${({ $disabled, $error, $color }) => !$disabled &&
+    !$error &&
+    (0, react_2.css) `
+      label:hover & {
+        border-color: ${$color.toString()};
+      }
+    `}
+`;
+const Dot = styled_1.default.span `
+  width: 50%;
+  height: 50%;
+  border-radius: 50%;
+  background-color: ${({ $color }) => $color.toString()};
+  transform: scale(0);
+  transition: transform 150ms ease-out;
+`;
+/**
+ * The circle with the native input over it.
+ * The ref and the input attributes go to the input: it is the element that holds the value and the focus.
+ * `className` and `style` go to the root element, so `styled(RadioBox)` styles the circle
+ */
+const RadioBox = (props, ref) => {
+    const { error, color, disabled, className, style } = props, nativeProps = __rest(props, ["error", "color", "disabled", "className", "style"]);
+    const $color = (0, useRadioColor_1.default)(color);
+    return (react_1.default.createElement(Root, { className: className, style: style },
+        react_1.default.createElement(StyledInput, Object.assign({}, nativeProps, { type: "radio", disabled: disabled, "$color": $color, "$error": Boolean(error), ref: ref })),
+        react_1.default.createElement(Circle, { "data-radio-circle": "", "$color": $color, "$error": Boolean(error), "$disabled": Boolean(disabled) },
+            react_1.default.createElement(Dot, { "data-radio-dot": "", "$color": $color }))));
+};
+exports.default = react_1.default.forwardRef(RadioBox);

package/Radio/RadioContainer.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export type RadioLabelPosition = 'start' | 'end' | 'top' | 'bottom';
+export type RadioContainerProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /**
+     * Position of the label relative to the radio button
+     * Default: `end`
+     */
+    readonly labelPosition?: RadioLabelPosition;
+    /**
+     * If `true` the radio button state can not be changed
+     * Default: false;
+     */
+    readonly disabled?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /**
+     * Position of the label relative to the radio button
+     * Default: `end`
+     */
+    readonly labelPosition?: RadioLabelPosition | undefined;
+    /**
+     * If `true` the radio button state can not be changed
+     * Default: false;
+     */
+    readonly disabled?: boolean | undefined;
+} & React.RefAttributes<HTMLLabelElement>>;
+export default _default;

package/Radio/RadioContainer.js

@@ -0,0 +1,38 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const directions = {
+    start: 'row-reverse',
+    end: 'row',
+    top: 'column-reverse',
+    bottom: 'column',
+};
+const StyledContainer = styled_1.default.label `
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+  font-size: 1em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
+  flex-direction: ${({ $labelPosition }) => directions[$labelPosition || 'end']};
+`;
+const RadioContainer = (props, ref) => {
+    const { children, labelPosition, disabled } = props, nativeProps = __rest(props, ["children", "labelPosition", "disabled"]);
+    return (react_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { "$labelPosition": labelPosition, "$disabled": disabled, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(RadioContainer);

package/Radio/RadioTextWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type RadioTextWrapperProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<RadioTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Radio/RadioTextWrapper.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextWrapper = styled_1.default.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+const RadioTextWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(RadioTextWrapper);

package/Radio/index.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { RadioContainerProps, RadioLabelPosition } from './RadioContainer';
+import { RadioBoxProps } from './RadioBox';
+import { RadioTextWrapperProps } from './RadioTextWrapper';
+export type { RadioLabelPosition };
+export type RadioProps = Omit<RadioBoxProps, 'color' | 'error'> & {
+    /**
+     * The value of the radio button. Inside `<RadioGroup>` it is required:
+     * the group compares it with its own value
+     */
+    readonly value?: string;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value\
+     * **Default:** `default`, inside `<RadioGroup>` — the color of the group
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * Position of the label relative to the radio button\
+     * **Default:** `end`
+     */
+    readonly labelPosition?: RadioLabelPosition;
+    /**
+     * Paints the circle with the error color. Inside `<RadioGroup>` it comes from the group
+     */
+    readonly error?: boolean;
+    readonly overrides?: RadioOverrides;
+};
+export interface RadioOverrides {
+    /**
+     * The label element with the radio button and the text
+     */
+    readonly Container?: React.ComponentType<RadioContainerProps & React.RefAttributes<HTMLLabelElement>>;
+    /**
+     * The circle with the native input
+     */
+    readonly Box?: React.ComponentType<RadioBoxProps & React.RefAttributes<HTMLInputElement>>;
+    /**
+     * The text wrapper
+     */
+    readonly TextWrapper?: React.ComponentType<RadioTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<RadioBoxProps, "color" | "error"> & {
+    /**
+     * The value of the radio button. Inside `<RadioGroup>` it is required:
+     * the group compares it with its own value
+     */
+    readonly value?: string | undefined;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value\
+     * **Default:** `default`, inside `<RadioGroup>` — the color of the group
+     */
+    readonly color?: string | undefined;
+    /**
+     * Position of the label relative to the radio button\
+     * **Default:** `end`
+     */
+    readonly labelPosition?: RadioLabelPosition | undefined;
+    /**
+     * Paints the circle with the error color. Inside `<RadioGroup>` it comes from the group
+     */
+    readonly error?: boolean | undefined;
+    readonly overrides?: RadioOverrides | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;