@alneas/appkit-react 0.1.0 → 0.3.0

package/dist/tools/components/calendar/views/ResourceView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceView.js","names":["React","_Fragment","React$1","LEFT_COL_WIDTH","RIGHT_COL_WIDTH","HEADER_HEIGHT","ResourceGridView","requestedCellDuration","cellDuration","calendarBusinessHours","useCalendarOptions","scrollContainerRef","timeSlots","slots","count","endHour","startHour","i","time","setMinutes","setHours","startOfDay","date","eventsByResource","groups","day","resource","resources","layoutEvents","events","event","displayRowHeight","rowHeight","segments","segment","calculatePosition","startTotalMinutes","getHours","eventStart","getMinutes","durationMinutes","eventEnd","cellWidth","isBusinessHour","isBusinessTime","timeVal","businessHours","bh","totalContentWidth","totalContentHeight","headerTopRef","headerBottomRef","headerLeftRef","headerRightRef","overlayRef","rightHeaderContainerRef","bottomHeaderContainerRef","topHeaderContainerRef","leftHeaderContainerRef","topRightCornerRef","bottomRightCornerRef","container","updateLayout","viewportWidth","viewportHeight","contentRightEdge","stickyRightEdge","rightHeaderLeft","totalVisualWidth","contentBottomEdge","stickyBottomEdge","bottomHeaderTop","sidebarHeight","observer","selectedEvent","setSelectedEvent","handleEventClick","rect","containerRect","top","left","cn","className","scrollLeft","scrollTop","isHour","format","ja","components","isWeekendOrHoliday","Fragment","onEventClick","isHourStart","onEmptySlotClick","colIdx","start","end","activateOnKey","width","lane"],"sources":["../../../../../src/tools/components/calendar/views/ResourceView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { format, getHours, getMinutes, setHours, setMinutes, startOfDay } from 'date-fns';\nimport { ja } from 'date-fns/locale';\nimport { cn } from \"../../../lib/utils\";\nimport { CalendarEvent, CalendarResource } from '../types';\nimport { layoutEvents, activateOnKey, isBusinessTime } from '../calendar-layout';\nimport { useCalendarOptions } from '../calendar-context';\n\n// Dimensions\nconst LEFT_COL_WIDTH = 96; // w-24\nconst RIGHT_COL_WIDTH = 96;\nconst HEADER_HEIGHT = 48; // h-12\n\nexport interface ResourceGridViewProps {\n  /** 表示する日付 */\n  date: Date;\n  /** リソースのリスト */\n  resources: CalendarResource[];\n  /** イベントのリスト */\n  events: CalendarEvent[];\n  /** 開始時間 (時) デフォルト: 9 */\n  startHour?: number;\n  /** 終了時間 (時) デフォルト: 23 */\n  endHour?: number;\n  /** 1セルの時間 (分) デフォルト: 30 */\n  cellDuration?: number; // minutes\n  /** 1セルの幅 (px) デフォルト: 48 */\n  cellWidth?: number; // pixels\n  /** 行の高さ (px) デフォルト: 48 */\n  rowHeight?: number; // pixels\n  /** イベントクリック時のコールバック */\n  onEventClick?: (event: CalendarEvent) => void;\n  /** 空きスロットクリック時のコールバック */\n  onEmptySlotClick?: (resourceId: string, time: Date) => void;\n  /** 週末・祝日かどうか (価格表示などに影響) */\n  isWeekendOrHoliday?: boolean;\n  /** 営業時間 (網掛け表示に使用) */\n  businessHours?: { start: number; end: number }[];\n  /** 追加のクラス名 */\n  className?: string;\n}\n\n/**\n * リソースカレンダーコンポーネント\n *\n * リソースごとのタイムラインを表示し、イベントを配置します。\n */\nexport function ResourceGridView({\n  date,\n  resources,\n  events,\n  startHour = 9,\n  endHour = 23,\n  cellDuration: requestedCellDuration = 30,\n  cellWidth = 48,\n  rowHeight = 48,\n  onEventClick,\n  onEmptySlotClick,\n  isWeekendOrHoliday = false,\n  businessHours = [{ start: 9, end: 22 }],\n  className,\n}: ResourceGridViewProps) {\n  const cellDuration =\n    Number.isFinite(requestedCellDuration) && requestedCellDuration >= 1\n      ? requestedCellDuration\n      : 30;\n  const { components, businessHours: calendarBusinessHours } = useCalendarOptions();\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  // Time slots generation\n  const timeSlots = React.useMemo(() => {\n    const slots = [];\n    const totalMinutes = (endHour - startHour) * 60;\n    const count = totalMinutes / cellDuration;\n\n    for (let i = 0; i < count; i++) {\n      const time = setMinutes(setHours(startOfDay(date), startHour), i * cellDuration);\n      slots.push(time);\n    }\n    return slots;\n  }, [date, startHour, endHour, cellDuration]);\n\n  // Group events by resource\n  const eventsByResource = React.useMemo(() => {\n    const groups = new Map<string, ReturnType<typeof layoutEvents>>();\n    const day = startOfDay(date);\n    for (const resource of resources) {\n      groups.set(\n        resource.id,\n        layoutEvents(\n          events.filter((event) => event.resourceId === resource.id),\n          setHours(day, startHour),\n          setHours(day, endHour),\n        ),\n      );\n    }\n    return groups;\n  }, [events, resources, date, startHour, endHour]);\n  const displayRowHeight =\n    rowHeight *\n    Math.max(\n      1,\n      ...Array.from(eventsByResource.values(), (segments) =>\n        Math.max(1, ...segments.map((segment) => segment.lanes)),\n      ),\n    );\n\n  const calculatePosition = (eventStart: Date, eventEnd: Date) => {\n    const startTotalMinutes = getHours(eventStart) * 60 + getMinutes(eventStart) - startHour * 60;\n    const durationMinutes = (eventEnd.getTime() - eventStart.getTime()) / (1000 * 60);\n\n    const left = (startTotalMinutes / cellDuration) * cellWidth;\n    const width = (durationMinutes / cellDuration) * cellWidth;\n\n    return { left, width };\n  };\n\n  const isBusinessHour = (time: Date, resource: CalendarResource) => {\n    if (calendarBusinessHours !== undefined || resource.businessHours !== undefined)\n      return isBusinessTime(time, calendarBusinessHours, resource);\n    const timeVal = getHours(time) + getMinutes(time) / 60;\n    return businessHours.some((bh) => timeVal >= bh.start && timeVal < bh.end);\n  };\n\n  const totalContentWidth = timeSlots.length * cellWidth;\n  const totalContentHeight = resources.length * displayRowHeight;\n\n  // Scroll Sync Refs\n  const headerTopRef = React.useRef<HTMLDivElement>(null);\n  const headerBottomRef = React.useRef<HTMLDivElement>(null);\n  const headerLeftRef = React.useRef<HTMLDivElement>(null);\n  const headerRightRef = React.useRef<HTMLDivElement>(null);\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  // Refs for layout containers to update positions efficiently\n  const rightHeaderContainerRef = React.useRef<HTMLDivElement>(null);\n  const bottomHeaderContainerRef = React.useRef<HTMLDivElement>(null);\n  const topHeaderContainerRef = React.useRef<HTMLDivElement>(null);\n  const leftHeaderContainerRef = React.useRef<HTMLDivElement>(null);\n  const topRightCornerRef = React.useRef<HTMLDivElement>(null);\n  const bottomRightCornerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    const updateLayout = () => {\n      const viewportWidth = container.clientWidth;\n      const viewportHeight = container.clientHeight;\n\n      const contentRightEdge = LEFT_COL_WIDTH + totalContentWidth;\n      const stickyRightEdge = viewportWidth - RIGHT_COL_WIDTH;\n      const rightHeaderLeft = Math.min(contentRightEdge, stickyRightEdge);\n      const totalVisualWidth = rightHeaderLeft + RIGHT_COL_WIDTH;\n\n      if (rightHeaderContainerRef.current) {\n        rightHeaderContainerRef.current.style.left = `${Math.max(0, rightHeaderLeft)}px`;\n      }\n      if (topHeaderContainerRef.current) {\n        topHeaderContainerRef.current.style.width = `${totalVisualWidth}px`;\n      }\n      if (topRightCornerRef.current) {\n        topRightCornerRef.current.style.left = `${Math.max(0, rightHeaderLeft)}px`;\n      }\n\n      const contentBottomEdge = HEADER_HEIGHT + totalContentHeight;\n      const stickyBottomEdge = viewportHeight - HEADER_HEIGHT;\n      const bottomHeaderTop = Math.min(contentBottomEdge, stickyBottomEdge);\n\n      if (bottomHeaderContainerRef.current) {\n        bottomHeaderContainerRef.current.style.top = `${Math.max(0, bottomHeaderTop)}px`;\n        bottomHeaderContainerRef.current.style.width = `${totalVisualWidth}px`;\n      }\n      if (bottomRightCornerRef.current) {\n        bottomRightCornerRef.current.style.left = `${Math.max(0, rightHeaderLeft)}px`;\n        bottomRightCornerRef.current.style.top = `${Math.max(0, bottomHeaderTop)}px`;\n      }\n\n      const sidebarHeight = Math.max(0, bottomHeaderTop - HEADER_HEIGHT);\n\n      if (leftHeaderContainerRef.current) {\n        leftHeaderContainerRef.current.style.height = `${sidebarHeight}px`;\n      }\n      if (rightHeaderContainerRef.current) {\n        rightHeaderContainerRef.current.style.height = `${sidebarHeight}px`;\n      }\n    };\n\n    const observer = new ResizeObserver(updateLayout);\n    observer.observe(container);\n    updateLayout();\n\n    return () => observer.disconnect();\n  }, [totalContentWidth, totalContentHeight]);\n\n  // Event Selection State\n  const [selectedEvent, setSelectedEvent] = React.useState<{\n    event: CalendarEvent;\n    position: { top: number; left: number };\n  } | null>(null);\n\n  const handleEventClick = (e: React.MouseEvent, event: CalendarEvent) => {\n    e.stopPropagation();\n    const rect = e.currentTarget.getBoundingClientRect();\n    const containerRect = scrollContainerRef.current?.getBoundingClientRect();\n\n    if (containerRect) {\n      const top = rect.bottom - containerRect.top;\n      const left = rect.left - containerRect.left;\n      setSelectedEvent({ event, position: { top, left } });\n    }\n  };\n\n  const handlePopoverClick = () => {\n    if (selectedEvent && onEventClick) {\n      onEventClick(selectedEvent.event);\n      setSelectedEvent(null);\n    }\n  };\n\n  const closePopover = (e?: React.MouseEvent) => {\n    e?.stopPropagation();\n    setSelectedEvent(null);\n  };\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const { scrollTop, scrollLeft } = e.currentTarget;\n    if (headerTopRef.current) {\n      headerTopRef.current.style.transform = `translateX(${-scrollLeft}px)`;\n    }\n    if (headerBottomRef.current) {\n      headerBottomRef.current.style.transform = `translateX(${-scrollLeft}px)`;\n    }\n    if (headerLeftRef.current) {\n      headerLeftRef.current.style.transform = `translateY(${-scrollTop}px)`;\n    }\n    if (headerRightRef.current) {\n      headerRightRef.current.style.transform = `translateY(${-scrollTop}px)`;\n    }\n  };\n\n  return (\n    <div className={cn('relative h-full w-full overflow-hidden border bg-background', className)}>\n      <div\n        ref={scrollContainerRef}\n        className='relative h-full w-full overflow-auto'\n        onScroll={handleScroll}\n      >\n        {/* 1. STICKY OVERLAY LAYER */}\n        <div\n          ref={overlayRef}\n          className='pointer-events-none sticky left-0 top-0 z-30 flex h-full w-full flex-col justify-between'\n        >\n          {/* Top Header Row Wrapper */}\n          <div\n            ref={topHeaderContainerRef}\n            className='pointer-events-auto absolute left-0 top-0 z-40 border-b bg-background'\n            style={{ height: HEADER_HEIGHT }}\n          >\n            <div className='pointer-events-none absolute left-0 right-0 top-0 h-full border-t' />\n            {/* Static Left Corner */}\n            <div\n              className='absolute left-0 top-0 z-50 border-l border-r bg-muted/50'\n              style={{ width: LEFT_COL_WIDTH, height: HEADER_HEIGHT }}\n            />\n            {/* Scrolling Top Time Labels */}\n            <div\n              className='absolute bottom-0 top-0 overflow-hidden bg-muted/50'\n              style={{ left: LEFT_COL_WIDTH, right: RIGHT_COL_WIDTH }}\n            >\n              <div\n                ref={headerTopRef}\n                className='will-change-transform absolute left-0 top-0 flex h-full items-center'\n              >\n                {timeSlots.map((time, i) => {\n                  const isHour = getMinutes(time) === 0;\n                  return (\n                    <div\n                      key={i}\n                      className={cn(\n                        'relative box-border flex flex-none items-center justify-start pl-1 text-sm font-medium text-muted-foreground',\n                        isHour ? 'border-l' : '',\n                      )}\n                      style={{ width: cellWidth, height: '100%' }}\n                    >\n                      {isHour && format(time, 'H時', { locale: ja })}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          </div>\n\n          {/* Bottom Header Row Wrapper */}\n          <div\n            ref={bottomHeaderContainerRef}\n            className='pointer-events-auto absolute left-0 top-full z-40 border-b border-t bg-background transition-all duration-0'\n            style={{ height: HEADER_HEIGHT }}\n          >\n            <div className='pointer-events-none absolute left-0 right-0 top-0 h-full border-b' />\n            <div\n              className='absolute left-0 top-0 z-50 border-b border-l border-r bg-muted/50'\n              style={{ width: LEFT_COL_WIDTH, height: HEADER_HEIGHT }}\n            />\n            <div\n              className='absolute bottom-0 top-0 overflow-hidden bg-muted/50'\n              style={{ left: LEFT_COL_WIDTH, right: RIGHT_COL_WIDTH }}\n            >\n              <div\n                ref={headerBottomRef}\n                className='will-change-transform absolute left-0 top-0 flex h-full items-center'\n              >\n                {timeSlots.map((time, i) => {\n                  const isHour = getMinutes(time) === 0;\n                  return (\n                    <div\n                      key={i}\n                      className={cn(\n                        'relative box-border flex flex-none items-center justify-start pl-1 text-sm font-medium text-muted-foreground',\n                        isHour ? 'border-l' : '',\n                      )}\n                      style={{ width: cellWidth, height: '100%' }}\n                    >\n                      {isHour && format(time, 'H時', { locale: ja })}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          </div>\n\n          {/* Left Sidebar Column */}\n          <div\n            ref={leftHeaderContainerRef}\n            className='pointer-events-auto absolute left-0 z-20 overflow-hidden border-l border-r bg-background'\n            style={{ top: HEADER_HEIGHT, width: LEFT_COL_WIDTH }}\n          >\n            <div\n              ref={headerLeftRef}\n              className='will-change-transform absolute left-0 top-0 flex w-full flex-col bg-background'\n            >\n              {resources.map((resource) => (\n                <div\n                  key={resource.id}\n                  className='box-border flex flex-col items-center justify-center border-b bg-muted/30 px-1 text-center text-sm font-medium text-foreground truncate'\n                  style={{ height: displayRowHeight }}\n                  title={resource.title}\n                >\n                  <div>\n                    {components?.resourceHeader\n                      ? components.resourceHeader({ resource })\n                      : resource.title}\n                  </div>\n                  {resource.prices && (\n                    <div className='text-xs font-normal text-muted-foreground'>\n                      {isWeekendOrHoliday ? resource.prices.weekend : resource.prices.base}\n                    </div>\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Right Sidebar Column */}\n          <div\n            ref={rightHeaderContainerRef}\n            className='pointer-events-auto absolute left-full z-20 overflow-hidden border-l border-r bg-background transition-all duration-0'\n            style={{ top: HEADER_HEIGHT, width: RIGHT_COL_WIDTH }}\n          >\n            <div\n              ref={headerRightRef}\n              className='will-change-transform absolute left-0 top-0 flex w-full flex-col bg-background'\n            >\n              {resources.map((resource) => (\n                <div\n                  key={resource.id}\n                  className='box-border flex flex-col items-center justify-center border-b bg-muted/30 px-1 text-center text-sm font-medium text-foreground truncate'\n                  style={{ height: displayRowHeight }}\n                  title={resource.title}\n                >\n                  <div>{resource.title}</div>\n                  {resource.prices && (\n                    <div className='text-xs font-normal text-muted-foreground'>\n                      {isWeekendOrHoliday ? resource.prices.weekend : resource.prices.peak}\n                    </div>\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Dynamic Corners */}\n          <div\n            ref={topRightCornerRef}\n            className='pointer-events-auto absolute left-full top-0 z-50 border-b border-l border-r border-t bg-muted/50'\n            style={{ width: RIGHT_COL_WIDTH, height: HEADER_HEIGHT }}\n          />\n          <div\n            ref={bottomRightCornerRef}\n            className='pointer-events-auto absolute left-full top-full z-50 border-b border-l border-r border-t bg-muted/50'\n            style={{ width: RIGHT_COL_WIDTH, height: HEADER_HEIGHT }}\n          />\n        </div>\n\n        {/* 2. CONTENT LAYER */}\n        <div\n          className='absolute left-0 top-0 z-10'\n          style={{\n            width: totalContentWidth + LEFT_COL_WIDTH + RIGHT_COL_WIDTH,\n            height: totalContentHeight + HEADER_HEIGHT * 2,\n          }}\n        >\n          {/* POPOVER TOOLTIP */}\n          {selectedEvent && (\n            <>\n              <div className='fixed inset-0 z-40 cursor-default' onClick={closePopover} />\n              <div\n                className='pointer-events-auto absolute z-50 cursor-pointer rounded-lg border bg-popover p-2 shadow-lg hover:bg-accent'\n                style={{\n                  top: selectedEvent.position.top - HEADER_HEIGHT + 10,\n                  left: selectedEvent.position.left - LEFT_COL_WIDTH + 10,\n                  width: 320,\n                }}\n                onClick={handlePopoverClick}\n              >\n                <div className='mb-1 -mx-2 -mt-2 flex items-center justify-between rounded-t-lg bg-primary px-2 py-1 text-primary-foreground'>\n                  <span className='text-sm font-bold'>\n                    {format(selectedEvent.event.start, 'HH:mm')} -{' '}\n                    {format(selectedEvent.event.end, 'HH:mm')}\n                  </span>\n                </div>\n                <div className='grid gap-1'>\n                  <div className='text-sm font-semibold'>{selectedEvent.event.title}</div>\n                  {selectedEvent.event.description && (\n                    <div className='text-xs text-muted-foreground'>\n                      {selectedEvent.event.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            </>\n          )}\n\n          <div\n            className='absolute'\n            style={{\n              top: HEADER_HEIGHT,\n              left: LEFT_COL_WIDTH,\n              width: totalContentWidth,\n              height: totalContentHeight,\n            }}\n          >\n            {resources.map((resource) => (\n              <div\n                key={resource.id}\n                className='relative flex box-border border-b bg-background'\n                style={{ height: displayRowHeight, width: totalContentWidth }}\n              >\n                {timeSlots.map((time, colIdx) => {\n                  const isHourStart = getMinutes(time) === 0;\n                  return (\n                    <button\n                      key={colIdx}\n                      type='button'\n                      disabled={!onEmptySlotClick}\n                      aria-label={`${resource.title} ${format(time, 'yyyy-MM-dd HH:mm')}`}\n                      className={cn(\n                        'pointer-events-auto box-border h-full flex-none border-r hover:bg-muted/10',\n                        isHourStart ? 'border-border' : 'border-border border-dashed',\n                        !isBusinessHour(time, resource) && 'bg-muted/20',\n                      )}\n                      style={{ width: cellWidth }}\n                      onClick={() => onEmptySlotClick && onEmptySlotClick(resource.id, time)}\n                    />\n                  );\n                })}\n\n                {eventsByResource.get(resource.id)?.map(({ event, start, end, lane }) => {\n                  const { left, width } = calculatePosition(start, end);\n                  return (\n                    <div\n                      key={event.id}\n                      data-event-id={event.id}\n                      role='button'\n                      tabIndex={0}\n                      onKeyDown={(e) => activateOnKey(e, () => onEventClick?.(event))}\n                      className={cn(\n                        'pointer-events-auto absolute z-10 select-none overflow-hidden rounded px-1 text-xs text-white shadow-sm hover:opacity-90',\n                        event.color || 'bg-primary text-primary-foreground',\n                      )}\n                      style={{\n                        left,\n                        width: Math.max(1, width - 2),\n                        top: lane * rowHeight + 4,\n                        height: rowHeight - 8,\n                      }}\n                      onClick={(e) => handleEventClick(e, event)}\n                      title={`${event.title} (${format(event.start, 'HH:mm')} - ${format(\n                        event.end,\n                        'HH:mm',\n                      )})`}\n                    >\n                      {components?.event ? (\n                        components.event({ event })\n                      ) : (\n                        <>\n                          <div className='truncate font-semibold'>{event.title}</div>\n                          {width > 40 && event.description && (\n                            <div className='truncate opacity-90'>{event.description}</div>\n                          )}\n                        </>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ResourceView.js","names":["React","_Fragment","React$1","LEFT_COL_WIDTH","RIGHT_COL_WIDTH","HEADER_HEIGHT","ResourceGridView","requestedCellDuration","cellDuration","calendarBusinessHours","useCalendarOptions","scrollContainerRef","timeSlots","slots","count","endHour","startHour","i","time","setMinutes","setHours","startOfDay","date","eventsByResource","groups","day","resource","resources","layoutEvents","events","event","displayRowHeight","rowHeight","segments","segment","calculatePosition","startTotalMinutes","getHours","eventStart","getMinutes","durationMinutes","eventEnd","cellWidth","isBusinessHour","isBusinessTime","timeVal","businessHours","bh","totalContentWidth","totalContentHeight","headerTopRef","headerBottomRef","headerLeftRef","headerRightRef","overlayRef","rightHeaderContainerRef","bottomHeaderContainerRef","topHeaderContainerRef","leftHeaderContainerRef","topRightCornerRef","bottomRightCornerRef","container","updateLayout","viewportWidth","viewportHeight","contentRightEdge","stickyRightEdge","rightHeaderLeft","totalVisualWidth","contentBottomEdge","stickyBottomEdge","bottomHeaderTop","sidebarHeight","observer","selectedEvent","setSelectedEvent","handleEventClick","rect","containerRect","top","left","cn","className","scrollLeft","scrollTop","isHour","format","ja","components","isWeekendOrHoliday","Fragment","onEventClick","isHourStart","onEmptySlotClick","colIdx","start","end","activateOnKey","width","lane"],"sources":["../../../../../src/tools/components/calendar/views/ResourceView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { format, getHours, getMinutes, setHours, setMinutes, startOfDay } from 'date-fns';\nimport { ja } from 'date-fns/locale';\nimport { cn } from \"../../../lib/utils\";\nimport { CalendarEvent, CalendarResource } from '../types';\nimport { layoutEvents, activateOnKey, isBusinessTime } from '../calendar-layout';\nimport { useCalendarOptions } from '../calendar-context';\n\n// Dimensions\nconst LEFT_COL_WIDTH = 96; // w-24\nconst RIGHT_COL_WIDTH = 96;\nconst HEADER_HEIGHT = 48; // h-12\n\nexport interface ResourceGridViewProps {\n  /** 表示する日付 */\n  date: Date;\n  /** リソースのリスト */\n  resources: CalendarResource[];\n  /** イベントのリスト */\n  events: CalendarEvent[];\n  /** 開始時間 (時) デフォルト: 9 */\n  startHour?: number;\n  /** 終了時間 (時) デフォルト: 23 */\n  endHour?: number;\n  /** 1セルの時間 (分) デフォルト: 30 */\n  cellDuration?: number; // minutes\n  /** 1セルの幅 (px) デフォルト: 48 */\n  cellWidth?: number; // pixels\n  /** 行の高さ (px) デフォルト: 48 */\n  rowHeight?: number; // pixels\n  /** イベントクリック時のコールバック */\n  onEventClick?: (event: CalendarEvent) => void;\n  /** 空きスロットクリック時のコールバック */\n  onEmptySlotClick?: (resourceId: string, time: Date) => void;\n  /** 週末・祝日かどうか (価格表示などに影響) */\n  isWeekendOrHoliday?: boolean;\n  /** 営業時間 (網掛け表示に使用) */\n  businessHours?: { start: number; end: number }[];\n  /** 追加のクラス名 */\n  className?: string;\n}\n\n/**\n * リソースカレンダーコンポーネント\n *\n * リソースごとのタイムラインを表示し、イベントを配置します。\n */\nexport function ResourceGridView({\n  date,\n  resources,\n  events,\n  startHour = 9,\n  endHour = 23,\n  cellDuration: requestedCellDuration = 30,\n  cellWidth = 48,\n  rowHeight = 48,\n  onEventClick,\n  onEmptySlotClick,\n  isWeekendOrHoliday = false,\n  businessHours = [{ start: 9, end: 22 }],\n  className,\n}: ResourceGridViewProps) {\n  const cellDuration =\n    Number.isFinite(requestedCellDuration) && requestedCellDuration >= 1\n      ? requestedCellDuration\n      : 30;\n  const { components, businessHours: calendarBusinessHours } = useCalendarOptions();\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  // Time slots generation\n  const timeSlots = React.useMemo(() => {\n    const slots = [];\n    const totalMinutes = (endHour - startHour) * 60;\n    const count = totalMinutes / cellDuration;\n\n    for (let i = 0; i < count; i++) {\n      const time = setMinutes(setHours(startOfDay(date), startHour), i * cellDuration);\n      slots.push(time);\n    }\n    return slots;\n  }, [date, startHour, endHour, cellDuration]);\n\n  // Group events by resource\n  const eventsByResource = React.useMemo(() => {\n    const groups = new Map<string, ReturnType<typeof layoutEvents>>();\n    const day = startOfDay(date);\n    for (const resource of resources) {\n      groups.set(\n        resource.id,\n        layoutEvents(\n          events.filter((event) => event.resourceId === resource.id),\n          setHours(day, startHour),\n          setHours(day, endHour),\n        ),\n      );\n    }\n    return groups;\n  }, [events, resources, date, startHour, endHour]);\n  const displayRowHeight =\n    rowHeight *\n    Math.max(\n      1,\n      ...Array.from(eventsByResource.values(), (segments) =>\n        Math.max(1, ...segments.map((segment) => segment.lanes)),\n      ),\n    );\n\n  const calculatePosition = (eventStart: Date, eventEnd: Date) => {\n    const startTotalMinutes = getHours(eventStart) * 60 + getMinutes(eventStart) - startHour * 60;\n    const durationMinutes = (eventEnd.getTime() - eventStart.getTime()) / (1000 * 60);\n\n    const left = (startTotalMinutes / cellDuration) * cellWidth;\n    const width = (durationMinutes / cellDuration) * cellWidth;\n\n    return { left, width };\n  };\n\n  const isBusinessHour = (time: Date, resource: CalendarResource) => {\n    if (calendarBusinessHours !== undefined || resource.businessHours !== undefined)\n      return isBusinessTime(time, calendarBusinessHours, resource);\n    const timeVal = getHours(time) + getMinutes(time) / 60;\n    return businessHours.some((bh) => timeVal >= bh.start && timeVal < bh.end);\n  };\n\n  const totalContentWidth = timeSlots.length * cellWidth;\n  const totalContentHeight = resources.length * displayRowHeight;\n\n  // Scroll Sync Refs\n  const headerTopRef = React.useRef<HTMLDivElement>(null);\n  const headerBottomRef = React.useRef<HTMLDivElement>(null);\n  const headerLeftRef = React.useRef<HTMLDivElement>(null);\n  const headerRightRef = React.useRef<HTMLDivElement>(null);\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  // Refs for layout containers to update positions efficiently\n  const rightHeaderContainerRef = React.useRef<HTMLDivElement>(null);\n  const bottomHeaderContainerRef = React.useRef<HTMLDivElement>(null);\n  const topHeaderContainerRef = React.useRef<HTMLDivElement>(null);\n  const leftHeaderContainerRef = React.useRef<HTMLDivElement>(null);\n  const topRightCornerRef = React.useRef<HTMLDivElement>(null);\n  const bottomRightCornerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    const updateLayout = () => {\n      const viewportWidth = container.clientWidth;\n      const viewportHeight = container.clientHeight;\n\n      const contentRightEdge = LEFT_COL_WIDTH + totalContentWidth;\n      const stickyRightEdge = viewportWidth - RIGHT_COL_WIDTH;\n      const rightHeaderLeft = Math.min(contentRightEdge, stickyRightEdge);\n      const totalVisualWidth = rightHeaderLeft + RIGHT_COL_WIDTH;\n\n      if (rightHeaderContainerRef.current) {\n        rightHeaderContainerRef.current.style.left = `${Math.max(0, rightHeaderLeft)}px`;\n      }\n      if (topHeaderContainerRef.current) {\n        topHeaderContainerRef.current.style.width = `${totalVisualWidth}px`;\n      }\n      if (topRightCornerRef.current) {\n        topRightCornerRef.current.style.left = `${Math.max(0, rightHeaderLeft)}px`;\n      }\n\n      const contentBottomEdge = HEADER_HEIGHT + totalContentHeight;\n      const stickyBottomEdge = viewportHeight - HEADER_HEIGHT;\n      const bottomHeaderTop = Math.min(contentBottomEdge, stickyBottomEdge);\n\n      if (bottomHeaderContainerRef.current) {\n        bottomHeaderContainerRef.current.style.top = `${Math.max(0, bottomHeaderTop)}px`;\n        bottomHeaderContainerRef.current.style.width = `${totalVisualWidth}px`;\n      }\n      if (bottomRightCornerRef.current) {\n        bottomRightCornerRef.current.style.left = `${Math.max(0, rightHeaderLeft)}px`;\n        bottomRightCornerRef.current.style.top = `${Math.max(0, bottomHeaderTop)}px`;\n      }\n\n      const sidebarHeight = Math.max(0, bottomHeaderTop - HEADER_HEIGHT);\n\n      if (leftHeaderContainerRef.current) {\n        leftHeaderContainerRef.current.style.height = `${sidebarHeight}px`;\n      }\n      if (rightHeaderContainerRef.current) {\n        rightHeaderContainerRef.current.style.height = `${sidebarHeight}px`;\n      }\n    };\n\n    const observer = new ResizeObserver(updateLayout);\n    observer.observe(container);\n    updateLayout();\n\n    return () => observer.disconnect();\n  }, [totalContentWidth, totalContentHeight]);\n\n  // Event Selection State\n  const [selectedEvent, setSelectedEvent] = React.useState<{\n    event: CalendarEvent;\n    position: { top: number; left: number };\n  } | null>(null);\n\n  const handleEventClick = (e: React.MouseEvent, event: CalendarEvent) => {\n    e.stopPropagation();\n    const rect = e.currentTarget.getBoundingClientRect();\n    const containerRect = scrollContainerRef.current?.getBoundingClientRect();\n\n    if (containerRect) {\n      const top = rect.bottom - containerRect.top;\n      const left = rect.left - containerRect.left;\n      setSelectedEvent({ event, position: { top, left } });\n    }\n  };\n\n  const handlePopoverClick = () => {\n    if (selectedEvent && onEventClick) {\n      onEventClick(selectedEvent.event);\n      setSelectedEvent(null);\n    }\n  };\n\n  const closePopover = (e?: React.MouseEvent) => {\n    e?.stopPropagation();\n    setSelectedEvent(null);\n  };\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const { scrollTop, scrollLeft } = e.currentTarget;\n    if (headerTopRef.current) {\n      headerTopRef.current.style.transform = `translateX(${-scrollLeft}px)`;\n    }\n    if (headerBottomRef.current) {\n      headerBottomRef.current.style.transform = `translateX(${-scrollLeft}px)`;\n    }\n    if (headerLeftRef.current) {\n      headerLeftRef.current.style.transform = `translateY(${-scrollTop}px)`;\n    }\n    if (headerRightRef.current) {\n      headerRightRef.current.style.transform = `translateY(${-scrollTop}px)`;\n    }\n  };\n\n  return (\n    <div className={cn('relative h-full w-full overflow-hidden border bg-background', className)}>\n      <div\n        ref={scrollContainerRef}\n        className='relative h-full w-full overflow-auto'\n        onScroll={handleScroll}\n      >\n        {/* 1. STICKY OVERLAY LAYER */}\n        <div\n          ref={overlayRef}\n          className='pointer-events-none sticky left-0 top-0 z-30 flex h-full w-full flex-col justify-between'\n        >\n          {/* Top Header Row Wrapper */}\n          <div\n            ref={topHeaderContainerRef}\n            className='pointer-events-auto absolute left-0 top-0 z-40 border-b bg-background'\n            style={{ height: HEADER_HEIGHT }}\n          >\n            <div className='pointer-events-none absolute left-0 right-0 top-0 h-full border-t' />\n            {/* Static Left Corner */}\n            <div\n              className='absolute left-0 top-0 z-50 border-l border-r bg-muted/50'\n              style={{ width: LEFT_COL_WIDTH, height: HEADER_HEIGHT }}\n            />\n            {/* Scrolling Top Time Labels */}\n            <div\n              className='absolute bottom-0 top-0 overflow-hidden bg-muted/50'\n              style={{ left: LEFT_COL_WIDTH, right: RIGHT_COL_WIDTH }}\n            >\n              <div\n                ref={headerTopRef}\n                className='will-change-transform absolute left-0 top-0 flex h-full items-center'\n              >\n                {timeSlots.map((time, i) => {\n                  const isHour = getMinutes(time) === 0;\n                  return (\n                    <div\n                      key={i}\n                      className={cn(\n                        'relative box-border flex flex-none items-center justify-start pl-1 text-sm font-medium text-muted-foreground',\n                        isHour ? 'border-l' : '',\n                      )}\n                      style={{ width: cellWidth, height: '100%' }}\n                    >\n                      {isHour && format(time, 'H時', { locale: ja })}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          </div>\n\n          {/* Bottom Header Row Wrapper */}\n          <div\n            ref={bottomHeaderContainerRef}\n            className='pointer-events-auto absolute left-0 top-full z-40 border-b border-t bg-background transition-all duration-0'\n            style={{ height: HEADER_HEIGHT }}\n          >\n            <div className='pointer-events-none absolute left-0 right-0 top-0 h-full border-b' />\n            <div\n              className='absolute left-0 top-0 z-50 border-b border-l border-r bg-muted/50'\n              style={{ width: LEFT_COL_WIDTH, height: HEADER_HEIGHT }}\n            />\n            <div\n              className='absolute bottom-0 top-0 overflow-hidden bg-muted/50'\n              style={{ left: LEFT_COL_WIDTH, right: RIGHT_COL_WIDTH }}\n            >\n              <div\n                ref={headerBottomRef}\n                className='will-change-transform absolute left-0 top-0 flex h-full items-center'\n              >\n                {timeSlots.map((time, i) => {\n                  const isHour = getMinutes(time) === 0;\n                  return (\n                    <div\n                      key={i}\n                      className={cn(\n                        'relative box-border flex flex-none items-center justify-start pl-1 text-sm font-medium text-muted-foreground',\n                        isHour ? 'border-l' : '',\n                      )}\n                      style={{ width: cellWidth, height: '100%' }}\n                    >\n                      {isHour && format(time, 'H時', { locale: ja })}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          </div>\n\n          {/* Left Sidebar Column */}\n          <div\n            ref={leftHeaderContainerRef}\n            className='pointer-events-auto absolute left-0 z-20 overflow-hidden border-l border-r bg-background'\n            style={{ top: HEADER_HEIGHT, width: LEFT_COL_WIDTH }}\n          >\n            <div\n              ref={headerLeftRef}\n              className='will-change-transform absolute left-0 top-0 flex w-full flex-col bg-background'\n            >\n              {resources.map((resource) => (\n                <div\n                  key={resource.id}\n                  className='box-border flex flex-col items-center justify-center border-b bg-muted/30 px-1 text-center text-sm font-medium text-foreground truncate'\n                  style={{ height: displayRowHeight }}\n                  title={resource.title}\n                >\n                  <div>\n                    {components?.resourceHeader\n                      ? components.resourceHeader({ resource })\n                      : resource.title}\n                  </div>\n                  {resource.prices && (\n                    <div className='text-xs font-normal text-muted-foreground'>\n                      {isWeekendOrHoliday ? resource.prices.weekend : resource.prices.base}\n                    </div>\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Right Sidebar Column */}\n          <div\n            ref={rightHeaderContainerRef}\n            className='pointer-events-auto absolute left-full z-20 overflow-hidden border-l border-r bg-background transition-all duration-0'\n            style={{ top: HEADER_HEIGHT, width: RIGHT_COL_WIDTH }}\n          >\n            <div\n              ref={headerRightRef}\n              className='will-change-transform absolute left-0 top-0 flex w-full flex-col bg-background'\n            >\n              {resources.map((resource) => (\n                <div\n                  key={resource.id}\n                  className='box-border flex flex-col items-center justify-center border-b bg-muted/30 px-1 text-center text-sm font-medium text-foreground truncate'\n                  style={{ height: displayRowHeight }}\n                  title={resource.title}\n                >\n                  <div>{resource.title}</div>\n                  {resource.prices && (\n                    <div className='text-xs font-normal text-muted-foreground'>\n                      {isWeekendOrHoliday ? resource.prices.weekend : resource.prices.peak}\n                    </div>\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Dynamic Corners */}\n          <div\n            ref={topRightCornerRef}\n            className='pointer-events-auto absolute left-full top-0 z-50 border-b border-l border-r border-t bg-muted/50'\n            style={{ width: RIGHT_COL_WIDTH, height: HEADER_HEIGHT }}\n          />\n          <div\n            ref={bottomRightCornerRef}\n            className='pointer-events-auto absolute left-full top-full z-50 border-b border-l border-r border-t bg-muted/50'\n            style={{ width: RIGHT_COL_WIDTH, height: HEADER_HEIGHT }}\n          />\n        </div>\n\n        {/* 2. CONTENT LAYER */}\n        <div\n          className='absolute left-0 top-0 z-10'\n          style={{\n            width: totalContentWidth + LEFT_COL_WIDTH + RIGHT_COL_WIDTH,\n            height: totalContentHeight + HEADER_HEIGHT * 2,\n          }}\n        >\n          {/* POPOVER TOOLTIP */}\n          {selectedEvent && (\n            <>\n              <div className='fixed inset-0 z-40 cursor-default' onClick={closePopover} />\n              <div\n                className='pointer-events-auto absolute z-50 cursor-pointer rounded-lg border bg-popover p-2 shadow-lg hover:bg-accent'\n                style={{\n                  top: selectedEvent.position.top - HEADER_HEIGHT + 10,\n                  left: selectedEvent.position.left - LEFT_COL_WIDTH + 10,\n                  width: 320,\n                }}\n                onClick={handlePopoverClick}\n              >\n                <div className='mb-1 -mx-2 -mt-2 flex items-center justify-between rounded-t-lg bg-primary px-2 py-1 text-primary-foreground'>\n                  <span className='text-sm font-bold'>\n                    {format(selectedEvent.event.start, 'HH:mm')} -{' '}\n                    {format(selectedEvent.event.end, 'HH:mm')}\n                  </span>\n                </div>\n                <div className='grid gap-1'>\n                  <div className='text-sm font-semibold'>{selectedEvent.event.title}</div>\n                  {selectedEvent.event.description && (\n                    <div className='text-xs text-muted-foreground'>\n                      {selectedEvent.event.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            </>\n          )}\n\n          <div\n            className='absolute'\n            style={{\n              top: HEADER_HEIGHT,\n              left: LEFT_COL_WIDTH,\n              width: totalContentWidth,\n              height: totalContentHeight,\n            }}\n          >\n            {resources.map((resource) => (\n              <div\n                key={resource.id}\n                className='relative flex box-border border-b bg-background'\n                style={{ height: displayRowHeight, width: totalContentWidth }}\n              >\n                {timeSlots.map((time, colIdx) => {\n                  const isHourStart = getMinutes(time) === 0;\n                  return (\n                    <button\n                      key={colIdx}\n                      type='button'\n                      disabled={!onEmptySlotClick}\n                      aria-label={`${resource.title} ${format(time, 'yyyy-MM-dd HH:mm')}`}\n                      className={cn(\n                        'pointer-events-auto box-border h-full flex-none border-r hover:bg-muted/10',\n                        isHourStart ? 'border-border' : 'border-border border-dashed',\n                        !isBusinessHour(time, resource) && 'bg-muted/20',\n                      )}\n                      style={{ width: cellWidth }}\n                      onClick={() => onEmptySlotClick && onEmptySlotClick(resource.id, time)}\n                    />\n                  );\n                })}\n\n                {eventsByResource.get(resource.id)?.map(({ event, start, end, lane }) => {\n                  const { left, width } = calculatePosition(start, end);\n                  return (\n                    <div\n                      key={event.id}\n                      data-event-id={event.id}\n                      role='button'\n                      tabIndex={0}\n                      onKeyDown={(e) => activateOnKey(e, () => onEventClick?.(event))}\n                      className={cn(\n                        'pointer-events-auto absolute z-10 select-none overflow-hidden rounded px-1 text-xs text-white shadow-sm hover:brightness-95',\n                        event.color || 'bg-primary text-primary-foreground',\n                      )}\n                      style={{\n                        left,\n                        width: Math.max(1, width - 2),\n                        top: lane * rowHeight + 4,\n                        height: rowHeight - 8,\n                      }}\n                      onClick={(e) => handleEventClick(e, event)}\n                      title={`${event.title} (${format(event.start, 'HH:mm')} - ${format(\n                        event.end,\n                        'HH:mm',\n                      )})`}\n                    >\n                      {components?.event ? (\n                        components.event({ event })\n                      ) : (\n                        <>\n                          <div className='truncate font-semibold'>{event.title}</div>\n                          {width > 40 && event.description && (\n                            <div className='truncate'>{event.description}</div>\n                          )}\n                        </>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tools/components/chart/ComposedChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","RechartsComposedChart","CartesianGrid","XAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Bar","Line","Area","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","ComposedChart","defaultConfig","series","s","index","title","description","config","height","xAxisKey","value","colorVar"],"sources":["../../../../src/tools/components/chart/ComposedChart.tsx"],"sourcesContent":["import {\n  Area,\n  Bar,\n  CartesianGrid,\n  ComposedChart as RechartsComposedChart,\n  Line,\n  XAxis,\n} from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '../ui/chart';\n\nexport interface ComposedChartSeries {\n  key: string;\n  type: 'bar' | 'line' | 'area';\n  color?: string;\n  stackId?: string;\n}\n\ninterface ComposedChartProps {\n  data: Array<Record<string, unknown>>;\n  xAxisKey: string;\n  series: ComposedChartSeries[];\n  title: string;\n  description?: string;\n  config?: ChartConfig;\n  height?: number | string;\n}\n\n/**\n * 棒、折れ線、エリアチャートを組み合わせて1つのグラフに描画する複合チャートコンポーネント。\n */\nexport function ComposedChart({\n  data,\n  xAxisKey,\n  series,\n  title,\n  description,\n  config,\n  height = '300px',\n}: ComposedChartProps) {\n  const defaultConfig: ChartConfig = {};\n  series.forEach((s, index) => {\n    defaultConfig[s.key] = {\n      label: s.key,\n      color: s.color || `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <RechartsComposedChart accessibilityLayer data={data}>\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n\n            {series.map((s) => {\n              const colorVar = `var(--color-${s.key})`;\n\n              if (s.type === 'bar') {\n                return (\n                  <Bar\n                    key={s.key}\n                    dataKey={s.key}\n                    fill={colorVar}\n                    stackId={s.stackId}\n                    radius={[4, 4, 0, 0]}\n                  />\n                );\n              }\n              if (s.type === 'line') {\n                return (\n                  <Line\n                    key={s.key}\n                    dataKey={s.key}\n                    type='monotone'\n                    stroke={colorVar}\n                    strokeWidth={2}\n                    dot={false}\n                  />\n                );\n              }\n              if (s.type === 'area') {\n                return (\n                  <Area\n                    key={s.key}\n                    dataKey={s.key}\n                    type='natural'\n                    fill={colorVar}\n                    fillOpacity={0.4}\n                    stroke={colorVar}\n                    stackId={s.stackId}\n                  />\n                );\n              }\n              return null;\n            })}\n          </RechartsComposedChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NAuCA,SAAgBoB,EAAc,CAC5B,OACA,WACA,SACA,QACA,cACA,SACA,SAAS,SACY,CACrB,IAAMC,EAA6B,CAAC,EAUpC,OATAC,EAAO,SAAS,EAAG,IAAU,CAC3B,EAAcC,EAAE,KAAO,CACrB,MAAOA,EAAE,IACT,MAAOA,EAAE,OAAS,mBAAoBC,EAAQ,EAAK,EAAE,GACvD,CACF,CAAC,GAKC,EAAAN,EAAA,KAAA,CAAClB,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAkB,EAAA,KAAA,CAACjB,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAiB,EAAA,IAAA,CAAChB,EAAAA,UAAD,CAAA,SAAYuB,CAAiB,CAAA,EAC5BC,IAAe,EAAAR,EAAA,IAAA,CAACf,EAAAA,gBAAD,CAAA,SAAkBuB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAR,EAAA,IAAA,CAACd,EAAAA,YAAD,CAAA,UACE,EAAAc,EAAA,IAAA,CAACb,EAAAA,eAAD,CAAgB,OATFsB,GAAUN,EASa,UAAW,iBAAiBO,EAAO,GACtE,UAAA,EAAAV,EAAA,KAAA,CAACZ,EAAAA,cAAD,CAAuB,mBAAA,GAAyB,OAAhD,SAAA,EACE,EAAAY,EAAA,IAAA,CAACX,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAW,EAAA,IAAA,CAACV,EAAAA,MAAD,CACE,QAASqB,EACT,SAAU,GACV,SAAU,GACV,WAAY,EACZ,cAAgB,GAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,EAAG,CAAC,EAClD,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAZ,EAAA,IAAA,CAACT,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAAS,EAAA,IAAA,CAACR,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,GAChE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,YAAD,CAAa,SAAS,EAAAO,EAAA,IAAA,CAACN,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,EAE9CU,EAAO,IAAK,GAAM,CACjB,IAAMS,EAAW,eAAeR,EAAE,IAAI,GAsCtC,OApCIA,EAAE,OAAS,OAEX,EAAAL,EAAA,IAAA,CAACL,EAAAA,IAAD,CAEE,QAASU,EAAE,IACX,KAAMQ,EACN,QAASR,EAAE,QACX,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,CACpB,EALMA,EAAE,GAKR,EAGDA,EAAE,OAAS,QAEX,EAAAL,EAAA,IAAA,CAACJ,EAAAA,KAAD,CAEE,QAASS,EAAE,IACX,KAAK,WACL,OAAQQ,EACR,YAAa,EACb,IAAK,EACN,EANMR,EAAE,GAMR,EAGDA,EAAE,OAAS,QAEX,EAAAL,EAAA,IAAA,CAACH,EAAAA,KAAD,CAEE,QAASQ,EAAE,IACX,KAAK,UACL,KAAMQ,EACN,YAAa,GACb,OAAQA,EACR,QAASR,EAAE,OACZ,EAPMA,EAAE,GAOR,EAGE,IACT,CAAC,CACoB,C,EACT,CAAA,CACL,CAAA,CACT,C,EAEV,C"}
+{"version":3,"file":"ComposedChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","RechartsComposedChart","CartesianGrid","XAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Bar","Line","Area","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","ComposedChart","defaultConfig","series","s","index","title","description","config","height","xAxisKey","value","colorVar"],"sources":["../../../../src/tools/components/chart/ComposedChart.tsx"],"sourcesContent":["import {\n  Area,\n  Bar,\n  CartesianGrid,\n  ComposedChart as RechartsComposedChart,\n  Line,\n  XAxis,\n} from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '../ui/chart';\n\n/**\n * One numeric series and its rendering/stacking choice.\n * @see ComposedChart\n */\nexport interface ComposedChartSeries {\n  /**\n   * Record key and CSS color-variable suffix for this series.\n   */\n  key: string;\n  /**\n   * Rendering primitive for the series: bar, line or area.\n   */\n  type: 'bar' | 'line' | 'area';\n  /**\n   * Optional literal CSS color used only when generating the default config; a supplied config replaces that generation.\n   */\n  color?: string;\n  /**\n   * Optional shared stack identifier for bar/area series; line series ignore it.\n   */\n  stackId?: string;\n}\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see ComposedChart\n */\ninterface ComposedChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key used for the horizontal axis; category charts format ticks to the first five characters.\n   */\n  xAxisKey: string;\n  /**\n   * Series definitions in render order; each key identifies a numeric record property.\n   */\n  series: ComposedChartSeries[];\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n}\n\n/**\n * Renders caller-selected bar, line and area series in one chart.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see ComposedChartProps. Wrapper defaults: height='300px'.\n * @returns The rendered ComposedChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. Bar/area series forward stackId; lines do not. Line interpolation is monotone; area interpolation is natural. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.\n * @example\n * ```tsx\n * import { ComposedChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ComposedChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} series={[{ key: \"sales\", type: \"bar\" }]} xAxisKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function ComposedChart({\n  data,\n  xAxisKey,\n  series,\n  title,\n  description,\n  config,\n  height = '300px',\n}: ComposedChartProps) {\n  const defaultConfig: ChartConfig = {};\n  series.forEach((s, index) => {\n    defaultConfig[s.key] = {\n      label: s.key,\n      color: s.color || `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <RechartsComposedChart accessibilityLayer data={data}>\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n\n            {series.map((s) => {\n              const colorVar = `var(--color-${s.key})`;\n\n              if (s.type === 'bar') {\n                return (\n                  <Bar\n                    key={s.key}\n                    dataKey={s.key}\n                    fill={colorVar}\n                    stackId={s.stackId}\n                    radius={[4, 4, 0, 0]}\n                  />\n                );\n              }\n              if (s.type === 'line') {\n                return (\n                  <Line\n                    key={s.key}\n                    dataKey={s.key}\n                    type='monotone'\n                    stroke={colorVar}\n                    strokeWidth={2}\n                    dot={false}\n                  />\n                );\n              }\n              if (s.type === 'area') {\n                return (\n                  <Area\n                    key={s.key}\n                    dataKey={s.key}\n                    type='natural'\n                    fill={colorVar}\n                    fillOpacity={0.4}\n                    stroke={colorVar}\n                    stackId={s.stackId}\n                  />\n                );\n              }\n              return null;\n            })}\n          </RechartsComposedChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NA4FA,SAAgBoB,EAAc,CAC5B,OACA,WACA,SACA,QACA,cACA,SACA,SAAS,SACY,CACrB,IAAMC,EAA6B,CAAC,EAUpC,OATAC,EAAO,SAAS,EAAG,IAAU,CAC3B,EAAcC,EAAE,KAAO,CACrB,MAAOA,EAAE,IACT,MAAOA,EAAE,OAAS,mBAAoBC,EAAQ,EAAK,EAAE,GACvD,CACF,CAAC,GAKC,EAAAN,EAAA,KAAA,CAAClB,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAkB,EAAA,KAAA,CAACjB,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAiB,EAAA,IAAA,CAAChB,EAAAA,UAAD,CAAA,SAAYuB,CAAiB,CAAA,EAC5BC,IAAe,EAAAR,EAAA,IAAA,CAACf,EAAAA,gBAAD,CAAA,SAAkBuB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAR,EAAA,IAAA,CAACd,EAAAA,YAAD,CAAA,UACE,EAAAc,EAAA,IAAA,CAACb,EAAAA,eAAD,CAAgB,OATFsB,GAAUN,EASa,UAAW,iBAAiBO,EAAO,GACtE,UAAA,EAAAV,EAAA,KAAA,CAACZ,EAAAA,cAAD,CAAuB,mBAAA,GAAyB,OAAhD,SAAA,EACE,EAAAY,EAAA,IAAA,CAACX,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAW,EAAA,IAAA,CAACV,EAAAA,MAAD,CACE,QAASqB,EACT,SAAU,GACV,SAAU,GACV,WAAY,EACZ,cAAgB,GAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,EAAG,CAAC,EAClD,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAZ,EAAA,IAAA,CAACT,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAAS,EAAA,IAAA,CAACR,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,GAChE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,YAAD,CAAa,SAAS,EAAAO,EAAA,IAAA,CAACN,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,EAE9CU,EAAO,IAAK,GAAM,CACjB,IAAMS,EAAW,eAAeR,EAAE,IAAI,GAsCtC,OApCIA,EAAE,OAAS,OAEX,EAAAL,EAAA,IAAA,CAACL,EAAAA,IAAD,CAEE,QAASU,EAAE,IACX,KAAMQ,EACN,QAASR,EAAE,QACX,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,CACpB,EALMA,EAAE,GAKR,EAGDA,EAAE,OAAS,QAEX,EAAAL,EAAA,IAAA,CAACJ,EAAAA,KAAD,CAEE,QAASS,EAAE,IACX,KAAK,WACL,OAAQQ,EACR,YAAa,EACb,IAAK,EACN,EANMR,EAAE,GAMR,EAGDA,EAAE,OAAS,QAEX,EAAAL,EAAA,IAAA,CAACH,EAAAA,KAAD,CAEE,QAASQ,EAAE,IACX,KAAK,UACL,KAAMQ,EACN,YAAa,GACb,OAAQA,EACR,QAASR,EAAE,OACZ,EAPMA,EAAE,GAOR,EAGE,IACT,CAAC,CACoB,C,EACT,CAAA,CACL,CAAA,CACT,C,EAEV,C"}

