@djangocfg/ui-core 2.1.411 → 2.1.413

package/src/components/data/circular-progress/index.tsx

@@ -0,0 +1,358 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "../../../lib/utils"
+
+const CIRCULAR_PROGRESS_NAME = "CircularProgress"
+const INDICATOR_NAME = "CircularProgressIndicator"
+const TRACK_NAME = "CircularProgressTrack"
+const RANGE_NAME = "CircularProgressRange"
+const VALUE_TEXT_NAME = "CircularProgressValueText"
+
+const DEFAULT_MAX = 100
+
+type ProgressState = "indeterminate" | "complete" | "loading"
+
+function getProgressState(
+  value: number | undefined | null,
+  maxValue: number,
+): ProgressState {
+  return value == null
+    ? "indeterminate"
+    : value === maxValue
+      ? "complete"
+      : "loading"
+}
+
+function getIsValidNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value)
+}
+
+function getIsValidMaxNumber(max: unknown): max is number {
+  return getIsValidNumber(max) && max > 0
+}
+
+function getIsValidValueNumber(
+  value: unknown,
+  min: number,
+  max: number,
+): value is number {
+  return getIsValidNumber(value) && value <= max && value >= min
+}
+
+function getDefaultValueText(value: number, min: number, max: number): string {
+  const percentage = max === min ? 100 : ((value - min) / (max - min)) * 100
+  return `${Math.round(percentage)}%`
+}
+
+function getInvalidValueError(
+  propValue: string,
+  componentName: string,
+): string {
+  return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be a number between \`min\` and \`max\` (inclusive), or \`null\`/\`undefined\` for indeterminate progress. The value will be clamped to the valid range.`
+}
+
+function getInvalidMaxError(propValue: string, componentName: string): string {
+  return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid. Defaulting to ${DEFAULT_MAX}.`
+}
+
+interface CircularProgressContextValue {
+  value: number | null
+  valueText: string | undefined
+  max: number
+  min: number
+  state: ProgressState
+  radius: number
+  thickness: number
+  size: number
+  center: number
+  circumference: number
+  percentage: number | null
+  valueTextId?: string
+}
+
+const CircularProgressContext =
+  React.createContext<CircularProgressContextValue | null>(null)
+
+function useCircularProgressContext(consumerName: string) {
+  const context = React.useContext(CircularProgressContext)
+  if (!context) {
+    throw new Error(
+      `\`${consumerName}\` must be used within \`${CIRCULAR_PROGRESS_NAME}\``,
+    )
+  }
+  return context
+}
+
+interface CircularProgressProps extends React.ComponentProps<"div"> {
+  value?: number | null | undefined
+  getValueText?(value: number, min: number, max: number): string
+  min?: number
+  max?: number
+  size?: number
+  thickness?: number
+  label?: string
+  asChild?: boolean
+}
+
+function CircularProgress(props: CircularProgressProps) {
+  const {
+    value: valueProp = null,
+    getValueText = getDefaultValueText,
+    min: minProp = 0,
+    max: maxProp,
+    size = 48,
+    thickness = 4,
+    label,
+    asChild,
+    className,
+    children,
+    ...rootProps
+  } = props
+
+  if ((maxProp || maxProp === 0) && !getIsValidMaxNumber(maxProp)) {
+    if (process.env.NODE_ENV !== "production") {
+      console.error(getInvalidMaxError(`${maxProp}`, CIRCULAR_PROGRESS_NAME))
+    }
+  }
+
+  const rawMax = getIsValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX
+  const min = getIsValidNumber(minProp) ? minProp : 0
+  const max = rawMax <= min ? min + 1 : rawMax
+
+  if (process.env.NODE_ENV !== "production" && thickness >= size) {
+    console.warn(
+      `CircularProgress: thickness (${thickness}) should be less than size (${size}) for proper rendering.`,
+    )
+  }
+
+  if (valueProp !== null && !getIsValidValueNumber(valueProp, min, max)) {
+    if (process.env.NODE_ENV !== "production") {
+      console.error(
+        getInvalidValueError(`${valueProp}`, CIRCULAR_PROGRESS_NAME),
+      )
+    }
+  }
+
+  const value = getIsValidValueNumber(valueProp, min, max)
+    ? valueProp
+    : getIsValidNumber(valueProp) && valueProp > max
+      ? max
+      : getIsValidNumber(valueProp) && valueProp < min
+        ? min
+        : null
+
+  const valueText = getIsValidNumber(value)
+    ? getValueText(value, min, max)
+    : undefined
+  const state = getProgressState(value, max)
+  const radius = Math.max(0, (size - thickness) / 2)
+  const center = size / 2
+  const circumference = 2 * Math.PI * radius
+
+  const percentage = getIsValidNumber(value)
+    ? max === min
+      ? 1
+      : (value - min) / (max - min)
+    : null
+
+  const labelId = React.useId()
+  const valueTextId = React.useId()
+
+  const contextValue = React.useMemo<CircularProgressContextValue>(
+    () => ({
+      value,
+      valueText,
+      max,
+      min,
+      state,
+      radius,
+      thickness,
+      size,
+      center,
+      circumference,
+      percentage,
+      valueTextId,
+    }),
+    [
+      value,
+      valueText,
+      max,
+      min,
+      state,
+      radius,
+      thickness,
+      size,
+      center,
+      circumference,
+      percentage,
+      valueTextId,
+    ],
+  )
+
+  const RootPrimitive = asChild ? Slot : "div"
+
+  return (
+    <CircularProgressContext.Provider value={contextValue}>
+      <RootPrimitive
+        role="progressbar"
+        aria-describedby={valueText ? valueTextId : undefined}
+        aria-labelledby={label ? labelId : undefined}
+        aria-valuemax={max}
+        aria-valuemin={min}
+        aria-valuenow={getIsValidNumber(value) ? value : undefined}
+        aria-valuetext={valueText}
+        data-state={state}
+        data-value={value ?? undefined}
+        data-max={max}
+        data-min={min}
+        data-percentage={percentage}
+        {...rootProps}
+        className={cn(
+          "relative inline-flex w-fit items-center justify-center",
+          className,
+        )}
+      >
+        {children}
+        {label && <div id={labelId}>{label}</div>}
+      </RootPrimitive>
+    </CircularProgressContext.Provider>
+  )
+}
+
+function CircularProgressIndicator(props: React.ComponentProps<"svg">) {
+  const { className, ...indicatorProps } = props
+
+  const context = useCircularProgressContext(INDICATOR_NAME)
+
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox={`0 0 ${context.size} ${context.size}`}
+      data-state={context.state}
+      data-value={context.value ?? undefined}
+      data-max={context.max}
+      data-min={context.min}
+      data-percentage={context.percentage}
+      width={context.size}
+      height={context.size}
+      {...indicatorProps}
+      className={cn("-rotate-90 transform", className)}
+    />
+  )
+}
+
+CircularProgressIndicator.displayName = INDICATOR_NAME
+
+function CircularProgressTrack(props: React.ComponentProps<"circle">) {
+  const { className, ...trackProps } = props
+
+  const context = useCircularProgressContext(TRACK_NAME)
+
+  return (
+    <circle
+      data-state={context.state}
+      cx={context.center}
+      cy={context.center}
+      r={context.radius}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={context.thickness}
+      strokeLinecap="round"
+      vectorEffect="non-scaling-stroke"
+      {...trackProps}
+      className={cn("text-muted-foreground/20", className)}
+    />
+  )
+}
+
+function CircularProgressRange(props: React.ComponentProps<"circle">) {
+  const { className, ...rangeProps } = props
+
+  const context = useCircularProgressContext(RANGE_NAME)
+
+  const strokeDasharray = context.circumference
+  const strokeDashoffset =
+    context.state === "indeterminate"
+      ? context.circumference * 0.75
+      : context.percentage !== null
+        ? context.circumference - context.percentage * context.circumference
+        : context.circumference
+
+  return (
+    <circle
+      data-state={context.state}
+      data-value={context.value ?? undefined}
+      data-max={context.max}
+      data-min={context.min}
+      cx={context.center}
+      cy={context.center}
+      r={context.radius}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={context.thickness}
+      strokeLinecap="round"
+      strokeDasharray={strokeDasharray}
+      strokeDashoffset={strokeDashoffset}
+      vectorEffect="non-scaling-stroke"
+      {...rangeProps}
+      className={cn(
+        "origin-center text-primary transition-all duration-300 ease-in-out",
+        context.state === "indeterminate" &&
+          "motion-reduce:animate-none motion-safe:[animation:var(--animate-spin-around)]",
+        className,
+      )}
+    />
+  )
+}
+
+interface CircularProgressValueTextProps extends React.ComponentProps<"span"> {
+  asChild?: boolean
+}
+
+function CircularProgressValueText(props: CircularProgressValueTextProps) {
+  const { asChild, className, children, ...valueTextProps } = props
+
+  const context = useCircularProgressContext(VALUE_TEXT_NAME)
+
+  const ValueTextPrimitive = asChild ? Slot : "span"
+
+  return (
+    <ValueTextPrimitive
+      id={context.valueTextId}
+      data-state={context.state}
+      {...valueTextProps}
+      className={cn(
+        "absolute inset-0 flex items-center justify-center font-medium text-sm",
+        className,
+      )}
+    >
+      {children ?? context.valueText}
+    </ValueTextPrimitive>
+  )
+}
+
+function CircularProgressCombined(props: CircularProgressProps) {
+  return (
+    <CircularProgress {...props}>
+      <CircularProgressIndicator>
+        <CircularProgressTrack />
+        <CircularProgressRange />
+      </CircularProgressIndicator>
+      <CircularProgressValueText />
+    </CircularProgress>
+  )
+}
+
+export {
+  CircularProgress,
+  CircularProgressCombined,
+  CircularProgressIndicator,
+  CircularProgressRange,
+  CircularProgressTrack,
+  CircularProgressValueText,
+}
+export type { CircularProgressProps }

