@annondeveloper/ui-kit 0.1.0 → 0.2.1

package/dist/{select-nnBJUO8U.d.ts → select-B2wXqqSM.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
 
 interface SelectOption {
     value: string;
@@ -21,6 +21,6 @@ interface SelectProps {
  * @description A themed select dropdown built on Radix UI Select.
  * Supports dark/light mode via CSS custom property tokens.
  */
-declare function Select({ value, onValueChange, options, placeholder, className, disabled, }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ value, onValueChange, options, placeholder, className, disabled, }: SelectProps): React.JSX.Element;
 
 export { type SelectOption as S, Select as a, type SelectProps as b };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annondeveloper/ui-kit",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "type": "module",
   "description": "A React component library with dark/light theming, built on Radix UI, Tailwind CSS v4, and Framer Motion.",
   "main": "dist/index.js",
@@ -49,7 +49,7 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.0.0",
     "sonner": "^2.0.0",
-    "tailwind-merge": "^2.0.0"
+    "tailwind-merge": "^2.0.0 || ^3.0.0"
   },
   "peerDependenciesMeta": {
     "react-hook-form": {
@@ -58,39 +58,37 @@
   },
   "devDependencies": {
     "@axe-core/react": "^4.11.1",
-    "@radix-ui/react-alert-dialog": "^1.0.0",
-    "@radix-ui/react-dropdown-menu": "^2.0.0",
-    "@radix-ui/react-popover": "^1.0.0",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-tooltip": "^1.0.0",
-    "@storybook/addon-a11y": "^8.6.18",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.18",
-    "@storybook/react-vite": "^8.6.18",
-    "@tanstack/react-table": "^8.0.0",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@storybook/addon-a11y": "^10.3.0",
+    "@storybook/react": "^10.3.0",
+    "@storybook/react-vite": "^10.3.0",
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
     "axe-core": "^4.11.1",
-    "clsx": "^2.0.0",
-    "framer-motion": "^12.0.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.38.0",
     "jest-axe": "^10.0.0",
     "jsdom": "^29.0.0",
-    "lucide-react": ">=0.400.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "lucide-react": ">=0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-hook-form": "^7.71.2",
-    "sonner": "^2.0.0",
-    "storybook": "^8.6.18",
-    "tailwind-merge": "^2.0.0",
-    "tsup": "^8.4.0",
-    "typescript": "^5.8.0",
+    "sonner": "^2.0.7",
+    "storybook": "^10.3.0",
+    "tailwind-merge": "^3.5.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.0",
     "vite": "^8.0.0",
     "vitest": "^4.1.0"
   },

package/src/components/animated-counter.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useReducedMotion } from 'framer-motion'
 import { cn } from '../utils'
@@ -27,16 +28,20 @@ export function AnimatedCounter({
   duration = 400,
   className,
   format,
-}: AnimatedCounterProps) {
+}: AnimatedCounterProps): React.JSX.Element {
   const reduced = useReducedMotion()
   const prevRef = useRef(value)
   const rafRef = useRef<number | null>(null)
   const [displayed, setDisplayed] = useState(value)
+  const decimalPlacesRef = useRef(
+    Number.isInteger(value) ? 0 : (value.toString().split('.')[1]?.length ?? 1)
+  )
 
   useEffect(() => {
     const from = prevRef.current
     const to = value
     prevRef.current = value
+    decimalPlacesRef.current = Number.isInteger(to) ? 0 : (to.toString().split('.')[1]?.length ?? 1)
 
     if (reduced || from === to) {
       setDisplayed(to)
@@ -71,11 +76,9 @@ export function AnimatedCounter({
 
   const formatted = format
     ? format(displayed)
-    : Number.isInteger(value)
+    : decimalPlacesRef.current === 0
       ? Math.round(displayed).toString()
-      : displayed.toFixed(
-          value.toString().split('.')[1]?.length ?? 1
-        )
+      : displayed.toFixed(decimalPlacesRef.current)
 
   return (
     <span className={cn('tabular-nums', className)}>

package/src/components/avatar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { useState } from 'react'
 import { cn } from '../utils'
 
@@ -55,7 +56,7 @@ export function Avatar({
   size = 'md',
   status,
   className,
-}: AvatarProps) {
+}: AvatarProps): React.JSX.Element {
   const [imgError, setImgError] = useState(false)
   const s = sizeClasses[size]
   const initials = fallback ?? deriveInitials(alt)

package/src/components/badge.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { cn } from '../utils'
 import type { LucideIcon } from 'lucide-react'
 
@@ -40,7 +41,7 @@ export interface BadgeProps {
  */
 export function Badge({
   children, color = 'gray', icon: Icon, size = 'sm', className,
-}: BadgeProps) {
+}: BadgeProps): React.JSX.Element {
   return (
     <span className={cn(
       'inline-flex items-center gap-1 rounded-full font-medium whitespace-nowrap',
@@ -82,7 +83,7 @@ export interface BadgeVariantConfig<T extends string> {
  * // Usage: <SeverityBadge value="critical" />
  * ```
  */
-export function createBadgeVariant<T extends string>(config: BadgeVariantConfig<T>) {
+export function createBadgeVariant<T extends string>(config: BadgeVariantConfig<T>): (props: { value: T; className?: string }) => React.JSX.Element {
   const { colorMap, labelMap, defaultColor = 'gray', defaultSize = 'xs' } = config
 
   return function VariantBadge({ value, className }: { value: T; className?: string }) {

package/src/components/button.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { forwardRef, type ButtonHTMLAttributes } from 'react'
 import { Loader2 } from 'lucide-react'
 import { cn } from '../utils'
@@ -40,8 +41,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * @description A themed button with variant, size, and loading support.
  * Uses CSS custom property tokens for dark/light mode compatibility.
  */
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = 'primary', size = 'md', loading, disabled, className, children, ...props }, ref) => (
+const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'primary', size = 'md', loading, disabled, className, children, ...props }, ref): React.JSX.Element => (
     <button
       ref={ref}
       disabled={disabled || loading}

package/src/components/card.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
 import { cn } from '../utils'
 
@@ -37,8 +38,8 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  * Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
  * subcomponents for semantic structure.
  */
-const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ variant = 'default', padding = 'md', className, children, ...props }, ref) => (
+const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, CardProps>(
+  ({ variant = 'default', padding = 'md', className, children, ...props }, ref): React.JSX.Element => (
     <div
       ref={ref}
       className={cn('rounded-2xl', variantClasses[variant], paddingClasses[padding], className)}
@@ -57,8 +58,8 @@ export interface CardSubProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 /** Header section of a Card (flex row for title + actions). */
-const CardHeader = forwardRef<HTMLDivElement, CardSubProps>(
-  ({ className, children, ...props }, ref) => (
+const CardHeader: React.ForwardRefExoticComponent<CardSubProps & React.RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, CardSubProps>(
+  ({ className, children, ...props }, ref): React.JSX.Element => (
     <div
       ref={ref}
       className={cn('flex items-start justify-between gap-4', className)}
@@ -71,8 +72,8 @@ const CardHeader = forwardRef<HTMLDivElement, CardSubProps>(
 CardHeader.displayName = 'CardHeader'
 
 /** Title within a CardHeader. */
-const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & { children: ReactNode }>(
-  ({ className, children, ...props }, ref) => (
+const CardTitle: React.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & { children: ReactNode } & React.RefAttributes<HTMLHeadingElement>> = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & { children: ReactNode }>(
+  ({ className, children, ...props }, ref): React.JSX.Element => (
     <h3
       ref={ref}
       className={cn('text-base font-semibold text-[hsl(var(--text-primary))]', className)}
@@ -85,8 +86,8 @@ const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingEleme
 CardTitle.displayName = 'CardTitle'
 
 /** Description text within a CardHeader. */
-const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement> & { children: ReactNode }>(
-  ({ className, children, ...props }, ref) => (
+const CardDescription: React.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & { children: ReactNode } & React.RefAttributes<HTMLParagraphElement>> = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement> & { children: ReactNode }>(
+  ({ className, children, ...props }, ref): React.JSX.Element => (
     <p
       ref={ref}
       className={cn('text-sm text-[hsl(var(--text-secondary))]', className)}
@@ -99,8 +100,8 @@ const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLPara
 CardDescription.displayName = 'CardDescription'
 
 /** Main content area of a Card. */
-const CardContent = forwardRef<HTMLDivElement, CardSubProps>(
-  ({ className, children, ...props }, ref) => (
+const CardContent: React.ForwardRefExoticComponent<CardSubProps & React.RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, CardSubProps>(
+  ({ className, children, ...props }, ref): React.JSX.Element => (
     <div ref={ref} className={cn('mt-4', className)} {...props}>
       {children}
     </div>
@@ -109,8 +110,8 @@ const CardContent = forwardRef<HTMLDivElement, CardSubProps>(
 CardContent.displayName = 'CardContent'
 
 /** Footer section of a Card (typically for actions). */
-const CardFooter = forwardRef<HTMLDivElement, CardSubProps>(
-  ({ className, children, ...props }, ref) => (
+const CardFooter: React.ForwardRefExoticComponent<CardSubProps & React.RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, CardSubProps>(
+  ({ className, children, ...props }, ref): React.JSX.Element => (
     <div
       ref={ref}
       className={cn(

package/src/components/checkbox.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { forwardRef, type InputHTMLAttributes } from 'react'
 import { Check, Minus } from 'lucide-react'
 import { cn } from '../utils'
@@ -15,8 +16,8 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
  * @description A themed checkbox with indeterminate state support.
  * Uses CSS custom property tokens for dark/light mode compatibility.
  */
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ indeterminate, checked, size = 'md', className, ...props }, ref) => {
+const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ indeterminate, checked, size = 'md', className, ...props }, ref): React.JSX.Element => {
     const isChecked = checked || indeterminate
     const sizeClass = size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'
     const iconSize = size === 'sm' ? 'h-2.5 w-2.5' : 'h-3 w-3'