@anker-in/headless-ui 0.0.20 → 0.0.22

package/src/components/button.tsx

@@ -11,14 +11,13 @@ import { cn } from '../helpers/index.js'
  * Button Variants
  */
 const buttonVariants = cva(
-  'ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-whitespace-nowrap ai-text-sm ai-font-medium ai-transition-colors focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-pointer-events-none disabled:ai-opacity-50',
+  'ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-whitespace-nowrap ai-text-sm ai-font-medium ai-transition-colors focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-pointer-events-none',
   {
     variants: {
       variant: {
-        primary:
-          'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground',
+        primary: 'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ',
         secondary:
-          'ai-bg-btn-secondary ai-border-primary ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground ai-border ai-border-solid',
+          'ai-bg-btn-secondary ai-border-primary ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary ai-border ai-border-solid',
         link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',
         ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',
       },
@@ -33,6 +32,11 @@ const buttonVariants = cva(
         none: '',
         slide: '',
       },
+      state: {
+        default: '',
+        disabled: '!ai-cursor-not-allowed !ai-pointer-events-auto',
+        loading: '',
+      },
     },
     compoundVariants: [
       {
@@ -47,11 +51,33 @@ const buttonVariants = cva(
         class:
           'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-secondary before:ai-bg-btn-secondary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0  before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0',
       },
+      {
+        variant: 'primary',
+        state: 'loading',
+        class: 'ai-bg-btn-primary',
+      },
+      {
+        variant: 'secondary',
+        state: 'loading',
+        class:
+          'ai-bg-btn-secondary disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground',
+      },
+      {
+        variant: 'primary',
+        state: 'disabled',
+        class: 'disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground',
+      },
+      {
+        variant: 'secondary',
+        state: 'disabled',
+        class: 'disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground',
+      },
     ],
     defaultVariants: {
       variant: 'primary',
       size: 'base',
       hoverEffect: 'none',
+      state: 'default',
     },
   }
 )
@@ -65,6 +91,9 @@ const loadingSvgVariants = cva('', {
       ghost: 'ai-stroke-primary',
     },
   },
+  defaultVariants: {
+    variant: 'primary',
+  },
 })
 
 export interface ButtonProps
@@ -98,17 +127,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ) => {
     const Comp = asChild ? Slot : 'button'
     const isInactive = disabled || loading
+    const state = loading ? 'loading' : disabled ? 'disabled' : 'default'
 
     return (
       <Comp
         disabled={isInactive}
-        className={cn(
-          buttonVariants({ variant, size, hoverEffect }),
-          {
-            'ai-cursor-not-allowed': isInactive,
-          },
-          className
-        )}
+        className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}
         ref={ref}
         {...props}
       >

package/src/components/index.ts

@@ -15,4 +15,5 @@ export * from './radio.js'
 export * from './dialog.js'
 export * from './text.js'
 export * from './heading.js'
+export { default as Picture } from './picture.js'
 export { default as Theme } from './theme.js'

package/src/components/picture.tsx

@@ -0,0 +1,99 @@
+'use client'
+import React, { useCallback, useMemo } from 'react'
+
+const APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']
+
+const MAX_SIZE = 3960
+const FIXED_MAX_SIZE = 3980
+
+export interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  /** picture 内部img 标签的类名 */
+  imgClassName?: string
+  /** 图片url , 支持传入不同分辨率下的图片，比如，格式 "url1 1920， url2 1080, url3 767" */
+  source?: string
+  /** 图片质量 */
+  quality?: number
+  /** 响应式图片，对应picture 下source 的max-width */
+  deviceSizes?: number[]
+}
+
+const isMatchDomain = (srcDomain: string) => {
+  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)
+}
+const idMatchFileExtensions = (fileName: string = '') => /\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)
+
+const Picture = ({
+  imgClassName = '',
+  source = '',
+  quality = 2,
+  deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],
+  ...rest
+}: PictureProps) => {
+  const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {
+    const size = width
+    try {
+      const parsedUrl = new URL(src)
+      if (!isMatchDomain(parsedUrl.hostname)) {
+        return src
+      }
+      const fileName = parsedUrl.pathname.split('/').pop() || ''
+      if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {
+        const [name, extension] = fileName.split('.')
+        return `${parsedUrl.origin}${parsedUrl.pathname.replace(
+          fileName,
+          `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`
+        )}`
+      }
+    } catch (error) {
+      return src
+    }
+  }, [])
+
+  const sourceSrcSet = useCallback(
+    ({ srcArr, width }: { srcArr: string[][]; width: number }) => {
+      const computedWidth = width * quality
+      const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })
+      let result
+      srcArr.forEach(ele => {
+        var img = ele[0]
+        if (ele.length > 1 && parseInt(ele[1], 10) >= width) {
+          result = imgSrcSetsize({ src: img, width: computedWidth })
+        }
+      })
+      const srcset = result || def
+      return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />
+    },
+    [imgSrcSetsize, quality]
+  )
+
+  const sourceList = useMemo(() => {
+    if (typeof source !== 'string' || !source) return []
+    let srcArr
+    try {
+      srcArr = source
+        .replace(/[\r\n]/g, '')
+        .replace(/\s\s+/g, ' ')
+        .split(',')
+        .map(item => item.split(' ').filter(Boolean))
+    } catch (error) {
+      console.log(error)
+      return []
+    }
+    const sourceList = deviceSizes.map(width => {
+      return sourceSrcSet({ srcArr, width })
+    })
+
+    const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })
+
+    sourceList.push(<img key="default" src={img} className={`ai-w-full ${imgClassName}`} {...rest} />)
+    return sourceList
+  }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])
+
+  return (
+    <picture className={`ai-block ai-overflow-hidden ${rest.className}`}>
+      {sourceList}
+      {rest.children}
+    </picture>
+  )
+}
+export default Picture