package/dist/tools/components/chart/ComposedChart.d.cts

@@ -1,21 +1,74 @@
 import { ChartConfig } from '../ui/chart.cjs';
+/**
+ * One numeric series and its rendering/stacking choice.
+ * @see ComposedChart
+ */
 export interface ComposedChartSeries {
+    /**
+     * Record key and CSS color-variable suffix for this series.
+     */
     key: string;
+    /**
+     * Rendering primitive for the series: bar, line or area.
+     */
     type: 'bar' | 'line' | 'area';
+    /**
+     * Optional literal CSS color used only when generating the default config; a supplied config replaces that generation.
+     */
     color?: string;
+    /**
+     * Optional shared stack identifier for bar/area series; line series ignore it.
+     */
     stackId?: string;
 }
+/**
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see ComposedChart
+ */
 interface ComposedChartProps {
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
+    /**
+     * Series definitions in render order; each key identifies a numeric record property.
+     */
     series: ComposedChartSeries[];
+    /**
+     * Visible card heading.
+     */
     title: string;
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
+    /**
+     * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.
+     */
     config?: ChartConfig;
+    /**
+     * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.
+     */
     height?: number | string;
 }
 /**
- * 棒、折れ線、エリアチャートを組み合わせて1つのグラフに描画する複合チャートコンポーネント。
+ * Renders caller-selected bar, line and area series in one chart.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see ComposedChartProps. Wrapper defaults: height='300px'.
+ * @returns The rendered ComposedChart composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. Bar/area series forward stackId; lines do not. Line interpolation is monotone; area interpolation is natural. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.
+ * @example
+ * ```tsx
+ * import { ComposedChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ComposedChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} series={[{ key: "sales", type: "bar" }]} xAxisKey="month" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
+ * ```
  */
 export declare function ComposedChart({ data, xAxisKey, series, title, description, config, height, }: ComposedChartProps): import('react').JSX.Element;
 export {};

