kaze-design-system 0.6.0 → 0.7.0

package/dist/types/components/ColumnChart/ColumnChart.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes } from "react";
+export interface ColumnChartSeries {
+    /** Key of the numeric field in each data row */
+    key: string;
+    /** Display label (legend and tooltip) */
+    label: string;
+    /** Any CSS color. Defaults to the shared chart palette */
+    color?: string;
+}
+export interface ColumnChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "aria-label"> {
+    /** Rows of data. Each row holds a category label under `index` and one number per series key */
+    data: Record<string, string | number>[];
+    /** Field holding the category label (x axis) */
+    index: string;
+    series: ColumnChartSeries[];
+    /** "grouped" places series side by side, "stacked" stacks them (positive and negative separately) */
+    layout?: "grouped" | "stacked";
+    /** Chart height in px (legend excluded) */
+    height?: number;
+    showGrid?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showLegend?: boolean;
+    /** Width in px reserved for y axis labels */
+    yAxisWidth?: number;
+    /** Formats axis labels and tooltip values */
+    formatValue?: (value: number) => string;
+    /** Corner radius of the bar end that faces away from the baseline */
+    barRadius?: number;
+    /** Accessible label for the chart (required for accessibility) */
+    "aria-label": string;
+}
+export declare const ColumnChart: import("react").ForwardRefExoticComponent<ColumnChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/ColumnChart/index.d.ts

@@ -0,0 +1,2 @@
+export { ColumnChart } from "./ColumnChart";
+export type { ColumnChartProps, ColumnChartSeries } from "./ColumnChart";

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -15,10 +15,9 @@ export interface DropdownItemProps extends HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     children: ReactNode;
 }
-export interface DropdownSeparatorProps {
-}
+export type DropdownSeparatorProps = Record<string, never>;
 export declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const DropdownTrigger: import("react").ForwardRefExoticComponent<DropdownTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;
 export declare const DropdownMenu: import("react").ForwardRefExoticComponent<DropdownMenuProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const DropdownItem: import("react").ForwardRefExoticComponent<DropdownItemProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DropdownSeparator: import("react").ForwardRefExoticComponent<DropdownSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownSeparator: import("react").ForwardRefExoticComponent<Omit<DropdownSeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Heatmap/Heatmap.d.ts

@@ -0,0 +1,49 @@
+import { type HTMLAttributes } from "react";
+export interface HeatmapDatum {
+    /** Local calendar date as `YYYY-MM-DD` (no time zone conversion is applied) */
+    date: string;
+    value: number;
+}
+/** The cell passed to `formatTooltip`. `value` is `null` when there is no data. */
+export interface HeatmapCell {
+    row?: string;
+    column?: string;
+    date?: string;
+    value: number | null;
+}
+export interface HeatmapProps extends Omit<HTMLAttributes<HTMLDivElement>, "aria-label"> {
+    /** `matrix`: arbitrary rows x columns / `calendar`: one cell per day, a week per column */
+    variant?: "matrix" | "calendar";
+    /** matrix: row labels (top to bottom) */
+    rows?: string[];
+    /** matrix: column labels (left to right) */
+    columns?: string[];
+    /** matrix: `values[row][column]`. `null` renders an empty cell with no data */
+    values?: (number | null)[][];
+    /** calendar: daily values. Duplicate dates are summed */
+    data?: HeatmapDatum[];
+    /** calendar: first day (`YYYY-MM-DD`). Defaults to the earliest date in `data` */
+    startDate?: string;
+    /** calendar: last day (`YYYY-MM-DD`). Defaults to the latest date in `data` */
+    endDate?: string;
+    /** calendar: first weekday of a week row. 0 = Sunday, 1 = Monday (default) */
+    weekStartsOn?: 0 | 1;
+    /** Base color of the scale (any CSS color). Default `var(--chart-1)` */
+    color?: string;
+    /** Number of non-empty steps (default 5) */
+    levels?: number;
+    /** Value that maps to the darkest step. Defaults to the data maximum */
+    max?: number;
+    /** Cell edge length in px (default 16) */
+    cellSize?: number;
+    /** Gap between cells in px (default 3) */
+    gap?: number;
+    /** Show the "少 ... 多" legend (default true) */
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    /** Replace the tooltip text. When omitted a title and value row are shown */
+    formatTooltip?: (cell: HeatmapCell) => string;
+    /** Accessible label for the chart (required for accessibility) */
+    "aria-label": string;
+}
+export declare const Heatmap: import("react").ForwardRefExoticComponent<HeatmapProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Heatmap/index.d.ts

