{"version":3,"file":"Badge.cjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Text } from '../Text'\n\ntype AbstractProps = PropsWithChildren<{\n  /** 件数 */\n  count?: number\n  /** 最大表示件数。この数を超えた場合は{最大表示件数+}と表示される */\n  overflowCount?: number\n  /** 0値を表示するかどうか */\n  showZero?: boolean\n  /** 色の種類 */\n  type?: VariantProps<typeof classNameGenerator>['color']\n  /** ドット表示するかどうか */\n  dot?: boolean\n}>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'span'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Badge shr-relative shr-inline-flex',\n    pill: ['shr-h-[1.75em] shr-min-w-[1.75em] shr-px-[0.5em] shr-tabular-nums'],\n    dotElement: ['shr-h-[0.625em] shr-w-[0.625em]'],\n  },\n  variants: {\n    color: {\n      grey: {},\n      blue: {},\n      yellow: {},\n      red: {},\n    },\n    withChildren: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    {\n      slots: ['pill', 'dotElement'],\n      className: [\n        'shr-box-border shr-flex shr-items-center shr-justify-center',\n        'shr-rounded-full',\n      ],\n    },\n    {\n      slots: ['pill', 'dotElement'],\n      withChildren: true,\n      className: [\n        'shr-absolute -shr-translate-y-1/2 shr-translate-x-1/2 [inset-block-start:0] [inset-inline-end:0]',\n      ],\n    },\n    {\n      slots: ['pill', 'dotElement'],\n      color: 'blue',\n      className: 'shr-bg-main',\n    },\n    {\n      slots: ['pill', 'dotElement'],\n      color: 'yellow',\n      className: 'shr-bg-warning-yellow',\n    },\n    {\n      slots: ['pill', 'dotElement'],\n      color: 'red',\n      className: 'shr-bg-danger',\n    },\n    {\n      slots: ['pill', 'dotElement'],\n      color: 'grey',\n      className: 'shr-bg-[theme(colors.grey.65)]',\n    },\n    {\n      slots: ['pill', 'dotElement'],\n      color: ['grey', 'blue', 'red'],\n      className: 'shr-shadow-[0_0_0_1px_theme(colors.white)]',\n    },\n    {\n      slots: ['pill', 'dotElement'],\n      color: 'yellow',\n      className: 'shr-shadow-[0_0_0_1px_theme(colors.black)]',\n    },\n    {\n      slots: ['pill'],\n      color: ['grey', 'blue', 'red'],\n      className: 'shr-text-white',\n    },\n    {\n      slots: ['pill'],\n      color: ['yellow'],\n      className: 'shr-text-black',\n    },\n  ],\n})\n\nexport const Badge = memo<Props>(({ count, showZero, dot, children, ...rest }) => {\n  // ドット表示の場合、数値表示は無いため、早期returnする\n  if (dot) {\n    return (\n      <ActualBadge {...rest} dot={dot}>\n        {children}\n      </ActualBadge>\n    )\n  }\n\n  const actualCount = count && count > 0 ? count : showZero ? 0 : undefined\n\n  // 0値を表示するでもない場合は何も表示しない\n  if (actualCount === undefined && !children) {\n    return null\n  }\n\n  return (\n    <ActualBadge {...rest} count={actualCount}>\n      {children}\n    </ActualBadge>\n  )\n})\n\nconst ActualBadge: FC<Omit<Props, 'showZero'>> = ({\n  count,\n  overflowCount,\n  type,\n  dot,\n  children,\n  className,\n  ...rest\n}) => {\n  // HINT: boolean化することでmemoが有効になる可能性を高くする\n  const withChildren = !!children\n  const classNames = useMemo(() => {\n    const { wrapper, pill, dotElement } = classNameGenerator({\n      color: type || 'blue',\n      withChildren,\n    })\n\n    return {\n      wrapper: wrapper({ className }),\n      pill: pill(),\n      dot: dotElement(),\n    }\n  }, [withChildren, type, className])\n\n  return (\n    <span {...rest} className={classNames.wrapper}>\n      {children}\n      {dot ? (\n        <Dot className={classNames.dot} />\n      ) : (\n        <CountText count={count} overflowCount={overflowCount} className={classNames.pill} />\n      )}\n    </span>\n  )\n}\n\nconst Dot = memo<{ className: string }>(({ className }) => <span className={className} />)\n\nconst CountText = memo<Pick<Props, 'count' | 'overflowCount'> & { className: string }>(\n  ({ count, overflowCount = 99, className }) =>\n    count !== undefined && (\n      <Text size=\"XS\" className={className}>\n        {count > overflowCount ? `${overflowCount}+` : count}\n      </Text>\n    ),\n)\n"],"names":["tv","memo","_jsx","useMemo","_jsxs","Text"],"mappings":"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"}