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

package/src/components/input-number.tsx

@@ -0,0 +1,216 @@
+'use client'
+import { cn } from '../helpers/index.js'
+import { Slot } from '@radix-ui/react-slot'
+import { PlusIcon, MinusIcon } from '@radix-ui/react-icons'
+import React, { useState, useEffect, forwardRef } from 'react'
+import type { ChangeEvent, KeyboardEvent, FocusEvent } from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
+
+// 定义 InputNumber 的样式变体
+const InputNumberVariants = cva('size-full border bg-transparent text-center text-base outline-none', {
+  variants: {
+    status: {
+      default: 'border-lines-1 group-hover:border-lines-2',
+      success: 'border-lines-3 group-hover:border-lines-3',
+      warning: 'border-lines-4 group-hover:border-lines-4',
+      error: 'border-lines-5 group-hover:border-lines-5',
+    },
+    disabled: {
+      true: 'border-lines-1 group-hover:border-lines-1 text-info-quaternary cursor-not-allowed',
+    },
+  },
+})
+
+type ColorType = 'default' | 'success' | 'warning' | 'error' | null
+
+// 定义组件类型，继承 div 标签标准属性
+type InputNumberElement = React.ElementRef<'div'>
+
+type InputNumberProps = {
+  /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
+  asChild?: boolean
+  /** 类名*/
+  className?: string
+  /** 输入框下方提示文本，会根据不同的 status 呈现不同的样式*/
+  tips?: string
+  /** 文本框状态*/
+  status?: ColorType
+  /** 数字输入框的值 */
+  value?: number
+  /** 数字输入框的初始值 */
+  defaultValue?: number
+  /** 数值改变步数 */
+  step?: number
+  /** 最小值 */
+  min?: number
+  /** 最大值 */
+  max?: number
+  /** 是否禁用*/
+  disabled?: boolean
+  /** 是否只读*/
+  readonly?: boolean
+  /** 样式*/
+  style?: React.CSSProperties
+  /** 值变化时触发*/
+  onChange?: (value: number) => void
+  /** 失去焦点时触发*/
+  onBlur?: (value: number, e: FocusEvent) => void
+  /** 按下回车键时触发*/
+  onEnter?: (value: number, e: KeyboardEvent) => void
+} & VariantProps<typeof InputNumberVariants> &
+  ComponentPropsWithout<'div', RemovedProps>
+
+const InputNumber = forwardRef<InputNumberElement, InputNumberProps>(
+  (
+    {
+      value,
+      defaultValue = 0,
+      step = 1,
+      min = 0,
+      max,
+      tips,
+      style,
+      children,
+      asChild = false,
+      disabled = false,
+      readonly = false,
+      status = 'default',
+      className,
+      onChange,
+      onBlur,
+      onEnter,
+    },
+    ref
+  ) => {
+    const [inputValue, setInputValue] = useState<number | string>(defaultValue)
+
+    const Comp = asChild ? Slot : 'div'
+
+    const baseClassName = cn('border-lines-1 flex size-12 items-center justify-center border text-base', {
+      'group-hover:border-lines-2': !disabled,
+      'text-info-quaternary cursor-not-allowed': disabled,
+    })
+
+    const textColor = (type: ColorType, flag: boolean) => {
+      if (flag) return 'text-lines-1'
+      return {
+        default: 'text-lines-1',
+        success: 'text-lines-3',
+        warning: 'text-lines-4',
+        error: 'text-lines-5',
+      }[type || 'default']
+    }
+
+    const isValue = (params: string) => {
+      return params === '' || /^[0-9]+$/.test(params)
+    }
+
+    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+      if (disabled || readonly) return
+      const value = e.target.value
+      // 允许空字符串，或仅包含整数的字符串
+      if (isValue(value)) {
+        setInputValue(value)
+        if (value !== '') {
+          let newValue = Number(value)
+          if (max !== undefined && newValue > max) {
+            newValue = max
+          }
+          if (min !== undefined && newValue < min) {
+            newValue = min
+          }
+          onChange?.(newValue)
+        }
+      }
+    }
+
+    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+      if (disabled || readonly) return
+      if (inputValue === '' || isNaN(Number(inputValue))) {
+        const newValue = min !== undefined ? min : 0
+        setInputValue(newValue)
+        onBlur?.(newValue, e)
+      } else {
+        const newValue = Number(inputValue)
+        setInputValue(newValue)
+        onBlur?.(newValue, e)
+      }
+    }
+
+    const increment = () => {
+      if (disabled || readonly) return
+      let newValue = Number(inputValue) + (step ? Math.ceil(Number(step)) : 1)
+      if (max !== undefined && newValue > max) {
+        newValue = max
+      }
+      setInputValue(newValue)
+      onChange?.(newValue)
+    }
+
+    const decrement = () => {
+      if (disabled || readonly) return
+      let newValue = Number(inputValue) - (step ? Math.ceil(Number(step)) : 1)
+      if (min !== undefined && newValue < min) {
+        newValue = min
+      }
+      setInputValue(newValue)
+      onChange?.(newValue)
+    }
+
+    const handleKeyDown = (e: any) => {
+      if (disabled || readonly) return
+      if (e.key === 'Enter') {
+        const initalValue = e.target?.value
+        onEnter?.(initalValue, e)
+      }
+    }
+
+    useEffect(() => {
+      setInputValue(value || 0)
+    }, [value])
+
+    return (
+      <Comp
+        ref={ref}
+        {...(style ? { style: style } : null)}
+        className={cn({ 'group flex items-center': !asChild }, className)}
+      >
+        {asChild ? (
+          children
+        ) : (
+          <>
+            <button onClick={increment} className={baseClassName}>
+              <PlusIcon />
+            </button>
+            <div className="relative mx-1.5 h-[52px] w-[105px]">
+              <input
+                type="text"
+                value={inputValue}
+                disabled={disabled}
+                readOnly={readonly}
+                onBlur={handleBlur}
+                onKeyDown={handleKeyDown}
+                onChange={handleInputChange}
+                className={cn(InputNumberVariants({ status, disabled }))}
+              />
+              {tips ? (
+                <span className={cn(textColor(status, disabled), 'absolute -bottom-4 left-0 w-full truncate text-xs')}>
+                  {tips}
+                </span>
+              ) : null}
+            </div>
+            <button onClick={decrement} className={baseClassName}>
+              <MinusIcon />
+            </button>
+          </>
+        )}
+      </Comp>
+    )
+  }
+)
+
+InputNumber.displayName = 'InputNumber'
+
+export default InputNumber
+export type { InputNumberProps }

