@humain/ui 2.4.1 → 2.4.3

package/dist/wc/hf-metric-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"hf-metric-item.js","names":["__iconNode"],"sources":["../../../../node_modules/.bun/lucide-react@1.37.0+0f58469d5b3bd39f/node_modules/lucide-react/dist/esm/icons/arrow-up-right.mjs","../../../../node_modules/.bun/lucide-react@1.37.0+0f58469d5b3bd39f/node_modules/lucide-react/dist/esm/icons/eye.mjs","../../src/components/organisms/content/MetricItem/MetricItem.tsx","../../src/wc/hf-metric-item.ts"],"sourcesContent":["/**\n * @license lucide-react v1.37.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst __iconNode = [\n  [\"path\", { d: \"M7 7h10v10\", key: \"1tivn9\" }],\n  [\"path\", { d: \"M7 17 17 7\", key: \"1vkiza\" }]\n];\nconst ArrowUpRight = createLucideIcon(\"arrow-up-right\", __iconNode);\n\nexport { __iconNode, ArrowUpRight as default };\n//# sourceMappingURL=arrow-up-right.mjs.map\n","/**\n * @license lucide-react v1.37.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst __iconNode = [\n  [\n    \"path\",\n    {\n      d: \"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\",\n      key: \"1nclc0\"\n    }\n  ],\n  [\"circle\", { cx: \"12\", cy: \"12\", r: \"3\", key: \"1v7zrd\" }]\n];\nconst Eye = createLucideIcon(\"eye\", __iconNode);\n\nexport { __iconNode, Eye as default };\n//# sourceMappingURL=eye.mjs.map\n","import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ArrowUp,\n  ArrowUpRight,\n  Eye,\n  MoreVertical,\n  TrendingUp,\n} from 'lucide-react';\nimport * as React from 'react';\nimport { Area, AreaChart, Line, LineChart } from 'recharts';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\nimport { useReducedMotion } from '@/hooks/use-reduced-motion';\nimport { cn } from '@/lib/utils';\n\nconst MINI_CHART_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };\n\nfunction getFiniteMetricNumber(value: number, fallback = 0): number {\n  return Number.isFinite(value) ? value : fallback;\n}\n\nfunction getFinitePositiveMetricNumber(\n  value: number | undefined,\n  fallback: number,\n): number {\n  return typeof value === 'number' && Number.isFinite(value) && value > 0\n    ? value\n    : fallback;\n}\n\nfunction getFinitePositiveMetricNumberOrUndefined(\n  value: number | undefined,\n): number | undefined {\n  return typeof value === 'number' && Number.isFinite(value) && value > 0\n    ? value\n    : undefined;\n}\n\nfunction formatMetricValue(value: string | number): string | number {\n  return typeof value === 'number'\n    ? getFiniteMetricNumber(value).toLocaleString()\n    : value;\n}\n\n// ============================================\n// MetricMiniChart - Sparkline chart component\n// ============================================\n\nconst metricMiniChartVariants = cva('relative shrink-0', {\n  variants: {\n    variant: {\n      line: '',\n      area: '',\n      layers: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'line',\n  },\n});\n\nexport interface MetricMiniChartProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof metricMiniChartVariants> {\n  /** Data points for the sparkline */\n  data: number[];\n  /** Color of the chart line/area */\n  color?: string;\n  /** Width of the chart */\n  width?: number;\n  /** Height of the chart */\n  height?: number;\n  /** Show marker dot at the end */\n  showMarker?: boolean;\n  /** Trend direction for styling */\n  trend?: 'positive' | 'negative';\n}\n\nfunction MetricMiniChart({\n  data,\n  color,\n  width,\n  height = 56,\n  variant = 'line',\n  showMarker = true,\n  trend = 'positive',\n  className,\n  ...props\n}: MetricMiniChartProps) {\n  const gradientId = React.useId();\n  const prefersReducedMotion = useReducedMotion();\n  const shouldAnimate = !prefersReducedMotion;\n  const trendColor =\n    trend === 'positive' ? 'var(--success)' : 'var(--destructive)';\n  const chartColor = color || trendColor;\n  const chartWidth = getFinitePositiveMetricNumberOrUndefined(width);\n  const chartHeight = getFinitePositiveMetricNumber(height, 56);\n  const safeData = React.useMemo(\n    () => data.map((value) => getFiniteMetricNumber(value)),\n    [data],\n  );\n\n  // Transform data for recharts\n  const chartData = React.useMemo(\n    () => safeData.map((value, index) => ({ index, value })),\n    [safeData],\n  );\n\n  const chartConfig: ChartConfig = React.useMemo(\n    () => ({\n      value: {\n        color: chartColor,\n      },\n    }),\n    [chartColor],\n  );\n\n  // Find the max value index for marker positioning\n  const lastIndex = safeData.length - 1;\n  const lastValue = safeData[lastIndex] ?? 0;\n  const markerTop = React.useMemo(() => {\n    const maxValue = safeData.length > 0 ? Math.max(...safeData) : 0;\n    return maxValue <= 0\n      ? 50\n      : Math.max(10, Math.min(90, 100 - (lastValue / maxValue) * 100));\n  }, [safeData, lastValue]);\n  const rootStyle = React.useMemo(\n    () => ({ width: chartWidth, height: chartHeight }),\n    [chartHeight, chartWidth],\n  );\n\n  // Width can be undefined to allow CSS classes (like w-full) to control responsive width\n  return (\n    <div\n      data-slot=\"metric-mini-chart\"\n      aria-hidden=\"true\"\n      inert={true}\n      className={cn(metricMiniChartVariants({ variant }), className)}\n      style={rootStyle}\n      {...props}\n    >\n      <ChartContainer config={chartConfig} className=\"size-full\">\n        {variant === 'layers' ? (\n          <AreaChart data={chartData} margin={MINI_CHART_MARGIN}>\n            <defs>\n              <linearGradient\n                id={`fillArea${gradientId}`}\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" stopColor={chartColor} stopOpacity={0.3} />\n                <stop offset=\"100%\" stopColor={chartColor} stopOpacity={0.05} />\n              </linearGradient>\n            </defs>\n            <Area\n              type=\"monotone\"\n              dataKey=\"value\"\n              stroke={chartColor}\n              strokeWidth={2}\n              fill={`url(#fillArea${gradientId})`}\n              isAnimationActive={shouldAnimate}\n            />\n          </AreaChart>\n        ) : (\n          <LineChart data={chartData} margin={MINI_CHART_MARGIN}>\n            {variant === 'area' && (\n              <>\n                <defs>\n                  <linearGradient\n                    id={`fillLine${gradientId}`}\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop\n                      offset=\"0%\"\n                      stopColor={chartColor}\n                      stopOpacity={0.15}\n                    />\n                    <stop\n                      offset=\"100%\"\n                      stopColor={chartColor}\n                      stopOpacity={0.02}\n                    />\n                  </linearGradient>\n                </defs>\n                <Area\n                  type=\"monotone\"\n                  dataKey=\"value\"\n                  stroke=\"none\"\n                  fill={`url(#fillLine${gradientId})`}\n                  isAnimationActive={shouldAnimate}\n                />\n              </>\n            )}\n            <Line\n              type=\"monotone\"\n              dataKey=\"value\"\n              stroke={chartColor}\n              strokeWidth={2}\n              dot={false}\n              isAnimationActive={shouldAnimate}\n            />\n          </LineChart>\n        )}\n      </ChartContainer>\n\n      {/* Marker dot */}\n      {showMarker && variant === 'line' && (\n        <div\n          className=\"absolute\"\n          style={{\n            right: 0,\n            top: `${markerTop}%`,\n            transform: 'translate(50%, -50%)',\n          }}\n        >\n          <div\n            className=\"size-[19px] rounded-full opacity-20\"\n            style={{ backgroundColor: chartColor }}\n          />\n          <div\n            className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[10px] rounded-full bg-background border-2\"\n            style={{ borderColor: chartColor }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nMetricMiniChart.displayName = 'MetricMiniChart';\n\n// ============================================\n// MetricChange - Change indicator component\n// ============================================\n\nconst metricChangeVariants = cva('inline-flex items-center gap-0.5', {\n  variants: {\n    variant: {\n      default: '',\n      badge:\n        'bg-background border border-border rounded-md shadow-xs px-1.5 py-0.5',\n    },\n    trend: {\n      positive: '',\n      negative: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    trend: 'positive',\n  },\n});\n\nexport interface MetricChangeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof metricChangeVariants> {\n  /** Change value (e.g., \"100%\", \"+25%\") */\n  value: string;\n  /** Icon type ('none' to hide icon) */\n  icon?: 'arrow' | 'trend' | 'arrow-right' | 'none';\n}\n\nfunction MetricChange({\n  value,\n  variant = 'default',\n  trend = 'positive',\n  icon = 'arrow',\n  className,\n  ...props\n}: MetricChangeProps) {\n  const iconColor =\n    trend === 'positive' ? 'var(--success)' : 'var(--destructive)';\n  const textColor =\n    variant === 'badge'\n      ? 'text-secondary-foreground'\n      : trend === 'positive'\n        ? 'text-success'\n        : 'text-destructive';\n\n  const IconComponent =\n    icon === 'none'\n      ? null\n      : icon === 'trend'\n        ? TrendingUp\n        : icon === 'arrow-right'\n          ? ArrowUpRight\n          : ArrowUp;\n\n  const iconSize = variant === 'badge' ? 12 : 16;\n\n  return (\n    <div\n      className={cn(metricChangeVariants({ variant, trend }), className)}\n      {...props}\n    >\n      {IconComponent && (\n        <IconComponent\n          aria-hidden=\"true\"\n          width={iconSize}\n          height={iconSize}\n          color={iconColor}\n          className={cn(trend === 'negative' && 'rotate-180')}\n        />\n      )}\n      <span className=\"sr-only\">\n        {trend === 'positive' ? 'Increased' : 'Decreased'}\n      </span>\n      <span className={cn('text-sm font-medium', textColor)}>{value}</span>\n    </div>\n  );\n}\n\nMetricChange.displayName = 'MetricChange';\n\n// ============================================\n// MetricItem - Main component\n// ============================================\n\nconst metricItemVariants = cva(\n  'relative flex flex-col gap-2 p-5 bg-background rounded-xl border border-border shadow-xs transition-shadow duration-200 ease-out hover:shadow-sm motion-reduce:transition-none',\n  {\n    variants: {\n      type: {\n        simple: '',\n        'icon-01': '',\n        'icon-02': '',\n        'icon-03': '',\n        'icon-04': 'flex-row items-center',\n        'chart-01': '',\n        'chart-02': '',\n        'chart-03': '',\n        'chart-04': 'p-0 bg-transparent border-0 shadow-none',\n      },\n      breakpoint: {\n        desktop: '',\n        mobile: '',\n      },\n    },\n    defaultVariants: {\n      type: 'simple',\n      breakpoint: 'desktop',\n    },\n  },\n);\n\nexport interface MetricItemProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof metricItemVariants> {\n  /** Title/label of the metric */\n  title: string;\n  /** Main value to display */\n  value: string | number;\n  /** Change indicator value */\n  changeValue?: string;\n  /** Change trend direction */\n  changeTrend?: 'positive' | 'negative';\n  /** Change icon type ('none' to hide icon) */\n  changeIcon?: 'arrow' | 'trend' | 'arrow-right' | 'none';\n  /** Comparison text (e.g., \"vs last month\") */\n  comparisonText?: string;\n  /** Subtitle/description text shown next to value (alternative to change indicator) */\n  subtitle?: string;\n  /** Show dropdown menu button */\n  showDropdown?: boolean;\n  /** Show action buttons */\n  showActions?: boolean;\n  /** Action button click handler */\n  onViewReport?: () => void;\n  /** Dropdown click handler */\n  onDropdownClick?: () => void;\n  /** Icon for icon variants */\n  icon?: React.ReactNode;\n  /** Icon background color */\n  iconBgColor?: string;\n  /** Icon color */\n  iconColor?: string;\n  /** Chart data for chart variants */\n  chartData?: number[];\n  /** Featured icon variant style */\n  featuredIconVariant?: 'circle' | 'square' | 'modern';\n  /** Custom content to render instead of chart (for chart-04 type) */\n  children?: React.ReactNode;\n}\n\nconst MetricItem = React.memo(function MetricItem({\n  title,\n  value,\n  changeValue,\n  changeTrend = 'positive',\n  changeIcon,\n  comparisonText,\n  subtitle,\n  showDropdown = false,\n  showActions = false,\n  onViewReport,\n  onDropdownClick,\n  icon,\n  iconBgColor,\n  iconColor,\n  chartData,\n  featuredIconVariant = 'circle',\n  type = 'simple',\n  breakpoint = 'desktop',\n  className,\n  children,\n  ...props\n}: MetricItemProps) {\n  // Default icon for icon variants\n  const defaultIcon = <TrendingUp width={24} height={24} />;\n  const displayIcon = icon || defaultIcon;\n  const displayValue = formatMetricValue(value);\n\n  // Default icon colors based on type and variant\n  const defaultIconBgColor =\n    type === 'icon-01'\n      ? featuredIconVariant === 'modern'\n        ? 'var(--muted)' // for modern\n        : 'var(--success-muted)' // for circle/square\n      : type === 'icon-02' || type === 'icon-03' || type === 'icon-04'\n        ? 'var(--muted)'\n        : 'var(--success-muted)';\n\n  const defaultIconColor =\n    type === 'icon-01'\n      ? featuredIconVariant === 'modern'\n        ? 'var(--secondary-foreground)' // for modern\n        : 'var(--success)' // for circle/square\n      : type === 'icon-02'\n        ? 'var(--secondary-foreground)'\n        : 'var(--success)';\n\n  const finalIconBgColor = iconBgColor || defaultIconBgColor;\n  const finalIconColor = iconColor || defaultIconColor;\n\n  // Chart-04 has a different structure\n  if (type === 'chart-04') {\n    return (\n      <div\n        data-slot=\"metric-item\"\n        className={cn(metricItemVariants({ type, breakpoint }), className)}\n        {...props}\n      >\n        <div className=\"flex flex-col gap-0.5 w-full\">\n          {/* Header */}\n          <div className=\"flex items-center px-5 pt-3 pb-2 w-full\">\n            <p className=\"flex-1 text-sm font-semibold text-foreground\">\n              {title}\n            </p>\n          </div>\n\n          {/* Content card */}\n          <div className=\"relative bg-background border border-border rounded-xl shadow-xs p-5 flex flex-col gap-5\">\n            {/* Number and change */}\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <p className=\"text-display-sm font-semibold text-foreground\">\n                {displayValue}\n              </p>\n              {changeValue && (\n                <div className=\"flex items-center gap-2\">\n                  <MetricChange\n                    value={changeValue}\n                    trend={changeTrend}\n                    // chart-04 defaults to 'trend' icon for backward compatibility\n                    icon={changeIcon ?? 'trend'}\n                  />\n                  {comparisonText && (\n                    <span className=\"text-sm font-medium text-muted-foreground\">\n                      {comparisonText}\n                    </span>\n                  )}\n                </div>\n              )}\n            </div>\n\n            {/* Chart or custom content */}\n            {children ? (\n              children\n            ) : chartData ? (\n              <MetricMiniChart\n                data={chartData}\n                width={undefined}\n                height={56}\n                variant=\"line\"\n                showMarker={false}\n                trend={changeTrend}\n                className=\"w-full\"\n              />\n            ) : null}\n\n            {/* Dropdown */}\n            {showDropdown && (\n              <button\n                type=\"button\"\n                aria-label=\"More options\"\n                className=\"absolute top-2 end-2 p-3 cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors duration-150 ease-out hover:text-foreground\"\n                onClick={onDropdownClick}\n              >\n                <MoreVertical\n                  width={20}\n                  height={20}\n                  className=\"text-muted-foreground\"\n                />\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"metric-item\"\n      className={cn(metricItemVariants({ type, breakpoint }), className)}\n      {...props}\n    >\n      {/* Featured Icon (for icon-01 only - standalone icon above content) */}\n      {type === 'icon-01' && (\n        <div\n          className={cn(\n            'flex items-center justify-center shrink-0 relative overflow-clip',\n            featuredIconVariant === 'modern'\n              ? 'rounded-[10px] border border-border shadow-xs'\n              : featuredIconVariant === 'square'\n                ? 'rounded-[10px] border border-border shadow-xs'\n                : 'rounded-full',\n          )}\n          style={{\n            width: 48,\n            height: 48,\n            backgroundColor: finalIconBgColor,\n            color: finalIconColor,\n          }}\n        >\n          {displayIcon}\n          {/* Skeuomorphic inner shadow overlay for modern variant */}\n          {featuredIconVariant === 'modern' && (\n            <div\n              className=\"absolute inset-0 pointer-events-none rounded-[10px]\"\n              style={{\n                boxShadow: 'var(--shadow-inset-ring)',\n              }}\n            />\n          )}\n        </div>\n      )}\n\n      {/* Icon-02 and Icon-03: Heading row with icon + title */}\n      {(type === 'icon-02' || type === 'icon-03') && (\n        <div className=\"flex items-center gap-3 w-full\">\n          <div\n            className={cn(\n              'flex items-center justify-center shrink-0',\n              type === 'icon-02'\n                ? 'rounded-full'\n                : 'rounded-lg border border-border shadow-xs',\n            )}\n            style={{\n              width: 48,\n              height: 48,\n              backgroundColor: finalIconBgColor,\n              color: finalIconColor,\n            }}\n          >\n            {icon || <Eye width={24} height={24} />}\n          </div>\n          <p className=\"flex-1 text-base font-semibold text-foreground\">\n            {title}\n          </p>\n        </div>\n      )}\n\n      {/* Icon-04: Horizontal layout with featured icon + content */}\n      {type === 'icon-04' && (\n        <div\n          className={cn(\n            'flex items-center justify-center shrink-0 rounded-md border border-border shadow-xs',\n          )}\n          style={{\n            width: 40,\n            height: 40,\n            backgroundColor: finalIconBgColor,\n            color: finalIconColor,\n          }}\n        >\n          {icon || <TrendingUp width={20} height={20} />}\n        </div>\n      )}\n\n      {/* Heading and number section */}\n      {type !== 'icon-02' && type !== 'icon-03' && (\n        <div\n          className={cn(\n            'flex flex-col gap-2',\n            type === 'icon-04' ? 'flex-1 min-w-0' : 'w-full',\n          )}\n        >\n          {/* Title */}\n          {type === 'chart-01' || type === 'chart-02' ? (\n            <p className=\"text-base font-semibold text-foreground\">{title}</p>\n          ) : type === 'icon-04' || type === 'icon-01' ? (\n            <p className=\"text-sm font-semibold text-muted-foreground\">\n              {title}\n            </p>\n          ) : (\n            <p className=\"text-sm font-medium text-muted-foreground\">{title}</p>\n          )}\n\n          {/* Number and badge row */}\n          {type === 'simple' || type === 'icon-01' || type === 'icon-04' ? (\n            <div className=\"flex flex-wrap items-center justify-between gap-3 w-full\">\n              <p className=\"text-display-sm font-semibold text-foreground\">\n                {displayValue}\n              </p>\n              {/* Show inline change + comparison OR badge OR subtitle */}\n              {changeValue && comparisonText ? (\n                <div className=\"flex items-center gap-2\">\n                  <MetricChange\n                    value={changeValue}\n                    trend={changeTrend}\n                    icon=\"arrow\"\n                  />\n                  <span className=\"text-sm font-medium text-muted-foreground\">\n                    {comparisonText}\n                  </span>\n                </div>\n              ) : changeValue ? (\n                <MetricChange\n                  value={changeValue}\n                  trend={changeTrend}\n                  // badge variant defaults to 'arrow-right' icon for backward compatibility\n                  icon={changeIcon ?? 'arrow-right'}\n                  variant=\"badge\"\n                />\n              ) : subtitle ? (\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  {subtitle}\n                </span>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      )}\n\n      {/* Chart variants content */}\n      {type === 'chart-01' && (\n        <div className=\"flex items-end gap-4 w-full\">\n          <div className=\"flex-1 flex flex-col gap-3\">\n            <p className=\"text-display-sm font-semibold text-foreground\">\n              {displayValue}\n            </p>\n            {(changeValue || comparisonText) && (\n              <div className=\"flex items-center gap-2\">\n                {changeValue && (\n                  <MetricChange\n                    value={changeValue}\n                    trend={changeTrend}\n                    icon=\"arrow\"\n                  />\n                )}\n                {comparisonText && (\n                  <span className=\"text-sm font-medium text-muted-foreground truncate\">\n                    {comparisonText}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n          {chartData && (\n            <MetricMiniChart\n              data={chartData}\n              width={112}\n              height={56}\n              variant=\"line\"\n              trend={changeTrend}\n            />\n          )}\n        </div>\n      )}\n\n      {type === 'chart-02' && (\n        <div className=\"flex items-end gap-4 w-full\">\n          <div className=\"flex-1 flex items-start gap-2\">\n            <p className=\"text-display-md font-semibold text-foreground\">\n              {displayValue}\n            </p>\n            {changeValue && (\n              <MetricChange\n                value={changeValue}\n                trend={changeTrend}\n                icon=\"trend\"\n              />\n            )}\n          </div>\n          {chartData && (\n            <MetricMiniChart\n              data={chartData}\n              width={128}\n              height={56}\n              variant=\"layers\"\n              showMarker={false}\n              trend={changeTrend}\n            />\n          )}\n        </div>\n      )}\n\n      {type === 'chart-03' && (\n        <>\n          <div className=\"flex flex-col gap-2 w-full\">\n            <p className=\"text-sm font-medium text-muted-foreground\">{title}</p>\n            <div className=\"flex flex-wrap items-center justify-between gap-3 w-full\">\n              <p className=\"text-display-sm font-semibold text-foreground\">\n                {displayValue}\n              </p>\n              {(changeValue || comparisonText) && (\n                <div className=\"flex items-center gap-2\">\n                  {changeValue && (\n                    <MetricChange\n                      value={changeValue}\n                      trend={changeTrend}\n                      icon=\"trend\"\n                    />\n                  )}\n                  {comparisonText && (\n                    <span className=\"text-sm font-medium text-muted-foreground\">\n                      {comparisonText}\n                    </span>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n          {chartData && (\n            <MetricMiniChart\n              data={chartData}\n              height={72}\n              variant=\"area\"\n              showMarker={false}\n              trend={changeTrend}\n              className=\"w-full\"\n            />\n          )}\n        </>\n      )}\n\n      {/* Icon-02 and Icon-03 number section */}\n      {(type === 'icon-02' || type === 'icon-03') && (\n        <div className=\"flex items-end gap-4 w-full\">\n          <div className=\"flex-1 flex flex-col gap-3\">\n            <p className=\"text-display-md font-semibold text-foreground\">\n              {displayValue}\n            </p>\n            {(changeValue || comparisonText) && (\n              <div className=\"flex items-center gap-2\">\n                {changeValue && (\n                  <MetricChange\n                    value={changeValue}\n                    trend={changeTrend}\n                    icon={type === 'icon-03' ? 'trend' : 'arrow'}\n                  />\n                )}\n                {comparisonText && (\n                  <span className=\"text-sm font-medium text-muted-foreground truncate\">\n                    {comparisonText}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n          {chartData && (\n            <MetricMiniChart\n              data={chartData}\n              width={112}\n              height={56}\n              variant=\"line\"\n              trend={changeTrend}\n            />\n          )}\n        </div>\n      )}\n\n      {/* Dropdown button */}\n      {showDropdown && (\n        <button\n          type=\"button\"\n          aria-label=\"More options\"\n          className=\"absolute top-2 end-2 cursor-pointer rounded-sm p-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors duration-150 ease-out hover:text-foreground\"\n          onClick={onDropdownClick}\n        >\n          <MoreVertical\n            width={20}\n            height={20}\n            className=\"text-muted-foreground\"\n          />\n        </button>\n      )}\n\n      {/* Action buttons */}\n      {showActions && (\n        <div className=\"flex items-center gap-2 pt-2\">\n          <Button\n            appearance=\"outline\"\n            variant=\"secondary\"\n            size=\"sm\"\n            onClick={onViewReport}\n          >\n            View report\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n});\n\nMetricItem.displayName = 'MetricItem';\n\nexport {\n  MetricChange,\n  MetricItem,\n  MetricMiniChart,\n  metricChangeVariants,\n  metricItemVariants,\n  metricMiniChartVariants,\n};\n","/**\n * Web Component wrapper for MetricItem\n * Custom element: <hf-metric-item>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { MetricItem } from '../components/organisms/content/MetricItem';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Event wrapper that dispatches custom DOM events\n */\nfunction createEventDispatcher(element: HTMLElement) {\n  return {\n    onViewReport: (value: unknown) => {\n      const CustomEventConstructor =\n        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;\n      element.dispatchEvent(new CustomEventConstructor('view-report', {\n        detail: value,\n        bubbles: true,\n        composed: true\n      }));\n    },\n    onDropdownClick: (value: unknown) => {\n      const CustomEventConstructor =\n        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;\n      element.dispatchEvent(new CustomEventConstructor('dropdown-click', {\n        detail: value,\n        bubbles: true,\n        composed: true\n      }));\n    }\n  };\n}\n\n/**\n * Wrapper component that connects React events to DOM custom events\n */\nfunction MetricItemWrapper(props: React.ComponentProps<typeof MetricItem> & { _hostElement?: HTMLElement }) {\n  const { _hostElement, ...restProps } = props;\n\n  const eventHandlers = React.useMemo(() => {\n    if (!_hostElement) return {};\n    return createEventDispatcher(_hostElement);\n  }, [_hostElement]);\n\n  return React.createElement(MetricItem, { ...restProps, ...eventHandlers });\n}\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    type: 'string',\n    breakpoint: 'string',\n    title: 'string',\n    value: 'string',\n    changeValue: 'string',\n    changeTrend: 'string',\n    changeIcon: 'string',\n    comparisonText: 'string',\n    subtitle: 'string',\n    showDropdown: 'boolean',\n    showActions: 'boolean',\n    icon: 'json',\n    iconBgColor: 'string',\n    iconColor: 'string',\n    chartData: 'json',\n    featuredIconVariant: 'string'\n};\n\nclass MetricItemWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root || !this._childrenContainer) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      MetricItemWrapper,\n      { ...props, _hostElement: this },\n      React.createElement('span', {\n        ref: (el: HTMLSpanElement | null) => {\n          if (el && this._childrenContainer) {\n            el.replaceWith(this._childrenContainer);\n          }\n        },\n        style: { display: 'contents' },\n      }),\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(MetricItemWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-metric-item')) {\n  customElements.define('hf-metric-item', MetricItemWC);\n}\n\nexport { MetricItemWC };\nexport default MetricItemWC;\n"],"x_google_ignoreList":[0,1],"mappings":"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"}
+{"version":3,"file":"hf-metric-item.js","names":["__iconNode"],"sources":["../../../../node_modules/.bun/lucide-react@1.37.0+0f58469d5b3bd39f/node_modules/lucide-react/dist/esm/icons/arrow-up-right.mjs","../../../../node_modules/.bun/lucide-react@1.37.0+0f58469d5b3bd39f/node_modules/lucide-react/dist/esm/icons/eye.mjs","../../src/components/organisms/content/MetricItem/MetricItem.tsx","../../src/wc/hf-metric-item.ts"],"sourcesContent":["/**\n * @license lucide-react v1.37.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst __iconNode = [\n  [\"path\", { d: \"M7 7h10v10\", key: \"1tivn9\" }],\n  [\"path\", { d: \"M7 17 17 7\", key: \"1vkiza\" }]\n];\nconst ArrowUpRight = createLucideIcon(\"arrow-up-right\", __iconNode);\n\nexport { __iconNode, ArrowUpRight as default };\n//# sourceMappingURL=arrow-up-right.mjs.map\n","/**\n * @license lucide-react v1.37.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst __iconNode = [\n  [\n    \"path\",\n    {\n      d: \"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\",\n      key: \"1nclc0\"\n    }\n  ],\n  [\"circle\", { cx: \"12\", cy: \"12\", r: \"3\", key: \"1v7zrd\" }]\n];\nconst Eye = createLucideIcon(\"eye\", __iconNode);\n\nexport { __iconNode, Eye as default };\n//# sourceMappingURL=eye.mjs.map\n","import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ArrowUp,\n  ArrowUpRight,\n  Eye,\n  MoreVertical,\n  TrendingUp,\n} from 'lucide-react';\nimport * as React from 'react';\nimport { Area, AreaChart, Line, LineChart } from 'recharts';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\nimport { useReducedMotion } from '@/hooks/use-reduced-motion';\nimport { cn } from '@/lib/utils';\n\nconst MINI_CHART_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };\n\nfunction getFiniteMetricNumber(value: number, fallback = 0): number {\n  return Number.isFinite(value) ? value : fallback;\n}\n\nfunction getFinitePositiveMetricNumber(\n  value: number | undefined,\n  fallback: number,\n): number {\n  return typeof value === 'number' && Number.isFinite(value) && value > 0\n    ? value\n    : fallback;\n}\n\nfunction getFinitePositiveMetricNumberOrUndefined(\n  value: number | undefined,\n): number | undefined {\n  return typeof value === 'number' && Number.isFinite(value) && value > 0\n    ? value\n    : undefined;\n}\n\nfunction formatMetricValue(value: string | number): string | number {\n  return typeof value === 'number'\n    ? getFiniteMetricNumber(value).toLocaleString()\n    : value;\n}\n\n// ============================================\n// MetricMiniChart - Sparkline chart component\n// ============================================\n\nconst metricMiniChartVariants = cva('relative shrink-0', {\n  variants: {\n    variant: {\n      line: '',\n      area: '',\n      layers: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'line',\n  },\n});\n\nexport interface MetricMiniChartProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof metricMiniChartVariants> {\n  /** Data points for the sparkline */\n  data: number[];\n  /** Color of the chart line/area */\n  color?: string;\n  /** Width of the chart */\n  width?: number;\n  /** Height of the chart */\n  height?: number;\n  /** Show marker dot at the end */\n  showMarker?: boolean;\n  /** Trend direction for styling */\n  trend?: 'positive' | 'negative';\n}\n\nfunction MetricMiniChart({\n  data,\n  color,\n  width,\n  height = 56,\n  variant = 'line',\n  showMarker = true,\n  trend = 'positive',\n  className,\n  ...props\n}: MetricMiniChartProps) {\n  const gradientId = React.useId();\n  const prefersReducedMotion = useReducedMotion();\n  const shouldAnimate = !prefersReducedMotion;\n  const trendColor =\n    trend === 'positive' ? 'var(--success)' : 'var(--destructive)';\n  const chartColor = color || trendColor;\n  const chartWidth = getFinitePositiveMetricNumberOrUndefined(width);\n  const chartHeight = getFinitePositiveMetricNumber(height, 56);\n  const safeData = React.useMemo(\n    () => data.map((value) => getFiniteMetricNumber(value)),\n    [data],\n  );\n\n  // Transform data for recharts\n  const chartData = React.useMemo(\n    () => safeData.map((value, index) => ({ index, value })),\n    [safeData],\n  );\n\n  const chartConfig: ChartConfig = React.useMemo(\n    () => ({\n      value: {\n        color: chartColor,\n      },\n    }),\n    [chartColor],\n  );\n\n  // Find the max value index for marker positioning\n  const lastIndex = safeData.length - 1;\n  const lastValue = safeData[lastIndex] ?? 0;\n  const markerTop = React.useMemo(() => {\n    const maxValue = safeData.length > 0 ? Math.max(...safeData) : 0;\n    return maxValue <= 0\n      ? 50\n      : Math.max(10, Math.min(90, 100 - (lastValue / maxValue) * 100));\n  }, [safeData, lastValue]);\n  const rootStyle = React.useMemo(\n    () => ({ width: chartWidth, height: chartHeight }),\n    [chartHeight, chartWidth],\n  );\n\n  // Width can be undefined to allow CSS classes (like w-full) to control responsive width\n  return (\n    <div\n      data-slot=\"metric-mini-chart\"\n      aria-hidden=\"true\"\n      inert={true}\n      className={cn(metricMiniChartVariants({ variant }), className)}\n      style={rootStyle}\n      {...props}\n    >\n      <ChartContainer config={chartConfig} className=\"size-full\">\n        {variant === 'layers' ? (\n          <AreaChart data={chartData} margin={MINI_CHART_MARGIN}>\n            <defs>\n              <linearGradient\n                id={`fillArea${gradientId}`}\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" stopColor={chartColor} stopOpacity={0.3} />\n                <stop offset=\"100%\" stopColor={chartColor} stopOpacity={0.05} />\n              </linearGradient>\n            </defs>\n            <Area\n              type=\"monotone\"\n              dataKey=\"value\"\n              stroke={chartColor}\n              strokeWidth={2}\n              fill={`url(#fillArea${gradientId})`}\n              isAnimationActive={shouldAnimate}\n            />\n          </AreaChart>\n        ) : (\n          <LineChart data={chartData} margin={MINI_CHART_MARGIN}>\n            {variant === 'area' && (\n              <>\n                <defs>\n                  <linearGradient\n                    id={`fillLine${gradientId}`}\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop\n                      offset=\"0%\"\n                      stopColor={chartColor}\n                      stopOpacity={0.15}\n                    />\n                    <stop\n                      offset=\"100%\"\n                      stopColor={chartColor}\n                      stopOpacity={0.02}\n                    />\n                  </linearGradient>\n                </defs>\n                <Area\n                  type=\"monotone\"\n                  dataKey=\"value\"\n                  stroke=\"none\"\n                  fill={`url(#fillLine${gradientId})`}\n                  isAnimationActive={shouldAnimate}\n                />\n              </>\n            )}\n            <Line\n              type=\"monotone\"\n              dataKey=\"value\"\n              stroke={chartColor}\n              strokeWidth={2}\n              dot={false}\n              isAnimationActive={shouldAnimate}\n            />\n          </LineChart>\n        )}\n      </ChartContainer>\n\n      {/* Marker dot */}\n      {showMarker && variant === 'line' && (\n        <div\n          className=\"absolute\"\n          style={{\n            right: 0,\n            top: `${markerTop}%`,\n            transform: 'translate(50%, -50%)',\n          }}\n        >\n          <div\n            className=\"size-[19px] rounded-full opacity-20\"\n            style={{ backgroundColor: chartColor }}\n          />\n          <div\n            className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[10px] rounded-full bg-background border-2\"\n            style={{ borderColor: chartColor }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nMetricMiniChart.displayName = 'MetricMiniChart';\n\n// ============================================\n// MetricChange - Change indicator component\n// ============================================\n\nconst metricChangeVariants = cva('inline-flex items-center gap-0.5', {\n  variants: {\n    variant: {\n      default: '',\n      badge:\n        'bg-background border border-border rounded-md shadow-xs px-1.5 py-0.5',\n    },\n    trend: {\n      positive: '',\n      negative: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    trend: 'positive',\n  },\n});\n\nexport interface MetricChangeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof metricChangeVariants> {\n  /** Change value (e.g., \"100%\", \"+25%\") */\n  value: string;\n  /** Icon type ('none' to hide icon) */\n  icon?: 'arrow' | 'trend' | 'arrow-right' | 'none';\n}\n\nfunction MetricChange({\n  value,\n  variant = 'default',\n  trend = 'positive',\n  icon = 'arrow',\n  className,\n  ...props\n}: MetricChangeProps) {\n  const iconColor =\n    trend === 'positive' ? 'var(--success)' : 'var(--destructive)';\n  const textColor =\n    variant === 'badge'\n      ? 'text-secondary-foreground'\n      : trend === 'positive'\n        ? 'text-success'\n        : 'text-destructive';\n\n  const IconComponent =\n    icon === 'none'\n      ? null\n      : icon === 'trend'\n        ? TrendingUp\n        : icon === 'arrow-right'\n          ? ArrowUpRight\n          : ArrowUp;\n\n  const iconSize = variant === 'badge' ? 12 : 16;\n\n  return (\n    <div\n      className={cn(metricChangeVariants({ variant, trend }), className)}\n      {...props}\n    >\n      {IconComponent && (\n        <IconComponent\n          aria-hidden=\"true\"\n          width={iconSize}\n          height={iconSize}\n          color={iconColor}\n          className={cn(trend === 'negative' && 'rotate-180')}\n        />\n      )}\n      <span className=\"sr-only\">\n        {trend === 'positive' ? 'Increased' : 'Decreased'}\n      </span>\n      <span className={cn('text-sm font-medium', textColor)}>{value}</span>\n    </div>\n  );\n}\n\nMetricChange.displayName = 'MetricChange';\n\n// ============================================\n// MetricItem - Main component\n// ============================================\n\nconst metricItemVariants = cva(\n  'relative flex flex-col gap-2 p-5 bg-background rounded-xl border border-border shadow-xs transition-shadow duration-200 ease-out hover:shadow-sm motion-reduce:transition-none',\n  {\n    variants: {\n      type: {\n        simple: '',\n        'icon-01': '',\n        'icon-02': '',\n        'icon-03': '',\n        'icon-04': 'flex-row items-center',\n        'chart-01': '',\n        'chart-02': '',\n        'chart-03': '',\n        'chart-04': 'p-0 bg-transparent border-0 shadow-none',\n      },\n      breakpoint: {\n        desktop: '',\n        mobile: '',\n      },\n    },\n    defaultVariants: {\n      type: 'simple',\n      breakpoint: 'desktop',\n    },\n  },\n);\n\nexport interface MetricItemProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof metricItemVariants> {\n  /** Title/label of the metric */\n  title: string;\n  /** Main value to display */\n  value: string | number;\n  /** Change indicator value */\n  changeValue?: string;\n  /** Change trend direction */\n  changeTrend?: 'positive' | 'negative';\n  /** Change icon type ('none' to hide icon) */\n  changeIcon?: 'arrow' | 'trend' | 'arrow-right' | 'none';\n  /** Comparison text (e.g., \"vs last month\") */\n  comparisonText?: string;\n  /** Subtitle/description text shown next to value (alternative to change indicator) */\n  subtitle?: string;\n  /** Show dropdown menu button */\n  showDropdown?: boolean;\n  /** Show action buttons */\n  showActions?: boolean;\n  /** Action button click handler */\n  onViewReport?: () => void;\n  /** Dropdown click handler */\n  onDropdownClick?: () => void;\n  /** Icon for icon variants */\n  icon?: React.ReactNode;\n  /** Icon background color */\n  iconBgColor?: string;\n  /** Icon color */\n  iconColor?: string;\n  /** Chart data for chart variants */\n  chartData?: number[];\n  /** Featured icon variant style */\n  featuredIconVariant?: 'circle' | 'square' | 'modern';\n  /** Custom content to render instead of chart (for chart-04 type) */\n  children?: React.ReactNode;\n}\n\nconst MetricItem = React.memo(function MetricItem({\n  title,\n  value,\n  changeValue,\n  changeTrend = 'positive',\n  changeIcon,\n  comparisonText,\n  subtitle,\n  showDropdown = false,\n  showActions = false,\n  onViewReport,\n  onDropdownClick,\n  icon,\n  iconBgColor,\n  iconColor,\n  chartData,\n  featuredIconVariant = 'circle',\n  type = 'simple',\n  breakpoint = 'desktop',\n  className,\n  children,\n  ...props\n}: MetricItemProps) {\n  // Default icon for icon variants\n  const defaultIcon = <TrendingUp width={24} height={24} />;\n  const displayIcon = icon || defaultIcon;\n  const displayValue = formatMetricValue(value);\n\n  // Default icon colors based on type and variant\n  const defaultIconBgColor =\n    type === 'icon-01'\n      ? featuredIconVariant === 'modern'\n        ? 'var(--muted)' // for modern\n        : 'var(--success-muted)' // for circle/square\n      : type === 'icon-02' || type === 'icon-03' || type === 'icon-04'\n        ? 'var(--muted)'\n        : 'var(--success-muted)';\n\n  const defaultIconColor =\n    type === 'icon-01'\n      ? featuredIconVariant === 'modern'\n        ? 'var(--secondary-foreground)' // for modern\n        : 'var(--success)' // for circle/square\n      : type === 'icon-02'\n        ? 'var(--secondary-foreground)'\n        : 'var(--success)';\n\n  const finalIconBgColor = iconBgColor || defaultIconBgColor;\n  const finalIconColor = iconColor || defaultIconColor;\n\n  // Chart-04 has a different structure\n  if (type === 'chart-04') {\n    return (\n      <div\n        data-slot=\"metric-item\"\n        className={cn(metricItemVariants({ type, breakpoint }), className)}\n        {...props}\n      >\n        <div className=\"flex flex-col gap-0.5 w-full\">\n          {/* Header */}\n          <div className=\"flex items-center px-5 pt-3 pb-2 w-full\">\n            <p className=\"flex-1 text-sm font-semibold text-foreground\">\n              {title}\n            </p>\n          </div>\n\n          {/* Content card */}\n          <div className=\"relative bg-background border border-border rounded-xl shadow-xs p-5 flex flex-col gap-5\">\n            {/* Number and change */}\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <p className=\"text-display-sm font-semibold text-foreground\">\n                {displayValue}\n              </p>\n              {changeValue && (\n                <div className=\"flex items-center gap-2\">\n                  <MetricChange\n                    value={changeValue}\n                    trend={changeTrend}\n                    // chart-04 defaults to 'trend' icon for backward compatibility\n                    icon={changeIcon ?? 'trend'}\n                  />\n                  {comparisonText && (\n                    <span className=\"text-sm font-medium text-muted-foreground\">\n                      {comparisonText}\n                    </span>\n                  )}\n                </div>\n              )}\n            </div>\n\n            {/* Chart or custom content */}\n            {children ? (\n              children\n            ) : chartData ? (\n              <MetricMiniChart\n                data={chartData}\n                width={undefined}\n                height={56}\n                variant=\"line\"\n                showMarker={false}\n                trend={changeTrend}\n                className=\"w-full\"\n              />\n            ) : null}\n\n            {/* Dropdown */}\n            {showDropdown && (\n              <button\n                type=\"button\"\n                aria-label=\"More options\"\n                className=\"absolute top-2 end-2 p-3 cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors duration-150 ease-out hover:text-foreground\"\n                onClick={onDropdownClick}\n              >\n                <MoreVertical\n                  width={20}\n                  height={20}\n                  className=\"text-muted-foreground\"\n                />\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"metric-item\"\n      className={cn(metricItemVariants({ type, breakpoint }), className)}\n      {...props}\n    >\n      {/* Featured Icon (for icon-01 only - standalone icon above content) */}\n      {type === 'icon-01' && (\n        <div\n          className={cn(\n            'flex items-center justify-center shrink-0 relative overflow-clip',\n            featuredIconVariant === 'modern'\n              ? 'rounded-[10px] border border-border shadow-xs'\n              : featuredIconVariant === 'square'\n                ? 'rounded-[10px] border border-border shadow-xs'\n                : 'rounded-full',\n          )}\n          style={{\n            width: 48,\n            height: 48,\n            backgroundColor: finalIconBgColor,\n            color: finalIconColor,\n          }}\n        >\n          {displayIcon}\n          {/* Skeuomorphic inner shadow overlay for modern variant */}\n          {featuredIconVariant === 'modern' && (\n            <div\n              className=\"absolute inset-0 pointer-events-none rounded-[10px]\"\n              style={{\n                boxShadow: 'var(--shadow-inset-ring)',\n              }}\n            />\n          )}\n        </div>\n      )}\n\n      {/* Icon-02 and Icon-03: Heading row with icon + title */}\n      {(type === 'icon-02' || type === 'icon-03') && (\n        <div className=\"flex items-center gap-3 w-full\">\n          <div\n            className={cn(\n              'flex items-center justify-center shrink-0',\n              type === 'icon-02'\n                ? 'rounded-full'\n                : 'rounded-lg border border-border shadow-xs',\n            )}\n            style={{\n              width: 48,\n              height: 48,\n              backgroundColor: finalIconBgColor,\n              color: finalIconColor,\n            }}\n          >\n            {icon || <Eye width={24} height={24} />}\n          </div>\n          <p className=\"flex-1 text-base font-semibold text-foreground\">\n            {title}\n          </p>\n        </div>\n      )}\n\n      {/* Icon-04: Horizontal layout with featured icon + content */}\n      {type === 'icon-04' && (\n        <div\n          className={cn(\n            'flex items-center justify-center shrink-0 rounded-md border border-border shadow-xs',\n          )}\n          style={{\n            width: 40,\n            height: 40,\n            backgroundColor: finalIconBgColor,\n            color: finalIconColor,\n          }}\n        >\n          {icon || <TrendingUp width={20} height={20} />}\n        </div>\n      )}\n\n      {/* Heading and number section */}\n      {type !== 'icon-02' && type !== 'icon-03' && (\n        <div\n          className={cn(\n            'flex flex-col gap-2',\n            type === 'icon-04' ? 'flex-1 min-w-0' : 'w-full',\n          )}\n        >\n          {/* Title */}\n          {type === 'chart-01' || type === 'chart-02' ? (\n            <p className=\"text-base font-semibold text-foreground\">{title}</p>\n          ) : type === 'icon-04' || type === 'icon-01' ? (\n            <p className=\"text-sm font-semibold text-muted-foreground\">\n              {title}\n            </p>\n          ) : (\n            <p className=\"text-sm font-medium text-muted-foreground\">{title}</p>\n          )}\n\n          {/* Number and badge row */}\n          {type === 'simple' || type === 'icon-01' || type === 'icon-04' ? (\n            <div className=\"flex flex-wrap items-center justify-between gap-3 w-full\">\n              <p className=\"text-display-sm font-semibold text-foreground\">\n                {displayValue}\n              </p>\n              {/* Show inline change + comparison OR badge OR subtitle */}\n              {changeValue && comparisonText ? (\n                <div className=\"flex items-center gap-2\">\n                  <MetricChange\n                    value={changeValue}\n                    trend={changeTrend}\n                    icon=\"arrow\"\n                  />\n                  <span className=\"text-sm font-medium text-muted-foreground\">\n                    {comparisonText}\n                  </span>\n                </div>\n              ) : changeValue ? (\n                <MetricChange\n                  value={changeValue}\n                  trend={changeTrend}\n                  // badge variant defaults to 'arrow-right' icon for backward compatibility\n                  icon={changeIcon ?? 'arrow-right'}\n                  variant=\"badge\"\n                />\n              ) : subtitle ? (\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  {subtitle}\n                </span>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      )}\n\n      {/* Chart variants content */}\n      {type === 'chart-01' && (\n        <div className=\"flex items-end gap-4 w-full\">\n          <div className=\"flex-1 flex flex-col gap-3\">\n            <p className=\"text-display-sm font-semibold text-foreground\">\n              {displayValue}\n            </p>\n            {(changeValue || comparisonText) && (\n              <div className=\"flex items-center gap-2\">\n                {changeValue && (\n                  <MetricChange\n                    value={changeValue}\n                    trend={changeTrend}\n                    icon=\"arrow\"\n                  />\n                )}\n                {comparisonText && (\n                  <span className=\"text-sm font-medium text-muted-foreground truncate\">\n                    {comparisonText}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n          {chartData && (\n            <MetricMiniChart\n              data={chartData}\n              width={112}\n              height={56}\n              variant=\"line\"\n              trend={changeTrend}\n            />\n          )}\n        </div>\n      )}\n\n      {type === 'chart-02' && (\n        <div className=\"flex items-end gap-4 w-full\">\n          <div className=\"flex-1 flex items-start gap-2\">\n            <p className=\"text-display-md font-semibold text-foreground\">\n              {displayValue}\n            </p>\n            {changeValue && (\n              <MetricChange\n                value={changeValue}\n                trend={changeTrend}\n                icon=\"trend\"\n              />\n            )}\n          </div>\n          {chartData && (\n            <MetricMiniChart\n              data={chartData}\n              width={128}\n              height={56}\n              variant=\"layers\"\n              showMarker={false}\n              trend={changeTrend}\n            />\n          )}\n        </div>\n      )}\n\n      {type === 'chart-03' && (\n        <>\n          <div className=\"flex flex-col gap-2 w-full\">\n            <p className=\"text-sm font-medium text-muted-foreground\">{title}</p>\n            <div className=\"flex flex-wrap items-center justify-between gap-3 w-full\">\n              <p className=\"text-display-sm font-semibold text-foreground\">\n                {displayValue}\n              </p>\n              {(changeValue || comparisonText) && (\n                <div className=\"flex items-center gap-2\">\n                  {changeValue && (\n                    <MetricChange\n                      value={changeValue}\n                      trend={changeTrend}\n                      icon=\"trend\"\n                    />\n                  )}\n                  {comparisonText && (\n                    <span className=\"text-sm font-medium text-muted-foreground\">\n                      {comparisonText}\n                    </span>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n          {chartData && (\n            <MetricMiniChart\n              data={chartData}\n              height={72}\n              variant=\"area\"\n              showMarker={false}\n              trend={changeTrend}\n              className=\"w-full\"\n            />\n          )}\n        </>\n      )}\n\n      {/* Icon-02 and Icon-03 number section */}\n      {(type === 'icon-02' || type === 'icon-03') && (\n        <div className=\"flex items-end gap-4 w-full\">\n          <div className=\"flex-1 flex flex-col gap-3\">\n            <p className=\"text-display-md font-semibold text-foreground\">\n              {displayValue}\n            </p>\n            {(changeValue || comparisonText) && (\n              <div className=\"flex items-center gap-2\">\n                {changeValue && (\n                  <MetricChange\n                    value={changeValue}\n                    trend={changeTrend}\n                    icon={type === 'icon-03' ? 'trend' : 'arrow'}\n                  />\n                )}\n                {comparisonText && (\n                  <span className=\"text-sm font-medium text-muted-foreground truncate\">\n                    {comparisonText}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n          {chartData && (\n            <MetricMiniChart\n              data={chartData}\n              width={112}\n              height={56}\n              variant=\"line\"\n              trend={changeTrend}\n            />\n          )}\n        </div>\n      )}\n\n      {/* Dropdown button */}\n      {showDropdown && (\n        <button\n          type=\"button\"\n          aria-label=\"More options\"\n          className=\"absolute top-2 end-2 cursor-pointer rounded-sm p-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors duration-150 ease-out hover:text-foreground\"\n          onClick={onDropdownClick}\n        >\n          <MoreVertical\n            width={20}\n            height={20}\n            className=\"text-muted-foreground\"\n          />\n        </button>\n      )}\n\n      {/* Action buttons */}\n      {showActions && (\n        <div className=\"flex items-center gap-2 pt-2\">\n          <Button\n            appearance=\"outline\"\n            variant=\"secondary\"\n            size=\"sm\"\n            onClick={onViewReport}\n          >\n            View report\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n});\n\nMetricItem.displayName = 'MetricItem';\n\nexport {\n  MetricChange,\n  MetricItem,\n  MetricMiniChart,\n  metricChangeVariants,\n  metricItemVariants,\n  metricMiniChartVariants,\n};\n","/**\n * Web Component wrapper for MetricItem\n * Custom element: <hf-metric-item>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { MetricItem } from '../components/organisms/content/MetricItem';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Event wrapper that dispatches custom DOM events\n */\nfunction createEventDispatcher(element: HTMLElement) {\n  return {\n    onViewReport: (value: unknown) => {\n      const CustomEventConstructor =\n        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;\n      element.dispatchEvent(new CustomEventConstructor('view-report', {\n        detail: value,\n        bubbles: true,\n        composed: true\n      }));\n    },\n    onDropdownClick: (value: unknown) => {\n      const CustomEventConstructor =\n        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;\n      element.dispatchEvent(new CustomEventConstructor('dropdown-click', {\n        detail: value,\n        bubbles: true,\n        composed: true\n      }));\n    }\n  };\n}\n\n/**\n * Wrapper component that connects React events to DOM custom events\n */\nfunction MetricItemWrapper(props: React.ComponentProps<typeof MetricItem> & { _hostElement?: HTMLElement }) {\n  const { _hostElement, ...restProps } = props;\n\n  const eventHandlers = React.useMemo(() => {\n    if (!_hostElement) return {};\n    return createEventDispatcher(_hostElement);\n  }, [_hostElement]);\n\n  return React.createElement(MetricItem, { ...restProps, ...eventHandlers });\n}\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    type: 'string',\n    breakpoint: 'string',\n    title: 'string',\n    value: 'string',\n    changeValue: 'string',\n    changeTrend: 'string',\n    changeIcon: 'string',\n    comparisonText: 'string',\n    subtitle: 'string',\n    showDropdown: 'boolean',\n    showActions: 'boolean',\n    icon: 'json',\n    iconBgColor: 'string',\n    iconColor: 'string',\n    chartData: 'json',\n    featuredIconVariant: 'string'\n};\n\nclass MetricItemWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root || !this._childrenContainer) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      MetricItemWrapper,\n      { ...props, _hostElement: this },\n      React.createElement('span', {\n        ref: (el: HTMLSpanElement | null) => {\n          if (el && this._childrenContainer) {\n            el.replaceWith(this._childrenContainer);\n          }\n        },\n        style: { display: 'contents' },\n      }),\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(MetricItemWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-metric-item')) {\n  customElements.define('hf-metric-item', MetricItemWC);\n}\n\nexport { MetricItemWC };\nexport default MetricItemWC;\n"],"x_google_ignoreList":[0,1],"mappings":"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"}

