@anker-in/headless-ui 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/src/components/checkbox.tsx

@@ -5,24 +5,40 @@ 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 Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      'ai-border-primary ai-ring-offset-background focus-visible:ai-ring-ring data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground ai-peer ai-size-4 ai-shrink-0 ai-rounded-sm ai-border focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn('ai-flex ai-items-center ai-justify-center ai-text-current')}>
-      <CheckIcon className="ai-size-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
+const checkboxVariants = cva(
+  'ai-border-primary ai-ring-offset-background focus-visible:ai-ring-ring data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground ai-peer ai-shrink-0 ai-rounded-sm ai-border focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50 disabled:ai-bg-btn-primary-disabled',
+  {
+    variants: {
+      size: {
+        sm: 'ai-size-[14px]',
+        base: 'ai-size-4',
+        lg: 'ai-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('ai-flex ai-items-center ai-justify-center ai-text-current ai-w-full ai-h-full')}
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+)
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
 export default Checkbox
+export type { CheckboxProps }

package/src/components/heading.tsx

@@ -1,19 +1,73 @@
 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('', {
+  variants: {
+    size: {
+      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',
+    },
+    weights: {
+      light: 'ai-font-light',
+      normal: 'ai-font-normal',
+      medium: 'ai-font-medium',
+      bold: 'ai-font-bold',
+    },
+  },
+  defaultVariants: {
+    size: 3,
+    weights: 'normal',
+  },
+})
+
 type HeadingElement = React.ElementRef<'h1'>
 
-interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
+interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
   asChild?: boolean
+  color?: string
+  html?: string
 }
 
 const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
-  const { children, className, asChild, as: Tag = 'h1', color, ...headingProps } = props
+  const { children, className, size, weights, asChild, as: Tag = 'h1', color, html, ...headingProps } = props
+  const htmlContentProps = html
+    ? {
+        dangerouslySetInnerHTML: { __html: html },
+      }
+    : null
+
+  const styleProps = color
+    ? {
+        style: {
+          color,
+        },
+      }
+    : null
   return (
-    <Slot data-accent-color={color || undefined} {...headingProps} ref={forwardedRef} className={cn('', className)}>
-      {asChild ? children : <Tag>{children}</Tag>}
+    <Slot
+      {...headingProps}
+      ref={forwardedRef}
+      className={cn(
+        headingVariants({
+          size,
+          weights,
+        }),
+        className
+      )}
+      {...htmlContentProps}
+      {...styleProps}
+    >
+      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}
     </Slot>
   )
 })
@@ -21,3 +75,4 @@ const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwarded
 Heading.displayName = 'Heading'
 
 export { Heading }
+export type { HeadingProps }

package/src/components/index.ts

@@ -14,4 +14,5 @@ export * from './popover.js'
 export * from './radio.js'
 export * from './dialog.js'
 export * from './text.js'
+export * from './heading.js'
 export { default as Theme } from './theme.js'

package/src/components/input.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { cn } from '../helpers/index.js'
-import type { ComponentPropsWithout, RemovedProps } from '@/helpers/component-props'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const inputVariants = cva(

package/src/components/radio.tsx

@@ -3,36 +3,71 @@
 import * as React from 'react'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { CheckIcon } from '@radix-ui/react-icons'
-
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../helpers/index.js'
 
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />
+const RadioContext = React.createContext<{ size?: 'sm' | 'base' | 'lg' }>({
+  size: 'base',
 })
+
+const radioGroupVariants = cva(
+  'ai-border-primary ai-text-primary ai-ring-offset-background focus-visible:ai-ring-ring ai-aspect-square ai-rounded-full ai-border focus:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50 data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'ai-size-[14px]',
+        base: 'ai-size-4',
+        lg: 'ai-size-5',
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  }
+)
+
+interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+  /** 尺寸 */
+  size?: 'sm' | 'base' | 'lg'
+}
+
+const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(
+  ({ className, children, size, ...props }, ref) => {
+    return (
+      <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref}>
+        <RadioContext.Provider value={{ size }}>{children}</RadioContext.Provider>
+      </RadioGroupPrimitive.Root>
+    )
+  }
+)
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        'ai-border-primary ai-text-primary ai-ring-offset-background focus-visible:ai-ring-ring ai-aspect-square ai-size-4 ai-rounded-full ai-border focus:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="ai-flex ai-items-center ai-justify-center">
-        <CheckIcon className="ai-text-primary ai-size-2.5 ai-fill-current" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-})
+interface RadioGroupItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+    VariantProps<typeof radioGroupVariants> {}
+
+const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(
+  ({ className, size, ...props }, ref) => {
+    const { size: sizeFromParent } = React.useContext(RadioContext)
+    return (
+      <RadioGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          radioGroupVariants({
+            size: size ?? sizeFromParent,
+          }),
+          className
+        )}
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator className="ai-flex ai-items-center ai-justify-center ai-text-current ai-w-full ai-h-full">
+          <CheckIcon />
+        </RadioGroupPrimitive.Indicator>
+      </RadioGroupPrimitive.Item>
+    )
+  }
+)
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
 
 export { RadioGroup, RadioGroupItem }
