@humain/ui 2.1.63 → 2.1.65

package/dist/index189.js.map

@@ -1 +1 @@
-{"version":3,"file":"index189.js","names":[],"sources":["../src/components/organisms/content/DataTable/DataTableCell.tsx"],"sourcesContent":["import {\n  ArrowDown,\n  ArrowUp,\n  type LucideIcon,\n  MoreHorizontal,\n} from 'lucide-react';\nimport type * as React from 'react';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { Badge, type BadgeProps } from '@/components/atoms/display/Badge';\nimport { Progress } from '@/components/atoms/display/Progress';\nimport { Rating } from '@/components/atoms/display/Rating';\nimport { SparklineChart } from '@/components/atoms/display/SparklineChart';\nimport { Switch, type SwitchProps } from '@/components/atoms/forms/Switch';\nimport { Avatar, type AvatarProps } from '@/components/molecules/data/Avatar';\nimport { cn } from '@/lib/utils';\nimport { dataTableTouchTargetClassName } from './DataTableHitArea';\n\nexport type DataTableCellTone =\n  | 'foreground'\n  | 'secondary'\n  | 'muted'\n  | 'success'\n  | 'warning'\n  | 'destructive';\n\nconst textToneClassName: Record<DataTableCellTone, string> = {\n  foreground: 'text-foreground',\n  secondary: 'text-secondary-foreground',\n  muted: 'text-muted-foreground',\n  success: 'text-success',\n  warning: 'text-warning',\n  destructive: 'text-destructive',\n};\n\nfunction getSentiment(value: number): DataTableTrendSentiment {\n  if (value > 0) return 'positive';\n  if (value < 0) return 'negative';\n  return 'neutral';\n}\n\nfunction formatTrendValue(value: number): string {\n  const absoluteValue = Math.abs(value);\n  return `${Number.isInteger(absoluteValue) ? absoluteValue : absoluteValue.toFixed(1)}%`;\n}\n\nfunction getActionButtonSize({\n  children,\n  icon,\n  iconOnly,\n  size,\n}: {\n  children: React.ReactNode;\n  icon: React.ReactNode;\n  iconOnly: boolean | undefined;\n  size: DataTableCellAction['size'];\n}): DataTableCellAction['size'] {\n  if (size) return size;\n  return (iconOnly ?? (icon && !children)) ? 'icon-sm' : 'sm';\n}\n\nexport type DataTableCellRootProps = React.ComponentPropsWithoutRef<'div'>;\n\nfunction DataTableCellRoot({\n  className,\n  ...props\n}: DataTableCellRootProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"data-table-cell-content\"\n      className={cn('flex min-w-0 items-center gap-3', className)}\n      {...props}\n    />\n  );\n}\nDataTableCellRoot.displayName = 'DataTableCell';\n\nexport interface DataTableTextCellProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  primary?: React.ReactNode;\n  children?: React.ReactNode;\n  supportingText?: React.ReactNode;\n  lead?: boolean;\n  tone?: DataTableCellTone;\n  supportingTone?: DataTableCellTone;\n  primaryClassName?: string;\n  supportingClassName?: string;\n}\n\nfunction DataTableTextCell({\n  className,\n  primary,\n  children,\n  supportingText,\n  lead = true,\n  tone = lead ? 'foreground' : 'secondary',\n  supportingTone = 'muted',\n  primaryClassName,\n  supportingClassName,\n  ...props\n}: DataTableTextCellProps): React.JSX.Element {\n  const primaryContent = primary ?? children;\n\n  return (\n    <div\n      data-slot=\"data-table-cell-text\"\n      className={cn('flex min-w-0 flex-col', className)}\n      {...props}\n    >\n      <span\n        className={cn(\n          'truncate text-sm',\n          lead ? 'font-medium' : 'font-regular',\n          textToneClassName[tone],\n          primaryClassName,\n        )}\n      >\n        {primaryContent}\n      </span>\n      {supportingText ? (\n        <span\n          className={cn(\n            'truncate text-sm font-light',\n            textToneClassName[supportingTone],\n            supportingClassName,\n          )}\n        >\n          {supportingText}\n        </span>\n      ) : null}\n    </div>\n  );\n}\nDataTableTextCell.displayName = 'DataTableCell.Text';\n\nexport interface DataTableAvatarCellProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  name: React.ReactNode;\n  supportingText?: React.ReactNode;\n  src?: string;\n  alt?: string;\n  fallback?: string;\n  avatar?: React.ReactNode;\n  avatarSize?: AvatarProps['size'];\n  avatarShape?: AvatarProps['shape'];\n  lead?: boolean;\n}\n\nfunction DataTableAvatarCell({\n  className,\n  name,\n  supportingText,\n  src,\n  alt = '',\n  fallback,\n  avatar,\n  avatarSize = 'lg',\n  avatarShape = 'circle',\n  lead = true,\n  ...props\n}: DataTableAvatarCellProps): React.JSX.Element {\n  return (\n    <DataTableCellRoot className={className} {...props}>\n      {avatar ?? (\n        <Avatar\n          src={src}\n          alt={alt}\n          fallback={fallback ?? (typeof name === 'string' ? name : undefined)}\n          size={avatarSize}\n          shape={avatarShape}\n        />\n      )}\n      <DataTableTextCell\n        className=\"min-w-0\"\n        primary={name}\n        supportingText={supportingText}\n        lead={lead}\n      />\n    </DataTableCellRoot>\n  );\n}\nDataTableAvatarCell.displayName = 'DataTableCell.Avatar';\n\nexport type DataTableBadgeItem = {\n  label: React.ReactNode;\n  color?: BadgeProps['color'];\n  variant?: BadgeProps['variant'];\n  shape?: BadgeProps['shape'];\n  className?: string;\n};\n\nexport interface DataTableBadgesCellProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'color'> {\n  items: DataTableBadgeItem[];\n  max?: number;\n  overflowLabel?: (count: number) => React.ReactNode;\n  size?: BadgeProps['size'];\n  color?: BadgeProps['color'];\n  variant?: BadgeProps['variant'];\n  shape?: BadgeProps['shape'];\n}\n\nfunction DataTableBadgesCell({\n  className,\n  items,\n  max = items.length,\n  overflowLabel = (count) => `+${count}`,\n  size = 'sm',\n  color = 'secondary',\n  variant = 'soft',\n  shape = 'rounded',\n  ...props\n}: DataTableBadgesCellProps): React.JSX.Element {\n  const visibleCount = Math.max(0, Math.min(items.length, max));\n  const visibleItems = items.slice(0, visibleCount);\n  const overflowCount = items.length - visibleItems.length;\n\n  return (\n    <div\n      data-slot=\"data-table-cell-badges\"\n      className={cn('flex min-w-0 flex-wrap items-center gap-1', className)}\n      {...props}\n    >\n      {visibleItems.map((item, index) => (\n        <Badge\n          key={`${String(item.label)}-${index}`}\n          color={item.color ?? color}\n          variant={item.variant ?? variant}\n          shape={item.shape ?? shape}\n          size={size}\n          className={item.className}\n        >\n          {item.label}\n        </Badge>\n      ))}\n      {overflowCount > 0 ? (\n        <Badge color=\"secondary\" variant=\"soft\" shape={shape} size={size}>\n          {overflowLabel(overflowCount)}\n        </Badge>\n      ) : null}\n    </div>\n  );\n}\nDataTableBadgesCell.displayName = 'DataTableCell.Badges';\n\nexport interface DataTableProgressCellProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  value: number;\n  max?: number;\n  label?: React.ReactNode;\n  supportingText?: React.ReactNode;\n  progressClassName?: string;\n}\n\nfunction DataTableProgressCell({\n  className,\n  value,\n  max = 100,\n  label,\n  supportingText,\n  progressClassName,\n  ...props\n}: DataTableProgressCellProps): React.JSX.Element {\n  const normalizedMax = Number.isFinite(max) && max > 0 ? max : 100;\n  const percentage = Math.min(100, Math.max(0, (value / normalizedMax) * 100));\n  const visibleLabel = label ?? `${Math.round(percentage)}%`;\n\n  return (\n    <div\n      data-slot=\"data-table-cell-progress\"\n      className={cn('flex min-w-40 items-center gap-3', className)}\n      {...props}\n    >\n      <span className=\"w-10 shrink-0 text-sm text-secondary-foreground\">\n        {visibleLabel}\n      </span>\n      <Progress\n        value={percentage}\n        className={cn('min-w-24 flex-1', progressClassName)}\n      />\n      {supportingText ? (\n        <span className=\"shrink-0 text-sm text-foreground\">\n          {supportingText}\n        </span>\n      ) : null}\n    </div>\n  );\n}\nDataTableProgressCell.displayName = 'DataTableCell.Progress';\n\nexport type DataTableTrendSentiment = 'positive' | 'negative' | 'neutral';\n\nexport interface DataTableTrendCellProps\n  extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {\n  value: number;\n  sentiment?: DataTableTrendSentiment;\n  showIcon?: boolean;\n  formatValue?: (value: number) => React.ReactNode;\n}\n\nfunction DataTableTrendCell({\n  className,\n  value,\n  sentiment = getSentiment(value),\n  showIcon = true,\n  formatValue = formatTrendValue,\n  ...props\n}: DataTableTrendCellProps): React.JSX.Element {\n  const Icon: LucideIcon | null =\n    sentiment === 'positive'\n      ? ArrowUp\n      : sentiment === 'negative'\n        ? ArrowDown\n        : null;\n  const tone =\n    sentiment === 'positive'\n      ? 'text-success'\n      : sentiment === 'negative'\n        ? 'text-destructive'\n        : 'text-secondary-foreground';\n\n  return (\n    <span\n      data-slot=\"data-table-cell-trend\"\n      className={cn(\n        'inline-flex items-center gap-1 text-sm font-medium',\n        tone,\n        className,\n      )}\n      {...props}\n    >\n      {showIcon && Icon ? <Icon className=\"size-3\" aria-hidden=\"true\" /> : null}\n      {formatValue(value)}\n    </span>\n  );\n}\nDataTableTrendCell.displayName = 'DataTableCell.Trend';\n\nexport interface DataTableSparklineCellProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  data: React.ComponentProps<typeof SparklineChart>['data'];\n  color?: React.ComponentProps<typeof SparklineChart>['color'];\n  width?: number;\n  height?: number;\n}\n\nfunction DataTableSparklineCell({\n  className,\n  data,\n  color = 'primary',\n  width = 108,\n  height = 24,\n  ...props\n}: DataTableSparklineCellProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"data-table-cell-sparkline\"\n      className={cn('flex items-center', className)}\n      {...props}\n    >\n      <SparklineChart data={data} color={color} width={width} height={height} />\n    </div>\n  );\n}\nDataTableSparklineCell.displayName = 'DataTableCell.Sparkline';\n\nexport type DataTableRatingCellProps = React.ComponentPropsWithoutRef<\n  typeof Rating\n>;\n\nfunction DataTableRatingCell({\n  className,\n  size = 'md',\n  ...props\n}: DataTableRatingCellProps): React.JSX.Element {\n  return (\n    <Rating\n      data-slot=\"data-table-cell-rating\"\n      className={className}\n      size={size}\n      {...props}\n    />\n  );\n}\nDataTableRatingCell.displayName = 'DataTableCell.Rating';\n\nexport type DataTableSwitchCellProps = Omit<SwitchProps, 'ref'>;\n\nfunction DataTableSwitchCell(\n  props: DataTableSwitchCellProps,\n): React.JSX.Element {\n  return <Switch data-slot=\"data-table-cell-switch\" size=\"sm\" {...props} />;\n}\nDataTableSwitchCell.displayName = 'DataTableCell.Switch';\n\nexport type DataTableCellAction = {\n  label: string;\n  children?: React.ReactNode;\n  icon?: React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  appearance?: React.ComponentProps<typeof Button>['appearance'];\n  variant?: React.ComponentProps<typeof Button>['variant'];\n  size?: React.ComponentProps<typeof Button>['size'];\n  iconOnly?: boolean;\n  className?: string;\n};\n\nexport interface DataTableActionsCellProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  actions: DataTableCellAction[];\n}\n\nfunction DataTableActionsCell({\n  className,\n  actions,\n  ...props\n}: DataTableActionsCellProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"data-table-cell-actions\"\n      className={cn('flex items-center justify-end gap-1', className)}\n      {...props}\n    >\n      {actions.map((action) => {\n        const iconOnly = action.iconOnly ?? !action.children;\n        const size = getActionButtonSize({\n          children: action.children,\n          icon: action.icon,\n          iconOnly,\n          size: action.size,\n        });\n\n        return (\n          <Button\n            key={action.label}\n            appearance={action.appearance ?? 'ghost'}\n            variant={action.variant ?? 'secondary'}\n            size={size}\n            iconOnly={iconOnly}\n            aria-label={action.label}\n            onClick={action.onClick}\n            className={cn(dataTableTouchTargetClassName, action.className)}\n          >\n            {action.icon ?? action.children ?? <MoreHorizontal />}\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\nDataTableActionsCell.displayName = 'DataTableCell.Actions';\n\nconst DataTableCell = Object.assign(DataTableCellRoot, {\n  Root: DataTableCellRoot,\n  Text: DataTableTextCell,\n  Avatar: DataTableAvatarCell,\n  Badges: DataTableBadgesCell,\n  Progress: DataTableProgressCell,\n  Trend: DataTableTrendCell,\n  Sparkline: DataTableSparklineCell,\n  Rating: DataTableRatingCell,\n  Switch: DataTableSwitchCell,\n  Actions: DataTableActionsCell,\n});\n\nexport {\n  DataTableActionsCell,\n  DataTableAvatarCell,\n  DataTableBadgesCell,\n  DataTableCell,\n  DataTableCellRoot,\n  DataTableProgressCell,\n  DataTableRatingCell,\n  DataTableSparklineCell,\n  DataTableSwitchCell,\n  DataTableTextCell,\n  DataTableTrendCell,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index189.js","names":[],"sources":["../src/components/organisms/content/DataTable/DataTableHitArea.ts"],"sourcesContent":["export const dataTableTouchTargetClassName =\n  'relative before:absolute before:left-1/2 before:top-1/2 before:h-full before:min-h-11 before:w-full before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-[inherit] before:content-[\"\"]';\n"],"mappings":";AAAA,IAAa,gCACX"}