package/dist/wc/hf-nav-account-menu.js

@@ -4,9 +4,9 @@ import { t as k } from "./dist.js";
 import { t as E } from "./createLucideIcon.js";
 import { t as T } from "./chevron-right.js";
 import { t as z } from "./Switch.js";
-import { t as O } from "./create-safe-context.js";
 import { n as i } from "./utils.js";
-import { c as P, s as v } from "./_shared.js";
+import { c as O, s as v } from "./_shared.js";
+import { t as P } from "./create-safe-context.js";
 import { t as S } from "./use-controllable-state.js";
 import { t as V } from "./Kbd.js";
 import { a as L, i as $, s as g } from "./Popover2.js";
@@ -23,7 +23,7 @@ var D = [
     d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4",
     key: "1uf3rs"
   }]
-], H = E("log-out", D), u = /* @__PURE__ */ C(A(), 1), t = M(), [I, N] = O("NavAccountMenu");
+], H = E("log-out", D), u = /* @__PURE__ */ C(A(), 1), t = M(), [I, N] = P("NavAccountMenu");
 function _({ type: e = "card", open: n, defaultOpen: o = !1, onOpenChange: r, children: s }) {
   const [c, a] = S({
     value: n,
@@ -322,7 +322,7 @@ var p = {
   }
   _setProp(e, n) {
     const o = p[e] || "string";
-    this._props[e] = P(n, o), this._render();
+    this._props[e] = O(n, o), this._render();
   }
   _getProp(e) {
     if (e in this._props) return this._props[e];

package/dist/wc/hf-notification-panel.js

@@ -9,10 +9,10 @@ import { t as R } from "./Avatar.js";
 import { t as I } from "./x.js";
 import { n as c } from "./utils.js";
 import { c as B, s as C } from "./_shared.js";
-import { t as N } from "./react.js";
-import { t as k } from "./use-reduced-motion2.js";
 import { t as f } from "./button.js";
 import { t as S } from "./scroll-area.js";
+import { t as N } from "./react.js";
+import { t as k } from "./use-reduced-motion2.js";
 var W = [
   ["path", {
     d: "M10.268 21a2 2 0 0 0 3.464 0",

package/dist/wc/hf-pie-chart.js

@@ -3,13 +3,13 @@ import { i as X, n as G, t as J } from "./vendor/react.js";
 import { D as Q, M as Y, g as ee } from "./vendor/recharts.js";
 import { t as te } from "./dist.js";
 import { n as v } from "./utils.js";
-import { n as ie, o as re, r as se, s as ne, t as oe } from "./chart.js";
-import { t as ae } from "./use-reduced-motion.js";
-import { n as le, t as ce } from "./chart-legend.js";
-import { i as de, o as E } from "./chart-data.js";
-import { r as z } from "./LineChart.js";
-import { c as pe, s as L } from "./_shared.js";
-var o = /* @__PURE__ */ B(X(), 1), s = J(), M = [...ie, oe], me = te("relative flex items-center max-w-full", {
+import { c as ie, s as E } from "./_shared.js";
+import { n as re, o as se, r as ne, s as oe, t as ae } from "./chart.js";
+import { t as le } from "./use-reduced-motion.js";
+import { n as ce, t as de } from "./chart-legend.js";
+import { i as pe, o as z } from "./chart-data.js";
+import { r as L } from "./LineChart.js";
+var o = /* @__PURE__ */ B(X(), 1), s = J(), M = [...re, ae], me = te("relative flex items-center max-w-full", {
   variants: { size: {
     xxs: "size-[120px]",
     xs: "size-[160px]",
@@ -20,7 +20,7 @@ var o = /* @__PURE__ */ B(X(), 1), s = J(), M = [...ie, oe], me = te("relative f
   defaultVariants: { size: "md" }
 });
 function R({ data: e, series: n, legendPosition: i = "none", hole: u = "none", startAngle: g = 90, showTooltip: w = !0, paddingAngle: P = 2, showLabels: x = !1, labelType: N = "value", labelPosition: p = "outside", centerValue: m, centerLabel: _, size: k, className: O, "aria-label": D, ...H }) {
-  const j = ae(), { highlightedSeries: $, setHighlightedSeries: V, getOpacity: F, dimTransition: q } = le(j), y = de(g, 90), K = E(P, 2), a = o.useMemo(() => e.map((t, r) => t.color || M[r % M.length]), [e]), Z = o.useMemo(() => {
+  const j = le(), { highlightedSeries: $, setHighlightedSeries: V, getOpacity: F, dimTransition: q } = ce(j), y = pe(g, 90), K = z(P, 2), a = o.useMemo(() => e.map((t, r) => t.color || M[r % M.length]), [e]), Z = o.useMemo(() => {
     switch (u) {
       case "25%":
         return 25;
@@ -34,7 +34,7 @@ function R({ data: e, series: n, legendPosition: i = "none", hole: u = "none", s
   }, [u]), C = o.useMemo(() => {
     const t = {};
     return e.forEach((r, c) => {
-      const d = z(r.id);
+      const d = L(r.id);
       t[d] = {
         label: r.label,
         color: a[c]
@@ -49,9 +49,9 @@ function R({ data: e, series: n, legendPosition: i = "none", hole: u = "none", s
     e,
     n
   ]), l = o.useMemo(() => e.map((t, r) => ({
-    name: z(t.id),
+    name: L(t.id),
     displayName: t.label,
-    value: E(t.value),
+    value: z(t.value),
     fill: a[r]
   })), [e, a]), b = o.useMemo(() => l.reduce((t, r) => t + r.value, 0), [l]), U = o.useCallback((t, r) => {
     const c = l.find((f) => f.name === r)?.displayName || r, d = b === 0 ? "0.0" : (Number(t) / b * 100).toFixed(1);
@@ -103,7 +103,7 @@ function R({ data: e, series: n, legendPosition: i = "none", hole: u = "none", s
     children: [/* @__PURE__ */ (0, s.jsxs)("div", {
       "data-slot": "pie-chart-plot",
       className: v(me({ size: k }), O),
-      children: [/* @__PURE__ */ (0, s.jsx)(se, {
+      children: [/* @__PURE__ */ (0, s.jsx)(ne, {
         config: C,
         className: "w-full h-full",
         children: /* @__PURE__ */ (0, s.jsxs)(ee, { children: [/* @__PURE__ */ (0, s.jsx)(Q, {
@@ -125,7 +125,7 @@ function R({ data: e, series: n, legendPosition: i = "none", hole: u = "none", s
             opacity: F(e[r].id),
             style: q
           }, `cell-${t.name}`))
-        }), w && /* @__PURE__ */ (0, s.jsx)(re, { content: /* @__PURE__ */ (0, s.jsx)(ne, {
+        }), w && /* @__PURE__ */ (0, s.jsx)(se, { content: /* @__PURE__ */ (0, s.jsx)(oe, {
           hideLabel: !0,
           formatter: U
         }) })] })
@@ -140,7 +140,7 @@ function R({ data: e, series: n, legendPosition: i = "none", hole: u = "none", s
           children: _
         })]
       })]
-    }), i !== "none" && /* @__PURE__ */ (0, s.jsx)(ce, {
+    }), i !== "none" && /* @__PURE__ */ (0, s.jsx)(de, {
       series: I,
       position: i === "bottom" ? "top" : "right",
       onSeriesHover: V,
@@ -193,12 +193,12 @@ var he = G(), h = {
   }
   _setProp(e, n) {
     const i = h[e] || "string";
-    this._props[e] = pe(n, i), this._render();
+    this._props[e] = ie(n, i), this._render();
   }
   _getProp(e) {
     if (e in this._props) return this._props[e];
     const n = e.replace(/([A-Z])/g, "-$1").toLowerCase(), i = h[e] || "string";
-    return L(this.getAttribute(n), i);
+    return E(this.getAttribute(n), i);
   }
   _render() {
     if (!this._root || !this._childrenContainer) return;
@@ -206,7 +206,7 @@ var he = G(), h = {
     for (const [i, u] of Object.entries(h)) if (i in this._props) e[i] = this._props[i];
     else {
       const g = i.replace(/([A-Z])/g, "-$1").toLowerCase();
-      e[i] = L(this.getAttribute(g), u);
+      e[i] = E(this.getAttribute(g), u);
     }
     const n = o.createElement(R, e, o.createElement("span", {
       ref: (i) => {

package/dist/wc/hf-radar-chart.js

@@ -3,12 +3,12 @@ import { i as G, n as B, t as U } from "./vendor/react.js";
 import { A as X, E as I, O as J, h as Q, k as Y } from "./vendor/recharts.js";
 import { t as tt } from "./dist.js";
 import { n as f } from "./utils.js";
-import { o as et, r as rt, s as at } from "./chart.js";
-import { t as it } from "./use-reduced-motion.js";
-import { n as ot, t as st } from "./chart-legend.js";
-import { a as nt, l as lt, r as ct, s as dt, t as ht } from "./chart-data.js";
-import { r as g, t as _ } from "./LineChart.js";
-import { c as pt, s as C } from "./_shared.js";
+import { c as et, s as g } from "./_shared.js";
+import { o as rt, r as at, s as it } from "./chart.js";
+import { t as ot } from "./use-reduced-motion.js";
+import { n as st, t as nt } from "./chart-legend.js";
+import { a as lt, l as ct, r as dt, s as ht, t as pt } from "./chart-data.js";
+import { r as _, t as C } from "./LineChart.js";
 var c = /* @__PURE__ */ K(G(), 1), a = U(), mt = tt("relative max-w-full", {
   variants: { size: {
     sm: "size-[280px]",
@@ -19,17 +19,17 @@ var c = /* @__PURE__ */ K(G(), 1), a = U(), mt = tt("relative max-w-full", {
   defaultVariants: { size: "default" }
 });
 function b({ data: t, series: r, legendPosition: e = "none", showTooltip: h = !0, showGrid: p = !0, gridType: y = "polygon", showRadialLines: j = !0, fillGrid: m = !1, showAxisLabels: k = !0, axisLabelFormatter: v, showRadiusTicks: A = !1, radiusTickFormatter: w = (d) => d.toLocaleString(), radiusAxisAngle: T = 90, showDots: z = !1, domain: N, fillOpacity: E = 0.3, strokeWidth: L = 2, size: O, className: R, "aria-label": S, ...D }) {
-  const d = it(), { highlightedSeries: F, setHighlightedSeries: M, getOpacity: P, dimTransition: W } = ot(d), V = c.useMemo(() => lt(t, r), [t, r]), n = c.useMemo(() => r.map((i, o) => i.color || _[o % _.length]), [r]), u = c.useMemo(() => {
+  const d = ot(), { highlightedSeries: F, setHighlightedSeries: M, getOpacity: P, dimTransition: W } = st(d), V = c.useMemo(() => ct(t, r), [t, r]), n = c.useMemo(() => r.map((i, o) => i.color || C[o % C.length]), [r]), u = c.useMemo(() => {
     const i = {};
     for (const [o, s] of r.entries()) {
-      const q = g(s.id);
+      const q = _(s.id);
       i[q] = {
         label: s.label,
         color: n[o]
       };
     }
     return i;
-  }, [r, n]), H = ct(N) ?? dt(t.flatMap((i) => Object.values(i.values))), Z = ht(E * 100) / 100, $ = nt(L, 1.5);
+  }, [r, n]), H = dt(N) ?? ht(t.flatMap((i) => Object.values(i.values))), Z = pt(E * 100) / 100, $ = lt(L, 1.5);
   return /* @__PURE__ */ (0, a.jsxs)("div", {
     "data-slot": "radar-chart",
     className: f("flex w-full max-w-full", e === "right" ? "flex-row gap-4" : "flex-col gap-4", e === "bottom" && "items-center"),
@@ -39,7 +39,7 @@ function b({ data: t, series: r, legendPosition: e = "none", showTooltip: h = !0
     children: [/* @__PURE__ */ (0, a.jsx)("div", {
       "data-slot": "radar-chart-plot",
       className: f(mt({ size: O }), R),
-      children: /* @__PURE__ */ (0, a.jsx)(rt, {
+      children: /* @__PURE__ */ (0, a.jsx)(at, {
         config: u,
         className: "w-full h-full",
         children: /* @__PURE__ */ (0, a.jsxs)(Q, {
@@ -79,7 +79,7 @@ function b({ data: t, series: r, legendPosition: e = "none", showTooltip: h = !0
               axisLine: !1,
               tickFormatter: w
             }),
-            h && /* @__PURE__ */ (0, a.jsx)(et, { content: /* @__PURE__ */ (0, a.jsx)(at, { formatter: (i, o) => {
+            h && /* @__PURE__ */ (0, a.jsx)(rt, { content: /* @__PURE__ */ (0, a.jsx)(it, { formatter: (i, o) => {
               const s = u[o];
               return /* @__PURE__ */ (0, a.jsxs)("div", {
                 className: "flex items-center gap-2",
@@ -97,7 +97,7 @@ function b({ data: t, series: r, legendPosition: e = "none", showTooltip: h = !0
               });
             } }) }),
             r.map((i, o) => {
-              const s = g(i.id);
+              const s = _(i.id);
               return /* @__PURE__ */ (0, a.jsx)(I, {
                 name: s,
                 dataKey: s,
@@ -121,7 +121,7 @@ function b({ data: t, series: r, legendPosition: e = "none", showTooltip: h = !0
           ]
         })
       })
-    }), e !== "none" && /* @__PURE__ */ (0, a.jsx)(st, {
+    }), e !== "none" && /* @__PURE__ */ (0, a.jsx)(nt, {
       series: r,
       position: e === "bottom" ? "top" : "right",
       onSeriesHover: M,
@@ -179,12 +179,12 @@ var ut = B(), l = {
   }
   _setProp(t, r) {
     const e = l[t] || "string";
-    this._props[t] = pt(r, e), this._render();
+    this._props[t] = et(r, e), this._render();
   }
   _getProp(t) {
     if (t in this._props) return this._props[t];
     const r = t.replace(/([A-Z])/g, "-$1").toLowerCase(), e = l[t] || "string";
-    return C(this.getAttribute(r), e);
+    return g(this.getAttribute(r), e);
   }
   _render() {
     if (!this._root || !this._childrenContainer) return;
@@ -192,7 +192,7 @@ var ut = B(), l = {
     for (const [e, h] of Object.entries(l)) if (e in this._props) t[e] = this._props[e];
     else {
       const p = e.replace(/([A-Z])/g, "-$1").toLowerCase();
-      t[e] = C(this.getAttribute(p), h);
+      t[e] = g(this.getAttribute(p), h);
     }
     const r = c.createElement(b, t, c.createElement("span", {
       ref: (e) => {

package/dist/wc/hf-section-header.js

@@ -3,10 +3,10 @@ import { i as A, n as $, t as k } from "./vendor/react.js";
 import { t as z } from "./search.js";
 import { n as l } from "./utils.js";
 import { c as I, s as f } from "./_shared.js";
-import { n as L, r as P } from "./Toggle2.js";
-import { t as V } from "./button.js";
-import { t as O } from "./Input2.js";
 import { t as m } from "./Tabs.js";
+import { t as L } from "./button.js";
+import { n as P, r as V } from "./Toggle2.js";
+import { t as O } from "./Input2.js";
 import { t as B } from "./Separator3.js";
 var d = /* @__PURE__ */ H(A(), 1), s = k(), x = "min-h-11 min-w-11 shrink-0";
 function D(e) {
@@ -23,7 +23,7 @@ function q(e, t, r = "section-header-action") {
 }
 function G({ action: e, className: t }) {
   const { label: r, className: a, ...n } = e;
-  return /* @__PURE__ */ (0, s.jsx)(V, {
+  return /* @__PURE__ */ (0, s.jsx)(L, {
     appearance: "solid",
     size: "default",
     shape: "rounded",
@@ -33,14 +33,14 @@ function G({ action: e, className: t }) {
   });
 }
 function Z({ items: e, className: t, ...r }) {
-  return /* @__PURE__ */ (0, s.jsx)(L, {
+  return /* @__PURE__ */ (0, s.jsx)(P, {
     variant: "outline",
     shape: "rounded",
     className: l("overflow-hidden rounded-xl", t),
     ...r,
     children: e.map((a) => {
       const { label: n, className: i, ...o } = a;
-      return /* @__PURE__ */ (0, s.jsx)(P, {
+      return /* @__PURE__ */ (0, s.jsx)(V, {
         className: l("px-3 text-xs font-medium", i),
         ...o,
         children: n

package/dist/wc/hf-sheet.js

@@ -4,8 +4,8 @@ import { t as M } from "./dist.js";
 import { t as K } from "./x.js";
 import { n as d } from "./utils.js";
 import { a as X, i as G, l as c, o as I, t as J, u as Q } from "./_shared.js";
-import { t as U } from "./use-controllable-state.js";
 import { t as x } from "./button.js";
+import { t as U } from "./use-controllable-state.js";
 import { a as Y, c as Z, i as $, l as _, n as L, t as ee, u as te } from "./DialogTrigger.js";
 import { t as ae } from "./DialogRoot.js";
 import { t as se } from "./DialogViewport.js";

package/dist/wc/hf-sparkline-chart.js

@@ -1,8 +1,8 @@
 import { a as S } from "./rolldown-runtime.js";
 import { i as z, n as R, t as W } from "./vendor/react.js";
 import { n as D } from "./utils.js";
-import { n as E } from "./chart.js";
-import { c as F, s as P } from "./_shared.js";
+import { c as F, s as E } from "./_shared.js";
+import { n as P } from "./chart.js";
 var p = /* @__PURE__ */ S(z(), 1), l = W(), H = [
   "primary",
   "success",
@@ -68,7 +68,7 @@ function M({ data: t, color: e = "primary", width: r = 100, height: n = 32, stro
     k,
     m,
     d
-  ]), w = H.indexOf(e), v = E[w] ?? E[0], y = p.useMemo(() => q(x, o), [x, o]), N = p.useMemo(() => V(y, x, d), [
+  ]), w = H.indexOf(e), v = P[w] ?? P[0], y = p.useMemo(() => q(x, o), [x, o]), N = p.useMemo(() => V(y, x, d), [
     y,
     x,
     d
@@ -176,7 +176,7 @@ var X = R(), f = {
   _getProp(t) {
     if (t in this._props) return this._props[t];
     const e = t.replace(/([A-Z])/g, "-$1").toLowerCase(), r = f[t] || "string";
-    return P(this.getAttribute(e), r);
+    return E(this.getAttribute(e), r);
   }
   _render() {
     if (!this._root) return;
@@ -184,7 +184,7 @@ var X = R(), f = {
     for (const [r, n] of Object.entries(f)) if (r in this._props) t[r] = this._props[r];
     else {
       const i = r.replace(/([A-Z])/g, "-$1").toLowerCase();
-      t[r] = P(this.getAttribute(i), n);
+      t[r] = E(this.getAttribute(i), n);
     }
     const e = p.createElement(M, t);
     this._root.render(e);