tekivex-ui 2.5.15 → 2.6.0

package/src/a11y/index.tsx

@@ -1,87 +0,0 @@
-import {
-  type ReactNode,
-  type ElementType,
-  type ComponentPropsWithoutRef,
-} from 'react';
-import { useFocusTrap } from '../hooks';
-
-// ── SkipNav ──────────────────────────────────────────────────────────────────
-
-export interface SkipNavProps {
-  contentId?: string;
-  label?: string;
-}
-
-export function SkipNav({
-  contentId = 'tkx-main-content',
-  label = 'Skip to main content',
-}: SkipNavProps) {
-  return (
-    <a href={`#${contentId}`} className="tkx-skip-nav">
-      {label}
-    </a>
-  );
-}
-
-// ── LiveRegion ───────────────────────────────────────────────────────────────
-
-export interface LiveRegionProps {
-  politeness?: 'polite' | 'assertive';
-  children?: ReactNode;
-  atomic?: boolean;
-}
-
-export function LiveRegion({
-  politeness = 'polite',
-  children,
-  atomic = true,
-}: LiveRegionProps) {
-  return (
-    <div
-      role="status"
-      aria-live={politeness}
-      aria-atomic={atomic}
-      className="tkx-sr-only"
-    >
-      {children}
-    </div>
-  );
-}
-
-// ── FocusTrap ────────────────────────────────────────────────────────────────
-
-export interface FocusTrapProps {
-  active: boolean;
-  children: ReactNode;
-  as?: ElementType;
-}
-
-export function FocusTrap({ active, children, as: Tag = 'div' }: FocusTrapProps) {
-  const ref = useFocusTrap(active);
-  return (
-    <Tag ref={ref as React.Ref<HTMLElement>}>
-      {children}
-    </Tag>
-  );
-}
-
-// ── VisuallyHidden ────────────────────────────────────────────────────────────
-
-export type VisuallyHiddenProps<T extends ElementType = 'span'> = {
-  as?: T;
-  children: ReactNode;
-} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'children'>;
-
-export function VisuallyHidden<T extends ElementType = 'span'>({
-  as,
-  children,
-  ...rest
-}: VisuallyHiddenProps<T>) {
-  const Tag = (as ?? 'span') as ElementType;
-  return (
-    <Tag className="tkx-sr-only" {...rest}>
-      {children}
-    </Tag>
-  );
-}
-

package/src/charts/TkxAreaChart.tsx

