@startupjs-ui/checkbox 0.1.23 → 0.2.0-alpha.0

package/CHANGELOG.md

@@ -3,12 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.1.23](https://github.com/startupjs/startupjs-ui/compare/v0.1.22...v0.1.23) (2026-03-27)
+# [0.2.0-alpha.0](https://github.com/startupjs/startupjs-ui/compare/v0.1.22...v0.2.0-alpha.0) (2026-03-27)
 
 
-### Bug Fixes
+### Features
 
-* **Checkbox:** add prop for background color ([#23](https://github.com/startupjs/startupjs-ui/issues/23)) ([613a522](https://github.com/startupjs/startupjs-ui/commit/613a5226e15d9a682f7652155f084c26c747ea4d))
+* 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))
 
 
 

package/checkbox.tsx

@@ -13,7 +13,6 @@ const AnimatedView = Animated.View
 interface CheckboxInputProps {
   value?: boolean
   icon?: any
-  checkedBgColor?: string
   _hasError?: boolean
   [key: string]: any
 }
@@ -21,9 +20,7 @@ interface CheckboxInputProps {
 function CheckboxInput ({
   value,
   icon,
-  checkedBgColor,
   _hasError,
-  style,
   ...props
 }: CheckboxInputProps): ReactNode {
   const animation = useRef(new Animated.Value(value ? 1 : 0)).current
@@ -50,19 +47,14 @@ function CheckboxInput ({
   }, [value])
 
   const checkedStyleName = { checked: value }
-  const checkedBgStyle = value && checkedBgColor
-    ? { backgroundColor: checkedBgColor }
-    : undefined
 
   return pug`
     Div.checkbox(
       styleName=[checkedStyleName, { error: _hasError }]
-      style=style
-      accessibilityRole='checkbox'
+      role='checkbox'
       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,14 +51,6 @@ $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
@@ -95,14 +87,6 @@ $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,8 +15,6 @@ 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,8 +31,6 @@ 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 */
@@ -57,7 +55,6 @@ 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,8 +76,9 @@ function Checkbox ({
           value=value
           onPress=onPress
           disabled=disabled
-          accessibilityRole='checkbox'
-          checkedBgColor=checkedBgColor
+          role=variant === 'switch' ? 'switch' : 'checkbox'
+          aria-checked=value
+          aria-disabled=disabled
           ...props
         )
   `

package/package.json

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

package/switch.tsx

@@ -17,16 +17,13 @@ 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
@@ -55,17 +52,11 @@ 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={