@startupjs-ui/tag 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# 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/tag
+
+
+
+
+
+## [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))
+* **menu:** refactor Menu component. Fix useColors types. ([ffd4671](https://github.com/startupjs/startupjs-ui/commit/ffd46719c308f99d856d8020ebfc070bb479ab28))
+* **tag:** refactor Tag component. Add support for handling extension of Omit<> interfaces ([01f4833](https://github.com/startupjs/startupjs-ui/commit/01f483350ad61f8ecad9d11f20d7e56e3dc35952))

package/README.mdx

@@ -0,0 +1,149 @@
+import { useState } from 'react'
+import { faTimesCircle, faStopCircle } from '@fortawesome/free-solid-svg-icons'
+import { Sandbox } from '@startupjs-ui/docs'
+import Tag, { _PropsJsonSchema as TagPropsJsonSchema } from './index'
+import Br from '@startupjs-ui/br'
+import Div from '@startupjs-ui/div'
+import './index.mdx.cssx.styl'
+
+# Tag
+
+Inherits [Div props](/docs/components/Div).
+
+Tags are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, tags should appear dynamically as a group of multiple interactive elements.
+
+```js
+import { Tag } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+return (
+  <Div row>
+    <Tag>Tag</Tag>
+  </Div>
+)
+```
+
+## Colors
+
+Color is `primary` by default. It can be changed by passing color name from the config colors to `color` property. Possible values of property can be found in the `Sandbox` section at the bottom of the page.
+
+```jsx example
+return (
+  <Div row>
+    <Tag>Primary (default)</Tag>
+    <Tag color='success' pushed='s'>Success</Tag>
+    <Tag color='warning' pushed='s'>Warning</Tag>
+    <Tag color='error' pushed='s'>Error</Tag>
+  </Div>
+)
+```
+
+## Sizes
+
+The `size` property applies to the size of tag, icons, and text. There are two sizes - `m` and` s` (default is `m`).
+
+```jsx example
+return (
+  <Div style={{ alignItems: 'flex-start' }}>
+    <Tag size='s'>Size 's'</Tag>
+    <Br />
+    <Tag>Size 'm' (default)</Tag>
+  </Div>
+)
+```
+
+## Outlined tags
+
+Outlined tags offer an alternative style, in property `variant` need to pass `outlined` or `outlined-bg` for an outlined tag with a background.
+
+```jsx example
+return (
+  <Div row>
+    <Tag variant='outlined'>Outlined tag</Tag>
+    <Tag variant='outlined-bg' pushed='s' onPress={() => {}}>Outlined tag with a background</Tag>
+  </Div>
+)
+```
+
+## Shapes
+
+Tags can have different corner shapes. It can be changed by changing `shape` prop (`circle` by default) to `rounded`.
+
+```jsx example
+return (
+  <Div row>
+    <Tag>Circle shape</Tag>
+    <Tag shape='rounded' pushed='s'>Rounded shape</Tag>
+  </Div>
+)
+```
+
+## Icons
+
+Left and right icons can be added using the `icon` and `secondaryIcon` properties. To change the color of an icon, use the corresponding `iconStyleName` or `secondaryIconStyleName` property.
+
+In `.styl` file
+```stylus
+.icon
+  color var(--color-text-main)
+.secondaryIcon
+  color var(--color-text-error)
+```
+
+```jsx example
+return (
+  <Div row>
+    <Tag icon={faStopCircle}>
+      Icon on the left
+    </Tag>
+    <Tag
+      secondaryIcon={faStopCircle}
+      variant='outlined-bg'
+      pushed='s'
+    >
+      Icon on the right
+    </Tag>
+    <Tag
+      iconStyleName='icon'
+      secondaryIconStyleName='secondaryIcon'
+      variant='outlined'
+      icon={faStopCircle}
+      secondaryIcon={faTimesCircle}
+      pushed='s'
+    >
+      Two icons
+    </Tag>
+  </Div>
+)
+```
+
+## Actions
+Tag can be made interactive using `onPress` prop.
+
+```jsx example
+const [counter, setCounter] = useState(0)
+return (
+  <Tag onPress={() => setCounter(counter + 1)}>
+    Clicked {counter} times
+  </Tag>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Tag}
+  propsJsonSchema={TagPropsJsonSchema}
+  extraParams={{
+    icon: { showIconSelect: true },
+    secondaryIcon: { showIconSelect: true }
+  }}
+  props={{
+    children: 'Hello world!',
+    onPress: () => alert('"onPress" event on Tag component'),
+    onLongPress: () => alert('"onLongPress" event on Tag component'),
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,76 @@
+// ----- CONFIG: $UI.Tag
+
+$this = merge({
+  heights: {
+    s: 2.5u,
+    m: 3u,
+  },
+  paddings: {
+    s: 1u,
+    m: 1.5u
+  },
+  fontSizes: {
+    s: 'caption',
+    m: 'body2'
+  },
+  iconMargins: {
+    inside: {
+      s: 0.75u,
+      m: 1u
+    }
+    outside: {
+      s: -0.25u,
+      m: -0.5u
+    }
+  }
+  outlinedBorderWidth: 1px,
+  disabledOpacity: 0.25
+},
+  $UI.Tag,
+  true
+)
+
+.root
+  flex-direction row
+  align-items center
+  justify-content center
+
+  for size, height in $this.heights
+    &.{size}
+      height height
+
+  for size, padding in $this.paddings
+    &.{size}
+      padding-left padding
+      padding-right padding
+
+  &.disabled
+    opacity $this.disabledOpacity
+
+  &.outlined
+  &.outlined-bg
+    border-width: $this.outlinedBorderWidth
+
+.label
+  for size, fontSize in $this.fontSizes
+    &.{size}
+      font(fontSize)
+
+.iconWrapper
+  &.left
+    for size, margin in $this.iconMargins.inside
+      &.{size}
+        margin-right margin
+
+    for size, margin in $this.iconMargins.outside
+      &.{size}
+        margin-left margin
+
+  &.right
+    for size, margin in $this.iconMargins.inside
+      &.{size}
+        margin-left margin
+
+    for size, margin in $this.iconMargins.outside
+      &.{size}
+        margin-right margin

package/index.d.ts

@@ -0,0 +1,46 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type GestureResponderEvent, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type DivProps } from '@startupjs-ui/div';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<TagProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface TagProps extends Omit<DivProps, 'variant'> {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles applied to the label text */
+    textStyle?: StyleProp<TextStyle>;
+    /** Tag content */
+    children?: ReactNode;
+    /** Tag color name @default 'primary' */
+    color?: string;
+    /** Tag appearance variant @default 'flat' */
+    variant?: 'flat' | 'outlined' | 'outlined-bg';
+    /** Tag size preset @default 'm' */
+    size?: 's' | 'm';
+    /** Icon displayed on the left side */
+    icon?: object | (() => any);
+    /** Custom styles applied to the left icon */
+    iconStyle?: StyleProp<TextStyle>;
+    /** Icon displayed on the right side */
+    secondaryIcon?: object | (() => any);
+    /** Custom styles applied to the right icon */
+    secondaryIconStyle?: StyleProp<TextStyle>;
+    /** Disable interactions and apply disabled styles */
+    disabled?: boolean;
+    /** Custom style for hover state */
+    hoverStyle?: StyleProp<ViewStyle>;
+    /** Custom style for active state */
+    activeStyle?: StyleProp<ViewStyle>;
+    /** Shape of the tag corners @default 'circle' */
+    shape?: 'circle' | 'rounded';
+    /** Handler for tag press */
+    onPress?: (event: GestureResponderEvent) => void;
+    /** Handler for left icon press */
+    onIconPress?: (event: GestureResponderEvent) => void;
+    /** Handler for right icon press */
+    onSecondaryIconPress?: (event: GestureResponderEvent) => void;
+}

package/index.mdx.cssx.styl

@@ -0,0 +1,5 @@
+.icon
+  color var(--color-text-main)
+
+.secondaryIcon
+  color var(--color-text-error)

package/index.tsx

@@ -0,0 +1,173 @@
+import { type ReactNode } from 'react'
+import { StyleSheet, type GestureResponderEvent, type StyleProp, type TextStyle, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { Colors, colorToRGBA, themed, useColors } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import Span from '@startupjs-ui/span'
+import './index.cssx.styl'
+
+const ICON_SIZES = {
+  s: 's',
+  m: 's'
+}
+
+export default observer(themed('Tag', Tag))
+
+export const _PropsJsonSchema = {/* TagProps */}
+
+export interface TagProps extends Omit<DivProps, 'variant'> {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles applied to the label text */
+  textStyle?: StyleProp<TextStyle>
+  /** Tag content */
+  children?: ReactNode
+  /** Tag color name @default 'primary' */
+  color?: string
+  /** Tag appearance variant @default 'flat' */
+  variant?: 'flat' | 'outlined' | 'outlined-bg'
+  /** Tag size preset @default 'm' */
+  size?: 's' | 'm'
+  /** Icon displayed on the left side */
+  icon?: object | (() => any)
+  /** Custom styles applied to the left icon */
+  iconStyle?: StyleProp<TextStyle>
+  /** Icon displayed on the right side */
+  secondaryIcon?: object | (() => any)
+  /** Custom styles applied to the right icon */
+  secondaryIconStyle?: StyleProp<TextStyle>
+  /** Disable interactions and apply disabled styles */
+  disabled?: boolean
+  /** Custom style for hover state */
+  hoverStyle?: StyleProp<ViewStyle>
+  /** Custom style for active state */
+  activeStyle?: StyleProp<ViewStyle>
+  /** Shape of the tag corners @default 'circle' */
+  shape?: 'circle' | 'rounded'
+  /** Handler for tag press */
+  onPress?: (event: GestureResponderEvent) => void
+  /** Handler for left icon press */
+  onIconPress?: (event: GestureResponderEvent) => void
+  /** Handler for right icon press */
+  onSecondaryIconPress?: (event: GestureResponderEvent) => void
+}
+
+function Tag ({
+  style,
+  textStyle,
+  children,
+  color = Colors.primary,
+  variant = 'flat',
+  size = 'm',
+  icon,
+  iconStyle,
+  secondaryIcon,
+  secondaryIconStyle,
+  disabled,
+  hoverStyle,
+  activeStyle,
+  onPress,
+  onIconPress,
+  onSecondaryIconPress,
+  shape = 'circle',
+  ...props
+}: TagProps): ReactNode {
+  const getColor = useColors()
+
+  if (!getColor(color)) {
+    console.error(
+      'Tag component: Color for color property is incorrect. ' +
+      'Use colors from Colors'
+    )
+  }
+
+  const isFlat = variant === 'flat'
+  const _color = getColor(color) ?? color
+  const rootStyle: StyleProp<ViewStyle> = {}
+  let extraHoverStyle
+  let extraActiveStyle
+
+  textStyle = StyleSheet.flatten([
+    { color: isFlat ? getFlatTextColor() : _color },
+    textStyle
+  ]) as StyleProp<TextStyle>
+  iconStyle = StyleSheet.flatten([
+    { color: isFlat ? getFlatTextColor() : _color },
+    iconStyle
+  ]) as StyleProp<TextStyle>
+  secondaryIconStyle = StyleSheet.flatten([
+    { color: isFlat ? getFlatTextColor() : _color },
+    secondaryIconStyle
+  ]) as StyleProp<TextStyle>
+
+  switch (variant) {
+    case 'flat':
+      rootStyle.backgroundColor = _color
+      break
+    case 'outlined':
+      rootStyle.borderColor = colorToRGBA(_color, 0.5)
+      extraHoverStyle = { backgroundColor: colorToRGBA(_color, 0.05) }
+      extraActiveStyle = { backgroundColor: colorToRGBA(_color, 0.25) }
+      break
+    case 'outlined-bg':
+      rootStyle.borderColor = _color
+      rootStyle.backgroundColor = colorToRGBA(_color, 0.15)
+      extraHoverStyle = { backgroundColor: colorToRGBA(_color, 0.05) }
+      extraActiveStyle = { backgroundColor: colorToRGBA(_color, 0.25) }
+      break
+  }
+
+  function getFlatTextColor () {
+    return getColor(`text-on-${color}`) ?? getColor('text-on-color')
+  }
+
+  return pug`
+    Div.root(
+      style=[rootStyle, style]
+      styleName=[
+        variant,
+        size,
+        { disabled }
+      ]
+      variant='highlight'
+      hoverStyle=extraHoverStyle ? [extraHoverStyle, hoverStyle] : hoverStyle
+      activeStyle=extraActiveStyle ? [extraActiveStyle, activeStyle] : activeStyle
+      disabled=disabled
+      onPress=onPress
+      shape=shape
+      ...props
+    )
+      if icon
+        Div.iconWrapper.left(
+          styleName=[size]
+          onPress=onIconPress
+        )
+          Icon(
+            style=iconStyle
+            icon=icon
+            size=ICON_SIZES[size]
+          )
+
+      //- workaround when we interpolate variable into component
+      //- const value = 0
+      //- Tag= value
+      if children != null
+        Span.label(
+          style=[textStyle]
+          styleName=[size]
+        )= children
+
+      if secondaryIcon
+        Div.iconWrapper.right(
+          styleName=[size]
+          onPress=onSecondaryIconPress
+        )
+          Icon.icon(
+            style=secondaryIconStyle
+            styleName=[variant, size]
+            icon=secondaryIcon
+            size=ICON_SIZES[size]
+          )
+  `
+}

package/package.json

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