@startupjs-ui/div 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,34 @@
+# 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/div
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Bug Fixes
+
+* disable wrong TS error ([199c088](https://github.com/startupjs/startupjs-ui/commit/199c088718256d88bef037536c9f1e71fd39c7be))
+* **div:** fix tooltip typings ([97f7bf7](https://github.com/startupjs/startupjs-ui/commit/97f7bf7bcf289f0430e8ff5c72c1bfb21207dca2))
+* **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))
+* **div:** refactor tooltip-related logic to move it fully out into a separate hook to decorate props ([2fa9cf0](https://github.com/startupjs/startupjs-ui/commit/2fa9cf0821a6c726d5e2ad621a6c15d4091e59c7))
+* 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))
+* **div:** bring back tooltip support ([7ea1f62](https://github.com/startupjs/startupjs-ui/commit/7ea1f62b2537f536c9c01803c3a4ae61fbcc17b0))
+* **div:** Migrate Div component ([d43c2f7](https://github.com/startupjs/startupjs-ui/commit/d43c2f784fab74cb4537932d30ecb974dbf4541a))
+* **icon:** refactor Icon component ([70237be](https://github.com/startupjs/startupjs-ui/commit/70237be3cd372154f1010def67735ef08db0c02a))

package/README.mdx

@@ -0,0 +1,212 @@
+import { useState } from 'react'
+import { pug, u } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import { styl } from 'startupjs'
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import Div, { _PropsJsonSchema as DivPropsJsonSchema } from './index.tsx'
+import Span from '@startupjs-ui/span'
+import Icon from '@startupjs-ui/icon'
+
+# Div
+
+Div is a basic building block for layouts. It is a wrapper around `View` with some extra features.
+
+```jsx
+import { Div } from 'startupjs-ui'
+```
+
+## Simple example
+```jsx example
+return (
+  <Div>
+    <Span>Div</Span>
+  </Div>
+)
+```
+
+## Clickable
+
+```jsx example
+const divStyle = {
+  width: 150,
+  height: 100,
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: '#00AED6'
+}
+const [counter, setCounter] = useState(0)
+return (
+  <Div
+    style={divStyle}
+    onLongPress={() => setCounter(counter + 10)}
+    onPress={() => setCounter(counter + 1)}
+  >
+    <Span>Clicked {counter} times</Span>
+  </Div>
+)
+```
+
+## Layout
+
+You can specify properties to manage layout:
+
+- `row` - aligns children from left to right (default: `false`)
+- `reverse` - aligns the children in reverse order depending on the direction (default: `false`)
+- `wrap` - controls the wrapping of children into multiple rows (default: `false`)
+- `align` - controls horizontal alignment (possible values: `left`, `center`, `right`)
+- `vAlign` - controls vertical alignment (possible values: `top`, `center`, `bottom`)
+- `gap` - defines the size of the gap between items in [units](/docs/tutorial/TricksWithStyles#units) or the value `true` is equivalent to `2`
+
+```jsx example
+return (
+  <Div
+    style={{ height: u(10), backgroundColor: 'yellow' }}
+    row
+    align='center'
+    vAlign='center'
+  >
+    <Div style={{ width: u(5), height: u(5), backgroundColor: 'red' }} />
+    <Div style={{ width: u(5), height: u(5), backgroundColor: 'blue' }} pushed />
+  </Div>
+)
+```
+
+## Full width (or height)
+
+To make `Div` take all remaining space in the parent container (according to its `flex-direction`), pass the `full` property.
+
+This property just sets `flex: 1` to it.
+
+```jsx example
+return (
+  <Div row vAlign='center'>
+    <Div full>
+      <Span>Tesla Model S</Span>
+    </Div>
+    <Span description>1000 HP</Span>
+  </Div>
+)
+```
+
+## Indentation between multiple Div
+
+When displaying multiple Div(s) in a line spacing between them can be adjusted using `pushed` prop to specify indent from the previous Div. Possible values of `pushed` prop can be found in the `Sandbox` section at the bottom of the page. The `true` value of prop is equivalent to `m` value.
+
+Though instead of pushing each individual Div, in most cases it is better to use `gap` prop on the parent Div to set spacing between all children at once.
+
+```jsx example
+const divStyle = {
+  width: 100,
+  height: 80,
+  textAlign: 'center',
+  justifyContent: 'center',
+  backgroundColor: '#00AED6'
+}
+return (
+  <Div row>
+    <Div style={divStyle}>
+      <Span>Div 1</Span>
+    </Div>
+    <Div pushed='s' style={divStyle}>
+      <Span>Div 2</Span>
+    </Div>
+    <Div pushed style={divStyle}>
+      <Span>Div 3</Span>
+    </Div>
+    <Div pushed='l' style={divStyle}>
+      <Span>Div 4</Span>
+    </Div>
+  </Div>
+)
+```
+
+## Different clickable states
+
+There are two clickable variants of component, controlled by `variant` property.
+
+`opacity` variant - on press down, opacity of the component is decreased.
+
+`highlight` variant - on press down, the opacity of the component background  is decreased.
+
+```jsx example
+const divStyle = {
+  width: 100,
+  height: 80,
+  textAlign: 'center',
+  justifyContent: 'center',
+  backgroundColor: '#00AED6'
+}
+return (
+  <Div row>
+    <Div style={divStyle} onPress={() => {}}>
+      <Span>Div opacity variant</Span>
+    </Div>
+    <Div style={divStyle} variant='highlight' pushed onPress={() => {}}>
+      <Span>Div highlight variant</Span>
+    </Div>
+  </Div>
+)
+```
+
+## Levels of emphasis
+
+Div `level` property determines different levels of emphasis by adding shadow to component. Possible values of `level` prop can be found in the `Sandbox` section at the bottom of the page.
+**IMPORTANT**: Shadow does not work without background color on mobile devices.
+
+```jsx example
+const divStyle = {
+  width: 100,
+  height: 80,
+  textAlign: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'white'
+}
+return (
+  <Div row>
+    <Div style={divStyle} level={1}>
+      <Span>Div level 1</Span>
+    </Div>
+    <Div style={divStyle} level={4} pushed>
+      <Span>Div level 4</Span>
+    </Div>
+  </Div>
+)
+```
+
+## Tooltip
+
+```jsx example
+return pug`
+  Div.root(tooltip='Tooltip content')
+    Icon(icon=faInfoCircle size='xl')
+`
+
+styl`
+  .root
+    align-self flex-start
+`
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Div}
+  propsJsonSchema={DivPropsJsonSchema}
+  props={{
+    children: (
+      <Div style={{
+        height: 15 * 8,
+        width: 15 * 8,
+        margin: 'auto',
+        backgroundColor: '#00AED6'
+      }} />
+    ),
+    style: {
+      width: 160,
+      height: 160,
+      backgroundColor: '#2962FF'
+    },
+    onPress: () => alert('"onPress" event on "Div" component'),
+    onLongPress: () => alert('"onLongPress" event on "Div" component')
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,110 @@
+// -----------------------------------------
+//   CONFIGURATION. $UI.Div
+// -----------------------------------------
+
+$this = merge({
+  defaultHoverOpacity: 0.8,
+  defaultActiveOpacity: 0.5
+}, $UI.Div, true)
+
+// -----------------------------------------
+//   COMPONENT
+// -----------------------------------------
+
+_pushedSizes = ('xs' 's' 'm' 'l' 'xl' 'xxl')
+
+// skip level 0 for shadow
+// because it needed only when you want to override shadow from style sheet
+_shadowLevels = ('1' '2' '3' '4')
+
+.root
+  outline-color var(--color-primary)
+
+  &.column
+    &.left
+      align-items stretch
+
+    &.center
+      align-items center
+
+    &.right
+      align-items flex-end
+
+    &.v_top
+      justify-content flex-start
+
+    &.v_center
+      justify-content center
+
+    &.v_bottom
+      justify-content flex-end
+
+  &.row
+    flex-direction row
+
+    &.left
+      justify-content flex-start
+
+    &.center
+      justify-content center
+
+    &.right
+      justify-content flex-end
+
+    &.v_top
+      align-items flex-start
+
+    &.v_center
+      align-items center
+
+    &.v_bottom
+      align-items flex-end
+
+  &.wrap
+    flex-wrap wrap
+
+  &.reverse
+    &.column
+      flex-direction column-reverse
+
+    &.row
+      flex-direction row-reverse
+
+  &.rounded
+    radius()
+
+  &.circle
+    radius(circle)
+
+  for size in _pushedSizes
+    &.pushed-{size}
+      margin-left: $UI.gutters[size]
+
+  for level in _shadowLevels
+    &.shadow-{level}
+      shadow(level)
+
+  &.bleed
+    bleed()
+
+  &.full
+    flex-grow 1
+    flex-shrink 1
+
+  &.clickable
+    cursor pointer
+    user-select none
+
+  &.disabled
+    opacity 0.5
+
+    +web()
+      cursor default
+
+// -----------------------------------------
+//   JS EXPORTS
+// -----------------------------------------
+
+:export
+  config: $this
+  shadows: $UI.shadows

package/index.d.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode, type RefObject } from 'react';
+import { type StyleProp, type ViewStyle, type ViewProps, type AccessibilityRole } from 'react-native';
+declare const _default: import("react").ComponentType<DivProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface DivProps extends ViewProps {
+    /** Ref to access underlying <View> or <Pressable> */
+    ref?: RefObject<any>;
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Content rendered inside Div */
+    children?: ReactNode;
+    /** Visual feedback variant @default 'opacity' */
+    variant?: 'opacity' | 'highlight';
+    /** Render children in a horizontal row */
+    row?: boolean;
+    /** Allow wrapping when row is enabled */
+    wrap?: boolean;
+    /** Reverse children order for row layouts */
+    reverse?: boolean;
+    /** Horizontal alignment when using row/column */
+    align?: 'left' | 'center' | 'right';
+    /** Vertical alignment when using row/column */
+    vAlign?: 'top' | 'center' | 'bottom';
+    /** Spacing between children (true maps to default gap) */
+    gap?: boolean | number;
+    /** Enable press feedback styles (hover and active states) @default true */
+    feedback?: boolean;
+    /** Custom style for hover state */
+    hoverStyle?: StyleProp<ViewStyle>;
+    /** Custom style for active state */
+    activeStyle?: StyleProp<ViewStyle>;
+    /** Disable interactions and apply disabled styles */
+    disabled?: boolean;
+    /** Elevation level controlling shadow intensity */
+    level?: 0 | 1 | 2 | 3 | 4 | 5;
+    /** Shape of the container corners */
+    shape?: 'squared' | 'rounded' | 'circle';
+    /** Add more space from the previous sibling */
+    pushed?: boolean | 's' | 'm' | 'l';
+    /** Stretch container into negative spacing area */
+    bleed?: boolean;
+    /** Expand to take full available height (or width if 'row' is true) */
+    full?: boolean;
+    /** Simple tooltip text */
+    tooltip?: string;
+    /** Style overrides for tooltip element */
+    tooltipStyle?: StyleProp<ViewStyle>;
+    /** onPress handler */
+    onPress?: (e: any) => void;
+    /** onLongPress handler */
+    onLongPress?: (e: any) => void;
+    /** onPressIn handler */
+    onPressIn?: (e: any) => void;
+    /** onPressOut handler */
+    onPressOut?: (e: any) => void;
+    /** Whether view is accessible and focusable (if you can press it it's focusable by default) */
+    accessible?: boolean;
+    /** Accessibility role passed to native view (if you can press it it's a 'button') */
+    accessibilityRole?: AccessibilityRole;
+    /** Deprecated custom tooltip renderer @deprecated */
+    renderTooltip?: any;
+    /** Test ID for testing purposes */
+    'data-testid'?: string;
+}

package/index.tsx

@@ -0,0 +1,360 @@
+import { useState, useRef, type ReactNode, type RefObject } from 'react'
+import {
+  View,
+  Pressable,
+  Platform,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type ViewProps,
+  type AccessibilityRole
+} from 'react-native'
+import { pug, observer, u, useDidUpdate } from 'startupjs'
+import { colorToRGBA, getCssVariable, themed } from '@startupjs-ui/core'
+import { useDecorateTooltipProps } from './useTooltip'
+import STYLES from './index.cssx.styl'
+
+const DEPRECATED_PUSHED_VALUES = ['xs', 'xl', 'xxl']
+const PRESSABLE_PROPS = ['onPress', 'onLongPress', 'onPressIn', 'onPressOut']
+const isWeb = Platform.OS === 'web'
+const isNative = Platform.OS !== 'web'
+
+const {
+  config: {
+    defaultHoverOpacity,
+    defaultActiveOpacity
+  }
+} = STYLES
+
+export default observer(themed('Div', Div))
+
+export const _PropsJsonSchema = {/* DivProps */}
+
+export interface DivProps extends ViewProps {
+  /** Ref to access underlying <View> or <Pressable> */
+  ref?: RefObject<any>
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Content rendered inside Div */
+  children?: ReactNode
+  /** Visual feedback variant @default 'opacity' */
+  variant?: 'opacity' | 'highlight'
+  /** Render children in a horizontal row */
+  row?: boolean
+  /** Allow wrapping when row is enabled */
+  wrap?: boolean
+  /** Reverse children order for row layouts */
+  reverse?: boolean
+  /** Horizontal alignment when using row/column */
+  align?: 'left' | 'center' | 'right'
+  /** Vertical alignment when using row/column */
+  vAlign?: 'top' | 'center' | 'bottom'
+  /** Spacing between children (true maps to default gap) */
+  gap?: boolean | number
+  /** Enable press feedback styles (hover and active states) @default true */
+  feedback?: boolean
+  /** Custom style for hover state */
+  hoverStyle?: StyleProp<ViewStyle>
+  /** Custom style for active state */
+  activeStyle?: StyleProp<ViewStyle>
+  /** Disable interactions and apply disabled styles */
+  disabled?: boolean
+  /** Elevation level controlling shadow intensity */
+  level?: 0 | 1 | 2 | 3 | 4 | 5
+  /** Shape of the container corners */
+  shape?: 'squared' | 'rounded' | 'circle'
+  /** Add more space from the previous sibling */
+  pushed?: boolean | 's' | 'm' | 'l'
+  /** Stretch container into negative spacing area */
+  bleed?: boolean
+  /** Expand to take full available height (or width if 'row' is true) */
+  full?: boolean
+  /** Simple tooltip text */
+  tooltip?: string
+  /** Style overrides for tooltip element */
+  tooltipStyle?: StyleProp<ViewStyle>
+  /** onPress handler */
+  onPress?: (e: any) => void
+  /** onLongPress handler */
+  onLongPress?: (e: any) => void
+  /** onPressIn handler */
+  onPressIn?: (e: any) => void
+  /** onPressOut handler */
+  onPressOut?: (e: any) => void
+  /** Whether view is accessible and focusable (if you can press it it's focusable by default) */
+  accessible?: boolean
+  /** Accessibility role passed to native view (if you can press it it's a 'button') */
+  accessibilityRole?: AccessibilityRole
+  /** Deprecated custom tooltip renderer @deprecated */
+  renderTooltip?: any // Deprecated
+  /** Test ID for testing purposes */
+  'data-testid'?: string
+}
+
+function Div ({
+  style = [],
+  children,
+  variant = 'opacity',
+  row,
+  wrap,
+  reverse,
+  align,
+  vAlign,
+  gap,
+  hoverStyle,
+  activeStyle,
+  feedback = true,
+  disabled,
+  level = 0,
+  shape,
+  pushed, // History: for some reason the prop 'push' was ignored
+  bleed,
+  full,
+  accessible,
+  accessibilityRole,
+  tooltip,
+  tooltipStyle,
+  renderTooltip,
+  ref,
+  ...props
+}: DivProps): ReactNode {
+  assertDeprecatedValues({ pushed, renderTooltip })
+  style = StyleSheet.flatten(style)
+  // on RN row-reverse switches margins and paddings sides, so we switch them back
+  if (isNative && reverse) style = reverseMarginPaddingSides(style)
+  if (gap === true) gap = 2
+  const isPressable = hasPressHandler(props)
+  const fallbackRef = useRef<any>(null)
+  const rootRef = ref ?? fallbackRef
+
+  let pressableStyle: StyleProp<ViewStyle> = {}
+  ;({
+    props,
+    pressableStyle,
+    accessibilityRole
+  } = useDecoratePressableProps({
+    props,
+    style,
+    activeStyle,
+    hoverStyle,
+    variant,
+    isPressable,
+    disabled,
+    accessibilityRole,
+    feedback
+  }))
+
+  let tooltipElement
+  ;({
+    props,
+    tooltipElement
+  } = useDecorateTooltipProps({
+    props,
+    style: tooltipStyle,
+    anchorRef: rootRef,
+    tooltip
+  }))
+
+  let pushedModifier
+  if (pushed) {
+    if (typeof pushed === 'boolean') pushed = 'm'
+    pushedModifier = `pushed-${pushed}`
+  }
+
+  let levelModifier
+  if (level) levelModifier = `shadow-${level}`
+
+  if (!accessible) accessibilityRole = undefined
+
+  const Component = isPressable ? Pressable : View
+  const testID = props.testID ?? props['data-testid']
+  const divElement = pug`
+    Component.root(
+      ref=rootRef
+      style=[
+        gap ? { gap: u(gap) } : undefined,
+        style,
+        pressableStyle
+      ]
+      styleName=[
+        row ? 'row' : 'column',
+        { wrap, reverse },
+        align,
+        'v_' + vAlign,
+        {
+          clickable: isWeb && isPressable,
+          bleed,
+          full,
+          disabled
+        },
+        shape,
+        pushedModifier,
+        levelModifier
+      ]
+      accessible=accessible
+      accessibilityRole=accessibilityRole
+      testID=testID
+      ...props
+    )= children
+  `
+
+  if (tooltipElement) {
+    return pug`
+      = divElement
+      = tooltipElement
+    `
+  } else return divElement
+}
+
+function useDecoratePressableProps ({
+  props,
+  style,
+  activeStyle,
+  hoverStyle,
+  variant,
+  isPressable,
+  disabled,
+  accessibilityRole,
+  feedback
+}: {
+  props: Record<string, any>
+  style: StyleProp<ViewStyle>
+  activeStyle: StyleProp<ViewStyle>
+  hoverStyle: StyleProp<ViewStyle>
+  variant: 'opacity' | 'highlight'
+  isPressable: boolean
+  disabled?: boolean
+  accessibilityRole?: AccessibilityRole
+  feedback?: boolean
+}): {
+    props: Record<string, any>
+    pressableStyle?: StyleProp<ViewStyle>
+    accessibilityRole?: AccessibilityRole
+  } {
+  let pressableStyle: StyleProp<ViewStyle> = {}
+  const [hover, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+
+  // If component become not clickable, for example received 'disabled'
+  // prop while hover or active, state wouldn't update without this effect
+  useDidUpdate(() => {
+    if (!isPressable) return
+    if (disabled) {
+      if (hover) setHover(false)
+      if (active) setActive(false)
+    }
+  }, [isPressable, disabled])
+
+  // decorate the element state (hover, active) only if it's pressable
+  if (!isPressable) return { props }
+
+  accessibilityRole ??= 'button'
+  props.focusable ??= true
+
+  // setup hover and active states styles and props
+  if (feedback) {
+    const { onPressIn, onPressOut } = props
+
+    props.onPressIn = (...args: any[]) => {
+      setActive(true)
+      onPressIn?.(...args)
+    }
+    props.onPressOut = (...args: any[]) => {
+      setActive(false)
+      onPressOut?.(...args)
+    }
+
+    if (isWeb && !disabled) {
+      const { onMouseEnter, onMouseLeave } = props
+
+      props.onMouseEnter = (...args: any[]) => {
+        setHover(true)
+        onMouseEnter?.(...args)
+      }
+      props.onMouseLeave = (...args: any[]) => {
+        setHover(false)
+        onMouseLeave?.(...args)
+      }
+    }
+    // hover or active state styles
+    // active state takes precedence over hover state
+    if (active) {
+      pressableStyle = activeStyle ?? getDefaultStyle(style, 'active', variant)
+    } else if (hover) {
+      pressableStyle = hoverStyle ?? getDefaultStyle(style, 'hover', variant)
+    }
+  }
+
+  // if disabled, disable all press handlers
+  for (const prop of PRESSABLE_PROPS) {
+    const pressHandler = props[prop]
+    if (!pressHandler) continue
+    props[prop] = (...args: any[]) => {
+      if (disabled) return
+      pressHandler(...args)
+    }
+  }
+
+  return { props, pressableStyle, accessibilityRole }
+}
+
+function getDefaultStyle (
+  style: StyleProp<ViewStyle>,
+  type: 'hover' | 'active',
+  variant?: 'opacity' | 'highlight'
+): StyleProp<ViewStyle> | undefined {
+  if (variant === 'opacity') {
+    if (type === 'hover') return { opacity: defaultHoverOpacity }
+    if (type === 'active') return { opacity: defaultActiveOpacity }
+  } else {
+    style = StyleSheet.flatten(style)
+    let backgroundColor = style.backgroundColor
+    if (backgroundColor === 'transparent') backgroundColor = undefined
+
+    if (type === 'hover') {
+      if (backgroundColor) {
+        return { backgroundColor: colorToRGBA(backgroundColor as string, defaultHoverOpacity) }
+      } else {
+        // If no color exists, we treat it as a light background and just dim it a bit
+        return { backgroundColor: getCssVariable('--Div-hoverBg') as string | undefined }
+      }
+    }
+
+    if (type === 'active') {
+      if (backgroundColor) {
+        return { backgroundColor: colorToRGBA(backgroundColor as string, defaultActiveOpacity) }
+      } else {
+        // If no color exists, we treat it as a light background and just dim it a bit
+        return { backgroundColor: getCssVariable('--Div-activeBg') as string | undefined }
+      }
+    }
+  }
+}
+
+function hasPressHandler (props: Record<string, any>): boolean {
+  return PRESSABLE_PROPS.some(prop => props[prop])
+}
+
+function reverseMarginPaddingSides (style: StyleProp<ViewStyle>) {
+  style = StyleSheet.flatten(style)
+  const { paddingLeft, paddingRight, marginLeft, marginRight } = style
+  style.marginLeft = marginRight
+  style.marginRight = marginLeft
+  style.paddingLeft = paddingRight
+  style.paddingRight = paddingLeft
+  return style
+}
+
+function assertDeprecatedValues ({ pushed, renderTooltip }: { pushed?: any, renderTooltip?: any }) {
+  if (DEPRECATED_PUSHED_VALUES.includes(pushed)) console.warn(ERRORS.DEPRECATED_PUSHED(pushed))
+  if (renderTooltip) console.warn(ERRORS.DEPRECATED_RENDER_TOOLTIP)
+}
+
+const ERRORS = {
+  DEPRECATED_PUSHED: (pushed: string) => `
+    [@startupjs/ui] Div: variant='${pushed}' is DEPRECATED, use one of 's', 'm', 'l' instead.
+  `,
+  DEPRECATED_RENDER_TOOLTIP: `
+    [@startupjs/ui] Div: renderTooltip is DEPRECATED, use 'tooltip' property instead.
+  `
+}

package/package.json

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

package/useTooltip.tsx

@@ -0,0 +1,166 @@
+import React, { useState, useEffect, useMemo, useCallback, type ReactNode, type RefObject } from 'react'
+import { Platform, View } from 'react-native'
+import { pug, styl } from 'startupjs'
+import Span from '@startupjs-ui/span'
+import AbstractPopover from '@startupjs-ui/abstract-popover'
+
+const isWeb = Platform.OS === 'web'
+
+const DEFAULT_TOOLTIP_PROPS = {
+  position: 'top',
+  attachment: 'center',
+  arrow: true
+}
+
+export interface UseTooltipProps {
+  style?: any
+  anchorRef: RefObject<any>
+  tooltip?: ReactNode | (() => ReactNode)
+}
+
+export type TooltipEventHandler = 'onMouseEnter' | 'onMouseLeave' | 'onLongPress' | 'onPressOut'
+export type TooltipEventHandlers = Partial<Record<TooltipEventHandler, any>>
+export const tooltipEventHandlersList: TooltipEventHandler[] = [
+  'onMouseEnter',
+  'onMouseLeave',
+  'onLongPress',
+  'onPressOut'
+]
+
+interface TooltipResult {
+  tooltipElement?: ReactNode
+  tooltipEventHandlers: TooltipEventHandlers
+}
+
+export default function useTooltip ({ style, anchorRef, tooltip }: UseTooltipProps) {
+  const result: TooltipResult = { tooltipEventHandlers: {} }
+  const [visible, setVisible] = useState(false)
+
+  const cbSetVisibleTrue = useCallback(() => { setVisible(true) }, [])
+  const cbSetVisibleFalse = useCallback(() => { setVisible(false) }, [])
+
+  useEffect(() => {
+    if (!isWeb) return
+    if (!tooltip) return
+
+    window.addEventListener('wheel', cbSetVisibleFalse, true)
+    return () => {
+      window.removeEventListener('wheel', cbSetVisibleFalse, true)
+    }
+  }, [cbSetVisibleFalse, cbSetVisibleTrue, tooltip])
+
+  const tooltipEventHandlers = useMemo(() => {
+    const handlers: TooltipEventHandlers = {}
+    if (!tooltip) return handlers
+
+    if (isWeb) {
+      handlers.onMouseEnter = cbSetVisibleTrue
+      handlers.onMouseLeave = cbSetVisibleFalse
+    } else {
+      handlers.onLongPress = cbSetVisibleTrue
+      handlers.onPressOut = cbSetVisibleFalse
+    }
+
+    return handlers
+  }, [cbSetVisibleFalse, cbSetVisibleTrue, tooltip])
+
+  result.tooltipEventHandlers = tooltipEventHandlers
+
+  if (tooltip) {
+    result.tooltipElement = pug`
+      AbstractPopover.tooltip(
+        style=style
+        anchorRef=anchorRef
+        visible=visible
+        ...DEFAULT_TOOLTIP_PROPS
+      )
+        //- case for DEPRECATED renderTooltip property
+        if typeof tooltip === 'function'
+          = tooltip()
+        else
+          //- HACK
+          //- Wrap to row, because for small texts it does not correctly hyphenate in the text
+          //- For example $500,000, Copy, etc...
+          View(style={ flexDirection: 'row' })
+            Span.tooltip-text= tooltip
+    `
+  }
+
+  return result
+
+  styl`
+    .tooltip
+      background-color var(--Div-tooltipBg)
+      max-width 260px
+      radius()
+      shadow(3)
+      padding 1u 2u
+
+      +tablet()
+        max-width 320px
+
+      &-text
+        color var(--Div-tooltipText)
+  `
+}
+
+export interface UseDecorateTooltipProps {
+  props: Record<string, any>
+  style?: any
+  anchorRef: RefObject<any>
+  tooltip?: ReactNode | (() => ReactNode)
+}
+
+interface DecorateTooltipResult {
+  props: Record<string, any>
+  tooltipElement?: ReactNode
+}
+
+export function useDecorateTooltipProps ({
+  props,
+  style,
+  anchorRef,
+  tooltip
+}: UseDecorateTooltipProps): DecorateTooltipResult {
+  const { tooltipElement, tooltipEventHandlers } = useTooltip({ style, anchorRef, tooltip })
+  const {
+    onMouseEnter,
+    onMouseLeave,
+    onLongPress,
+    onPressOut
+  } = props as TooltipEventHandlers
+
+  const extraEventHandlerProps: TooltipEventHandlers = useMemo(() => {
+    const res: TooltipEventHandlers = {}
+    const divHandlers: TooltipEventHandlers = {
+      onMouseEnter,
+      onMouseLeave,
+      onLongPress,
+      onPressOut
+    }
+
+    for (const handlerName of tooltipEventHandlersList) {
+      const tooltipHandler = tooltipEventHandlers[handlerName]
+      if (!tooltipHandler) continue
+      const divHandler = divHandlers[handlerName]
+
+      res[handlerName] = divHandler
+        ? (...args: any[]) => {
+            tooltipHandler(...args)
+            divHandler(...args)
+          }
+        : tooltipHandler
+    }
+    return res
+  }, [
+    tooltipEventHandlers,
+    onMouseEnter,
+    onMouseLeave,
+    onLongPress,
+    onPressOut
+  ])
+
+  Object.assign(props, extraEventHandlerProps)
+
+  return { props, tooltipElement }
+}