@anker-in/headless-ui 0.0.27-alpha.0 → 0.0.27-alpha.2

package/src/components/input-number.tsx

@@ -1,216 +0,0 @@
-'use client'
-import { cn } from '../helpers/index.js'
-import { Slot } from '@radix-ui/react-slot'
-import { PlusIcon, MinusIcon } from '@radix-ui/react-icons'
-import React, { useState, useEffect, forwardRef } from 'react'
-import type { ChangeEvent, KeyboardEvent, FocusEvent } from 'react'
-import { type VariantProps, cva } from 'class-variance-authority'
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
-
-// 定义 InputNumber 的样式变体
-const InputNumberVariants = cva('size-full border bg-transparent text-center text-base outline-none', {
-  variants: {
-    status: {
-      default: 'border-lines-1 group-hover:border-lines-2',
-      success: 'border-lines-3 group-hover:border-lines-3',
-      warning: 'border-lines-4 group-hover:border-lines-4',
-      error: 'border-lines-5 group-hover:border-lines-5',
-    },
-    disabled: {
-      true: 'border-lines-1 group-hover:border-lines-1 text-info-quaternary cursor-not-allowed',
-    },
-  },
-})
-
-type ColorType = 'default' | 'success' | 'warning' | 'error' | null
-
-// 定义组件类型，继承 div 标签标准属性
-type InputNumberElement = React.ElementRef<'div'>
-
-type InputNumberProps = {
-  /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
-  asChild?: boolean
-  /** 类名*/
-  className?: string
-  /** 输入框下方提示文本，会根据不同的 status 呈现不同的样式*/
-  tips?: string
-  /** 文本框状态*/
-  status?: ColorType
-  /** 数字输入框的值 */
-  value?: number
-  /** 数字输入框的初始值 */
-  defaultValue?: number
-  /** 数值改变步数 */
-  step?: number
-  /** 最小值 */
-  min?: number
-  /** 最大值 */
-  max?: number
-  /** 是否禁用*/
-  disabled?: boolean
-  /** 是否只读*/
-  readonly?: boolean
-  /** 样式*/
-  style?: React.CSSProperties
-  /** 值变化时触发*/
-  onChange?: (value: number) => void
-  /** 失去焦点时触发*/
-  onBlur?: (value: number, e: FocusEvent) => void
-  /** 按下回车键时触发*/
-  onEnter?: (value: number, e: KeyboardEvent) => void
-} & VariantProps<typeof InputNumberVariants> &
-  ComponentPropsWithout<'div', RemovedProps>
-
-const InputNumber = forwardRef<InputNumberElement, InputNumberProps>(
-  (
-    {
-      value,
-      defaultValue = 0,
-      step = 1,
-      min = 0,
-      max,
-      tips,
-      style,
-      children,
-      asChild = false,
-      disabled = false,
-      readonly = false,
-      status = 'default',
-      className,
-      onChange,
-      onBlur,
-      onEnter,
-    },
-    ref
-  ) => {
-    const [inputValue, setInputValue] = useState<number | string>(defaultValue)
-
-    const Comp = asChild ? Slot : 'div'
-
-    const baseClassName = cn('border-lines-1 flex size-12 items-center justify-center border text-base', {
-      'group-hover:border-lines-2': !disabled,
-      'text-info-quaternary cursor-not-allowed': disabled,
-    })
-
-    const textColor = (type: ColorType, flag: boolean) => {
-      if (flag) return 'text-lines-1'
-      return {
-        default: 'text-lines-1',
-        success: 'text-lines-3',
-        warning: 'text-lines-4',
-        error: 'text-lines-5',
-      }[type || 'default']
-    }
-
-    const isValue = (params: string) => {
-      return params === '' || /^[0-9]+$/.test(params)
-    }
-
-    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-      if (disabled || readonly) return
-      const value = e.target.value
-      // 允许空字符串，或仅包含整数的字符串
-      if (isValue(value)) {
-        setInputValue(value)
-        if (value !== '') {
-          let newValue = Number(value)
-          if (max !== undefined && newValue > max) {
-            newValue = max
-          }
-          if (min !== undefined && newValue < min) {
-            newValue = min
-          }
-          onChange?.(newValue)
-        }
-      }
-    }
-
-    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
-      if (disabled || readonly) return
-      if (inputValue === '' || isNaN(Number(inputValue))) {
-        const newValue = min !== undefined ? min : 0
-        setInputValue(newValue)
-        onBlur?.(newValue, e)
-      } else {
-        const newValue = Number(inputValue)
-        setInputValue(newValue)
-        onBlur?.(newValue, e)
-      }
-    }
-
-    const increment = () => {
-      if (disabled || readonly) return
-      let newValue = Number(inputValue) + (step ? Math.ceil(Number(step)) : 1)
-      if (max !== undefined && newValue > max) {
-        newValue = max
-      }
-      setInputValue(newValue)
-      onChange?.(newValue)
-    }
-
-    const decrement = () => {
-      if (disabled || readonly) return
-      let newValue = Number(inputValue) - (step ? Math.ceil(Number(step)) : 1)
-      if (min !== undefined && newValue < min) {
-        newValue = min
-      }
-      setInputValue(newValue)
-      onChange?.(newValue)
-    }
-
-    const handleKeyDown = (e: any) => {
-      if (disabled || readonly) return
-      if (e.key === 'Enter') {
-        const initalValue = e.target?.value
-        onEnter?.(initalValue, e)
-      }
-    }
-
-    useEffect(() => {
-      setInputValue(value || 0)
-    }, [value])
-
-    return (
-      <Comp
-        ref={ref}
-        {...(style ? { style: style } : null)}
-        className={cn({ 'group flex items-center': !asChild }, className)}
-      >
-        {asChild ? (
-          children
-        ) : (
-          <>
-            <button onClick={increment} className={baseClassName}>
-              <PlusIcon />
-            </button>
-            <div className="relative mx-1.5 h-[52px] w-[105px]">
-              <input
-                type="text"
-                value={inputValue}
-                disabled={disabled}
-                readOnly={readonly}
-                onBlur={handleBlur}
-                onKeyDown={handleKeyDown}
-                onChange={handleInputChange}
-                className={cn(InputNumberVariants({ status, disabled }))}
-              />
-              {tips ? (
-                <span className={cn(textColor(status, disabled), 'absolute -bottom-4 left-0 w-full truncate text-xs')}>
-                  {tips}
-                </span>
-              ) : null}
-            </div>
-            <button onClick={decrement} className={baseClassName}>
-              <MinusIcon />
-            </button>
-          </>
-        )}
-      </Comp>
-    )
-  }
-)
-
-InputNumber.displayName = 'InputNumber'
-
-export default InputNumber
-export type { InputNumberProps }

