`](#quote)\n - [``](#pre)\n- [Serialization Elements](#serialization-elements)\n - [Primitives](#primitives)\n - [``](#num)\n - [Dates](#dates)\n - [``](#datetime)\n - [``](#date)\n - [``](#time)\n - [``](#year)\n - [``](#month)\n - [``](#day)\n - [``](#hour)\n - [``](#minute)\n - [``](#second)\n - [``](#millisecond)\n - [``](#duration)\n - [Objects](#objects)\n - [``](#json)\n - [``](#yaml)\n- [Utility Elements](#utility-elements)\n - [Casing](#casing)\n - [``](#upper)\n - [``](#lower)\n - [``](#capital)\n - [``](#title)\n - [Joins](#joins)\n - [`<lined>`](#lined)\n - [`<spaced>`](#spaced)\n - [`<csl>` (Comma Separated List)](#csl)\n - [`<union>`](#union)\n - [`<sectioned>`](#sectioned)\n - [Sets](#sets)\n - [`<and>`](#and)\n - [`<andor>`](#andor)\n - [`<or>`](#or)\n - [`<nor>`](#nor)\n - [Affixes](#affixes)\n - [`<trim>`](#trim)\n - [`<frame>`](#frame)\n - [Limiters](#limiters)\n - [`<cap>`](#cap)\n - [`<priority>`](#priority)\n\n<h2 id=\"exports\"><div align=\"right\"><a href=\"#top\">🔝</a></div>Exports</h2>\n\nThe following functions are also exported from Prxmpt:\n\n- [Rendering](#rendering)\n - [`createElement`](#createelement)\n - [`render`](#render)\n- [Children](#children)\n - [`hasChildren`](#haschildren)\n - [`isChildren`](#ischildren)\n- [Splitters](#splitters)\n - [`split`](#split)\n - [`paragraphs`](#paragraphs)\n - [`lines`](#lines)\n - [`spaces`](#spaces)\n - [`words`](#words)\n - [`commas`](#commas)\n - [`chars`](#chars)\n\n<h2 id=\"text-elements\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Text Elements</h2>\n\n#### Text\n_`<text>`_\n\nText is the base Prxmpt element. It returns its children as a string:\n\n\n```tsx\nconst string = <text>Hello, World!</text>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello, World!\n ```\n</details>\n\nText can also be hidden with the `hide` prop:\n\n```tsx\nconst string = <text>Hello<text hide>, World</hide>!</text>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello!\n ```\n</details>\n\n<details open>\n <summary><b>Props</b></summary>\n\nSince `<text>` is the base of most other elements, the props it provides can be used with most other elements.\n\nPrxmpt treats children as an array of strings, which means `<text>` can also provide several array functions for mapping, filtering, and joining children.\n\n---\n- **hide**\n```tsx\n/**\n * Prevent the Element from being rendered.\n * @default false\n */\nhide?: boolean;\n```\n- **filter**\n```tsx\n/**\n * A function to filter children.\n * @default (node) => true\n */\nfilter?: (node: Prxmpt.Children, index: number, arr: Prxmpt.Children[]) => boolean;\n```\n- **map**\n```tsx\n/**\n * A function that maps each child to a new Element.\n * @default (node) => Prxmpt.render(node)\n */\nmap?: (node: Prxmpt.Children, index: number, arr: Prxmpt.Children[]) => Prxmpt.JSX.Element;\n```\n- **reverse**\n```tsx\n/**\n * Reverse the order of the children.\n */\nreverse?: boolean;\n```\n- **join**\n```tsx\n/**\n * An Element to insert between each child.\n * @default \"\"\n */\njoin?: Prxmpt.Children;\n```\n- **repeat**\n```tsx\n/**\n * @default 1\n */\nrepeat?: number;\n```\n- **trim**\n```tsx\n/**\n * `true`: Trim whitespace from the beginning and end of the Element.\n * \n * `\"start\"`: Trim whitespace from the beginning of the Element.\n * \n * `\"end\"`: Trim whitespace from the end of the Element.\n * \n * @default false\n */\ntrim?: boolean | TrimSide;\n```\n- **casing**\n```tsx\n/**\n * Convert the Element to a given casing.\n * @default undefined\n */\ncasing?: Casing;\n```\n- **prefix**\n```tsx\n/**\n * An Element to prepend to the element.\n * @default \"\"\n */\nprefix?: Prxmpt.Children;\n```\n- **suffix**\n```tsx\n/**\n * An Element to append to the element.\n * @default \"\"\n */\nsuffix?: Prxmpt.Children;\n```\n- **indent**\n```tsx\n/**\n * Apply indentation to each line of the Element.\n * \n * If `true`, indentation is applied using 2 spaces.\n * \n * If a number is provided, that number of spaces is used.\n * \n * If `\"\\t\"` is provided, a single tab character is used.\n * \n * @default false\n */\nindent?: boolean | number | \"\\t\";\n```\n- **block**\n```tsx\n/**\n * Append a newline to the end of the Element.\n * @default false\n */\nblock?: boolean;\n```\n---\n</details>\n\n<h3 id=\"characters\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Characters</h3>\n\n#### Empty\n_`<empty>`_\n\nThe `<empty>` element returns an empty string:\n\n```tsx\n// \"\"\nconst string = <empty />;\n```\n\n`<empty>` is often useful as a child of elements that join their children on some delimiter.\n\n```tsx\nconst string = (\n <lined>\n <text>Line 1</text>\n <empty />\n <text>Line 3</text>\n </lined>\n);\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Line 1\n\n Line 2\n ```\n</details>\n\n#### Space\n_`<space>`_\n\nThe `<space>` element returns a space:\n\n```tsx\n// \" \"\nconst string = <space />;\n```\n\n#### Tab\n_`<tab>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **literal**\n```tsx\n/**\n * If true, use a literal tab character. Otherwise, use spaces.\n * @default false\n */\nliteral?: boolean;\n```\n- **width**\n```tsx\n/**\n * Number of characters per tab\n * @default 1 if `literal` is true, otherwise 2\n */\nwidth?: number;\n```\n---\n</details>\n\n```tsx\n// \" \"\nconst string = <tab width={4} />\n```\n\n#### Ellipsis\n_`<ellipsis>`_\n\n```tsx\nconst string = <ellipsis />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n ...\n ```\n</details>\n\n#### NA\n_`<na>`_\n\n```tsx\nconst string = <na />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n n/a\n ```\n</details>\n\n<h3 id=\"brackets\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Brackets</h3>\n\n#### Parenthesis\n_`<parens>`_\n\n```tsx\nconst string = <parens>Hello, World!</parens>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n (Hello, World!)\n ```\n</details>\n\n#### Square Bracket\n_`<square>`_\n\n```tsx\nconst string = <square>Hello, World!</square>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n [Hello, World!]\n ```\n</details>\n\n\n#### Curly Bracket\n_`<curly>`_\n\n```tsx\nconst string = <curly>Hello, World!</curly>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n {Hello, World!}\n ```\n</details>\n\n#### Angle Bracket\n_`<angle>`_\n\n```tsx\nconst string = <angle>Hello, World!</angle>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <Hello, World!>\n ```\n</details>\n\n<h3 id=\"quotes\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Quotes</h3>\n\n#### Single Quote\n_`<sq>`_\n\n```tsx\nconst string = <sq>Hello, World!</sq>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 'Hello, World!'\n ```\n</details>\n\n#### Double Quote\n_`<dq>`_\n\n```tsx\nconst string = <dq>Hello, World!</dq>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n \"Hello, World!\"\n ```\n</details>\n\n#### Back Quote\n_`<bq>`_\n\n```tsx\nconst string = <bq>Hello, World!</bq>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n `Hello, World!`\n ```\n</details>\n\n#### Triple Single Quote\n_`<tsq>`_\n\n```tsx\nconst string = <tsq>Hello, World!</tsq>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n '''\n Hello, World!\n '''\n ```\n</details>\n\n#### Triple Double Quote\n_`<tdq>`_\n\n```tsx\nconst string = <tdq>Hello, World!</tdq>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n \"\"\"\n Hello, World!\n \"\"\"\n ```\n</details>\n\n#### Triple Back Quote\n_`<tbq>`_\n\n```tsx\nconst tbq = <tbq>Hello, World!</tbq>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n <pre>```<br/>Hello, World!<br/>```</pre>\n</details>\n\n<h3 id=\"comments\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Comments</h3>\n\n#### Slash Comment\n_`<comment type=\"slash\">`_\n\n```tsx\nconst slash = <comment type=\"slash\">Hello, World!</comment>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n // Hello, World!\n ```\n</details>\n\n#### Hash Comment\n_`<comment type=\"hash\">`_\n\n```tsx\nconst hash = <comment type=\"hash\">Hello, World!</comment>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n # Hello, World!\n ```\n</details>\n\n#### Dash Comment\n_`<comment type=\"dash\">`_\n\n```tsx\nconst dash = <comment type=\"dash\">Hello, World!</comment>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n -- Hello, World!\n ```\n</details>\n\n#### HTML Comment\n_`<comment type=\"html\">`_\n\n```tsx\nconst html = <comment type=\"html\">Hello, World!</comment>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <!-- Hello, World! -->\n ```\n</details>\n\n<h3 id=\"sentences\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Sentences</h3>\n\n#### State\n_`<state>`_\n\n```tsx\nconst state = <state>Hello, World!</state>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello, World.\n ```\n</details>\n\n#### Ask\n_`<ask>`_\n\n```tsx\nconst ask = <ask>Hello, World!</ask>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello, World?\n ```\n</details>\n\n#### Exclaim\n_`<exclaim>`_\n\n```tsx\nconst exclaim = <exclaim>Hello, World!</exclaim>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello, World!\n ```\n</details>\n\n<h3 id=\"miscellaneous-text\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Miscellaneous</h3>\n\n#### Key-Value Pair\n_`<kv>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **key**\n```tsx\n/**\n * A key to render.\n */\nkey: Prxmpt.Children;\n```\n\n- **keyCase**\n```tsx\n/**\n * Case to apply to the key.\n * @default undefined\n */\nkeyCase?: \"upper\" | \"lower\" | \"capital\" | \"title\";\n```\n\n- **wrap**\n```tsx\n/**\n * Override the default behavior for wrapping the value.\n * @default undefined\n */\nwrap?: boolean;\n```\n\n- **noSpace**\n```tsx\n/**\n * If true, do not add a space between the key and value.\n * Only applies when not wrapping.\n * @default false\n */\nnoSpace?: boolean;\n```\n---\n\n</details>\n\n```tsx\nconst string = <kv key=\"Hello\">World</kv>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello: World\n ```\n</details>\n\nWhen the children contain multiple lines, the value is rendered starting on a newline by default:\n\n```tsx\nconst worlds = (\n <tdq join={\"\\n\"}>\n <text>World1</text>\n <text>World2</text>\n <text>World3</text>\n </tdq>\n);\n\nconst string = <kv key=\"Hello\">{worlds}</kv>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello:\n \"\"\"\n World1\n World2\n World3\n \"\"\"\n ```\n</details>\n\n<h2 id=\"html-elements\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>HTML Elements</h2>\n\nHTML elements are built on top of the `<tag>` element. Each html element has a boolean `html` prop that is set to false by default. When `html` is true, the element is rendered as HTML. Otherwise, the element is rendered as a Markdown equivalent.\n\nAdditionally, custom attributes can be set using the `attributes` prop.\n\n#### Tag\n_`<tag>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **name**\n```tsx\n/**\n * Name of the tag.\n */\nname: string;\n```\n- **noIndent**\n```tsx\n/**\n * @default false\n */\nnoIndent?: boolean;\n```\n- **wrap**\n```tsx\n/**\n * Defaults to true if the content contains a newline.\n */\nwrap?: boolean;\n```\n---\n</details>\n\n```tsx\nconst tag = <tag name=\"mytag\">Hello, World!</tag>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <mytag>Hello, World!</mytag>\n ```\n</details>\n\n\nIf no children are provided, the tag is rendered as a self-closing tag:\n\n```tsx\nconst tag = <tag name=\"mytag\" />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <mytag />\n ```\n</details>\n\n<h3 id=\"breaks\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Breaks</h3>\n\n#### Line Break\n_`<br />`_\n\n```tsx\n// \"\\n\"\nconst br = <br />;\n```\n\n```tsx\nconst br = <br html />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <br />\n ```\n</details>\n\n#### Horizontal Rule\n_`<hr />`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **width**\n```tsx\n/**\n * @default 3\n */\nwidth?: number;\n```\n- **char**\n```tsx\n/**\n * @default \"-\"\n */\nchar?: \"-\" | \"_\" | \"=\" | \"*\";\n```\n---\n</details>\n\n```tsx\nconst hr = <hr />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n ---\n ```\n</details>\n\n```tsx\nconst hr = <hr />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <hr />\n ```\n</details>\n\n<h3 id=\"linking\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Linking</h3>\n\n#### Anchor\n_`<a>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **href**\n\n```tsx\n/**\n * The URL of the link.\n */\nhref: string;\n```\n- **title**\n```tsx\n/**\n * A title for the link.\n */\ntitle?: string;\n```\n---\n</details>\n\n```tsx\nconst string = <a href=\"https://example.com\" title=\"A Title\">Hello, World!</a>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n [Hello, World!](https://example.com \"A Title\")\n ```\n</details>\n\n```tsx\nconst string = <a href=\"https://example.com\" title=\"A Title\" html>Hello, World!</a>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <a href=\"https://example.com\" title=\"A Title\">Hello, World!</a>\n ```\n</details>\n\n#### Image\n_`<img>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **src**\n```tsx\n/**\n * The URL of the image.\n */\nhref: string;\n```\n- **title**\n```tsx\n/**\n * A title for the image.\n */\ntitle?: string;\n```\n---\n</details>\n\n```tsx\nconst string = <img src=\"https://example.com\" title=\"A Title\">Hello, World!</img>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n ![Hello, World!](https://example.com \"A Title\")\n ```\n</details>\n\n```tsx\nconst string = <img src=\"https://example.com\" title=\"A Title\" html>Hello, World!</img>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <img src=\"https://example.com\" alt=\"Hello, World!\" title=\"A Title\" />\n ```\n</details>\n\n<h3 id=\"headings\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Headings</h3>\n\n#### H1\n_`<h1>`_\n\n##### Standard:\n\n```tsx\nconst string = <h1>Hello, World!</h1>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n # Hello, World!\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <h1 html>Hello, World!</h1>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <h1>Hello, World!</h1>\n ```\n</details>\n\n#### H2\n_`<h2>`_\n\n##### Standard:\n\n```tsx\nconst string = <h2>Hello, World!</h2>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n ## Hello, World!\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <h2 html>Hello, World!</h2>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <h2>Hello, World!</h2>\n ```\n</details>\n\n#### H3\n_`<h3>`_\n\n##### Standard:\n\n```tsx\nconst string = <h3>Hello, World!</h3>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n ### Hello, World!\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <h3 html>Hello, World!</h3>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <h3>Hello, World!</h3>\n ```\n</details>\n\n#### H4\n_`<h4>`_\n\n##### Standard:\n\n```tsx\nconst string = <h4>Hello, World!</h4>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n #### Hello, World!\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <h4 html>Hello, World!</h4>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <h4>Hello, World!</h4>\n ```\n</details>\n\n#### H5\n_`<h5>`_\n\n##### Standard:\n\n```tsx\nconst string = <h5>Hello, World!</h5>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n ##### Hello, World!\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <h5 html>Hello, World!</h5>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <h5>Hello, World!</h5>\n ```\n</details>\n\n#### H6\n_`<h6>`_\n\n##### Standard:\n\n```tsx\nconst string = <h6>Hello, World!</h6>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n ###### Hello, World!\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <h6 html>Hello, World!</h6>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <h6>Hello, World!</h6>\n ```\n</details>\n\n<h3 id=\"lists\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Lists</h3>\n\n#### Ordered List\n_`<ol>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **onlyMarkIfList**\n```tsx\n/**\n * Only include markers if the list contains more than one item.\n * @default false\n */\nonlyMarkIfList?: boolean;\n```\n---\n</details>\n\n```tsx\nconst string = (\n <ol>\n <text>Hello</text>\n <text>World</text>\n </ol>\n);\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 1. Hello\n 2. World\n ```\n</details>\n\n#### Unordered List\n_`<ul>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **onlyMarkIfList**\n```tsx\n/**\n * Only include markers if the list contains more than one item.\n * @default false\n */\nonlyMarkIfList?: boolean;\n```\n---\n</details>\n\n```tsx\nconst string = (\n <ul>\n <text>Hello</text>\n <text>World</text>\n </ul>\n);\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n - Hello\n - World\n ```\n</details>\n\n#### Checkbox list\n_`<cl>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **items**\n```tsx\nitems: {\n /**\n * @default false\n */\n checked?: boolean;\n /**\n * Content to render after the checkbox.\n */\n content: Prxmpt.Children;\n}[];\n```\n---\n</details>\n\n```tsx\nconst string = (\n <cl\n items={[\n { content: \"Hello\" },\n { content: \"World\", checked: true },\n ]}\n />\n);\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n - [ ] Hello\n - [x] World\n ```\n</details>\n\n#### Definition List\n_`<dl>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **items**\n```tsx\n/**\n * The items to render.\n */\nitems: Record<string, Prxmpt.Children>;\n```\n- **termCase**\n```tsx\n/**\n * Casing to apply to each key.\n * @default undefined\n */\ntermCase?: \"upper\" | \"lower\" | \"capital\" | \"title\";\n```\n- **space**\n```tsx\n/**\n * Number of blank lined to insert between each item.\n * @default 0\n */\nspace?: number;\n```\n- **wrap**\n```tsx\n/**\n * Override the default behavior for wrapping values.\n * @default undefined\n */\nwrap?: boolean;\n```\n---\n</details>\n\n```tsx\nconst string = (\n <dl\n items={{\n Hello: \"World\",\n Foo: \"Bar\"\n }}\n />\n);\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello: World\n Foo: Bar\n ```\n</details>\n\n<h3 id=\"styling\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Styling</h3>\n\n#### Italic\n_`<i>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **char**\n```tsx\n/**\n * @default \"_\"\n */\nchar?: \"*\" | \"_\";\n```\n---\n</details>\n\n##### Standard:\n\n```tsx\nconst string = <i>Hello, World!</i>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n _Hello, World!_\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <i html>Hello, World!</i>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <i>Hello, World!</i>\n ```\n</details>\n\n#### Bold\n_`<b>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **char**\n```tsx\n/**\n * @default \"*\"\n */\nchar?: \"*\" | \"_\";\n```\n---\n</details>\n\n##### Standard:\n\n```tsx\nconst string = <b>Hello, World!</b>;\n```\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n **Hello, World!**\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <b html>Hello, World!</b>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <b>Hello, World!</b>\n ```\n</details>\n\n#### Strikethrough\n_`<s>`_\n\n##### Standard:\n\n```tsx\nconst string = <s>Hello, World!</s>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n ~~Hello, World!~~\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <s html>Hello, World!</s>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <s>Hello, World!</s>\n ```\n</details>\n\n#### Code\n_`<code>`_\n\n##### Standard:\n\n```tsx\nconst string = <code>Hello, World!</code>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n `Hello, World!`\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <code html>Hello, World!</code>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <code>Hello, World!</code>\n ```\n</details>\n\n<h3 id=\"miscellaneous-html\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Miscellaneous</h3>\n\n#### Span\n_`<span>`_\n\n##### Standard:\n\nWhen rendered as text, `<span>` simply renders its children like `<text>`:\n\n```tsx\nconst string = <span>Hello, World!</span>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello, World!\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <span html>Hello, World!</span>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <span>Hello, World!</span>\n ```\n</details>\n\n#### Paragraph\n_`<p>`_\n\n##### Standard:\n\nWhen rendered as text, the paragraph tag adds a newline at the end of the element:\n\n```tsx\nconst string = <p>Hello, World!</p>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello, World!\n\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <p html>Hello, World!</p>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <p>Hello, World!</p>\n ```\n</details>\n\n#### Blockquote\n_`<blockquote>`_\n\n##### Standard:\n\n```tsx\nconst string = (\n <blockquote join={\"\\n\"}>\n <text>Hello</text>\n <empty />\n <text>World!</text>\n </blockquote>\n);\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n > Hello\n >\n > World!\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <blockquote html>Hello, World!</blockquote>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <blockquote>Hello, World!</blockquote>\n ```\n</details>\n\n#### Quote\n_`<q>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **type**\n```tsx\n/**\n * @default \"double\"\n */\ntype?: \"single\" | \"double\" | \"backtick\";\n```\n---\n</details>\n\n##### Standard:\n\nThe quote element returns a triple quote if the children contain a newline, otherwise it returns a single quote.\n\n###### Single Line\n\n```tsx\nconst string = <q>Hello, World!</q>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n \"Hello, World!\"\n ```\n</details>\n\n###### Multi Line\n\n```tsx\nconst string = <q>Hello<br />World</q>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n \"\"\"\n Hello, World!\n \"\"\"\n ```\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <q html>Hello, World!</q>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <q>Hello, World!</q>\n ```\n</details>\n\n#### Pre\n_`<pre>`_\n\n##### Standard:\n\n```tsx\nconst string = <pre>Hello, World!</pre>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n <pre>```<br />Hello, World!<br />```</pre>\n</details>\n\n##### HTML:\n\n```tsx\nconst string = <pre html>Hello, World!</pre>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n <pre>Hello, World!</pre>\n ```\n</details>\n\n<h2 id=\"serialization-elements\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Serialization Elements</h2>\n\n<h3 id=\"primitives\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Primitives</h3>\n\n#### Num\n_`<num>`_\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **add**\n```tsx\n/**\n * Add a value to the number.\n */\nadd?: number;\n```\n- **min**\n```tsx\n/**\n * Minimum value. Applied after `add`.\n */\nmin?: number;\n```\n- **max**\n```tsx\n/**\n * Maximum value. Applied after `add`.\n */\nmax?: number;\n```\n- **fixed**\n```tsx\n/**\n * Number of decimal places.\n */\nfixed?: number;\n```\n---\n</details>\n\n```tsx\nconst string = <num fixed={2}>1</num>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 1.00\n ```\n</details>\n\n```tsx\nconst string = <num min={1}>0</num>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 1\n ```\n</details>\n\n<h3 id=\"dates\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Dates</h3>\n\n#### Datetime\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n- **dateFormat**\n```tsx\n/**\n * @default \"short\"\n */\ndateFormat?: \"long\" | \"medium\" | \"short\" | \"full\";\n```\n- **timeFormat**\n```tsx\n/**\n * @default \"short\"\n */\ntimeFormat?: \"long\" | \"medium\" | \"short\" | \"full\";\n```\n---\n</details>\n\n```tsx\nconst string = <datetime />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n September 23, 2023 at 5:17 PM\n ```\n</details>\n\n#### Date\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n- **format**\n```tsx\n/**\n * @default \"short\"\n */\nformat?: \"long\" | \"medium\" | \"short\" | \"full\";\n```\n---\n</details>\n\n```tsx\nconst string = <date />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n September 23, 2023\n ```\n</details>\n\n#### Time\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n- **format**\n```tsx\n/**\n * @default \"short\"\n */\nformat?: \"long\" | \"medium\" | \"short\" | \"full\";\n```\n---\n</details>\n\n```tsx\nconst string = <time />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 5:17 PM\n ```\n</details>\n\n#### Year\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n---\n</details>\n\n```tsx\nconst string = <year />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 2023\n ```\n</details>\n\n#### Month\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n- **format**\n```tsx\n/**\n * @default \"number\"\n */\nformat?: \"number\" | \"long\" | \"short\" | \"narrow\";\n```\n---\n</details>\n\n```tsx\nconst string = <month />\n```\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 8\n ```\n</details>\n\n```tsx\nconst string = <month format=\"long\" />\n```\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n September\n ```\n</details>\n\n```tsx\nconst string = <month format=\"short\" />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Sep\n ```\n</details>\n\n```tsx\nconst string = <month format=\"narrow\" />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n S\n ```\n</details>\n\n#### Day\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n- **format**\n```tsx\n/**\n * @default \"number\"\n */\nformat?: \"number\" | \"long\" | \"short\" | \"narrow\";\n```\n---\n</details>\n\n```tsx\nconst string = <day />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 6\n ```\n</details>\n\n```tsx\nconst string = <day format=\"long\" />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Saturday\n ```\n</details>\n\n```tsx\nconst string = <day format=\"short\" />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Sat\n ```\n</details>\n\n```tsx\nconst string = <day format=\"narrow\" />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n S\n ```\n</details>\n\n#### Hour\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n- **cycle**\n```tsx\n/**\n * @default \"12\"\n */\ncycle?: \"12\" | \"24\";\n```\n---\n</details>\n\n```tsx\nconst string = <hour />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 5\n ```\n</details>\n\n```tsx\nconst string = <hour cycle=\"24\">\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 17\n ```\n</details>\n\n#### Minute\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n---\n</details>\n\n```tsx\nconst string = <minute />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 42\n ```\n</details>\n\n#### Second\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n---\n</details>\n\n```tsx\nconst string = <second />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 42\n ```\n</details>\n\n#### Millisecond\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n---\n</details>\n\n```tsx\nconst string = <millisecond />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 999\n ```\n</details>\n\n#### Duration\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **value**\n```tsx\n/**\n * The end of the duration.\n * @default Date.now()\n */\nvalue?: Date | string | number;\n```\n- **since**\n```tsx\n/**\n * The start of the duration.\n */\nsince: Date | string | number;\n```\n---\n</details>\n\n```tsx\nconst string = <duration since={\"September 2021\"} />\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n 2 years\n ```\n</details>\n\n<h3 id=\"objects\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Objects</h3>\n\n#### JSON\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **data**\n```tsx\n/**\n * The data to stringify.\n */\ndata: NestedOptionalJSONValue;\n```\n- **pretty**\n```tsx\n/**\n * @default false\n */\npretty?: boolean;\n```\n---\n</details>\n\n```tsx\nconst string = <json data={{ Hello: \"World\" }} pretty />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n {\n \"Hello\": \"World\"\n }\n ```\n</details>\n\n#### YAML\n\n<details>\n <summary><b>Props</b></summary>\n\n---\n- **data**\n```tsx\n/**\n * The data to stringify.\n */\ndata: NestedOptionalJSONValue;\n```\n- **noStartMarker**\n```tsx\n/**\n * @default false\n */\nnoStartMarker?: boolean;\n```\n- **sequenceIndent**\n```tsx\n/**\n * @default false\n */\nsequenceIndent?: boolean;\n```\n---\n</details>\n\n```tsx\nconst string = <yaml data={{ hello: \"world\" }} />;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n ---\n hello: world\n ```\n</details>\n\n<h2 id=\"utility-elements\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Utility Elements</h2>\n\n<h3 id=\"casing\"><div align=\"right\"><a href=\"#elements\">🔝</a></div>Casing</h3>\n\n#### Upper\n\n_`<upper>`_\n\n```tsx\nconst string = <upper>Hello, World!</upper>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n HELLO, WORLD!\n ```\n</details>\n\n#### Lower\n\n_`<lower>`_\n\n```tsx\nconst string = <lower>Hello, World!</lower>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n hello, world!\n ```\n</details>\n\n#### Capital\n\n_`<capital>`_\n\n```tsx\nconst string = <capital>hello, world!</capital>;\n```\n\n<details open>\n <summary><i>Result</i></summary>\n\n ```\n Hello, world!\n ```\n</details>\n\n#### Title\n\n_`<title>`_\n\n```tsx\nconst string = <title>hello, world! ;\n```\n\n\n Result \n\nAffixes \n\n#### Trim\n\n```tsx\n// \"Hello, World!\"\nconst string = Hello, World! ;\n```\n\n\n Result \n\n#### Frame\n\n\n Props \n\n```tsx\nconst string = \n Result \n\nJoins \n\n#### Lined\n_``_\n\n```tsx\nconst string = (\n \n Hello \n World! \n \n);\n```\n\n\n Result \n\n#### Spaced\n_``_\n\n```tsx\nconst string = (\n \n Hello \n World! \n \n);\n```\n\n\n Result \n\n#### Comma-Separated List\n_``_\n\n\n Props \n\n```tsx\nconst string = (\n \n hello \n world \n \n);\n```\n\n\n Result \n\n```tsx\nconst string = (\n \n hello \n world \n \n);\n```\n\n\n Result \n\n#### Union\n_``_\n\n\n Props \n\n```tsx\nconst string = (\n \n hello \n world \n \n);\n```\n\n\n Result \n\n```tsx\nconst string = (\n \n hello \n world \n \n);\n```\n\n\n Result \n\n\n#### Sectioned\n\n\n Props \n\n```tsx\nconst string = (\n \n Hello \n World! \n \n);\n```\n\n\n Result \n\nSets \n\nSets automatically adjust the separators used based on the number of children provided.\n\n#### And\n_``_\n\n```tsx\nconst string = (\n \n a \n \n);\n```\n\n\n Result \n\n```tsx\nconst string = (\n \n a \n b \n \n);\n```\n\n\n Result \n\n```tsx\nconst string = (\n \n a \n b \n c \n \n);\n```\n\n\n Result \n\n#### And / Or\n_``_\n\n```tsx\nconst string = (\n \n a \n b \n c \n \n);\n```\n\n\n Result \n\n#### Or\n_``_\n\n```tsx\nconst string = (\n \n a \n b \n c \n \n);\n```\n\n\n Result \n\n#### Nor\n_``_\n\n```tsx\nconst string = (\n \n a \n b \n c \n \n);\n```\n\n\n Result \n\nLimiters \n\n#### Cap\n\nThe `` element allows you to limit the length of a string by providing a `splitter` function and a `max` number of \"units\" to allow.\n\n\n Props \n\n```tsx\nconst string = Hello, World! ;\n```\n\n\n Result \n\n#### Priority\n\nThe `` element is like a width-based [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) for strings.\n\nInstead of providing a list of children, `` expects a list of items, each of which can have a priority. Higher priorities are rendered first (like `z-index` in CSS), and each item has a default priority of 0. Several strategies are provided as well for fine-tuning how items are prioritiezed.\n\nPriority elements can also be nested, which enable extremely fine-grained control over which content is rendered. Several examples are provided in the [priority example directory](https://github.com/AutosseyAI/prxmpt/tree/main/examples/priority).\n\n\n Props \n\n```tsx\nconst string = (\n \n Result \n\nExports \n\nRendering \n\n#### `createElement`\n\n```tsx\nimport { createElement } from \"@autossey/prxmpt\";\n\nconst string = createElement(\"text\", {}, \"Hello, World!\");\n```\n\n\n Result \n\n#### `render`\n\n```tsx\nimport { render } from \"@autossey/prxmpt\";\n\nconst string = render(\n Hello, World! \n);\n```\n\n\n Result \n\nChildren \n\n#### `hasChildren`\n\nReturns `true` if the provided props object has a `children` property.\n\n```tsx\nimport { hasChildren } from \"@autossey/prxmpt\";\n\nif(hasChildren({ children: \"Hello, World!\" })) {\n // ...\n}\n```\n\n#### `isChildren`\n\nReturns `true` if the provided value is a valid Prxmpt element child.\n\n```tsx\nimport { isChildren } from \"@autossey/prxmpt\";\n\nif(isChildren(\"Hello, World!\")) {\n // ...\n}\n```\n\nSplitters \n\n#### `split`\n\nSplit `children` on `separator`. If `separator` is `undefined`, no splitting occurs.\n\n```tsx\nimport { split } from \"@autossey/prxmpt\";\n\nconst children = (\n \n Hello \n World! \n \n);\n\n// [\"Hello\", \"World!\"]\n\nconst strings = split(children, \"\\n\");\n```\n\n#### `paragraphs`\n\nSplit `children` on `\"\\n\\n\"`.\n\n#### `lines`\n\nSplit `children` on `\"\\n\"`.\n\n#### `spaces`\n\nSplit `children` on whitespace.\n\n#### `words`\n\nSplit `children` on word boundaries.\n\n#### `commas`\n\nSplit `children` on `\",\"`.\n\n#### `characters`\n\nSplit `children` on `\"\"`.\n\nDependencies \n\n- [@swc/core](https://www.npmjs.com/package/@swc/core): Super-fast alternative for babel\n- [as-typed-array](https://www.npmjs.com/package/as-typed-array): Make any value an array\n- [types-json](https://www.npmjs.com/package/types-json): Type checking for JSON objects\n- [yaml](https://www.npmjs.com/package/yaml): JavaScript parser and stringifier for YAML\n\nDev Dependencies \n\n- [@autossey/eslint-config](https://www.npmjs.com/package/@autossey/eslint-config): A base for projects that use ESLint.\n- [@autossey/tsconfig](https://www.npmjs.com/package/@autossey/tsconfig): A collection of base TSConfigs for various types of projects.\n- [@jest/globals](https://www.npmjs.com/package/@jest/globals)\n- [@swc/jest](https://www.npmjs.com/package/@swc/jest): Swc integration for jest\n- [@types/node](https://www.npmjs.com/package/@types/node): TypeScript definitions for Node.js\n- [eslint](https://www.npmjs.com/package/eslint): An AST-based pattern checker for JavaScript.\n- [jest](https://www.npmjs.com/package/jest): Delightful JavaScript Testing.\n- [typescript](https://www.npmjs.com/package/typescript): TypeScript is a language for application scale JavaScript development\n\nLicense \n\n[MIT](https://opensource.org/licenses/MIT) - _The MIT License_\n\n","readmeFilename":"README.md","homepage":"https://github.com/AutosseyAI/prxmpt#readme","keywords":["prompt","prxmpt","autossey","ai","openai","jsx"],"repository":{"type":"git","url":"git+https://github.com/AutosseyAI/prxmpt.git"},"bugs":{"url":"https://github.com/AutosseyAI/prxmpt/issues"}} ![\"Coverage](\"https://img.shields.io/coveralls/github/AutosseyAI/prxmpt/badge.svg\"){kind=icon}
\n \n \n ![\"NPM\"](\"https://img.shields.io/npm/v/@autossey/prxmpt.svg\")
\n \n \n ![\"TypeScript\"](\"https://img.shields.io/github/languages/top/AutosseyAI/prxmpt.svg\")
\n \n\n![\"NPM\"](\"https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=white\"){kind=icon}
\n \n ![\"Yarn\"](\"https://img.shields.io/badge/yarn-2C8EBB?logo=yarn&logoColor=white\"){kind=icon}
\n \n ![\"PNPM\"](\"https://img.shields.io/badge/pnpm-F69220?logo=pnpm&logoColor=white\"){kind=icon}
\n ![\"Bun\"](\"https://img.shields.io/badge/bun-EE81C3?logo=bun&logoColor=white\"){kind=icon}
\n