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

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'

package/src/components/alert.tsx

@@ -1,124 +0,0 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../helpers/index.js'
-
-const alertVariants = cva(
-  '[&>svg:first-child]:text-foreground relative w-full rounded-lg border px-4 py-3 text-sm [&>:first-child]:absolute [&>svg:first-child+div]:translate-y-[-3px] [&>svg:first-child]:left-4 [&>svg:first-child]:top-2 [&>svg:first-child~*]:pl-7',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground',
-        destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg:first-child]:text-destructive',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
-
-const Close = () => (
-  <svg
-    className="close absolute right-4 top-2 size-6 cursor-pointer !pl-0"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M15.3452 16.4762L12.1377 13.2687L8.92973 16.4767C8.61712 16.7893 8.11029 16.7891 7.79766 16.4765C7.48505 16.1638 7.4848 15.657 7.79741 15.3444L11.0054 12.1364L7.79791 8.92891C7.48503 8.61603 7.48503 8.10946 7.79765 7.79683C8.11015 7.48433 8.61688 7.48424 8.92973 7.79709L12.1372 11.0046L15.3452 7.79658C15.6577 7.48408 16.1646 7.48421 16.4772 7.79683C16.7899 8.10946 16.79 8.61641 16.4775 8.9289L13.2695 12.1369L16.477 15.3444C16.7899 15.6572 16.7898 16.1639 16.4773 16.4764C16.1647 16.789 15.6581 16.789 15.3452 16.4762L15.3452 16.4762Z"
-      fill="#1D1D1F"
-    />
-  </svg>
-)
-
-const IconMap = {
-  info: (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10.5" fill="#00BEFA" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.1249 7.13281C13.1249 6.51149 12.6213 6.00781 11.9999 6.00781C11.3786 6.00781 10.8749 6.51149 10.8749 7.13281V13.1328C10.8749 13.7541 11.3786 14.2578 11.9999 14.2578C12.6213 14.2578 13.1249 13.7541 13.1249 13.1328V7.13281ZM13.3499 16.6342C13.3499 15.8886 12.7455 15.2842 11.9999 15.2842C11.2543 15.2842 10.6499 15.8886 10.6499 16.6342C10.6499 17.3798 11.2543 17.9842 11.9999 17.9842C12.7455 17.9842 13.3499 17.3798 13.3499 16.6342Z"
-        fill="white"
-      />
-    </svg>
-  ),
-  success: (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12.5" cy="12.5" r="10.5" fill="#30D158" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18.3976 8.6772C18.0468 8.32635 17.478 8.32635 17.1271 8.6772L11.5586 14.2457L8.15843 10.8456C7.80758 10.4947 7.23874 10.4947 6.88789 10.8456C6.53704 11.1964 6.53704 11.7653 6.88789 12.1161L10.849 16.0772C10.8632 16.0914 10.8778 16.1051 10.8928 16.1182C10.9028 16.1293 10.9132 16.1402 10.9239 16.1509C11.2748 16.5018 11.8436 16.5018 12.1945 16.1509L18.3976 9.94773C18.7485 9.59688 18.7485 9.02805 18.3976 8.6772Z"
-        fill="white"
-      />
-    </svg>
-  ),
-  warning: (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10.5" fill="#FFC24D" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.1249 7.13281C13.1249 6.51149 12.6213 6.00781 11.9999 6.00781C11.3786 6.00781 10.8749 6.51149 10.8749 7.13281V13.1328C10.8749 13.7541 11.3786 14.2578 11.9999 14.2578C12.6213 14.2578 13.1249 13.7541 13.1249 13.1328V7.13281ZM13.3499 16.6342C13.3499 15.8886 12.7455 15.2842 11.9999 15.2842C11.2543 15.2842 10.6499 15.8886 10.6499 16.6342C10.6499 17.3798 11.2543 17.9842 11.9999 17.9842C12.7455 17.9842 13.3499 17.3798 13.3499 16.6342Z"
-        fill="white"
-      />
-    </svg>
-  ),
-  error: (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10.5" fill="#FF4D4D" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.1249 7.13281C13.1249 6.51149 12.6213 6.00781 11.9999 6.00781C11.3786 6.00781 10.8749 6.51149 10.8749 7.13281V13.1328C10.8749 13.7541 11.3786 14.2578 11.9999 14.2578C12.6213 14.2578 13.1249 13.7541 13.1249 13.1328V7.13281ZM13.3499 16.6342C13.3499 15.8886 12.7455 15.2842 11.9999 15.2842C11.2543 15.2842 10.6499 15.8886 10.6499 16.6342C10.6499 17.3798 11.2543 17.9842 11.9999 17.9842C12.7455 17.9842 13.3499 17.3798 13.3499 16.6342Z"
-        fill="white"
-      />
-    </svg>
-  ),
-}
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> &
-    VariantProps<typeof alertVariants> & {
-      /**
-       * 状态
-       */
-      status?: 'success' | 'error' | 'warning' | 'info'
-      /**
-       * 是否可以关闭
-       */
-      closable?: boolean
-    }
->(({ className, variant, status, closable = false, children, ...props }, ref) => {
-  const icon = status ? IconMap[status] : null
-
-  return (
-    <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props}>
-      {icon}
-      {children}
-      {closable && <Close />}
-    </div>
-  )
-})
-Alert.displayName = 'Alert'
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
-  )
-)
-AlertTitle.displayName = 'AlertTitle'
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm text-[#86868C] [&_p]:leading-relaxed', className)} {...props} />
-  )
-)
-AlertDescription.displayName = 'AlertDescription'
-
-export { Alert, AlertTitle, AlertDescription }