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

package/src/biz-components/HeroBanner/HeroBanner.tsx

@@ -1,103 +0,0 @@
-import React from "react"
-import type { HeroBannerProps } from "./types.js"
-import { Button, Text } from "../../components/index.js"
-import { cn } from "../../helpers/index.js"
-import { withStyles } from "../../shared/Styles.js"
-
-const HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(
-  ({ 
-    title, 
-    subtitle, 
-    background,
-    primaryButton,
-    secondaryButton,
-    theme = "light",
-    className,
-    products = [] 
-  }, ref) => {
-    const textColorClass = theme === "dark" ? "text-white" : "text-[#1D1D1F]"
-    const dividerColorClass = theme === "dark" ? "bg-white" : "bg-[#1D1D1F]"
-
-    return (
-      <div 
-        ref={ref} 
-        className={cn(
-          "relative flex min-h-[720px] w-full flex-col justify-between overflow-hidden bg-cover bg-center bg-no-repeat",
-          className
-        )}
-        style={{ backgroundImage: `url(${background})` }}
-      >
-        {/* 内容区域 */}
-        <div className="relative z-10 flex flex-col gap-8 px-32 pt-[307px]">
-          <div className="max-w-[686px] space-y-4">
-            <h1 className={cn(
-              "hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]",
-              textColorClass
-            )}>
-              {title}
-            </h1>
-            <p className={cn(
-              "hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",
-              textColorClass
-            )}>
-              {subtitle}
-            </p>
-          </div>
-          
-          {/* 按钮组 */}
-          <div className="flex items-center gap-4">
-            {secondaryButton && (
-              <Button
-                size="lg"
-                variant="nature"
-                theme={theme}
-                className="hero-banner-primary-button"
-                {...secondaryButton}
-              >
-                {secondaryButton.text}
-              </Button>
-            )}
-            {primaryButton && (
-              <Button
-                size="lg"
-                variant="secondary"
-                theme={theme}
-                {...primaryButton}
-                className="hero-banner-secondary-button bg-transparent border-black text-black hover:bg-black hover:text-white"
-              >
-                {primaryButton.text}
-              </Button>
-            )}
-          </div>
-        </div>
-
-        {/* 底部产品列表 */}
-        {products.length > 0 && (
-          <div className="relative z-10 flex items-center gap-3 px-32 pb-6">
-            {products.map((product, index) => (
-              <React.Fragment key={index}>
-                <Text
-                  className={cn(
-                    "hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",
-                    theme === "dark" ? "text-white" : "text-[#1D1D1F]"
-                  )}
-                >
-                  {product.title}
-                </Text>
-                {index < products.length - 1 && (
-                  <div className={cn("h-4 w-px", dividerColorClass)} />
-                )}
-              </React.Fragment>
-            ))}
-          </div>
-        )}
-      </div>
-    )
-  }
-)
-
-HeroBanner.displayName = "HeroBanner"
-
-export default withStyles(HeroBanner)
-
-

package/src/biz-components/HeroBanner/index.tsx

@@ -1 +0,0 @@
-export { default } from './HeroBanner.js'

package/src/biz-components/HeroBanner/types.ts

@@ -1,28 +0,0 @@
-import type { ButtonProps } from "../../components/button"
-
-export interface HeroBannerProps {
-  /** 主标题 */
-  title: string
-  /** 副标题/描述文本 */
-  subtitle: string
-  /** 背景图片URL */
-  background: string
-  /** 主按钮文本和配置 */
-  primaryButton?: {
-    text: string
-  } & Omit<ButtonProps, 'children'>
-  /** 次要按钮文本和配置 */
-  secondaryButton?: {
-    text: string
-  } & Omit<ButtonProps, 'children'>
-  /** 自定义类名 */
-  className?: string
-  /** 主题 */
-  theme?: "light" | "dark"
-  /** 底部产品列表 */
-  products?: Array<{
-    title: string
-    active?: boolean
-  }>
-}
-  

