@karakuri-ui/react 0.1.2 → 0.2.0

package/dist/chart.d.mts

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+type ChartContextProps = {
+    config: ChartConfig;
+    hoverFade: boolean;
+    activeIndex: number | null;
+    setActiveIndex: (index: number | null) => void;
+    activeDataKey: string | null;
+    setActiveDataKey: (key: string | null) => void;
+};
+declare function useChart(): ChartContextProps;
+declare function ChartContainer({ id, className, children, config, hoverFade, ...props }: React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    /** Enable hover-to-highlight: hovered bar group stays full opacity, others fade. */
+    hoverFade?: boolean;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element;
+type ChartBarRadius = 'none' | 'sm' | 'base' | 'md' | 'lg';
+type ChartBarVariant = 'solid' | 'outline';
+type ChartBarProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Bar>, 'radius'> & {
+    /** Named radius token. Auto-adapts corners based on layout and stack position. */
+    radius?: ChartBarRadius;
+    /** 'horizontal' rounds the right side (away from Y-axis). Default: 'vertical' */
+    layout?: 'vertical' | 'horizontal';
+    /** 'bottom' rounds the bottom corners (base of a stack). Default: 'top' */
+    stackPosition?: 'top' | 'bottom';
+    /** 'outline' renders a thick border with a semi-transparent fill. Default: 'solid' */
+    variant?: ChartBarVariant;
+};
+declare function ChartBar({ radius, layout, stackPosition, variant, fill, stackId, ...props }: ChartBarProps): React.JSX.Element;
+declare function ChartTooltip(props: React.ComponentProps<typeof RechartsPrimitive.Tooltip>): React.JSX.Element;
+type TooltipPayloadItem = {
+    dataKey?: string | number;
+    name?: string;
+    value?: number | string;
+    type?: string;
+    color?: string;
+    payload?: Record<string, unknown>;
+    fill?: string;
+};
+type ChartTooltipContentProps = React.ComponentProps<'div'> & {
+    active?: boolean;
+    payload?: TooltipPayloadItem[];
+    label?: string;
+    labelFormatter?: (value: unknown, payload: TooltipPayloadItem[]) => React.ReactNode;
+    labelClassName?: string;
+    formatter?: (value: unknown, name: string, item: TooltipPayloadItem, index: number, payload: Record<string, unknown>) => React.ReactNode;
+    color?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+};
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+type LegendPayloadItem = {
+    value?: string;
+    type?: string;
+    color?: string;
+    dataKey?: string;
+};
+type ChartLegendContentProps = React.ComponentProps<'div'> & {
+    payload?: LegendPayloadItem[];
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    align?: 'left' | 'center' | 'right';
+    /** Recharts passes layout when Legend uses layout prop */
+    layout?: 'horizontal' | 'vertical';
+    hideIcon?: boolean;
+    nameKey?: string;
+};
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, align, layout, nameKey, }: ChartLegendContentProps): React.JSX.Element | null;
+type ChartXAxisProps = React.ComponentProps<typeof RechartsPrimitive.XAxis>;
+type ChartYAxisProps = React.ComponentProps<typeof RechartsPrimitive.YAxis>;
+declare function ChartXAxis({ tick, padding, ...props }: ChartXAxisProps): React.JSX.Element;
+declare function ChartYAxis({ tick, width, ...props }: ChartYAxisProps): React.JSX.Element;
+type ChartLineType = 'linear' | 'monotone' | 'step' | 'natural';
+type ChartLineVariant = 'solid' | 'dashed';
+type ChartLineProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Line>, 'type' | 'dot' | 'activeDot'> & {
+    /** Curve interpolation type. Default: 'monotone' */
+    type?: ChartLineType;
+    /** Line style. 'dashed' applies stroke-dasharray. Default: 'solid' */
+    variant?: ChartLineVariant;
+    /** Show data point dots. Default: true */
+    dot?: boolean;
+    /** Show highlighted dot on hover. Default: true */
+    activeDot?: boolean;
+};
+declare function ChartLine({ type, variant, dot: showDot, activeDot: showActiveDot, stroke, dataKey, ...props }: ChartLineProps): React.JSX.Element;
+type ChartAreaType = 'linear' | 'monotone' | 'step' | 'natural';
+type ChartAreaVariant = 'solid' | 'gradient';
+type ChartAreaProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Area>, 'type' | 'dot' | 'activeDot'> & {
+    /** Curve interpolation type. Default: 'monotone' */
+    type?: ChartAreaType;
+    /** Fill style. 'gradient' auto-generates an SVG linearGradient. Default: 'solid' */
+    variant?: ChartAreaVariant;
+    /** Show data point dots. Default: true */
+    dot?: boolean;
+    /** Show highlighted dot on hover. Default: true */
+    activeDot?: boolean;
+    /** Fill opacity for this area (0–1). Default: 0.4 */
+    fillOpacity?: number;
+};
+declare function ChartArea({ type, variant, dot: showDot, activeDot: showActiveDot, fillOpacity, stroke, fill, dataKey, ...props }: ChartAreaProps): React.JSX.Element;
+type ChartPieVariant = 'pie' | 'donut';
+type ChartPieLabel = 'none' | 'outside' | 'inside';
+type ChartPieLabelContent = 'value' | 'percent';
+type ChartPieProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Pie>, 'label' | 'labelLine' | 'activeShape'> & {
+    /** 'donut' applies innerRadius automatically. Default: 'pie' */
+    variant?: ChartPieVariant;
+    /** Label position. Default: 'none' */
+    label?: ChartPieLabel;
+    /** Label display content. Default: 'value' */
+    labelContent?: ChartPieLabelContent;
+    /** Hover expand effect. Default: true */
+    activeShape?: boolean;
+    /** Override inner radius (default: 0 for pie, 60 for donut) */
+    innerRadius?: number;
+    /** Padding angle between slices (degrees). Default: 0 */
+    paddingAngle?: number;
+    /** Corner radius for slices. Default: 0 */
+    cornerRadius?: number;
+};
+declare function ChartPie({ variant, label: labelMode, labelContent, activeShape: showActiveShape, innerRadius, paddingAngle, cornerRadius, startAngle, endAngle, ...props }: ChartPieProps): React.JSX.Element;
+declare const Chart: typeof ChartContainer & {
+    Bar: typeof ChartBar;
+    Line: typeof ChartLine;
+    Area: typeof ChartArea;
+    Pie: typeof ChartPie;
+    Tooltip: typeof ChartTooltip;
+    TooltipContent: typeof ChartTooltipContent;
+    Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+    LegendContent: typeof ChartLegendContent;
+    XAxis: typeof ChartXAxis;
+    YAxis: typeof ChartYAxis;
+    Style: ({ id, config }: {
+        id: string;
+        config: ChartConfig;
+    }) => React.JSX.Element;
+};
+
+export { Chart, ChartArea, type ChartAreaType, type ChartAreaVariant, ChartBar, type ChartBarRadius, type ChartBarVariant, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartLine, type ChartLineType, type ChartLineVariant, ChartPie, type ChartPieLabel, type ChartPieLabelContent, type ChartPieVariant, ChartStyle, ChartTooltip, ChartTooltipContent, ChartXAxis, ChartYAxis, useChart };

