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

package/src/components/avatar.tsx

@@ -1,126 +0,0 @@
-'use client'
-
-import React, { useEffect, useRef, forwardRef } from 'react'
-import fitty from 'fitty'
-import type { FittyInstance } from 'fitty'
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
-import { type VariantProps, cva } from 'class-variance-authority'
-import { cn } from '../helpers/index.js'
-
-// 定义 avatar 的样式变体
-const avatarVariants = cva('tracking transition-colors', {
-  variants: {
-    size: {
-      small: 'size-6', // 小
-      medium: 'size-12', // 中
-      large: 'size-[72px]', // 大
-    },
-  },
-})
-
-type AvatarProps = {
-  /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
-  asChild?: boolean
-  /** 类名*/
-  className?: string
-  /** 样式*/
-  style?: React.CSSProperties
-  /** 点击事件*/
-  onClick?: Function
-  /** 文本自适应*/
-  isAdaptation?: boolean
-  /** 文本自适应最小字体, 开启时生效*/
-  minSize?: number
-  /** 文本自适应最大字体, 开启时生效*/
-  maxSize?: number
-  /** 文本自适应的类, 开启时生效*/
-  textClassName?: string
-} & VariantProps<typeof avatarVariants> &
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
-
-const Avatar = forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
-  (
-    {
-      className,
-      textClassName,
-      isAdaptation = false,
-      minSize = 4,
-      maxSize = 16,
-      children,
-      style,
-      size = 'small',
-      onClick,
-      ...props
-    },
-    ref
-  ) => {
-    const textRef = useRef<HTMLDivElement>(null)
-    // 点击事件
-    const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-      onClick?.(e)
-    }
-
-    useEffect(() => {
-      let fittyInstance: FittyInstance
-      if (isAdaptation && textRef.current) {
-        fittyInstance = fitty?.(textRef.current, {
-          minSize,
-          maxSize,
-        })
-      }
-      return () => fittyInstance?.unsubscribe?.()
-    }, [])
-
-    return (
-      <AvatarPrimitive.Root
-        ref={ref}
-        onClick={handleClick}
-        className={cn(
-          avatarVariants({ size }),
-          'bg-bg-2 relative flex shrink-0 overflow-hidden rounded-full',
-          className
-        )}
-        {...(style ? { style: style } : null)}
-        {...props}
-      >
-        {isAdaptation ? (
-          <span className="bg-muted flex size-full items-center justify-center rounded-full">
-            <span ref={textRef} className={cn('px-2', textClassName)}>
-              {children}
-            </span>
-          </span>
-        ) : (
-          children
-        )}
-      </AvatarPrimitive.Root>
-    )
-  }
-)
-
-Avatar.displayName = 'Avatar'
-
-const AvatarImage = forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square size-full', className)} {...props} />
-))
-
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => {
-  return (
-    <AvatarPrimitive.Fallback
-      ref={ref}
-      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
-      {...props}
-    />
-  )
-})
-
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarImage, AvatarFallback }

package/src/components/badge.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react'
-import { type VariantProps, cva } from 'class-variance-authority'
-
-import { cn } from '../helpers/index.js'
-
-const badgeVariants = cva(
-  'inline-flex justify-center text-btn-primary border-btn-primary items-center font-medium rounded-[20px] border px-[10px] py-1 text-xs transition-colors focus:outline-none',
-  {
-    variants: {
-      size: {
-        sm: 'text-xs',
-        base: 'text-sm',
-      }
-    },
-    defaultVariants: {
-      size: 'base',
-    },
-  }
-)
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> { }
-
-function Badge({ className, size, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ size }), className)} {...props} />
-}
-
-export default Badge

package/src/components/button.tsx

