@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 4.54 kB
Source Map (JSON)
{"version":3,"sources":["../src/text/text.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment -- Typings for the differnt html elements */\n/* eslint-disable @typescript-eslint/no-explicit-any -- Typings for the differnt html elements */\n\nimport React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype HeadingProps =\n | {\n variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n asChild: true;\n as?: never;\n }\n | {\n variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n as: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n asChild?: never;\n };\n\ninterface ParagraphProps {\n variant?:\n | \"body\"\n | \"body-title\"\n | \"body-small\"\n | \"body-small-title\"\n | \"technical\"\n | \"technical-title\"\n | \"caption\"\n | \"caption-title\";\n}\n\nexport type TextProps = {\n children: React.ReactNode;\n\n /**\n * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.\n *\n * But you can lock it to either the min or the max size.\n *\n * @default \"fluid\"\n */\n size?: \"min\" | \"max\" | \"fluid\";\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 * Convienence prop to change the rendered element.\n *\n * Use {@link TextProps.asChild} if you need more control of the rendered element.\n */\n as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n\n /**\n * 🚧 Experimental spacing\n */\n _unstableSpacing?: boolean;\n} & (HeadingProps | ParagraphProps) &\n React.HTMLAttributes<HTMLParagraphElement | HTMLHeadingElement>;\n\nconst defaultHTMLTag: Record<NonNullable<TextProps[\"variant\"]>, `h${1 | 2 | 3}` | \"p\"> = {\n \"h1-display\": \"h1\",\n h1: \"h1\",\n h2: \"h2\",\n h3: \"h3\",\n \"h3-title\": \"h3\",\n body: \"p\",\n \"body-title\": \"p\",\n \"body-small\": \"p\",\n \"body-small-title\": \"p\",\n technical: \"p\",\n \"technical-title\": \"p\",\n caption: \"p\",\n \"caption-title\": \"p\",\n};\n\n/**\n * Text component\n *\n * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` or `asChild` prop is required.\n *\n * This is to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`\n *\n * @example\n * ```tsx\n * <Text variant=\"h1-display\" as=\"h1\">Hello world</Text>\n * <Text variant=\"body\">\n * This is a body text\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLParagraphElement | HTMLHeadingElement, TextProps>(\n (\n {\n as: Tag,\n asChild,\n variant = \"body\",\n size = \"fluid\",\n _unstableSpacing: spacing,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag ?? defaultHTMLTag[variant];\n const sizeModifier =\n size !== \"fluid\" && variant !== \"caption\" && variant !== \"caption-title\" && size;\n return (\n <Component\n className={clsx(\n `hds-text-${variant}`,\n sizeModifier && `hds-text--${sizeModifier}`,\n spacing && \"hds-text--spacing\",\n className as undefined,\n )}\n ref={ref as any}\n {...(rest as any)}\n >\n {children}\n </Component>\n );\n },\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;;AAGA,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,YAAY;AA4Gf;AAjDN,IAAM,iBAAmF;AAAA,EACvF,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAiBO,IAAM,OAAO;AAAA,EAClB,CACE,IAUA,QACG;AAXH,iBACE;AAAA,UAAI;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IAxGN,IAiGI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO,oBAAO,eAAe,OAAO;AAChE,UAAM,eACJ,SAAS,WAAW,YAAY,aAAa,YAAY,mBAAmB;AAC9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,gBAAgB,aAAa,YAAY;AAAA,UACzC,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,SACK,OARN;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}