package/src/components/input.tsx

@@ -6,13 +6,13 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const inputVariants = cva(
-  'ai-border-input ai-w-full ai-bg-background focus-visible:ai-outline-none ai-flex ai-flex-row ai-items-center ai-overflow-hidden ai-rounded-md ai-border',
+  'border-input w-full bg-background focus-visible:outline-none flex flex-row items-center overflow-hidden rounded-md border',
   {
     variants: {
       size: {
-        sm: 'ai-h-8 ai-text-sm',
-        base: 'ai-h-10',
-        lg: 'ai-h-12 ai-text-lg',
+        sm: 'h-8 text-sm',
+        base: 'h-10',
+        lg: 'h-12 text-lg',
       },
     },
     defaultVariants: {
@@ -43,9 +43,9 @@ const InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, for
     <div
       ref={forwardedRef}
       {...slotProps}
-      className={cn('ai-flex ai-h-full ai-items-center', className, {
-        '-ai-order-1': side === 'left',
-        'ai-order-2': side === 'right',
+      className={cn('flex h-full items-center', className, {
+        '-order-1': side === 'left',
+        'order-2': side === 'right',
       })}
     >
       {children}
@@ -56,14 +56,14 @@ const InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, for
 const Input = React.forwardRef<React.ElementRef<'input'>, InputProps>(
   ({ className, type, size, children, ...props }, ref) => {
     if (!React.isValidElement(children)) {
-      return <input type={type} className={cn(inputVariants({ size }), 'ai-px-3', className)} ref={ref} {...props} />
+      return <input type={type} className={cn(inputVariants({ size }), 'px-3', className)} ref={ref} {...props} />
     }
     return (
       <div className={cn(inputVariants({ size }), className)}>
         <input
           type={type}
           className={cn(
-            'placeholder:ai-text-muted-foreground ai-flex ai-size-full file:ai-border-0 file:ai-bg-transparent file:ai-font-medium focus-visible:ai-outline-none disabled:ai-cursor-not-allowed disabled:ai-opacity-50 ai-px-3'
+            'placeholder:text-muted-foreground flex size-full file:border-0 file:bg-transparent file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 px-3'
           )}
           ref={ref}
           {...props}

package/src/components/link.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import type { ReactNode } from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cn } from '../helpers/index.js'
+import { type VariantProps, cva } from 'class-variance-authority'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
+
+// 定义 link 的样式变体
+const linkVariants = cva('tracking transition-colors', {
+  variants: {
+    size: {
+      small: 'text-xs', // 小
+      medium: 'text-sm', // 中
+      large: 'text-base', // 大
+    },
+    underline: {
+      none: 'no-underline', // 不展示
+      hover: 'hover:underline', // hover展示下划线
+      always: 'underline', // 永久展示
+    },
+    hoverColor: {
+      none: 'text-current', // 鼠标进入无变化
+      hover: 'hover:text-brand-0', // 鼠标进入改变字体颜色
+    },
+  },
+})
+// 定义组件类型，继承 a 标签标准属性
+type LinkElement = React.ElementRef<'a'>
+type LinkProps = {
+  /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
+  asChild?: boolean
+  /** 类名*/
+  className?: string
+  /** 禁用链接 */
+  disabled?: boolean
+  /** 后置图标*/
+  suffixIcon?: ReactNode
+  /** 跳转链接*/
+  href?: string
+  /** 样式*/
+  style?: React.CSSProperties
+  /** 点击事件，禁用状态无法触发*/
+  onClick?: Function
+} & VariantProps<typeof linkVariants> &
+  ComponentPropsWithout<'a', RemovedProps>
+
+const Link = React.forwardRef<LinkElement, LinkProps>(
+  (
+    {
+      children,
+      size = 'small',
+      hoverColor,
+      className,
+      asChild = false,
+      href,
+      style,
+      underline,
+      disabled = false,
+      suffixIcon,
+      onClick,
+      ...props // 这里会包含 href、target、rel 等标准 anchor 属性
+    }: LinkProps,
+    forwardedRef
+  ) => {
+    const Comp = asChild ? Slot : 'a'
+
+    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+      !disabled && onClick?.(event)
+      if (disabled || !href) {
+        event.preventDefault()
+        return
+      }
+    }
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        onClick={handleClick}
+        href={disabled ? undefined : href}
+        className={cn(linkVariants({ size, underline, hoverColor }), className, {
+          'flex items-center': suffixIcon,
+          'cursor-pointer': !disabled,
+          'text-info-quaternary cursor-not-allowed': disabled,
+        })}
+        {...(style ? { style: style } : null)}
+        {...props}
+      >
+        <>
+          {children}
+          <span className="svg">{suffixIcon}</span>
+        </>
+      </Comp>
+    )
+  }
+)
+Link.displayName = 'Link'
+
+export default Link
+export type { LinkProps }

package/src/components/picture.tsx

@@ -27,6 +27,7 @@ const Picture = ({
   source = '',
   quality = 2,
   deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],
+  className,
   ...rest
 }: PictureProps) => {
   const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {
@@ -85,12 +86,12 @@ const Picture = ({
 
     const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })
 
-    sourceList.push(<img key="default" src={img} className={`ai-w-full ${imgClassName}`} {...rest} />)
+    sourceList.push(<img key="default" src={img} className={`w-full ${imgClassName}`} {...rest} />)
     return sourceList
   }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])
 
   return (
-    <picture className={`ai-block ai-overflow-hidden ${rest.className}`}>
+    <picture className={`block overflow-hidden ${className}`}>
       {sourceList}
       {rest.children}
     </picture>

package/src/components/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'ai-bg-popover ai-text-popover-foreground data-[state=open]:ai-animate-in data-[state=closed]:ai-animate-out data-[state=closed]:ai-fade-out-0 data-[state=open]:ai-fade-in-0 data-[state=closed]:ai-zoom-out-95 data-[state=open]:ai-zoom-in-95 data-[side=bottom]:ai-slide-in-from-top-2 data-[side=left]:ai-slide-in-from-right-2 data-[side=right]:ai-slide-in-from-left-2 data-[side=top]:ai-slide-in-from-bottom-2 ai-z-50 ai-w-72 ai-rounded-md ai-border ai-p-4 ai-shadow-md ai-outline-none',
+        '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}

package/src/components/radio.tsx

@@ -12,13 +12,13 @@ const RadioContext = React.createContext<{ size?: 'sm' | 'base' | 'lg' }>({
 })
 
 const radioGroupVariants = cva(
-  'ai-border-primary ai-text-primary ai-ring-offset-background focus-visible:ai-ring-ring ai-aspect-square ai-rounded-full ai-border focus:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50 data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground',
+  'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
   {
     variants: {
       size: {
-        sm: 'ai-size-[14px]',
-        base: 'ai-size-4',
-        lg: 'ai-size-5',
+        sm: 'size-[14px]',
+        base: 'size-4',
+        lg: 'size-5',
       },
     },
     defaultVariants: {
@@ -62,7 +62,7 @@ const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimit
         )}
         {...props}
       >
-        <RadioGroupPrimitive.Indicator className="ai-flex ai-items-center ai-justify-center ai-text-current ai-w-full ai-h-full">
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center text-current w-full h-full">
           <CheckIcon />
         </RadioGroupPrimitive.Indicator>
       </RadioGroupPrimitive.Item>
@@ -70,7 +70,7 @@ const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimit
 
     if (children) {
       return (
-        <Text as="label" className={cn('ai-flex ai-items-center ai-gap-1', className)}>
+        <Text as="label" className={cn('flex items-center gap-1', className)}>
           {ItemRadio}
           {children}
         </Text>

package/src/components/skeleton.tsx

@@ -20,9 +20,9 @@ const Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwar
     <Tag
       ref={forwardedRef}
       className={cn(
-        `ai-bg-skeleton ai-animate-pulse empty:ai-block data-[inline-skeleton=true]:ai-leading-[0] !ai-bg-none !ai-bg-clip-border !ai-border-none !ai-shadow-none 
-        !ai-text-transparent !ai-outline-none !ai-select-none !ai-cursor-default !ai-pointer-events-none !ai-decoration-clone
-        after:!ai-invisible before:!ai-invisible [&>*]:!ai-invisible
+        `bg-skeleton animate-pulse empty:block data-[inline-skeleton=true]:leading-[0] !bg-none !bg-clip-border !border-none !shadow-none 
+        !text-transparent !outline-none !select-none !cursor-default !pointer-events-none !decoration-clone
+        after:!invisible before:!invisible [&>*]:!invisible
         `,
         className
       )}

package/src/components/tabs.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../helpers/index.js'
+
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const TabListContext = React.createContext<{ algin?: 'left' | 'center' | 'right' }>({
+  algin: 'left',
+})
+
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & { algin?: 'left' | 'center' | 'right' }
+>(({ children, algin = 'left', ...props }, ref) => (
+  <TabsPrimitive.Root ref={ref} {...props}>
+    <TabListContext.Provider value={{ algin }}>{children}</TabListContext.Provider>
+  </TabsPrimitive.Root>
+))
+Tabs.displayName = 'Tabs'
+
+const tabsListVariants = cva('', {
+  variants: {
+    algin: {
+      left: 'justify-left',
+      center: 'justify-center',
+      right: 'justify-end',
+    },
+  },
+  defaultVariants: {
+    algin: 'left',
+  },
+})
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => {
+  const { algin: alginFromParent } = React.useContext(TabListContext)
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        'border-b-lines flex gap-[24px] overflow-x-auto border-b',
+        tabsListVariants({
+          algin: alginFromParent,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'border-b-brand-0 disabled:text-btn-secondary-disabled shrink-0 text-base font-bold data-[state=active]:border-b-[3px]',
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/text.tsx

@@ -4,35 +4,29 @@ import { cn } from '../helpers/index.js'
 import { type VariantProps, cva } from 'class-variance-authority'
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
 
-const textVariants = cva('', {
+const textVariants = cva('tracking font-body', {
   variants: {
     size: {
-      none: '',
-      1: 'ai-text-xs',
-      2: 'ai-text-sm',
-      3: 'ai-text-base',
-      4: 'ai-text-lg',
-      5: 'ai-text-xl',
-      6: 'ai-text-2xl',
-      7: 'ai-text-3xl',
-      8: 'ai-text-4xl',
-      9: 'ai-text-5xl',
+      1: 'text-text-1 text-info-primary',
+      2: 'text-text-2 text-info-primary',
+      3: 'text-text-3 text-info-primary',
     },
-    weights: {
-      light: 'ai-font-light',
-      normal: 'ai-font-normal',
-      medium: 'ai-font-medium',
-      bold: 'ai-font-bold',
+    weight: {
+      light: 'font-light',
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
     },
     align: {
-      left: 'ai-text-left',
-      center: 'ai-text-center',
-      right: 'ai-text-right',
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
     },
   },
   defaultVariants: {
-    size: 'none',
-    weights: 'normal',
+    size: 3,
+    weight: 'normal',
   },
 })
 
@@ -55,8 +49,8 @@ type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProp
 const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
   const {
     children,
-    size = 'none',
-    weights,
+    size = 3,
+    weight,
     align,
     className,
     asChild,
@@ -68,16 +62,16 @@ const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
 
   const htmlContentProps = html
     ? {
-        dangerouslySetInnerHTML: { __html: html },
-      }
+      dangerouslySetInnerHTML: { __html: html },
+    }
     : null
 
   const styleProps = color
     ? {
-        style: {
-          color,
-        },
-      }
+      style: {
+        color,
+      },
+    }
     : null
 
   return (
@@ -87,7 +81,7 @@ const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
       className={cn(
         textVariants({
           size,
-          weights,
+          weight,
           align,
         }),
         className

package/src/components/theme.tsx

@@ -1,9 +1,8 @@
 'use client'
 import * as React from 'react'
-import type { Brand } from '../helpers/constants.js'
 
 interface ThemeProps {
-  brand: Brand
+  brand: string
   children: React.ReactNode
 }
 /**

package/src/helpers/constants.ts

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

package/src/helpers/utils.ts

@@ -1,5 +1,13 @@
 import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+const twMerge = extendTailwindMerge({
+  extend: {
+      theme: {
+          borderRadius: ['btn'],
+      },
+  },
+})
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))

package/src/icons/spinner.tsx

@@ -12,11 +12,10 @@ const Spinner = (props: SpinnerProps) => {
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
       width="1rem"
-      className={cn('ai-animate-spin', props.className)}
+      className={cn('animate-spin', props.className)}
     >
       <path
         d="M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1"
-        stroke="white"
         strokeWidth="2"
         strokeLinecap="round"
       />