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

package/src/components/drawer.tsx

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,182 @@
+'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

@@ -0,0 +1,90 @@
+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

@@ -3,34 +3,29 @@ import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 import React from 'react'
 
-const headingVariants = cva('ai-leading-tight ai-tracking', {
+const headingVariants = cva('leading-tight tracking text-info-primary', {
   variants: {
     size: {
-      none: '',
-      1: 'ai-text-xs',
-      2: 'ai-text-sm',
-      3: 'ai-text-base',
-      4: 'ai-text-lg',
-      5: 'ai-text-xl',
-      6: 'ai-text-2xl',
-      7: 'ai-text-3xl',
-      8: 'ai-text-4xl',
-      9: 'ai-text-5xl',
+      1: 'text-heading-1',
+      2: 'text-heading-2',
+      3: 'text-heading-3',
+      4: 'text-hedaing-4',
+      5: 'text-heading-5',
     },
     weight: {
-      light: 'ai-font-light',
-      normal: 'ai-font-normal',
-      medium: 'ai-font-medium',
-      bold: 'ai-font-bold',
+      light: 'font-light',
+      normal: 'font-normal',
+      medium: 'font-medium',
+      bold: 'font-bold',
     },
     align: {
-      left: 'ai-text-left',
-      center: 'ai-text-center',
-      right: 'ai-text-right',
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
     },
   },
   defaultVariants: {
-    size: 'none',
+    size: 5,
     weight: 'normal',
   },
 })
@@ -45,19 +40,19 @@ interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProp
 }
 
 const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
-  const { children, className, size, align, weight, asChild, as: Tag = 'h1', color, html, ...headingProps } = props
+  const { children, className, size = 5, align, weight, asChild, as: Tag = 'h1', color, html, ...headingProps } = props
   const htmlContentProps = html
     ? {
-        dangerouslySetInnerHTML: { __html: html },
-      }
+      dangerouslySetInnerHTML: { __html: html },
+    }
     : null
 
   const styleProps = color
     ? {
-        style: {
-          color,
-        },
-      }
+      style: {
+        color,
+      },
+    }
     : null
   return (
     <Slot

package/src/components/index.ts

@@ -1,7 +1,3 @@
-// theme
-// export { default as Theme } from './theme'
-
-// components
 export { default as Button } from './button.js'
 export { default as Badge } from './badge.js'
 export * from './input.js'
@@ -12,8 +8,19 @@ export { default as Skeleton } from './skeleton.js'
 export * from './dialog.js'
 export * from './popover.js'
 export * from './radio.js'
-export * from './dialog.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'