@anker-in/headless-ui 0.0.5 → 0.0.7

package/src/components/button.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
+'use client'
+
+import * as 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 { type VariantProps, cva } from 'class-variance-authority'
 import Spinner from '../icons/spinner'
+import { cn } from '../helpers/index'
 
 /**
  * Button Variants
@@ -26,10 +28,30 @@ const buttonVariants = cva(
         lg: 'h-11 px-8',
         icon: 'size-10 rounded-full',
       },
+      /** hover 状态下的动画效果,需要注意不同variant 下的效果 */
+      hoverEffect: {
+        none: '',
+        slide: '',
+      },
     },
+    compoundVariants: [
+      {
+        variant: 'primary',
+        hoverEffect: 'slide',
+        class:
+          'before:rounded-btn hover:bg-btn-primary before:bg-btn-primary-active relative overflow-hidden before:absolute before:inset-y-0  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0',
+      },
+      {
+        variant: 'secondary',
+        hoverEffect: 'slide',
+        class:
+          'before:rounded-btn hover:bg-btn-secondary before:bg-btn-secondary-active relative overflow-hidden before:absolute before:inset-y-0  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0',
+      },
+    ],
     defaultVariants: {
       variant: 'primary',
       size: 'base',
+      hoverEffect: 'none',
     },
   }
 )
@@ -52,6 +74,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       size = 'base',
       children,
       variant,
+      hoverEffect = 'none',
       className,
       disabled = false,
       loading = false,
@@ -64,9 +87,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Comp
         disabled={disabled}
-        className={cn(buttonVariants({ variant, size, className }), {
-          'cursor-not-allowed': disabled,
-        })}
+        className={cn(
+          buttonVariants({ variant, size, hoverEffect }),
+          {
+            'cursor-not-allowed': disabled,
+          },
+          className
+        )}
         ref={ref}
         {...props}
       >
@@ -81,7 +108,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             <VisuallyHidden>{children}</VisuallyHidden>
           </>
         ) : (
-          children
+          <span className="z-[1]">{children}</span>
         )}
       </Comp>
     )

package/src/components/checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { CheckIcon } from '@radix-ui/react-icons'

package/src/components/index.ts

@@ -1,5 +1,5 @@
 // theme
-export { default as Theme } from './theme'
+// export { default as Theme } from './theme'
 
 // components
 export { default as Button } from './button'
@@ -13,3 +13,5 @@ export * from './dialog'
 export * from './popover'
 export * from './radio'
 export * from './dialog'
+export * from './text'
+export { default as Theme } from './theme'

package/src/components/input.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { cn } from '../helpers/index'
 import { ComponentPropsWithout, RemovedProps } from '@/helpers/component-props'

package/src/components/popover.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 

package/src/components/radio.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { CheckIcon } from '@radix-ui/react-icons'

package/src/components/skeleton.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { cn } from '../helpers/index'
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {

package/src/components/text.tsx

@@ -1,6 +1,23 @@
-import { cn } from '@/helpers'
+import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
-import React from 'react'
+import { cn } from '../helpers'
+import { VariantProps, cva } from 'class-variance-authority'
+
+const textVariants = cva('', {
+  variants: {
+    size: {
+      1: 'text-xs',
+      2: 'text-sm',
+      3: 'text-base',
+      4: 'text-lg',
+      5: 'text-xl',
+      6: 'text-2xl',
+      7: 'text-3xl',
+      8: 'text-4xl',
+      9: 'text-5xl',
+    },
+  },
+})
 
 type TextElement = React.ElementRef<'span'>
 interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
@@ -9,10 +26,20 @@ interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
   color?: string
 }
 
-const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
-  const { children, className, asChild, as: Tag = 'span', color, ...textProps } = props
+const Text = React.forwardRef<TextElement, TextProps & VariantProps<typeof textVariants>>((props, forwardedRef) => {
+  const { children, size, className, asChild, as: Tag = 'span', color, ...textProps } = props
   return (
-    <Slot {...textProps} ref={forwardedRef} className={cn(className, color)}>
+    <Slot
+      {...textProps}
+      ref={forwardedRef}
+      className={cn(
+        textVariants({
+          size: size,
+        }),
+        className,
+        color
+      )}
+    >
       {asChild ? children : <Tag>{children}</Tag>}
     </Slot>
   )
@@ -20,3 +47,4 @@ const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
 Text.displayName = 'Text'
 
 export { Text }
+export type { TextProps }

package/src/components/theme.tsx

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

package/src/stories/button.stories.tsx

@@ -29,6 +29,13 @@ const meta = {
       },
       options: ['sm', 'base', 'lg', 'icon'],
     },
+    hoverEffect: {
+      description: 'hover 状态下的动画效果，仅在variant是primary 和 secondary 时生效',
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'slide'],
+    },
   },
   args: {
     variant: 'primary',
@@ -37,6 +44,7 @@ const meta = {
     asChild: false,
     disabled: false,
     loading: false,
+    hoverEffect: 'none',
   },
 } satisfies Meta<typeof Button>
 

package/src/stories/text.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Text } from '../components/index'
+import React from 'react'
+
+const meta = {
+  title: 'Components/Text',
+  component: Text,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Text>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: ' The quick brown fox jumps over the lazy dog.',
+  },
+}
+
+const sizes = new Array(10).fill(0).map((_, i) => i + 1)
+export const All: Story = {
+  render() {
+    return (
+      <>
+        {sizes.map(size => (
+          <Text as="p" key={size} size={size as any}>
+            The quick brown fox jumps over the lazy dog.
+          </Text>
+        ))}
+      </>
+    )
+  },
+}

package/src/styles/global.css

@@ -155,7 +155,7 @@
 }
 
 /* TODO:   */
-:root[data-brand-theme='soundCore'] {
+:root[data-brand-theme='soundcore'] {
   --btn-bg-color: #17bbef;
   --btn-text-color: #ffffff;
   --btn-bg-color-active: #48cffa;