package/dist/tools/components/chart/ComposedChart.d.ts

@@ -1,21 +1,74 @@
 import { ChartConfig } from '../ui/chart.js';
+/**
+ * One numeric series and its rendering/stacking choice.
+ * @see ComposedChart
+ */
 export interface ComposedChartSeries {
+    /**
+     * Record key and CSS color-variable suffix for this series.
+     */
     key: string;
+    /**
+     * Rendering primitive for the series: bar, line or area.
+     */
     type: 'bar' | 'line' | 'area';
+    /**
+     * Optional literal CSS color used only when generating the default config; a supplied config replaces that generation.
+     */
     color?: string;
+    /**
+     * Optional shared stack identifier for bar/area series; line series ignore it.
+     */
     stackId?: string;
 }
+/**
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see ComposedChart
+ */
 interface ComposedChartProps {
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
+    /**
+     * Series definitions in render order; each key identifies a numeric record property.
+     */
     series: ComposedChartSeries[];
+    /**
+     * Visible card heading.
+     */
     title: string;
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
+    /**
+     * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.
+     */
     config?: ChartConfig;
+    /**
+     * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.
+     */
     height?: number | string;
 }
 /**
- * 棒、折れ線、エリアチャートを組み合わせて1つのグラフに描画する複合チャートコンポーネント。
+ * Renders caller-selected bar, line and area series in one chart.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see ComposedChartProps. Wrapper defaults: height='300px'.
+ * @returns The rendered ComposedChart composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. Bar/area series forward stackId; lines do not. Line interpolation is monotone; area interpolation is natural. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.
+ * @example
+ * ```tsx
+ * import { ComposedChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ComposedChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} series={[{ key: "sales", type: "bar" }]} xAxisKey="month" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
+ * ```
  */
 export declare function ComposedChart({ data, xAxisKey, series, title, description, config, height, }: ComposedChartProps): import('react').JSX.Element;
 export {};

