kaze-design-system 0.2.6 → 0.3.0

package/components.css

@@ -3246,17 +3246,46 @@
   gap: var(--space-3);
 }
 
+.empty-state--sm {
+  padding: var(--space-3) var(--space-2);
+  gap: var(--space-1);
+}
+
+.empty-state--md {
+  padding: var(--space-8) var(--space-4);
+  gap: var(--space-2);
+}
+
+.empty-state--lg {
+  padding: var(--space-12) var(--space-6);
+  gap: var(--space-3);
+}
+
 .empty-state__icon {
   color: var(--color-fg-tertiary);
   margin-bottom: var(--space-2);
 }
 
+.empty-state--sm .empty-state__icon {
+  margin-bottom: 0;
+}
+
 .empty-state__title {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--color-fg);
 }
 
+.empty-state--sm .empty-state__title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-secondary);
+}
+
+.empty-state--md .empty-state__title {
+  font-size: var(--font-size-base);
+}
+
 .empty-state__description {
   font-size: var(--font-size-sm);
   color: var(--color-fg-secondary);
@@ -3264,6 +3293,10 @@
   line-height: var(--line-height-relaxed);
 }
 
+.empty-state--sm .empty-state__description {
+  font-size: var(--font-size-xs);
+}
+
 .empty-state__actions {
   display: flex;
   gap: var(--space-3);
@@ -3955,3 +3988,83 @@
   font-size: var(--font-size-sm);
   color: var(--color-fg-tertiary);
 }
+
+/* ================================================================
+   HelpButton
+   ================================================================ */
+
+.help-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full);
+  background: var(--color-bg);
+  color: var(--color-fg-tertiary);
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out),
+    background-color var(--duration-fast) var(--ease-out);
+}
+
+.help-button:hover,
+.help-button[aria-expanded="true"] {
+  color: var(--color-fg);
+  border-color: var(--color-border-strong, var(--color-fg-tertiary));
+  background: var(--color-bg-subtle, var(--color-bg));
+}
+
+.help-button:focus-visible {
+  outline: 2px solid var(--color-focus, var(--color-primary));
+  outline-offset: 2px;
+}
+
+.help-popover {
+  position: absolute;
+  z-index: 1000;
+  background: var(--color-surface, var(--color-bg));
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-size-sm);
+  color: var(--color-fg);
+  line-height: var(--line-height-relaxed);
+}
+
+.help-popover--sm {
+  max-width: 220px;
+}
+
+.help-popover--md {
+  max-width: 300px;
+}
+
+.help-popover--lg {
+  max-width: 420px;
+}
+
+.help-popover__title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-fg);
+  margin: 0 0 var(--space-2) 0;
+}
+
+.help-popover__body {
+  color: var(--color-fg-secondary);
+}
+
+.help-popover__body p {
+  margin: 0 0 var(--space-2) 0;
+}
+
+.help-popover__body p:last-child {
+  margin-bottom: 0;
+}

package/dist/components/EmptyState/EmptyState.js