package/src/biz-components/Marquee/index.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import { cn } from '../../helpers/utils.js'
-import { default as FastMarquee } from 'react-fast-marquee'
-import { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'
-import { Picture, Text } from '../../components'
-
-const Marquee = React.forwardRef<HTMLDivElement, FastMarqueeProps>(
-  ({children, ...props}, ref) => {
-    return (
-      <FastMarquee
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </FastMarquee>
-    )
-  }
-)
-
-Marquee.displayName = 'Marquee'
-
-interface MarqueeListProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const MarqueeList = React.forwardRef<
-HTMLDivElement,
-MarqueeListProps
->(({ className, children, ...props }, ref) => {
-  return (
-    <div className={cn("flex gap-6 items-center md:gap-16", className)} ref={ref}>
-      {children}
-    </div>
-  )
-})
-
-MarqueeList.displayName = 'MarqueeList'
-
-interface MarqueeImageContentProps {
-  image: string
-  className?: string;
-}
-
-const MarqueeImageContent = ({ image, className }: MarqueeImageContentProps) => {
-  return (
-    <Picture 
-      source={image}
-      className={cn("aspect-w-[120] w-[72px] aspect-h-[80] md:w-[120px]", className)}
-      imgClassName="object-cover"
-    />
-  )
-}
-
-MarqueeImageContent.displayName = 'MarqueeImageContent'
-
-interface MarqueeTextContentProps {
-  text: string
-  className?: string;
-}
-
-const MarqueeTextContent = React.forwardRef<
-HTMLDivElement,
-MarqueeTextContentProps
->(({ text, className }, ref) => {
-  return (
-    <Text
-      as="div"
-      ref={ref}
-      html={text}
-      className={cn("size-14 text-nowrap flex items-center justify-center leading-[1.2] text-lines-2 font-medium", className)}
-    />
-  )
-})
-
-MarqueeTextContent.displayName = 'MarqueeTextContent'
-
-export { Marquee, MarqueeList, MarqueeImageContent, MarqueeTextContent }
-export type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps }

package/src/biz-components/MemberEquity/index.tsx

