@startupjs-ui/div 0.1.10 → 0.1.12

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.1.12](https://github.com/startupjs/startupjs-ui/compare/v0.1.11...v0.1.12) (2026-01-21)
+
+
+### Features
+
+* **span:** add animation and transition support ([d8336e2](https://github.com/startupjs/startupjs-ui/commit/d8336e259573e09c8302265b57bc993d04567e62))
+
+
+
+
+
+## [0.1.11](https://github.com/startupjs/startupjs-ui/compare/v0.1.10...v0.1.11) (2026-01-20)
+
+**Note:** Version bump only for package @startupjs-ui/div
+
+
+
+
+
 ## [0.1.10](https://github.com/startupjs/startupjs-ui/compare/v0.1.9...v0.1.10) (2026-01-18)
 
 

package/README.mdx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
-import { pug, u } from 'startupjs'
+import { pug, u, styl } from 'startupjs'
 import { Sandbox } from '@startupjs-ui/docs'
-import { styl } from 'startupjs'
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 import Div, { _PropsJsonSchema as DivPropsJsonSchema } from './index.tsx'
 import Span from '@startupjs-ui/span'
@@ -194,28 +193,52 @@ Div automatically uses React Native Reanimated when a `transition` or `animation
 **Note:** When using modifier classes to add transitions/animations dynamically, set `animation: none` in the base styles. This ensures Div uses the animated component from the start.
 
 ```jsx example
-const [isGreen, setIsGreen] = useState(false)
-const boxStyle = {
-  width: 50,
-  height: 50,
-  backgroundColor: isGreen ? 'green' : 'red',
-  transitionProperty: 'backgroundColor',
-  transitionDuration: 1000
-}
-const buttonStyle = {
-  paddingVertical: 8,
-  paddingHorizontal: 16,
-  backgroundColor: '#2962FF',
-  borderRadius: 4
-}
+const [isActive, setIsActive] = useState(false)
 return (
-  <Div row align='left' vAlign='center' gap>
-    <Div style={boxStyle} />
-    <Div style={buttonStyle} onPress={() => setIsGreen(!isGreen)}>
-      <Span style={{ color: 'white' }}>Toggle Color</Span>
+  <Div styleName='root' row align='left' vAlign='center' gap>
+    <Div styleName={['box', { isActive }]} />
+    <Div styleName='button' onPress={() => setIsActive(!isActive)}>
+      <Span style={{ color: 'white' }}>Activate</Span>
     </Div>
   </Div>
 )
+styl`
+  .box
+    width 50px
+    height 50px
+    background-color red
+    border-color red
+    transition background-color 1s, border-width 1s, border-color 1s
+    animation none
+    &.isActive
+      border-width 10px
+      border-color lime
+      background-color green
+      animation shake 0.5s infinite, pulse 1s infinite, radius 1s forwards, shadow 1s infinite
+  .root
+    height 60px
+  .button
+    padding 8px 16px
+    background-color #2962FF
+    border-radius 4px
+  @keyframes shake
+    0%, 100%
+      transform translateX(0) translateY(0)
+    25%
+      transform translateX(-10px) translateY(-10px)
+    75%
+      transform translateX(10px) translateY(10px)
+  @keyframes pulse
+    50%
+      width 60px
+      height 60px
+  @keyframes radius
+    100%
+      border-radius 30px
+  @keyframes shadow
+    50%
+      box-shadow 0px 0px 10px rgba(green, 1)
+`
 ```
 
 ## Sandbox

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/div",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "publishConfig": {
     "access": "public"
   },
@@ -12,9 +12,9 @@
     "./useTooltip": "./useTooltip.tsx"
   },
   "dependencies": {
-    "@startupjs-ui/abstract-popover": "^0.1.5",
-    "@startupjs-ui/core": "^0.1.5",
-    "@startupjs-ui/span": "^0.1.5"
+    "@startupjs-ui/abstract-popover": "^0.1.11",
+    "@startupjs-ui/core": "^0.1.11",
+    "@startupjs-ui/span": "^0.1.12"
   },
   "peerDependencies": {
     "react": "*",
@@ -22,5 +22,5 @@
     "react-native-reanimated": ">=4.0.0",
     "startupjs": "*"
   },
-  "gitHead": "1ecb64054dc88294ac0ca801d1241e39052fa47c"
+  "gitHead": "c0b4606437077bb6d170e2c0b16b674801c304fe"
 }