Updated: skeleton pagination play spinner tabs.

app/components/CopyCode.tsx

@@ -33,7 +33,7 @@ const CopyCode = ({ code }: { code: string }) => {
         </SyntaxHighlighter>
       ) : (
         <Skeleton animation={true}>
-          <Skeleton.Line height="h-[60px]" />
+          <Skeleton.Line className="h-[60px]" />
         </Skeleton>
       )}
       <button onClick={() => copyToClipboard(code)} className="absolute right-5 top-5 cursor-pointer">

app/components/Search.tsx

@@ -148,10 +148,10 @@ const Search: FC<SearchProps> = ({ showModal, setShowMainModal }) => {
         {loading ? (
           <div>
             <Skeleton animation>
-              <Skeleton.Line height="h-12" />
-              <Skeleton.Line height="h-12" />
-              <Skeleton.Line height="h-12" />
-              <Skeleton.Line height="h-12" />
+              <Skeleton.Line className="h-12" />
+              <Skeleton.Line className="h-12" />
+              <Skeleton.Line className="h-12" />
+              <Skeleton.Line className="h-12" />
             </Skeleton>
           </div>
         ) : query && results.length ? (

app/docs/components/skeleton/variant/CommentLayout.tsx

@@ -4,10 +4,10 @@ import { Skeleton } from '../../../../src'
 const CommentLayout = () => {
   return (
     <Skeleton className="flex max-w-md items-center gap-3">
-      <Skeleton.Line height="h-12 w-12 rounded-full" />
+      <Skeleton.Line className="h-12 w-12 rounded-full" />
       <div className="space-y-2">
-        <Skeleton.Line height="h-4 w-[250px]" />
-        <Skeleton.Line height="h-4 w-[200px]" />
+        <Skeleton.Line className="h-4 w-[250px]" />
+        <Skeleton.Line className="h-4 w-[200px]" />
       </div>
     </Skeleton>
   )
@@ -20,10 +20,10 @@ import { Skeleton } from 'keep-react'
 export const SkeletonComponent = () => {
   return (
     <Skeleton className="flex max-w-md items-center gap-3">
-      <Skeleton.Line height="h-12 w-12 rounded-full" />
+      <Skeleton.Line className="h-12 w-12 rounded-full" />
       <div className="space-y-2">
-        <Skeleton.Line height="h-4 w-[250px]" />
-        <Skeleton.Line height="h-4 w-[200px]" />
+        <Skeleton.Line className="h-4 w-[250px]" />
+        <Skeleton.Line className="h-4 w-[200px]" />
       </div>
     </Skeleton>
   )

app/docs/components/skeleton/variant/ParagraphSkeleton.tsx

@@ -18,23 +18,13 @@ import { Skeleton } from "keep-react";
 
 export const SkeletonComponent = () => {
   return (
-    <div className="max-w-xl py-5">
-      <Skeleton animation={true}>
-        <div className="w-11/12">
-          <Skeleton.Line height="h-6" />
-        </div>
-        <div className="w-9/12">
-          <Skeleton.Line height="h-4" />
-        </div>
-        <div className="w-10/12">
-          <Skeleton.Line height="h-4" />
-        </div>
-        <div className="w-7/12">
-          <Skeleton.Line height="h-4" />
-        </div>
-      </Skeleton>
-    </div>
-  );
+    <Skeleton className="max-w-xl space-y-2.5">
+      <Skeleton.Line className="h-4 w-11/12" />
+      <Skeleton.Line className="h-4 w-9/12" />
+      <Skeleton.Line className="h-4 w-10/12" />
+      <Skeleton.Line className="h-4 w-7/12" />
+    </Skeleton>
+  )
 }
 `
 

app/src/components/Pagination/GoTo.tsx

@@ -1,19 +1,19 @@
 'use client'
-import { FC, ReactNode } from 'react'
+import { FC, forwardRef, HTMLAttributes, ReactNode } from 'react'
 import { cn } from '../../helpers/cn'
 import { paginationTheme } from './theme'
 
-export interface GotoProps {
+export interface GoToProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode
-  className?: string
-  [key: string]: any
 }
 
-export const GoTo: FC<GotoProps> = ({ className, children, ...props }) => {
+const GoTo: FC<GoToProps> = forwardRef<HTMLDivElement, GoToProps>(({ children, ...props }, ref) => {
   const { goto } = paginationTheme
   return (
-    <div className={cn(goto.base, className)} {...props}>
+    <div {...props} ref={ref} className={cn(goto.base, props.className)}>
       {children}
     </div>
   )
-}
+})
+GoTo.displayName = 'Pagination.GoTo'
+export { GoTo }

app/src/components/Pagination/Item.tsx

@@ -1,24 +1,28 @@
 'use client'
-import { FC, ReactNode } from 'react'
+import { ButtonHTMLAttributes, FC, forwardRef } from 'react'
 import { cn } from '../../helpers/cn'
 import { usePaginationContext } from './Context'
 import { paginationTheme } from './theme'
 
-export interface ItemProps {
-  children?: ReactNode
-  className?: string
+export interface ItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean
-  [key: string]: any
 }
 
-export const Item: FC<ItemProps> = ({ className, children, active = false, ...props }) => {
-  const { shape = 'rounded' } = usePaginationContext()
-  const { item } = paginationTheme
-  return (
-    <li {...props}>
-      <button className={cn(item.base, item.active[active ? 'on' : 'off'], item.shape[shape], className)}>
-        {children}
-      </button>
-    </li>
-  )
-}
+const Item: FC<ItemProps> = forwardRef<HTMLButtonElement, ItemProps>(
+  ({ className, children, active = false, ...props }, ref) => {
+    const { shape = 'rounded' } = usePaginationContext()
+    const { item } = paginationTheme
+    return (
+      <li>
+        <button
+          {...props}
+          ref={ref}
+          className={cn(item.base, item.active[active ? 'on' : 'off'], item.shape[shape], className)}>
+          {children}
+        </button>
+      </li>
+    )
+  },
+)
+Item.displayName = 'Pagination.Item'
+export { Item }

app/src/components/Pagination/List.tsx

@@ -1,19 +1,18 @@
 'use client'
-import { FC, ReactNode } from 'react'
+import { forwardRef, HTMLAttributes } from 'react'
 import { cn } from '../../helpers/cn'
 import { paginationTheme } from './theme'
 
-export interface ListProps {
-  children?: ReactNode
-  className?: string
-  [key: string]: any
-}
+interface ListProps extends HTMLAttributes<HTMLUListElement> {}
 
-export const List: FC<ListProps> = ({ className, children, ...props }) => {
+const List = forwardRef<HTMLUListElement, ListProps>(({ children, ...props }, ref) => {
   const { list } = paginationTheme
   return (
-    <ul className={cn(list.base, className)} {...props}>
+    <ul {...props} ref={ref} className={cn(list.base, props.className)}>
       {children}
     </ul>
   )
-}
+})
+List.displayName = 'Pagination.List'
+
+export { List }

app/src/components/Pagination/Navigator.tsx

@@ -1,20 +1,23 @@
 'use client'
-import { FC, ReactNode } from 'react'
+import { ButtonHTMLAttributes, FC, forwardRef } from 'react'
 import { cn } from '../../helpers/cn'
 import { paginationTheme } from './theme'
 
-export interface NavigatorProps {
-  children?: ReactNode
-  className?: string
+export interface NavigatorProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   shape?: 'rounded' | 'circle'
-  [key: string]: any
 }
 
-export const Navigator: FC<NavigatorProps> = ({ className, children, shape = 'rounded', ...props }) => {
-  const { navigator } = paginationTheme
-  return (
-    <button {...props} className={cn(navigator.base, navigator.shape[shape], className)}>
-      {children}
-    </button>
-  )
-}
+const Navigator: FC<NavigatorProps> = forwardRef<HTMLButtonElement, NavigatorProps>(
+  ({ className, children, shape = 'rounded', ...props }, ref) => {
+    const { navigator } = paginationTheme
+    return (
+      <button {...props} ref={ref} className={cn(navigator.base, navigator.shape[shape], className)}>
+        {children}
+      </button>
+    )
+  },
+)
+
+Navigator.displayName = 'Pagination.Navigator'
+
+export { Navigator }

app/src/components/Pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { FC, ReactNode } from 'react'
+import { FC, HTMLAttributes, forwardRef } from 'react'
 import { cn } from '../../helpers/cn'
 import { PaginationContext } from './Context'
 import { GoTo } from './GoTo'
@@ -8,27 +8,22 @@ import { List } from './List'
 import { Navigator } from './Navigator'
 import { paginationTheme } from './theme'
 
-interface PaginationProps {
-  children?: ReactNode
-  className?: string
+interface PaginationProps extends HTMLAttributes<HTMLElement> {
   shape?: 'rounded' | 'circle'
-  [key: string]: any
 }
 
-const PaginationComponent: FC<PaginationProps> = ({ className, children, shape = 'rounded', ...props }) => {
-  const { root } = paginationTheme
-  return (
-    <nav role="navigation" {...props} aria-label="pagination" className={cn(root.base, className)}>
-      <PaginationContext.Provider value={{ shape }}>{children}</PaginationContext.Provider>
-    </nav>
-  )
-}
-
-List.displayName = 'Pagination.List'
-Item.displayName = 'Pagination.Item'
-Navigator.displayName = 'Pagination.Navigator'
-GoTo.displayName = 'Pagination.GoTo'
+const PaginationComponent: FC<PaginationProps> = forwardRef<HTMLElement, PaginationProps>(
+  ({ className, children, shape = 'rounded', ...props }, ref) => {
+    const { root } = paginationTheme
+    return (
+      <nav {...props} role="navigation" ref={ref} aria-label="pagination" className={cn(root.base, className)}>
+        <PaginationContext.Provider value={{ shape }}>{children}</PaginationContext.Provider>
+      </nav>
+    )
+  },
+)
 
+PaginationComponent.displayName = 'Pagination'
 export const Pagination = Object.assign(PaginationComponent, {
   List,
   Item,

app/src/components/Play/Dismiss.tsx

@@ -1,10 +1,10 @@
 'use client'
-import { FC } from 'react'
+import { ButtonHTMLAttributes, FC } from 'react'
 import { cn } from '../../helpers/cn'
 import { usePlayContext } from './PlayContext'
 import { playTheme } from './theme'
 
-export interface DismissProps {
+export interface DismissProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string
   [key: string]: any
 }

app/src/components/Skeleton/Skeleton.tsx

@@ -1,26 +1,25 @@
 'use client'
-import { FC, ReactNode } from 'react'
+import { FC, forwardRef, HTMLAttributes } from 'react'
 import { cn } from '../../helpers/cn'
 import { SkeletonLine } from './SkeletonLine'
 import { skeletonTheme } from './theme'
 
-export interface keepSkeletonThemeProps {
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
   animation?: boolean
-  children?: ReactNode
-  className?: string
-  [key: string]: any
 }
 
-const SkeletonComponent: FC<keepSkeletonThemeProps> = ({ animation = true, className, children, ...props }) => {
-  const theme = skeletonTheme
-  return (
-    <div {...props} className={cn(animation && theme.animation, theme.base, className)}>
-      {children}
-    </div>
-  )
-}
+const SkeletonComponent: FC<SkeletonProps> = forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ animation = true, children, ...props }, ref) => {
+    const theme = skeletonTheme
+    return (
+      <div {...props} ref={ref} className={cn(animation && theme.animation, theme.base, props.className)}>
+        {children}
+      </div>
+    )
+  },
+)
 
-SkeletonLine.displayName = 'Skeleton.Line'
+SkeletonComponent.displayName = 'Skeleton'
 
 export const Skeleton = Object.assign(SkeletonComponent, {
   Line: SkeletonLine,

app/src/components/Skeleton/SkeletonLine.tsx

@@ -1,14 +1,15 @@
 'use client'
-import { FC } from 'react'
+import { HTMLAttributes, forwardRef } from 'react'
 import { cn } from '../../helpers/cn'
 import { skeletonTheme } from './theme'
 
-export interface SkeletonLineProps {
-  height?: string
-  className?: string
-}
+interface SkeletonLineProps extends HTMLAttributes<HTMLDivElement> {}
 
-export const SkeletonLine: FC<SkeletonLineProps> = ({ height, className }) => {
+const SkeletonLine = forwardRef<HTMLDivElement, SkeletonLineProps>(({ className, ...props }, ref) => {
   const theme = skeletonTheme
-  return <div className={cn(theme.line, height, className)}></div>
-}
+  return <div {...props} ref={ref} className={cn(theme.line, className)}></div>
+})
+
+SkeletonLine.displayName = 'Skeleton.Line'
+
+export { SkeletonLine }

app/src/components/Spinner/index.tsx

@@ -2,24 +2,8 @@ import type { ComponentProps, FC } from 'react'
 import { cn } from '../../helpers/cn'
 import { SpinnerColors, SpinnerSizes, spinnerTheme } from './theme'
 
-/**
- * Props for the Spinner component.
- * @interface SpinnerProps
- * @extends {Omit<ComponentProps<'span'>, 'color'>}
- */
 export interface SpinnerProps extends Omit<ComponentProps<'span'>, 'color'> {
-  /**
-   * The color of the spinner.
-   * @type {keyof SpinnerColors}
-   * @default 'info'
-   */
   color?: keyof SpinnerColors
-
-  /**
-   * The size of the spinner.
-   * @type {keyof SpinnerSizes}
-   * @default 'md'
-   */
   size?: keyof SpinnerSizes
 }