@startupjs-ui/br 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/br
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* refactor Br, Layout, Portal ([d5f4dcd](https://github.com/startupjs/startupjs-ui/commit/d5f4dcd17e834ceae95decfc1df38bda2b5a17ab))

package/README.mdx

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import Br, { _PropsJsonSchema as BrPropsJsonSchema } from './index'
+import Content from '@startupjs-ui/content'
+import NumberInput from '@startupjs-ui/number-input'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import { u } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Br
+
+`Br` is used to insert a line break. It also lets the developer customize the number of line breaks needed.
+
+```jsx
+import { Br } from 'startupjs-ui'
+```
+
+## Simple example
+```jsx example
+return (
+  <Br />
+)
+```
+
+## Number of lines
+
+Number of line breaks can be changed by passing a number to `lines` prop. The default value of `lines` is `1` and the width of a one line is `16px`.
+
+```jsx example
+const itemStyle = {
+  height: u(5),
+  justifyContent: 'center',
+  alignItems: 'center'
+}
+const [value, setValue] = useState(1)
+return (
+  <Content>
+    <NumberInput
+      label='Enter number of lines of space'
+      value={value}
+      onChangeNumber={num => setValue(num)}
+    />
+    <Br />
+    <Div style={itemStyle} level={1}>
+      <Span>Item 1</Span>
+    </Div>
+    <Br lines={Number(value)} />
+    <Div style={itemStyle} level={1}>
+      <Span>Item 2</Span>
+    </Div>
+  </Content>
+)
+```
+
+## Half of line break
+
+Setting the `half` prop to `true` creates a line break equivalent to a `lines` value of `0.5`.
+
+```jsx example
+const itemStyle = {
+  height: u(5),
+  justifyContent: 'center',
+  alignItems: 'center'
+}
+return (
+  <Content>
+    <Div style={itemStyle} level={1}>
+      <Span>Item 1</Span>
+    </Div>
+    <Br half />
+    <Div style={itemStyle} level={1}>
+      <Span>Item 2</Span>
+    </Div>
+  </Content>
+)
+```
+
+## Sandbox
+
+<Sandbox Component={Br} propsJsonSchema={BrPropsJsonSchema} />

package/index.cssx.styl

@@ -0,0 +1,2 @@
+.root
+  flex-shrink 0

package/index.d.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type StyleProp, type TextStyle } from 'react-native';
+import './index.cssx.styl';
+export declare const _PropsJsonSchema: {};
+export interface BrProps {
+    /** Custom styles applied to the spacer */
+    style?: StyleProp<TextStyle>;
+    /** Use half-height spacing */
+    half?: boolean;
+    /** Number of spacer lines @default 1 */
+    lines?: number;
+}
+declare const _default: import("react").ComponentType<BrProps>;
+export default _default;

package/index.tsx

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react'
+import { Text, type StyleProp, type TextStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed, u } from '@startupjs-ui/core'
+import './index.cssx.styl'
+
+const LINE_HEIGHT = u(2)
+
+export const _PropsJsonSchema = {/* BrProps */}
+
+export interface BrProps {
+  /** Custom styles applied to the spacer */
+  style?: StyleProp<TextStyle>
+  /** Use half-height spacing */
+  half?: boolean
+  /** Number of spacer lines @default 1 */
+  lines?: number
+}
+
+function Br ({
+  style,
+  half = false,
+  lines = 1
+}: BrProps): ReactNode {
+  const height = half ? LINE_HEIGHT / 2 : LINE_HEIGHT * lines
+  return pug`
+    Text.root(style=[{ height }, style])
+  `
+}
+
+export default observer(themed('Br', Br))

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@startupjs-ui/br",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}