@startupjs-ui/collapse 0.1.13 → 0.1.19

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.19](https://github.com/startupjs/startupjs-ui/compare/v0.1.18...v0.1.19) (2026-03-17)
+
+
+### Bug Fixes
+
+* **docs:** don't load all icons to keep bundle small ([#17](https://github.com/startupjs/startupjs-ui/issues/17)) ([d7eb70b](https://github.com/startupjs/startupjs-ui/commit/d7eb70bc11f5b15923f2e43b7ef1f86ea066494e))
+
+
+
+
+
+## [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

@@ -1,7 +1,7 @@
 import { $ } from 'startupjs'
 import { useState } from 'react'
 import { Sandbox } from '@startupjs-ui/docs'
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight'
 import Collapse, { _PropsJsonSchema as CollapsePropsJsonSchema } from './index'
 import { _PropsJsonSchema as CollapseHeaderPropsJsonSchema } from './CollapseHeader'
 import { _PropsJsonSchema as CollapseContentPropsJsonSchema } from './CollapseContent'
@@ -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.19",
   "publishConfig": {
     "access": "public"
   },
@@ -8,10 +8,10 @@
   "types": "index.d.ts",
   "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/core": "^0.1.19",
+    "@startupjs-ui/div": "^0.1.19",
+    "@startupjs-ui/icon": "^0.1.19",
+    "@startupjs-ui/span": "^0.1.19",
     "react-native-collapsible": "^1.6.2"
   },
   "peerDependencies": {
@@ -19,5 +19,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "5cfdccf2bdae3873e968289a3e6b938fad02101a"
+  "gitHead": "bfcca786dc363f42a09b6eef4feb7ca8139302fc"
 }