@etus/ui 0.1.0 → 0.1.2

package/src/components/primitives/ProgressBar/index.ts

@@ -1,3 +0,0 @@
-export * from './ProgressBar'
-export * from './ProgressBar.variants'
-export type * from './ProgressBar.types'

package/src/components/primitives/ProgressCircle/ProgressCircle.test.tsx

@@ -1,219 +0,0 @@
-import { render, screen } from "@testing-library/react"
-import { describe, expect, it } from "vitest"
-
-import { ProgressCircle } from "./ProgressCircle"
-
-describe("ProgressCircle", () => {
-  describe("Rendering", () => {
-    it("renders with default props", () => {
-      render(<ProgressCircle />)
-
-      const progressbar = screen.getByRole("progressbar")
-      expect(progressbar).toBeInTheDocument()
-      expect(progressbar).toHaveAttribute("data-slot", "progress-circle")
-    })
-
-    it("renders with specified value", () => {
-      render(<ProgressCircle value={75} />)
-
-      const progressbar = screen.getByRole("progressbar")
-      expect(progressbar).toHaveAttribute("aria-valuenow", "75")
-    })
-
-    it("displays formatted value by default", () => {
-      render(<ProgressCircle value={50} />)
-
-      expect(screen.getByText("50%")).toBeInTheDocument()
-    })
-
-    it("renders with custom formatValue", () => {
-      render(
-        <ProgressCircle
-          formatValue={(v) => `${String(v)} de 100`}
-          value={75}
-        />
-      )
-
-      expect(screen.getByText("75 de 100")).toBeInTheDocument()
-    })
-
-    it("renders label when provided", () => {
-      render(<ProgressCircle label="Active users" value={60} />)
-
-      expect(screen.getByText("Active users")).toBeInTheDocument()
-    })
-
-    it("hides value when showValue is false", () => {
-      render(<ProgressCircle showValue={false} value={50} />)
-
-      expect(screen.queryByText("50%")).not.toBeInTheDocument()
-    })
-  })
-
-  describe("Value clamping", () => {
-    it("clamps value to minimum 0", () => {
-      render(<ProgressCircle value={-10} />)
-
-      const progressbar = screen.getByRole("progressbar")
-      expect(progressbar).toHaveAttribute("aria-valuenow", "0")
-      expect(screen.getByText("0%")).toBeInTheDocument()
-    })
-
-    it("clamps value to maximum 100", () => {
-      render(<ProgressCircle value={150} />)
-
-      const progressbar = screen.getByRole("progressbar")
-      expect(progressbar).toHaveAttribute("aria-valuenow", "100")
-      expect(screen.getByText("100%")).toBeInTheDocument()
-    })
-  })
-
-  describe("Sizes", () => {
-    it.each(["xxs", "xs", "sm", "md", "lg"] as const)(
-      "renders size %s",
-      (size) => {
-        render(<ProgressCircle size={size} value={50} />)
-
-        const progressbar = screen.getByRole("progressbar")
-        expect(progressbar).toBeInTheDocument()
-        // Check for token-based size class
-        expect(progressbar).toHaveClass(`w-[var(--progress-circle-size-${size}-diameter)]`)
-        expect(progressbar).toHaveClass(`h-[var(--progress-circle-size-${size}-diameter)]`)
-      }
-    )
-  })
-
-  describe("Colors", () => {
-    it.each(["default", "primary", "success", "warning", "error"] as const)(
-      "renders color %s",
-      (color) => {
-        const { container } = render(<ProgressCircle color={color} value={50} />)
-
-        const track = container.querySelector("[data-slot='progress-circle-track']")
-        const indicator = container.querySelector("[data-slot='progress-circle-indicator']")
-
-        expect(track).toHaveClass(`stroke-[color:var(--progress-circle-track-color-${color})]`)
-        expect(indicator).toHaveClass(`stroke-[color:var(--progress-circle-indicator-color-${color})]`)
-      }
-    )
-  })
-
-  describe("Indeterminate state", () => {
-    it("renders indeterminate state", () => {
-      const { container } = render(<ProgressCircle indeterminate />)
-
-      const indicator = container.querySelector("[data-slot='progress-circle-indicator']")
-      expect(indicator).toHaveClass("animate-spin")
-    })
-
-    it("does not show aria-valuenow when indeterminate", () => {
-      render(<ProgressCircle indeterminate />)
-
-      const progressbar = screen.getByRole("progressbar")
-      expect(progressbar).not.toHaveAttribute("aria-valuenow")
-    })
-
-    it("hides value display when indeterminate", () => {
-      render(<ProgressCircle indeterminate value={50} />)
-
-      expect(screen.queryByText("50%")).not.toBeInTheDocument()
-    })
-  })
-
-  describe("Accessibility", () => {
-    it("has progressbar role", () => {
-      render(<ProgressCircle value={50} />)
-
-      expect(screen.getByRole("progressbar")).toBeInTheDocument()
-    })
-
-    it("has correct aria-valuemin and aria-valuemax", () => {
-      render(<ProgressCircle value={50} />)
-
-      const progressbar = screen.getByRole("progressbar")
-      expect(progressbar).toHaveAttribute("aria-valuemin", "0")
-      expect(progressbar).toHaveAttribute("aria-valuemax", "100")
-    })
-
-    it("supports aria-label", () => {
-      render(<ProgressCircle aria-label="Loading progress" value={50} />)
-
-      const progressbar = screen.getByRole("progressbar")
-      expect(progressbar).toHaveAttribute("aria-label", "Loading progress")
-    })
-
-    it("supports aria-labelledby", () => {
-      render(
-        <>
-          <span id="progress-label">Download progress</span>
-          <ProgressCircle aria-labelledby="progress-label" value={50} />
-        </>
-      )
-
-      const progressbar = screen.getByRole("progressbar")
-      expect(progressbar).toHaveAttribute("aria-labelledby", "progress-label")
-    })
-  })
-
-  describe("data-slot attributes", () => {
-    it("has data-slot on root element", () => {
-      render(<ProgressCircle value={50} />)
-
-      const progressbar = screen.getByRole("progressbar")
-      expect(progressbar).toHaveAttribute("data-slot", "progress-circle")
-    })
-
-    it("has data-slot on SVG element", () => {
-      const { container } = render(<ProgressCircle value={50} />)
-
-      const svg = container.querySelector("[data-slot='progress-circle-svg']")
-      expect(svg).toBeInTheDocument()
-    })
-
-    it("has data-slot on track", () => {
-      const { container } = render(<ProgressCircle value={50} />)
-
-      const track = container.querySelector("[data-slot='progress-circle-track']")
-      expect(track).toBeInTheDocument()
-    })
-
-    it("has data-slot on indicator", () => {
-      const { container } = render(<ProgressCircle value={50} />)
-
-      const indicator = container.querySelector("[data-slot='progress-circle-indicator']")
-      expect(indicator).toBeInTheDocument()
-    })
-
-    it("has data-slot on value", () => {
-      const { container } = render(<ProgressCircle value={50} />)
-
-      const value = container.querySelector("[data-slot='progress-circle-value']")
-      expect(value).toBeInTheDocument()
-    })
-
-    it("has data-slot on label when provided", () => {
-      const { container } = render(<ProgressCircle label="Test" value={50} />)
-
-      const label = container.querySelector("[data-slot='progress-circle-label']")
-      expect(label).toBeInTheDocument()
-    })
-  })
-
-  describe("Custom className", () => {
-    it("applies custom className", () => {
-      render(<ProgressCircle className="custom-class" value={50} />)
-
-      const progressbar = screen.getByRole("progressbar")
-      expect(progressbar).toHaveClass("custom-class")
-    })
-  })
-
-  describe("Custom strokeWidth", () => {
-    it("accepts custom strokeWidth", () => {
-      const { container } = render(<ProgressCircle strokeWidth={20} value={50} />)
-
-      const track = container.querySelector("[data-slot='progress-circle-track']")
-      expect(track).toHaveAttribute("stroke-width", "20")
-    })
-  })
-})