@@ -1,114 +0,0 @@
-import React from 'react';
-import { Button } from '../../components/index.js';
-import { withStyles } from '../../shared/Styles.js';
-import type { MemberEquityProps } from './types.js';
-
-const MemberEquity: React.FC<MemberEquityProps> = ({
-  title,
-  description,
-  backgroundImage,
-  primaryButton,
-  secondaryButton,
-  shape = 'square',
-  theme = 'light',
-  className = '',
-}) => {
-
-  const handleButtonPrimaryClick = () => {
-    // 执行主按钮的点击事件
-
-  }
-
-  const handleButtonSecondaryClick = () => {
-    // 执行副按钮的点击事件
-  }
-
-  return (
-    <section
-      data-ui-component-id="MemberEquity"
-      className={`
-        relative w-full overflow-hidden bg-[#242426]
-        ${shape === 'round' ? 'rounded-none sm:rounded-lg md:rounded-xl lg:rounded-2xl' : ''}
-        ${className}
-      `}
-    >
-
-      <div
-        className="absolute inset-0 w-full h-full"
-        style={{
-          backgroundImage: `
-            radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
-            url(${backgroundImage})
-          `,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
-      />
-      <div className={`
-        relative w-full mx-auto
-        aspect-[343/200] xs:aspect-[343/200]
-        sm:aspect-[343/200] 
-        md:aspect-[592/336]
-        lg:aspect-[800/448]
-        xl:aspect-[1000/560]
-        flex items-center
-      `}>
-        <div className={`
-          w-full px-4 sm:px-6 md:px-[76px] lg:px-[111px] xl:px-[139px]
-          flex flex-col gap-4 sm:gap-5 md:gap-6 lg:gap-7 xl:gap-8
-        `}>
-          <div className="flex flex-col gap-2 sm:gap-2 md:gap-3 lg:gap-3 xl:gap-4">
-            <h2 className={`
-              member-equity-title font-mont font-bold text-white tracking-[-0.04em]
-              text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-[32px]
-              leading-[1.2]
-              max-w-[280px] sm:max-w-[300px] md:max-w-[400px] lg:max-w-[500px] xl:max-w-[547px]
-            `}>
-              {title}
-            </h2>
-            <p className={`
-              member-equity-description font-pingfang font-semibold text-white tracking-[-0.02em]
-              text-sm sm:text-sm md:text-base lg:text-lg xl:text-lg
-              leading-[1.4]
-              max-w-[260px] sm:max-w-[286px] md:max-w-[350px] lg:max-w-[426px] xl:max-w-[547px]
-            `}>
-              {description}
-            </p>
-          </div>
-
-          {/* 按钮组 */}
-          <div className="flex items-center gap-3 sm:gap-3 md:gap-4 lg:gap-4 xl:gap-4">
-            <Button
-              theme={theme}
-              variant="primary"
-              onClick={handleButtonPrimaryClick}
-              className={`
-                member-equity-button-primary bg-transparent border-white border-[1px] text-white text-xs sm:text-sm md:text-sm lg:text-base xl:text-base
-                px-4 sm:px-5 md:px-6 lg:px-7 xl:px-7 hover:bg-white hover:text-black
-                py-2 sm:py-[10px] md:py-[11px] lg:py-[12px] xl:py-[14px]
-                ${shape === 'round' ? 'rounded-[16px] sm:rounded-[19px] md:rounded-[20px] lg:rounded-[22px] xl:rounded-[24px]' : ''}
-              `}
-            >
-              {primaryButton.text}
-            </Button>
-            <Button
-              theme={theme}
-              variant="secondary"
-              onClick={handleButtonSecondaryClick}
-              className={`
-                member-equity-button-secondary text-xs sm:text-sm md:text-sm lg:text-base xl:text-base
-                px-4 sm:px-5 md:px-6 lg:px-7 xl:px-7
-                py-2 sm:py-[10px] md:py-[11px] lg:py-[12px] xl:py-[14px]
-                ${shape === 'round' ? 'rounded-[16px] sm:rounded-[19px] md:rounded-[20px] lg:rounded-[22px] xl:rounded-[24px]' : ''}
-              `}
-            >
-              {secondaryButton.text}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default withStyles(MemberEquity); 

package/src/biz-components/MemberEquity/types.ts

@@ -1,26 +0,0 @@
-import type { ComponentCommonProps } from '../../types/props.js';
-
-export interface MemberEquityProps extends ComponentCommonProps {
-  /** 标题 */
-  title: string;
-  /** 描述文本 */
-  description: string;
-  /** 背景图片 URL */
-  backgroundImage: string;
-  /** 主按钮配置 */
-  primaryButton: {
-    text: string;
-    href: string;
-  };
-  /** 副按钮配置 */
-  secondaryButton: {
-    text: string;
-    href: string;
-  };
-  /** 形状 */
-  shape?: 'round' | 'square';
-  /** 主题 */
-  theme?: 'light' | 'dark';
-  /** 自定义类名 */
-  className?: string;
-}

package/src/biz-components/Shelf/Shelf.tsx

@@ -1,22 +0,0 @@
-/**
- * 这是一个demo 模版
- */
-import { withStyles } from '../../shared/Styles.js'
-import type { ShelfProps } from './types.js'
-
-const Shelf = (props: ShelfProps) => {
-  console.log('~ Shelf props', props)
-  return (
-    <div>
-      <h1 className="text-2xl font-bold">{props.title}</h1>
-      <h2>{props.subtitle}</h2>
-      <div>
-        {props.products.map(product => (
-          <div key={product.sku}>{product.name}</div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default withStyles(Shelf)

package/src/biz-components/Shelf/index.ts

@@ -1 +0,0 @@
-export { default } from './Shelf.js'

package/src/biz-components/Shelf/types.ts

@@ -1,6 +0,0 @@
-export type ShelfProps = {
-  id: string
-  title: string
-  subtitle: string
-  products: any[]
-}

package/src/biz-components/ShelfDisplay/index.tsx

@@ -1,142 +0,0 @@
-import React from 'react'
-import { cn } from '../../helpers/utils'
-import Picture from '../../components/picture'
-import Button from '../../components/button'
-export interface ShelfDisplayItem {
-  /** 产品图片*/
-  img: string
-  /** 折扣后价格*/
-  price: string
-  title: string
-  /** 折扣前价格*/
-  basePrice: string
-  subTitle: string
-  /** 标签*/
-  tagItems: string[]
-}
-
-export interface ShelfDisplayProps {
-  products: ShelfDisplayItem[]
-  /** 卡片形状 */
-  itemShape?: 'round' | 'square'
-  className?: string
-  /** 主题色*/
-  theme?: 'light' | 'dark'
-  /** 按钮形状 */
-  shape?: 'round' | 'square'
-  /** 主按钮配置 */
-  primaryButton?: string
-  /** 副按钮配置 */
-  secondaryButton?: string
-  /** 按钮事件*/
-  event?: {
-    primaryButton?: {
-      onClick: (v: any) => void
-    },
-    secondaryButton?: {
-      onClick: (v: any) => void
-    }
-  },
-}
-
-const ShelfDisplay: React.FC<ShelfDisplayProps> = ({
-  className = '',
-  shape = 'square',
-  itemShape = 'square',
-  products = [],
-  primaryButton,
-  secondaryButton,
-  event
-}) => {
-
-  const onPrimaryButton = (params: ShelfDisplayItem) => {
-    event?.primaryButton?.onClick?.(params)
-  }
-
-  const onSecondaryButton = (params: ShelfDisplayItem) => {
-    event?.secondaryButton?.onClick(params)
-  }
-
-  return (
-    <>
-      <div className={cn('w-full', className)}>
-        <div className={cn('flex overflow-hidden', 'md:px-[140px] lg:px-[268px]')}>
-          <div className={cn('w-full flex', 'gap-3 md:gap-4 overflow-x-auto overflow-y-hidden')}>
-            {products?.map((item, index) => {
-              return (
-                <div
-                  key={index}
-                  className={cn(
-                    'bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px]',
-                    'md:min-w-[316px] md:max-w-[316px] lg:min-w-[404px] lg:max-w-[404px] lg:pt-4 lg:px-6 lg:pb-6',
-                    itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'
-                  )}
-                >
-                  <div className={cn('h-[137px] overflow-hidden relative inline-block mb-2', 'lg:mb-3 lg:h-[195px]')}>
-                    <Picture
-                      source={item?.img || ''}
-                      className="h-full [&_img]:w-auto object-cover flex justify-center"
-                    />
-                  </div>
-                  <div className="mb-1 flex gap-1 flex-wrap lg:mb-2">
-                    {item?.tagItems?.map((tag, index) => {
-                      return (
-                        <div
-                          key={index}
-                          className="border-2 border-[#00BEFA] px-2 py-1 text-sm font-bold rounded-3xl text-[#00BEFA] lg:text-base"
-                        >
-                          {tag}
-                        </div>
-                      )
-                    })}
-                  </div>
-                  <p className="flex-1 font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] lg:text-2xl">
-                    {item?.title || ''}
-                  </p>
-                  <h3 className="mt-1 mb-5 text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] lg:mt-2 lg:mb-6 lg:text-lg">
-                    {item?.subTitle || ''}
-                  </h3>
-                  <div className="mb-2 flex items-center">
-                    <div className="font-bold text-xl text-[#1D1D1F] lg:text-2xl">
-                      {item?.price || ''}
-                    </div>
-                    <div className="ml-1 font-bold text-xl text-[#86868C] lg:text-2xl">
-                      {item?.basePrice || ''}
-                    </div>
-                  </div>
-                  {/* 按钮组 */}
-                  <div className="flex items-center gap-3">
-                    <Button
-                      variant="primary"
-                      onClick={() => onPrimaryButton(item)}
-                      className={`
-                        flex-1 bg-transparent border-[#1D1D1F] border box-border text-[#1D1D1F] text-xs md:text-sm lg:text-base
-                        px-4 md:px-6 lg:px-7 hover:bg-transparent hover:text-black py-2 md:py-2.5 lg:py-3 tracking-[-0.04em]
-                        ${shape === 'round' ? 'rounded-[20px] lg:rounded-3xl' : ''}
-                      `}
-                    >
-                      {primaryButton || ''}
-                    </Button>
-                    <Button
-                      variant="secondary"
-                      onClick={() => onSecondaryButton(item)}
-                      className={`
-                        flex-1 bg-[#1D1D1F] border-[#1D1D1F] border text-white box-border text-xs md:text-sm lg:text-base
-                        px-4 md:px-6 lg:px-7 py-2 md:py-2.5 lg:py-3 tracking-[-0.04em]
-                        ${shape === 'round' ? 'rounded-[20px] lg:rounded-3xl' : ''}
-                      `}
-                    >
-                      {secondaryButton || ''}
-                    </Button>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default ShelfDisplay

package/src/biz-components/Slogan/index.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { cn } from '../../helpers/utils.js'
-import { Heading, Text } from '../../components/index.js'
-import { withStyles } from '../../shared/Styles.js'
-import type { SloganProps } from './types.js'
-
-const Slogan = React.forwardRef<HTMLDivElement, SloganProps>(
-  ({ title, features, className }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex flex-col items-start md:flex-row md:items-end justify-center md:justify-between text-center w-full',
-          'px-4 sm:px-6 md:px-8 lg:px-16 xl:px-32',
-          'gap-8 py-8 sm:py-10 md:py-12 lg:py-16 xl:py-20',
-          className
-        )}
-      >
-        <Heading
-          as="h2"
-          size={2}
-          weight={"bold"}
-          align={"left"}
-          className='slogan-title text-[#1D1D1F] !leading-none text-[40px] md:text-[40px] lg:text-[48px] xl:text-[64px]'
-        >
-          {title}
-        </Heading>
-        {features && features.length > 0 && (
-          <div className="flex flex-row w-full gap-3 max-w-[423px] items-center">
-            {features.slice(0, 3).map((feature, index) => (
-              <React.Fragment key={index}>
-                {index > 0 && (
-                  <div className="self-stretch w-px bg-[#D9D9D9]" />
-                )}
-                <div className="flex-1">
-                  <Text 
-                    align="left" 
-                    className="slogan-feature-text font-medium line-clamp-3 md:line-clamp-2 text-[#1D1D1F] text-[12px] leading-[1.4] sm:text-[13px] md:text-[14px]" 
-                    html={feature}
-                  />
-                </div>
-              </React.Fragment>
-            ))}
-          </div>
-        )}
-      </div>
-    )
-  }
-)
-
-Slogan.displayName = 'Slogan'
-
-export default withStyles(Slogan)

package/src/biz-components/Slogan/types.ts

@@ -1,25 +0,0 @@
-export interface Feature {
-    /**
-     * 特性标题
-     */
-    title: string
-    /**
-     * 特性描述
-     */
-    description: string
-  }
-  
-  export interface SloganProps {
-    /**
-     * 主标题
-     */
-    title: string
-    /**
-     * 特性列表，最多支持3个
-     */
-    features?: string[]
-    /**
-     * 自定义类名
-     */
-    className?: string
-  }

package/src/biz-components/index.ts

@@ -1,11 +0,0 @@
-export { default as Shelf } from './Shelf/index.js'
-export { default as BrandEquity } from './BrandEquity/index.js'
-export { default as MemberEquity } from './MemberEquity/index.js'
-export { default as Slogan } from './Slogan/index.js'
-export { default as ShelfDisplay } from './ShelfDisplay/index.js'
-export { default as Evaluate } from './Evaluate/index.js'
-export { default as Category } from './Category/index.js'
-export { default as HeroBanner } from './HeroBanner/index.js'
-
-
-export * from './Marquee'