@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.4

package/lib/components/Primitives/Block/Block.tsx

@@ -0,0 +1,460 @@
+import React, { type JSX, forwardRef } from 'react'
+import styled, { css, type CSSObject } from 'styled-components'
+
+type SpacingValue = string | number
+
+type StateStyles = {
+    _hover?: StyledBlockProps
+    _focus?: StyledBlockProps
+    _active?: StyledBlockProps
+    _disabled?: StyledBlockProps
+    _visited?: StyledBlockProps
+    _focusVisible?: StyledBlockProps
+}
+
+type StyledBlockProps = StateStyles & {
+    color?: CSSObject['color']
+
+    // Positioning
+    position?: CSSObject['position']
+    inset?: CSSObject['inset']
+    top?: CSSObject['top']
+    right?: CSSObject['right']
+    bottom?: CSSObject['bottom']
+    left?: CSSObject['left']
+    zIndex?: CSSObject['zIndex']
+    pointerEvents?: CSSObject['pointerEvents']
+    opacity?: CSSObject['opacity']
+
+    // Padding
+    padding?: SpacingValue
+    paddingTop?: SpacingValue
+    paddingBottom?: SpacingValue
+    paddingLeft?: SpacingValue
+    paddingRight?: SpacingValue
+    paddingX?: SpacingValue
+    paddingY?: SpacingValue
+
+    // Margin
+    margin?: SpacingValue
+    marginTop?: SpacingValue
+    marginBottom?: SpacingValue
+    marginLeft?: SpacingValue
+    marginRight?: SpacingValue
+    marginX?: SpacingValue
+    marginY?: SpacingValue
+
+    // Layout / Flexbox
+    display?: CSSObject['display']
+    flexDirection?: CSSObject['flexDirection']
+    justifyContent?: CSSObject['justifyContent']
+    alignItems?: CSSObject['alignItems']
+    flexWrap?: CSSObject['flexWrap']
+    flexGrow?: CSSObject['flexGrow']
+    flexShrink?: CSSObject['flexShrink']
+    flexBasis?: CSSObject['flexBasis']
+    gap?: CSSObject['gap']
+    rowGap?: CSSObject['rowGap']
+    columnGap?: CSSObject['columnGap']
+    alignContent?: CSSObject['alignContent']
+    alignSelf?: CSSObject['alignSelf']
+    justifySelf?: CSSObject['justifySelf']
+
+    // Border Radius
+    borderRadius?: CSSObject['borderRadius']
+    borderTopLeftRadius?: CSSObject['borderTopLeftRadius']
+    borderTopRightRadius?: CSSObject['borderTopRightRadius']
+    borderBottomLeftRadius?: CSSObject['borderBottomLeftRadius']
+    borderBottomRightRadius?: CSSObject['borderBottomRightRadius']
+
+    // Outline
+    outline?: CSSObject['outline']
+    outlineColor?: CSSObject['outlineColor']
+    outlineWidth?: CSSObject['outlineWidth']
+    outlineStyle?: CSSObject['outlineStyle']
+    outlineOffset?: CSSObject['outlineOffset']
+
+    // Sizing
+    width?: CSSObject['width']
+    height?: CSSObject['height']
+    minWidth?: CSSObject['minWidth']
+    minHeight?: CSSObject['minHeight']
+    maxWidth?: CSSObject['maxWidth']
+    maxHeight?: CSSObject['maxHeight']
+    size?: SpacingValue
+
+    // Background
+    backgroundColor?: CSSObject['backgroundColor']
+    backgroundImage?: CSSObject['backgroundImage']
+    backgroundSize?: CSSObject['backgroundSize']
+
+    // Border
+    border?: CSSObject['border']
+    borderTop?: CSSObject['borderTop']
+    borderBottom?: CSSObject['borderBottom']
+    borderLeft?: CSSObject['borderLeft']
+    borderRight?: CSSObject['borderRight']
+    boxShadow?: CSSObject['boxShadow']
+
+    // Overflow
+    overflow?: CSSObject['overflow']
+    overflowX?: CSSObject['overflowX']
+    overflowY?: CSSObject['overflowY']
+    whiteSpace?: CSSObject['whiteSpace']
+
+    // Shortcuts
+    contentCentered?: boolean
+
+    // Cursor
+    cursor?: CSSObject['cursor']
+
+    //font
+    fontSize?: CSSObject['fontSize']
+    fontWeight?: CSSObject['fontWeight']
+    lineHeight?: CSSObject['lineHeight']
+    letterSpacing?: CSSObject['letterSpacing']
+    textAlign?: CSSObject['textAlign']
+    textTransform?: CSSObject['textTransform']
+    textOverflow?: CSSObject['textOverflow']
+
+    userSelect?: CSSObject['userSelect']
+
+    // Transform
+    transform?: CSSObject['transform']
+    willChange?: CSSObject['willChange']
+    transformOrigin?: CSSObject['transformOrigin']
+    backfaceVisibility?: CSSObject['backfaceVisibility']
+    transition?: CSSObject['transition']
+    transitionDuration?: CSSObject['transitionDuration']
+    transitionTimingFunction?: CSSObject['transitionTimingFunction']
+    transitionDelay?: CSSObject['transitionDelay']
+}
+
+const blockedProps = [
+    // All base props
+    'color',
+    'padding',
+    'paddingTop',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingRight',
+    'paddingX',
+    'paddingY',
+    'margin',
+    'marginTop',
+    'marginBottom',
+    'marginLeft',
+    'marginRight',
+    'marginX',
+    'marginY',
+    'display',
+    'flexDirection',
+    'justifyContent',
+    'alignItems',
+    'flexWrap',
+    'flexGrow',
+    'flexShrink',
+    'flexBasis',
+    'gap',
+    'rowGap',
+    'columnGap',
+    'alignContent',
+    'alignSelf',
+    'justifySelf',
+    'borderRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'width',
+    'height',
+    'minWidth',
+    'minHeight',
+    'maxWidth',
+    'maxHeight',
+    'size',
+    'contentCentered',
+    'backgroundColor',
+    'backgroundImage',
+    'backgroundSize',
+    'border',
+    'outline',
+    'borderTop',
+    'borderBottom',
+    'borderLeft',
+    'borderRight',
+    'boxShadow',
+    'cursor',
+    'overflow',
+    'overflowX',
+    'overflowY',
+    'whiteSpace',
+    'transition',
+    // Positioning
+    'position',
+    'inset',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'zIndex',
+    'pointerEvents',
+    'opacity',
+    // Pseudo states
+    '_hover',
+    '_focus',
+    '_active',
+    '_disabled',
+    '_visited',
+    '_focusVisible',
+
+    //font
+    'fontSize',
+    'fontWeight',
+    'lineHeight',
+    'letterSpacing',
+    'textAlign',
+    'textTransform',
+    'userSelect',
+
+    'transform',
+    'willChange',
+    'transformOrigin',
+    'backfaceVisibility',
+    'transition',
+    'transitionDuration',
+    'transitionTimingFunction',
+    'transitionDelay',
+]
+
+const shouldForwardProp = (prop: string) => !blockedProps.includes(prop)
+
+const getStyles = (props: StyledBlockProps): CSSObject => {
+    const styles: CSSObject = {}
+
+    if (props.color !== undefined) styles.color = props.color
+
+    if (props.position !== undefined) styles.position = props.position
+    if (props.inset !== undefined) styles.inset = props.inset
+    if (props.top !== undefined) styles.top = props.top
+    if (props.right !== undefined) styles.right = props.right
+    if (props.bottom !== undefined) styles.bottom = props.bottom
+    if (props.left !== undefined) styles.left = props.left
+    if (props.zIndex !== undefined) styles.zIndex = props.zIndex
+    if (props.pointerEvents !== undefined)
+        styles.pointerEvents = props.pointerEvents
+    if (props.opacity !== undefined) styles.opacity = props.opacity
+
+    if (props.contentCentered) {
+        styles.display = props.display ?? 'flex'
+        styles.justifyContent = props.justifyContent ?? 'center'
+        styles.alignItems = props.alignItems ?? 'center'
+    } else {
+        if (props.display !== undefined) styles.display = props.display
+        if (props.justifyContent !== undefined)
+            styles.justifyContent = props.justifyContent
+        if (props.alignItems !== undefined) styles.alignItems = props.alignItems
+    }
+
+    if (props.size !== undefined) {
+        styles.width = props.size
+        styles.height = props.size
+    } else {
+        if (props.width !== undefined) styles.width = props.width
+        if (props.height !== undefined) styles.height = props.height
+    }
+
+    if (props.padding !== undefined) styles.padding = props.padding
+    if (props.paddingTop !== undefined) styles.paddingTop = props.paddingTop
+    if (props.paddingBottom !== undefined)
+        styles.paddingBottom = props.paddingBottom
+    if (props.paddingLeft !== undefined) styles.paddingLeft = props.paddingLeft
+    if (props.paddingRight !== undefined)
+        styles.paddingRight = props.paddingRight
+    if (props.paddingX !== undefined) {
+        styles.paddingLeft = props.paddingX
+        styles.paddingRight = props.paddingX
+    }
+    if (props.paddingY !== undefined) {
+        styles.paddingTop = props.paddingY
+        styles.paddingBottom = props.paddingY
+    }
+
+    if (props.margin !== undefined) styles.margin = props.margin
+    if (props.marginTop !== undefined) styles.marginTop = props.marginTop
+    if (props.marginBottom !== undefined)
+        styles.marginBottom = props.marginBottom
+    if (props.marginLeft !== undefined) styles.marginLeft = props.marginLeft
+    if (props.marginRight !== undefined) styles.marginRight = props.marginRight
+    if (props.marginX !== undefined) {
+        styles.marginLeft = props.marginX
+        styles.marginRight = props.marginX
+    }
+    if (props.marginY !== undefined) {
+        styles.marginTop = props.marginY
+        styles.marginBottom = props.marginY
+    }
+
+    if (props.flexDirection !== undefined)
+        styles.flexDirection = props.flexDirection
+    if (props.flexWrap !== undefined) styles.flexWrap = props.flexWrap
+    if (props.flexGrow !== undefined) styles.flexGrow = props.flexGrow
+    if (props.flexShrink !== undefined) styles.flexShrink = props.flexShrink
+    if (props.flexBasis !== undefined) styles.flexBasis = props.flexBasis
+    if (props.gap !== undefined) styles.gap = props.gap
+    if (props.rowGap !== undefined) styles.rowGap = props.rowGap
+    if (props.columnGap !== undefined) styles.columnGap = props.columnGap
+    if (props.alignContent !== undefined)
+        styles.alignContent = props.alignContent
+    if (props.alignSelf !== undefined) styles.alignSelf = props.alignSelf
+    if (props.justifySelf !== undefined) styles.justifySelf = props.justifySelf
+
+    if (props.borderRadius !== undefined)
+        styles.borderRadius = props.borderRadius
+    if (props.borderTopLeftRadius !== undefined)
+        styles.borderTopLeftRadius = props.borderTopLeftRadius
+    if (props.borderTopRightRadius !== undefined)
+        styles.borderTopRightRadius = props.borderTopRightRadius
+    if (props.borderBottomLeftRadius !== undefined)
+        styles.borderBottomLeftRadius = props.borderBottomLeftRadius
+    if (props.borderBottomRightRadius !== undefined)
+        styles.borderBottomRightRadius = props.borderBottomRightRadius
+
+    if (props.minWidth !== undefined) styles.minWidth = props.minWidth
+    if (props.minHeight !== undefined) styles.minHeight = props.minHeight
+    if (props.maxWidth !== undefined) styles.maxWidth = props.maxWidth
+    if (props.maxHeight !== undefined) styles.maxHeight = props.maxHeight
+
+    if (props.backgroundColor !== undefined)
+        styles.backgroundColor = props.backgroundColor
+    if (props.backgroundImage !== undefined)
+        styles.backgroundImage = props.backgroundImage
+    if (props.backgroundSize !== undefined)
+        styles.backgroundSize = props.backgroundSize
+
+    if (props.border !== undefined) styles.border = props.border
+    if (props.borderTop !== undefined) styles.borderTop = props.borderTop
+    if (props.borderBottom !== undefined)
+        styles.borderBottom = props.borderBottom
+    if (props.borderLeft !== undefined) styles.borderLeft = props.borderLeft
+    if (props.borderRight !== undefined) styles.borderRight = props.borderRight
+    if (props.boxShadow !== undefined) styles.boxShadow = props.boxShadow
+
+    if (props.outline !== undefined) styles.outline = props.outline
+    if (props.outlineColor !== undefined)
+        styles.outlineColor = props.outlineColor
+    if (props.outlineWidth !== undefined)
+        styles.outlineWidth = props.outlineWidth
+    if (props.outlineStyle !== undefined)
+        styles.outlineStyle = props.outlineStyle
+    if (props.outlineOffset !== undefined)
+        styles.outlineOffset = props.outlineOffset
+
+    if (props.overflow !== undefined) styles.overflow = props.overflow
+    if (props.overflowX !== undefined) styles.overflowX = props.overflowX
+    if (props.overflowY !== undefined) styles.overflowY = props.overflowY
+    if (props.whiteSpace !== undefined) styles.whiteSpace = props.whiteSpace
+    if (props.transition !== undefined) styles.transition = props.transition
+
+    if (props.transition !== undefined) styles.transition = props.transition
+
+    if (props.cursor !== undefined) styles.cursor = props.cursor
+
+    if (props.fontSize !== undefined) styles.fontSize = props.fontSize
+    if (props.fontWeight !== undefined) styles.fontWeight = props.fontWeight
+    if (props.lineHeight !== undefined) styles.lineHeight = props.lineHeight
+    if (props.letterSpacing !== undefined)
+        styles.letterSpacing = props.letterSpacing
+    if (props.textAlign !== undefined) styles.textAlign = props.textAlign
+    if (props.textTransform !== undefined)
+        styles.textTransform = props.textTransform
+    if (props.textOverflow !== undefined)
+        styles.textOverflow = props.textOverflow
+    if (props.userSelect !== undefined) styles.userSelect = props.userSelect
+    if (props.transform !== undefined) styles.transform = props.transform
+    if (props.willChange !== undefined) styles.willChange = props.willChange
+    if (props.transformOrigin !== undefined)
+        styles.transformOrigin = props.transformOrigin
+    if (props.backfaceVisibility !== undefined)
+        styles.backfaceVisibility = props.backfaceVisibility
+    if (props.transition !== undefined) styles.transition = props.transition
+    if (props.transitionDuration !== undefined)
+        styles.transitionDuration = props.transitionDuration
+    if (props.transitionTimingFunction !== undefined)
+        styles.transitionTimingFunction = props.transitionTimingFunction
+    if (props.transitionDelay !== undefined)
+        styles.transitionDelay = props.transitionDelay
+    return styles
+}
+
+const stateToSelector: Record<keyof StateStyles, string> = {
+    _hover: '&:hover',
+    _focus: '&:focus',
+    _active: '&:active',
+    _disabled: '&:disabled',
+    _visited: '&:visited',
+    _focusVisible: '&:focus-visible',
+}
+
+const StyledBlock = styled.div.withConfig({
+    shouldForwardProp,
+})<StyledBlockProps>((props) => {
+    const base = getStyles(props)
+
+    const stateStyles = Object.entries(stateToSelector).reduce(
+        (acc, [key, selector]) => {
+            const stateProps = props[key as keyof StateStyles]
+            if (stateProps) {
+                acc[selector] = getStyles(stateProps)
+            }
+            return acc
+        },
+        {} as CSSObject
+    )
+
+    return css({ ...base, ...stateStyles })
+})
+
+type SemanticTagType = keyof Pick<
+    JSX.IntrinsicElements,
+    | 'div'
+    | 'section'
+    | 'article'
+    | 'header'
+    | 'footer'
+    | 'main'
+    | 'span'
+    | 'nav'
+    | 'hr'
+    | 'label'
+    | 'button'
+>
+
+export type BlockProps = StyledBlockProps &
+    Omit<React.HTMLAttributes<HTMLElement>, 'as' | 'color'> & {
+        children?: React.ReactNode
+        as?: SemanticTagType
+    }
+
+/**
+ * Block Component
+ * @description
+ * The Block component is a primitive component that renders a styled div element.
+ * It is used to create consistent spacing and layout patterns across the application.
+ *
+ * @todo
+ * - Add support for focus-visible outline
+ */
+const Block = forwardRef<HTMLDivElement, BlockProps>(
+    ({ children, as, ...rest }, ref) => {
+        return (
+            <StyledBlock ref={ref} {...rest} as={as}>
+                {children}
+            </StyledBlock>
+        )
+    }
+)
+
+Block.displayName = 'Block'
+
+export default Block