package/src/components/primitives/ProgressCircle/ProgressCircle.tsx

@@ -1,264 +0,0 @@
-"use client"
-
-import type { ProgressCircleProps } from "./ProgressCircle.types"
-
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../feedback/Tooltip"
-import {
-  PROGRESS_CIRCLE_SIZES,
-  progressCircleContainerVariants,
-  progressCircleIndicatorVariants,
-  progressCircleLabelVariants,
-  progressCircleTrackVariants,
-  progressCircleValueVariants,
-} from "./ProgressCircle.variants"
-
-/**
- * Default format function for progress value
- */
-const defaultFormatValue = (value: number): string => `${String(value)}%`
-
-/**
- * ProgressCircle component for displaying circular progress indicators.
- *
- * Built with SVG for smooth rendering and full accessibility support.
- * Supports multiple sizes, shapes (full circle and half-circle),
- * color variants, and optional labels.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <ProgressCircle value={75} />
- *
- * // With label
- * <ProgressCircle value={60} label="Active users" />
- *
- * // Half-circle variant
- * <ProgressCircle value={80} shape="half-circle" />
- *
- * // Different sizes and colors
- * <ProgressCircle value={50} size="lg" color="warning" />
- * ```
- */
-function ProgressCircle({
-  value = 0,
-  max = 100,
-  indeterminate = false,
-  size = "md",
-  shape = "circle",
-  color = "default",
-  label,
-  formatValue = defaultFormatValue,
-  showValue = true,
-  radius: customRadius,
-  strokeWidth: customStrokeWidth,
-  className,
-  animate = true,
-  tooltip,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-}: ProgressCircleProps) {
-  // Clamp the raw value between 0 and max first
-  const clampedRawValue = Math.min(max, Math.max(0, value))
-
-  // Calculate percentage based on clamped value and max
-  const clampedValue = (clampedRawValue / max) * 100
-
-  // Animation state - initialize based on animate and indeterminate props
-  const [isVisible, setIsVisible] = React.useState(!animate || indeterminate)
-  const containerRef = React.useRef<HTMLDivElement>(null)
-
-  // Use IntersectionObserver to trigger animation only when in viewport
-  React.useEffect(() => {
-    // Skip if not animating, indeterminate, or already visible
-    if (!animate || indeterminate || isVisible) {
-      return
-    }
-
-    const element = containerRef.current
-    if (!element) {
-      return
-    }
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0]
-        if (entry?.isIntersecting) {
-          requestAnimationFrame(() => {
-            setIsVisible(true)
-          })
-          observer.disconnect()
-        }
-      },
-      { threshold: 0.1 }
-    )
-
-    observer.observe(element)
-
-    return () => { observer.disconnect(); }
-  }, [animate, indeterminate, isVisible])
-
-  // Get size configuration
-  const sizeConfig = PROGRESS_CIRCLE_SIZES[size]
-  const strokeWidth = customStrokeWidth ?? sizeConfig.strokeWidth
-  // Use custom radius if provided, otherwise use size preset
-  const diameter = customRadius ? (customRadius * 2 + strokeWidth) : sizeConfig.diameter
-
-  // Calculate SVG dimensions
-  const radius = (diameter - strokeWidth) / 2
-  const center = diameter / 2
-
-  // Calculate circumference and progress
-  const isHalfCircle = shape === "half-circle"
-  const circumference = isHalfCircle ? Math.PI * radius : 2 * Math.PI * radius
-
-  // For indeterminate, show ~25% of the arc; otherwise use the actual value
-  // For animation, start at 0 and animate to the target value when visible
-  const displayValue = indeterminate ? 25 : (isVisible ? clampedValue : 0)
-  const progressOffset = circumference - (displayValue / 100) * circumference
-
-  // SVG viewBox and path calculations
-  const viewBoxHeight = isHalfCircle ? diameter / 2 + strokeWidth : diameter
-
-  // For half-circle, we use an arc path instead of a circle
-  const getPath = () => {
-    if (isHalfCircle) {
-      // Arc from left to right (180 degrees at top)
-      const startX = strokeWidth / 2
-      const startY = center
-      const endX = diameter - strokeWidth / 2
-      const endY = center
-      return `M ${String(startX)} ${String(startY)} A ${String(radius)} ${String(radius)} 0 0 1 ${String(endX)} ${String(endY)}`
-    }
-    return
-  }
-
-  // Format the clamped value for display
-  const formattedValue = formatValue(clampedRawValue)
-
-  const progressCircleElement = (
-    <div
-      ref={containerRef}
-      className={cn(
-        progressCircleContainerVariants({ size, shape }),
-        className
-      )}
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledby}
-      aria-valuemax={max}
-      aria-valuemin={0}
-      aria-valuenow={indeterminate ? undefined : clampedRawValue}
-      data-indeterminate={indeterminate || undefined}
-      data-slot="progress-circle"
-      role="progressbar"
-    >
-      <svg
-        className={isHalfCircle ? "rotate-0" : ""}
-        data-slot="progress-circle-svg"
-        height={viewBoxHeight}
-        viewBox={`0 0 ${String(diameter)} ${String(viewBoxHeight)}`}
-        width={diameter}
-      >
-        {isHalfCircle ? (
-          <>
-            {/* Half-circle track */}
-            <path
-              className={cn(progressCircleTrackVariants({ color }))}
-              d={getPath()}
-              data-slot="progress-circle-track"
-              fill="none"
-              strokeLinecap="round"
-              strokeWidth={strokeWidth}
-            />
-            {/* Half-circle indicator */}
-            <path
-              className={cn(progressCircleIndicatorVariants({ color }))}
-              d={getPath()}
-              data-slot="progress-circle-indicator"
-              fill="none"
-              strokeDasharray={circumference}
-              strokeDashoffset={progressOffset}
-              strokeLinecap="round"
-              strokeWidth={strokeWidth}
-            />
-          </>
-        ) : (
-          <>
-            {/* Full circle track */}
-            <circle
-              className={cn(progressCircleTrackVariants({ color }))}
-              cx={center}
-              cy={center}
-              data-slot="progress-circle-track"
-              fill="none"
-              r={radius}
-              strokeWidth={strokeWidth}
-            />
-            {/* Full circle indicator */}
-            <circle
-              style={{
-                transform: indeterminate ? undefined : "rotate(-90deg)",
-                transformOrigin: "center",
-              }}
-              className={cn(progressCircleIndicatorVariants({ color, indeterminate }))}
-              cx={center}
-              cy={center}
-              data-slot="progress-circle-indicator"
-              fill="none"
-              r={radius}
-              strokeDasharray={circumference}
-              strokeDashoffset={progressOffset}
-              strokeLinecap="round"
-              strokeWidth={strokeWidth}
-            />
-          </>
-        )}
-      </svg>
-
-      {/* Center content (value and label) */}
-      <div
-        className={cn(
-          "absolute flex flex-col items-center justify-center",
-          isHalfCircle && "bottom-0"
-        )}
-        data-slot="progress-circle-content"
-      >
-        {showValue && !indeterminate && (
-          <span
-            className={cn(progressCircleValueVariants({ size }))}
-            data-slot="progress-circle-value"
-          >
-            {formattedValue}
-          </span>
-        )}
-        {label && (
-          <span
-            className={cn(progressCircleLabelVariants({ size }))}
-            data-slot="progress-circle-label"
-          >
-            {label}
-          </span>
-        )}
-      </div>
-    </div>
-  )
-
-  if (tooltip) {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          {progressCircleElement}
-        </TooltipTrigger>
-        <TooltipContent>
-          {tooltip}
-        </TooltipContent>
-      </Tooltip>
-    )
-  }
-
-  return progressCircleElement
-}
-
-export { ProgressCircle }

