@startupjs-ui/span 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,29 @@
+# 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/span
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Bug Fixes
+
+* **div:** Refactor to use Pressable and get rid of an extra wrapper when the Div is pressable ([9e7c852](https://github.com/startupjs/startupjs-ui/commit/9e7c852f383f540cab58b7a31aba0bd64a531adc))
+* remove async ([9782d01](https://github.com/startupjs/startupjs-ui/commit/9782d01aa728b4970cf3919055a87eaee27a5d16))
+* remove async await in components ([67c97ec](https://github.com/startupjs/startupjs-ui/commit/67c97eccce202095f0f4c85b1d7c204f6cdc4a6e))
+* specify explicit return for react components ([20648e6](https://github.com/startupjs/startupjs-ui/commit/20648e67c9e004c1e7e8eb01a92bbaf36a0362d0))
+
+
+### 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))
+* auto-generate .d.ts files for components on commit ([7d51efe](https://github.com/startupjs/startupjs-ui/commit/7d51efed601aabd217670490ae1cd438b7852970))
+* **icon:** refactor Icon component ([70237be](https://github.com/startupjs/startupjs-ui/commit/70237be3cd372154f1010def67735ef08db0c02a))

package/README.mdx

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { pug } from 'startupjs'
+import Span, { _PropsJsonSchema as SpanPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Span
+
+The base component of typography is `Span`, which is used for plain text.
+
+```jsx
+import { Span } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+<Span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</Span>
+```
+
+## Headers
+
+Use `h1` - `h6` props to create headers.
+
+```jsx example
+<Span h1>H1 Heading</Span>
+<Span h2>H2 Heading</Span>
+<Span h3>H3 Heading</Span>
+<Span h4>H4 Heading</Span>
+<Span h5>H5 Heading</Span>
+<Span h6>H6 Heading</Span>
+```
+
+## Bold and Italic
+
+```jsx example
+<Span bold>Bold text</Span>
+<Span italic>Italic text</Span>
+<Span bold italic>Bold and Italic text</Span>
+```
+
+## Description
+
+Use `description` prop for secondary text.
+
+```jsx example
+<Span description>Description text</Span>
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Span}
+  propsJsonSchema={SpanPropsJsonSchema}
+  props={{
+    children: 'Test text'
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,45 @@
+// ----- CONFIG: $UI.Span
+
+$this = merge({
+  color: var(--color-text-main),
+  descriptionColor: var(--color-text-description)
+}, $UI.Span, true)
+
+// ----- COMPONENT
+
+_tags = ('h1' 'h2' 'h3' 'h4' 'h5' 'h6')
+
+.root
+  color: $this.color
+  fontFamily('normal')
+  font()
+
+  for tag in _tags
+    &.{tag}
+      fontFamily('heading')
+      font(tag)
+
+  &.bold
+    fontFamily('normal', $UI.fontWeights.normalBold)
+
+  &.italic
+    fontFamily('normal', $UI.fontWeights.normal, italic)
+
+  &.bold.italic
+    fontFamily('normal', $UI.fontWeights.normalBold, italic)
+
+  &.description
+    color: $this.descriptionColor
+
+  &.full
+    flex: 1
+
+  // Overrides for headers when bold/italic
+  for tag in _tags
+    &.{tag}
+      &.bold
+        fontFamily('heading', $UI.fontWeights.headingBold)
+      &.italic
+        fontFamily('heading', $UI.fontWeights.heading, italic)
+      &.bold.italic
+        fontFamily('heading', $UI.fontWeights.headingBold, italic)

package/index.d.ts

@@ -0,0 +1,41 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode, type RefObject } from 'react';
+import { type TextStyle, type StyleProp, type TextProps } from 'react-native';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<SpanProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface SpanProps extends TextProps {
+    /** Ref to access underlying <Text> */
+    ref?: RefObject<any>;
+    /** Custom styles applied to the root view */
+    style?: StyleProp<TextStyle>;
+    /** Content rendered inside Span */
+    children?: ReactNode;
+    /** bold text */
+    bold?: boolean;
+    /** italic text */
+    italic?: boolean;
+    /** full width (flex: 1) */
+    full?: boolean;
+    /** description text color */
+    description?: boolean;
+    /** theme name */
+    theme?: string;
+    /** h1 header */
+    h1?: boolean;
+    /** h2 header */
+    h2?: boolean;
+    /** h3 header */
+    h3?: boolean;
+    /** h4 header */
+    h4?: boolean;
+    /** h5 header */
+    h5?: boolean;
+    /** h6 header */
+    h6?: boolean;
+    /** @deprecated use h1-h6 props instead */
+    variant?: 'default' | 'description' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}

package/index.tsx

@@ -0,0 +1,90 @@
+import { type ReactNode, type RefObject } from 'react'
+import { Platform, Text, type TextStyle, type StyleProp, type TextProps } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import './index.cssx.styl'
+
+export default observer(themed('Span', Span))
+
+export const _PropsJsonSchema = {/* SpanProps */}
+
+export interface SpanProps extends TextProps {
+  /** Ref to access underlying <Text> */
+  ref?: RefObject<any>
+  /** Custom styles applied to the root view */
+  style?: StyleProp<TextStyle>
+  /** Content rendered inside Span */
+  children?: ReactNode
+  /** bold text */
+  bold?: boolean
+  /** italic text */
+  italic?: boolean
+  /** full width (flex: 1) */
+  full?: boolean
+  /** description text color */
+  description?: boolean
+  /** theme name */
+  theme?: string
+  /** h1 header */
+  h1?: boolean
+  /** h2 header */
+  h2?: boolean
+  /** h3 header */
+  h3?: boolean
+  /** h4 header */
+  h4?: boolean
+  /** h5 header */
+  h5?: boolean
+  /** h6 header */
+  h6?: boolean
+  /** @deprecated use h1-h6 props instead */
+  variant?: 'default' | 'description' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+
+function Span ({
+  ref,
+  style,
+  children,
+  variant,
+  bold,
+  italic,
+  full,
+  description,
+  theme,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ...props
+}: SpanProps): ReactNode {
+  if (variant && variant !== 'default') {
+    if (variant === 'description') {
+      console.warn("[@startupjs/ui] Span: variant='description' is DEPRECATED, use prop description instead.")
+    } else {
+      console.warn(`[@startupjs/ui] Span: variant='${variant}' is DEPRECATED, use font(${variant}) mixin instead or h1-h6 props.`)
+    }
+  }
+
+  const tag = h1 ? 'h1' : h2 ? 'h2' : h3 ? 'h3' : h4 ? 'h4' : h5 ? 'h5' : h6 ? 'h6' : undefined
+
+  const role: any = Platform.OS === 'web' && tag
+    ? { accessibilityRole: 'header', accessibilityLevel: tag.replace(/^h/, '') }
+    : {}
+
+  return pug`
+    Text.root(
+      ref=ref
+      style=style
+      styleName=[
+        theme,
+        variant,
+        tag,
+        { bold, italic, full, description }
+      ]
+      ...role
+      ...props
+    )= children
+  `
+}

package/package.json

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