package/dist/tools/components/chart/ComposedChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedChart.js","names":["RechartsComposedChart","ComposedChart$1","ComposedChart","defaultConfig","series","s","index","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","height","CartesianGrid","XAxis","xAxisKey","value","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","colorVar","Bar","Line","Area"],"sources":["../../../../src/tools/components/chart/ComposedChart.tsx"],"sourcesContent":["import {\n  Area,\n  Bar,\n  CartesianGrid,\n  ComposedChart as RechartsComposedChart,\n  Line,\n  XAxis,\n} from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '../ui/chart';\n\nexport interface ComposedChartSeries {\n  key: string;\n  type: 'bar' | 'line' | 'area';\n  color?: string;\n  stackId?: string;\n}\n\ninterface ComposedChartProps {\n  data: Array<Record<string, unknown>>;\n  xAxisKey: string;\n  series: ComposedChartSeries[];\n  title: string;\n  description?: string;\n  config?: ChartConfig;\n  height?: number | string;\n}\n\n/**\n * 棒、折れ線、エリアチャートを組み合わせて1つのグラフに描画する複合チャートコンポーネント。\n */\nexport function ComposedChart({\n  data,\n  xAxisKey,\n  series,\n  title,\n  description,\n  config,\n  height = '300px',\n}: ComposedChartProps) {\n  const defaultConfig: ChartConfig = {};\n  series.forEach((s, index) => {\n    defaultConfig[s.key] = {\n      label: s.key,\n      color: s.color || `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <RechartsComposedChart accessibilityLayer data={data}>\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n\n            {series.map((s) => {\n              const colorVar = `var(--color-${s.key})`;\n\n              if (s.type === 'bar') {\n                return (\n                  <Bar\n                    key={s.key}\n                    dataKey={s.key}\n                    fill={colorVar}\n                    stackId={s.stackId}\n                    radius={[4, 4, 0, 0]}\n                  />\n                );\n              }\n              if (s.type === 'line') {\n                return (\n                  <Line\n                    key={s.key}\n                    dataKey={s.key}\n                    type='monotone'\n                    stroke={colorVar}\n                    strokeWidth={2}\n                    dot={false}\n                  />\n                );\n              }\n              if (s.type === 'area') {\n                return (\n                  <Area\n                    key={s.key}\n                    dataKey={s.key}\n                    type='natural'\n                    fill={colorVar}\n                    fillOpacity={0.4}\n                    stroke={colorVar}\n                    stackId={s.stackId}\n                  />\n                );\n              }\n              return null;\n            })}\n          </RechartsComposedChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AAuCA,SAAgBE,EAAc,EAC5B,SACA,aACA,WACA,UACA,gBACA,WACA,YAAS,WACY;CACrB,IAAMC,IAA6B,CAAC;CAUpC,OATAC,EAAO,SAAS,GAAG,MAAU;EAC3B,EAAcC,EAAE,OAAO;GACrB,OAAOA,EAAE;GACT,OAAOA,EAAE,SAAS,mBAAoBC,IAAQ,IAAK,EAAE;EACvD;CACF,CAAC,GAKC,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD,EAAA,UACE,kBAACC,GAAD;GAAgB,QATFC,KAAUZ;GASa,WAAW,iBAAiBa,EAAO;GACtE,UAAA,kBAAChB,GAAD;IAAuB,oBAAA;IAAyB;IAAhD,UAAA;KACE,kBAACiB,GAAD;MAAe,UAAU;MAAO,QAAO;KAAuB,CAAA;KAC9D,kBAACC,GAAD;MACE,SAASC;MACT,UAAU;MACV,UAAU;MACV,YAAY;MACZ,gBAAgB,MAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,GAAG,CAAC;MAClD,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACD,kBAACC,GAAD;MAAc,QAAQ;MAAO,SAAS,kBAACC,GAAD,CAAsB,CAAA;KAAI,CAAA;KAChE,kBAACC,GAAD,EAAa,SAAS,kBAACC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAE9CpB,EAAO,KAAK,MAAM;MACjB,IAAMqB,IAAW,eAAepB,EAAE,IAAI;MAsCtC,OApCIA,EAAE,SAAS,QAEX,kBAACqB,GAAD;OAEE,SAASrB,EAAE;OACX,MAAMoB;OACN,SAASpB,EAAE;OACX,QAAQ;QAAC;QAAG;QAAG;QAAG;OAAC;MACpB,GALMA,EAAE,GAKR,IAGDA,EAAE,SAAS,SAEX,kBAACsB,GAAD;OAEE,SAAStB,EAAE;OACX,MAAK;OACL,QAAQoB;OACR,aAAa;OACb,KAAK;MACN,GANMpB,EAAE,GAMR,IAGDA,EAAE,SAAS,SAEX,kBAACuB,GAAD;OAEE,SAASvB,EAAE;OACX,MAAK;OACL,MAAMoB;OACN,aAAa;OACb,QAAQA;OACR,SAASpB,EAAE;MACZ,GAPMA,EAAE,GAOR,IAGE;KACT,CAAC;IACoB;;EACT,CAAA,EACL,CAAA,CACT;;AAEV"}
+{"version":3,"file":"ComposedChart.js","names":["RechartsComposedChart","ComposedChart$1","ComposedChart","defaultConfig","series","s","index","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","height","CartesianGrid","XAxis","xAxisKey","value","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","colorVar","Bar","Line","Area"],"sources":["../../../../src/tools/components/chart/ComposedChart.tsx"],"sourcesContent":["import {\n  Area,\n  Bar,\n  CartesianGrid,\n  ComposedChart as RechartsComposedChart,\n  Line,\n  XAxis,\n} from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '../ui/chart';\n\n/**\n * One numeric series and its rendering/stacking choice.\n * @see ComposedChart\n */\nexport interface ComposedChartSeries {\n  /**\n   * Record key and CSS color-variable suffix for this series.\n   */\n  key: string;\n  /**\n   * Rendering primitive for the series: bar, line or area.\n   */\n  type: 'bar' | 'line' | 'area';\n  /**\n   * Optional literal CSS color used only when generating the default config; a supplied config replaces that generation.\n   */\n  color?: string;\n  /**\n   * Optional shared stack identifier for bar/area series; line series ignore it.\n   */\n  stackId?: string;\n}\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see ComposedChart\n */\ninterface ComposedChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key used for the horizontal axis; category charts format ticks to the first five characters.\n   */\n  xAxisKey: string;\n  /**\n   * Series definitions in render order; each key identifies a numeric record property.\n   */\n  series: ComposedChartSeries[];\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n}\n\n/**\n * Renders caller-selected bar, line and area series in one chart.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see ComposedChartProps. Wrapper defaults: height='300px'.\n * @returns The rendered ComposedChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. Bar/area series forward stackId; lines do not. Line interpolation is monotone; area interpolation is natural. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.\n * @example\n * ```tsx\n * import { ComposedChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ComposedChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} series={[{ key: \"sales\", type: \"bar\" }]} xAxisKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function ComposedChart({\n  data,\n  xAxisKey,\n  series,\n  title,\n  description,\n  config,\n  height = '300px',\n}: ComposedChartProps) {\n  const defaultConfig: ChartConfig = {};\n  series.forEach((s, index) => {\n    defaultConfig[s.key] = {\n      label: s.key,\n      color: s.color || `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <RechartsComposedChart accessibilityLayer data={data}>\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n\n            {series.map((s) => {\n              const colorVar = `var(--color-${s.key})`;\n\n              if (s.type === 'bar') {\n                return (\n                  <Bar\n                    key={s.key}\n                    dataKey={s.key}\n                    fill={colorVar}\n                    stackId={s.stackId}\n                    radius={[4, 4, 0, 0]}\n                  />\n                );\n              }\n              if (s.type === 'line') {\n                return (\n                  <Line\n                    key={s.key}\n                    dataKey={s.key}\n                    type='monotone'\n                    stroke={colorVar}\n                    strokeWidth={2}\n                    dot={false}\n                  />\n                );\n              }\n              if (s.type === 'area') {\n                return (\n                  <Area\n                    key={s.key}\n                    dataKey={s.key}\n                    type='natural'\n                    fill={colorVar}\n                    fillOpacity={0.4}\n                    stroke={colorVar}\n                    stackId={s.stackId}\n                  />\n                );\n              }\n              return null;\n            })}\n          </RechartsComposedChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AA4FA,SAAgBE,EAAc,EAC5B,SACA,aACA,WACA,UACA,gBACA,WACA,YAAS,WACY;CACrB,IAAMC,IAA6B,CAAC;CAUpC,OATAC,EAAO,SAAS,GAAG,MAAU;EAC3B,EAAcC,EAAE,OAAO;GACrB,OAAOA,EAAE;GACT,OAAOA,EAAE,SAAS,mBAAoBC,IAAQ,IAAK,EAAE;EACvD;CACF,CAAC,GAKC,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD,EAAA,UACE,kBAACC,GAAD;GAAgB,QATFC,KAAUZ;GASa,WAAW,iBAAiBa,EAAO;GACtE,UAAA,kBAAChB,GAAD;IAAuB,oBAAA;IAAyB;IAAhD,UAAA;KACE,kBAACiB,GAAD;MAAe,UAAU;MAAO,QAAO;KAAuB,CAAA;KAC9D,kBAACC,GAAD;MACE,SAASC;MACT,UAAU;MACV,UAAU;MACV,YAAY;MACZ,gBAAgB,MAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,GAAG,CAAC;MAClD,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACD,kBAACC,GAAD;MAAc,QAAQ;MAAO,SAAS,kBAACC,GAAD,CAAsB,CAAA;KAAI,CAAA;KAChE,kBAACC,GAAD,EAAa,SAAS,kBAACC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAE9CpB,EAAO,KAAK,MAAM;MACjB,IAAMqB,IAAW,eAAepB,EAAE,IAAI;MAsCtC,OApCIA,EAAE,SAAS,QAEX,kBAACqB,GAAD;OAEE,SAASrB,EAAE;OACX,MAAMoB;OACN,SAASpB,EAAE;OACX,QAAQ;QAAC;QAAG;QAAG;QAAG;OAAC;MACpB,GALMA,EAAE,GAKR,IAGDA,EAAE,SAAS,SAEX,kBAACsB,GAAD;OAEE,SAAStB,EAAE;OACX,MAAK;OACL,QAAQoB;OACR,aAAa;OACb,KAAK;MACN,GANMpB,EAAE,GAMR,IAGDA,EAAE,SAAS,SAEX,kBAACuB,GAAD;OAEE,SAASvB,EAAE;OACX,MAAK;OACL,MAAMoB;OACN,aAAa;OACb,QAAQA;OACR,SAASpB,EAAE;MACZ,GAPMA,EAAE,GAOR,IAGE;KACT,CAAC;IACoB;;EACT,CAAA,EACL,CAAA,CACT;;AAEV"}

package/dist/tools/components/chart/SimpleAreaChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleAreaChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","AreaChart","CartesianGrid","XAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Area","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimpleAreaChart","defaultConfig","areaKeys","key","index","title","description","config","height","xAxisKey","value","stacked"],"sources":["../../../../src/tools/components/chart/SimpleAreaChart.tsx"],"sourcesContent":["import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\ninterface SimpleAreaChartProps {\n  data: Array<Record<string, unknown>>;\n  xAxisKey: string;\n  areaKeys: string[];\n  title: string;\n  description?: string;\n  config?: ChartConfig;\n  height?: number | string;\n  stacked?: boolean;\n}\n\n/**\n * データをエリアで塗りつぶして表現するエリアチャート（面積グラフ）コンポーネント。\n */\nexport function SimpleAreaChart({\n  data,\n  xAxisKey,\n  areaKeys,\n  title,\n  description,\n  config,\n  height = '250px',\n  stacked = false,\n}: SimpleAreaChartProps) {\n  const defaultConfig: ChartConfig = {};\n  areaKeys.forEach((key, index) => {\n    defaultConfig[key] = {\n      label: key,\n      color: `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <AreaChart\n            accessibilityLayer\n            data={data}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            {areaKeys.map((key) => (\n              <Area\n                key={key}\n                dataKey={key}\n                type='natural'\n                fill={`var(--color-${key})`}\n                fillOpacity={0.4}\n                stroke={`var(--color-${key})`}\n                stackId={stacked ? 'a' : undefined}\n              />\n            ))}\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NA0BA,SAAgBkB,EAAgB,CAC9B,OACA,WACA,WACA,QACA,cACA,SACA,SAAS,QACT,UAAU,IACa,CACvB,IAAMC,EAA6B,CAAC,EAUpC,OATAC,EAAS,SAAS,EAAK,IAAU,CAC/B,EAAcC,GAAO,CACnB,MAAOA,EACP,MAAO,mBAAoBC,EAAQ,EAAK,EAAE,GAC5C,CACF,CAAC,GAKC,EAAAN,EAAA,KAAA,CAAChB,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAgB,EAAA,KAAA,CAACf,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAe,EAAA,IAAA,CAACd,EAAAA,UAAD,CAAA,SAAYqB,CAAiB,CAAA,EAC5BC,IAAe,EAAAR,EAAA,IAAA,CAACb,EAAAA,gBAAD,CAAA,SAAkBqB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAR,EAAA,IAAA,CAACZ,EAAAA,YAAD,CAAA,UACE,EAAAY,EAAA,IAAA,CAACX,EAAAA,eAAD,CAAgB,OATFoB,GAAUN,EASa,UAAW,iBAAiBO,EAAO,GACtE,UAAA,EAAAV,EAAA,KAAA,CAACV,EAAAA,UAAD,CACE,mBAAA,GACM,OACN,OAAQ,CACN,KAAM,GACN,MAAO,EACT,EANF,SAAA,EAQE,EAAAU,EAAA,IAAA,CAACT,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAS,EAAA,IAAA,CAACR,EAAAA,MAAD,CACE,QAASmB,EACT,SAAU,GACV,SAAU,GACV,WAAY,EACZ,cAAgB,GAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,EAAG,CAAC,EAClD,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAZ,EAAA,IAAA,CAACP,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAAO,EAAA,IAAA,CAACN,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,GAChE,EAAAM,EAAA,IAAA,CAACL,EAAAA,YAAD,CAAa,SAAS,EAAAK,EAAA,IAAA,CAACJ,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,EAC9CQ,EAAS,IAAK,IACb,EAAAJ,EAAA,IAAA,CAACH,EAAAA,KAAD,CAEE,QAASQ,EACT,KAAK,UACL,KAAM,eAAeA,EAAI,GACzB,YAAa,GACb,OAAQ,eAAeA,EAAI,GAC3B,QAASQ,EAAU,IAAM,IAAA,EAC1B,EAPMR,CAON,CACF,CACQ,C,EACG,CAAA,CACL,CAAA,CACT,C,EAEV,C"}
+{"version":3,"file":"SimpleAreaChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","AreaChart","CartesianGrid","XAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Area","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimpleAreaChart","defaultConfig","areaKeys","key","index","title","description","config","height","xAxisKey","value","stacked"],"sources":["../../../../src/tools/components/chart/SimpleAreaChart.tsx"],"sourcesContent":["import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimpleAreaChart\n */\ninterface SimpleAreaChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key used for the horizontal axis; category charts format ticks to the first five characters.\n   */\n  xAxisKey: string;\n  /**\n   * Record keys for numeric area series in declared order.\n   */\n  areaKeys: string[];\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n  /**\n   * Stacks area series under shared ID a when true; defaults to false.\n   */\n  stacked?: boolean;\n}\n\n/**\n * Renders one or more numeric series as natural area curves with optional stacking.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleAreaChartProps. Wrapper defaults: height='250px', stacked=false.\n * @returns The rendered SimpleAreaChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 250px and stacked to false. Stacking uses shared stack ID a. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.\n * @example\n * ```tsx\n * import { SimpleAreaChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimpleAreaChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} areaKeys={[\"sales\"]} xAxisKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimpleAreaChart({\n  data,\n  xAxisKey,\n  areaKeys,\n  title,\n  description,\n  config,\n  height = '250px',\n  stacked = false,\n}: SimpleAreaChartProps) {\n  const defaultConfig: ChartConfig = {};\n  areaKeys.forEach((key, index) => {\n    defaultConfig[key] = {\n      label: key,\n      color: `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <AreaChart\n            accessibilityLayer\n            data={data}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            {areaKeys.map((key) => (\n              <Area\n                key={key}\n                dataKey={key}\n                type='natural'\n                fill={`var(--color-${key})`}\n                fillOpacity={0.4}\n                stroke={`var(--color-${key})`}\n                stackId={stacked ? 'a' : undefined}\n              />\n            ))}\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NAkEA,SAAgBkB,EAAgB,CAC9B,OACA,WACA,WACA,QACA,cACA,SACA,SAAS,QACT,UAAU,IACa,CACvB,IAAMC,EAA6B,CAAC,EAUpC,OATAC,EAAS,SAAS,EAAK,IAAU,CAC/B,EAAcC,GAAO,CACnB,MAAOA,EACP,MAAO,mBAAoBC,EAAQ,EAAK,EAAE,GAC5C,CACF,CAAC,GAKC,EAAAN,EAAA,KAAA,CAAChB,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAgB,EAAA,KAAA,CAACf,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAe,EAAA,IAAA,CAACd,EAAAA,UAAD,CAAA,SAAYqB,CAAiB,CAAA,EAC5BC,IAAe,EAAAR,EAAA,IAAA,CAACb,EAAAA,gBAAD,CAAA,SAAkBqB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAR,EAAA,IAAA,CAACZ,EAAAA,YAAD,CAAA,UACE,EAAAY,EAAA,IAAA,CAACX,EAAAA,eAAD,CAAgB,OATFoB,GAAUN,EASa,UAAW,iBAAiBO,EAAO,GACtE,UAAA,EAAAV,EAAA,KAAA,CAACV,EAAAA,UAAD,CACE,mBAAA,GACM,OACN,OAAQ,CACN,KAAM,GACN,MAAO,EACT,EANF,SAAA,EAQE,EAAAU,EAAA,IAAA,CAACT,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAS,EAAA,IAAA,CAACR,EAAAA,MAAD,CACE,QAASmB,EACT,SAAU,GACV,SAAU,GACV,WAAY,EACZ,cAAgB,GAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,EAAG,CAAC,EAClD,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAZ,EAAA,IAAA,CAACP,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAAO,EAAA,IAAA,CAACN,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,GAChE,EAAAM,EAAA,IAAA,CAACL,EAAAA,YAAD,CAAa,SAAS,EAAAK,EAAA,IAAA,CAACJ,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,EAC9CQ,EAAS,IAAK,IACb,EAAAJ,EAAA,IAAA,CAACH,EAAAA,KAAD,CAEE,QAASQ,EACT,KAAK,UACL,KAAM,eAAeA,EAAI,GACzB,YAAa,GACb,OAAQ,eAAeA,EAAI,GAC3B,QAASQ,EAAU,IAAM,IAAA,EAC1B,EAPMR,CAON,CACF,CACQ,C,EACG,CAAA,CACL,CAAA,CACT,C,EAEV,C"}

package/dist/tools/components/chart/SimpleAreaChart.d.cts

@@ -1,16 +1,56 @@
 import { ChartConfig } from '../ui/chart.cjs';
+/**
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimpleAreaChart
+ */
 interface SimpleAreaChartProps {
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
+    /**
+     * Record keys for numeric area series in declared order.
+     */
     areaKeys: string[];
+    /**
+     * Visible card heading.
+     */
     title: string;
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
+    /**
+     * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.
+     */
     config?: ChartConfig;
+    /**
+     * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.
+     */
     height?: number | string;
+    /**
+     * Stacks area series under shared ID a when true; defaults to false.
+     */
     stacked?: boolean;
 }
 /**
- * データをエリアで塗りつぶして表現するエリアチャート（面積グラフ）コンポーネント。
+ * Renders one or more numeric series as natural area curves with optional stacking.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleAreaChartProps. Wrapper defaults: height='250px', stacked=false.
+ * @returns The rendered SimpleAreaChart composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 250px and stacked to false. Stacking uses shared stack ID a. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.
+ * @example
+ * ```tsx
+ * import { SimpleAreaChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<SimpleAreaChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} areaKeys={["sales"]} xAxisKey="month" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
+ * ```
  */
 export declare function SimpleAreaChart({ data, xAxisKey, areaKeys, title, description, config, height, stacked, }: SimpleAreaChartProps): import('react').JSX.Element;
 export {};

package/dist/tools/components/chart/SimpleAreaChart.d.ts

@@ -1,16 +1,56 @@
 import { ChartConfig } from '../ui/chart.js';
+/**
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimpleAreaChart
+ */
 interface SimpleAreaChartProps {
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
+    /**
+     * Record keys for numeric area series in declared order.
+     */
     areaKeys: string[];
+    /**
+     * Visible card heading.
+     */
     title: string;
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
+    /**
+     * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.
+     */
     config?: ChartConfig;
+    /**
+     * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.
+     */
     height?: number | string;
+    /**
+     * Stacks area series under shared ID a when true; defaults to false.
+     */
     stacked?: boolean;
 }
 /**
- * データをエリアで塗りつぶして表現するエリアチャート（面積グラフ）コンポーネント。
+ * Renders one or more numeric series as natural area curves with optional stacking.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleAreaChartProps. Wrapper defaults: height='250px', stacked=false.
+ * @returns The rendered SimpleAreaChart composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 250px and stacked to false. Stacking uses shared stack ID a. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.
+ * @example
+ * ```tsx
+ * import { SimpleAreaChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<SimpleAreaChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} areaKeys={["sales"]} xAxisKey="month" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
+ * ```
  */
 export declare function SimpleAreaChart({ data, xAxisKey, areaKeys, title, description, config, height, stacked, }: SimpleAreaChartProps): import('react').JSX.Element;
 export {};

package/dist/tools/components/chart/SimpleAreaChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleAreaChart.js","names":["SimpleAreaChart","defaultConfig","areaKeys","key","index","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","height","AreaChart","CartesianGrid","XAxis","xAxisKey","value","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Area","stacked"],"sources":["../../../../src/tools/components/chart/SimpleAreaChart.tsx"],"sourcesContent":["import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\ninterface SimpleAreaChartProps {\n  data: Array<Record<string, unknown>>;\n  xAxisKey: string;\n  areaKeys: string[];\n  title: string;\n  description?: string;\n  config?: ChartConfig;\n  height?: number | string;\n  stacked?: boolean;\n}\n\n/**\n * データをエリアで塗りつぶして表現するエリアチャート（面積グラフ）コンポーネント。\n */\nexport function SimpleAreaChart({\n  data,\n  xAxisKey,\n  areaKeys,\n  title,\n  description,\n  config,\n  height = '250px',\n  stacked = false,\n}: SimpleAreaChartProps) {\n  const defaultConfig: ChartConfig = {};\n  areaKeys.forEach((key, index) => {\n    defaultConfig[key] = {\n      label: key,\n      color: `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <AreaChart\n            accessibilityLayer\n            data={data}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            {areaKeys.map((key) => (\n              <Area\n                key={key}\n                dataKey={key}\n                type='natural'\n                fill={`var(--color-${key})`}\n                fillOpacity={0.4}\n                stroke={`var(--color-${key})`}\n                stackId={stacked ? 'a' : undefined}\n              />\n            ))}\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AA0BA,SAAgBA,EAAgB,EAC9B,SACA,aACA,aACA,UACA,gBACA,WACA,YAAS,SACT,aAAU,MACa;CACvB,IAAMC,IAA6B,CAAC;CAUpC,OATAC,EAAS,SAAS,GAAK,MAAU;EAC/B,EAAcC,KAAO;GACnB,OAAOA;GACP,OAAO,mBAAoBC,IAAQ,IAAK,EAAE;EAC5C;CACF,CAAC,GAKC,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD,EAAA,UACE,kBAACC,GAAD;GAAgB,QATFC,KAAUZ;GASa,WAAW,iBAAiBa,EAAO;GACtE,UAAA,kBAACC,GAAD;IACE,oBAAA;IACM;IACN,QAAQ;KACN,MAAM;KACN,OAAO;IACT;IANF,UAAA;KAQE,kBAACC,GAAD;MAAe,UAAU;MAAO,QAAO;KAAuB,CAAA;KAC9D,kBAACC,GAAD;MACE,SAASC;MACT,UAAU;MACV,UAAU;MACV,YAAY;MACZ,gBAAgB,MAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,GAAG,CAAC;MAClD,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACD,kBAACC,GAAD;MAAc,QAAQ;MAAO,SAAS,kBAACC,GAAD,CAAsB,CAAA;KAAI,CAAA;KAChE,kBAACC,GAAD,EAAa,SAAS,kBAACC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAC9CrB,EAAS,KAAK,MACb,kBAACsB,GAAD;MAEE,SAASrB;MACT,MAAK;MACL,MAAM,eAAeA,EAAI;MACzB,aAAa;MACb,QAAQ,eAAeA,EAAI;MAC3B,SAASsB,IAAU,MAAM,KAAA;KAC1B,GAPMtB,CAON,CACF;IACQ;;EACG,CAAA,EACL,CAAA,CACT;;AAEV"}
+{"version":3,"file":"SimpleAreaChart.js","names":["SimpleAreaChart","defaultConfig","areaKeys","key","index","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","height","AreaChart","CartesianGrid","XAxis","xAxisKey","value","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Area","stacked"],"sources":["../../../../src/tools/components/chart/SimpleAreaChart.tsx"],"sourcesContent":["import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimpleAreaChart\n */\ninterface SimpleAreaChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key used for the horizontal axis; category charts format ticks to the first five characters.\n   */\n  xAxisKey: string;\n  /**\n   * Record keys for numeric area series in declared order.\n   */\n  areaKeys: string[];\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n  /**\n   * Stacks area series under shared ID a when true; defaults to false.\n   */\n  stacked?: boolean;\n}\n\n/**\n * Renders one or more numeric series as natural area curves with optional stacking.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleAreaChartProps. Wrapper defaults: height='250px', stacked=false.\n * @returns The rendered SimpleAreaChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 250px and stacked to false. Stacking uses shared stack ID a. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.\n * @example\n * ```tsx\n * import { SimpleAreaChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimpleAreaChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} areaKeys={[\"sales\"]} xAxisKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimpleAreaChart({\n  data,\n  xAxisKey,\n  areaKeys,\n  title,\n  description,\n  config,\n  height = '250px',\n  stacked = false,\n}: SimpleAreaChartProps) {\n  const defaultConfig: ChartConfig = {};\n  areaKeys.forEach((key, index) => {\n    defaultConfig[key] = {\n      label: key,\n      color: `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <AreaChart\n            accessibilityLayer\n            data={data}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            {areaKeys.map((key) => (\n              <Area\n                key={key}\n                dataKey={key}\n                type='natural'\n                fill={`var(--color-${key})`}\n                fillOpacity={0.4}\n                stroke={`var(--color-${key})`}\n                stackId={stacked ? 'a' : undefined}\n              />\n            ))}\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AAkEA,SAAgBA,EAAgB,EAC9B,SACA,aACA,aACA,UACA,gBACA,WACA,YAAS,SACT,aAAU,MACa;CACvB,IAAMC,IAA6B,CAAC;CAUpC,OATAC,EAAS,SAAS,GAAK,MAAU;EAC/B,EAAcC,KAAO;GACnB,OAAOA;GACP,OAAO,mBAAoBC,IAAQ,IAAK,EAAE;EAC5C;CACF,CAAC,GAKC,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD,EAAA,UACE,kBAACC,GAAD;GAAgB,QATFC,KAAUZ;GASa,WAAW,iBAAiBa,EAAO;GACtE,UAAA,kBAACC,GAAD;IACE,oBAAA;IACM;IACN,QAAQ;KACN,MAAM;KACN,OAAO;IACT;IANF,UAAA;KAQE,kBAACC,GAAD;MAAe,UAAU;MAAO,QAAO;KAAuB,CAAA;KAC9D,kBAACC,GAAD;MACE,SAASC;MACT,UAAU;MACV,UAAU;MACV,YAAY;MACZ,gBAAgB,MAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,GAAG,CAAC;MAClD,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACD,kBAACC,GAAD;MAAc,QAAQ;MAAO,SAAS,kBAACC,GAAD,CAAsB,CAAA;KAAI,CAAA;KAChE,kBAACC,GAAD,EAAa,SAAS,kBAACC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAC9CrB,EAAS,KAAK,MACb,kBAACsB,GAAD;MAEE,SAASrB;MACT,MAAK;MACL,MAAM,eAAeA,EAAI;MACzB,aAAa;MACb,QAAQ,eAAeA,EAAI;MAC3B,SAASsB,IAAU,MAAM,KAAA;KAC1B,GAPMtB,CAON,CACF;IACQ;;EACG,CAAA,EACL,CAAA,CACT;;AAEV"}

package/dist/tools/components/chart/SimpleBarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleBarChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","RechartsBarChart","CartesianGrid","XAxis","ChartTooltip","ChartTooltipContent","Bar","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimpleBarChart","title","description","config","barKey","xAxisKey","value","barColor"],"sources":["../../../../src/tools/components/chart/SimpleBarChart.tsx"],"sourcesContent":["import { Bar, BarChart as RechartsBarChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../ui/chart';\n\n/**\n * シンプルな棒グラフのプロップス\n */\ninterface SimpleBarChartProps {\n  /** グラフデータ配列 */\n  data: Array<Record<string, unknown>>;\n  /** X軸に使用するデータキー */\n  xAxisKey: string;\n  /** 棒グラフとして表示するデータキー */\n  barKey: string;\n  /** カードのタイトル */\n  title: string;\n  /** カードの説明（オプション） */\n  description?: string;\n  /** チャート設定 */\n  config?: ChartConfig;\n  /** グラフの高さ */\n  height?: number | string;\n  /** 棒グラフの色 */\n  barColor?: string;\n}\n\n/**\n * シンプルな棒グラフ\n *\n * カテゴリ別の値を比較するための棒グラフコンポーネント。\n *\n * @example\n * ```tsx\n * import { SimpleBarChart } from '@alneas/appkit-react/tools/chart';\n *\n * const data = [\n *   { month: '1月', sales: 100 },\n *   { month: '2月', sales: 150 },\n * ];\n *\n * <SimpleBarChart\n *   data={data}\n *   xAxisKey=\"month\"\n *   barKey=\"sales\"\n *   title=\"月別売上\"\n * />\n * ```\n */\nexport function SimpleBarChart({\n  data,\n  xAxisKey,\n  barKey,\n  title,\n  description,\n  config,\n  height = '200px',\n  barColor = 'var(--color-bar)',\n}: SimpleBarChartProps) {\n  const defaultConfig = {\n    [barKey]: {\n      label: barKey,\n      color: 'hsl(var(--primary))',\n    },\n  } satisfies ChartConfig;\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className='pl-2'>\n        <ChartContainer config={finalConfig} className=\"w-full aspect-auto\" style={{ height }}>\n          <RechartsBarChart accessibilityLayer data={data}>\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip content={<ChartTooltipContent />} />\n            <Bar dataKey={barKey} fill={barColor} radius={4} />\n          </RechartsBarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NAiDA,SAAgBgB,EAAe,CAC7B,OACA,WACA,SACA,QACA,cACA,SACA,SAAS,QACT,WAAW,oBACW,CAUtB,OACE,EAAAF,EAAA,KAAA,CAACd,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAc,EAAA,KAAA,CAACb,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAa,EAAA,IAAA,CAACZ,EAAAA,UAAD,CAAA,SAAYe,CAAiB,CAAA,EAC5BC,IAAe,EAAAJ,EAAA,IAAA,CAACX,EAAAA,gBAAD,CAAA,SAAkBe,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAJ,EAAA,IAAA,CAACV,EAAAA,YAAD,CAAa,UAAU,OACrB,UAAA,EAAAU,EAAA,IAAA,CAACT,EAAAA,eAAD,CAAgB,OATFc,GAAU,EAN3BC,GAAS,CACR,MAAOA,EACP,MAAO,qBACT,CAG4B,EASa,UAAU,qBAAqB,MAAO,CAAE,QAAO,EAClF,UAAA,EAAAN,EAAA,KAAA,CAACR,EAAAA,SAAD,CAAkB,mBAAA,GAAyB,OAA3C,SAAA,EACE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAO,EAAA,IAAA,CAACN,EAAAA,MAAD,CACE,QAASa,EACT,SAAU,GACV,WAAY,GACZ,SAAU,GACV,cAAgB,GAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,EAAG,CAAC,EAClD,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAR,EAAA,IAAA,CAACL,EAAAA,aAAD,CAAc,SAAS,EAAAK,EAAA,IAAA,CAACJ,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,GACjD,EAAAI,EAAA,IAAA,CAACH,EAAAA,IAAD,CAAK,QAASS,EAAQ,KAAMG,EAAU,OAAQ,CAAI,CAAA,CAClC,C,EACJ,CAAA,CACL,CAAA,CACT,C,EAEV,C"}
+{"version":3,"file":"SimpleBarChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","RechartsBarChart","CartesianGrid","XAxis","ChartTooltip","ChartTooltipContent","Bar","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimpleBarChart","title","description","config","barKey","xAxisKey","value","barColor"],"sources":["../../../../src/tools/components/chart/SimpleBarChart.tsx"],"sourcesContent":["import { Bar, BarChart as RechartsBarChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimpleBarChart\n */\ninterface SimpleBarChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key used for the horizontal axis; category charts format ticks to the first five characters.\n   */\n  xAxisKey: string;\n  /**\n   * Record key containing the single numeric bar metric.\n   */\n  barKey: string;\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n  /**\n   * Bar fill CSS color; defaults to var(--color-bar), independently of barKey.\n   */\n  barColor?: string;\n}\n\n/**\n * Renders one numeric series as a rounded bar chart.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleBarChartProps. Wrapper defaults: height='200px', barColor='var(--color-bar)'.\n * @returns The rendered SimpleBarChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 200px and is applied as an inline style (numbers are React CSS pixel values). barColor defaults to var(--color-bar), which does not automatically match a differently named barKey; provide a matching variable or literal color.\n * @example\n * ```tsx\n * import { SimpleBarChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimpleBarChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} barKey=\"sales\" xAxisKey=\"month\" barColor=\"var(--color-sales)\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimpleBarChart({\n  data,\n  xAxisKey,\n  barKey,\n  title,\n  description,\n  config,\n  height = '200px',\n  barColor = 'var(--color-bar)',\n}: SimpleBarChartProps) {\n  const defaultConfig = {\n    [barKey]: {\n      label: barKey,\n      color: 'hsl(var(--primary))',\n    },\n  } satisfies ChartConfig;\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className='pl-2'>\n        <ChartContainer config={finalConfig} className=\"w-full aspect-auto\" style={{ height }}>\n          <RechartsBarChart accessibilityLayer data={data}>\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip content={<ChartTooltipContent />} />\n            <Bar dataKey={barKey} fill={barColor} radius={4} />\n          </RechartsBarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NA2DA,SAAgBgB,EAAe,CAC7B,OACA,WACA,SACA,QACA,cACA,SACA,SAAS,QACT,WAAW,oBACW,CAUtB,OACE,EAAAF,EAAA,KAAA,CAACd,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAc,EAAA,KAAA,CAACb,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAa,EAAA,IAAA,CAACZ,EAAAA,UAAD,CAAA,SAAYe,CAAiB,CAAA,EAC5BC,IAAe,EAAAJ,EAAA,IAAA,CAACX,EAAAA,gBAAD,CAAA,SAAkBe,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAJ,EAAA,IAAA,CAACV,EAAAA,YAAD,CAAa,UAAU,OACrB,UAAA,EAAAU,EAAA,IAAA,CAACT,EAAAA,eAAD,CAAgB,OATFc,GAAU,EAN3BC,GAAS,CACR,MAAOA,EACP,MAAO,qBACT,CAG4B,EASa,UAAU,qBAAqB,MAAO,CAAE,QAAO,EAClF,UAAA,EAAAN,EAAA,KAAA,CAACR,EAAAA,SAAD,CAAkB,mBAAA,GAAyB,OAA3C,SAAA,EACE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAO,EAAA,IAAA,CAACN,EAAAA,MAAD,CACE,QAASa,EACT,SAAU,GACV,WAAY,GACZ,SAAU,GACV,cAAgB,GAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,EAAG,CAAC,EAClD,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAR,EAAA,IAAA,CAACL,EAAAA,aAAD,CAAc,SAAS,EAAAK,EAAA,IAAA,CAACJ,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,GACjD,EAAAI,EAAA,IAAA,CAACH,EAAAA,IAAD,CAAK,QAASS,EAAQ,KAAMG,EAAU,OAAQ,CAAI,CAAA,CAClC,C,EACJ,CAAA,CACL,CAAA,CACT,C,EAEV,C"}