package/src/components/primitives/ProgressCircle/ProgressCircle.types.ts

@@ -1,152 +0,0 @@
-/**
- * Size variant options for the ProgressCircle
- *
- * @description
- * - `xxs` - 64px diameter (extra extra small)
- * - `xs` - 160px diameter (extra small)
- * - `sm` - 200px diameter (small)
- * - `md` - 240px diameter (medium)
- * - `lg` - 280px diameter (large)
- */
-export type ProgressCircleSize = "lg" | "md" | "sm" | "xs" | "xxs"
-
-/**
- * Shape variant options for the ProgressCircle
- *
- * @description
- * - `circle` - Full circular progress indicator (360°)
- * - `half-circle` - Semi-circular progress indicator (180°)
- */
-export type ProgressCircleShape = "circle" | "half-circle"
-
-/**
- * Color variant options for the ProgressCircle
- */
-export type ProgressCircleColor = "default" | "error" | "primary" | "success" | "warning"
-
-/**
- * ProgressCircle component props
- *
- * A circular progress indicator for displaying task completion or metrics.
- * Built with SVG for smooth rendering and accessibility.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <ProgressCircle value={75} />
- *
- * // With label
- * <ProgressCircle value={60} label="Active users" />
- *
- * // Half-circle variant
- * <ProgressCircle value={80} shape="half-circle" />
- *
- * // Different sizes
- * <ProgressCircle value={50} size="lg" />
- *
- * // Custom color
- * <ProgressCircle value={30} color="warning" />
- *
- * // Custom value format
- * <ProgressCircle
- *   value={75}
- *   formatValue={(value) => `${value} de 100`}
- * />
- * ```
- */
-export interface ProgressCircleProps {
-  /**
-   * Whether to animate the progress circle on initial viewport entry
-   * When true, the indicator animates from 0 to the current value
-   * @default true
-   */
-  animate?: boolean
-
-  /**
-   * Accessible label for screen readers
-   */
-  "aria-label"?: string
-
-  /**
-   * ID of element that labels this progress circle
-   */
-  "aria-labelledby"?: string
-
-  /**
-   * Additional CSS class name
-   */
-  className?: string
-
-  /**
-   * Color variant for the progress indicator
-   * @default "default"
-   */
-  color?: ProgressCircleColor
-
-  /**
-   * Custom format function for the displayed value
-   * @default (value) => `${value}%`
-   */
-  formatValue?: (value: number) => string
-
-  /**
-   * Whether the progress is indeterminate (unknown completion)
-   * When true, shows an animated spinning indicator
-   * @default false
-   */
-  indeterminate?: boolean
-
-  /**
-   * Optional label text displayed below the percentage
-   */
-  label?: string
-
-  /**
-   * Maximum value for the progress circle
-   * Allows using values outside the 0-100 range
-   * @default 100
-   */
-  max?: number
-
-  /**
-   * Custom radius for the progress circle in pixels
-   * Overrides the size preset when provided
-   */
-  radius?: number
-
-  /**
-   * Shape variant for the progress circle
-   * @default "circle"
-   */
-  shape?: ProgressCircleShape
-
-  /**
-   * Whether to show the percentage value in the center
-   * @default true
-   */
-  showValue?: boolean
-
-  /**
-   * Size variant for the progress circle
-   * @default "md"
-   */
-  size?: ProgressCircleSize
-
-  /**
-   * Stroke width of the progress circle
-   * Automatically calculated based on size if not provided
-   */
-  strokeWidth?: number
-
-  /**
-   * Tooltip text to display on hover
-   */
-  tooltip?: string
-
-  /**
-   * The progress value (0-100)
-   * Ignored when indeterminate is true
-   * @default 0
-   */
-  value?: number
-}