package/src/components/input.tsx

@@ -1,79 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { cn } from '../helpers/index.js'
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const inputVariants = cva(
-  'border-input w-full bg-background focus-visible:outline-none flex flex-row items-center overflow-hidden rounded-md border',
-  {
-    variants: {
-      size: {
-        sm: 'h-8 text-sm',
-        base: 'h-10',
-        lg: 'h-12 text-lg',
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-    },
-  }
-)
-
-export interface InputProps extends ComponentPropsWithout<'input', 'size'>, VariantProps<typeof inputVariants> {}
-
-type InputSlotElement = React.ElementRef<'div'>
-interface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {
-  /**
-   * 插槽的位置
-   * default: right
-   */
-  side?: 'left' | 'right'
-}
-
-/**
- * InputSlot
- * 用来在 Input 组件中插入额外的内容，比如icon ，按钮
- */
-const InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, forwardedRef) => {
-  const { className, side = 'right', children, ...slotProps } = props
-
-  return (
-    <div
-      ref={forwardedRef}
-      {...slotProps}
-      className={cn('flex h-full items-center', className, {
-        '-order-1': side === 'left',
-        'order-2': side === 'right',
-      })}
-    >
-      {children}
-    </div>
-  )
-})
-
-const Input = React.forwardRef<React.ElementRef<'input'>, InputProps>(
-  ({ className, type, size, children, ...props }, ref) => {
-    if (!React.isValidElement(children)) {
-      return <input type={type} className={cn(inputVariants({ size }), 'px-3', className)} ref={ref} {...props} />
-    }
-    return (
-      <div className={cn(inputVariants({ size }), className)}>
-        <input
-          type={type}
-          className={cn(
-            'placeholder:text-muted-foreground flex size-full file:border-0 file:bg-transparent file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 px-3'
-          )}
-          ref={ref}
-          {...props}
-        />
-        {children}
-      </div>
-    )
-  }
-)
-Input.displayName = 'Input'
-InputSlot.displayName = 'InputSlot'
-
-export { Input, InputSlot }

package/src/components/link.tsx

