@startupjs-ui/checkbox 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/checkbox
+
+
+
+
+
+## [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))
+* **checkbox:** refactor Checkbox component ([563a274](https://github.com/startupjs/startupjs-ui/commit/563a2743e6c4d655d15dadd4035a48dc204a8f05))

package/README.mdx

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus'
+import Checkbox, { _PropsJsonSchema as CheckboxPropsJsonSchema } from './index'
+import Div from '@startupjs-ui/div'
+import Br from '@startupjs-ui/br'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Checkbox
+
+Checkboxes allow the user to select one or more items from a set.
+
+```jsx
+import { Checkbox } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [checked, setChecked] = useState(false)
+
+return (
+  <Div>
+    <Checkbox
+      value={checked}
+      onChange={setChecked}
+    />
+    <Br />
+    <Checkbox
+      variant='switch'
+      value={checked}
+      onChange={setChecked}
+    />
+  </Div>
+)
+```
+
+## Variants
+
+There are two display variants of component: `checkbox` and `switch`. **Default**: `checkbox`.
+
+```jsx example
+const [checked, setChecked] = useState(false)
+
+return (
+  <Checkbox
+    variant='switch'
+    value={checked}
+    onChange={setChecked}
+  />
+)
+```
+
+## Disabled
+
+```jsx example
+return (
+  <Checkbox disabled />
+)
+```
+
+## Readonly
+
+```jsx example
+return (
+  <Checkbox readonly />
+)
+```
+
+## Checkbox with custom icon
+
+The `icon` property allows to change the default icon.
+
+```jsx example
+const [checked, setChecked] = useState(false)
+
+return (
+  <Checkbox
+    value={checked}
+    icon={faMinus}
+    onChange={setChecked}
+  />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Checkbox}
+  propsJsonSchema={CheckboxPropsJsonSchema}
+  extraParams={{
+    icon: {
+      showIconSelect: true
+    }
+  }}
+  props={{
+    onChange: value => alert('New value is ' + value)
+  }}
+/>

package/checkbox.tsx

@@ -0,0 +1,77 @@
+import { useState, useRef, type ReactNode } from 'react'
+import { Animated, Easing } from 'react-native'
+import { pug, observer, useDidUpdate } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck'
+import STYLES from './index.cssx.styl'
+
+const { config: { checkbox: { iconSize } } } = STYLES
+const AnimatedView = Animated.View
+
+interface CheckboxInputProps {
+  value?: boolean
+  icon?: any
+  _hasError?: boolean
+  [key: string]: any
+}
+
+function CheckboxInput ({
+  value,
+  icon,
+  _hasError,
+  ...props
+}: CheckboxInputProps): ReactNode {
+  const animation = useRef(new Animated.Value(value ? 1 : 0)).current
+  const [width, setWidth] = useState(0)
+  const [animated, setAnimated] = useState(false)
+
+  useDidUpdate(() => {
+    if (value) {
+      setAnimated(true)
+      Animated.timing(
+        animation,
+        {
+          toValue: 1,
+          duration: 120,
+          easing: Easing.linear,
+          useNativeDriver: true
+        }
+      ).start(() => {
+        setAnimated(false)
+      })
+    } else {
+      animation.setValue(0)
+    }
+  }, [value])
+
+  const checkedStyleName = { checked: value }
+
+  return pug`
+    Div.checkbox(
+      styleName=[checkedStyleName, { error: _hasError }]
+      accessibilityRole='checkbox'
+      onLayout=(event) => setWidth(event.nativeEvent.layout.width)
+      ...props
+    )
+      Icon.checkbox-icon(
+        styleName=[checkedStyleName]
+        icon= icon || faCheck
+        size=iconSize
+      )
+      AnimatedView.checkbox-animation(
+        styleName=[{ animated }]
+        style={
+          transform: [{
+            translateX: animation.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, width]
+            })
+          }]
+        }
+      )
+  `
+}
+
+export default observer(themed('Checkbox', CheckboxInput))

package/index.cssx.styl

@@ -0,0 +1,103 @@
+$checkboxBorderColor = var(--color-border-main)
+$checkedIconColor = var(--color-text-on-primary)
+$height = 2u
+
+$this = merge({
+  checkbox: {
+    size: 2u,
+    borderWidth: 2px,
+    borderColor: $checkboxBorderColor,
+    borderRadius: 2px,
+    iconSize: 12
+  },
+  switch: {
+    width: 3u,
+    height: 2u,
+    circleSize: 10px,
+    circleBg: var(--Checkbox-switchBulletBg),
+    circleBgChecked: var(--Checkbox-switchBulletBg-checked),
+    circleLeftPosition: 3px,
+    circleRightPosition: 11px
+  }
+}, $UI.Checkbox, true)
+
+.readonly
+  fontFamily('normal', 900)
+  font-size 2u
+  line-height $height
+
+.checkbox
+  height: $this.checkbox.size
+  width @height
+  border-width: $this.checkbox.borderWidth
+  border-color: $this.checkbox.borderColor
+  justify-content center
+  align-items center
+  // due to border-radius on emulator
+  // you can see white 1px boundary between border and background
+  border-radius: $this.checkbox.borderRadius
+  overflow hidden
+
+  // NOTE:
+  // We do not change the background color for the error
+  // because this behavior is not possible
+  // but if it is necessary for some reason
+  // then we need to change it for the checkbox-animation class too
+  // IMPORTANT: checked modifier should overlaps error modifier
+  &.error
+    border-color var(--color-border-error)
+
+  &.checked
+    background-color var(--color-bg-primary)
+    border-color var(--color-border-primary)
+
+.checkbox-icon
+  display none
+  color $checkedIconColor
+
+  &.checked
+    display flex
+
+// NOTE: opacity is workaround because display none and position absolute doesn't work right
+// https://github.com/facebook/react-native/issues/18415
+.checkbox-animation
+  opacity 0
+  position absolute
+  left 0
+  top 0
+  bottom 0
+  right 0
+  background-color var(--color-bg-primary)
+
+  &.animated
+    opacity 1
+
+.switch
+  width: $this.switch.width
+  height $this.switch.height
+  radius(circle)
+  justify-content center
+  background-color var(--Checkbox-switchBg)
+  // padding 0 3px
+
+  // IMPORTANT: checked modifier should overlap error modifier
+  &.error
+    background-color var(--color-bg-error)
+
+  &.checked
+    background-color var(--color-bg-primary)
+
+.switch-circle
+  width: $this.switch.circleSize
+  height @width
+  background-color: $this.switch.circleBg
+  radius(circle)
+
+  if $this.switch.circleShadowLevel
+    shadow($this.switch.circleShadowLevel)
+
+  &.checked
+    background-color: $this.switch.circleBgChecked
+
+:export
+  config: $this

package/index.d.ts

@@ -0,0 +1,35 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type StyleProp, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+export declare const _PropsJsonSchema: {};
+export interface CheckboxProps {
+    /** Custom styles for the wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles for the input element */
+    inputStyle?: StyleProp<ViewStyle>;
+    /** Visual variant @default 'checkbox' */
+    variant?: 'checkbox' | 'switch';
+    /** Checked state @default false */
+    value?: boolean;
+    /** Custom icon for the checkbox variant */
+    icon?: any;
+    /** Disable interactions @default false */
+    disabled?: boolean;
+    /** Render a non-interactive value @default false */
+    readonly?: boolean;
+    /** Change handler */
+    onChange?: (value: boolean) => void;
+    /** Focus handler (ignored on wrapper) */
+    onFocus?: (...args: any[]) => void;
+    /** Blur handler (ignored on wrapper) */
+    onBlur?: (...args: any[]) => void;
+    /** Style override for the switch thumb */
+    switchCircleStyle?: StyleProp<ViewStyle>;
+    /** Error flag @private */
+    _hasError?: boolean;
+    [key: string]: any;
+}
+declare const _default: import("react").ComponentType<CheckboxProps>;
+export default _default;

package/index.tsx

@@ -0,0 +1,87 @@
+import { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import CheckboxInput from './checkbox'
+import SwitchInput from './switch'
+import './index.cssx.styl'
+
+const INPUT_COMPONENTS = {
+  checkbox: CheckboxInput,
+  switch: SwitchInput
+} as const
+
+const READONLY_ICONS = {
+  TRUE: '✓',
+  FALSE: '✗'
+}
+
+export const _PropsJsonSchema = {/* CheckboxProps */}
+
+export interface CheckboxProps {
+  /** Custom styles for the wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles for the input element */
+  inputStyle?: StyleProp<ViewStyle>
+  /** Visual variant @default 'checkbox' */
+  variant?: 'checkbox' | 'switch'
+  /** Checked state @default false */
+  value?: boolean
+  /** Custom icon for the checkbox variant */
+  icon?: any
+  /** Disable interactions @default false */
+  disabled?: boolean
+  /** Render a non-interactive value @default false */
+  readonly?: boolean
+  /** Change handler */
+  onChange?: (value: boolean) => void
+  /** Focus handler (ignored on wrapper) */
+  onFocus?: (...args: any[]) => void
+  /** Blur handler (ignored on wrapper) */
+  onBlur?: (...args: any[]) => void
+  /** Style override for the switch thumb */
+  switchCircleStyle?: StyleProp<ViewStyle>
+  /** Error flag @private */
+  _hasError?: boolean
+  [key: string]: any
+}
+
+function Checkbox ({
+  style,
+  inputStyle,
+  variant = 'checkbox',
+  readonly = false,
+  value = false,
+  disabled = false,
+  onChange,
+  onFocus, // skip due to pointless triggering when clicked on the View
+  onBlur, // skip due to pointless triggering when clicked on the View
+  ...props
+}: CheckboxProps): ReactNode {
+  const InputComponent = INPUT_COMPONENTS[variant]
+
+  function onPress () {
+    onChange && onChange(!value)
+  }
+
+  return pug`
+    Div(style=style)
+      if readonly
+        Span.readonly=value ? READONLY_ICONS.TRUE : READONLY_ICONS.FALSE
+      else
+        InputComponent(
+          style=inputStyle
+          value=value
+          onPress=onPress
+          disabled=disabled
+          accessibilityRole='checkbox'
+          ...props
+        )
+  `
+}
+
+export default observer(
+  themed('Checkbox', Checkbox)
+)

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@startupjs-ui/checkbox",
+  "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/icon": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}

package/switch.tsx

@@ -0,0 +1,74 @@
+import { useRef, type ReactNode } from 'react'
+import { Animated, Easing } from 'react-native'
+import { pug, observer, useDidUpdate } from 'startupjs'
+import Div from '@startupjs-ui/div'
+import { themed } from '@startupjs-ui/core'
+import STYLES from './index.cssx.styl'
+
+const {
+  config: {
+    switch: {
+      circleLeftPosition,
+      circleRightPosition
+    }
+  }
+} = STYLES
+const AnimatedView = Animated.View
+
+interface SwitchInputProps {
+  value?: boolean
+  _hasError?: boolean
+  [key: string]: any
+}
+
+function SwitchInput ({
+  value,
+  _hasError,
+  ...props
+}: SwitchInputProps): ReactNode {
+  const animation = useRef(new Animated.Value(value ? 1 : 0)).current
+
+  useDidUpdate(() => {
+    if (value) {
+      Animated.timing(
+        animation,
+        {
+          toValue: 1,
+          duration: 120,
+          easing: Easing.linear,
+          useNativeDriver: true
+        }
+      ).start()
+    } else {
+      Animated.timing(
+        animation,
+        {
+          toValue: 0,
+          duration: 120,
+          easing: Easing.linear,
+          useNativeDriver: true
+        }
+      ).start()
+    }
+  }, [value])
+
+  return pug`
+    Div.switch(
+      styleName=[{ checked: value, error: _hasError }]
+      ...props
+    )
+      AnimatedView.switch-circle(
+        part='switchCircle'
+        style={
+          transform: [{
+            translateX: animation.interpolate({
+              inputRange: [0, 1],
+              outputRange: [circleLeftPosition, circleRightPosition]
+            })
+          }]
+        }
+        styleName={ checked: value }
+      )
+  `
+}
+export default observer(themed('Checkbox', SwitchInput))