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

package/src/components/drawer.tsx

@@ -1,115 +0,0 @@
-import React from 'react'
-import { Drawer as DrawerPrimitive } from 'vaul'
-import { Cross2Icon } from '@radix-ui/react-icons'
-
-import { cn } from '../helpers/utils.js'
-
-function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
-}
-
-function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
-}
-
-function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
-}
-
-function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
-}
-
-function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
-  return (
-    <DrawerPrimitive.Overlay
-      data-slot="drawer-overlay"
-      className={cn(
-        'data-[state=open]:ai-animate-in data-[state=closed]:ai-animate-out data-[state=closed]:ai-fade-out-0 data-[state=open]:ai-fade-in-0 ai-fixed ai-inset-0 ai-z-50 ai-bg-black/50',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
-  return (
-    <DrawerPortal data-slot="drawer-portal">
-      <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          'group/drawer-content ai-bg-background ai-fixed ai-z-50 ai-flex ai-px-6 ai-h-auto ai-flex-col',
-          'data-[vaul-drawer-direction=top]:ai-inset-x-0 data-[vaul-drawer-direction=top]:ai-top-0 data-[vaul-drawer-direction=top]:ai-mb-24 data-[vaul-drawer-direction=top]:ai-max-h-[80vh] data-[vaul-drawer-direction=top]:ai-border-b',
-          'data-[vaul-drawer-direction=bottom]:ai-inset-x-0 data-[vaul-drawer-direction=bottom]:ai-bottom-0 data-[vaul-drawer-direction=bottom]:ai-mt-24 data-[vaul-drawer-direction=bottom]:ai-max-h-[80vh] data-[vaul-drawer-direction=bottom]:ai-border-t',
-          'data-[vaul-drawer-direction=right]:ai-inset-y-0 data-[vaul-drawer-direction=right]:ai-right-0 data-[vaul-drawer-direction=right]:ai-w-3/4 data-[vaul-drawer-direction=right]:ai-border-l data-[vaul-drawer-direction=right]:ai-max-w-sm',
-          'data-[vaul-drawer-direction=left]:ai-inset-y-0 data-[vaul-drawer-direction=left]:ai-left-0 data-[vaul-drawer-direction=left]:ai-w-3/4 data-[vaul-drawer-direction=left]:ai-border-r data-[vaul-drawer-direction=left]:ai-max-w-sm',
-          className
-        )}
-        {...props}
-      >
-        <div className="ai-bg-muted ai-mx-auto ai-mt-4 ai-hidden ai-h-2 ai-w-[100px] ai-shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:ai-block" />
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPortal>
-  )
-}
-
-function DrawerHeader({ className, children, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="drawer-header"
-      className={cn('gird-container ai-flex ai-justify-between ai-py-6 gap-1.5', className)}
-      {...props}
-    >
-      <div>{children}</div>
-      <DrawerClose>
-        <Cross2Icon className="ai-size-4" />
-      </DrawerClose>
-    </div>
-  )
-}
-
-function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="drawer-footer"
-      className={cn('ai-mt-auto ai-flex ai-flex-col ai-gap-2 ai-py-8', className)}
-      {...props}
-    />
-  )
-}
-
-function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
-  return (
-    <DrawerPrimitive.Title
-      data-slot="drawer-title"
-      className={cn('text-foreground font-semibold', className)}
-      {...props}
-    />
-  )
-}
-
-function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
-  return (
-    <DrawerPrimitive.Description
-      data-slot="drawer-description"
-      className={cn('ai-text-muted-foreground ai-text-sm', className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}

package/src/components/drop-down.tsx

@@ -1,182 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from '@radix-ui/react-icons'
-import { cn } from '../helpers/index.js'
-
-const DropdownMenu = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>
->(({ children, ...props }) => {
-  return <DropdownMenuPrimitive.Root {...props}>{children}</DropdownMenuPrimitive.Root>
-})
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-primary-foreground p-1 text-popover-foreground shadow-lg 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 origin-[--radix-dropdown-menu-content-transform-origin]',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-primary-foreground p-1 text-popover-foreground shadow-md',
-        '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 origin-[--radix-dropdown-menu-content-transform-origin]',
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 hover:text-brand-0',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <CircleIcon className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
-}
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}