package/src/components/data/relative-time-card/index.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import * as React from "react";
+import moment from "moment";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../../lib/utils";
+
+const relativeTimeCardVariants = cva(
+  "inline-flex items-center gap-2 rounded-md px-2.5 py-1 text-sm font-medium",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted text-muted-foreground",
+        subtle: "bg-transparent text-muted-foreground",
+        outline: "border border-border text-foreground",
+        accent: "bg-accent text-accent-foreground",
+      },
+      size: {
+        default: "text-sm px-2.5 py-1",
+        sm: "text-xs px-2 py-0.5",
+        lg: "text-base px-3 py-1.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+interface RelativeTimeCardProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof relativeTimeCardVariants> {
+  /** Date value — accepts Date, string in any format, number (timestamp), or Moment */
+  date: Date | string | number | moment.Moment;
+  /** Input format hint if date is a string (e.g. "DD.MM.YYYY HH:mm"). Auto-detected if omitted. */
+  inputFormat?: string;
+  /** Display format: relative | auto | datetime | custom */
+  format?: "relative" | "auto" | "datetime" | "custom";
+  /** Custom output format string (moment format). Used when format="custom" */
+  outputFormat?: string;
+  /** Update interval in ms for relative format. @default 60000 */
+  updateInterval?: number;
+  /** Text before the time */
+  prefix?: string;
+  /** Text after the time */
+  suffix?: string;
+  /** Locale for display. @default "en" */
+  locale?: string;
+  /** Use UTC for all calculations. @default true */
+  utc?: boolean;
+}
+
+function parseDate(
+  value: Date | string | number | moment.Moment,
+  inputFormat?: string,
+  useUtc: boolean = true
+): moment.Moment {
+  if (moment.isMoment(value)) {
+    return useUtc ? value.utc() : value.local();
+  }
+
+  const m = useUtc ? moment.utc : moment;
+
+  if (value instanceof Date) {
+    return m(value);
+  }
+
+  if (typeof value === "number") {
+    return m(value);
+  }
+
+  if (typeof value === "string") {
+    if (inputFormat) {
+      return m(value, inputFormat, true);
+    }
+    return m(value);
+  }
+
+  return m();
+}
+
+function getRelativeTime(date: moment.Moment, locale: string = "en"): string {
+  moment.locale(locale);
+  return date.fromNow();
+}
+
+function getAutoFormat(date: moment.Moment, locale: string = "en"): string {
+  moment.locale(locale);
+  const now = moment();
+  const diffHours = now.diff(date, "hours");
+  const diffDays = now.diff(date, "days");
+
+  if (diffHours < 24) {
+    return date.format("HH:mm");
+  }
+  if (diffDays < 7) {
+    return date.format("ddd");
+  }
+  if (diffDays < 365) {
+    return date.format("MMM D");
+  }
+  return date.format("MMM D, YYYY");
+}
+
+function getDateTimeFormat(date: moment.Moment, locale: string = "en"): string {
+  moment.locale(locale);
+  return date.format("MMM D, YYYY HH:mm");
+}
+
+function formatDate(
+  date: moment.Moment,
+  format: "relative" | "auto" | "datetime" | "custom",
+  locale: string,
+  outputFormat?: string
+): string {
+  switch (format) {
+    case "relative":
+      return getRelativeTime(date, locale);
+    case "auto":
+      return getAutoFormat(date, locale);
+    case "datetime":
+      return getDateTimeFormat(date, locale);
+    case "custom":
+      moment.locale(locale);
+      return date.format(outputFormat || "YYYY-MM-DD HH:mm");
+  }
+}
+
+const RelativeTimeCard = React.forwardRef<
+  HTMLTimeElement,
+  RelativeTimeCardProps
+>(
+  (
+    {
+      date,
+      inputFormat,
+      format = "relative",
+      outputFormat,
+      updateInterval = 60000,
+      prefix,
+      suffix,
+      locale = "en",
+      utc = true,
+      className,
+      variant,
+      size,
+      ...props
+    },
+    ref
+  ) => {
+    const dateObj = React.useMemo(
+      () => parseDate(date, inputFormat, utc),
+      [date, inputFormat, utc]
+    );
+
+    const [display, setDisplay] = React.useState(() =>
+      formatDate(dateObj, format, locale, outputFormat)
+    );
+
+    React.useEffect(() => {
+      setDisplay(formatDate(dateObj, format, locale, outputFormat));
+      if (format !== "relative") return;
+      const id = setInterval(() => {
+        setDisplay(formatDate(dateObj, format, locale, outputFormat));
+      }, updateInterval);
+      return () => clearInterval(id);
+    }, [dateObj, format, locale, outputFormat, updateInterval]);
+
+    const isoString = dateObj.toISOString();
+    const title = dateObj.format("LLLL");
+
+    return (
+      <time
+        ref={ref}
+        dateTime={isoString}
+        className={cn(relativeTimeCardVariants({ variant, size }), className)}
+        title={title}
+        {...props}
+      >
+        {prefix}
+        {display}
+        {suffix}
+      </time>
+    );
+  }
+);
+RelativeTimeCard.displayName = "RelativeTimeCard";
+
+export { RelativeTimeCard, relativeTimeCardVariants };
+export type { RelativeTimeCardProps };

