@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 1.95 kB
Source Map (JSON)
{"version":3,"sources":["../src/badge/badge.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n children: React.ReactNode;\n\n /**\n * Color of the badge\n *\n * @default \"lighter\"\n */\n variant?: \"lighter\" | \"darker\" | \"white\" | \"warning\";\n\n /**\n * Font size of the badge\n *\n * @default \"small\"\n */\n size?: \"small\" | \"smaller\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Badges are used to label, categorize or organize items using keywords to describe them.\n *\n * @example\n *\n * ```tsx\n * <Badge variant=\"darker\">Darker</Badge>\n * ```\n *\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n ({ children, asChild, variant = \"lighter\", size = \"small\", className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n ref={ref}\n className={clsx(\n \"hds-badge\",\n `hds-badge--${size}`,\n `hds-badge--${variant}`,\n className as undefined,\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nBadge.displayName = \"Badge\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAyCrB;AAJC,IAAM,QAAQ;AAAA,EACnB,CAAC,IAAgF,QAAQ;AAAxF,iBAAE,YAAU,SAAS,UAAU,WAAW,OAAO,SAAS,UAxC7D,IAwCG,IAAwE,iBAAxE,IAAwE,CAAtE,YAAU,WAAS,WAAqB,QAAgB;AACzD,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,cAAc,IAAI;AAAA,UAClB,cAAc,OAAO;AAAA,UACrB;AAAA,QACF;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":[]}