@@ -1,121 +0,0 @@
-'use client';
-
-import {
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-} from 'recharts';
-import { useTheme } from '../themes';
-import { getDefaultColors, tooltipStyle, DEFAULT_MARGIN, type ChartMargin } from './shared';
-
-export interface TkxAreaChartSeries {
-  key: string;
-  label?: string;
-  color?: string;
-  /** Fill opacity. Default: 0.2 */
-  fillOpacity?: number;
-  /** Whether to stack this series. Default: false */
-  stacked?: boolean;
-}
-
-export interface TkxAreaChartProps {
-  data: Record<string, any>[];
-  series: TkxAreaChartSeries[];
-  xKey: string;
-  height?: number;
-  margin?: ChartMargin;
-  showGrid?: boolean;
-  showLegend?: boolean;
-  showTooltip?: boolean;
-  /** Smooth curves. Default: true */
-  smooth?: boolean;
-  xTickFormatter?: (value: any) => string;
-  yTickFormatter?: (value: any) => string;
-  yDomain?: [number | 'auto' | 'dataMin' | 'dataMax', number | 'auto' | 'dataMin' | 'dataMax'];
-  /** aria-label for the chart container */
-  ariaLabel?: string;
-}
-
-export function TkxAreaChart({
-  data,
-  series,
-  xKey,
-  height = 300,
-  margin = DEFAULT_MARGIN,
-  showGrid = true,
-  showLegend = true,
-  showTooltip = true,
-  smooth = true,
-  xTickFormatter,
-  yTickFormatter,
-  yDomain,
-  ariaLabel = 'Area chart',
-}: TkxAreaChartProps) {
-  const theme = useTheme();
-  const colors = getDefaultColors(theme);
-  const tt = tooltipStyle(theme);
-
-  const tickStyle = { fill: theme.textMuted, fontSize: 12 };
-
-  return (
-    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <AreaChart data={data} margin={margin}>
-          {showGrid && (
-            <CartesianGrid strokeDasharray="3 3" stroke={theme.border} vertical={false} />
-          )}
-          <XAxis
-            dataKey={xKey}
-            tick={tickStyle}
-            axisLine={{ stroke: theme.border }}
-            tickLine={false}
-            tickFormatter={xTickFormatter}
-          />
-          <YAxis
-            tick={tickStyle}
-            axisLine={false}
-            tickLine={false}
-            tickFormatter={yTickFormatter}
-            domain={yDomain}
-          />
-          {showTooltip && (
-            <Tooltip
-              contentStyle={tt.contentStyle}
-              labelStyle={tt.labelStyle}
-              itemStyle={tt.itemStyle}
-              cursor={tt.cursor}
-            />
-          )}
-          {showLegend && (
-            <Legend
-              wrapperStyle={{ fontSize: 13, color: theme.textMuted, paddingTop: 8 }}
-            />
-          )}
-          {series.map((s, i) => {
-            const color = s.color ?? colors[i % colors.length];
-            return (
-              <Area
-                key={s.key}
-                type={smooth ? 'monotone' : 'linear'}
-                dataKey={s.key}
-                name={s.label ?? s.key}
-                stroke={color}
-                strokeWidth={2}
-                fill={color}
-                fillOpacity={s.fillOpacity ?? 0.2}
-                stackId={s.stacked ? 'stack' : undefined}
-                dot={false}
-                activeDot={{ r: 5, strokeWidth: 0 }}
-              />
-            );
-          })}
-        </AreaChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}

package/src/charts/TkxBarChart.tsx

@@ -1,117 +0,0 @@
-'use client';
-
-import {
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  Cell,
-} from 'recharts';
-import { useTheme } from '../themes';
-import { getDefaultColors, tooltipStyle, DEFAULT_MARGIN, type ChartMargin } from './shared';
-
-export interface TkxBarChartSeries {
-  key: string;
-  label?: string;
-  color?: string;
-  /** Stack ID — bars with the same stackId are stacked. */
-  stackId?: string;
-  radius?: number | [number, number, number, number];
-}
-
-export interface TkxBarChartProps {
-  data: Record<string, any>[];
-  series: TkxBarChartSeries[];
-  xKey: string;
-  height?: number;
-  margin?: ChartMargin;
-  showGrid?: boolean;
-  showLegend?: boolean;
-  showTooltip?: boolean;
-  layout?: 'vertical' | 'horizontal';
-  barSize?: number;
-  /** Use gradient fill per series. Default: false */
-  gradient?: boolean;
-  xTickFormatter?: (value: any) => string;
-  yTickFormatter?: (value: any) => string;
-  ariaLabel?: string;
-}
-
-export function TkxBarChart({
-  data,
-  series,
-  xKey,
-  height = 300,
-  margin = DEFAULT_MARGIN,
-  showGrid = true,
-  showLegend = true,
-  showTooltip = true,
-  layout = 'horizontal',
-  barSize,
-  xTickFormatter,
-  yTickFormatter,
-  ariaLabel = 'Bar chart',
-}: TkxBarChartProps) {
-  const theme = useTheme();
-  const colors = getDefaultColors(theme);
-  const tt = tooltipStyle(theme);
-  const tickStyle = { fill: theme.textMuted, fontSize: 12 };
-  const isVertical = layout === 'vertical';
-
-  return (
-    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <BarChart data={data} margin={margin} layout={layout}>
-          {showGrid && (
-            <CartesianGrid
-              strokeDasharray="3 3"
-              stroke={theme.border}
-              vertical={isVertical}
-              horizontal={!isVertical}
-            />
-          )}
-          {isVertical ? (
-            <>
-              <YAxis dataKey={xKey} type="category" tick={tickStyle} axisLine={false} tickLine={false} tickFormatter={xTickFormatter} width={100} />
-              <XAxis type="number" tick={tickStyle} axisLine={{ stroke: theme.border }} tickLine={false} tickFormatter={yTickFormatter} />
-            </>
-          ) : (
-            <>
-              <XAxis dataKey={xKey} tick={tickStyle} axisLine={{ stroke: theme.border }} tickLine={false} tickFormatter={xTickFormatter} />
-              <YAxis tick={tickStyle} axisLine={false} tickLine={false} tickFormatter={yTickFormatter} />
-            </>
-          )}
-          {showTooltip && (
-            <Tooltip
-              contentStyle={tt.contentStyle}
-              labelStyle={tt.labelStyle}
-              itemStyle={tt.itemStyle}
-              cursor={{ fill: `${theme.surfaceAlt}` }}
-            />
-          )}
-          {showLegend && (
-            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted, paddingTop: 8 }} />
-          )}
-          {series.map((s, i) => {
-            const color = s.color ?? colors[i % colors.length];
-            return (
-              <Bar
-                key={s.key}
-                dataKey={s.key}
-                name={s.label ?? s.key}
-                fill={color}
-                stackId={s.stackId}
-                maxBarSize={barSize ?? 40}
-                radius={s.radius ?? [4, 4, 0, 0]}
-              />
-            );
-          })}
-        </BarChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}

