@startupjs-ui/collapse 0.1.13 → 0.1.16

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
+
+**Note:** Version bump only for package @startupjs-ui/collapse
+
+
+
+
+
 ## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
 
 **Note:** Version bump only for package @startupjs-ui/collapse

package/README.mdx

@@ -11,7 +11,7 @@ import Div from '@startupjs-ui/div'
 
 Inherits [react-native-collapsible](https://github.com/oblador/react-native-collapsible).
 
-Collapse allows to toggle the visibility of content.
+Collapse lets you toggle the visibility of a content section with a smooth animation.
 
 ```jsx
 import { Collapse } from 'startupjs-ui'
@@ -19,6 +19,8 @@ import { Collapse } from 'startupjs-ui'
 
 ## Simple example
 
+Use the `open` and `onChange` props to control visibility. Pass a `title` to display a default header.
+
 ```jsx example noscroll
 const [open, setOpen] = useState(false)
 return (
@@ -30,7 +32,7 @@ return (
 
 ## Pure collapse
 
-Pure collapse does not contain any styles (background, paddings, etc.). It is useful when `Collapse` is used as a children of other components like `Card`. To make it pure, pass the string `pure` to the `variant` property.
+The pure variant strips all default styling (background, paddings, etc.), which is useful when embedding a Collapse inside other components like `Card`. Set `variant='pure'` to enable it.
 
 ```jsx example noscroll
 const [open, setOpen] = useState(false)
@@ -48,7 +50,7 @@ return (
 
 ## Advanced usage
 
-Collapse consists of two parts - `Header` and `Content`. These parts can be used to add custom markup, the `Header` is used instead of title and the `Content` is used instad of children. They can be used separately. Each part take value of `variant` prop from parent `Collapse` which can be overridden by passing `variant` to itself.
+Collapse consists of two sub-components: `Collapse.Header` and `Collapse.Content`. Use these instead of the `title` prop and direct children when you need custom markup. Each sub-component inherits the `variant` from the parent Collapse, but you can override it by passing `variant` directly to the sub-component.
 
 ```jsx example noscroll
 const [open, setOpen] = useState(false)
@@ -64,7 +66,7 @@ return (
 
 ## Icon configuration
 
-You can provide a custom icon by specifying the `icon` option. It must be an arrow-like icon pointing right.
+You can provide a custom icon by passing it to the `icon` prop. The icon should be an arrow-like icon pointing right, as it rotates 90 degrees when the collapse opens.
 
 ```jsx example
 const [open, setOpen] = useState(false)
@@ -80,13 +82,42 @@ return (
 )
 ```
 
-### No Icon
+### No icon
+
+You can remove the icon entirely by setting `icon={false}`.
+
+## Animation options
+
+The collapse animation can be customized through props passed to `Collapse` (or directly to `Collapse.Content`):
+
+- **duration** -- animation duration in milliseconds
+- **easing** -- easing function or preset name for the animation curve
+- **collapsedHeight** -- the height of the content area when collapsed (defaults to fully collapsed)
+- **align** -- vertical alignment of the content when partially collapsed (`top`, `center`, or `bottom`)
+- **enablePointerEvents** -- allow pointer events on the content while it is collapsed
+- **renderChildrenCollapsed** -- render children even when the section is collapsed (useful for preserving state)
+- **onAnimationEnd** -- callback fired after the collapse or expand animation finishes
+
+## Custom styles
+
+You can customize the appearance using style props:
+
+- **style** -- custom styles for the root container
+- **collapsibleContainerStyle** -- custom styles for the collapsible content wrapper
+
+When using `Collapse.Header`, additional style props are available:
+
+- **style** -- custom styles for the header root
+- **iconStyle** -- custom styles for the header icon
+- **containerStyle** -- custom styles for the header content container
+
+## Two-way binding
 
-You can remove an icon completely by specifying `icon={false}`
+Instead of manually managing the `open` and `onChange` props, you can use the `$open` prop with a scoped model for automatic two-way data binding.
 
 ## Accordion
 
-Using the `Collapse` component, you can create behavior like an accordion.
+You can build accordion behavior using multiple Collapse components with shared state.
 
 ```jsx example noscroll
 const [expand, setExpand] = useState()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/collapse",
-  "version": "0.1.13",
+  "version": "0.1.16",
   "publishConfig": {
     "access": "public"
   },
@@ -9,9 +9,9 @@
   "type": "module",
   "dependencies": {
     "@startupjs-ui/core": "^0.1.11",
-    "@startupjs-ui/div": "^0.1.13",
-    "@startupjs-ui/icon": "^0.1.13",
-    "@startupjs-ui/span": "^0.1.13",
+    "@startupjs-ui/div": "^0.1.16",
+    "@startupjs-ui/icon": "^0.1.16",
+    "@startupjs-ui/span": "^0.1.16",
     "react-native-collapsible": "^1.6.2"
   },
   "peerDependencies": {
@@ -19,5 +19,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "5cfdccf2bdae3873e968289a3e6b938fad02101a"
+  "gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
 }