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

package/src/components/carousel.tsx

@@ -1,352 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import type { EmblaCarouselType } from 'embla-carousel'
-import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
-
-import { cn } from '../helpers/index.js'
-import Button from './button.js'
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  /**
-   * 是否显示导航点
-   */
-  showNavigation?: boolean
-  /**
-   * 导航点位置 default inner
-   */
-  navigationPosition?: 'inner' | 'outter'
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: 'horizontal' | 'vertical'
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-type UseDotButtonType = {
-  selectedIndex: number
-  scrollSnaps: number[]
-  onDotButtonClick: (index: number) => void
-}
-
-const useDotButton = (
-  emblaApi: EmblaCarouselType | undefined,
-  onButtonClick?: (emblaApi: EmblaCarouselType) => void
-): UseDotButtonType => {
-  const [selectedIndex, setSelectedIndex] = React.useState(0)
-  const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])
-
-  const onDotButtonClick = React.useCallback(
-    (index: number) => {
-      if (!emblaApi) return
-      emblaApi.scrollTo(index)
-      if (onButtonClick) onButtonClick(emblaApi)
-    },
-    [emblaApi, onButtonClick]
-  )
-
-  const onInit = React.useCallback((emblaApi: EmblaCarouselType) => {
-    setScrollSnaps(emblaApi.scrollSnapList())
-  }, [])
-
-  const onSelect = React.useCallback((emblaApi: EmblaCarouselType) => {
-    setSelectedIndex(emblaApi.selectedScrollSnap())
-  }, [])
-
-  React.useEffect(() => {
-    if (!emblaApi) return
-
-    onInit(emblaApi)
-    onSelect(emblaApi)
-
-    emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)
-  }, [emblaApi, onInit, onSelect])
-
-  return {
-    selectedIndex,
-    scrollSnaps,
-    onDotButtonClick,
-  }
-}
-
-type PropType = React.ComponentPropsWithRef<'button'>
-
-export const DotButton: React.FC<PropType> = props => {
-  const { children, ...restProps } = props
-
-  return (
-    <button type="button" {...restProps}>
-      {children}
-    </button>
-  )
-}
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error('useCarousel must be used within a <Carousel />')
-  }
-
-  return context
-}
-
-const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
-  (
-    {
-      orientation = 'horizontal',
-      showNavigation = false,
-      navigationPosition = 'inner',
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === 'horizontal' ? 'x' : 'y',
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(api)
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
-      }
-
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'ArrowLeft') {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === 'ArrowRight') {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
-
-      setApi(api)
-    }, [api, setApi])
-
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
-      onSelect(api)
-      api.on('reInit', onSelect)
-      api.on('select', onSelect)
-
-      return () => {
-        api?.off('select', onSelect)
-      }
-    }, [api, onSelect])
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn('relative', className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-          {showNavigation && (
-            <div
-              className={cn('absolute  left-1/2 mx-auto flex -translate-x-1/2 justify-center gap-[8px]', {
-                'min-md:bottom-[40px] bottom-[24px]': navigationPosition === 'inner',
-                'min-md:-bottom-[40px] -bottom-[24px]': navigationPosition === 'outter',
-              })}
-            >
-              {scrollSnaps.map((_, index) => (
-                <DotButton
-                  key={index}
-                  onClick={() => onDotButtonClick(index)}
-                  className={cn('min-md:w-[30px] h-[3px] w-[16px] bg-[#86868C]', {
-                    'bg-[#1D1D1F]': index === selectedIndex,
-                  })}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = 'Carousel'
-
-const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { carouselRef, orientation } = useCarousel()
-
-    return (
-      <div ref={carouselRef} className="overflow-hidden">
-        <div
-          ref={ref}
-          className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
-          {...props}
-        />
-      </div>
-    )
-  }
-)
-CarouselContent.displayName = 'CarouselContent'
-
-const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { orientation } = useCarousel()
-
-    return (
-      <div
-        ref={ref}
-        role="group"
-        aria-roledescription="slide"
-        className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
-        {...props}
-      />
-    )
-  }
-)
-CarouselItem.displayName = 'CarouselItem'
-
-const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {
-    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          'absolute  size-8 rounded-full',
-          orientation === 'horizontal'
-            ? '-left-12 top-1/2 -translate-y-1/2'
-            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-          className
-        )}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        {...props}
-      >
-        {children ? (
-          children
-        ) : (
-          <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle
-              opacity="0.2"
-              cx="29"
-              cy="29"
-              r="29"
-              transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 0 58)"
-              fill="#1D1D1F"
-            />
-            <path
-              d="M32.1583 36.8248C32.6139 36.3692 32.6139 35.6305 32.1583 35.1749L25.9832 28.9998L32.1583 22.8248C32.6139 22.3692 32.6139 21.6305 32.1583 21.1749C31.7027 20.7193 30.964 20.7193 30.5084 21.1749L23.5084 28.1749C23.0528 28.6305 23.0528 29.3692 23.5084 29.8248L30.5084 36.8248C30.964 37.2804 31.7027 37.2804 32.1583 36.8248Z"
-              fill="white"
-            />
-          </svg>
-        )}
-        <span className="sr-only">Previous slide</span>
-      </Button>
-    )
-  }
-)
-CarouselPrevious.displayName = 'CarouselPrevious'
-
-const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {
-    const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          'absolute size-8 rounded-full',
-          orientation === 'horizontal'
-            ? '-right-12 top-1/2 -translate-y-1/2'
-            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-          className
-        )}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        {...props}
-      >
-        {children ? (
-          children
-        ) : (
-          <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle opacity="0.2" cx="29" cy="29" r="29" transform="rotate(-180 29 29)" fill="#1D1D1F" />
-            <path
-              d="M25.8417 36.8248C25.3861 36.3692 25.3861 35.6305 25.8417 35.1749L32.0168 28.9998L25.8417 22.8248C25.3861 22.3692 25.3861 21.6305 25.8417 21.1749C26.2973 20.7193 27.036 20.7193 27.4916 21.1749L34.4916 28.1749C34.9472 28.6305 34.9472 29.3692 34.4916 29.8248L27.4916 36.8248C27.036 37.2804 26.2973 37.2804 25.8417 36.8248Z"
-              fill="white"
-            />
-          </svg>
-        )}
-        <span className="sr-only">Next slide</span>
-      </Button>
-    )
-  }
-)
-CarouselNext.displayName = 'CarouselNext'
-
-export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }

