@semcore/radio 6.44.0-prerelease.0 → 6.44.0-prerelease.1

package/lib/esm/style/radio.shadow.css

@@ -17,6 +17,16 @@ SRadio[disabled] {
   pointer-events: none;
 }
 
+SText[size='m'] {
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+}
+
+SText[size='l'] {
+  font-size: var(--intergalactic-fs-300, 16px);
+  line-height: var(--intergalactic-lh-300, 150%);
+}
+
 SValue {
   position: relative;
   flex-shrink: 0;
@@ -94,6 +104,11 @@ SControl {
   clip: rect(1px, 1px, 1px, 1px);
 }
 
+SControl:checked~SValue::before {
+  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+  background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+}
+
 SControl:checked~SValue[size='m']::after {
   width: 6px;
   height: 6px;
@@ -104,21 +119,13 @@ SControl:checked~SValue[size='l']::after {
   height: 8px;
 }
 
-SControl:focus-visible+SValue[state='normal']::before {
+SValue[state='normal'][keyboardFocused]::before {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
   border-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
-  @mixin focus-outline-mixin;
-}
-
-SControl:checked~SValue::before,
-SControl:checked:focus-visible~SValue::before {
-  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
-  background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
 }
 
-SControl:focus-visible+SValue[state='invalid']::before {
-  border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
-  @mixin focus-outline-mixin;
-  outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652));
+SValue[state='invalid'][keyboardFocused]::before {
+  box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px oklch(0.628 0.257 28.9 / 0.652));
 }
 
 SControl:checked~SValue[theme]::before {

package/lib/types/index.d.ts

@@ -1,2 +1,149 @@
-export { default, wrapRadioGroup, RadioGroup } from './Radio';
-export * from './Radio.type';
+import React from 'react';
+import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
+import { Box, BoxProps, Flex } from '@semcore/flex-box';
+import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { Text } from '@semcore/typography';
+
+export type RadioSize = 'm' | 'l';
+export type RadioState = 'normal' | 'invalid';
+export type RadioValue = string | number | boolean;
+
+/** @deprecated */
+export interface IRadioProps extends RadioProps, UnknownProperties {}
+export type RadioProps = BoxProps & {
+  /** Radio item value **/
+  value?: RadioValue;
+
+  /** Radio item checked flag **/
+  checked?: boolean;
+
+  /**
+   * The value displaying the state of the component
+   * @default normal
+   */
+  state?: RadioState;
+  /**
+   * Radio button size
+   * @default m
+   **/
+  size?: RadioSize;
+  /** The theme of the radio button that you can send your color to */
+  theme?: string;
+  /** Radio item text **/
+  label?: string;
+  /** Blocks access and changes to the radio item **/
+  disabled?: boolean;
+};
+
+/** @deprecated */
+export interface IRadioGroupProps extends RadioGroupProps, UnknownProperties {
+  /**
+   *  HTML tag name for the displayed item
+   */
+  tag?: React.ElementType | string;
+}
+export type RadioGroupProps<T extends RadioValue = RadioValue> = {
+  /** Radio group name */
+  name?: string;
+  /** Active default value */
+  defaultValue?: T;
+  /** Active value */
+  value?: T;
+  /** Called when the selected element is changed */
+  onChange?:
+    | ((value: T, e?: React.SyntheticEvent<HTMLInputElement>) => void)
+    | React.Dispatch<React.SetStateAction<T>>;
+  /** Radio button size */
+  size?: RadioSize;
+  /** The theme of the radio button that you can send your color to */
+  theme?: string;
+  /** Blocks access and changes to the form field */
+  disabled?: boolean;
+};
+
+/** @deprecated */
+export interface IRadioValueProps extends RadioValueProps, UnknownProperties {}
+export type RadioValueProps = BoxProps &
+  KeyboardFocusProps & {
+    /** List of elements that can be put on a hidden input */
+    includeInputProps?: string[];
+    /**
+     * @deprecated set `state` on root Radio instead
+     * The value displaying the state of the component
+     * @default normal
+     */
+    state?: RadioState;
+    /**
+     * @deprecated
+     * The theme of the radio button that you can send your color to
+     */
+    theme?: string;
+    /**
+     * @deprecated set `size` on root RadioGroup instead
+     * Radio button size
+     */
+    size?: RadioSize;
+    /**
+     * @deprecated set `value` on root Radio instead
+     * The element value is required for RadioGroup
+     */
+    value?: RadioValue;
+    /**
+     * @deprecated set `defaultValue` on root RadioGroup instead
+     * Default value if `value` property is not provided
+     */
+    defaultValue?: RadioValue;
+    /**
+     * @deprecated set `onChange` on root RadioGroup instead
+     * Called when the value changes
+     */
+    onChange?: (value: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;
+    /**
+     * @deprecated set `disabled` on root Radio instead
+     * Blocks access and changes to the form field
+     */
+    disabled?: boolean;
+  };
+
+/** @deprecated */
+export interface IRadioCtx extends RadioCtx, UnknownProperties {}
+export type RadioCtx = {
+  getValueProps: PropGetterFn;
+  getTextProps: PropGetterFn;
+};
+
+type IntergalacticRadioGroupComponent<PropsExtending = {}> = (<
+  Value extends RadioValue,
+  Tag extends Intergalactic.Tag = typeof Flex,
+>(
+  props: Intergalactic.InternalTypings.ComponentProps<Tag, typeof Flex, RadioGroupProps<Value>> &
+    PropsExtending,
+) => Intergalactic.InternalTypings.ComponentRenderingResults) &
+  Intergalactic.InternalTypings.ComponentAdditive<'div', typeof Flex, RadioGroupProps>;
+
+export type RadioValueControlProps = {};
+export type RadioValueMarkProps = {};
+
+declare const RadioGroup: IntergalacticRadioGroupComponent;
+
+export { RadioGroup };
+
+declare const Radio: Intergalactic.Component<'label', RadioProps, RadioCtx> & {
+  Value: Intergalactic.Component<'input', RadioValueProps> & {
+    Control: Intergalactic.Component<'input', RadioValueControlProps>;
+    RadioMark: Intergalactic.Component<typeof Box, RadioValueMarkProps>;
+  };
+  Text: typeof Text;
+};
+
+declare const wrapRadioGroup: <PropsExtending extends {}>(
+  wrapper: (
+    props: Intergalactic.InternalTypings.UntypeRefAndTag<
+      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticRadioGroupComponent>
+    > &
+      PropsExtending,
+  ) => React.ReactNode,
+) => IntergalacticRadioGroupComponent<PropsExtending>;
+export { wrapRadioGroup };
+
+export default Radio;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/radio",
   "description": "Semrush Radio Component",
-  "version": "6.44.0-prerelease.0",
+  "version": "6.44.0-prerelease.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,12 +14,12 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/utils": "4.49.0-prerelease.0",
-    "@semcore/flex-box": "5.42.0-prerelease.0",
-    "@semcore/typography": "5.54.0-prerelease.0"
+    "@semcore/utils": "4.49.0-prerelease.1",
+    "@semcore/flex-box": "5.42.0-prerelease.1",
+    "@semcore/typography": "5.54.0-prerelease.1"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.0",
+    "@semcore/core": "^2.40.0-prerelease.1",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },

package/lib/cjs/Radio.type.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=Radio.type.js.map

package/lib/cjs/Radio.type.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Radio.type.js","names":[],"sources":["../../src/Radio.type.ts"],"sourcesContent":["import type { Flex, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic, PropGetterFn } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\ndeclare namespace NSRadio {\n  type Size = 'm' | 'l';\n  type State = 'normal' | 'invalid';\n  type Value = string | number | boolean;\n  type Props = BoxProps & {\n    /** Radio item value **/\n    value?: NSRadio.Value;\n    /** Radio item checked flag **/\n    checked?: boolean;\n    /**\n     * The value displaying the state of the component\n     * @default normal\n     */\n    state?: NSRadio.State;\n    /**\n     * Radio button size\n     * @default m\n     **/\n    size?: NSRadio.Size;\n    /** The theme of the radio button that you can send your color to */\n    theme?: string;\n    /** Radio item text **/\n    label?: string;\n    /** Blocks access and changes to the radio item **/\n    disabled?: boolean;\n  };\n  type Ctx = {\n    getValueProps: PropGetterFn;\n    getTextProps: PropGetterFn;\n  };\n  namespace Value {\n    type Props = BoxProps & {\n      /** List of elements that can be put on a hidden input */\n      includeInputProps?: string[];\n    };\n    namespace Control {\n      type Props = {};\n      type Component = Intergalactic.Component<'input', Props>;\n    }\n\n    namespace Mark {\n      type Props = {};\n      type Component = Intergalactic.Component<'input', Props>;\n    }\n\n    type Component = Intergalactic.Component<'input', Props> & {\n      Control: Control.Component;\n      RadioMark: Mark.Component;\n    };\n  }\n\n  namespace Text {\n    type Props = NSText.Props;\n    type Component = Intergalactic.Component<'span', Props>;\n  }\n\n  namespace Group {\n    type Props<T extends NSRadio.Value = NSRadio.Value> = {\n      /** Radio group name */\n      name?: string;\n      /** Active default value */\n      defaultValue?: T;\n      /** Active value */\n      value?: T;\n      /** Called when the selected element is changed */\n      onChange?:\n        | ((value: T, e?: React.SyntheticEvent<HTMLInputElement>) => void)\n        | React.Dispatch<React.SetStateAction<T>>;\n      /** Radio button size */\n      size?: NSRadio.Size;\n      /** The theme of the radio button that you can send your color to */\n      theme?: string;\n      /** Blocks access and changes to the form field */\n      disabled?: boolean;\n    };\n    type Component<PropsExtending = {}> = (<V extends Value, Tag extends Intergalactic.Tag = 'div'>(\n      props: Intergalactic.InternalTypings.ComponentProps<Tag, typeof Flex, Props<V>> & PropsExtending,\n    ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n    Intergalactic.InternalTypings.ComponentAdditive<'div', typeof Flex, Props>;\n  }\n  type Component = Intergalactic.Component<'label', Props, Ctx> & {\n    Value: Value.Component;\n    Text: Text.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type RadioSize = NSRadio.Size;\n/** @deprecated It will be removed in v18. */\nexport type RadioState = NSRadio.State;\n/** @deprecated It will be removed in v18. */\nexport type RadioValue = NSRadio.Value;\n/** @deprecated It will be removed in v18. */\nexport type RadioProps = NSRadio.Props;\n/** @deprecated It will be removed in v18. */\nexport type RadioGroupProps<T extends RadioValue = RadioValue> = NSRadio.Group.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type RadioValueProps = NSRadio.Value.Props;\n/** @deprecated It will be removed in v18. */\nexport type RadioCtx = NSRadio.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type RadioValueControlProps = NSRadio.Value.Control.Props;\n/** @deprecated It will be removed in v18. */\nexport type RadioValueMarkProps = NSRadio.Value.Mark.Props;\n\nexport type { NSRadio };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/Radio.type.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=Radio.type.js.map

package/lib/es6/Radio.type.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Radio.type.js","names":[],"sources":["../../src/Radio.type.ts"],"sourcesContent":["import type { Flex, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic, PropGetterFn } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\ndeclare namespace NSRadio {\n  type Size = 'm' | 'l';\n  type State = 'normal' | 'invalid';\n  type Value = string | number | boolean;\n  type Props = BoxProps & {\n    /** Radio item value **/\n    value?: NSRadio.Value;\n    /** Radio item checked flag **/\n    checked?: boolean;\n    /**\n     * The value displaying the state of the component\n     * @default normal\n     */\n    state?: NSRadio.State;\n    /**\n     * Radio button size\n     * @default m\n     **/\n    size?: NSRadio.Size;\n    /** The theme of the radio button that you can send your color to */\n    theme?: string;\n    /** Radio item text **/\n    label?: string;\n    /** Blocks access and changes to the radio item **/\n    disabled?: boolean;\n  };\n  type Ctx = {\n    getValueProps: PropGetterFn;\n    getTextProps: PropGetterFn;\n  };\n  namespace Value {\n    type Props = BoxProps & {\n      /** List of elements that can be put on a hidden input */\n      includeInputProps?: string[];\n    };\n    namespace Control {\n      type Props = {};\n      type Component = Intergalactic.Component<'input', Props>;\n    }\n\n    namespace Mark {\n      type Props = {};\n      type Component = Intergalactic.Component<'input', Props>;\n    }\n\n    type Component = Intergalactic.Component<'input', Props> & {\n      Control: Control.Component;\n      RadioMark: Mark.Component;\n    };\n  }\n\n  namespace Text {\n    type Props = NSText.Props;\n    type Component = Intergalactic.Component<'span', Props>;\n  }\n\n  namespace Group {\n    type Props<T extends NSRadio.Value = NSRadio.Value> = {\n      /** Radio group name */\n      name?: string;\n      /** Active default value */\n      defaultValue?: T;\n      /** Active value */\n      value?: T;\n      /** Called when the selected element is changed */\n      onChange?:\n        | ((value: T, e?: React.SyntheticEvent<HTMLInputElement>) => void)\n        | React.Dispatch<React.SetStateAction<T>>;\n      /** Radio button size */\n      size?: NSRadio.Size;\n      /** The theme of the radio button that you can send your color to */\n      theme?: string;\n      /** Blocks access and changes to the form field */\n      disabled?: boolean;\n    };\n    type Component<PropsExtending = {}> = (<V extends Value, Tag extends Intergalactic.Tag = 'div'>(\n      props: Intergalactic.InternalTypings.ComponentProps<Tag, typeof Flex, Props<V>> & PropsExtending,\n    ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n    Intergalactic.InternalTypings.ComponentAdditive<'div', typeof Flex, Props>;\n  }\n  type Component = Intergalactic.Component<'label', Props, Ctx> & {\n    Value: Value.Component;\n    Text: Text.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type RadioSize = NSRadio.Size;\n/** @deprecated It will be removed in v18. */\nexport type RadioState = NSRadio.State;\n/** @deprecated It will be removed in v18. */\nexport type RadioValue = NSRadio.Value;\n/** @deprecated It will be removed in v18. */\nexport type RadioProps = NSRadio.Props;\n/** @deprecated It will be removed in v18. */\nexport type RadioGroupProps<T extends RadioValue = RadioValue> = NSRadio.Group.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type RadioValueProps = NSRadio.Value.Props;\n/** @deprecated It will be removed in v18. */\nexport type RadioCtx = NSRadio.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type RadioValueControlProps = NSRadio.Value.Control.Props;\n/** @deprecated It will be removed in v18. */\nexport type RadioValueMarkProps = NSRadio.Value.Mark.Props;\n\nexport type { NSRadio };\n"],"mappings":"","ignoreList":[]}

package/lib/esm/Radio.type.mjs

@@ -1 +0,0 @@
-

package/lib/types/Radio.d.ts

@@ -1,9 +0,0 @@
-import type { Intergalactic } from '@semcore/core';
-import { inputProps } from '@semcore/core/lib/utils/inputProps';
-import React from 'react';
-import type { NSRadio } from './Radio.type';
-declare const RadioGroup: NSRadio.Group.Component;
-declare const Radio: NSRadio.Component;
-export declare const wrapRadioGroup: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSRadio.Group.Component>> & PropsExtending) => React.ReactNode) => NSRadio.Group.Component<PropsExtending>;
-export { inputProps, RadioGroup };
-export default Radio;

package/lib/types/Radio.type.d.ts

@@ -1,98 +0,0 @@
-import type { Flex, BoxProps } from '@semcore/base-components';
-import type { Intergalactic, PropGetterFn } from '@semcore/core';
-import type { NSText } from '@semcore/typography';
-declare namespace NSRadio {
-    type Size = 'm' | 'l';
-    type State = 'normal' | 'invalid';
-    type Value = string | number | boolean;
-    type Props = BoxProps & {
-        /** Radio item value **/
-        value?: NSRadio.Value;
-        /** Radio item checked flag **/
-        checked?: boolean;
-        /**
-         * The value displaying the state of the component
-         * @default normal
-         */
-        state?: NSRadio.State;
-        /**
-         * Radio button size
-         * @default m
-         **/
-        size?: NSRadio.Size;
-        /** The theme of the radio button that you can send your color to */
-        theme?: string;
-        /** Radio item text **/
-        label?: string;
-        /** Blocks access and changes to the radio item **/
-        disabled?: boolean;
-    };
-    type Ctx = {
-        getValueProps: PropGetterFn;
-        getTextProps: PropGetterFn;
-    };
-    namespace Value {
-        type Props = BoxProps & {
-            /** List of elements that can be put on a hidden input */
-            includeInputProps?: string[];
-        };
-        namespace Control {
-            type Props = {};
-            type Component = Intergalactic.Component<'input', Props>;
-        }
-        namespace Mark {
-            type Props = {};
-            type Component = Intergalactic.Component<'input', Props>;
-        }
-        type Component = Intergalactic.Component<'input', Props> & {
-            Control: Control.Component;
-            RadioMark: Mark.Component;
-        };
-    }
-    namespace Text {
-        type Props = NSText.Props;
-        type Component = Intergalactic.Component<'span', Props>;
-    }
-    namespace Group {
-        type Props<T extends NSRadio.Value = NSRadio.Value> = {
-            /** Radio group name */
-            name?: string;
-            /** Active default value */
-            defaultValue?: T;
-            /** Active value */
-            value?: T;
-            /** Called when the selected element is changed */
-            onChange?: ((value: T, e?: React.SyntheticEvent<HTMLInputElement>) => void) | React.Dispatch<React.SetStateAction<T>>;
-            /** Radio button size */
-            size?: NSRadio.Size;
-            /** The theme of the radio button that you can send your color to */
-            theme?: string;
-            /** Blocks access and changes to the form field */
-            disabled?: boolean;
-        };
-        type Component<PropsExtending = {}> = (<V extends Value, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, typeof Flex, Props<V>> & PropsExtending) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', typeof Flex, Props>;
-    }
-    type Component = Intergalactic.Component<'label', Props, Ctx> & {
-        Value: Value.Component;
-        Text: Text.Component;
-    };
-}
-/** @deprecated It will be removed in v18. */
-export type RadioSize = NSRadio.Size;
-/** @deprecated It will be removed in v18. */
-export type RadioState = NSRadio.State;
-/** @deprecated It will be removed in v18. */
-export type RadioValue = NSRadio.Value;
-/** @deprecated It will be removed in v18. */
-export type RadioProps = NSRadio.Props;
-/** @deprecated It will be removed in v18. */
-export type RadioGroupProps<T extends RadioValue = RadioValue> = NSRadio.Group.Props<T>;
-/** @deprecated It will be removed in v18. */
-export type RadioValueProps = NSRadio.Value.Props;
-/** @deprecated It will be removed in v18. */
-export type RadioCtx = NSRadio.Ctx;
-/** @deprecated It will be removed in v18. */
-export type RadioValueControlProps = NSRadio.Value.Control.Props;
-/** @deprecated It will be removed in v18. */
-export type RadioValueMarkProps = NSRadio.Value.Mark.Props;
-export type { NSRadio };