@dt-dds/react-radio 1.0.0-beta.100

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Daimler Truck AG.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# Radio Package
+
+The Radio package allows to select one option from a set.
+
+## Usage
+
+```jsx
+import { Radio, RadioGroup } from '@dt-dds/react';
+
+export const App = () => {
+  return (
+    <RadioGroup onChange={onChange} name='group-name'>
+      <Radio value='1' label='Label 1' isDefaultChecked={true} />
+      <Radio value='2' label='Label 2' isDisabled={true} />
+    </RadioGroup>
+  );
+};
+```
+
+## Properties
+
+### Radio
+
+| Property           | Type                                           | Default            | Description                                                                                                         |
+| ------------------ | ---------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `label`            | `string`                                       | -                  | A label to help users understand the scope of the radio.                                                            |
+| `onChange`         | `(evt: ChangeEvent<HTMLInputElement>) => void` | -                  | The triggered function when the input change.                                                                       |
+| `isDisabled`       | `boolean`                                      | `false`            | Specifies if the element should be disabled.                                                                        |
+| `isDefaultChecked` | `boolean`                                      | `false`            | Indicates that this default radio button is selected one in the group.                                              |
+| `isChecked`        | `boolean`                                      | `false`            | Indicates that this radio button is selected one in the group. Used when the radio is controlled by another element |
+| `name`             | `string`                                       | `radio-group-name` | Should represent the group name                                                                                     |
+| `value`            | `string`                                       | -                  | String containing the radio button's value                                                                          |
+| `hasError`         | `boolean`                                      | `false`            | Indicates that the radio button has an error                                                                        |
+
+### RadioGroup
+
+| Property     | Type                                           | Default | Description                                   |
+| ------------ | ---------------------------------------------- | ------- | --------------------------------------------- |
+| `children`   | `ReactNode`                                    | -       | Child components to be rendered               |
+| `dataTestId` | `string`                                       | -       | Customizable test identifier                  |
+| `direction`  | "row" \| "column"                              | row     | Sets the flex direction of the group          |
+| `name`       | `string`                                       | -       | Should represent the group name               |
+| `onChange`   | `(evt: ChangeEvent<HTMLInputElement>) => void` | -       | The triggered function when the input change. |
+| `size`       | `"small" \| "large"                            | `large` | Sets the dimensions of the radio buttons      |
+
+## Stack
+
+- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [React](https://reactjs.org/) — JavaScript library for user interfaces
+- [Emotion](https://emotion.sh/docs/introduction) — for writing css styles with JavaScript
+- [Storybook](https://storybook.js.org/) — UI component environment powered by Vite
+- [Jest](https://jestjs.io/) - JavaScript Testing Framework
+- [React Testing Library](https://testing-library.com/) - to test UI components in a user-centric way
+- [ESLint](https://eslint.org/) for code linting
+- [Prettier](https://prettier.io) for code formatting
+- [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild
+- [Yarn](https://yarnpkg.com/) from managing packages
+
+## Commands
+
+- `yarn build` - Build the package
+- `yarn dev` - Run the package locally
+- `yarn lint` - Lint all files within this package
+- `yarn test` - Run all unit tests
+- `yarn test:report` - Open the test coverage report
+- `yarn test:update:snapshot` - Run all unit tests and update the snapshot
+
+## Compilation
+
+Running `yarn build` from the root of the package will use [tsup](https://tsup.egoist.dev/) to compile the raw TypeScript and React code to plain JavaScript.
+
+The `/dist` folder contains the compiled output.
+
+```bash
+radio
+└── dist
+    ├── index.d.ts  <-- Types
+    ├── index.js    <-- CommonJS version
+    └── index.mjs   <-- ES Modules version
+    ...
+```
+
+## Versioning
+
+Follows [semantic versioning](https://semver.org/)
+
+## &copy; License
+
+Licensed under [MIT License](LICENSE)

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+import { CustomTheme } from '@dt-dds/themes';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BaseProps } from '@dt-dds/react-core';
+
+type RadioDirection = 'column' | 'row';
+type RadioSize = 'large' | 'small';
+interface RadioGroupProps extends BaseProps {
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    name: string;
+    direction?: RadioDirection;
+    size?: RadioSize;
+}
+interface RadioProps {
+    label?: string;
+    value: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    name?: string;
+    hasError?: boolean;
+    size?: RadioSize;
+    dataTestId?: string;
+    isDefaultChecked?: boolean;
+}
+
+declare const Radio: ({ onChange, label, isChecked, isDefaultChecked, isDisabled, name, value, hasError, size, dataTestId, }: RadioProps) => react_jsx_runtime.JSX.Element;
+
+declare const RadioGroup: ({ children, onChange, dataTestId, direction, size, name, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+
+declare module '@emotion/react' {
+    interface Theme extends CustomTheme {
+    }
+}
+
+export { Radio, RadioGroup };

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import { CustomTheme } from '@dt-dds/themes';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BaseProps } from '@dt-dds/react-core';
+
+type RadioDirection = 'column' | 'row';
+type RadioSize = 'large' | 'small';
+interface RadioGroupProps extends BaseProps {
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    name: string;
+    direction?: RadioDirection;
+    size?: RadioSize;
+}
+interface RadioProps {
+    label?: string;
+    value: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    name?: string;
+    hasError?: boolean;
+    size?: RadioSize;
+    dataTestId?: string;
+    isDefaultChecked?: boolean;
+}
+
+declare const Radio: ({ onChange, label, isChecked, isDefaultChecked, isDisabled, name, value, hasError, size, dataTestId, }: RadioProps) => react_jsx_runtime.JSX.Element;
+
+declare const RadioGroup: ({ children, onChange, dataTestId, direction, size, name, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+
+declare module '@emotion/react' {
+    interface Theme extends CustomTheme {
+    }
+}
+
+export { Radio, RadioGroup };

package/dist/index.js

@@ -0,0 +1,253 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Radio.tsx
+var import_react = require("@emotion/react");
+var import_react_box = require("@dt-dds/react-box");
+var import_react_typography = require("@dt-dds/react-typography");
+
+// src/Radio.styled.tsx
+var import_styled = __toESM(require("@emotion/styled"));
+var RADIO_SIZES = {
+  large: {
+    outerCircle: 24,
+    innerCircle: 10
+  },
+  small: {
+    outerCircle: 20,
+    innerCircle: 8
+  }
+};
+var RadioInputStyled = import_styled.default.input`
+  ${({ theme, radioSize }) => `
+    background: ${theme.palette.surface.contrast};
+    border: 1px solid ${theme.palette.informative.default};
+    border-radius: 50%;
+    width: ${RADIO_SIZES[radioSize].outerCircle}px;
+    height: ${RADIO_SIZES[radioSize].outerCircle}px;
+    appearance: none;
+    position: relative;
+    cursor: pointer;
+    flex-shrink: 0;
+
+    &:disabled + label {
+      color: ${theme.palette.content.light};
+    }
+
+    &:hover {
+      background: ${theme.palette.informative.light};
+    }
+
+    &:checked:not(:disabled):hover {
+      background: ${theme.palette.informative.dark};
+      border-color: ${theme.palette.informative.dark};
+    }
+
+    &:checked {
+      background: ${theme.palette.informative.default};
+    }
+
+    &:disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+      border-color: ${theme.palette.informative.light};
+      background-color: ${theme.palette.informative.light};
+    }
+
+    &:checked:before {
+      content: "";
+      width: ${RADIO_SIZES[radioSize].innerCircle}px;
+      height: ${RADIO_SIZES[radioSize].innerCircle}px;
+      background: ${theme.palette.surface.contrast};
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &[data-error="true"] {
+      border-color: ${theme.palette.error.default};
+    }
+
+    &[data-error="true"]:hover {
+      background-color: ${theme.palette.error.light};
+    }
+
+    &[data-error="true"]:disabled {
+      background-color: ${theme.palette.error.light};
+      border-color: ${theme.palette.error.light};
+    }
+
+    &[data-error="true"]:checked {
+      background-color: ${theme.palette.error.default};
+    }
+
+    &[data-error="true"]:checked:disabled {
+      background-color: ${theme.palette.error.light};
+      border-color: ${theme.palette.error.light};
+    }
+    
+    &[data-error="true"]:checked:not(:disabled):hover {
+      background-color: ${theme.palette.error.dark};
+      border-color: ${theme.palette.error.dark};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.primary.default};
+      outline-offset: 2px;
+    }
+  `}
+`;
+
+// src/Radio.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Radio = ({
+  onChange,
+  label,
+  isChecked,
+  isDefaultChecked,
+  isDisabled,
+  name = "radio-group-name",
+  value,
+  hasError,
+  size = "large",
+  dataTestId
+}) => {
+  const radioId = `${value}-id`;
+  const theme = (0, import_react.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_react_box.Box,
+    {
+      style: {
+        flexDirection: "row",
+        gap: theme.spacing.spacing_30,
+        cursor: isDisabled ? "not-allowed" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          RadioInputStyled,
+          {
+            checked: isChecked,
+            "data-error": hasError,
+            "data-testid": dataTestId,
+            defaultChecked: isDefaultChecked,
+            disabled: isDisabled,
+            id: radioId,
+            name,
+            onChange,
+            radioSize: size,
+            tabIndex: isDisabled ? -1 : 0,
+            type: "radio",
+            value
+          }
+        ),
+        label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_typography.Typography,
+          {
+            element: "label",
+            fontStyles: size === "large" ? "bodyLgRegular" : "bodyMdRegular",
+            htmlFor: radioId,
+            style: { cursor: isDisabled ? "not-allowed" : "pointer" },
+            children: label
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+// src/RadioGroup.tsx
+var import_react2 = require("react");
+var import_react3 = require("@emotion/react");
+var import_react_box2 = require("@dt-dds/react-box");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var RadioGroup = ({
+  children,
+  onChange,
+  dataTestId,
+  direction = "row",
+  size = "large",
+  name
+}) => {
+  const theme = (0, import_react3.useTheme)();
+  const clonedChildren = (0, import_react2.useMemo)(
+    () => import_react2.Children.map(children, (child) => {
+      return child && (0, import_react2.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
+        onChange,
+        name,
+        size
+      }));
+    }),
+    [children, onChange, name, size]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_box2.Box,
+    {
+      "data-testid": dataTestId != null ? dataTestId : "radio-group",
+      role: "radiogroup",
+      style: {
+        flexDirection: direction,
+        gap: theme.spacing.spacing_40,
+        alignItems: direction === "row" ? "center" : "flex-start"
+      },
+      children: clonedChildren
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Radio,
+  RadioGroup
+});

package/dist/index.mjs

@@ -0,0 +1,218 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Radio.tsx
+import { useTheme } from "@emotion/react";
+import { Box } from "@dt-dds/react-box";
+import { Typography } from "@dt-dds/react-typography";
+
+// src/Radio.styled.tsx
+import styled from "@emotion/styled";
+var RADIO_SIZES = {
+  large: {
+    outerCircle: 24,
+    innerCircle: 10
+  },
+  small: {
+    outerCircle: 20,
+    innerCircle: 8
+  }
+};
+var RadioInputStyled = styled.input`
+  ${({ theme, radioSize }) => `
+    background: ${theme.palette.surface.contrast};
+    border: 1px solid ${theme.palette.informative.default};
+    border-radius: 50%;
+    width: ${RADIO_SIZES[radioSize].outerCircle}px;
+    height: ${RADIO_SIZES[radioSize].outerCircle}px;
+    appearance: none;
+    position: relative;
+    cursor: pointer;
+    flex-shrink: 0;
+
+    &:disabled + label {
+      color: ${theme.palette.content.light};
+    }
+
+    &:hover {
+      background: ${theme.palette.informative.light};
+    }
+
+    &:checked:not(:disabled):hover {
+      background: ${theme.palette.informative.dark};
+      border-color: ${theme.palette.informative.dark};
+    }
+
+    &:checked {
+      background: ${theme.palette.informative.default};
+    }
+
+    &:disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+      border-color: ${theme.palette.informative.light};
+      background-color: ${theme.palette.informative.light};
+    }
+
+    &:checked:before {
+      content: "";
+      width: ${RADIO_SIZES[radioSize].innerCircle}px;
+      height: ${RADIO_SIZES[radioSize].innerCircle}px;
+      background: ${theme.palette.surface.contrast};
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &[data-error="true"] {
+      border-color: ${theme.palette.error.default};
+    }
+
+    &[data-error="true"]:hover {
+      background-color: ${theme.palette.error.light};
+    }
+
+    &[data-error="true"]:disabled {
+      background-color: ${theme.palette.error.light};
+      border-color: ${theme.palette.error.light};
+    }
+
+    &[data-error="true"]:checked {
+      background-color: ${theme.palette.error.default};
+    }
+
+    &[data-error="true"]:checked:disabled {
+      background-color: ${theme.palette.error.light};
+      border-color: ${theme.palette.error.light};
+    }
+    
+    &[data-error="true"]:checked:not(:disabled):hover {
+      background-color: ${theme.palette.error.dark};
+      border-color: ${theme.palette.error.dark};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.primary.default};
+      outline-offset: 2px;
+    }
+  `}
+`;
+
+// src/Radio.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Radio = ({
+  onChange,
+  label,
+  isChecked,
+  isDefaultChecked,
+  isDisabled,
+  name = "radio-group-name",
+  value,
+  hasError,
+  size = "large",
+  dataTestId
+}) => {
+  const radioId = `${value}-id`;
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        flexDirection: "row",
+        gap: theme.spacing.spacing_30,
+        cursor: isDisabled ? "not-allowed" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          RadioInputStyled,
+          {
+            checked: isChecked,
+            "data-error": hasError,
+            "data-testid": dataTestId,
+            defaultChecked: isDefaultChecked,
+            disabled: isDisabled,
+            id: radioId,
+            name,
+            onChange,
+            radioSize: size,
+            tabIndex: isDisabled ? -1 : 0,
+            type: "radio",
+            value
+          }
+        ),
+        label ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            element: "label",
+            fontStyles: size === "large" ? "bodyLgRegular" : "bodyMdRegular",
+            htmlFor: radioId,
+            style: { cursor: isDisabled ? "not-allowed" : "pointer" },
+            children: label
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+// src/RadioGroup.tsx
+import { Children, cloneElement, useMemo } from "react";
+import { useTheme as useTheme2 } from "@emotion/react";
+import { Box as Box2 } from "@dt-dds/react-box";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var RadioGroup = ({
+  children,
+  onChange,
+  dataTestId,
+  direction = "row",
+  size = "large",
+  name
+}) => {
+  const theme = useTheme2();
+  const clonedChildren = useMemo(
+    () => Children.map(children, (child) => {
+      return child && cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
+        onChange,
+        name,
+        size
+      }));
+    }),
+    [children, onChange, name, size]
+  );
+  return /* @__PURE__ */ jsx2(
+    Box2,
+    {
+      "data-testid": dataTestId != null ? dataTestId : "radio-group",
+      role: "radiogroup",
+      style: {
+        flexDirection: direction,
+        gap: theme.spacing.spacing_40,
+        alignItems: direction === "row" ? "center" : "flex-start"
+      },
+      children: clonedChildren
+    }
+  );
+};
+export {
+  Radio,
+  RadioGroup
+};