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

package/src/components/radio.tsx

@@ -1,85 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { Text } from './text.js'
-import { CheckIcon } from '@radix-ui/react-icons'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../helpers/index.js'
-
-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 = 'RadioGroup'
-
-interface RadioGroupItemProps
-  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
-    VariantProps<typeof radioGroupVariants> {}
-
-const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(
-  ({ className, size, children, ...props }, ref) => {
-    const { size: sizeFromParent } = React.useContext(RadioContext)
-
-    const ItemRadio = (
-      <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>
-    )
-
-    if (children) {
-      return (
-        <Text as="label" className={cn('ai-flex ai-items-center ai-gap-1', className)}>
-          {ItemRadio}
-          {children}
-        </Text>
-      )
-    }
-    return ItemRadio
-  }
-)
-RadioGroupItem.displayName = 'RadioGroupItem'
-
-export { RadioGroup, RadioGroupItem }
-export type { RadioGroupProps, RadioGroupItemProps }

package/src/components/skeleton.tsx

@@ -1,41 +0,0 @@
-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'
-
-type SkeletonElement = React.ElementRef<'span'>
-
-interface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {
-  /** 是否正在加载 , 默认是true*/
-  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

@@ -1,113 +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 textVariants = cva('ai-tracking', {
-  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',
-    },
-    weight: {
-      light: 'ai-font-light',
-      normal: 'ai-font-normal',
-      medium: 'ai-font-medium',
-      semibold: 'ai-font-semibold',
-      bold: 'ai-font-bold',
-    },
-    lineHeights: {
-      tight: 'ai-leading-tight',
-      normal: 'ai-leading-normal',
-      loose: 'ai-leading-loose',
-    },
-    align: {
-      left: 'ai-text-left',
-      center: 'ai-text-center',
-      right: 'ai-text-right',
-    },
-  },
-  defaultVariants: {
-    size: 'none',
-    weight: 'normal',
-  },
-})
-
-type TextElement = React.ElementRef<'span'>
-type TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>
-type TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>
-type TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>
-type TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>
-
-interface CommonTextProps extends VariantProps<typeof textVariants> {
-  as?: 'div' | 'label' | 'p' | 'span'
-  asChild?: boolean
-  color?: string
-  /** 相当于 dangerouslySetInnerHTML */
-  html?: string
-}
-
-type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)
-
-const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
-  const {
-    children,
-    lineHeights,
-    size = 'none',
-    weight,
-    align,
-    className,
-    asChild,
-    as: Tag = 'span',
-    color,
-    html,
-    ...textProps
-  } = props
-
-  const htmlContentProps = html
-    ? {
-        dangerouslySetInnerHTML: { __html: html },
-      }
-    : null
-
-  const styleProps = color
-    ? {
-        style: {
-          color,
-        },
-      }
-    : null
-
-  return (
-    <Slot
-      {...textProps}
-      ref={forwardedRef}
-      className={cn(
-        textVariants({
-          size,
-          weight,
-          align,
-          lineHeights,
-        }),
-        className
-      )}
-      {...htmlContentProps}
-      {...styleProps}
-    >
-      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}
-    </Slot>
-  )
-})
-Text.displayName = 'Text'
-
-export { Text }
-export type { TextProps }

package/src/components/theme.tsx

@@ -1,21 +0,0 @@
-'use client'
-import * as React from 'react'
-import type { Brand } from '../helpers/constants.js'
-
-interface ThemeProps {
-  brand: Brand
-  children: React.ReactNode
-}
-/**
- *
- * @param param
- * @returns
- */
-const Theme = ({ brand, children }: ThemeProps) => {
-  React.useLayoutEffect(() => {
-    document.querySelector('html')?.setAttribute('data-brand-theme', brand)
-  }, [])
-  return <>{children}</>
-}
-
-export default Theme

package/src/helpers/component-props.ts

@@ -1,17 +0,0 @@
-import type React from 'react'
-
-type ComponentPropsAs<C extends React.ElementType<any>, T extends React.ComponentPropsWithoutRef<C>['as']> = Omit<
-  Extract<React.ComponentPropsWithoutRef<C>, { as: T }>,
-  'as' | 'asChild'
->
-
-// Omits the specified props from the component props. Autocomplete will suggest props
-// of the component, but won't restrict the omittable props to those that actually exist.
-type ComponentPropsWithout<
-  T extends React.ElementType,
-  O extends Omit<string, keyof React.ComponentPropsWithoutRef<T>> | keyof React.ComponentPropsWithoutRef<T>,
-> = Omit<React.ComponentPropsWithoutRef<T>, O & string>
-
-type RemovedProps = 'asChild' | 'defaultChecked' | 'defaultValue' | 'color'
-
-export type { ComponentPropsAs, ComponentPropsWithout, RemovedProps }

package/src/helpers/constants.ts

@@ -1,3 +0,0 @@
-export const ALL_BRANDS = ['anker', 'eufy', 'soundcore', 'nebula', 'ankerWork', 'ankerMake'] as const
-
-export type Brand = (typeof ALL_BRANDS)[number]

package/src/helpers/index.ts

@@ -1,2 +0,0 @@
-export { cn } from './utils.js'
-export { noop } from './utils.js'