@@ -1,183 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-import { type VariantProps, cva } from 'class-variance-authority'
-import Spinner from '../icons/spinner.js'
-import { cn } from '../helpers/index.js'
-
-/**
- * Button Variants
- */
-const buttonVariants = cva(
-  'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',
-  {
-    variants: {
-      variant: {
-        nature: 'border border-solid border-black',
-        primary: 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active',
-        secondary:
-          'bg-btn-secondary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary border border-solid',
-        link: 'text-primary underline-offset-4 hover:underline',
-        ghost: 'hover:bg-btn-primary hover:text-btn-primary-foreground',
-      },
-      size: {
-        sm: 'px-3 py-2 text-[12px]  leading-tight',
-        base: 'px-5 pt-[11px] pb-[10px] text-[14px]  leading-tight',
-        lg: 'px-7 pt-[15px] pb-[14px] text-[16px]  leading-tight',
-        icon: 'size-10 rounded-full  leading-tight',
-      },
-      /** hover 状态下的动画效果,需要注意不同variant 下的效果 */
-      hoverEffect: {
-        none: '',
-        slide: '',
-      },
-      state: {
-        default: '',
-        disabled: '',
-        loading: '',
-      },
-      theme: {
-        dark: '',
-        light: '',
-      },
-    },
-    compoundVariants: [
-      {
-        variant: 'primary',
-        hoverEffect: 'slide',
-        class:
-          'z-[1] before:-z-[1] before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative overflow-hidden before:absolute before:inset-y-0  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0',
-      },
-      {
-        variant: 'secondary',
-        hoverEffect: 'slide',
-        class:
-          'z-[1] before:-z-[1] before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative overflow-hidden before:absolute before:inset-y-0  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0',
-      },
-      {
-        variant: 'primary',
-        state: 'loading',
-        class: 'bg-btn-primary',
-      },
-      {
-        variant: 'secondary',
-        state: 'loading',
-        class: 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground',
-      },
-      {
-        variant: 'primary',
-        state: 'disabled',
-        class: 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground',
-      },
-      {
-        variant: 'secondary',
-        state: 'disabled',
-        class: 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground',
-      },
-      {
-        variant: 'nature',
-        theme: 'dark',
-        class: 'bg-transparent text-black',
-      },
-      {
-        variant: 'nature',
-        theme: 'light',
-        class: 'bg-black text-white',
-      },
-    ],
-    defaultVariants: {
-      variant: 'primary',
-      size: 'base',
-      hoverEffect: 'none',
-      state: 'default',
-      theme: 'light',
-    },
-  }
-)
-
-const loadingSvgVariants = cva('', {
-  variants: {
-    variant: {
-      nature: 'stroke-btn-primary-foreground',
-      primary: 'stroke-btn-primary-foreground',
-      secondary: 'stroke-btn-secondary-foreground',
-      link: 'stroke-primary',
-      ghost: 'stroke-primary',
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-  },
-})
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
-  /** 设置按钮载入状态  */
-  loading?: boolean
-  /** 设置按钮失效状态  */
-  disabled?: boolean
-  /** 定义自组件作为父组件的类型， 详细使用方式请参考radix-ui */
-  asChild?: boolean
-  /** 自定义loading  */
-  spinner?: React.ReactNode
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      asChild = false,
-      size = 'base',
-      children,
-      variant,
-      theme = 'light',
-      hoverEffect = 'none',
-      className,
-      disabled = false,
-      loading = false,
-      spinner,
-      ...props
-    }: ButtonProps,
-    ref
-  ) => {
-    const Comp = asChild ? Slot : 'button'
-    const isInactive = disabled || loading
-    const state = loading ? 'loading' : disabled ? 'disabled' : 'default'
-
-    return (
-      <Comp
-        disabled={isInactive}
-        className={cn(buttonVariants({ variant, size, hoverEffect, state, theme }), className)}
-        ref={ref}
-        {...props}
-      >
-        {loading ? (
-          <>
-            <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>
-              {children}
-            </span>
-            <span className="absolute">
-              {spinner ? (
-                spinner
-              ) : (
-                <Spinner
-                  className={loadingSvgVariants({
-                    variant,
-                  })}
-                />
-              )}
-            </span>
-            <VisuallyHidden>{children}</VisuallyHidden>
-          </>
-        ) : (
-          children
-        )}
-      </Comp>
-    )
-  }
-)
-
-Button.displayName = 'Button'
-export default Button

package/src/components/card.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '../helpers/index.js'
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)} {...props} />
-))
-Card.displayName = 'Card'
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('min-xl:px-6 min-xl:pt-[32px] flex flex-col space-y-1.5 px-4 pt-6', className)}
-      {...props}
-    />
-  )
-)
-CardHeader.displayName = 'CardHeader'
-
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
-  )
-)
-CardTitle.displayName = 'CardTitle'
-
-const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
-  )
-)
-CardDescription.displayName = 'CardDescription'
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn('min-xl:p-6 p-4 pt-0', className)} {...props} />
-)
-CardContent.displayName = 'CardContent'
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('min-xl:px-6 min-xl:pb-[32px] flex items-center px-4 pb-6 pt-0', className)}
-      {...props}
-    />
-  )
-)
-CardFooter.displayName = 'CardFooter'
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }