@startupjs-ui/checkbox 0.2.0-alpha.1 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://github.com/startupjs/startupjs-ui/compare/v0.2.3...v0.3.0) (2026-05-27)
+
+**Note:** Version bump only for package @startupjs-ui/checkbox
+
+
+
+
+
+# [0.2.0](https://github.com/startupjs/startupjs-ui/compare/v0.1.23...v0.2.0) (2026-05-04)
+
+
+### Features
+
+* [v0.2] add accessibility features to most components, which also dramatically improves E2E testability ([#22](https://github.com/startupjs/startupjs-ui/issues/22)) ([b563e2f](https://github.com/startupjs/startupjs-ui/commit/b563e2fa498a8a83bd5abc7836d120f6d2381e3f))
+
+
+
+
+
 # [0.2.0-alpha.1](https://github.com/startupjs/startupjs-ui/compare/v0.2.0-alpha.0...v0.2.0-alpha.1) (2026-04-10)
 
 **Note:** Version bump only for package @startupjs-ui/checkbox
@@ -17,6 +36,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * fix and improve accessibility of various components. Add storybook with tests. ([#21](https://github.com/startupjs/startupjs-ui/issues/21)) ([83b6576](https://github.com/startupjs/startupjs-ui/commit/83b65767ed61b24209f71b143ba1c2986170ab58))
+## [0.1.23](https://github.com/startupjs/startupjs-ui/compare/v0.1.22...v0.1.23) (2026-03-27)
+
+
+### Bug Fixes
+
+* **Checkbox:** add prop for background color ([#23](https://github.com/startupjs/startupjs-ui/issues/23)) ([613a522](https://github.com/startupjs/startupjs-ui/commit/613a5226e15d9a682f7652155f084c26c747ea4d))
 
 
 

package/checkbox.tsx

@@ -13,6 +13,7 @@ const AnimatedView = Animated.View
 interface CheckboxInputProps {
   value?: boolean
   icon?: any
+  checkedBgColor?: string
   _hasError?: boolean
   [key: string]: any
 }
@@ -20,7 +21,9 @@ interface CheckboxInputProps {
 function CheckboxInput ({
   value,
   icon,
+  checkedBgColor,
   _hasError,
+  style,
   ...props
 }: CheckboxInputProps): ReactNode {
   const animation = useRef(new Animated.Value(value ? 1 : 0)).current
@@ -47,14 +50,19 @@ function CheckboxInput ({
   }, [value])
 
   const checkedStyleName = { checked: value }
+  const checkedBgStyle = value && checkedBgColor
+    ? { backgroundColor: checkedBgColor }
+    : undefined
 
   return pug`
     Div.checkbox(
       styleName=[checkedStyleName, { error: _hasError }]
       role='checkbox'
+      style=style
       onLayout=(event) => setWidth(event.nativeEvent.layout.width)
       ...props
     )
+      Div.checkbox-bg(style=checkedBgStyle)
       Icon.checkbox-icon(
         styleName=[checkedStyleName]
         icon= icon || faCheck

package/index.cssx.styl

@@ -51,6 +51,14 @@ $this = merge({
     background-color var(--color-bg-primary)
     border-color var(--color-border-primary)
 
+.checkbox-bg
+  position absolute
+  left 0
+  right 0
+  top 0
+  bottom 0
+  border-radius: $this.checkbox.borderRadius
+
 .checkbox-icon
   display none
   color $checkedIconColor
@@ -87,6 +95,14 @@ $this = merge({
   &.checked
     background-color var(--color-bg-primary)
 
+.switch-bg
+  position absolute
+  left 0
+  right 0
+  top 0
+  bottom 0
+  radius(circle)
+
 .switch-circle
   width: $this.switch.circleSize
   height @width

package/index.d.ts

@@ -15,6 +15,8 @@ export interface CheckboxProps {
     value?: boolean;
     /** Custom icon for the checkbox variant */
     icon?: any;
+    /** Custom background color when checked */
+    checkedBgColor?: string;
     /** Disable interactions @default false */
     disabled?: boolean;
     /** Render a non-interactive value @default false */

package/index.tsx

@@ -31,6 +31,8 @@ export interface CheckboxProps {
   value?: boolean
   /** Custom icon for the checkbox variant */
   icon?: any
+  /** Custom background color when checked */
+  checkedBgColor?: string
   /** Disable interactions @default false */
   disabled?: boolean
   /** Render a non-interactive value @default false */
@@ -55,6 +57,7 @@ function Checkbox ({
   readonly = false,
   value = false,
   disabled = false,
+  checkedBgColor,
   onChange,
   onFocus, // skip due to pointless triggering when clicked on the View
   onBlur, // skip due to pointless triggering when clicked on the View
@@ -79,6 +82,7 @@ function Checkbox ({
           role=variant === 'switch' ? 'switch' : 'checkbox'
           aria-checked=value
           aria-disabled=disabled
+          checkedBgColor=checkedBgColor
           ...props
         )
   `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/checkbox",
-  "version": "0.2.0-alpha.1",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -8,15 +8,15 @@
   "types": "index.d.ts",
   "type": "module",
   "dependencies": {
-    "@startupjs-ui/core": "^0.2.0-alpha.1",
-    "@startupjs-ui/div": "^0.2.0-alpha.1",
-    "@startupjs-ui/icon": "^0.2.0-alpha.1",
-    "@startupjs-ui/span": "^0.2.0-alpha.1"
+    "@startupjs-ui/core": "^0.3.0",
+    "@startupjs-ui/div": "^0.3.0",
+    "@startupjs-ui/icon": "^0.3.0",
+    "@startupjs-ui/span": "^0.3.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "b48004779559b16c96a2a1995dab13b998eafce9"
+  "gitHead": "8d212b47680af1dfe582f9759b38724b46488e25"
 }

package/switch.tsx

@@ -17,13 +17,16 @@ const AnimatedView = Animated.View
 
 interface SwitchInputProps {
   value?: boolean
+  checkedBgColor?: string
   _hasError?: boolean
   [key: string]: any
 }
 
 function SwitchInput ({
   value,
+  checkedBgColor,
   _hasError,
+  style,
   ...props
 }: SwitchInputProps): ReactNode {
   const animation = useRef(new Animated.Value(value ? 1 : 0)).current
@@ -52,11 +55,17 @@ function SwitchInput ({
     }
   }, [value])
 
+  const checkedBgStyle = value && checkedBgColor
+    ? { backgroundColor: checkedBgColor }
+    : undefined
+
   return pug`
     Div.switch(
       styleName=[{ checked: value, error: _hasError }]
+      style=style
       ...props
     )
+      Div.switch-bg(style=checkedBgStyle)
       AnimatedView.switch-circle(
         part='switchCircle'
         style={