@anker-in/headless-ui 0.0.2

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@anker-in/headless-ui",
+  "version": "0.0.2",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "module": "./dist/esm/index.js",
+  "style": "./dist/style.css",
+  "description": "",
+  "type": "module",
+  "files": [
+    "src/**",
+    "dist/**"
+  ],
+  "sideEffects": false,
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@testing-library/react": "^14.2.2",
+    "babel-jest": "^29.7.0",
+    "esbuild": "^0.20.2",
+    "esbuild-style-plugin": "^1.6.3",
+    "eslint-plugin-require-extensions": "^0.1.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss-cli": "^11.0.0",
+    "react-test-renderer": "^18.2.0",
+    "stylelint": "^16.2.1"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-visually-hidden": "^1.0.3",
+    "autoprefixer": "^10.4.18",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "postcss": "^8.4.37",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss": "^3.4.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "pnpm run dev:js:esm & pnpm run dev:js:esm:types & pnpm run dev:css",
+    "dev:js:esm": "node build.esm.js watch=true",
+    "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm >/dev/null",
+    "dev:css": "postcss src/styles/global.css -o dist/style.css --watch",
+    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:esm:types ",
+    "build:js:esm": "node build.esm.js",
+    "build:js:esm:types": "tsc --outdir dist/esm",
+    "build:css": "postcss src/styles/global.css -o dist/style.css",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "test": "jest"
+  }
+}

package/src/components/__tests__/button.test.js

@@ -0,0 +1,9 @@
+import { cleanup, fireEvent, render } from '@testing-library/react'
+import Button from '../button'
+
+test('button click should call the onClick handler', () => {
+  const onClick = jest.fn()
+  const { getByText } = render(<Button onClick={onClick}>Click me</Button>)
+  fireEvent.click(getByText('Click me'))
+  expect(onClick).toHaveBeenCalled()
+})

package/src/components/badge.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../helpers/index'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-[20px] border px-[10px] py-1 text-xs font-medium transition-colors focus:outline-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-badge text-badge-foreground border-transparent',
+        secondary: 'bg-secondary text-secondary-foreground border-transparent',
+        destructive: 'bg-destructive text-destructive-foreground border-transparent',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export default Badge

package/src/components/button.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../helpers/index'
+import Spinner from '../icons/spinner'
+
+/**
+ * Button Variants
+ */
+const buttonVariants = cva(
+  'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground',
+        secondary:
+          'bg-btn-secondary border-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground border border-solid',
+        link: 'text-primary underline-offset-4 hover:underline',
+        ghost: 'hover:bg-btn-primary hover:text-btn-primary-foreground',
+      },
+      size: {
+        sm: 'h-8 px-3 py-1',
+        base: 'h-10 px-4 py-2',
+        lg: 'h-11 px-8',
+        icon: 'size-10 rounded-full',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'base',
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  /** 设置按钮载入状态  */
+  loading?: boolean
+  /** 设置按钮失效状态  */
+  disabled?: boolean
+  /** 定义自组件作为父组件的类型， 详细使用方式请参考radix-ui */
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      asChild = false,
+      size = 'base',
+      children,
+      variant,
+      className,
+      disabled = false,
+      loading = false,
+      ...props
+    }: ButtonProps,
+    ref
+  ) => {
+    const Comp = asChild ? Slot : 'button'
+
+    return (
+      <Comp
+        disabled={disabled}
+        className={cn(buttonVariants({ variant, size, className }), {
+          'cursor-not-allowed': disabled,
+        })}
+        ref={ref}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>
+              {children}
+            </span>
+            <span className="absolute">
+              <Spinner />
+            </span>
+            <VisuallyHidden>{children}</VisuallyHidden>
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    )
+  }
+)
+
+Button.displayName = 'Button'
+export default Button

package/src/components/checkbox.tsx

@@ -0,0 +1,26 @@
+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'
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 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',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <CheckIcon className="size-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export default Checkbox

package/src/components/dialog.tsx

@@ -0,0 +1,97 @@
+'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'
+
+const Dialog = DialogPrimitive.Root
+
+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,
+}

package/src/components/heading.tsx

@@ -0,0 +1,23 @@
+import { cn } from '@/helpers'
+import { Slot } from '@radix-ui/react-slot'
+import React from 'react'
+
+type HeadingElement = React.ElementRef<'h1'>
+
+interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
+  asChild?: boolean
+}
+
+const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
+  const { children, className, asChild, as: Tag = 'h1', color, ...headingProps } = props
+  return (
+    <Slot data-accent-color={color || undefined} {...headingProps} ref={forwardedRef} className={cn('', className)}>
+      {asChild ? children : <Tag>{children}</Tag>}
+    </Slot>
+  )
+})
+
+Heading.displayName = 'Heading'
+
+export { Heading }

package/src/components/index.ts