package/dist/chart.d.ts

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+type ChartContextProps = {
+    config: ChartConfig;
+    hoverFade: boolean;
+    activeIndex: number | null;
+    setActiveIndex: (index: number | null) => void;
+    activeDataKey: string | null;
+    setActiveDataKey: (key: string | null) => void;
+};
+declare function useChart(): ChartContextProps;
+declare function ChartContainer({ id, className, children, config, hoverFade, ...props }: React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    /** Enable hover-to-highlight: hovered bar group stays full opacity, others fade. */
+    hoverFade?: boolean;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element;
+type ChartBarRadius = 'none' | 'sm' | 'base' | 'md' | 'lg';
+type ChartBarVariant = 'solid' | 'outline';
+type ChartBarProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Bar>, 'radius'> & {
+    /** Named radius token. Auto-adapts corners based on layout and stack position. */
+    radius?: ChartBarRadius;
+    /** 'horizontal' rounds the right side (away from Y-axis). Default: 'vertical' */
+    layout?: 'vertical' | 'horizontal';
+    /** 'bottom' rounds the bottom corners (base of a stack). Default: 'top' */
+    stackPosition?: 'top' | 'bottom';
+    /** 'outline' renders a thick border with a semi-transparent fill. Default: 'solid' */
+    variant?: ChartBarVariant;
+};
+declare function ChartBar({ radius, layout, stackPosition, variant, fill, stackId, ...props }: ChartBarProps): React.JSX.Element;
+declare function ChartTooltip(props: React.ComponentProps<typeof RechartsPrimitive.Tooltip>): React.JSX.Element;
+type TooltipPayloadItem = {
+    dataKey?: string | number;
+    name?: string;
+    value?: number | string;
+    type?: string;
+    color?: string;
+    payload?: Record<string, unknown>;
+    fill?: string;
+};
+type ChartTooltipContentProps = React.ComponentProps<'div'> & {
+    active?: boolean;
+    payload?: TooltipPayloadItem[];
+    label?: string;
+    labelFormatter?: (value: unknown, payload: TooltipPayloadItem[]) => React.ReactNode;
+    labelClassName?: string;
+    formatter?: (value: unknown, name: string, item: TooltipPayloadItem, index: number, payload: Record<string, unknown>) => React.ReactNode;
+    color?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+};
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+type LegendPayloadItem = {
+    value?: string;
+    type?: string;
+    color?: string;
+    dataKey?: string;
+};
+type ChartLegendContentProps = React.ComponentProps<'div'> & {
+    payload?: LegendPayloadItem[];
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    align?: 'left' | 'center' | 'right';
+    /** Recharts passes layout when Legend uses layout prop */
+    layout?: 'horizontal' | 'vertical';
+    hideIcon?: boolean;
+    nameKey?: string;
+};
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, align, layout, nameKey, }: ChartLegendContentProps): React.JSX.Element | null;
+type ChartXAxisProps = React.ComponentProps<typeof RechartsPrimitive.XAxis>;
+type ChartYAxisProps = React.ComponentProps<typeof RechartsPrimitive.YAxis>;
+declare function ChartXAxis({ tick, padding, ...props }: ChartXAxisProps): React.JSX.Element;
+declare function ChartYAxis({ tick, width, ...props }: ChartYAxisProps): React.JSX.Element;
+type ChartLineType = 'linear' | 'monotone' | 'step' | 'natural';
+type ChartLineVariant = 'solid' | 'dashed';
+type ChartLineProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Line>, 'type' | 'dot' | 'activeDot'> & {
+    /** Curve interpolation type. Default: 'monotone' */
+    type?: ChartLineType;
+    /** Line style. 'dashed' applies stroke-dasharray. Default: 'solid' */
+    variant?: ChartLineVariant;
+    /** Show data point dots. Default: true */
+    dot?: boolean;
+    /** Show highlighted dot on hover. Default: true */
+    activeDot?: boolean;
+};
+declare function ChartLine({ type, variant, dot: showDot, activeDot: showActiveDot, stroke, dataKey, ...props }: ChartLineProps): React.JSX.Element;
+type ChartAreaType = 'linear' | 'monotone' | 'step' | 'natural';
+type ChartAreaVariant = 'solid' | 'gradient';
+type ChartAreaProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Area>, 'type' | 'dot' | 'activeDot'> & {
+    /** Curve interpolation type. Default: 'monotone' */
+    type?: ChartAreaType;
+    /** Fill style. 'gradient' auto-generates an SVG linearGradient. Default: 'solid' */
+    variant?: ChartAreaVariant;
+    /** Show data point dots. Default: true */
+    dot?: boolean;
+    /** Show highlighted dot on hover. Default: true */
+    activeDot?: boolean;
+    /** Fill opacity for this area (0–1). Default: 0.4 */
+    fillOpacity?: number;
+};
+declare function ChartArea({ type, variant, dot: showDot, activeDot: showActiveDot, fillOpacity, stroke, fill, dataKey, ...props }: ChartAreaProps): React.JSX.Element;
+type ChartPieVariant = 'pie' | 'donut';
+type ChartPieLabel = 'none' | 'outside' | 'inside';
+type ChartPieLabelContent = 'value' | 'percent';
+type ChartPieProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Pie>, 'label' | 'labelLine' | 'activeShape'> & {
+    /** 'donut' applies innerRadius automatically. Default: 'pie' */
+    variant?: ChartPieVariant;
+    /** Label position. Default: 'none' */
+    label?: ChartPieLabel;
+    /** Label display content. Default: 'value' */
+    labelContent?: ChartPieLabelContent;
+    /** Hover expand effect. Default: true */
+    activeShape?: boolean;
+    /** Override inner radius (default: 0 for pie, 60 for donut) */
+    innerRadius?: number;
+    /** Padding angle between slices (degrees). Default: 0 */
+    paddingAngle?: number;
+    /** Corner radius for slices. Default: 0 */
+    cornerRadius?: number;
+};
+declare function ChartPie({ variant, label: labelMode, labelContent, activeShape: showActiveShape, innerRadius, paddingAngle, cornerRadius, startAngle, endAngle, ...props }: ChartPieProps): React.JSX.Element;
+declare const Chart: typeof ChartContainer & {
+    Bar: typeof ChartBar;
+    Line: typeof ChartLine;
+    Area: typeof ChartArea;
+    Pie: typeof ChartPie;
+    Tooltip: typeof ChartTooltip;
+    TooltipContent: typeof ChartTooltipContent;
+    Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+    LegendContent: typeof ChartLegendContent;
+    XAxis: typeof ChartXAxis;
+    YAxis: typeof ChartYAxis;
+    Style: ({ id, config }: {
+        id: string;
+        config: ChartConfig;
+    }) => React.JSX.Element;
+};
+
+export { Chart, ChartArea, type ChartAreaType, type ChartAreaVariant, ChartBar, type ChartBarRadius, type ChartBarVariant, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartLine, type ChartLineType, type ChartLineVariant, ChartPie, type ChartPieLabel, type ChartPieLabelContent, type ChartPieVariant, ChartStyle, ChartTooltip, ChartTooltipContent, ChartXAxis, ChartYAxis, useChart };