@startupjs-ui/radio 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/radio
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **radio:** refactor Radio component ([d114561](https://github.com/startupjs/startupjs-ui/commit/d1145614879b5e8cb2764e295126d659b618d256))

package/README.mdx

@@ -0,0 +1,117 @@
+import { useState } from 'react'
+import Radio, { _PropsJsonSchema as RadioPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Radio
+
+Radio button allows the user to select one option from a list.
+
+```jsx
+import { Radio } from 'startupjs-ui'
+```
+
+## Basic usage
+
+```jsx example
+const [checked, setChecked] = useState()
+return (
+  <Radio
+    value={checked}
+    onChange={value => setChecked(value)}
+    options={['js', 'php']}
+  />
+)
+```
+
+## Custom label and description
+
+```jsx example
+const [checked, setChecked] = useState()
+return (
+  <Radio
+    value={checked}
+    onChange={value => setChecked(value)}
+    options={[
+      {
+        value: 'js',
+        label: 'JavaScript',
+        description: 'Scripting language which helps you create interactive web pages'
+      },
+      {
+        value: 'php',
+        label: 'PHP',
+        description: 'Server side scripting language'
+      }
+    ]}
+  />
+)
+```
+
+## Disabled
+
+```jsx example
+const [checked, setChecked] = useState()
+
+return (
+  <Radio
+    value={checked}
+    onChange={value => setChecked(value)}
+    options={[
+      {
+        value: 'js',
+        label: 'JavaScript'
+      },
+      {
+        value: 'php',
+        label: 'PHP'
+      }
+    ]}
+    disabled
+  />
+)
+```
+
+## Readonly
+
+```jsx example
+const [checked, setChecked] = useState('js')
+
+return (
+  <Radio
+    value={checked}
+    onChange={value => setChecked(value)}
+    options={[
+      {
+        value: 'js',
+        label: 'JavaScript'
+      },
+      {
+        value: 'php',
+        label: 'PHP'
+      }
+    ]}
+    readonly
+  />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Radio}
+  propsJsonSchema={RadioPropsJsonSchema}
+  props={{
+    options: [
+      {
+        value: 'red',
+        label: 'Red'
+      },
+      {
+        value: 'blue',
+        label: 'Blue'
+      }
+    ],
+    value: 'red',
+    onChange: value => alert('Enter \"' + value + '\" in the value input')
+  }}
+/>

package/helpers.ts

@@ -0,0 +1,35 @@
+export interface RadioOptionObject {
+  /** Stored value (used for equality / onChange) */
+  value?: any
+  /** Visible label */
+  label?: string
+  /** Optional description under the label */
+  description?: string
+}
+
+export type RadioOption = string | number | RadioOptionObject
+export type RadioValue = string | number | RadioOptionObject | null | undefined
+
+export function getOptionLabel (option: RadioOption): any {
+  return (option as any)?.label || option
+}
+
+export function getOptionDescription (option: RadioOption): any {
+  return (option as any)?.description
+}
+
+export function stringifyValue (option: any): string {
+  return JSON.stringify(option?.value || option)
+}
+
+export function parseValue (value: any): any {
+  return JSON.parse(value)
+}
+
+export function getLabelFromValue (value: RadioValue, options: RadioOption[]): any {
+  for (const option of options) {
+    if (stringifyValue(value) === stringifyValue(option)) {
+      return getOptionLabel(option)
+    }
+  }
+}

package/index.cssx.styl

@@ -0,0 +1,54 @@
+$radioSize = 2u
+
+$this = merge({
+  size: 2u,
+  borderWidth: 2px,
+  borderColor: var(--color-border-main)
+}, $UI.Radio, true)
+
+.root
+  &.row
+    flex-direction row
+
+.input
+  &.row
+    margin-left 2u
+
+  &.first
+    margin-left 0
+
+.input-input
+  align-self flex-start
+  padding-top 1u
+  padding-bottom @padding-top
+
+.radio
+  width: $this.size
+  height @width
+  border-color: $this.borderColor
+  radius(circle)
+  border-width: $this.borderWidth
+  justify-content center
+  align-items center
+
+  &.checked
+    border-color var(--color-border-primary)
+
+  &.error
+    border-color var(--color-border-error)
+
+.circle
+  radius(circle)
+  width $this.circleSize ? $this.circleSize : ($this.size / 2)
+  height @width
+  background-color var(--color-bg-primary)
+
+  &.error
+    background-color var(--color-bg-error)
+
+.container
+  margin-left 1u
+  flex-shrink 1
+
+.description
+  font(caption)

package/index.d.ts

@@ -0,0 +1,29 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type RadioOption, type RadioValue } from './helpers';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<RadioProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface RadioProps {
+    /** Custom styles for the root wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles for each option item */
+    inputStyle?: StyleProp<ViewStyle>;
+    /** Current selected value */
+    value?: RadioValue;
+    /** List of options @default [] */
+    options?: RadioOption[];
+    /** Render options in a row @default false */
+    row?: boolean;
+    /** Disable interactions @default false */
+    disabled?: boolean;
+    /** Render as non-interactive @default false */
+    readonly?: boolean;
+    /** Change handler */
+    onChange?: (value: any) => void;
+    /** Error flag @private */
+    _hasError?: boolean;
+}

package/index.tsx

@@ -0,0 +1,71 @@
+import { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import Div from '@startupjs-ui/div'
+import Input from './input'
+import {
+  type RadioOption,
+  type RadioValue,
+  getOptionLabel,
+  getOptionDescription,
+  stringifyValue
+} from './helpers'
+import './index.cssx.styl'
+
+export default observer(Radio)
+
+export const _PropsJsonSchema = {/* RadioProps */}
+
+export interface RadioProps {
+  /** Custom styles for the root wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles for each option item */
+  inputStyle?: StyleProp<ViewStyle>
+  /** Current selected value */
+  value?: RadioValue
+  /** List of options @default [] */
+  options?: RadioOption[]
+  /** Render options in a row @default false */
+  row?: boolean
+  /** Disable interactions @default false */
+  disabled?: boolean
+  /** Render as non-interactive @default false */
+  readonly?: boolean
+  /** Change handler */
+  onChange?: (value: any) => void
+  /** Error flag @private */
+  _hasError?: boolean
+}
+
+function Radio ({
+  style,
+  inputStyle,
+  value,
+  options = [],
+  row = false,
+  disabled = false,
+  readonly = false,
+  _hasError,
+  ...props
+}: RadioProps): ReactNode {
+  return pug`
+    Div.root(style=style styleName={ row })
+      each option, index in options
+        - const optionValue = stringifyValue(option)
+        - const checked = optionValue === stringifyValue(value)
+        - const error = _hasError && (value ? checked : true)
+
+        Input.input(
+          key=optionValue
+          style=inputStyle
+          styleName={ row, first: !index }
+          checked=checked
+          value=optionValue
+          description=getOptionDescription(option)
+          error=error
+          disabled=disabled
+          readonly=readonly
+          ...props
+        )= getOptionLabel(option)
+  `
+}

package/input.tsx

@@ -0,0 +1,101 @@
+import { type ReactNode, useRef } from 'react'
+import { Animated, Easing, Platform, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, useDidUpdate } from 'startupjs'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import { themed } from '@startupjs-ui/core'
+import { parseValue } from './helpers'
+import './index.cssx.styl'
+
+const IS_ANDROID = Platform.OS === 'android'
+const ANIMATION_TIMING = 100
+// workaround for android
+// https://github.com/facebook/react-native/issues/6278
+const MIN_SCALE_RATIO = IS_ANDROID ? 0.1 : 0
+const MAX_SCALE_RATIO = 1
+
+export interface RadioInputProps {
+  /** Custom styles for the input wrapper */
+  style?: StyleProp<ViewStyle>
+  /** JSON-stringified option value */
+  value: string
+  /** Optional description displayed under the label */
+  description?: string
+  /** Label content */
+  children?: ReactNode
+  /** Checked state */
+  checked?: boolean
+  /** Disable interactions */
+  disabled?: boolean
+  /** Render as non-interactive */
+  readonly?: boolean
+  /** Change handler */
+  onChange?: (value: any) => void
+  /** Error state */
+  error?: boolean
+}
+
+const RadioInput = function ({
+  style,
+  value,
+  description,
+  children,
+  checked,
+  disabled,
+  readonly,
+  onChange,
+  error
+}: RadioInputProps): ReactNode {
+  const animation = useRef(
+    new Animated.Value(checked ? MAX_SCALE_RATIO : MIN_SCALE_RATIO)
+  ).current
+
+  useDidUpdate(() => {
+    if (checked) {
+      Animated.timing(
+        animation,
+        {
+          toValue: MAX_SCALE_RATIO,
+          duration: ANIMATION_TIMING,
+          easing: Easing.linear,
+          useNativeDriver: true
+        }
+      ).start()
+    } else {
+      Animated.timing(
+        animation,
+        {
+          toValue: MIN_SCALE_RATIO,
+          duration: ANIMATION_TIMING,
+          easing: Easing.linear,
+          useNativeDriver: true
+        }
+      ).start()
+    }
+  }, [checked])
+
+  return pug`
+    Div.input-input(
+      style=style
+      vAlign='center'
+      disabled=disabled || readonly
+      onPress=() => onChange && onChange(parseValue(value))
+      accessibilityRole='radio'
+      row
+    )
+      Div.radio(
+        styleName=[{ checked, error }]
+      )
+        Animated.View.circle(
+          style={ transform: [{ scale: animation }] }
+          styleName={ error }
+        )
+      if children
+        Div.container
+          Span.label= children
+          if description
+            Span.description(description)= description
+  `
+}
+
+export default observer(themed('Radio', RadioInput))

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@startupjs-ui/radio",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}