@@ -2,12 +2,21 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const EmptyState = forwardRef(
-  ({ icon, title, description, actions, className, ...rest }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("empty-state", className), ...rest, children: [
-    icon && /* @__PURE__ */ jsx("span", { className: "empty-state__icon", children: icon }),
-    /* @__PURE__ */ jsx("h3", { className: "empty-state__title", children: title }),
-    description && /* @__PURE__ */ jsx("p", { className: "empty-state__description", children: description }),
-    actions && /* @__PURE__ */ jsx("div", { className: "empty-state__actions", children: actions })
-  ] })
+  ({ icon, title, description, actions, size = "md", className, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "status",
+      className: cn("empty-state", `empty-state--${size}`, className),
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "empty-state__icon", children: icon }),
+        /* @__PURE__ */ jsx("h3", { className: "empty-state__title", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "empty-state__description", children: description }),
+        actions && /* @__PURE__ */ jsx("div", { className: "empty-state__actions", children: actions })
+      ]
+    }
+  )
 );
 EmptyState.displayName = "EmptyState";
 export {

package/dist/components/HelpButton/HelpButton.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useId, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/utils.js";
+const GAP = 8;
+function computePosition(trigger, pop, side) {
+  const sy = window.scrollY;
+  const sx = window.scrollX;
+  switch (side) {
+    case "top":
+      return {
+        top: trigger.top - pop.height - GAP + sy,
+        left: trigger.left + trigger.width / 2 - pop.width / 2 + sx
+      };
+    case "bottom":
+      return {
+        top: trigger.bottom + GAP + sy,
+        left: trigger.left + trigger.width / 2 - pop.width / 2 + sx
+      };
+    case "left":
+      return {
+        top: trigger.top + trigger.height / 2 - pop.height / 2 + sy,
+        left: trigger.left - pop.width - GAP + sx
+      };
+    case "right":
+      return {
+        top: trigger.top + trigger.height / 2 - pop.height / 2 + sy,
+        left: trigger.right + GAP + sx
+      };
+  }
+}
+const HelpButton = forwardRef(
+  ({
+    title,
+    children,
+    position = "bottom",
+    size = "md",
+    icon,
+    ariaLabel = "ヘルプ",
+    className
+  }, ref) => {
+    const [open, setOpen] = useState(false);
+    const [coords, setCoords] = useState({
+      top: 0,
+      left: 0
+    });
+    const triggerRef = useRef(null);
+    const popRef = useRef(null);
+    const popoverId = useId();
+    const updatePosition = useCallback(() => {
+      if (!triggerRef.current || !popRef.current) return;
+      const t = triggerRef.current.getBoundingClientRect();
+      const p = popRef.current.getBoundingClientRect();
+      setCoords(computePosition(t, p, position));
+    }, [position]);
+    useEffect(() => {
+      if (!open) return;
+      requestAnimationFrame(updatePosition);
+      const onClickOutside = (e) => {
+        const target = e.target;
+        if (popRef.current?.contains(target) || triggerRef.current?.contains(target)) {
+          return;
+        }
+        setOpen(false);
+      };
+      const onKeyDown = (e) => {
+        if (e.key === "Escape") {
+          setOpen(false);
+          triggerRef.current?.focus();
+        }
+      };
+      const onScroll = () => updatePosition();
+      document.addEventListener("mousedown", onClickOutside);
+      document.addEventListener("keydown", onKeyDown);
+      window.addEventListener("scroll", onScroll, true);
+      window.addEventListener("resize", onScroll);
+      return () => {
+        document.removeEventListener("mousedown", onClickOutside);
+        document.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener("scroll", onScroll, true);
+        window.removeEventListener("resize", onScroll);
+      };
+    }, [open, updatePosition]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          ref: (node) => {
+            triggerRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          className: cn("help-button", className),
+          "aria-label": ariaLabel,
+          "aria-expanded": open,
+          "aria-controls": open ? popoverId : void 0,
+          onClick: () => setOpen((v) => !v),
+          children: icon ?? "?"
+        }
+      ),
+      open && typeof document !== "undefined" && createPortal(
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: popRef,
+            id: popoverId,
+            role: "dialog",
+            "aria-modal": "false",
+            className: cn("help-popover", `help-popover--${size}`),
+            style: { top: coords.top, left: coords.left },
+            children: [
+              title && /* @__PURE__ */ jsx("p", { className: "help-popover__title", children: title }),
+              /* @__PURE__ */ jsx("div", { className: "help-popover__body", children })
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+);
+HelpButton.displayName = "HelpButton";
+export {
+  HelpButton
+};

package/dist/components/StatusBadge/StatusBadge.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Badge } from "../Badge/Badge.js";
+const STATUS_CONFIG = {
+  live: { variant: "positive", label: "自動更新" },
+  stale: { variant: "warning", label: "要更新" },
+  missing: { variant: "negative", label: "欠損" },
+  manual: { variant: "default", label: "手動" },
+  loading: { variant: "info", label: "取得中" }
+};
+const StatusBadge = forwardRef(
+  ({ status, label, dot = true, live, ...rest }, ref) => {
+    const config = STATUS_CONFIG[status];
+    const isLive = live ?? (status === "live" || status === "loading");
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        ref,
+        variant: config.variant,
+        dot,
+        live: isLive,
+        ...rest,
+        children: label ?? config.label
+      }
+    );
+  }
+);
+StatusBadge.displayName = "StatusBadge";
+export {
+  StatusBadge
+};

package/dist/hooks/useLegendToggle.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+function useLegendToggle() {
+  const [hiddenSeries, setHiddenSeries] = useState(/* @__PURE__ */ new Set());
+  const toggle = useCallback((dataKey) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(dataKey)) next.delete(dataKey);
+      else next.add(dataKey);
+      return next;
+    });
+  }, []);
+  const isHidden = useCallback(
+    (dataKey) => hiddenSeries.has(dataKey),
+    [hiddenSeries]
+  );
+  const reset = useCallback(() => setHiddenSeries(/* @__PURE__ */ new Set()), []);
+  const legendProps = useMemo(
+    () => ({
+      wrapperStyle: {
+        fontSize: 12,
+        cursor: "pointer"
+      },
+      onClick: (e) => {
+        if (e?.dataKey != null) toggle(String(e.dataKey));
+      },
+      formatter: (value, entry) => {
+        const key = entry?.dataKey != null ? String(entry.dataKey) : "";
+        const hidden = hiddenSeries.has(key);
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              color: hidden ? "var(--color-fg-tertiary, #a1a1aa)" : entry?.color,
+              transition: "color 0.15s ease"
+            },
+            children: value
+          }
+        );
+      }
+    }),
+    [hiddenSeries, toggle]
+  );
+  return { isHidden, toggle, reset, legendProps };
+}
+export {
+  useLegendToggle
+};