package/src/helpers/index.ts

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

package/src/helpers/utils.ts

@@ -4,3 +4,5 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function noop(): any {}

package/src/stories/badge.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Badge } from '../components/index'
+import { Badge } from '../components/index.js'
 import React from 'react'
 
 const meta = {

package/src/stories/button.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { SearchIcon } from '@storybook/icons'
 
-import { Button } from '../components/index'
+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

package/src/stories/checkbox.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react/*'
-import { Checkbox } from '../components/index'
+import { Checkbox } from '../components/index.js'
 import React from 'react'
 
 const meta = {

package/src/stories/dialog.stories.tsx

@@ -9,7 +9,7 @@ import {
   DialogTitle,
   DialogTrigger,
   Input,
-} from '../components/index'
+} from '../components/index.js'
 import type { Meta, StoryObj } from '@storybook/react/*'
 
 const meta = {

package/src/stories/heading.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Heading } from '../components/index'
+import { Heading } from '../components/index.js'
 import React from 'react'
 
 const meta = {

package/src/stories/input.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import type { ComponentType } from 'react'
-import { Button, Input, InputSlot } from '../components/index'
+import { Button, Input, InputSlot } from '../components/index.js'
 import { SearchIcon } from '@storybook/icons'
 import React from 'react'
 

package/src/stories/picture.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Picture } from '../components/index.js'
+const imageUrl =
+  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219'
+
+const mobImageUrl =
+  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627'
+
+const imageUrl2 = 'https://http.cat/images/200.jpg'
+const mobImageUrl2 = 'https://http.cat/images/102.jpg'
+
+const meta = {
+  title: 'Components/Picture',
+  component: Picture,
+  parameters: {
+    layout: 'centerd',
+    docs: {
+      description: {
+        component: `响应式图片组件, 支持传入不同分辨率下的图片，比如，source="url1 1920， url2 1080, url3 767". 
+          当图片匹配域名（'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'）的时候，会自动在图片url后面添加图片尺寸后缀
+           `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Picture>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    source: `${imageUrl}, ${mobImageUrl} 768`,
+    imgClassName: 'ai-rounded-[24px]',
+  },
+}
+
+export const NotMatchDomain: Story = {
+  args: {
+    source: `${imageUrl2}, ${mobImageUrl2} 768`,
+    className: 'ai-w-[300px]',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '图片不匹配域名',
+      },
+    },
+  },
+}

package/src/stories/popover.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Popover, PopoverContent, PopoverTrigger } from '../components/index'
+import { Popover, PopoverContent, PopoverTrigger } from '../components/index.js'
 import type { Meta } from '@storybook/react/*'
 
 const meta = {

package/src/stories/radio.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react/*'
-import { RadioGroup, RadioGroupItem } from '../components/index'
+import { RadioGroup, RadioGroupItem } from '../components/index.js'
 import React, { type ComponentType } from 'react'
 
 const meta = {

package/src/stories/skeleton.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Skeleton } from '../components/index'
+import { Skeleton } from '../components/index.js'
 import React from 'react'
 
 const meta = {

package/src/stories/text.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Text } from '../components/index'
+import { Text } from '../components/index.js'
 import React from 'react'
 
 const meta = {

package/src/styles/global.css

@@ -6,12 +6,12 @@
   --btn-bg-color: #00a7e1;
   --btn-text-color: #ffffff;
   --btn-bg-active-color: #00a7e1;
-  --btn-bg-disabled-color: #ccdfe8;
+  --btn-bg-disabled-color: #ccdfe850;
 
   --btn-bg-secondary-color: #ffffff;
   --btn-text-secondary-color: #333333;
   --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
 
   --btn-radius: 0;
 
@@ -68,12 +68,12 @@
   --btn-bg-color: #00a7e1;
   --btn-text-color: #ffffff;
   --btn-bg-active-color: #02b8f4;
-  --btn-bg-disabled-color: #ccdfe8;
+  --btn-bg-disabled-color: #ccdfe850;
 
   --btn-bg-secondary-color: #ffffff;
   --btn-text-secondary-color: #333333;
   --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
 
   --btn-radius: 9999px;
 
@@ -84,12 +84,12 @@
   --btn-bg-color: #005d8e;
   --btn-text-color: #ffffff;
   --btn-bg-active-color: #669ebb;
-  --btn-bg-disabled-color: #ccdfe8;
+  --btn-bg-disabled-color: #ccdfe850;
 
   --btn-bg-secondary-color: #ffffff;
   --btn-text-secondary-color: #333333;
   --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
 
   --btn-radius: 40px;
 
@@ -158,12 +158,12 @@
   --btn-bg-color: #17bbef;
   --btn-text-color: #ffffff;
   --btn-bg-color-active: #48cffa;
-  --btn-bg-disabled-color: #ccdfe8;
+  --btn-bg-disabled-color: #ccdfe850;
 
   --btn-bg-secondary-color: #ffffff;
   --btn-text-secondary-color: #17bbef;
   --btn-bg-secondary-active-color: #17bbef;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
 
   --btn-radius: 30px;
 
@@ -174,7 +174,7 @@
 
 :root[data-brand-theme='ankerWork'] {
   --btn-bg-color: #00a7e1;
-  --btn-text-color: ##fff;
+  --btn-text-color: #fff;
   --btn-bg-active-color: #606060;
 
   --btn-radius: 0px;

package/style.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -515,6 +515,9 @@ video {
 .\!ai-pointer-events-none {
   pointer-events: none !important;
 }
+.\!ai-pointer-events-auto {
+  pointer-events: auto !important;
+}
 .ai-fixed {
   position: fixed;
 }
@@ -551,6 +554,9 @@ video {
 .ai-order-2 {
   order: 2;
 }
+.ai-block {
+  display: block;
+}
 .ai-flex {
   display: flex;
 }
@@ -639,8 +645,8 @@ video {
 .\!ai-cursor-default {
   cursor: default !important;
 }
-.ai-cursor-not-allowed {
-  cursor: not-allowed;
+.\!ai-cursor-not-allowed {
+  cursor: not-allowed !important;
 }
 .\!ai-select-none {
   -webkit-user-select: none !important;
@@ -924,12 +930,12 @@ video {
   --btn-bg-color: #00a7e1;
   --btn-text-color: #ffffff;
   --btn-bg-active-color: #00a7e1;
-  --btn-bg-disabled-color: #ccdfe8;
+  --btn-bg-disabled-color: #ccdfe850;
 
   --btn-bg-secondary-color: #ffffff;
   --btn-text-secondary-color: #333333;
   --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
 
   --btn-radius: 0;
 
@@ -986,12 +992,12 @@ video {
   --btn-bg-color: #00a7e1;
   --btn-text-color: #ffffff;
   --btn-bg-active-color: #02b8f4;
-  --btn-bg-disabled-color: #ccdfe8;
+  --btn-bg-disabled-color: #ccdfe850;
 
   --btn-bg-secondary-color: #ffffff;
   --btn-text-secondary-color: #333333;
   --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
 
   --btn-radius: 9999px;
 
@@ -1002,12 +1008,12 @@ video {
   --btn-bg-color: #005d8e;
   --btn-text-color: #ffffff;
   --btn-bg-active-color: #669ebb;
-  --btn-bg-disabled-color: #ccdfe8;
+  --btn-bg-disabled-color: #ccdfe850;
 
   --btn-bg-secondary-color: #ffffff;
   --btn-text-secondary-color: #333333;
   --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
 
   --btn-radius: 40px;
 
@@ -1076,12 +1082,12 @@ video {
   --btn-bg-color: #17bbef;
   --btn-text-color: #ffffff;
   --btn-bg-color-active: #48cffa;
-  --btn-bg-disabled-color: #ccdfe8;
+  --btn-bg-disabled-color: #ccdfe850;
 
   --btn-bg-secondary-color: #ffffff;
   --btn-text-secondary-color: #17bbef;
   --btn-bg-secondary-active-color: #17bbef;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
 
   --btn-radius: 30px;
 
@@ -1092,7 +1098,7 @@ video {
 
 :root[data-brand-theme='ankerWork'] {
   --btn-bg-color: #00a7e1;
-  --btn-text-color: ##fff;
+  --btn-text-color: #fff;
   --btn-bg-active-color: #606060;
 
   --btn-radius: 0px;