package/src/charts/TkxDonutChart.tsx

@@ -1,164 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import {
-  ResponsiveContainer,
-  PieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  Legend,
-} from 'recharts';
-import { useTheme } from '../themes';
-import { useReducedMotion } from '../hooks';
-import { getDefaultColors, tooltipStyle } from './shared';
-
-export interface TkxDonutChartSlice {
-  name: string;
-  value: number;
-  color?: string;
-}
-
-export interface TkxDonutChartProps {
-  data: TkxDonutChartSlice[];
-  height?: number;
-  showLegend?: boolean;
-  showTooltip?: boolean;
-  /** Center label — large text (e.g. total value) */
-  centerLabel?: string;
-  /** Center sublabel — small text below centerLabel */
-  centerSublabel?: string;
-  /** Inner radius as number or percentage string. Default: '55%' */
-  innerRadius?: number | string;
-  /** Outer radius as number or percentage string. Default: '75%' */
-  outerRadius?: number | string;
-  startAngle?: number;
-  ariaLabel?: string;
-}
-
-function CenterLabel({
-  cx, cy, label, sublabel, theme,
-}: {
-  cx: number; cy: number;
-  label?: string; sublabel?: string;
-  theme: any;
-}) {
-  if (!label && !sublabel) return null;
-  return (
-    <>
-      {label && (
-        <text x={cx} y={cy - (sublabel ? 8 : 0)} textAnchor="middle" dominantBaseline="middle"
-          fill={theme.text} fontSize={22} fontWeight={700} fontFamily="inherit">
-          {label}
-        </text>
-      )}
-      {sublabel && (
-        <text x={cx} y={cy + (label ? 18 : 0)} textAnchor="middle" dominantBaseline="middle"
-          fill={theme.textMuted} fontSize={13} fontFamily="inherit">
-          {sublabel}
-        </text>
-      )}
-    </>
-  );
-}
-
-export function TkxDonutChart({
-  data,
-  height = 300,
-  showLegend = true,
-  showTooltip = true,
-  centerLabel,
-  centerSublabel,
-  innerRadius = '55%',
-  outerRadius = '75%',
-  startAngle = 90,
-  ariaLabel = 'Donut chart',
-}: TkxDonutChartProps) {
-  const theme = useTheme();
-  const reduced = useReducedMotion();
-  const colors = getDefaultColors(theme);
-  const tt = tooltipStyle(theme);
-  // Force ResponsiveContainer to re-measure after the parent layout settles.
-  // When reduced motion is preferred, skip the animation and mount immediately.
-  const [mounted, setMounted] = useState(reduced);
-  useEffect(() => {
-    if (reduced) { setMounted(true); return; }
-    const id = requestAnimationFrame(() => setMounted(true));
-    return () => cancelAnimationFrame(id);
-  }, [reduced]);
-
-  return (
-    <div
-      role="img"
-      aria-label={ariaLabel}
-      style={{ width: '100%', minWidth: 240, height, position: 'relative' }}
-    >
-      {mounted && (
-      <ResponsiveContainer width="100%" height="100%" debounce={50}>
-        <PieChart>
-          {showTooltip && (
-            <Tooltip
-              contentStyle={tt.contentStyle}
-              labelStyle={tt.labelStyle}
-              itemStyle={tt.itemStyle}
-            />
-          )}
-          {showLegend && (
-            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted }} />
-          )}
-          <Pie
-            data={data}
-            dataKey="value"
-            nameKey="name"
-            innerRadius={innerRadius}
-            outerRadius={outerRadius}
-            startAngle={startAngle}
-            endAngle={startAngle - 360}
-            strokeWidth={3}
-            stroke={theme.bg}
-            label={false}
-            labelLine={false}
-          >
-            {data.map((entry, i) => (
-              <Cell key={entry.name} fill={entry.color ?? colors[i % colors.length]} />
-            ))}
-            {/* Center text via customized label — recharts passes cx/cy to label */}
-          </Pie>
-          {/* SVG center label rendered as a separate layer */}
-          {(centerLabel || centerSublabel) && (
-            <text>
-              {/* This renders nothing — actual center text needs PieChart customization */}
-            </text>
-          )}
-        </PieChart>
-      </ResponsiveContainer>
-      )}
-      {/* Overlay center label using absolute positioning */}
-      {(centerLabel || centerSublabel) && (
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            pointerEvents: 'none',
-            marginTop: showLegend ? -24 : 0,
-          }}
-        >
-          {centerLabel && (
-            <span style={{ fontSize: 22, fontWeight: 700, color: theme.text, lineHeight: 1 }}>
-              {centerLabel}
-            </span>
-          )}
-          {centerSublabel && (
-            <span style={{ fontSize: 13, color: theme.textMuted, marginTop: 4 }}>
-              {centerSublabel}
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/charts/TkxLineChart.tsx

@@ -1,137 +0,0 @@
-'use client';
-
-import {
-  ResponsiveContainer,
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ReferenceLine,
-} from 'recharts';
-import { useTheme } from '../themes';
-import { getDefaultColors, tooltipStyle, DEFAULT_MARGIN, type ChartMargin } from './shared';
-
-export interface TkxLineChartSeries {
-  key: string;
-  label?: string;
-  color?: string;
-  strokeWidth?: number;
-  dashed?: boolean;
-  dot?: boolean;
-}
-
-export interface TkxReferenceLineConfig {
-  y?: number;
-  x?: number | string;
-  label?: string;
-  color?: string;
-  dashed?: boolean;
-}
-
-export interface TkxLineChartProps {
-  data: Record<string, any>[];
-  series: TkxLineChartSeries[];
-  xKey: string;
-  height?: number;
-  margin?: ChartMargin;
-  showGrid?: boolean;
-  showLegend?: boolean;
-  showTooltip?: boolean;
-  smooth?: boolean;
-  referenceLines?: TkxReferenceLineConfig[];
-  xTickFormatter?: (value: any) => string;
-  yTickFormatter?: (value: any) => string;
-  yDomain?: [number | 'auto' | 'dataMin' | 'dataMax', number | 'auto' | 'dataMin' | 'dataMax'];
-  connectNulls?: boolean;
-  ariaLabel?: string;
-}
-
-export function TkxLineChart({
-  data,
-  series,
-  xKey,
-  height = 300,
-  margin = DEFAULT_MARGIN,
-  showGrid = true,
-  showLegend = true,
-  showTooltip = true,
-  smooth = true,
-  referenceLines = [],
-  xTickFormatter,
-  yTickFormatter,
-  yDomain,
-  connectNulls = false,
-  ariaLabel = 'Line chart',
-}: TkxLineChartProps) {
-  const theme = useTheme();
-  const colors = getDefaultColors(theme);
-  const tt = tooltipStyle(theme);
-  const tickStyle = { fill: theme.textMuted, fontSize: 12 };
-
-  return (
-    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <LineChart data={data} margin={margin}>
-          {showGrid && (
-            <CartesianGrid strokeDasharray="3 3" stroke={theme.border} vertical={false} />
-          )}
-          <XAxis
-            dataKey={xKey}
-            tick={tickStyle}
-            axisLine={{ stroke: theme.border }}
-            tickLine={false}
-            tickFormatter={xTickFormatter}
-          />
-          <YAxis
-            tick={tickStyle}
-            axisLine={false}
-            tickLine={false}
-            tickFormatter={yTickFormatter}
-            domain={yDomain}
-          />
-          {showTooltip && (
-            <Tooltip
-              contentStyle={tt.contentStyle}
-              labelStyle={tt.labelStyle}
-              itemStyle={tt.itemStyle}
-              cursor={{ stroke: theme.border, strokeWidth: 1 }}
-            />
-          )}
-          {showLegend && (
-            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted, paddingTop: 8 }} />
-          )}
-          {referenceLines.map((rl, i) => (
-            <ReferenceLine
-              key={i}
-              y={rl.y}
-              x={rl.x}
-              label={rl.label ? { value: rl.label, fill: theme.textMuted, fontSize: 11 } : undefined}
-              stroke={rl.color ?? theme.border}
-              strokeDasharray={rl.dashed ? '4 4' : undefined}
-            />
-          ))}
-          {series.map((s, i) => {
-            const color = s.color ?? colors[i % colors.length];
-            return (
-              <Line
-                key={s.key}
-                type={smooth ? 'monotone' : 'linear'}
-                dataKey={s.key}
-                name={s.label ?? s.key}
-                stroke={color}
-                strokeWidth={s.strokeWidth ?? 2}
-                strokeDasharray={s.dashed ? '6 3' : undefined}
-                dot={s.dot ?? false}
-                activeDot={{ r: 5, strokeWidth: 0, fill: color }}
-                connectNulls={connectNulls}
-              />
-            );
-          })}
-        </LineChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}