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

package/src/components/alert.tsx

@@ -1,124 +0,0 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../helpers/index.js'
-
-const alertVariants = cva(
-  '[&>svg:first-child]:text-foreground relative w-full rounded-lg border px-4 py-3 text-sm [&>:first-child]:absolute [&>svg:first-child+div]:translate-y-[-3px] [&>svg:first-child]:left-4 [&>svg:first-child]:top-2 [&>svg:first-child~*]:pl-7',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground',
-        destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg:first-child]:text-destructive',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
-
-const Close = () => (
-  <svg
-    className="close absolute right-4 top-2 size-6 cursor-pointer !pl-0"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M15.3452 16.4762L12.1377 13.2687L8.92973 16.4767C8.61712 16.7893 8.11029 16.7891 7.79766 16.4765C7.48505 16.1638 7.4848 15.657 7.79741 15.3444L11.0054 12.1364L7.79791 8.92891C7.48503 8.61603 7.48503 8.10946 7.79765 7.79683C8.11015 7.48433 8.61688 7.48424 8.92973 7.79709L12.1372 11.0046L15.3452 7.79658C15.6577 7.48408 16.1646 7.48421 16.4772 7.79683C16.7899 8.10946 16.79 8.61641 16.4775 8.9289L13.2695 12.1369L16.477 15.3444C16.7899 15.6572 16.7898 16.1639 16.4773 16.4764C16.1647 16.789 15.6581 16.789 15.3452 16.4762L15.3452 16.4762Z"
-      fill="#1D1D1F"
-    />
-  </svg>
-)
-
-const IconMap = {
-  info: (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10.5" fill="#00BEFA" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.1249 7.13281C13.1249 6.51149 12.6213 6.00781 11.9999 6.00781C11.3786 6.00781 10.8749 6.51149 10.8749 7.13281V13.1328C10.8749 13.7541 11.3786 14.2578 11.9999 14.2578C12.6213 14.2578 13.1249 13.7541 13.1249 13.1328V7.13281ZM13.3499 16.6342C13.3499 15.8886 12.7455 15.2842 11.9999 15.2842C11.2543 15.2842 10.6499 15.8886 10.6499 16.6342C10.6499 17.3798 11.2543 17.9842 11.9999 17.9842C12.7455 17.9842 13.3499 17.3798 13.3499 16.6342Z"
-        fill="white"
-      />
-    </svg>
-  ),
-  success: (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12.5" cy="12.5" r="10.5" fill="#30D158" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18.3976 8.6772C18.0468 8.32635 17.478 8.32635 17.1271 8.6772L11.5586 14.2457L8.15843 10.8456C7.80758 10.4947 7.23874 10.4947 6.88789 10.8456C6.53704 11.1964 6.53704 11.7653 6.88789 12.1161L10.849 16.0772C10.8632 16.0914 10.8778 16.1051 10.8928 16.1182C10.9028 16.1293 10.9132 16.1402 10.9239 16.1509C11.2748 16.5018 11.8436 16.5018 12.1945 16.1509L18.3976 9.94773C18.7485 9.59688 18.7485 9.02805 18.3976 8.6772Z"
-        fill="white"
-      />
-    </svg>
-  ),
-  warning: (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10.5" fill="#FFC24D" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.1249 7.13281C13.1249 6.51149 12.6213 6.00781 11.9999 6.00781C11.3786 6.00781 10.8749 6.51149 10.8749 7.13281V13.1328C10.8749 13.7541 11.3786 14.2578 11.9999 14.2578C12.6213 14.2578 13.1249 13.7541 13.1249 13.1328V7.13281ZM13.3499 16.6342C13.3499 15.8886 12.7455 15.2842 11.9999 15.2842C11.2543 15.2842 10.6499 15.8886 10.6499 16.6342C10.6499 17.3798 11.2543 17.9842 11.9999 17.9842C12.7455 17.9842 13.3499 17.3798 13.3499 16.6342Z"
-        fill="white"
-      />
-    </svg>
-  ),
-  error: (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10.5" fill="#FF4D4D" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.1249 7.13281C13.1249 6.51149 12.6213 6.00781 11.9999 6.00781C11.3786 6.00781 10.8749 6.51149 10.8749 7.13281V13.1328C10.8749 13.7541 11.3786 14.2578 11.9999 14.2578C12.6213 14.2578 13.1249 13.7541 13.1249 13.1328V7.13281ZM13.3499 16.6342C13.3499 15.8886 12.7455 15.2842 11.9999 15.2842C11.2543 15.2842 10.6499 15.8886 10.6499 16.6342C10.6499 17.3798 11.2543 17.9842 11.9999 17.9842C12.7455 17.9842 13.3499 17.3798 13.3499 16.6342Z"
-        fill="white"
-      />
-    </svg>
-  ),
-}
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> &
-    VariantProps<typeof alertVariants> & {
-      /**
-       * 状态
-       */
-      status?: 'success' | 'error' | 'warning' | 'info'
-      /**
-       * 是否可以关闭
-       */
-      closable?: boolean
-    }
->(({ className, variant, status, closable = false, children, ...props }, ref) => {
-  const icon = status ? IconMap[status] : null
-
-  return (
-    <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props}>
-      {icon}
-      {children}
-      {closable && <Close />}
-    </div>
-  )
-})
-Alert.displayName = 'Alert'
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
-  )
-)
-AlertTitle.displayName = 'AlertTitle'
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm text-[#86868C] [&_p]:leading-relaxed', className)} {...props} />
-  )
-)
-AlertDescription.displayName = 'AlertDescription'
-
-export { Alert, AlertTitle, AlertDescription }

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 }