package/dist/hooks.js

@@ -1,8 +1,10 @@
 "use client";
 import { ThemeProvider, useTheme } from "./hooks/useTheme.js";
 import { useFocusTrap } from "./hooks/useFocusTrap.js";
+import { useLegendToggle } from "./hooks/useLegendToggle.js";
 export {
   ThemeProvider,
   useFocusTrap,
+  useLegendToggle,
   useTheme
 };

package/dist/index.js

@@ -25,6 +25,7 @@ import { FilterPill } from "./components/FilterPill/FilterPill.js";
 import { FormField } from "./components/FormField/FormField.js";
 import { Grid } from "./components/Grid/Grid.js";
 import { Heading } from "./components/Heading/Heading.js";
+import { HelpButton } from "./components/HelpButton/HelpButton.js";
 import { Hero } from "./components/Hero/Hero.js";
 import { Icon } from "./components/Icon/Icon.js";
 import { Input } from "./components/Input/Input.js";
@@ -47,6 +48,7 @@ import { Skeleton } from "./components/Skeleton/Skeleton.js";
 import { Sparkline } from "./components/Sparkline/Sparkline.js";
 import { SplitSection } from "./components/SplitSection/SplitSection.js";
 import { StatItem, Stats } from "./components/Stats/Stats.js";
+import { StatusBadge } from "./components/StatusBadge/StatusBadge.js";
 import { Stepper } from "./components/Stepper/Stepper.js";
 import { Switch } from "./components/Switch/Switch.js";
 import { Tab, TabGroup, TabPanel, Tabs } from "./components/Tabs/Tabs.js";
@@ -102,6 +104,7 @@ export {
   FormField,
   Grid,
   Heading,
+  HelpButton,
   Hero,
   Icon,
   Input,
@@ -134,6 +137,7 @@ export {
   SplitSection,
   StatItem,
   Stats,
+  StatusBadge,
   Stepper,
   Switch,
   Tab,

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

@@ -1,8 +1,10 @@
 import { type ReactNode, type HTMLAttributes } from "react";
+export type EmptyStateSize = "sm" | "md" | "lg";
 export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
     icon?: ReactNode;
     title: string;
-    description?: string;
+    description?: ReactNode;
     actions?: ReactNode;
+    size?: EmptyStateSize;
 }
 export declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,2 +1,2 @@
 export { EmptyState } from "./EmptyState";
-export type { EmptyStateProps } from "./EmptyState";
+export type { EmptyStateProps, EmptyStateSize } from "./EmptyState";

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

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export type HelpButtonPosition = "top" | "bottom" | "left" | "right";
+export type HelpButtonSize = "sm" | "md" | "lg";
+export interface HelpButtonProps {
+    /** Popover title */
+    title?: string;
+    /** Popover body content */
+    children: ReactNode;
+    /** Preferred side the popover appears on */
+    position?: HelpButtonPosition;
+    /** Popover width */
+    size?: HelpButtonSize;
+    /** Icon shown inside the trigger button (defaults to "?") */
+    icon?: ReactNode;
+    /** Accessible label for the trigger */
+    ariaLabel?: string;
+    className?: string;
+}
+export declare const HelpButton: import("react").ForwardRefExoticComponent<HelpButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,2 @@
+export { HelpButton } from "./HelpButton";
+export type { HelpButtonProps, HelpButtonPosition, HelpButtonSize, } from "./HelpButton";

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

@@ -0,0 +1,8 @@
+import { type BadgeProps } from "../Badge";
+export type StatusBadgeStatus = "live" | "stale" | "missing" | "manual" | "loading";
+export interface StatusBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+    status: StatusBadgeStatus;
+    /** Overrides the default label for the given status */
+    label?: string;
+}
+export declare const StatusBadge: import("react").ForwardRefExoticComponent<StatusBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,2 @@
+export { StatusBadge } from "./StatusBadge";
+export type { StatusBadgeProps, StatusBadgeStatus } from "./StatusBadge";

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

