+ children: React.ReactNode
+}) => {
+ const mergedTheme: Theme = merge({}, defaultTheme, theme)
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/components/theme/defaultTheme.js b/src/theme/defaultTheme.ts
similarity index 95%
rename from src/components/theme/defaultTheme.js
rename to src/theme/defaultTheme.ts
index e73b733..120aaee 100644
--- a/src/components/theme/defaultTheme.js
+++ b/src/theme/defaultTheme.ts
@@ -1,4 +1,4 @@
-export default {
+export const defaultTheme = {
prefix: '',
radius: 'rounded',
spacing: {
@@ -36,7 +36,7 @@ export default {
body: 'gray-900',
link: 'blue-600',
linkDark: 'blue-800',
- emphasis: 'black',
+ emphasas: 'black',
on: {
primary: 'white',
secondary: 'white',
diff --git a/src/components/tailwind/getColorShade.js b/src/theme/getColorShade.ts
similarity index 60%
rename from src/components/tailwind/getColorShade.js
rename to src/theme/getColorShade.ts
index 39d92cf..c002de7 100644
--- a/src/components/tailwind/getColorShade.js
+++ b/src/theme/getColorShade.ts
@@ -1,12 +1,17 @@
const shades = ['100', '200', '300', '400', '500', '600', '700', '800', '900']
-export default (color, offset = 1) => {
- if (!color) {
- return false
- }
- if (offset === 0) return color
+export const getColorShade = (
+ color?: string | string[],
+ offset: string | number = 1,
+): string => {
+ if (!color) return ''
+
+ let currentColor: string | string[] = Array.isArray(color) ? color[0] : color
+
+ if (offset === 0) return currentColor
- let currentColor = color === 'white' ? ['gray', '100'] : color.split('-')
+ currentColor =
+ currentColor === 'white' ? ['gray', '100'] : currentColor.split('-')
let shadeOffset = offset
if (color === 'white') {
@@ -14,7 +19,7 @@ export default (color, offset = 1) => {
if (shadeOffset === 1) return 'gray-100'
currentColor = ['gray', '100']
- if (typeof shadeOffset === 'number') shadeOffset = offset - 1
+ if (typeof offset === 'number') shadeOffset = offset - 1
}
if (currentColor.length === 1) {
diff --git a/src/theme/index.ts b/src/theme/index.ts
new file mode 100644
index 0000000..9aa6343
--- /dev/null
+++ b/src/theme/index.ts
@@ -0,0 +1,6 @@
+export * from './defaultTheme'
+export * from './TailwindTheme'
+export * from './TailwindThemeProvider'
+export * from './withTheme'
+export * from './useThemeValue'
+export * from './getColorShade'
diff --git a/src/theme/useThemeValue.ts b/src/theme/useThemeValue.ts
new file mode 100644
index 0000000..9c2f6dd
--- /dev/null
+++ b/src/theme/useThemeValue.ts
@@ -0,0 +1,13 @@
+import { tailwindPropToClassName } from 'tailwind-react-primitives'
+
+export const useThemeValue = (
+ prefix: string,
+ value: unknown,
+ userClassNames = '',
+) => {
+ if (userClassNames.includes(prefix)) {
+ return false
+ }
+
+ return tailwindPropToClassName(prefix, value)
+}
diff --git a/src/theme/withTheme.tsx b/src/theme/withTheme.tsx
new file mode 100644
index 0000000..de04d87
--- /dev/null
+++ b/src/theme/withTheme.tsx
@@ -0,0 +1,26 @@
+import type { Theme } from './TailwindTheme'
+
+import React from 'react'
+
+import { TailwindTheme } from './TailwindTheme'
+
+export interface WithTheme {
+ theme: Theme
+}
+
+export const withTheme = >(
+ Component: React.FC
,
+) => {
+ const WithTheme: React.FC> = (props) => (
+
+ {(theme) => {
+ // @ts-ignore FIXME: Constraint error
+ return
+ }}
+
+ )
+
+ WithTheme.displayName = `WithTheme(${Component.displayName})`
+
+ return WithTheme
+}
diff --git a/src/tools/TailwindReactExtractor.js b/src/tools/TailwindReactExtractor.js
deleted file mode 100644
index 1c0b99b..0000000
--- a/src/tools/TailwindReactExtractor.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/* eslint-disable no-useless-escape */
-import {
- tailwindProps,
- propVariants,
- getColorShade,
-} from '../components/tailwind'
-
-export const classRegex = /[A-Za-z0-9-_:\/]+/g
-
-// TODO: Array values
-const propRegex = {
- singleValue: prop =>
- new RegExp(
- `[ \n\r\t]${prop}(?:-[A-Za-z]+)?=["'{}][A-Za-z0-9-_:\/]+["'}]`,
- 'g',
- ),
- booleanValue: prop =>
- new RegExp(`[ \n\r\t]${prop}(?:-[A-Za-z]+)?(?:[ \n\r]|>)`, 'g'),
- objectValue: prop =>
- new RegExp(
- `[ \n\r\t]${prop}(?:-[A-Za-z]+)?={{ ?[A-Za-z0-9-_:\/ '",]+ ?}}`,
- 'g',
- ),
-}
-
-const transformations = {
- 'w-auto': 'flex-1',
-}
-
-export default class TailwindReactExtractor {
- static extract(content) {
- let classNames = []
-
- tailwindProps.forEach(prop => {
- let matches = [
- ...(content.match(propRegex.singleValue(prop)) || []),
- ...(content.match(propRegex.booleanValue(prop)) || []),
- ]
-
- let objMatches = content.match(propRegex.objectValue(prop)) || []
-
- if (objMatches.length) {
- objMatches = objMatches.reduce(
- (array, match) => [
- ...array,
- ...match
- .replace(/\s/g, '')
- .replace(`${prop}=`, '')
- .replace(/[{}'"]/g, '')
- .split(',')
- .map(objProp => {
- const classFragments = objProp.split(':')
- const key = classFragments[0]
- return key.length === 1
- ? `${prop}${key}-${classFragments[1]}`
- : `${prop}${key === 'def' ? '' : `-${classFragments[0]}`}-${
- classFragments[1]
- }`
- }),
- ],
- [],
- )
- matches = matches.concat(objMatches)
- }
-
- classNames = classNames
- .concat(
- matches
- .map(match =>
- match
- .replace(/[\s"'{}>]/g, '')
- .replace('=', '-')
- .replace(/[A-Z]/g, '-$&')
- .toLowerCase(),
- )
- .reduce((classes, match) => {
- let className = [match]
- propVariants.forEach(variant => {
- if (match.includes(variant)) {
- className = match.replace(`-${variant}`, '')
- className =
- variant === 'hocus'
- ? [`hover:${className}`, `focus:${className}`]
- : [`${variant}:${className}`]
- }
- })
-
- if (
- (prop === 'bg' || prop === 'text') &&
- className[0].indexOf(':') === -1
- ) {
- // TODO: Determine if prop value is a colour
- const baseColor = className[0].replace(`${prop}-`, '')
- const highlightColor = getColorShade(baseColor)
-
- className = [
- match,
- `hover:${prop}-${baseColor}`,
- `focus:${prop}-${baseColor}`,
- `hover:${prop}-${highlightColor}`,
- `focus:${prop}-${highlightColor}`,
- ]
-
- if (prop === 'bg') {
- className.push(
- `hover:${prop}-${getColorShade(baseColor, '100')}`,
- `focus:${prop}-${getColorShade(baseColor, '100')}`,
- )
- }
- }
-
- return [...classes, ...className]
- }, []),
- )
- .map(className => {
- if (className.indexOf(':') !== -1) {
- const classFragments = className.split(':')
-
- return transformations[classFragments[1]]
- ? `${classFragments[0]}:${transformations[classFragments[1]]}`
- : className
- }
-
- return transformations[className] || className
- })
- })
-
- return [...classNames, ...(content.match(classRegex) || [])].filter(
- (className, index, array) => array.indexOf(className) === index,
- )
- }
-}
diff --git a/src/tools/getThemeWhitelist.js b/src/tools/getThemeWhitelist.js
deleted file mode 100644
index e1ae0ae..0000000
--- a/src/tools/getThemeWhitelist.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import merge from 'lodash.merge'
-import { defaultTheme } from '../components/theme'
-
-const mapObject = (obj, prefix) =>
- Object.keys(obj).map(key => `${prefix}-${obj[key]}`)
-
-const mapArray = (arr, prefix) => arr.map(value => `${prefix}-${value}`)
-
-const reduceMultiple = (obj, prefixes, suffixes) =>
- Object.keys(obj).reduce((arr, key) => {
- if (typeof obj[key] === 'object') {
- return [...arr, ...reduceMultiple(obj[key], prefixes)]
- }
-
- if (suffixes) {
- const baseClass =
- obj[key].indexOf('-') !== -1 ? obj[key].split('-')[0] : obj[key]
- return [
- ...arr,
- ...prefixes.reduce(
- (classes, prefix) => [
- ...classes,
- ...suffixes
- .map(suffix => (suffix !== '' ? `-${suffix}` : ''))
- .map(suffix => `${prefix}-${baseClass}${suffix}`),
- ],
- [],
- ),
- ]
- }
-
- return [...arr, ...prefixes.map(prefix => `${prefix}-${obj[key]}`)]
- }, [])
-
-const colorPrefixes = [
- 'bg',
- 'border',
- 'text',
- 'hover:bg',
- 'hover:border',
- 'hover:text',
- 'focus:bg',
- 'focus:border',
- 'focus:text',
-]
-
-const colorSuffixes = [
- '100',
- '200',
- '300',
- '400',
- '500',
- '600',
- '700',
- '800',
- '900',
-]
-
-export default (projectTheme = {}) => {
- const theme = merge({}, defaultTheme, projectTheme)
-
- return [
- theme.radius,
- ...reduceMultiple(theme.spacing, [
- 'mt',
- 'mb',
- 'mr',
- '-ml',
- '-mr',
- 'p-',
- 'pl-',
- 'px-',
- 'py-',
- ]),
- ...mapObject(theme.container, 'max-w'),
- ...mapArray(theme.text.size.body, 'text'),
- ...mapArray(theme.text.size.title, 'text'),
- ...mapObject(theme.text.family, 'font'),
- ...reduceMultiple(theme.brandColors, colorPrefixes, colorSuffixes),
- ...reduceMultiple(theme.textColors, colorPrefixes),
- ].filter((className, index, self) => self.indexOf(className) === index)
-}
diff --git a/src/tools/getWhitelist.js b/src/tools/getWhitelist.js
deleted file mode 100644
index 2947a1f..0000000
--- a/src/tools/getWhitelist.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import getThemeWhitelist from './getThemeWhitelist'
-import renderComponentsToString from './renderComponentsToString'
-
-import { classRegex } from './TailwindReactExtractor'
-
-export default (projectTheme = {}, projectWhitelist = []) => {
- const components = renderComponentsToString(projectTheme)
- // eslint-disable-next-line no-useless-escape
- const componentWhitelist = components.match(classRegex) || []
-
- return [
- ...componentWhitelist,
- ...getThemeWhitelist(projectTheme),
- ...projectWhitelist,
- ].filter((className, index, array) => array.indexOf(className) === index)
-}
diff --git a/src/tools/index.js b/src/tools/index.js
deleted file mode 100644
index bc53eef..0000000
--- a/src/tools/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as renderComponentsToString } from './renderComponentsToString'
-export { default as getThemeWhitelist } from './getThemeWhitelist'
-export { default as getWhitelist } from './getWhitelist'
-export { default as TailwindReactExtractor } from './TailwindReactExtractor'
diff --git a/src/tools/renderComponentsToString.jsx b/src/tools/renderComponentsToString.jsx
deleted file mode 100644
index d888dc8..0000000
--- a/src/tools/renderComponentsToString.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import * as lib from '..'
-
-export default (projectTheme = {}) => {
- const { TailwindThemeProvider } = lib
-
- return ReactDOMServer.renderToStaticMarkup(
-
- {Object.keys(lib).map(key => {
- if (/^[a-z]/.test(key) || key.startsWith('TailwindTheme')) {
- return false
- }
-
- const Component = lib[key]
-
- return
- })}
- ,
- )
-}
diff --git a/src/components/typography/BrandText.md b/src/typography/BrandText.md
similarity index 100%
rename from src/components/typography/BrandText.md
rename to src/typography/BrandText.md
diff --git a/src/typography/BrandText.tsx b/src/typography/BrandText.tsx
new file mode 100644
index 0000000..2f2d77d
--- /dev/null
+++ b/src/typography/BrandText.tsx
@@ -0,0 +1,47 @@
+import type { ParagraphProps } from './Paragraph'
+import type { WithTheme } from '../theme'
+
+import React from 'react'
+
+import { withTheme, getColorShade } from '../theme'
+
+import { RawParagraph as Paragraph } from './Paragraph'
+
+export interface BrandTextProps
+ extends WithTheme,
+ ParagraphProps {
+ type: 'danger' | 'info' | 'warning'
+ textOnly?: boolean
+}
+
+export const RawBrandText = ({
+ theme,
+ textOnly,
+ type,
+ size,
+ ...rest
+}: BrandTextProps) => {
+ const alertProps = !textOnly
+ ? {
+ bg: getColorShade(theme.brandColors[type], '100'),
+ border: [`l-${theme.accentSize}`, theme.brandColors[type]],
+ p: { x: theme.spacing.md, y: theme.spacing.sm },
+ text: theme.textColors.body,
+ rounded: 'r',
+ }
+ : {}
+
+ return (
+
+ {...rest}
+ theme={theme}
+ size={size}
+ rounded={theme.radius}
+ text={getColorShade(theme.brandColors[type], 1)}
+ m={{ b: theme.spacing.sm }}
+ {...alertProps}
+ />
+ )
+}
+
+export const BrandText = withTheme(RawBrandText)
diff --git a/src/typography/DangerText.md b/src/typography/DangerText.md
new file mode 100644
index 0000000..896cc00
--- /dev/null
+++ b/src/typography/DangerText.md
@@ -0,0 +1,8 @@
+```jsx
+import { DangerText } from 'tailwind-react-ui'
+;<>
+ Simple danger text
+
+ Simple danger text
+
+```
diff --git a/src/typography/DangerText.tsx b/src/typography/DangerText.tsx
new file mode 100644
index 0000000..be0c495
--- /dev/null
+++ b/src/typography/DangerText.tsx
@@ -0,0 +1,13 @@
+import type { BrandTextProps } from './BrandText'
+
+import React from 'react'
+import { BrandText } from './BrandText'
+
+export type DangerTextProps = Omit
+
+/**
+ * @see See [BrandText](#brandtext) for API. Sets `type` prop to `danger`.
+ */
+export const DangerText = ({ size = 1, ...props }: DangerTextProps) => (
+
+)
diff --git a/src/typography/InfoText.md b/src/typography/InfoText.md
new file mode 100644
index 0000000..217ac84
--- /dev/null
+++ b/src/typography/InfoText.md
@@ -0,0 +1,10 @@
+```jsx
+import { InfoText } from 'tailwind-react-ui'
+;<>
+ Simple info text
+
+
+ Simple info text
+
+
+```
diff --git a/src/typography/InfoText.tsx b/src/typography/InfoText.tsx
new file mode 100644
index 0000000..5f7ca56
--- /dev/null
+++ b/src/typography/InfoText.tsx
@@ -0,0 +1,13 @@
+import type { BrandTextProps } from './BrandText'
+
+import React from 'react'
+import { BrandText } from './BrandText'
+
+export type InfoTextProps = Omit
+
+/**
+ * @see See [BrandText](#brandtext) for API. Sets `type` prop to `info`.
+ */
+export const InfoText = (props: InfoTextProps) => (
+
+)
diff --git a/src/typography/Paragraph.md b/src/typography/Paragraph.md
new file mode 100644
index 0000000..b406f9f
--- /dev/null
+++ b/src/typography/Paragraph.md
@@ -0,0 +1,14 @@
+```jsx
+import { Paragraph } from 'tailwind-react-ui'
+;<>
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+
+```
diff --git a/src/typography/Paragraph.test.tsx b/src/typography/Paragraph.test.tsx
new file mode 100644
index 0000000..30c0b76
--- /dev/null
+++ b/src/typography/Paragraph.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { render, RenderResult } from '@testing-library/react'
+
+import { RawParagraph as Paragraph } from './Paragraph'
+import { defaultTheme } from '../theme'
+
+const setup = (
+ testProps = {},
+): [RenderResult, { props: Record }] => {
+ const props = Object.assign({ theme: defaultTheme }, testProps)
+
+ const wrapper = render(
+ Lorem ipsum dolor sit amet,
+ )
+
+ return [
+ wrapper,
+ {
+ props,
+ },
+ ]
+}
+
+describe('Paragraph', () => {
+ it('renders matching snapshot', () => {
+ const [{ asFragment }] = setup({ as: 'p' })
+
+ expect(asFragment()).toMatchSnapshot()
+ })
+})
diff --git a/src/typography/Paragraph.tsx b/src/typography/Paragraph.tsx
new file mode 100644
index 0000000..a17b90e
--- /dev/null
+++ b/src/typography/Paragraph.tsx
@@ -0,0 +1,43 @@
+import type { TextProps } from 'tailwind-react-primitives'
+import type { WithTheme } from '../theme'
+
+import React from 'react'
+import { RawText as Text, getAsArray } from 'tailwind-react-primitives'
+
+import { withTheme } from '../theme'
+
+export interface ParagraphProps
+ extends WithTheme,
+ Omit, 'size'> {
+ lead?: boolean
+ size?: number
+}
+
+export const RawParagraph = ({
+ theme,
+ children,
+ as = 'p',
+ size,
+ lead,
+ text,
+ ...rest
+}: ParagraphProps) => (
+
+ as={as}
+ text={
+ [
+ (size || lead) &&
+ theme.text.size.body[
+ (lead ? theme.text.size.body.length : size) ?? 2 - 1
+ ],
+ ...getAsArray(text),
+ ].filter(Boolean) as string[]
+ }
+ m={{ b: theme.spacing.md }}
+ {...rest}
+ >
+ {children}
+
+)
+
+export const Paragraph = withTheme(RawParagraph)
diff --git a/src/typography/Subtitle.md b/src/typography/Subtitle.md
new file mode 100644
index 0000000..f21b040
--- /dev/null
+++ b/src/typography/Subtitle.md
@@ -0,0 +1,11 @@
+```jsx
+import { Subtitle } from 'tailwind-react-ui'
+;<>
+ Subtitle 6
+ Subtitle 5
+ Subtitle 4
+ Subtitle 3
+ Subtitle 2
+ Subtitle 1
+
+```
diff --git a/src/typography/Subtitle.test.tsx b/src/typography/Subtitle.test.tsx
new file mode 100644
index 0000000..12a66be
--- /dev/null
+++ b/src/typography/Subtitle.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { render, RenderResult } from '@testing-library/react'
+
+import { RawSubtitle as Subtitle } from '.'
+
+const setup = (
+ testProps = {},
+): [RenderResult, { props: Record }] => {
+ const props = Object.assign({}, testProps)
+
+ const wrapper = render(Subtitle)
+
+ return [
+ wrapper,
+ {
+ props,
+ },
+ ]
+}
+
+describe('Subtitle', () => {
+ it('renders matching snapshot', () => {
+ const [{ asFragment }] = setup({ size: 3 })
+
+ expect(asFragment()).toMatchSnapshot()
+ })
+})
diff --git a/src/typography/Subtitle.tsx b/src/typography/Subtitle.tsx
new file mode 100644
index 0000000..2a14dbe
--- /dev/null
+++ b/src/typography/Subtitle.tsx
@@ -0,0 +1,15 @@
+import type { TitleProps } from './Title'
+
+import React from 'react'
+import { Title } from './Title'
+
+export type SubtitleProps = Omit
+
+/**
+ * @see See [Title](#title) for prop type definitions. Sets `subtitle` to `true`.
+ */
+export const RawSubtitle = (props: SubtitleProps) => (
+
+)
+
+export const Subtitle = RawSubtitle
diff --git a/src/typography/Title.md b/src/typography/Title.md
new file mode 100644
index 0000000..d1933a4
--- /dev/null
+++ b/src/typography/Title.md
@@ -0,0 +1,11 @@
+```jsx
+import { Title } from 'tailwind-react-ui'
+;<>
+ Title 6
+ Title 5
+ Title 4
+ Title 3
+ Title 2
+ Title 1
+
+```
diff --git a/src/typography/Title.test.tsx b/src/typography/Title.test.tsx
new file mode 100644
index 0000000..e98ddfc
--- /dev/null
+++ b/src/typography/Title.test.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { render, RenderResult } from '@testing-library/react'
+
+import { RawTitle as Title } from './Title'
+import { defaultTheme } from '../theme'
+
+const setup = (
+ testProps = {},
+): [RenderResult, { props: Record }] => {
+ const props = Object.assign({ theme: defaultTheme }, testProps)
+
+ const wrapper = render(Title)
+
+ return [
+ wrapper,
+ {
+ props,
+ },
+ ]
+}
+
+describe('Title', () => {
+ it('renders matching snapshot', () => {
+ const [{ asFragment }] = setup({ size: 3 })
+
+ expect(asFragment()).toMatchSnapshot()
+ })
+})
diff --git a/src/typography/Title.tsx b/src/typography/Title.tsx
new file mode 100644
index 0000000..9101354
--- /dev/null
+++ b/src/typography/Title.tsx
@@ -0,0 +1,61 @@
+import type { TextProps } from 'tailwind-react-primitives'
+import type { WithTheme } from '../theme'
+
+import React from 'react'
+
+import { RawText as Text } from 'tailwind-react-primitives'
+import { withTheme } from '../theme'
+
+export interface TitleProps
+ extends WithTheme,
+ Omit, 'size'> {
+ subtitle?: boolean
+ flush?: boolean
+ level?: number
+ size?: number
+}
+
+export const RawTitle = ({
+ theme,
+ children,
+ as = 'h1',
+ size = 4,
+ subtitle,
+ flush,
+ level = 1,
+ ...rest
+}: TitleProps) => {
+ const hLevel = level || Math.max(7 - size, 1)
+ const element: TitleProps['as'] = as || `h${hLevel}`
+
+ let ariaProps: TextProps = {}
+
+ if (!subtitle && typeof element === 'string' && !/h[1-6]/i.test(element)) {
+ ariaProps = {
+ 'role': 'heading',
+ 'aria-level': hLevel,
+ }
+ }
+
+ return (
+
+ as={element}
+ {...ariaProps}
+ leading="tight"
+ font={[
+ theme.text.family[subtitle ? 'subtitle' : 'title'],
+ subtitle ? 'medium' : 'bold',
+ ]}
+ text={[
+ theme.text.size.title[size - 1],
+ subtitle ? theme.textColors.body : theme.textColors.emphasas,
+ ]}
+ m={!flush ? { b: theme.spacing.md } : undefined}
+ {...rest}
+ >
+ {children}
+
+ )
+}
+
+export const Title = withTheme(RawTitle)
diff --git a/src/typography/WarningText.md b/src/typography/WarningText.md
new file mode 100644
index 0000000..b0e323b
--- /dev/null
+++ b/src/typography/WarningText.md
@@ -0,0 +1,8 @@
+```jsx
+import { WarningText } from 'tailwind-react-ui'
+;<>
+ Simple warning text
+
+ Simple warning text
+
+```
diff --git a/src/typography/WarningText.tsx b/src/typography/WarningText.tsx
new file mode 100644
index 0000000..92f8f23
--- /dev/null
+++ b/src/typography/WarningText.tsx
@@ -0,0 +1,13 @@
+import type { BrandTextProps } from './BrandText'
+
+import React from 'react'
+import { BrandText } from './BrandText'
+
+export type WarningTextProps = Omit
+
+/**
+ * @see See [BrandText](#brandtext) for API. Sets `type` prop to `warning`.
+ */
+export const WarningText = (props: WarningTextProps) => (
+
+)
diff --git a/src/typography/__snapshots__/Paragraph.test.tsx.snap b/src/typography/__snapshots__/Paragraph.test.tsx.snap
new file mode 100644
index 0000000..3591d2b
--- /dev/null
+++ b/src/typography/__snapshots__/Paragraph.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paragraph renders matching snapshot 1`] = `
+
+
+ Lorem ipsum dolor sit amet
+
+
+`;
diff --git a/src/typography/__snapshots__/Subtitle.test.tsx.snap b/src/typography/__snapshots__/Subtitle.test.tsx.snap
new file mode 100644
index 0000000..dc5b773
--- /dev/null
+++ b/src/typography/__snapshots__/Subtitle.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Subtitle renders matching snapshot 1`] = `
+
+
+ Subtitle
+
+
+`;
diff --git a/src/typography/__snapshots__/Title.test.tsx.snap b/src/typography/__snapshots__/Title.test.tsx.snap
new file mode 100644
index 0000000..c8f7c50
--- /dev/null
+++ b/src/typography/__snapshots__/Title.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Title renders matching snapshot 1`] = `
+
+
+ Title
+
+
+`;
diff --git a/src/typography/index.ts b/src/typography/index.ts
new file mode 100644
index 0000000..8991e21
--- /dev/null
+++ b/src/typography/index.ts
@@ -0,0 +1,8 @@
+export * from './Subtitle'
+export * from './Paragraph'
+export * from './Title'
+
+export * from './BrandText'
+export * from './DangerText'
+export * from './InfoText'
+export * from './WarningText'
diff --git a/src/utils/getUniqueID.ts b/src/utils/getUniqueID.ts
new file mode 100644
index 0000000..d91ec3b
--- /dev/null
+++ b/src/utils/getUniqueID.ts
@@ -0,0 +1,3 @@
+import uniqueId from 'lodash.uniqueid'
+
+export const getUniqueID = (prefix: string) => uniqueId(`${prefix}-`)
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..28ad45b
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './getUniqueID'
+export * from './withTransition'
diff --git a/src/utils/withTransition.tsx b/src/utils/withTransition.tsx
new file mode 100644
index 0000000..a972e1d
--- /dev/null
+++ b/src/utils/withTransition.tsx
@@ -0,0 +1,29 @@
+import type {
+ TransitionProps,
+ TransitionStatus as RtgTransitionStatus,
+} from 'react-transition-group/Transition'
+
+import React from 'react'
+import { Transition } from 'react-transition-group'
+import get from 'lodash.get'
+
+export type TransitionStatus = RtgTransitionStatus
+
+export interface WithTransition {
+ transition?: TransitionStatus
+}
+
+export const withTransition = >(
+ Component: React.FC
,
+ { inState, ...rest }: { inState: string } & Partial,
+) => {
+ const WithTransition: React.FC = (componentProps) => (
+
+ {(state) => }
+
+ )
+
+ WithTransition.displayName = `WithTransition(${Component.displayName})`
+
+ return WithTransition
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 78a8d21..9868401 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,4 @@
-const plugins = require('./src/plugins')
+const plugins = require('./plugins')
module.exports = {
future: {
diff --git a/tools/index.js b/tools/index.js
new file mode 100644
index 0000000..b584cbc
--- /dev/null
+++ b/tools/index.js
@@ -0,0 +1 @@
+module.exports = require('tailwind-react-primitives/tools')
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..acc9ad8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,38 @@
+{
+ "include": ["src", "types"],
+ "exclude": [
+ "node_modules",
+ "**/*.spec.ts",
+ "**/*.test.ts",
+ "**/*.spec.tsx",
+ "**/*.test.tsx"
+ ],
+ "compilerOptions": {
+ "target": "es2019",
+ "module": "esnext",
+ "lib": ["dom", "esnext"],
+ "importHelpers": true,
+ "declaration": false,
+ "sourceMap": true,
+ "rootDir": "./",
+ "strict": true,
+ "noImplicitAny": true,
+ "strictNullChecks": true,
+ "strictFunctionTypes": true,
+ "strictPropertyInitialization": true,
+ "noImplicitThis": true,
+ "alwaysStrict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "baseUrl": "./",
+ "paths": {
+ "*": ["src/*", "node_modules/*"]
+ },
+ "jsx": "react",
+ "esModuleInterop": true
+ }
+}