+export type { RadioGroupProps, RadioGroupItemProps }

package/src/components/skeleton.tsx

@@ -1,10 +1,41 @@
 import * as React from 'react'
 import { cn } from '../helpers/index.js'
+import { Slot } from '@radix-ui/react-slot'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
 
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('ai-bg-skeleton ai-size-12 ai-animate-pulse', className)} {...props} />
+type SkeletonElement = React.ElementRef<'span'>
+
+interface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {
+  /** 是否正在加载 */
+  loading?: boolean
 }
 
+const Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {
+  const { children, className, loading = true, ...skeletonProps } = props
+
+  if (!loading) return children
+  const Tag = React.isValidElement(children) ? Slot : 'span'
+
+  return (
+    <Tag
+      ref={forwardedRef}
+      className={cn(
+        `ai-bg-skeleton ai-animate-pulse empty:ai-block data-[inline-skeleton=true]:ai-leading-[0] !ai-bg-none !ai-bg-clip-border !ai-border-none !ai-shadow-none 
+        !ai-text-transparent !ai-outline-none !ai-select-none !ai-cursor-default !ai-pointer-events-none !ai-decoration-clone
+        after:!ai-invisible before:!ai-invisible [&>*]:!ai-invisible
+        `,
+        className
+      )}
+      data-inline-skeleton={React.isValidElement(children) ? undefined : true}
+      tabIndex={-1}
+      {...skeletonProps}
+    >
+      {children}
+    </Tag>
+  )
+})
+
 Skeleton.displayName = 'Skeleton'
 
 export default Skeleton
+export type { SkeletonProps }

package/src/components/text.tsx

@@ -39,7 +39,7 @@ interface TextProps extends React.ComponentPropsWithoutRef<'span'>, VariantProps
 }
 
 const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
-  const { children, size, className, asChild, as: Tag = 'span', color, html, ...textProps } = props
+  const { children, size, weights, className, asChild, as: Tag = 'span', color, html, ...textProps } = props
 
   const htmlContentProps = html
     ? {
@@ -47,18 +47,27 @@ const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
       }
     : null
 