@@ -0,0 +1,2 @@
+export { Heatmap } from "./Heatmap";
+export type { HeatmapProps, HeatmapCell, HeatmapDatum } from "./Heatmap";

package/dist/types/components/LineChart/LineChart.d.ts

@@ -0,0 +1,40 @@
+import { type HTMLAttributes } from "react";
+export interface LineChartSeries {
+    /** Key of the value in each data row */
+    key: string;
+    /** Display label (legend and tooltip) */
+    label: string;
+    /** Stroke color (defaults to the shared chart palette by series order) */
+    color?: string;
+}
+export type LineChartDatum = Record<string, string | number | null | undefined>;
+export interface LineChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** One row per x point. Missing values (null / undefined) break the line. */
+    data: LineChartDatum[];
+    /** Key of the x axis label in each row (e.g. "month") */
+    index: string;
+    series: LineChartSeries[];
+    /** Chart height in px (default: 240) */
+    height?: number;
+    /** Fill the area under each line with a flat low-opacity color */
+    area?: boolean;
+    /** "monotone" is a monotone cubic interpolation that never overshoots (default: "linear") */
+    curve?: "linear" | "monotone";
+    /** Show horizontal grid lines (default: true) */
+    showGrid?: boolean;
+    /** Show x axis labels (default: true) */
+    showXAxis?: boolean;
+    /** Show y axis labels (default: true) */
+    showYAxis?: boolean;
+    /** Show the toggleable legend (default: true) */
+    showLegend?: boolean;
+    /** Always show point markers. The hovered point is shown regardless (default: false) */
+    showDots?: boolean;
+    /** Width reserved for y axis labels in px (default: 48) */
+    yAxisWidth?: number;
+    /** Format values for y axis and tooltip */
+    formatValue?: (value: number) => string;
+    /** Accessible description of the chart (required) */
+    "aria-label": string;
+}
+export declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart } from "./LineChart";
+export type { LineChartProps, LineChartSeries, LineChartDatum } from "./LineChart";

package/dist/types/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface SegmentedControlOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "children"> {
+    options: SegmentedControlOption[];
+    /** Controlled value */
+    value?: string;
+    /** Initial value when uncontrolled */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    size?: "sm" | "md";
+    /** Stretch to the container width with equal-width segments */
+    fullWidth?: boolean;
+    /** Group name, emitted on a hidden input for native form submission */
+    name?: string;
+    "aria-label": string;
+}
+export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl } from "./SegmentedControl";
+export type { SegmentedControlProps, SegmentedControlOption } from "./SegmentedControl";

package/dist/types/components/Sidebar/index.d.ts

@@ -1,2 +1,2 @@
 export { Sidebar, NavItem, SidebarGroupLabel, SidebarDivider } from "./Sidebar";
-export type { SidebarProps, NavItemProps, SidebarGroupLabelProps, SidebarDividerProps } from "./Sidebar";
+export type { SidebarProps, NavItemProps, SidebarGroupLabelProps, SidebarDividerProps, } from "./Sidebar";

package/dist/types/components/Toast/Toast.d.ts

@@ -24,7 +24,7 @@ interface ToastContextValue {
     toast: (options: ToastOptions) => void;
 }
 export declare function useToast(): ToastContextValue;