@@ -6,6 +6,10 @@ export { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } f
 export type { CardProps, CardVariant, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardBodyProps, CardFooterProps, } from "./Card";
 export { Badge } from "./Badge";
 export type { BadgeProps, BadgeVariant } from "./Badge";
+export { StatusBadge } from "./StatusBadge";
+export type { StatusBadgeProps, StatusBadgeStatus } from "./StatusBadge";
+export { HelpButton } from "./HelpButton";
+export type { HelpButtonProps, HelpButtonPosition, HelpButtonSize, } from "./HelpButton";
 export { FilterPill } from "./FilterPill";
 export type { FilterPillProps } from "./FilterPill";
 export { Input } from "./Input";
@@ -79,7 +83,7 @@ export type { SwitchProps } from "./Switch";
 export { Skeleton } from "./Skeleton";
 export type { SkeletonProps } from "./Skeleton";
 export { EmptyState } from "./EmptyState";
-export type { EmptyStateProps } from "./EmptyState";
+export type { EmptyStateProps, EmptyStateSize } from "./EmptyState";
 export { Breadcrumb } from "./Breadcrumb";
 export type { BreadcrumbProps, BreadcrumbItem } from "./Breadcrumb";
 export { Pagination } from "./Pagination";

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

@@ -1,3 +1,5 @@
 export { useTheme, ThemeProvider } from "./useTheme";
 export type { Theme, ThemeContextValue, ThemeProviderProps } from "./useTheme";
 export { useFocusTrap } from "./useFocusTrap";
+export { useLegendToggle } from "./useLegendToggle";
+export type { UseLegendToggleResult } from "./useLegendToggle";

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

@@ -0,0 +1,38 @@
+import { type CSSProperties } from "react";
+interface RechartsLegendClickEvent {
+    dataKey?: string | number;
+    value?: string;
+    color?: string;
+    [key: string]: unknown;
+}
+export interface UseLegendToggleResult {
+    /** Whether a given dataKey is currently hidden */
+    isHidden: (dataKey: string) => boolean;
+    /** Toggle visibility for a given dataKey */
+    toggle: (dataKey: string) => void;
+    /** Reset all series to visible */
+    reset: () => void;
+    /** Props to spread onto a Recharts `<Legend />` */
+    legendProps: {
+        wrapperStyle: CSSProperties;
+        onClick: (e: RechartsLegendClickEvent) => void;
+        formatter: (value: string, entry: {
+            dataKey?: string | number;
+            color?: string;
+        }) => React.ReactNode;
+    };
+}
+/**
+ * Hook for toggling Recharts legend entries to hide/show individual series.
+ *
+ * @example
+ * const { isHidden, legendProps } = useLegendToggle();
+ * return (
+ *   <BarChart data={data}>
+ *     <Legend {...legendProps} />
+ *     <Bar dataKey="revenue" hide={isHidden("revenue")} />
+ *   </BarChart>
+ * );
+ */
+export declare function useLegendToggle(): UseLegendToggleResult;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaze-design-system",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "private": false,
   "type": "module",
   "license": "MIT",