@@ -1,99 +0,0 @@
-import React from 'react'
-import type { ReactNode } from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cn } from '../helpers/index.js'
-import { type VariantProps, cva } from 'class-variance-authority'
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
-
-// 定义 link 的样式变体
-const linkVariants = cva('tracking transition-colors', {
-  variants: {
-    size: {
-      small: 'text-xs', // 小
-      medium: 'text-sm', // 中
-      large: 'text-base', // 大
-    },
-    underline: {
-      none: 'no-underline', // 不展示
-      hover: 'hover:underline', // hover展示下划线
-      always: 'underline', // 永久展示
-    },
-    hoverColor: {
-      none: 'text-current', // 鼠标进入无变化
-      hover: 'hover:text-brand-0', // 鼠标进入改变字体颜色
-    },
-  },
-})
-// 定义组件类型，继承 a 标签标准属性
-type LinkElement = React.ElementRef<'a'>
-type LinkProps = {
-  /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
-  asChild?: boolean
-  /** 类名*/
-  className?: string
-  /** 禁用链接 */
-  disabled?: boolean
-  /** 后置图标*/
-  suffixIcon?: ReactNode
-  /** 跳转链接*/
-  href?: string
-  /** 样式*/
-  style?: React.CSSProperties
-  /** 点击事件，禁用状态无法触发*/
-  onClick?: Function
-} & VariantProps<typeof linkVariants> &
-  ComponentPropsWithout<'a', RemovedProps>
-
-const Link = React.forwardRef<LinkElement, LinkProps>(
-  (
-    {
-      children,
-      size = 'small',
-      hoverColor,
-      className,
-      asChild = false,
-      href,
-      style,
-      underline,
-      disabled = false,
-      suffixIcon,
-      onClick,
-      ...props // 这里会包含 href、target、rel 等标准 anchor 属性
-    }: LinkProps,
-    forwardedRef
-  ) => {
-    const Comp = asChild ? Slot : 'a'
-
-    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-      !disabled && onClick?.(event)
-      if (disabled || !href) {
-        event.preventDefault()
-        return
-      }
-    }
-
-    return (
-      <Comp
-        ref={forwardedRef}
-        onClick={handleClick}
-        href={disabled ? undefined : href}
-        className={cn(linkVariants({ size, underline, hoverColor }), className, {
-          'flex items-center': suffixIcon,
-          'cursor-pointer': !disabled,
-          'text-info-quaternary cursor-not-allowed': disabled,
-        })}
-        {...(style ? { style: style } : null)}
-        {...props}
-      >
-        <>
-          {children}
-          <span className="svg">{suffixIcon}</span>
-        </>
-      </Comp>
-    )
-  }
-)
-Link.displayName = 'Link'
-
-export default Link
-export type { LinkProps }

package/src/components/picture.tsx

@@ -1,100 +0,0 @@
-'use client'
-import React, { useCallback, useMemo } from 'react'
-
-const APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']
-
-const MAX_SIZE = 3960
-const FIXED_MAX_SIZE = 3980
-
-export interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-  /** picture 内部img 标签的类名 */
-  imgClassName?: string
-  /** 图片url , 支持传入不同分辨率下的图片，比如，格式 "url1 1920， url2 1080, url3 767" */
-  source?: string
-  /** 图片质量 */
-  quality?: number
-  /** 响应式图片，对应picture 下source 的max-width */
-  deviceSizes?: number[]
-}
-
-const isMatchDomain = (srcDomain: string) => {
-  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)
-}
-const idMatchFileExtensions = (fileName: string = '') => /\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)
-
-const Picture = ({
-  imgClassName = '',
-  source = '',
-  quality = 2,
-  deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],
-  className,
-  ...rest
-}: PictureProps) => {
-  const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {
-    const size = width
-    try {
-      const parsedUrl = new URL(src)
-      if (!isMatchDomain(parsedUrl.hostname)) {
-        return src
-      }
-      const fileName = parsedUrl.pathname.split('/').pop() || ''
-      if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {
-        const [name, extension] = fileName.split('.')
-        return `${parsedUrl.origin}${parsedUrl.pathname.replace(
-          fileName,
-          `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`
-        )}`
-      }
-    } catch (error) {
-      return src
-    }
-  }, [])
-
-  const sourceSrcSet = useCallback(
-    ({ srcArr, width }: { srcArr: string[][]; width: number }) => {
-      const computedWidth = width * quality
-      const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })
-      let result
-      srcArr.forEach(ele => {
-        var img = ele[0]
-        if (ele.length > 1 && parseInt(ele[1], 10) >= width) {
-          result = imgSrcSetsize({ src: img, width: computedWidth })
-        }
-      })
-      const srcset = result || def
-      return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />
-    },
-    [imgSrcSetsize, quality]
-  )
-
-  const sourceList = useMemo(() => {
-    if (typeof source !== 'string' || !source) return []
-    let srcArr
-    try {
-      srcArr = source
-        .replace(/[\r\n]/g, '')
-        .replace(/\s\s+/g, ' ')
-        .split(',')
-        .map(item => item.split(' ').filter(Boolean))
-    } catch (error) {
-      console.log(error)
-      return []
-    }
-    const sourceList = deviceSizes.map(width => {
-      return sourceSrcSet({ srcArr, width })
-    })
-
-    const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })
-
-    sourceList.push(<img key="default" src={img} className={`w-full ${imgClassName}`} {...rest} />)
-    return sourceList
-  }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])
-
-  return (
-    <picture className={`block overflow-hidden ${className}`}>
-      {sourceList}
-      {rest.children}
-    </picture>
-  )
-}
-export default Picture