-export declare function ToastProvider({ children, closeLabel, containerLabel }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastProvider({ children, closeLabel, containerLabel, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ToastProvider {
     var displayName: string;
 }

package/dist/types/components/index.d.ts

@@ -14,6 +14,8 @@ export { Disclosure } from "./Disclosure";
 export type { DisclosureProps, DisclosureIcon, DisclosureIconPosition, DisclosureSize, DisclosureVariant, } from "./Disclosure";
 export { FilterPill } from "./FilterPill";
 export type { FilterPillProps } from "./FilterPill";
+export { SegmentedControl } from "./SegmentedControl";
+export type { SegmentedControlProps, SegmentedControlOption } from "./SegmentedControl";
 export { Input } from "./Input";
 export type { InputProps } from "./Input";
 export { Select } from "./Select";
@@ -41,7 +43,7 @@ export type { DialogProps, DialogHeaderProps, DialogTitleProps, DialogBodyProps,
 export { Divider } from "./Divider";
 export type { DividerProps } from "./Divider";
 export { Sidebar, NavItem, SidebarGroupLabel, SidebarDivider } from "./Sidebar";
-export type { SidebarProps, NavItemProps, SidebarGroupLabelProps, SidebarDividerProps } from "./Sidebar";
+export type { SidebarProps, NavItemProps, SidebarGroupLabelProps, SidebarDividerProps, } from "./Sidebar";
 export { TopBar } from "./TopBar";
 export type { TopBarProps } from "./TopBar";
 export { AppLayout } from "./Layout";
@@ -76,6 +78,16 @@ export { DonutChart } from "./DonutChart";
 export type { DonutChartProps, DonutChartSegment } from "./DonutChart";
 export { Sparkline } from "./Sparkline";
 export type { SparklineProps } from "./Sparkline";
+export { LineChart } from "./LineChart";
+export type { LineChartProps, LineChartSeries, LineChartDatum } from "./LineChart";
+export { ColumnChart } from "./ColumnChart";
+export type { ColumnChartProps, ColumnChartSeries } from "./ColumnChart";
+export { Heatmap } from "./Heatmap";
+export type { HeatmapProps, HeatmapCell, HeatmapDatum } from "./Heatmap";
+export { CategoryBar } from "./CategoryBar";
+export type { CategoryBarProps, CategoryBarItem, CategoryBarMarker } from "./CategoryBar";
+export { ChartLegend } from "./ChartLegend";
+export type { ChartLegendProps, ChartLegendItem } from "./ChartLegend";
 export { Alert } from "./Alert";
 export type { AlertProps, AlertVariant } from "./Alert";
 export { Progress } from "./Progress";

package/dist/types/hooks/useTheme.d.ts

@@ -13,5 +13,5 @@ export interface ThemeProviderProps {
     children: ReactNode;
     defaultTheme?: Theme;
 }
-export declare function ThemeProvider({ children, defaultTheme, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, defaultTheme }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTheme(): ThemeContextValue;

package/dist/types/lib/chartScale.d.ts

@@ -0,0 +1,19 @@
+/** Shared numeric helpers for SVG charts (no runtime dependencies). */
+export interface NiceScale {
+    /** Lower bound of the axis (a multiple of `step`) */
+    min: number;
+    /** Upper bound of the axis (a multiple of `step`) */
+    max: number;
+    step: number;
+    ticks: number[];
+}
+/**
+ * Compute axis bounds and evenly spaced ticks that cover [min, max].
+ * Zero is always included when the data does not cross it, so bars and areas
+ * have a meaningful baseline.
+ */
+export declare function niceScale(dataMin: number, dataMax: number, tickCount?: number): NiceScale;
+/** Linear map from a domain to a range. */
+export declare function linearScale(domain: [number, number], range: [number, number]): (value: number) => number;
+/** Default compact number formatter for axis labels (1,200 / 1.2万 style is left to callers). */
+export declare function defaultFormat(value: number): string;

package/dist/types/lib/utils.d.ts

@@ -1,2 +1,2 @@
-import { type ClassValue } from "./types";
+import type { ClassValue } from "./types";
 export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaze-design-system",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -12,7 +12,7 @@
   "bugs": {
     "url": "https://github.com/yuki930/kaze-design-system/issues"
   },
-  "description": "Minimal React design system for dashboards, landing pages and Japanese UI: warm neutral grays, 63 components, light/dark themes, typography tuned for CJK text",
+  "description": "Minimal React design system for dashboards, landing pages and Japanese UI: warm neutral grays, 69 components, SVG charts with zero dependencies, light/dark themes, typography tuned for CJK text",
   "keywords": [
     "design-system",
     "react",
@@ -80,7 +80,10 @@
     "build:lib": "rm -rf dist && vite build --config vite.config.lib.ts && tsc -p tsconfig.build.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint": "biome lint .",
+    "format": "biome format .",
+    "format:fix": "biome check --write ."
   },
   "peerDependencies": {
     "lucide-react": "^0.575.0",
@@ -93,6 +96,7 @@
     }
   },
   "devDependencies": {
+    "@biomejs/biome": "2.6.3",
     "@chromatic-com/storybook": "^5.0.1",
     "@storybook/addon-a11y": "^10.2.10",
     "@storybook/addon-docs": "^10.2.10",