package/src/components/data/stat/index.tsx

@@ -0,0 +1,140 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import { Separator } from "../../layout/separator"
+
+function Stat({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="stat"
+      className={cn(
+        "grid grid-cols-[1fr_auto] gap-x-4 gap-y-1 rounded-lg border bg-card p-4 text-card-foreground shadow-sm",
+        "**:data-[slot=stat-label]:col-span-1 **:data-[slot=stat-value]:col-span-1",
+        "**:data-[slot=stat-indicator]:col-start-2 **:data-[slot=stat-indicator]:row-span-2 **:data-[slot=stat-indicator]:row-start-1 **:data-[slot=stat-indicator]:self-start",
+        "**:data-[slot=stat-description]:col-span-2 **:data-[slot=stat-separator]:col-span-2 **:data-[slot=stat-trend]:col-span-2",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function StatLabel({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="stat-label"
+      className={cn("font-medium text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+const statIndicatorVariants = cva(
+  "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "text-muted-foreground [&_svg:not([class*='size-'])]:size-5",
+        icon: "size-8 rounded-md border [&_svg:not([class*='size-'])]:size-3.5",
+        badge:
+          "h-6 min-w-6 rounded-sm border px-1.5 font-medium text-xs [&_svg:not([class*='size-'])]:size-3",
+        action:
+          "size-8 cursor-pointer rounded-md transition-colors hover:bg-muted/50 [&_svg:not([class*='size-'])]:size-4",
+      },
+      color: {
+        default: "bg-muted text-muted-foreground",
+        success:
+          "border-green-500/20 bg-green-500/10 text-green-600 dark:text-green-400",
+        info: "border-blue-500/20 bg-blue-500/10 text-blue-600 dark:text-blue-400",
+        warning:
+          "border-orange-500/20 bg-orange-500/10 text-orange-600 dark:text-orange-400",
+        error: "border-destructive/20 bg-destructive/10 text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      color: "default",
+    },
+  },
+)
+
+interface StatIndicatorProps
+  extends Omit<React.ComponentProps<"div">, "color">,
+    VariantProps<typeof statIndicatorVariants> {}
+
+function StatIndicator({
+  className,
+  variant = "default",
+  color = "default",
+  ...props
+}: StatIndicatorProps) {
+  return (
+    <div
+      data-slot="stat-indicator"
+      data-variant={variant}
+      data-color={color}
+      className={cn(statIndicatorVariants({ variant, color, className }))}
+      {...props}
+    />
+  )
+}
+
+function StatValue({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="stat-value"
+      className={cn("font-semibold text-2xl tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function StatTrend({
+  className,
+  trend,
+  ...props
+}: React.ComponentProps<"div"> & { trend?: "up" | "down" | "neutral" }) {
+  return (
+    <div
+      data-slot="stat-trend"
+      data-trend={trend}
+      className={cn(
+        "inline-flex items-center gap-1 font-medium text-xs [&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        {
+          "text-green-600 dark:text-green-400": trend === "up",
+          "text-red-600 dark:text-red-400": trend === "down",
+          "text-muted-foreground": trend === "neutral" || !trend,
+        },
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function StatSeparator({ ...props }: React.ComponentProps<typeof Separator>) {
+  return <Separator data-slot="stat-separator" className="my-2" {...props} />
+}
+
+function StatDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="stat-description"
+      className={cn("text-muted-foreground text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Stat,
+  StatDescription,
+  StatIndicator,
+  StatLabel,
+  StatSeparator,
+  StatTrend,
+  StatValue,
+  statIndicatorVariants,
+}
+export type { StatIndicatorProps }