package/lib/components/Primitives/Group/Group.tsx

@@ -0,0 +1,93 @@
+import React, { forwardRef, Children, ReactElement } from 'react'
+import Block from '../Block/Block'
+import type { GroupProps } from './types'
+import { GroupOrientation } from './types'
+import { getGroupPosition, getGroupGap } from './utils'
+const Group = forwardRef<HTMLDivElement, GroupProps>(
+    (
+        {
+            children,
+            stacked = false,
+            orientation = GroupOrientation.HORIZONTAL,
+            gap,
+            alignItems = 'stretch',
+            justifyContent,
+            flexWrap = 'nowrap',
+            role = 'group',
+            'aria-label': ariaLabel,
+            positionProp = 'groupPosition',
+            ...restProps
+        },
+        ref
+    ) => {
+        const totalChildren = Children.count(children)
+        const groupGap = getGroupGap(stacked, gap, orientation)
+        const flexDirection =
+            orientation === GroupOrientation.VERTICAL ? 'column' : 'row'
+
+        if (!stacked) {
+            return (
+                <Block
+                    ref={ref}
+                    display="flex"
+                    flexDirection={flexDirection}
+                    alignItems={alignItems}
+                    justifyContent={justifyContent}
+                    flexWrap={flexWrap}
+                    gap={groupGap}
+                    role={role}
+                    aria-label={ariaLabel}
+                    data-group="true"
+                    data-group-stacked="false"
+                    data-group-orientation={orientation}
+                    data-group-count={totalChildren}
+                    {...restProps}
+                >
+                    {children}
+                </Block>
+            )
+        }
+
+        return (
+            <Block
+                ref={ref}
+                display="flex"
+                flexDirection={flexDirection}
+                alignItems={alignItems}
+                justifyContent={justifyContent}
+                flexWrap={flexWrap}
+                gap={groupGap}
+                role={role}
+                aria-label={ariaLabel}
+                data-group="true"
+                data-group-stacked="true"
+                data-group-orientation={orientation}
+                data-group-count={totalChildren}
+                {...restProps}
+            >
+                {Children.map(children, (child, index) => {
+                    if (!React.isValidElement(child)) return child
+
+                    const position = getGroupPosition(
+                        index,
+                        totalChildren,
+                        orientation
+                    )
+
+                    return React.cloneElement(
+                        child as ReactElement<Record<string, unknown>>,
+                        {
+                            ...(child.props ?? {}),
+                            key: child.key ?? index,
+                            [positionProp]: position,
+                        }
+                    )
+                })}
+            </Block>
+        )
+    }
+)
+
+Group.displayName = 'Group'
+
+export default Group