@@ -0,0 +1,15 @@
+// theme
+export { default as Theme } from './theme'
+
+// components
+export { default as Button } from './button'
+export { default as Badge } from './badge'
+export * from './input'
+
+export { default as Checkbox } from './checkbox'
+
+export { default as Skeleton } from './skeleton'
+export * from './dialog'
+export * from './popover'
+export * from './radio'
+export * from './dialog'

package/src/components/input.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react'
+import { cn } from '../helpers/index'
+import { ComponentPropsWithout, RemovedProps } from '@/helpers/component-props'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const inputVariants = cva(
+  'border-input bg-background focus-visible:ring-ring ring-offset-background flex h-2 flex-row items-center overflow-hidden rounded-md border px-3 focus-visible:ring-2 focus-visible:ring-offset-2',
+  {
+    variants: {
+      size: {
+        sm: 'h-8',
+        base: 'h-10',
+        lg: 'h-12',
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  }
+)
+
+export interface InputProps extends ComponentPropsWithout<'input', 'size'>, VariantProps<typeof inputVariants> {}
+
+type InputSlotElement = React.ElementRef<'div'>
+interface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {
+  /**
+   * 插槽的位置
+   */
+  side: 'left' | 'right'
+}
+
+/**
+ * InputSlot
+ * 用来在 Input 组件中插入额外的内容，比如icon ，按钮
+ */
+const InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, forwardedRef) => {
+  const { className, side, children, ...slotProps } = props
+
+  return (
+    <div
+      ref={forwardedRef}
+      {...slotProps}
+      className={cn('flex h-full items-center px-2', className, {
+        '-order-1 pl-0': side === 'left',
+        'order-2 pr-0': side === 'right',
+      })}
+    >
+      {children}
+    </div>
+  )
+})
+
+const Input = React.forwardRef<React.ElementRef<'input'>, InputProps>(
+  ({ className, type, size, children, ...props }, ref) => {
+    return (
+      <div className={cn(inputVariants({ size }), className)}>
+        <input
+          type={type}
+          className={cn(
+            'placeholder:text-muted-foreground flex size-full text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50'
+          )}
+          ref={ref}
+          {...props}
+        />
+        {children}
+      </div>
+    )
+  }
+)
+Input.displayName = 'Input'
+InputSlot.displayName = 'InputSlot'
+
+export { Input, InputSlot }

package/src/components/popover.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '../helpers/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground 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 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

package/src/components/radio.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { CheckIcon } from '@radix-ui/react-icons'
+
+import { cn } from '../helpers/index'
+
+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} />
+})
+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(
+        'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <CheckIcon className="text-primary size-2.5 fill-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

package/src/components/skeleton.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { cn } from '../helpers/index'
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('bg-skeleton size-12 animate-pulse', className)} {...props} />
+}
+
+Skeleton.displayName = 'Skeleton'
+
+export default Skeleton

package/src/components/text.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@/helpers'
+import { Slot } from '@radix-ui/react-slot'
+import React from 'react'
+
+type TextElement = React.ElementRef<'span'>
+interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
+  as?: 'div' | 'label' | 'p' | 'span' | undefined
+  asChild?: boolean
+  color?: string
+}
+
+const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
+  const { children, className, asChild, as: Tag = 'span', color, ...textProps } = props
+  return (
+    <Slot {...textProps} ref={forwardedRef} className={cn(className, color)}>
+      {asChild ? children : <Tag>{children}</Tag>}
+    </Slot>
+  )
+})
+Text.displayName = 'Text'
+
+export { Text }

package/src/components/theme.tsx

@@ -0,0 +1,17 @@
+import type { Brand } from '@/helpers/constants'
+import React, { useEffect } from 'react'
+
+interface ThemeProps {
+  brand: Brand
+  children: React.ReactNode
+}
+const Theme = ({ brand, children }: ThemeProps) => {
+  useEffect(() => {
+    // TODO: 在ssr 中不生效, 暂时手动在外层设置
+    document.getElementsByTagName('html')?.[0]?.setAttribute('data-brand-theme', brand)
+  }, [brand])
+
+  return <>{children}</>
+}
+
+export default Theme

package/src/helpers/component-props.ts

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

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

package/src/helpers/index.ts

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

package/src/helpers/utils.ts

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

package/src/icons/spinner.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+export interface SpinnerProps {
+  /** loading 图标大小 */
+  size?: 'sm' | 'md' | 'lg'
+  color?: string
+}
+
+// eslint-disable-next-line no-unused-vars
+const Spinner = ({ size = 'sm', color = '#ffffff' }: SpinnerProps) => {
+  return (
+    <svg
+      className="animate-spin"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3"
+        stroke={color}
+        strokeWidth="1.6"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+export default Spinner

package/src/index.ts

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

package/src/stories/badge.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Badge } from '../components/index'
+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="flex flex-col space-y-4">
+        <Badge variant="default">Default</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+        <Badge variant="destructive">Destructive</Badge>
+        <Badge variant="outline">Outline</Badge>
+      </div>
+    )
+  },
+}