@startupjs-ui/divider 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/divider
+
+
+
+
+
+## [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))
+* **divider:** refactor Divider component ([c8d77f8](https://github.com/startupjs/startupjs-ui/commit/c8d77f8cedba5b238c7f14f880a3cb39ae0af42f))

package/README.mdx

@@ -0,0 +1,92 @@
+import Divider, { _PropsJsonSchema as DividerPropsJsonSchema } from './index'
+import Span from '@startupjs-ui/span'
+import Div from '@startupjs-ui/div'
+import Content from '@startupjs-ui/content'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Divider
+
+A divider is a thin line that is used to divide content into thematic blocks. For example a thematic break between paragraphs.
+
+```jsx
+import { Divider } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+return (
+  <Content padding style={{ backgroundColor: 'white' }}>
+    <Span>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </Span>
+    <Divider />
+    <Span>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </Span>
+  </Content>
+)
+```
+
+## Sizes
+
+Size of the divider thin line can be modified using `size` prop. The default size is `m`.
+
+```jsx example
+return (
+  <Content padding style={{ backgroundColor: 'white' }}>
+    <Span>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </Span>
+    <Divider size='l' />
+    <Span>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </Span>
+  </Content>
+)
+```
+
+## Divider width
+
+The divider width can be changed by passing a number to `lines` property. The default value of `lines` is `1` and the width of a one line is `16px`.
+
+```jsx example
+return (
+  <Content padding style={{ backgroundColor: 'white' }}>
+    <Span>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </Span>
+    <Divider lines={4} />
+    <Span>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </Span>
+  </Content>
+)
+```
+
+## Vertical divider
+
+By default the divider shows horizontally. To make it vertical, you need pass the string `vertical` to the `variant` property.
+
+```jsx example
+return (
+  <Content padding style={{ backgroundColor: 'white' }}>
+    <Div row>
+      <Span>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </Span>
+      <Divider variant='vertical' />
+      <Span>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </Span>
+    </Div>
+  </Content>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Divider}
+  propsJsonSchema={DividerPropsJsonSchema}
+/>

package/index.cssx.styl

@@ -0,0 +1,24 @@
+// ----- CONFIG: $UI.Divider
+
+$this = merge({
+  heights: {
+    m: 1px,
+    l: 2px
+  }
+}, $UI.Divider, true)
+
+// ----- COMPONENT
+
+.root
+  background-color var(--color-bg-main-subtle-alt)
+
+  &.horizontal
+    width 100%
+
+  &.vertical
+    height 100%
+
+// ----- JS EXPORTS
+
+:export
+  config: $this

package/index.d.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type StyleProp, type ViewStyle } from 'react-native';
+declare const _default: import("react").ComponentType<DividerProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface DividerProps {
+    /** Custom styles applied to the divider */
+    style?: StyleProp<ViewStyle>;
+    /** Divider orientation @default 'horizontal' */
+    variant?: 'horizontal' | 'vertical';
+    /** Divider thickness preset @default 'm' */
+    size?: 'm' | 'l';
+    /** Divider length in lines (1 line is 16px) @default 1 */
+    lines?: number;
+}

package/index.tsx

@@ -0,0 +1,56 @@
+import { type ReactNode } from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed, u } from '@startupjs-ui/core'
+import STYLES from './index.cssx.styl'
+
+const {
+  config: { heights }
+} = STYLES
+const LINE_HEIGHT = u(2)
+
+export default observer(themed('Divider', Divider))
+
+export const _PropsJsonSchema = {/* DividerProps */}
+
+export interface DividerProps {
+  /** Custom styles applied to the divider */
+  style?: StyleProp<ViewStyle>
+  /** Divider orientation @default 'horizontal' */
+  variant?: 'horizontal' | 'vertical'
+  /** Divider thickness preset @default 'm' */
+  size?: 'm' | 'l'
+  /** Divider length in lines (1 line is 16px) @default 1 */
+  lines?: number
+}
+
+function Divider ({
+  style,
+  size = 'm',
+  lines = 1,
+  variant = 'horizontal'
+}: DividerProps): ReactNode {
+  const lineWidth = heights[size]
+  const width = LINE_HEIGHT * lines
+  const margin = (width - lineWidth) / 2
+  const marginFirstSide = Math.floor(margin)
+  const marginSecondSide = Math.ceil(margin)
+  const extraStyle: Record<string, any> = {}
+
+  switch (variant) {
+    case 'horizontal':
+      extraStyle.height = lineWidth
+      extraStyle.marginTop = marginFirstSide
+      extraStyle.marginBottom = marginSecondSide
+      break
+    case 'vertical':
+      extraStyle.width = lineWidth
+      extraStyle.marginLeft = marginFirstSide
+      extraStyle.marginRight = marginSecondSide
+      break
+  }
+
+  return pug`
+    View.root(style=[extraStyle, style] styleName=[size, variant])
+  `
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@startupjs-ui/divider",
+  "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"
+}