package/src/components/popover.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-
-import { cn } from '../helpers/utils.js'
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent }

package/src/components/radio.tsx

@@ -1,85 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { Text } from './text.js'
-import { CheckIcon } from '@radix-ui/react-icons'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../helpers/index.js'
-
-const RadioContext = React.createContext<{ size?: 'sm' | 'base' | 'lg' }>({
-  size: 'base',
-})
-
-const radioGroupVariants = cva(
-  'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-  {
-    variants: {
-      size: {
-        sm: 'size-[14px]',
-        base: 'size-4',
-        lg: 'size-5',
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-    },
-  }
-)
-
-interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
-  /** 尺寸 */
-  size?: 'sm' | 'base' | 'lg'
-}
-
-const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(
-  ({ className, children, size, ...props }, ref) => {
-    return (
-      <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref}>
-        <RadioContext.Provider value={{ size }}>{children}</RadioContext.Provider>
-      </RadioGroupPrimitive.Root>
-    )
-  }
-)
-RadioGroup.displayName = 'RadioGroup'
-
-interface RadioGroupItemProps
-  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
-    VariantProps<typeof radioGroupVariants> {}
-
-const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(
-  ({ className, size, children, ...props }, ref) => {
-    const { size: sizeFromParent } = React.useContext(RadioContext)
-
-    const ItemRadio = (
-      <RadioGroupPrimitive.Item
-        ref={ref}
-        className={cn(
-          radioGroupVariants({
-            size: size ?? sizeFromParent,
-          }),
-          className
-        )}
-        {...props}
-      >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center text-current w-full h-full">
-          <CheckIcon />
-        </RadioGroupPrimitive.Indicator>
-      </RadioGroupPrimitive.Item>
-    )
-
-    if (children) {
-      return (
-        <Text as="label" className={cn('flex items-center gap-1', className)}>
-          {ItemRadio}
-          {children}
-        </Text>
-      )
-    }
-    return ItemRadio
-  }
-)
-RadioGroupItem.displayName = 'RadioGroupItem'
-
-export { RadioGroup, RadioGroupItem }
-export type { RadioGroupProps, RadioGroupItemProps }

package/src/components/skeleton.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react'
-import { cn } from '../helpers/index.js'
-import { Slot } from '@radix-ui/react-slot'
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
-
-type SkeletonElement = React.ElementRef<'span'>
-
-interface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {
-  /** 是否正在加载 , 默认是true*/
-  loading?: boolean
-}
-
-const Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {
-  const { children, className, loading = true, ...skeletonProps } = props
-
-  if (!loading) return children
-  const Tag = React.isValidElement(children) ? Slot : 'span'
-
-  return (
-    <Tag
-      ref={forwardedRef}
-      className={cn(
-        `bg-skeleton animate-pulse empty:block data-[inline-skeleton=true]:leading-[0] !bg-none !bg-clip-border !border-none !shadow-none 
-        !text-transparent !outline-none !select-none !cursor-default !pointer-events-none !decoration-clone
-        after:!invisible before:!invisible [&>*]:!invisible
-        `,
-        className
-      )}
-      data-inline-skeleton={React.isValidElement(children) ? undefined : true}
-      tabIndex={-1}
-      {...skeletonProps}
-    >
-      {children}
-    </Tag>
-  )
-})
-
-Skeleton.displayName = 'Skeleton'
-
-export default Skeleton
-export type { SkeletonProps }