package/src/helpers/utils.ts

@@ -1,8 +0,0 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-export function noop(): any {}

package/src/icons/spinner.tsx

@@ -1,26 +0,0 @@
-import { cn } from '../helpers/index.js'
-
-export interface SpinnerProps {
-  className?: string
-}
-
-// eslint-disable-next-line no-unused-vars
-const Spinner = (props: SpinnerProps) => {
-  return (
-    <svg
-      fill="none"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-      width="1rem"
-      className={cn('ai-animate-spin', props.className)}
-    >
-      <path
-        d="M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  )
-}
-
-export default Spinner

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components/index.js'

package/src/stories/badge.stories.tsx

@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Badge } from '../components/index.js'
-import React from 'react'
-
-const meta = {
-  title: 'Components/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['default', 'destructive', 'outline', 'secondary'],
-    },
-  },
-  args: {
-    variant: 'default',
-    children: 'New',
-  },
-} satisfies Meta<typeof Badge>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-export const Examples: Story = {
-  render() {
-    return (
-      <div className="ai-flex ai-flex-col ai-space-y-4">
-        <Badge variant="default">Default</Badge>
-        <Badge variant="secondary">Secondary</Badge>
-        <Badge variant="destructive">Destructive</Badge>
-        <Badge variant="outline">Outline</Badge>
-      </div>
-    )
-  },
-}

package/src/stories/button.stories.tsx

@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { SearchIcon } from '@storybook/icons'
-
-import { Button } from '../components/index.js'
-import React from 'react'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  // 同时定义了页面左侧菜单
-  title: 'Components/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['primary', 'secondary', 'link', 'ghost'],
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['sm', 'base', 'lg', 'icon'],
-    },
-    hoverEffect: {
-      description: 'hover 状态下的动画效果，仅在variant是primary 和 secondary 时生效',
-      control: {
-        type: 'select',
-      },
-      options: ['none', 'slide'],
-    },
-  },
-  args: {
-    variant: 'primary',
-    size: 'base',
-    children: 'Button',
-    asChild: false,
-    disabled: false,
-    loading: false,
-    hoverEffect: 'none',
-  },
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-// args 会作为 props 传递给组件
-// Story的名会作为菜单的名称 自动首字母大写并按照大写字母拆分 UseAsButton => Use As Button
-
-export const Primary: Story = {
-  args: {
-    size: 'lg',
-    children: 'Primary',
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    size: 'lg',
-    variant: 'secondary',
-    children: 'Secondary',
-  },
-}
-
-export const Link: Story = {
-  args: {
-    size: 'lg',
-    variant: 'link',
-    children: 'Link',
-  },
-}
-
-export const WithIcon: Story = {
-  args: {
-    size: 'lg',
-    children: (
-      <>
-        WithIcon <SearchIcon className="ai-ml-2" />
-      </>
-    ),
-  },
-}
-
-export const Aschild: Story = {
-  args: {
-    size: 'lg',
-    asChild: true,
-    children: <a href="http://example.com">as a a tag</a>,
-  },
-}
-
-export const Spinner: Story = {
-  args: {
-    size: 'lg',
-    loading: true,
-    spinner: (
-      <div className="ai-text-neutral-900 ai-animate-pulse ai-font-bold ai-flex-row ai-flex">
-        <svg
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="2625"
-          width="1rem"
-          className="align-middle"
-        >
-          <path
-            d="M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z"
-            fill=""
-            p-id="2626"
-          ></path>
-        </svg>
-        &nbsp;loading...
-      </div>
-    ),
-  },
-}

package/src/stories/checkbox.stories.tsx

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react/*'
-import { Checkbox } from '../components/index.js'
-import React from 'react'
-
-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 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" 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"
-    >
-      Accept terms and conditions
-    </label>
-  </div>
-)

package/src/stories/dialog.stories.tsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  Input,
-} from '../components/index.js'
-import type { Meta, StoryObj } from '@storybook/react/*'
-
-const meta = {
-  title: 'Components/Dialog',
-  component: Dialog,
-  subcomponents: {
-    DialogTrigger,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-    DialogDescription,
-    DialogFooter,
-  } as any,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: '弹窗组件，基于@radix-ui/react-dialog，https://www.radix-ui.com/primitives/docs/components/dialog ',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Dialog>
-
-export default meta
-
-type Story = StoryObj<typeof Dialog>
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <DialogTrigger asChild>
-          <button>Edit Profile</button>
-        </DialogTrigger>
-        <DialogContent className="sm:ai-max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Edit profile</DialogTitle>
-            <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
-          </DialogHeader>
-          <div className="ai-grid ai-gap-4 ai-py-4">
-            <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
-              <label htmlFor="name" className="ai-text-right">
-                Name
-              </label>
-              <Input id="name" defaultValue="Pedro Duarte" className="ai-col-span-3" />
-            </div>
-            <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
-              <label htmlFor="username" className="ai-text-right">
-                Username
-              </label>
-              <Input id="username" defaultValue="@peduarte" className="ai-col-span-3" />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button type="submit">Save changes</Button>
-          </DialogFooter>
-        </DialogContent>
-      </>
-    ),
-  },
-}