package/src/components/checkbox.tsx

@@ -1,42 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from '@radix-ui/react-icons'
-
-import { cn } from '../helpers/index.js'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const checkboxVariants = cva(
-  'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-btn-primary-disabled',
-  {
-    variants: {
-      size: {
-        sm: 'size-[14px]',
-        base: 'size-4',
-        lg: 'size-5',
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-    },
-  }
-)
-
-interface CheckboxProps
-  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-    VariantProps<typeof checkboxVariants> {}
-
-const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
-  ({ className, size, ...props }, ref) => (
-    <CheckboxPrimitive.Root ref={ref} className={cn(checkboxVariants({ size }), className)} {...props}>
-      <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current w-full h-full')}>
-        <CheckIcon />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-)
-Checkbox.displayName = 'Checkbox'
-
-export default Checkbox
-export type { CheckboxProps }

package/src/components/color.tsx

@@ -1,77 +0,0 @@
-import * as React 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'
-const colorVariants = cva('', {
-  variants: {
-    color: {
-      brand0: 'bg-brand-0',
-      brand1: 'bg-brand-1',
-      success0: 'bg-success-0',
-      success1: 'bg-success-1',
-      success2: 'bg-success-2',
-      success3: 'bg-success-3',
-      success4: 'bg-success-4',
-      warning0: 'bg-warning-0',
-      warning1: 'bg-warning-1',
-      warning2: 'bg-warning-2',
-      warning3: 'bg-warning-3',
-      warning4: 'bg-warning-4',
-      error0: 'bg-error-0',
-      error1: 'bg-error-1',
-      error2: 'bg-error-2',
-      error3: 'bg-error-3',
-      error4: 'bg-error-4',
-      infoPrimary: 'bg-info-primary',
-      infoSecondary: 'bg-info-secondary',
-      infoTertiary: 'bg-info-tertiary',
-      infoQuaternary: 'bg-info-quaternary',
-      infoWhite: 'bg-info-white',
-      containerPrimary: 'bg-container-primary',
-      containerSecondary0: 'bg-container-secondary-0',
-      containerSecondary1: 'bg-container-secondary-1',
-      bg0: 'bg-bg-0',
-      bg1: 'bg-bg-1',
-      lines: 'bg-lines',
-      masks0: 'bg-masks-0',
-      masks1: 'bg-masks-1',
-      tabWord0: 'bg-tab-word-0',
-      tabWord1: 'bg-tab-word-1',
-      tabWord2: 'bg-tab-word-2',
-      tabStroke0: 'bg-tab-stroke-0',
-      tabStroke1: 'bg-tab-stroke-1',
-      tabStroke2: 'bg-tab-stroke-2',
-      tabFill0: 'bg-tab-fill-0',
-      tabFill1: 'bg-tab-fill-1',
-      tabFill2: 'bg-tab-fill-2',
-    },
-  },
-  defaultVariants: {
-    color: 'brand0',
-  },
-})
-type ColorElement = React.ElementRef<'div'>
-type ColorDivProps = ComponentPropsWithout<'div', RemovedProps>
-interface CommonColorProps extends VariantProps<typeof colorVariants> {}
-type ColorProps = CommonColorProps & ColorDivProps
-const Color = React.forwardRef<ColorElement, ColorProps>((props, forwardedRef) => {
-  const { children, color = 'brand0', className, ...colorProps } = props
-  return (
-    <Slot
-      {...colorProps}
-      ref={forwardedRef}
-      className={cn(
-        colorVariants({
-          color,
-        }),
-        className
-      )}
-    >
-      {children}
-    </Slot>
-  )
-})
-Color.displayName = 'Color'
-export { Color }
-export type { ColorProps }

package/src/components/container.tsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import { cn } from '../helpers/utils.js'
-import { Slot } from '@radix-ui/react-slot'
-
-type ContainerElement = React.ElementRef<'div'>
-type ContainerProps = {
-  asChild?: boolean
-  children?: React.ReactNode
-  className?: string
-} & React.ComponentPropsWithoutRef<'div'>
-const Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {
-  const { asChild, children, className, ...containerProps } = props
-  const Comp = asChild ? Slot : 'div'
-
-  return (
-    <Comp
-      {...containerProps}
-      ref={forwardedRef}
-      className={cn("box-border max-w-[1664px] mx-4 sm:mx-8 md:mx-16 lg:mx-16 xl:mx-auto ", className)}
-    >
-      {children}
-    </Comp>
-  )
-})
-Container.displayName = 'Container'
-
-export { Container }
-export type { ContainerProps }

package/src/components/dialog.tsx

@@ -1,98 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { Cross2Icon } from '@radix-ui/react-icons'
-
-import { cn } from '../helpers/index.js'
-
-const Dialog = DialogPrimitive.Root
-Dialog.displayName = 'Dialog'
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'bg-background 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-        <Cross2Icon className="size-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
-)
-DialogHeader.displayName = 'DialogHeader'
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
-)
-DialogFooter.displayName = 'DialogFooter'
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}