@startupjs-ui/layout 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/layout
+
+
+
+
+
+## [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,51 @@
+import Div from '@startupjs-ui/div'
+import Layout, { _PropsJsonSchema as LayoutPropsJsonSchema } from './index'
+import Span from '@startupjs-ui/span'
+import { u } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import './index.mdx.cssx.styl'
+
+# Layout
+
+`Layout` serves as the root element of the application. It purpose is to render content within the safe area boundaries of a device. Also it displays a [StatusBar](https://reactnative.dev/docs/statusbar) for `android` & `ios` native apps.
+
+```jsx
+import { Layout } from 'startupjs-ui'
+```
+
+
+## Simple example
+
+```jsx example
+return (
+  <Layout style={{
+    backgroundColor: '#fff',
+    height: u(25),
+    alignItems: 'center',
+    justifyContent: 'center'
+  }}>
+    <Span>Layout area</Span>
+  </Layout>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Layout}
+  propsJsonSchema={LayoutPropsJsonSchema}
+  props={{
+    style: {
+      backgroundColor: '#f1f1f1',
+      height: u(25),
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: (
+      <Div styleName='child'>
+        <Span>Lorem ipsum</Span>
+      </Div>
+    )
+  }}
+  block
+/>

package/index.cssx.styl

@@ -0,0 +1,20 @@
+// ----- CONFIG: $UI.Layout
+
+$this = merge({
+  bgColor: var(--color-bg-main)
+}, $UI.Layout, true)
+
+// ----- COMPONENT
+
+.root
+  height 100%
+  background-color $this.bgColor
+  overflow hidden
+
+  +web()
+    overflow-x hidden
+
+// ----- JS EXPORTS
+
+:export
+  config: $this

package/index.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export declare const _PropsJsonSchema: {};
+export interface LayoutProps {
+    /** Custom styles applied to the root safe area view */
+    style?: StyleProp<ViewStyle>;
+    /** Content rendered inside layout */
+    children?: ReactNode;
+}
+declare const _default: import("react").ComponentType<LayoutProps>;
+export default _default;

package/index.mdx.cssx.styl

@@ -0,0 +1,6 @@
+.child
+  height 15u
+  align-items center
+  justify-content center
+  padding 2u
+  background-color #00AED6

package/index.tsx

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react'
+import { SafeAreaView, StatusBar, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import STYLES from './index.cssx.styl'
+
+const { config: { bgColor } } = STYLES
+
+export const _PropsJsonSchema = {/* LayoutProps */}
+
+export interface LayoutProps {
+  /** Custom styles applied to the root safe area view */
+  style?: StyleProp<ViewStyle>
+  /** Content rendered inside layout */
+  children?: ReactNode
+}
+
+function Layout ({ children }: LayoutProps): ReactNode {
+  return pug`
+    SafeAreaView.root(part='root')
+      StatusBar(
+        backgroundColor=bgColor
+        barStyle='dark-content'
+      )
+      = children
+  `
+}
+
+export default observer(themed('Layout', Layout))

package/package.json

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