+  const styleProps = color
+    ? {
+        style: {
+          color,
+        },
+      }
+    : null
+
   return (
     <Slot
       {...textProps}
       ref={forwardedRef}
       className={cn(
         textVariants({
-          size: size,
+          size,
+          weights,
         }),
-        className,
-        `text-[${color}]`
+        className
       )}
       {...htmlContentProps}
+      {...styleProps}
     >
       {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}
     </Slot>

package/src/stories/checkbox.stories.tsx

@@ -1,11 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react/*'
 import { Checkbox } from '../components/index'
 import React from 'react'
 
-export default { title: 'Components/Checkbox' }
+const meta = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '复选框, 基于@radix-ui/react-checkbox https://www.radix-ui.com/primitives/docs/components/checkbox',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'base', 'lg'],
+      description: '尺寸',
+      table: {
+        defaultValue: { summary: 'base' },
+      },
+    },
+  },
+  args: {
+    size: 'base',
+  },
+} satisfies Meta<typeof Checkbox>
 
-export const Default = () => (
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    size: 'base',
+  },
+}
+
+export const Sizes = () => (
+  <div className="ai-flex ai-flex-col ai-gap-2">
+    <div className="ai-flex ai-items-center ai-space-x-2">
+      <Checkbox id="terms" size="sm" />
+      <label
+        htmlFor="terms"
+        className="ai-text-sm ai-font-medium ai-leading-none peer-disabled:ai-cursor-not-allowed peer-disabled:ai-opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+    <div className="ai-flex ai-items-center ai-space-x-2">
+      <Checkbox id="terms1" size="base" />
+      <label
+        htmlFor="terms1"
+        className="ai-text-base ai-font-medium ai-leading-none peer-disabled:ai-cursor-not-allowed peer-disabled:ai-opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+    <div className="ai-flex ai-items-center ai-space-x-2">
+      <Checkbox id="terms2" size="lg" />
+      <label
+        htmlFor="terms2"
+        className="ai-text-lg ai-font-medium ai-leading-none peer-disabled:ai-cursor-not-allowed peer-disabled:ai-opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  </div>
+)
+Sizes.parameters = {
+  docs: {
+    description: {
+      story: '不同的尺寸',
+    },
+  },
+}
+
+export const Disabled = () => (
   <div className="ai-flex ai-items-center ai-space-x-2">
-    <Checkbox id="terms" />
+    <Checkbox id="terms" disabled />
     <label
       htmlFor="terms"
       className="ai-text-sm ai-font-medium ai-leading-none peer-disabled:ai-cursor-not-allowed peer-disabled:ai-opacity-70"

package/src/stories/heading.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Heading } from '../components/index'
+import React from 'react'
+
+const meta = {
+  title: 'Typography/Heading',
+  component: Heading,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Heading 组件, 基本和text 组件一样，只是默认的标签类型不一样',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+      description: '1~9',
+      table: {
+        defaultValue: { summary: '3' },
+      },
+    },
+    weights: {
+      control: {
+        type: 'select',
+      },
+      options: ['light', 'normal', 'medium', 'bold'],
+      table: {
+        defaultValue: { summary: 'normal' },
+      },
+    },
+    color: {
+      control: 'color',
+    },
+    as: {
+      control: {
+        type: 'select',
+      },
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      description: 'html 标签类型',
+      table: {
+        defaultValue: { summary: 'h1' },
+      },
+    },
+    html: {
+      type: 'string',
+      description: '相当于 dangerouslySetInnerHTML',
+    },
+  },
+  args: {
+    as: 'h1',
+    size: 3,
+    weights: 'normal',
+  },
+} satisfies Meta<typeof Heading>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    as: 'h1',
+    children: ' The quick brown fox jumps over the lazy dog.',
+  },
+}
+
+export const All: Story = {
+  render: () => (
+    <>
+      <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>
+      <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>
+      <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>
+      <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>
+      <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>
+      <Heading size={6}>The quick brown fox jumps over the lazy dog.</Heading>
+      <Heading size={7}>The quick brown fox jumps over the lazy dog.</Heading>
+      <Heading size={8}>The quick brown fox jumps over the lazy dog.</Heading>
+      <Heading size={9}>The quick brown fox jumps over the lazy dog.</Heading>
+    </>
+  ),
+}

package/src/stories/radio.stories.tsx

@@ -1,19 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react/*'
 import { RadioGroup, RadioGroupItem } from '../components/index'
 import React from 'react'
 
-export default { title: 'Components/Radio' }
+const meta = {
+  title: 'Components/Radio',
+  component: RadioGroup,
+  // subcomponents: { RadioGroupItem },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          '单选框, 基于@radix-ui/react-radio-group https://www.radix-ui.com/primitives/docs/components/radio-group',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'base', 'lg'],
+      description: '尺寸',
+      table: {
+        defaultValue: { summary: 'base' },
+      },
+    },
+  },
+  args: {
+    size: 'base',
+  },
+} satisfies Meta<typeof RadioGroup>
 
-export const Default = () => (
-  <div className="ai-flex ai-h-40 ai-w-48 ai-items-center ai-justify-center">
-    <RadioGroup defaultValue="ai-option-one">
-      <div className="ai-flex ai-items-center ai-space-x-2">
-        <RadioGroupItem value="option-one" id="option-one" />
-        <label htmlFor="option-one">Option One</label>
-      </div>
-      <div className="ai-flex ai-items-center ai-space-x-2">
-        <RadioGroupItem value="option-two" id="option-two" />
-        <label htmlFor="option-two">Option Two</label>
-      </div>
-    </RadioGroup>
-  </div>
-)
+export default meta
+
+type Story = StoryObj<typeof RadioGroup>
+export const Default: Story = {
+  args: {
+    size: 'base',
+    children: (
+      <>
+        <div className="ai-flex ai-items-center ai-space-x-2">
+          <RadioGroupItem value="option-one" id="option-one" />
+          <label htmlFor="option-one">Option One</label>
+        </div>
+        <div className="ai-flex ai-items-center ai-space-x-2">
+          <RadioGroupItem value="option-two" id="option-two" />
+          <label htmlFor="option-two">Option Two</label>
+        </div>
+      </>
+    ),
+  },
+}

package/src/stories/skeleton.stories.tsx

@@ -8,6 +8,12 @@ const meta = {
   component: Skeleton,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          '骨架屏组件,用来在数据加载时展示一个占位图, 可以包在dom 外使用，通过loading 控制显示隐藏, 也可以单独使用，通过自定义class控制样式, 组合成想要的形状',
+      },
+    },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof Skeleton>
@@ -16,9 +22,19 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+  args: {
+    loading: true,
+    children: (
+      <div className="ai-h-14 ai-rounded-3xl ai-overflow-hidden ai-px-4 ai-py-4 w-full">
+        Fog creeps across moors, hills, and rivers. It adds an eerie charm to the landscape, but also complicates
+        driving.
+      </div>
+    ),
+  },
+}
 
-export const Example: Story = {
+export const Multiple: Story = {
   render() {
     return (
       <div className="ai-flex ai-flex-col ai-items-center ai-justify-center">
@@ -31,3 +47,21 @@ export const Example: Story = {
     )
   },
 }
+
+export const WithText: Story = {
+  render() {
+    return (
+      <>
+        <Skeleton loading={true}>
+          Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers,
+          and downpours, often accompanied by gray skies.
+        </Skeleton>
+        <hr />
+        <Skeleton loading={false}>
+          Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers,
+          and downpours, often accompanied by gray skies.
+        </Skeleton>
+      </>
+    )
+  },
+}