package/lib/components/Primitives/Group/index.ts

@@ -0,0 +1,3 @@
+export { default as Group } from './Group'
+export type { GroupProps, GroupPosition, GroupOrientation } from './types'
+export { getGroupPosition, getGroupGap, getPositionPropName } from './utils'

package/lib/components/Primitives/Group/types.ts

@@ -0,0 +1,99 @@
+import type { ReactElement } from 'react'
+
+/**
+ * Position of an element within a group
+ */
+export enum GroupPosition {
+    LEFT = 'left',
+    CENTER = 'center',
+    RIGHT = 'right',
+    TOP = 'top',
+    MIDDLE = 'middle',
+    BOTTOM = 'bottom',
+}
+
+/**
+ * Orientation of the group layout
+ */
+export enum GroupOrientation {
+    HORIZONTAL = 'horizontal',
+    VERTICAL = 'vertical',
+}
+
+/**
+ * Safe HTML div attributes for restProps
+ */
+type SafeDivAttributes = Omit<React.HTMLAttributes<HTMLDivElement>, 'display'>
+
+/**
+ * Props for the Group component
+ */
+export interface GroupProps extends Omit<SafeDivAttributes, 'aria-label'> {
+    /**
+     * Child elements to be grouped
+     */
+    children: ReactElement | ReactElement[]
+
+    /**
+     * Whether elements should be stacked (no gap, connected borders)
+     * When true, position props are injected into children
+     * @default false
+     */
+    stacked?: boolean
+
+    /**
+     * Layout orientation
+     * @default 'horizontal'
+     */
+    orientation?: GroupOrientation
+
+    /**
+     * Gap between elements when not stacked
+     * Uses foundation tokens if not provided
+     */
+    gap?: string | number
+
+    /**
+     * Alignment of items along the cross axis
+     * @default 'stretch'
+     */
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+
+    /**
+     * Alignment of items along the main axis
+     */
+    justifyContent?:
+        | 'flex-start'
+        | 'flex-end'
+        | 'center'
+        | 'space-between'
+        | 'space-around'
+        | 'space-evenly'
+
+    /**
+     * Whether items should wrap
+     * @default 'nowrap'
+     */
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'
+
+    /**
+     * ARIA role for the group
+     * @default 'group'
+     */
+    role?: string
+
+    /**
+     * Accessible label for the group
+     */
+    'aria-label'?: string
+
+    /**
+     * Name of the prop to inject into children for position
+     * Different components may use different prop names:
+     * - ButtonV2: 'buttonGroupPosition'
+     * - Tag: 'splitTagPosition'
+     * - FormField: 'fieldGroupPosition'
+     * @default 'groupPosition'
+     */
+    positionProp?: string
+}