package/src/components/gird.tsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import type { ReactNode } from 'react'
-import { cn } from '../helpers/utils.js'
-
-type Element = React.ElementRef<'div'>
-
-interface GridProps {
-  children?: ReactNode
-  className?: string
-}
-
-interface GridItemProps {
-  children?: ReactNode
-  className?: string
-  span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 // 限制为具体的数字类型
-  start?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 // 起始列位置
-  end?: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 // 结束列位置
-}
-
-const colSpanClasses = {
-  1: 'col-span-1',
-  2: 'col-span-2',
-  3: 'col-span-3',
-  4: 'col-span-4',
-  5: 'col-span-5',
-  6: 'col-span-6',
-  7: 'col-span-7',
-  8: 'col-span-8',
-  9: 'col-span-9',
-  10: 'col-span-10',
-  11: 'col-span-11',
-  12: 'col-span-12',
-} as const
-
-const colStartClasses = {
-  1: 'col-start-1',
-  2: 'col-start-2',
-  3: 'col-start-3',
-  4: 'col-start-4',
-  5: 'col-start-5',
-  6: 'col-start-6',
-  7: 'col-start-7',
-  8: 'col-start-8',
-  9: 'col-start-9',
-  10: 'col-start-10',
-  11: 'col-start-11',
-  12: 'col-start-12',
-} as const
-
-const colEndClasses = {
-  2: 'col-end-2',
-  3: 'col-end-3',
-  4: 'col-end-4',
-  5: 'col-end-5',
-  6: 'col-end-6',
-  7: 'col-end-7',
-  8: 'col-end-8',
-  9: 'col-end-9',
-  10: 'col-end-10',
-  11: 'col-end-11',
-  12: 'col-end-12',
-  13: 'col-end-13',
-} as const
-
-const Grid = React.forwardRef<Element, GridProps>(({ className, children }, forwardedRef) => {
-  return <div ref={forwardedRef} className={cn("grid grid-cols-12 gap-3 md:gap-4", className)}>{children}</div>
-})
-Grid.displayName = 'Grid'
-
-const GridItem = React.forwardRef<Element, GridItemProps>(
-  ({ className, children, span = 12, start, end }, forwardedRef) => {
-    return (
-      <div
-        ref={forwardedRef}
-        className={cn(
-          colSpanClasses[span],
-          start && colStartClasses[start],
-          end && colEndClasses[end],
-          className
-        )}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-GridItem.displayName = 'GridItem'
-
-export { Grid, GridItem }
-export type { GridProps, GridItemProps }

package/src/components/heading.tsx

@@ -1,80 +0,0 @@
-import { cn } from '../helpers/index.js'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import React from 'react'
-
-const headingVariants = cva('leading-tight tracking text-info-primary', {
-  variants: {
-    size: {
-      1: 'text-heading-1',
-      2: 'text-heading-2',
-      3: 'text-heading-3',
-      4: 'text-hedaing-4',
-      5: 'text-heading-5',
-    },
-    weight: {
-      light: 'font-light',
-      normal: 'font-normal',
-      medium: 'font-medium',
-      bold: 'font-bold',
-    },
-    align: {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
-    },
-  },
-  defaultVariants: {
-    size: 5,
-    weight: 'normal',
-  },
-})
-
-type HeadingElement = React.ElementRef<'h1'>
-
-interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  asChild?: boolean
-  color?: string
-  html?: string
-}
-
-const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
-  const { children, className, size = 5, align, weight, asChild, as: Tag = 'h1', color, html, ...headingProps } = props
-  const htmlContentProps = html
-    ? {
-      dangerouslySetInnerHTML: { __html: html },
-    }
-    : null
-
-  const styleProps = color
-    ? {
-      style: {
-        color,
-      },
-    }
-    : null
-  return (
-    <Slot
-      {...headingProps}
-      ref={forwardedRef}
-      className={cn(
-        headingVariants({
-          size,
-          weight,
-          align,
-        }),
-        className
-      )}
-      {...htmlContentProps}
-      {...styleProps}
-    >
-      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}
-    </Slot>
-  )
-})
-
-Heading.displayName = 'Heading'
-
-export { Heading }
-export type { HeadingProps }

package/src/components/index.ts

@@ -1,26 +0,0 @@
-export { default as Button } from './button.js'
-export { default as Badge } from './badge.js'
-export * from './input.js'
-
-export { default as Checkbox } from './checkbox.js'
-
-export { default as Skeleton } from './skeleton.js'
-export * from './dialog.js'
-export * from './popover.js'
-export * from './radio.js'
-export * from './text.js'
-export * from './gird.js'
-export * from './heading.js'
-export * from './container.js'
-export * from './color.js'
-export * from './drawer.js'
-export * from './link.js'
-export * from './avatar.js'
-export * from './input-number.js'
-export * from './drop-down.js'
-export * from './card.js'
-export * from './carousel.js'
-export * from './tabs.js'
-export * from './alert.js'
-export { default as Picture } from './picture.js'
-export { default as Theme } from './theme.js'