@slimr/styled 1.0.40

package/README.md

@@ -0,0 +1,163 @@
+# @slimr/styled
+
+A tiny (2kb) React css-in-js library inspired by chakra-ui, emotion, and styled-components libs
+
+Demos: See `./packages/demo` or [CodeSandbox](https://codesandbox.io/s/64r9px?file=/src/App.tsx)
+
+Sister libs:
+
+- [@slimr/css](https://www.npmjs.com/package/@slimr/css)
+
+Pros:
+
+- Much less bundle size and runtime sluggishness
+- Less is more: less bugs, no breaking changes
+- Supports declaring css and styled components inside of Components for better code colocating and NO MORE NEED TO PASS ARGS!
+- Styled shortcuts like styled.div when imported from `@slimr/styled/withHtmlTags`. Note: To get types you'll need tsconfig:moduleResolution >= `Node16`
+- Zx/Css shorthand props like [chakra-ui](https://chakra-ui.com/docs/styled-system/style-props):
+  - Pass shorthand props or zx props to styled components. This lib will create css classes if complex, passthrough as styles otherwise.
+  - `m` --> `margin`
+  - `mx` --> `margin-left` and right
+  - `py` --> `padding-top` and bottom
+  - More [here](https://github.com/bdombro/slimr/blob/65bf012086760b7e481a4064f3be8aea6a098b91/packages/css/src/index.ts#L73)!
+- CSS Breakpoints shorthand like [chakra-ui](https://chakra-ui.com/docs/styled-system/responsive-styles):
+
+  ```css
+  margin: [auto, null, inherit];
+  /* Translates to */
+  margin: auto;
+  @media (min-width: 48em) {
+    margin: inherit;
+  }
+  ```
+
+  - Breakpoints are `[30em, 48em, 62em, 80em, 96em]`
+
+Cons:
+
+- No SSR support
+
+## Setup/Install
+
+```bash
+npm i @slimr/styled
+```
+
+## Usage
+
+Preview below. For full code, see demos
+
+```tsx
+// Create primitive components if you like
+const Box = styled.div`
+  pos: relative;
+`
+
+interface ButtonProps extends Omit<HtmlTagProps['button'], 'id'> {
+  id: HtmlTagProps['button']['id'] // make required
+}
+function Button(props: ButtonProps) {
+  return (
+    <button
+      {...props}
+      onClick={(e) => {
+        console.log(`Button ${props.id} clicked`)
+        props.onClick?.(e)
+      }}
+    />
+  )
+}
+const ButtonP = styled(Button)`
+  bg: red;
+  c: white;
+  w: [100%, null, inherit];
+`
+
+export function App() {
+  const on = useOscillator()
+
+  return (
+    <Box
+      // enjoy chakra-ui like shorthand syntax
+      bg={['lightblue', null, 'lightred']}
+    >
+      <ButtonP
+        // use css if you'd like, which gets converted into a css class and attached to this element
+        css={`
+          --font-weight: [bold, null, initial];
+        `}
+        id="my-button"
+        // kinda like style but accepts shorthand syntax
+        _zx={{
+          textTransform: on ? 'uppercase' : 'inherit',
+        }}
+        // Any attr with '_' prefix will be passed to zx
+        _fontWeight="var(--font-weight)"
+        // like _zx, but applies only on :hover
+        _hover={{ bg: 'lightblue' }}
+        // like _zx, but applies only on :active
+        _active={{ bg: 'lightblue' }}
+        // like _zx, but applies only when browser prefers dark modes
+        _dark={{ bg: 'lightblue' }}
+      >
+        Click me!
+      </ButtonP>
+    </Box>
+  )
+}
+```
+
+### Comparisons
+
+#### [Chakra-UI](https://chakra-ui.com/)
+
+- A popular css-in-js lib that inspired this lib
+
+Pros
+
+- More mature, SSR support
+- Premade components
+
+Cons
+
+- Is crazy large bundle impact (80+kb)
+
+#### [Styled-Components](https://github.com/styled-components/styled-components)
+
+- A popular css-in-js lib that inspired this lib
+
+Pros
+
+- More mature, SSR support
+
+Cons
+
+- Is massive (~12kb), plus has dependency on emotion (~11kb)
+- Does not support zx prop or css shorthand props
+
+#### [Emotion](https://emotion.sh/docs/introduction)
+
+- A popular css-in-js lib similar to styled-components
+
+Pros
+
+- More mature, SSR support
+
+Cons
+
+- Is large (>10kb)
+- Many features require addons, which make bundle even larger
+- Does not support zx prop or css shorthand props
+
+#### [Goober](https://github.com/cristianbote/goober)
+
+- another tiny 1kb styled-components like css-in-js
+
+Pros:
+
+- More mature, SSR support
+
+Cons:
+
+- Many features require addons, which in sum may make the bundle larger than slimr
+- Does not support zx prop or css shorthand props

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@slimr/styled",
+  "version": "1.0.40",
+  "author": "Brian Dombrowski",
+  "license": "ISC",
+  "private": false,
+  "keywords": [
+    "chakra",
+    "chakra-ui",
+    "emotion",
+    "styled-components",
+    "preact",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bdombro/slimr.git"
+  },
+  "type": "module",
+  "main": "./src/index.cjs",
+  "module": "./src/index.js",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./src/index.cjs",
+      "types": "./src/index.ts"
+    },
+    "./withHtmlTags": {
+      "import": "./src/withHtmlTags.js",
+      "require": "./src/withHtmlTags.cjs",
+      "types": "./src/withHtmlTags.ts"
+    }
+  },
+  "files": [
+    "src",
+    "README.md",
+    "tsconfig.json"
+  ],
+  "scripts": {
+    "build": "npm run clean && tsup",
+    "clean": "find -E ./src -regex '.*(\\.js|\\.cjs|\\.d\\.ts|\\.map)' -delete",
+    "prepack": "npm run build && npm version patch",
+    "postpublish": "npm run clean"
+  },
+  "peerDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "dependencies": {
+    "@slimr/css": "^1.0.36"
+  }
+}

package/src/index.cjs

@@ -0,0 +1,35 @@
+"use strict";var A=Object.create;var d=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var w=(r,e)=>{for(var t in e)d(r,t,{get:e[t],enumerable:!0})},Z=(r,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of M(e))!L.call(r,a)&&a!==t&&d(r,a,{get:()=>e[a],enumerable:!(s=j(e,a))||s.enumerable});return r},o=(r,e,t)=>(Z(r,e,"default"),t&&Z(t,e,"default")),z=(r,e,t)=>(t=r!=null?A(N(r)):{},Z(e||!r||!r.__esModule?d(t,"default",{value:r,enumerable:!0}):t,r)),O=r=>Z(d({},"__esModule",{value:!0}),r);var i={};w(i,{css:()=>l.default,default:()=>b});module.exports=O(i);var m=require("react"),l=z(require("@slimr/css"),1);o(i,require("@slimr/css"),module.exports);function F(r){return r.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function R(r){return r.replace(/-./g,e=>e[1].toUpperCase())}function W(r){return Object.entries(r).reduce((e,[t,s])=>(t==="mx"?(e.marginLeft=s,e.marginRight=s):t==="my"?(e.marginTop=s,e.marginBottom=s):t==="px"?(e.paddingLeft=s,e.paddingRight=s):t==="py"?(e.paddingTop=s,e.paddingBottom=s):t in l.shorthandPropsMap?e[R(l.shorthandPropsMap[t])]=s:e[t]=s,e),{})}function x(r){return Object.entries(r).map(([e,t])=>t?(e=F(e),typeof t=="number"&&(t=t+"px"),Array.isArray(t)&&(t="["+t.map(s=>typeof s=="number"?s+"px":s).join(",")+"]"),e+":"+t+";"):"").join(`
+`)}function b(r){return(...e)=>{let t=(0,l.default)(...e),s=(0,m.forwardRef)((a,$)=>{let{_active:k,_css:p,_dark:c,_focus:y,_focusVisible:h,_focusWithin:_,_hover:g,_target:C,_visited:S,_zx:u={},...P}=a;Object.entries(a).forEach(([f,T])=>{f.startsWith("_")&&(u[f.slice(1)]=T,delete P[f])});let n="";return k&&(n+=`
+          &:active {
+          ${x(k)}
+          }
+        `),c&&(n+=`
+          @media (prefers-color-scheme: dark) {
+          ${x(c)}
+          }
+        `),y&&(n+=`
+          &:focus {
+          ${x(y)}
+          }
+        `),h&&(n+=`
+          &:focus-visible {
+          ${x(h)}
+          }
+        `),_&&(n+=`
+          &:focus-within {
+          ${x(_)}
+          }
+        `),g&&(n+=`
+          &:hover {
+          ${x(g)}
+          }
+        `),C&&(n+=`
+          &:target {
+          ${x(C)}
+          }
+        `),S&&(n+=`
+          &:visited {
+          ${x(S)}
+          }
+        `),Object.values(u).some(f=>Array.isArray(f))||n?n=x(u)+n:(u=W(u),P.style={...P.style,...u}),(0,m.createElement)(r,{ref:$,...P,className:(0,l.classJoin)(t,p?p.includes(":")?(0,l.default)(p):p:void 0,n?(0,l.default)(n):void 0,a.className)})});return s.toString=()=>"."+t,s}}0&&(module.exports={css});
+//# sourceMappingURL=index.cjs.map

package/src/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["import { createElement, CSSProperties, FC, forwardRef, HTMLAttributes } from 'react'\nimport css, { classJoin, ShorthandProps, shorthandProps, shorthandPropsMap, TemplateStringProps } from '@slimr/css'\n\nexport { css }\nexport * from '@slimr/css'\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends { className?: HTMLAttributes<any>['className'] }> = FC<T & SCProps>\n\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, (x) => x[1].toUpperCase())\n}\n\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as any)\n}\n\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-ignore\n        v = '[' + v.map((v) => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport default function styled<C extends FC<any>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef((props: SCProps, ref) => {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-ignore\n          _zx[k.slice(1)] = v\n          // @ts-ignore\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some((v) => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = { ...rest.style, ..._zx } as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n"],"mappings":"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","names":["src_exports","__export","css","styled","__toCommonJS","import_react","import_css","__reExport","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","zxToCss","styled","Component","cssProps","className","css","CStyled","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr"]}

package/src/index.d.ts

@@ -0,0 +1,56 @@
+import { CSSProperties, HTMLAttributes, FC } from 'react';
+import { ShorthandProps } from '@slimr/css';
+export * from '@slimr/css';
+export { default as css } from '@slimr/css';
+
+/** A type that represents all the css properties + shorthand props */
+interface ZxProps extends CSSProperties, ShorthandProps {
+}
+type ZxP = ZxProps;
+type Zx = {
+    [k in keyof ZxP]: ZxP[k] | [ZxP[k] | null, ZxP[k]] | [ZxP[k] | null, ZxP[k] | null, ZxP[k]] | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]] | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]] | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]] | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]];
+};
+type _Props = {
+    [k in keyof Zx as `_${k}`]?: Zx[k];
+};
+interface SCProps extends _Props {
+    /** Like zx prop, but applies only on :active */
+    _active?: Zx;
+    className?: string;
+    /** A string of css or classname to be added to the component */
+    _css?: string;
+    /** Like zx prop, but applies only when user prefers dark theme */
+    _dark?: Zx;
+    /** Like zx prop, but applies only on :focus */
+    _focus?: Zx;
+    /** Like zx prop, but applies only on :focus-visible */
+    _focusVisible?: Zx;
+    /** Like zx prop, but applies only on :focus-within */
+    _focusWithin?: Zx;
+    /** Like zx prop, but applies only on :hover */
+    _hover?: Zx;
+    style?: CSSProperties;
+    /** Like zx prop, but applies only on :target */
+    _target?: Zx;
+    /** Like zx prop, but applies only on :visited */
+    _visited?: Zx;
+    /**
+     * Like style prop, but enhanced with features like chakra
+     *  - Array values are converted to media query breakpoints
+     *  - Numbers are converted to px
+     *  - Shorthand props are supported
+     */
+    _zx?: Zx;
+}
+/** Styled Component: Like FunctionalComponent but adds SCProps */
+type SC<T extends {
+    className?: HTMLAttributes<any>['className'];
+}> = FC<T & SCProps>;
+/**
+ * A lightweight alternative to styled-components
+ * @param function - a functional component to be styled; must accept a className prop
+ * @returns a function that accepts a template string of css returns a decorated functional component
+ */
+declare function styled<C extends FC<any>>(Component: C): (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<Parameters<C>[0]>;
+
+export { SC, SCProps, ZxProps, styled as default };

package/src/index.js

@@ -0,0 +1,35 @@
+import{createElement as C,forwardRef as S}from"react";import f,{classJoin as b,shorthandPropsMap as h}from"@slimr/css";export*from"@slimr/css";function $(n){return n.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function T(n){return n.replace(/-./g,e=>e[1].toUpperCase())}function A(n){return Object.entries(n).reduce((e,[t,r])=>(t==="mx"?(e.marginLeft=r,e.marginRight=r):t==="my"?(e.marginTop=r,e.marginBottom=r):t==="px"?(e.paddingLeft=r,e.paddingRight=r):t==="py"?(e.paddingTop=r,e.paddingBottom=r):t in h?e[T(h[t])]=r:e[t]=r,e),{})}function i(n){return Object.entries(n).map(([e,t])=>t?(e=$(e),typeof t=="number"&&(t=t+"px"),Array.isArray(t)&&(t="["+t.map(r=>typeof r=="number"?r+"px":r).join(",")+"]"),e+":"+t+";"):"").join(`
+`)}function j(n){return(...e)=>{let t=f(...e),r=S((u,_)=>{let{_active:p,_css:a,_dark:P,_focus:Z,_focusVisible:d,_focusWithin:m,_hover:k,_target:c,_visited:y,_zx:o={},...x}=u;Object.entries(u).forEach(([l,g])=>{l.startsWith("_")&&(o[l.slice(1)]=g,delete x[l])});let s="";return p&&(s+=`
+          &:active {
+          ${i(p)}
+          }
+        `),P&&(s+=`
+          @media (prefers-color-scheme: dark) {
+          ${i(P)}
+          }
+        `),Z&&(s+=`
+          &:focus {
+          ${i(Z)}
+          }
+        `),d&&(s+=`
+          &:focus-visible {
+          ${i(d)}
+          }
+        `),m&&(s+=`
+          &:focus-within {
+          ${i(m)}
+          }
+        `),k&&(s+=`
+          &:hover {
+          ${i(k)}
+          }
+        `),c&&(s+=`
+          &:target {
+          ${i(c)}
+          }
+        `),y&&(s+=`
+          &:visited {
+          ${i(y)}
+          }
+        `),Object.values(o).some(l=>Array.isArray(l))||s?s=i(o)+s:(o=A(o),x.style={...x.style,...o}),C(n,{ref:_,...x,className:b(t,a?a.includes(":")?f(a):a:void 0,s?f(s):void 0,u.className)})});return r.toString=()=>"."+t,r}}export{f as css,j as default};
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["import { createElement, CSSProperties, FC, forwardRef, HTMLAttributes } from 'react'\nimport css, { classJoin, ShorthandProps, shorthandProps, shorthandPropsMap, TemplateStringProps } from '@slimr/css'\n\nexport { css }\nexport * from '@slimr/css'\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends { className?: HTMLAttributes<any>['className'] }> = FC<T & SCProps>\n\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, (x) => x[1].toUpperCase())\n}\n\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as any)\n}\n\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-ignore\n        v = '[' + v.map((v) => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport default function styled<C extends FC<any>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef((props: SCProps, ref) => {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-ignore\n          _zx[k.slice(1)] = v\n          // @ts-ignore\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some((v) => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = { ...rest.style, ..._zx } as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n"],"mappings":"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","names":["createElement","forwardRef","css","classJoin","shorthandPropsMap","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","shorthandPropsMap","zxToCss","styled","Component","cssProps","className","css","CStyled","forwardRef","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr","createElement","classJoin"]}

package/src/index.ts

@@ -0,0 +1,223 @@
+import { createElement, CSSProperties, FC, forwardRef, HTMLAttributes } from 'react'
+import css, { classJoin, ShorthandProps, shorthandProps, shorthandPropsMap, TemplateStringProps } from '@slimr/css'
+
+export { css }
+export * from '@slimr/css'
+
+/** A type that represents all the css properties + shorthand props */
+export interface ZxProps extends CSSProperties, ShorthandProps {}
+type ZxP = ZxProps
+
+type Zx = {
+  [k in keyof ZxP]:
+    | ZxP[k]
+    | [ZxP[k] | null, ZxP[k]]
+    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+}
+
+type _Props = {
+  [k in keyof Zx as `_${k}`]?: Zx[k]
+}
+
+export interface SCProps extends _Props {
+  /** Like zx prop, but applies only on :active */
+  _active?: Zx
+  className?: string
+  /** A string of css or classname to be added to the component */
+  _css?: string
+  /** Like zx prop, but applies only when user prefers dark theme */
+  _dark?: Zx
+  /** Like zx prop, but applies only on :focus */
+  _focus?: Zx
+  /** Like zx prop, but applies only on :focus-visible */
+  _focusVisible?: Zx
+  /** Like zx prop, but applies only on :focus-within */
+  _focusWithin?: Zx
+  /** Like zx prop, but applies only on :hover */
+  _hover?: Zx
+  style?: CSSProperties
+  /** Like zx prop, but applies only on :target */
+  _target?: Zx
+  /** Like zx prop, but applies only on :visited */
+  _visited?: Zx
+  /**
+   * Like style prop, but enhanced with features like chakra
+   *  - Array values are converted to media query breakpoints
+   *  - Numbers are converted to px
+   *  - Shorthand props are supported
+   */
+  _zx?: Zx
+}
+
+/** Styled Component: Like FunctionalComponent but adds SCProps */
+export type SC<T extends { className?: HTMLAttributes<any>['className'] }> = FC<T & SCProps>
+
+function toKebabCase(str: string) {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function toCamelCase(str: string) {
+  return str.replace(/-./g, (x) => x[1].toUpperCase())
+}
+
+function expandShorthandProps(zx: Zx) {
+  return Object.entries(zx).reduce((acc, [k, v]) => {
+    if (k === 'mx') {
+      acc.marginLeft = v
+      acc.marginRight = v
+    } else if (k === 'my') {
+      acc.marginTop = v
+      acc.marginBottom = v
+    } else if (k === 'px') {
+      acc.paddingLeft = v
+      acc.paddingRight = v
+    } else if (k === 'py') {
+      acc.paddingTop = v
+      acc.paddingBottom = v
+    } else if (k in shorthandPropsMap) {
+      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v
+    } else {
+      acc[k] = v
+    }
+    return acc
+  }, {} as any)
+}
+
+function zxToCss(zx: Zx): string {
+  return Object.entries(zx)
+    .map(([k, v]) => {
+      if (!v) return ''
+      k = toKebabCase(k)
+      if (typeof v === 'number') v = v + 'px'
+      if (Array.isArray(v)) {
+        // @ts-ignore
+        v = '[' + v.map((v) => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'
+      }
+      return k + ':' + v + ';'
+    })
+    .join('\n')
+}
+
+/**
+ * A lightweight alternative to styled-components
+ * @param function - a functional component to be styled; must accept a className prop
+ * @returns a function that accepts a template string of css returns a decorated functional component
+ */
+export default function styled<C extends FC<any>>(Component: C) {
+  return (...cssProps: TemplateStringProps) => {
+    const className = css(...cssProps)
+    /**
+     * A functional component that accepts Styled Props
+     */
+    const CStyled = forwardRef((props: SCProps, ref) => {
+      let {
+        _active,
+        _css,
+        _dark,
+        _focus,
+        _focusVisible,
+        _focusWithin,
+        _hover,
+        _target,
+        _visited,
+        _zx = {},
+        ...rest
+      } = props
+
+      // Pluck out $ prefixed props
+      Object.entries(props).forEach(([k, v]) => {
+        if (k.startsWith('_')) {
+          // @ts-ignore
+          _zx[k.slice(1)] = v
+          // @ts-ignore
+          delete rest[k]
+        }
+      })
+
+      let cssStr = ''
+
+      if (_active) {
+        cssStr += `
+          &:active {
+          ${zxToCss(_active)}
+          }
+        `
+      }
+      if (_dark) {
+        cssStr += `
+          @media (prefers-color-scheme: dark) {
+          ${zxToCss(_dark)}
+          }
+        `
+      }
+      if (_focus) {
+        cssStr += `
+          &:focus {
+          ${zxToCss(_focus)}
+          }
+        `
+      }
+      if (_focusVisible) {
+        cssStr += `
+          &:focus-visible {
+          ${zxToCss(_focusVisible)}
+          }
+        `
+      }
+      if (_focusWithin) {
+        cssStr += `
+          &:focus-within {
+          ${zxToCss(_focusWithin)}
+          }
+        `
+      }
+      if (_hover) {
+        cssStr += `
+          &:hover {
+          ${zxToCss(_hover)}
+          }
+        `
+      }
+      if (_target) {
+        cssStr += `
+          &:target {
+          ${zxToCss(_target)}
+          }
+        `
+      }
+      if (_visited) {
+        cssStr += `
+          &:visited {
+          ${zxToCss(_visited)}
+          }
+        `
+      }
+
+      const hasMediaQuery = Object.values(_zx).some((v) => Array.isArray(v))
+      // If has media query styles, use css class. Otherwise favor inline styles
+      if (hasMediaQuery || cssStr) {
+        cssStr = zxToCss(_zx) + cssStr
+      } else {
+        _zx = expandShorthandProps(_zx)
+        rest.style = { ...rest.style, ..._zx } as CSSProperties
+      }
+
+      return createElement(Component, {
+        ref,
+        ...rest,
+        className: classJoin(
+          className,
+          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,
+          cssStr ? css(cssStr) : undefined,
+          props.className
+        ),
+      })
+    })
+    CStyled.toString = () => '.' + className
+    return CStyled as unknown as SC<Parameters<C>[0]>
+  }
+}

package/src/withHtmlTags.cjs

@@ -0,0 +1,35 @@
+"use strict";var j=Object.create;var F=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var y=(s,e)=>{for(var t in e)F(s,t,{get:e[t],enumerable:!0})},d=(s,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of q(e))!N.call(s,o)&&o!==t&&F(s,o,{get:()=>e[o],enumerable:!(n=A(e,o))||n.enumerable});return s},r=(s,e,t)=>(d(s,e,"default"),t&&d(t,e,"default")),w=(s,e,t)=>(t=s!=null?j(M(s)):{},d(e||!s||!s.__esModule?F(t,"default",{value:s,enumerable:!0}):t,s)),L=s=>d(F({},"__esModule",{value:!0}),s);var k={};y(k,{css:()=>T.default,default:()=>R});module.exports=L(k);var P={};y(P,{css:()=>T.default,default:()=>a});var H=require("react"),T=w(require("@slimr/css"),1);r(P,require("@slimr/css"));function O(s){return s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function z(s){return s.replace(/-./g,e=>e[1].toUpperCase())}function E(s){return Object.entries(s).reduce((e,[t,n])=>(t==="mx"?(e.marginLeft=n,e.marginRight=n):t==="my"?(e.marginTop=n,e.marginBottom=n):t==="px"?(e.paddingLeft=n,e.paddingRight=n):t==="py"?(e.paddingTop=n,e.paddingBottom=n):t in T.shorthandPropsMap?e[z(T.shorthandPropsMap[t])]=n:e[t]=n,e),{})}function i(s){return Object.entries(s).map(([e,t])=>t?(e=O(e),typeof t=="number"&&(t=t+"px"),Array.isArray(t)&&(t="["+t.map(n=>typeof n=="number"?n+"px":n).join(",")+"]"),e+":"+t+";"):"").join(`
+`)}function a(s){return(...e)=>{let t=(0,T.default)(...e),n=(0,H.forwardRef)((o,_)=>{let{_active:m,_css:S,_dark:f,_focus:x,_focusVisible:c,_focusWithin:h,_hover:b,_target:g,_visited:Z,_zx:l={},...C}=o;Object.entries(o).forEach(([p,$])=>{p.startsWith("_")&&(l[p.slice(1)]=$,delete C[p])});let u="";return m&&(u+=`
+          &:active {
+          ${i(m)}
+          }
+        `),f&&(u+=`
+          @media (prefers-color-scheme: dark) {
+          ${i(f)}
+          }
+        `),x&&(u+=`
+          &:focus {
+          ${i(x)}
+          }
+        `),c&&(u+=`
+          &:focus-visible {
+          ${i(c)}
+          }
+        `),h&&(u+=`
+          &:focus-within {
+          ${i(h)}
+          }
+        `),b&&(u+=`
+          &:hover {
+          ${i(b)}
+          }
+        `),g&&(u+=`
+          &:target {
+          ${i(g)}
+          }
+        `),Z&&(u+=`
+          &:visited {
+          ${i(Z)}
+          }
+        `),Object.values(l).some(p=>Array.isArray(p))||u?u=i(l)+u:(l=E(l),C.style={...C.style,...l}),(0,H.createElement)(s,{ref:_,...C,className:(0,T.classJoin)(t,S?S.includes(":")?(0,T.default)(S):S:void 0,u?(0,T.default)(u):void 0,o.className)})});return n.toString=()=>"."+t,n}}r(k,P,module.exports);var R=Object.assign(a,{a:(...s)=>a("a")(...s),abbr:(...s)=>a("abbr")(...s),address:(...s)=>a("address")(...s),area:(...s)=>a("area")(...s),article:(...s)=>a("article")(...s),aside:(...s)=>a("aside")(...s),audio:(...s)=>a("audio")(...s),b:(...s)=>a("b")(...s),blockquote:(...s)=>a("blockquote")(...s),br:(...s)=>a("br")(...s),button:(...s)=>a("button")(...s),caption:(...s)=>a("caption")(...s),cite:(...s)=>a("cite")(...s),code:(...s)=>a("code")(...s),col:(...s)=>a("col")(...s),colgroup:(...s)=>a("colgroup")(...s),dd:(...s)=>a("dd")(...s),del:(...s)=>a("del")(...s),details:(...s)=>a("details")(...s),dfn:(...s)=>a("dfn")(...s),dialog:(...s)=>a("dialog")(...s),div:(...s)=>a("div")(...s),dl:(...s)=>a("dl")(...s),dt:(...s)=>a("dt")(...s),em:(...s)=>a("em")(...s),embed:(...s)=>a("embed")(...s),fieldset:(...s)=>a("fieldset")(...s),figcaption:(...s)=>a("figcaption")(...s),figure:(...s)=>a("figure")(...s),footer:(...s)=>a("footer")(...s),form:(...s)=>a("form")(...s),h1:(...s)=>a("h1")(...s),h2:(...s)=>a("h2")(...s),h3:(...s)=>a("h3")(...s),h4:(...s)=>a("h4")(...s),h5:(...s)=>a("h5")(...s),h6:(...s)=>a("h6")(...s),header:(...s)=>a("header")(...s),hgroup:(...s)=>a("hgroup")(...s),hr:(...s)=>a("hr")(...s),i:(...s)=>a("i")(...s),iframe:(...s)=>a("iframe")(...s),img:(...s)=>a("img")(...s),input:(...s)=>a("input")(...s),ins:(...s)=>a("ins")(...s),kbd:(...s)=>a("kbd")(...s),label:(...s)=>a("label")(...s),legend:(...s)=>a("legend")(...s),li:(...s)=>a("li")(...s),main:(...s)=>a("main")(...s),map:(...s)=>a("map")(...s),mark:(...s)=>a("mark")(...s),meter:(...s)=>a("meter")(...s),nav:(...s)=>a("nav")(...s),object:(...s)=>a("object")(...s),ol:(...s)=>a("ol")(...s),optgroup:(...s)=>a("optgroup")(...s),option:(...s)=>a("option")(...s),output:(...s)=>a("output")(...s),p:(...s)=>a("p")(...s),picture:(...s)=>a("picture")(...s),pre:(...s)=>a("pre")(...s),progress:(...s)=>a("progress")(...s),q:(...s)=>a("q")(...s),rp:(...s)=>a("rp")(...s),rt:(...s)=>a("rt")(...s),ruby:(...s)=>a("ruby")(...s),s:(...s)=>a("s")(...s),samp:(...s)=>a("samp")(...s),section:(...s)=>a("section")(...s),select:(...s)=>a("select")(...s),small:(...s)=>a("small")(...s),span:(...s)=>a("span")(...s),strong:(...s)=>a("strong")(...s),sub:(...s)=>a("sub")(...s),summary:(...s)=>a("summary")(...s),sup:(...s)=>a("sup")(...s),table:(...s)=>a("table")(...s),tbody:(...s)=>a("tbody")(...s),td:(...s)=>a("td")(...s),textarea:(...s)=>a("textarea")(...s),tfoot:(...s)=>a("tfoot")(...s),th:(...s)=>a("th")(...s),thead:(...s)=>a("thead")(...s),time:(...s)=>a("time")(...s),tr:(...s)=>a("tr")(...s),u:(...s)=>a("u")(...s),ul:(...s)=>a("ul")(...s),video:(...s)=>a("video")(...s)});0&&(module.exports={css});
+//# sourceMappingURL=withHtmlTags.cjs.map

package/src/withHtmlTags.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["withHtmlTags.ts","index.ts"],"sourcesContent":["import { FC } from 'react'\nimport { TemplateStringProps } from '@slimr/css'\nimport styled from './index.js'\n\nexport * from './index.js'\n\n/** Shorthand type */\ntype unk = unknown\n/** Shorthand type */\ntype TSP = TemplateStringProps\n/** Shorthand type */\ntype HTP = JSX.IntrinsicElements\n\nexport default Object.assign(styled, {\n  /** creates a 'a' component with css applied */\n  a: (...p: TSP) => styled('a' as unk as FC<HTP['a']>)(...p),\n  /** creates a 'abbr' component with css applied */\n  abbr: (...p: TSP) => styled('abbr' as unk as FC<HTP['abbr']>)(...p),\n  /** creates a 'address' component with css applied */\n  address: (...p: TSP) => styled('address' as unk as FC<HTP['address']>)(...p),\n  /** creates a 'area' component with css applied */\n  area: (...p: TSP) => styled('area' as unk as FC<HTP['area']>)(...p),\n  /** creates a 'article' component with css applied */\n  article: (...p: TSP) => styled('article' as unk as FC<HTP['article']>)(...p),\n  /** creates a 'aside' component with css applied */\n  aside: (...p: TSP) => styled('aside' as unk as FC<HTP['aside']>)(...p),\n  /** creates a 'audio' component with css applied */\n  audio: (...p: TSP) => styled('audio' as unk as FC<HTP['audio']>)(...p),\n  /** creates a 'b' component with css applied */\n  b: (...p: TSP) => styled('b' as unk as FC<HTP['b']>)(...p),\n  /** creates a 'big' component with css applied; Deprecated so left out */\n  // big: (...p: TSP) => styled('big' as unk as FC<HTP['big']>)(...p),\n  /** creates a 'blockquote' component with css applied */\n  blockquote: (...p: TSP) => styled('blockquote' as unk as FC<HTP['blockquote']>)(...p),\n  /** creates a 'body' component with css applied; omitted bc doesnt seem useful */\n  // body: (...p: TSP) => styled('body' as unk as FC<HTP['body']>)(...p),\n  /** creates a 'br' component with css applied; omitted bc doesnt seem useful */\n  br: (...p: TSP) => styled('br' as unk as FC<HTP['br']>)(...p),\n  /** creates a 'button' component with css applied */\n  button: (...p: TSP) => styled('button' as unk as FC<HTP['button']>)(...p),\n  /** creates a 'caption' component with css applied */\n  caption: (...p: TSP) => styled('caption' as unk as FC<HTP['caption']>)(...p),\n  /** creates a 'cite' component with css applied */\n  cite: (...p: TSP) => styled('cite' as unk as FC<HTP['cite']>)(...p),\n  /** creates a 'code' component with css applied */\n  code: (...p: TSP) => styled('code' as unk as FC<HTP['code']>)(...p),\n  /** creates a 'col' component with css applied */\n  col: (...p: TSP) => styled('col' as unk as FC<HTP['col']>)(...p),\n  /** creates a 'colgroup' component with css applied */\n  colgroup: (...p: TSP) => styled('colgroup' as unk as FC<HTP['colgroup']>)(...p),\n  /** creates a 'dd' component with css applied */\n  dd: (...p: TSP) => styled('dd' as unk as FC<HTP['dd']>)(...p),\n  /** creates a 'del' component with css applied */\n  del: (...p: TSP) => styled('del' as unk as FC<HTP['del']>)(...p),\n  /** creates a 'details' component with css applied */\n  details: (...p: TSP) => styled('details' as unk as FC<HTP['details']>)(...p),\n  /** creates a 'dfn' component with css applied */\n  dfn: (...p: TSP) => styled('dfn' as unk as FC<HTP['dfn']>)(...p),\n  /** creates a 'dialog' component with css applied */\n  dialog: (...p: TSP) => styled('dialog' as unk as FC<HTP['dialog']>)(...p),\n  /** creates a 'div' component with css applied */\n  div: (...p: TSP) => styled('div' as unk as FC<HTP['div']>)(...p),\n  /** creates a 'dl' component with css applied */\n  dl: (...p: TSP) => styled('dl' as unk as FC<HTP['dl']>)(...p),\n  /** creates a 'dt' component with css applied */\n  dt: (...p: TSP) => styled('dt' as unk as FC<HTP['dt']>)(...p),\n  /** creates a 'em' component with css applied */\n  em: (...p: TSP) => styled('em' as unk as FC<HTP['em']>)(...p),\n  /** creates a 'embed' component with css applied */\n  embed: (...p: TSP) => styled('embed' as unk as FC<HTP['embed']>)(...p),\n  /** creates a 'fieldset' component with css applied */\n  fieldset: (...p: TSP) => styled('fieldset' as unk as FC<HTP['fieldset']>)(...p),\n  /** creates a 'figcaption' component with css applied */\n  figcaption: (...p: TSP) => styled('figcaption' as unk as FC<HTP['figcaption']>)(...p),\n  /** creates a 'figure' component with css applied */\n  figure: (...p: TSP) => styled('figure' as unk as FC<HTP['figure']>)(...p),\n  /** creates a 'footer' component with css applied */\n  footer: (...p: TSP) => styled('footer' as unk as FC<HTP['footer']>)(...p),\n  /** creates a 'form' component with css applied */\n  form: (...p: TSP) => styled('form' as unk as FC<HTP['form']>)(...p),\n  /** creates a 'h1' component with css applied */\n  h1: (...p: TSP) => styled('h1' as unk as FC<HTP['h1']>)(...p),\n  /** creates a 'h2' component with css applied */\n  h2: (...p: TSP) => styled('h2' as unk as FC<HTP['h2']>)(...p),\n  /** creates a 'h3' component with css applied */\n  h3: (...p: TSP) => styled('h3' as unk as FC<HTP['h3']>)(...p),\n  /** creates a 'h4' component with css applied */\n  h4: (...p: TSP) => styled('h4' as unk as FC<HTP['h4']>)(...p),\n  /** creates a 'h5' component with css applied */\n  h5: (...p: TSP) => styled('h5' as unk as FC<HTP['h5']>)(...p),\n  /** creates a 'h6' component with css applied */\n  h6: (...p: TSP) => styled('h6' as unk as FC<HTP['h6']>)(...p),\n  /** creates a 'header' component with css applied */\n  header: (...p: TSP) => styled('header' as unk as FC<HTP['header']>)(...p),\n  /** creates a 'hgroup' component with css applied */\n  hgroup: (...p: TSP) => styled('hgroup' as unk as FC<HTP['hgroup']>)(...p),\n  /** creates a 'hr' component with css applied */\n  hr: (...p: TSP) => styled('hr' as unk as FC<HTP['hr']>)(...p),\n  /** creates a 'i' component with css applied */\n  i: (...p: TSP) => styled('i' as unk as FC<HTP['i']>)(...p),\n  /** creates a 'iframe' component with css applied */\n  iframe: (...p: TSP) => styled('iframe' as unk as FC<HTP['iframe']>)(...p),\n  /** creates a 'img' component with css applied */\n  img: (...p: TSP) => styled('img' as unk as FC<HTP['img']>)(...p),\n  /** creates a 'input' component with css applied */\n  input: (...p: TSP) => styled('input' as unk as FC<HTP['input']>)(...p),\n  /** creates a 'ins' component with css applied */\n  ins: (...p: TSP) => styled('ins' as unk as FC<HTP['ins']>)(...p),\n  /** creates a 'kbd' component with css applied */\n  kbd: (...p: TSP) => styled('kbd' as unk as FC<HTP['kbd']>)(...p),\n  /** creates a 'label' component with css applied */\n  label: (...p: TSP) => styled('label' as unk as FC<HTP['label']>)(...p),\n  /** creates a 'legend' component with css applied */\n  legend: (...p: TSP) => styled('legend' as unk as FC<HTP['legend']>)(...p),\n  /** creates a 'li' component with css applied */\n  li: (...p: TSP) => styled('li' as unk as FC<HTP['li']>)(...p),\n  /** creates a 'main' component with css applied */\n  main: (...p: TSP) => styled('main' as unk as FC<HTP['main']>)(...p),\n  /** creates a 'map' component with css applied */\n  map: (...p: TSP) => styled('map' as unk as FC<HTP['map']>)(...p),\n  /** creates a 'mark' component with css applied */\n  mark: (...p: TSP) => styled('mark' as unk as FC<HTP['mark']>)(...p),\n  /** creates a 'meter' component with css applied */\n  meter: (...p: TSP) => styled('meter' as unk as FC<HTP['meter']>)(...p),\n  /** creates a 'nav' component with css applied */\n  nav: (...p: TSP) => styled('nav' as unk as FC<HTP['nav']>)(...p),\n  /** creates a 'object' component with css applied */\n  object: (...p: TSP) => styled('object' as unk as FC<HTP['object']>)(...p),\n  /** creates a 'ol' component with css applied */\n  ol: (...p: TSP) => styled('ol' as unk as FC<HTP['ol']>)(...p),\n  /** creates a 'optgroup' component with css applied */\n  optgroup: (...p: TSP) => styled('optgroup' as unk as FC<HTP['optgroup']>)(...p),\n  /** creates a 'option' component with css applied */\n  option: (...p: TSP) => styled('option' as unk as FC<HTP['option']>)(...p),\n  /** creates a 'output' component with css applied */\n  output: (...p: TSP) => styled('output' as unk as FC<HTP['output']>)(...p),\n  /** creates a 'p' component with css applied */\n  p: (...p: TSP) => styled('p' as unk as FC<HTP['p']>)(...p),\n  /** creates a 'picture' component with css applied */\n  picture: (...p: TSP) => styled('picture' as unk as FC<HTP['picture']>)(...p),\n  /** creates a 'pre' component with css applied */\n  pre: (...p: TSP) => styled('pre' as unk as FC<HTP['pre']>)(...p),\n  /** creates a 'progress' component with css applied */\n  progress: (...p: TSP) => styled('progress' as unk as FC<HTP['progress']>)(...p),\n  /** creates a 'q' component with css applied */\n  q: (...p: TSP) => styled('q' as unk as FC<HTP['q']>)(...p),\n  /** creates a 'rp' component with css applied */\n  rp: (...p: TSP) => styled('rp' as unk as FC<HTP['rp']>)(...p),\n  /** creates a 'rt' component with css applied */\n  rt: (...p: TSP) => styled('rt' as unk as FC<HTP['rt']>)(...p),\n  /** creates a 'ruby' component with css applied */\n  ruby: (...p: TSP) => styled('ruby' as unk as FC<HTP['ruby']>)(...p),\n  /** creates a 's' component with css applied */\n  s: (...p: TSP) => styled('s' as unk as FC<HTP['s']>)(...p),\n  /** creates a 'samp' component with css applied */\n  samp: (...p: TSP) => styled('samp' as unk as FC<HTP['samp']>)(...p),\n  /** creates a 'section' component with css applied */\n  section: (...p: TSP) => styled('section' as unk as FC<HTP['section']>)(...p),\n  /** creates a 'select' component with css applied */\n  select: (...p: TSP) => styled('select' as unk as FC<HTP['select']>)(...p),\n  /** creates a 'small' component with css applied */\n  small: (...p: TSP) => styled('small' as unk as FC<HTP['small']>)(...p),\n  /** creates a 'span' component with css applied */\n  span: (...p: TSP) => styled('span' as unk as FC<HTP['span']>)(...p),\n  /** creates a 'strong' component with css applied */\n  strong: (...p: TSP) => styled('strong' as unk as FC<HTP['strong']>)(...p),\n  /** creates a 'sub' component with css applied */\n  sub: (...p: TSP) => styled('sub' as unk as FC<HTP['sub']>)(...p),\n  /** creates a 'summary' component with css applied */\n  summary: (...p: TSP) => styled('summary' as unk as FC<HTP['summary']>)(...p),\n  /** creates a 'sup' component with css applied */\n  sup: (...p: TSP) => styled('sup' as unk as FC<HTP['sup']>)(...p),\n  /** creates a 'table' component with css applied */\n  table: (...p: TSP) => styled('table' as unk as FC<HTP['table']>)(...p),\n  /** creates a 'tbody' component with css applied */\n  tbody: (...p: TSP) => styled('tbody' as unk as FC<HTP['tbody']>)(...p),\n  /** creates a 'td' component with css applied */\n  td: (...p: TSP) => styled('td' as unk as FC<HTP['td']>)(...p),\n  /** creates a 'textarea' component with css applied */\n  textarea: (...p: TSP) => styled('textarea' as unk as FC<HTP['textarea']>)(...p),\n  /** creates a 'tfoot' component with css applied */\n  tfoot: (...p: TSP) => styled('tfoot' as unk as FC<HTP['tfoot']>)(...p),\n  /** creates a 'th' component with css applied */\n  th: (...p: TSP) => styled('th' as unk as FC<HTP['th']>)(...p),\n  /** creates a 'thead' component with css applied */\n  thead: (...p: TSP) => styled('thead' as unk as FC<HTP['thead']>)(...p),\n  /** creates a 'time' component with css applied */\n  time: (...p: TSP) => styled('time' as unk as FC<HTP['time']>)(...p),\n  /** creates a 'tr' component with css applied */\n  tr: (...p: TSP) => styled('tr' as unk as FC<HTP['tr']>)(...p),\n  /** creates a 'u' component with css applied */\n  u: (...p: TSP) => styled('u' as unk as FC<HTP['u']>)(...p),\n  /** creates a 'ul' component with css applied */\n  ul: (...p: TSP) => styled('ul' as unk as FC<HTP['ul']>)(...p),\n  /** creates a 'video' component with css applied */\n  video: (...p: TSP) => styled('video' as unk as FC<HTP['video']>)(...p),\n})\n","import { createElement, CSSProperties, FC, forwardRef, HTMLAttributes } from 'react'\nimport css, { classJoin, ShorthandProps, shorthandProps, shorthandPropsMap, TemplateStringProps } from '@slimr/css'\n\nexport { css }\nexport * from '@slimr/css'\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends { className?: HTMLAttributes<any>['className'] }> = FC<T & SCProps>\n\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, (x) => x[1].toUpperCase())\n}\n\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as any)\n}\n\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-ignore\n        v = '[' + v.map((v) => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport default function styled<C extends FC<any>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef((props: SCProps, ref) => {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-ignore\n          _zx[k.slice(1)] = v\n          // @ts-ignore\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some((v) => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = { ...rest.style, ..._zx } as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n"],"mappings":"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","names":["withHtmlTags_exports","__export","css","withHtmlTags_default","__toCommonJS","src_exports","__export","css","styled","import_react","import_css","__reExport","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","zxToCss","styled","Component","cssProps","className","css","CStyled","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr","__reExport","withHtmlTags_exports","src_exports","withHtmlTags_default","styled","p"]}

package/src/withHtmlTags.d.ts

@@ -0,0 +1,190 @@
+import styled, { SC } from './index.js';
+export { SCProps, ZxProps } from './index.js';
+import * as react from 'react';
+export * from '@slimr/css';
+export { default as css } from '@slimr/css';
+
+declare const _default: typeof styled & {
+    /** creates a 'a' component with css applied */
+    a: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>;
+    /** creates a 'abbr' component with css applied */
+    abbr: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'address' component with css applied */
+    address: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'area' component with css applied */
+    area: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>>;
+    /** creates a 'article' component with css applied */
+    article: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'aside' component with css applied */
+    aside: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'audio' component with css applied */
+    audio: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>>;
+    /** creates a 'b' component with css applied */
+    b: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'big' component with css applied; Deprecated so left out */
+    /** creates a 'blockquote' component with css applied */
+    blockquote: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>>;
+    /** creates a 'body' component with css applied; omitted bc doesnt seem useful */
+    /** creates a 'br' component with css applied; omitted bc doesnt seem useful */
+    br: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLBRElement>, HTMLBRElement>>;
+    /** creates a 'button' component with css applied */
+    button: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
+    /** creates a 'caption' component with css applied */
+    caption: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'cite' component with css applied */
+    cite: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'code' component with css applied */
+    code: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'col' component with css applied */
+    col: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>>;
+    /** creates a 'colgroup' component with css applied */
+    colgroup: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>>;
+    /** creates a 'dd' component with css applied */
+    dd: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'del' component with css applied */
+    del: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.DelHTMLAttributes<HTMLModElement>, HTMLModElement>>;
+    /** creates a 'details' component with css applied */
+    details: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>>;
+    /** creates a 'dfn' component with css applied */
+    dfn: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'dialog' component with css applied */
+    dialog: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>>;
+    /** creates a 'div' component with css applied */
+    div: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    /** creates a 'dl' component with css applied */
+    dl: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDListElement>, HTMLDListElement>>;
+    /** creates a 'dt' component with css applied */
+    dt: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'em' component with css applied */
+    em: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'embed' component with css applied */
+    embed: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>>;
+    /** creates a 'fieldset' component with css applied */
+    fieldset: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>>;
+    /** creates a 'figcaption' component with css applied */
+    figcaption: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'figure' component with css applied */
+    figure: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'footer' component with css applied */
+    footer: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'form' component with css applied */
+    form: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>>;
+    /** creates a 'h1' component with css applied */
+    h1: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+    /** creates a 'h2' component with css applied */
+    h2: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+    /** creates a 'h3' component with css applied */
+    h3: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+    /** creates a 'h4' component with css applied */
+    h4: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+    /** creates a 'h5' component with css applied */
+    h5: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+    /** creates a 'h6' component with css applied */
+    h6: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+    /** creates a 'header' component with css applied */
+    header: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'hgroup' component with css applied */
+    hgroup: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'hr' component with css applied */
+    hr: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHRElement>, HTMLHRElement>>;
+    /** creates a 'i' component with css applied */
+    i: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'iframe' component with css applied */
+    iframe: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>>;
+    /** creates a 'img' component with css applied */
+    img: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>;
+    /** creates a 'input' component with css applied */
+    input: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>;
+    /** creates a 'ins' component with css applied */
+    ins: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.InsHTMLAttributes<HTMLModElement>, HTMLModElement>>;
+    /** creates a 'kbd' component with css applied */
+    kbd: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'label' component with css applied */
+    label: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>;
+    /** creates a 'legend' component with css applied */
+    legend: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>>;
+    /** creates a 'li' component with css applied */
+    li: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
+    /** creates a 'main' component with css applied */
+    main: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'map' component with css applied */
+    map: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>>;
+    /** creates a 'mark' component with css applied */
+    mark: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'meter' component with css applied */
+    meter: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>>;
+    /** creates a 'nav' component with css applied */
+    nav: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'object' component with css applied */
+    object: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>>;
+    /** creates a 'ol' component with css applied */
+    ol: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>>;
+    /** creates a 'optgroup' component with css applied */
+    optgroup: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>>;
+    /** creates a 'option' component with css applied */
+    option: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>>;
+    /** creates a 'output' component with css applied */
+    output: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>>;
+    /** creates a 'p' component with css applied */
+    p: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>;
+    /** creates a 'picture' component with css applied */
+    picture: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'pre' component with css applied */
+    pre: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLPreElement>, HTMLPreElement>>;
+    /** creates a 'progress' component with css applied */
+    progress: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>>;
+    /** creates a 'q' component with css applied */
+    q: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>>;
+    /** creates a 'rp' component with css applied */
+    rp: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'rt' component with css applied */
+    rt: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'ruby' component with css applied */
+    ruby: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 's' component with css applied */
+    s: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'samp' component with css applied */
+    samp: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'section' component with css applied */
+    section: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'select' component with css applied */
+    select: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>>;
+    /** creates a 'small' component with css applied */
+    small: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'span' component with css applied */
+    span: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+    /** creates a 'strong' component with css applied */
+    strong: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'sub' component with css applied */
+    sub: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'summary' component with css applied */
+    summary: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'sup' component with css applied */
+    sup: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'table' component with css applied */
+    table: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>>;
+    /** creates a 'tbody' component with css applied */
+    tbody: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>>;
+    /** creates a 'td' component with css applied */
+    td: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>>;
+    /** creates a 'textarea' component with css applied */
+    textarea: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>>;
+    /** creates a 'tfoot' component with css applied */
+    tfoot: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>>;
+    /** creates a 'th' component with css applied */
+    th: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>>;
+    /** creates a 'thead' component with css applied */
+    thead: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>>;
+    /** creates a 'time' component with css applied */
+    time: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>>;
+    /** creates a 'tr' component with css applied */
+    tr: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>>;
+    /** creates a 'u' component with css applied */
+    u: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>>;
+    /** creates a 'ul' component with css applied */
+    ul: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>>;
+    /** creates a 'video' component with css applied */
+    video: (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<react.DetailedHTMLProps<react.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>>;
+};
+
+export { SC, _default as default };

package/src/withHtmlTags.js

@@ -0,0 +1,35 @@
+var g=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var Z=(s,e)=>{for(var t in e)g(s,t,{get:e[t],enumerable:!0})},b=(s,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let T of A(e))!q.call(s,T)&&T!==t&&g(s,T,{get:()=>e[T],enumerable:!(n=j(e,T))||n.enumerable});return s},r=(s,e,t)=>(b(s,e,"default"),t&&b(t,e,"default"));var l={};Z(l,{css:()=>p,default:()=>E});var P={};Z(P,{css:()=>p,default:()=>a});r(P,X);import{createElement as M,forwardRef as N}from"react";import p,{classJoin as w,shorthandPropsMap as y}from"@slimr/css";import*as X from"@slimr/css";function L(s){return s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function O(s){return s.replace(/-./g,e=>e[1].toUpperCase())}function z(s){return Object.entries(s).reduce((e,[t,n])=>(t==="mx"?(e.marginLeft=n,e.marginRight=n):t==="my"?(e.marginTop=n,e.marginBottom=n):t==="px"?(e.paddingLeft=n,e.paddingRight=n):t==="py"?(e.paddingTop=n,e.paddingBottom=n):t in y?e[O(y[t])]=n:e[t]=n,e),{})}function o(s){return Object.entries(s).map(([e,t])=>t?(e=L(e),typeof t=="number"&&(t=t+"px"),Array.isArray(t)&&(t="["+t.map(n=>typeof n=="number"?n+"px":n).join(",")+"]"),e+":"+t+";"):"").join(`
+`)}function a(s){return(...e)=>{let t=p(...e),n=N((T,_)=>{let{_active:d,_css:S,_dark:F,_focus:H,_focusVisible:m,_focusWithin:f,_hover:x,_target:c,_visited:h,_zx:i={},...C}=T;Object.entries(T).forEach(([k,$])=>{k.startsWith("_")&&(i[k.slice(1)]=$,delete C[k])});let u="";return d&&(u+=`
+          &:active {
+          ${o(d)}
+          }
+        `),F&&(u+=`
+          @media (prefers-color-scheme: dark) {
+          ${o(F)}
+          }
+        `),H&&(u+=`
+          &:focus {
+          ${o(H)}
+          }
+        `),m&&(u+=`
+          &:focus-visible {
+          ${o(m)}
+          }
+        `),f&&(u+=`
+          &:focus-within {
+          ${o(f)}
+          }
+        `),x&&(u+=`
+          &:hover {
+          ${o(x)}
+          }
+        `),c&&(u+=`
+          &:target {
+          ${o(c)}
+          }
+        `),h&&(u+=`
+          &:visited {
+          ${o(h)}
+          }
+        `),Object.values(i).some(k=>Array.isArray(k))||u?u=o(i)+u:(i=z(i),C.style={...C.style,...i}),M(s,{ref:_,...C,className:w(t,S?S.includes(":")?p(S):S:void 0,u?p(u):void 0,T.className)})});return n.toString=()=>"."+t,n}}r(l,P);var E=Object.assign(a,{a:(...s)=>a("a")(...s),abbr:(...s)=>a("abbr")(...s),address:(...s)=>a("address")(...s),area:(...s)=>a("area")(...s),article:(...s)=>a("article")(...s),aside:(...s)=>a("aside")(...s),audio:(...s)=>a("audio")(...s),b:(...s)=>a("b")(...s),blockquote:(...s)=>a("blockquote")(...s),br:(...s)=>a("br")(...s),button:(...s)=>a("button")(...s),caption:(...s)=>a("caption")(...s),cite:(...s)=>a("cite")(...s),code:(...s)=>a("code")(...s),col:(...s)=>a("col")(...s),colgroup:(...s)=>a("colgroup")(...s),dd:(...s)=>a("dd")(...s),del:(...s)=>a("del")(...s),details:(...s)=>a("details")(...s),dfn:(...s)=>a("dfn")(...s),dialog:(...s)=>a("dialog")(...s),div:(...s)=>a("div")(...s),dl:(...s)=>a("dl")(...s),dt:(...s)=>a("dt")(...s),em:(...s)=>a("em")(...s),embed:(...s)=>a("embed")(...s),fieldset:(...s)=>a("fieldset")(...s),figcaption:(...s)=>a("figcaption")(...s),figure:(...s)=>a("figure")(...s),footer:(...s)=>a("footer")(...s),form:(...s)=>a("form")(...s),h1:(...s)=>a("h1")(...s),h2:(...s)=>a("h2")(...s),h3:(...s)=>a("h3")(...s),h4:(...s)=>a("h4")(...s),h5:(...s)=>a("h5")(...s),h6:(...s)=>a("h6")(...s),header:(...s)=>a("header")(...s),hgroup:(...s)=>a("hgroup")(...s),hr:(...s)=>a("hr")(...s),i:(...s)=>a("i")(...s),iframe:(...s)=>a("iframe")(...s),img:(...s)=>a("img")(...s),input:(...s)=>a("input")(...s),ins:(...s)=>a("ins")(...s),kbd:(...s)=>a("kbd")(...s),label:(...s)=>a("label")(...s),legend:(...s)=>a("legend")(...s),li:(...s)=>a("li")(...s),main:(...s)=>a("main")(...s),map:(...s)=>a("map")(...s),mark:(...s)=>a("mark")(...s),meter:(...s)=>a("meter")(...s),nav:(...s)=>a("nav")(...s),object:(...s)=>a("object")(...s),ol:(...s)=>a("ol")(...s),optgroup:(...s)=>a("optgroup")(...s),option:(...s)=>a("option")(...s),output:(...s)=>a("output")(...s),p:(...s)=>a("p")(...s),picture:(...s)=>a("picture")(...s),pre:(...s)=>a("pre")(...s),progress:(...s)=>a("progress")(...s),q:(...s)=>a("q")(...s),rp:(...s)=>a("rp")(...s),rt:(...s)=>a("rt")(...s),ruby:(...s)=>a("ruby")(...s),s:(...s)=>a("s")(...s),samp:(...s)=>a("samp")(...s),section:(...s)=>a("section")(...s),select:(...s)=>a("select")(...s),small:(...s)=>a("small")(...s),span:(...s)=>a("span")(...s),strong:(...s)=>a("strong")(...s),sub:(...s)=>a("sub")(...s),summary:(...s)=>a("summary")(...s),sup:(...s)=>a("sup")(...s),table:(...s)=>a("table")(...s),tbody:(...s)=>a("tbody")(...s),td:(...s)=>a("td")(...s),textarea:(...s)=>a("textarea")(...s),tfoot:(...s)=>a("tfoot")(...s),th:(...s)=>a("th")(...s),thead:(...s)=>a("thead")(...s),time:(...s)=>a("time")(...s),tr:(...s)=>a("tr")(...s),u:(...s)=>a("u")(...s),ul:(...s)=>a("ul")(...s),video:(...s)=>a("video")(...s)});export{p as css,E as default};
+//# sourceMappingURL=withHtmlTags.js.map

package/src/withHtmlTags.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["withHtmlTags.ts","index.ts"],"sourcesContent":["import { FC } from 'react'\nimport { TemplateStringProps } from '@slimr/css'\nimport styled from './index.js'\n\nexport * from './index.js'\n\n/** Shorthand type */\ntype unk = unknown\n/** Shorthand type */\ntype TSP = TemplateStringProps\n/** Shorthand type */\ntype HTP = JSX.IntrinsicElements\n\nexport default Object.assign(styled, {\n  /** creates a 'a' component with css applied */\n  a: (...p: TSP) => styled('a' as unk as FC<HTP['a']>)(...p),\n  /** creates a 'abbr' component with css applied */\n  abbr: (...p: TSP) => styled('abbr' as unk as FC<HTP['abbr']>)(...p),\n  /** creates a 'address' component with css applied */\n  address: (...p: TSP) => styled('address' as unk as FC<HTP['address']>)(...p),\n  /** creates a 'area' component with css applied */\n  area: (...p: TSP) => styled('area' as unk as FC<HTP['area']>)(...p),\n  /** creates a 'article' component with css applied */\n  article: (...p: TSP) => styled('article' as unk as FC<HTP['article']>)(...p),\n  /** creates a 'aside' component with css applied */\n  aside: (...p: TSP) => styled('aside' as unk as FC<HTP['aside']>)(...p),\n  /** creates a 'audio' component with css applied */\n  audio: (...p: TSP) => styled('audio' as unk as FC<HTP['audio']>)(...p),\n  /** creates a 'b' component with css applied */\n  b: (...p: TSP) => styled('b' as unk as FC<HTP['b']>)(...p),\n  /** creates a 'big' component with css applied; Deprecated so left out */\n  // big: (...p: TSP) => styled('big' as unk as FC<HTP['big']>)(...p),\n  /** creates a 'blockquote' component with css applied */\n  blockquote: (...p: TSP) => styled('blockquote' as unk as FC<HTP['blockquote']>)(...p),\n  /** creates a 'body' component with css applied; omitted bc doesnt seem useful */\n  // body: (...p: TSP) => styled('body' as unk as FC<HTP['body']>)(...p),\n  /** creates a 'br' component with css applied; omitted bc doesnt seem useful */\n  br: (...p: TSP) => styled('br' as unk as FC<HTP['br']>)(...p),\n  /** creates a 'button' component with css applied */\n  button: (...p: TSP) => styled('button' as unk as FC<HTP['button']>)(...p),\n  /** creates a 'caption' component with css applied */\n  caption: (...p: TSP) => styled('caption' as unk as FC<HTP['caption']>)(...p),\n  /** creates a 'cite' component with css applied */\n  cite: (...p: TSP) => styled('cite' as unk as FC<HTP['cite']>)(...p),\n  /** creates a 'code' component with css applied */\n  code: (...p: TSP) => styled('code' as unk as FC<HTP['code']>)(...p),\n  /** creates a 'col' component with css applied */\n  col: (...p: TSP) => styled('col' as unk as FC<HTP['col']>)(...p),\n  /** creates a 'colgroup' component with css applied */\n  colgroup: (...p: TSP) => styled('colgroup' as unk as FC<HTP['colgroup']>)(...p),\n  /** creates a 'dd' component with css applied */\n  dd: (...p: TSP) => styled('dd' as unk as FC<HTP['dd']>)(...p),\n  /** creates a 'del' component with css applied */\n  del: (...p: TSP) => styled('del' as unk as FC<HTP['del']>)(...p),\n  /** creates a 'details' component with css applied */\n  details: (...p: TSP) => styled('details' as unk as FC<HTP['details']>)(...p),\n  /** creates a 'dfn' component with css applied */\n  dfn: (...p: TSP) => styled('dfn' as unk as FC<HTP['dfn']>)(...p),\n  /** creates a 'dialog' component with css applied */\n  dialog: (...p: TSP) => styled('dialog' as unk as FC<HTP['dialog']>)(...p),\n  /** creates a 'div' component with css applied */\n  div: (...p: TSP) => styled('div' as unk as FC<HTP['div']>)(...p),\n  /** creates a 'dl' component with css applied */\n  dl: (...p: TSP) => styled('dl' as unk as FC<HTP['dl']>)(...p),\n  /** creates a 'dt' component with css applied */\n  dt: (...p: TSP) => styled('dt' as unk as FC<HTP['dt']>)(...p),\n  /** creates a 'em' component with css applied */\n  em: (...p: TSP) => styled('em' as unk as FC<HTP['em']>)(...p),\n  /** creates a 'embed' component with css applied */\n  embed: (...p: TSP) => styled('embed' as unk as FC<HTP['embed']>)(...p),\n  /** creates a 'fieldset' component with css applied */\n  fieldset: (...p: TSP) => styled('fieldset' as unk as FC<HTP['fieldset']>)(...p),\n  /** creates a 'figcaption' component with css applied */\n  figcaption: (...p: TSP) => styled('figcaption' as unk as FC<HTP['figcaption']>)(...p),\n  /** creates a 'figure' component with css applied */\n  figure: (...p: TSP) => styled('figure' as unk as FC<HTP['figure']>)(...p),\n  /** creates a 'footer' component with css applied */\n  footer: (...p: TSP) => styled('footer' as unk as FC<HTP['footer']>)(...p),\n  /** creates a 'form' component with css applied */\n  form: (...p: TSP) => styled('form' as unk as FC<HTP['form']>)(...p),\n  /** creates a 'h1' component with css applied */\n  h1: (...p: TSP) => styled('h1' as unk as FC<HTP['h1']>)(...p),\n  /** creates a 'h2' component with css applied */\n  h2: (...p: TSP) => styled('h2' as unk as FC<HTP['h2']>)(...p),\n  /** creates a 'h3' component with css applied */\n  h3: (...p: TSP) => styled('h3' as unk as FC<HTP['h3']>)(...p),\n  /** creates a 'h4' component with css applied */\n  h4: (...p: TSP) => styled('h4' as unk as FC<HTP['h4']>)(...p),\n  /** creates a 'h5' component with css applied */\n  h5: (...p: TSP) => styled('h5' as unk as FC<HTP['h5']>)(...p),\n  /** creates a 'h6' component with css applied */\n  h6: (...p: TSP) => styled('h6' as unk as FC<HTP['h6']>)(...p),\n  /** creates a 'header' component with css applied */\n  header: (...p: TSP) => styled('header' as unk as FC<HTP['header']>)(...p),\n  /** creates a 'hgroup' component with css applied */\n  hgroup: (...p: TSP) => styled('hgroup' as unk as FC<HTP['hgroup']>)(...p),\n  /** creates a 'hr' component with css applied */\n  hr: (...p: TSP) => styled('hr' as unk as FC<HTP['hr']>)(...p),\n  /** creates a 'i' component with css applied */\n  i: (...p: TSP) => styled('i' as unk as FC<HTP['i']>)(...p),\n  /** creates a 'iframe' component with css applied */\n  iframe: (...p: TSP) => styled('iframe' as unk as FC<HTP['iframe']>)(...p),\n  /** creates a 'img' component with css applied */\n  img: (...p: TSP) => styled('img' as unk as FC<HTP['img']>)(...p),\n  /** creates a 'input' component with css applied */\n  input: (...p: TSP) => styled('input' as unk as FC<HTP['input']>)(...p),\n  /** creates a 'ins' component with css applied */\n  ins: (...p: TSP) => styled('ins' as unk as FC<HTP['ins']>)(...p),\n  /** creates a 'kbd' component with css applied */\n  kbd: (...p: TSP) => styled('kbd' as unk as FC<HTP['kbd']>)(...p),\n  /** creates a 'label' component with css applied */\n  label: (...p: TSP) => styled('label' as unk as FC<HTP['label']>)(...p),\n  /** creates a 'legend' component with css applied */\n  legend: (...p: TSP) => styled('legend' as unk as FC<HTP['legend']>)(...p),\n  /** creates a 'li' component with css applied */\n  li: (...p: TSP) => styled('li' as unk as FC<HTP['li']>)(...p),\n  /** creates a 'main' component with css applied */\n  main: (...p: TSP) => styled('main' as unk as FC<HTP['main']>)(...p),\n  /** creates a 'map' component with css applied */\n  map: (...p: TSP) => styled('map' as unk as FC<HTP['map']>)(...p),\n  /** creates a 'mark' component with css applied */\n  mark: (...p: TSP) => styled('mark' as unk as FC<HTP['mark']>)(...p),\n  /** creates a 'meter' component with css applied */\n  meter: (...p: TSP) => styled('meter' as unk as FC<HTP['meter']>)(...p),\n  /** creates a 'nav' component with css applied */\n  nav: (...p: TSP) => styled('nav' as unk as FC<HTP['nav']>)(...p),\n  /** creates a 'object' component with css applied */\n  object: (...p: TSP) => styled('object' as unk as FC<HTP['object']>)(...p),\n  /** creates a 'ol' component with css applied */\n  ol: (...p: TSP) => styled('ol' as unk as FC<HTP['ol']>)(...p),\n  /** creates a 'optgroup' component with css applied */\n  optgroup: (...p: TSP) => styled('optgroup' as unk as FC<HTP['optgroup']>)(...p),\n  /** creates a 'option' component with css applied */\n  option: (...p: TSP) => styled('option' as unk as FC<HTP['option']>)(...p),\n  /** creates a 'output' component with css applied */\n  output: (...p: TSP) => styled('output' as unk as FC<HTP['output']>)(...p),\n  /** creates a 'p' component with css applied */\n  p: (...p: TSP) => styled('p' as unk as FC<HTP['p']>)(...p),\n  /** creates a 'picture' component with css applied */\n  picture: (...p: TSP) => styled('picture' as unk as FC<HTP['picture']>)(...p),\n  /** creates a 'pre' component with css applied */\n  pre: (...p: TSP) => styled('pre' as unk as FC<HTP['pre']>)(...p),\n  /** creates a 'progress' component with css applied */\n  progress: (...p: TSP) => styled('progress' as unk as FC<HTP['progress']>)(...p),\n  /** creates a 'q' component with css applied */\n  q: (...p: TSP) => styled('q' as unk as FC<HTP['q']>)(...p),\n  /** creates a 'rp' component with css applied */\n  rp: (...p: TSP) => styled('rp' as unk as FC<HTP['rp']>)(...p),\n  /** creates a 'rt' component with css applied */\n  rt: (...p: TSP) => styled('rt' as unk as FC<HTP['rt']>)(...p),\n  /** creates a 'ruby' component with css applied */\n  ruby: (...p: TSP) => styled('ruby' as unk as FC<HTP['ruby']>)(...p),\n  /** creates a 's' component with css applied */\n  s: (...p: TSP) => styled('s' as unk as FC<HTP['s']>)(...p),\n  /** creates a 'samp' component with css applied */\n  samp: (...p: TSP) => styled('samp' as unk as FC<HTP['samp']>)(...p),\n  /** creates a 'section' component with css applied */\n  section: (...p: TSP) => styled('section' as unk as FC<HTP['section']>)(...p),\n  /** creates a 'select' component with css applied */\n  select: (...p: TSP) => styled('select' as unk as FC<HTP['select']>)(...p),\n  /** creates a 'small' component with css applied */\n  small: (...p: TSP) => styled('small' as unk as FC<HTP['small']>)(...p),\n  /** creates a 'span' component with css applied */\n  span: (...p: TSP) => styled('span' as unk as FC<HTP['span']>)(...p),\n  /** creates a 'strong' component with css applied */\n  strong: (...p: TSP) => styled('strong' as unk as FC<HTP['strong']>)(...p),\n  /** creates a 'sub' component with css applied */\n  sub: (...p: TSP) => styled('sub' as unk as FC<HTP['sub']>)(...p),\n  /** creates a 'summary' component with css applied */\n  summary: (...p: TSP) => styled('summary' as unk as FC<HTP['summary']>)(...p),\n  /** creates a 'sup' component with css applied */\n  sup: (...p: TSP) => styled('sup' as unk as FC<HTP['sup']>)(...p),\n  /** creates a 'table' component with css applied */\n  table: (...p: TSP) => styled('table' as unk as FC<HTP['table']>)(...p),\n  /** creates a 'tbody' component with css applied */\n  tbody: (...p: TSP) => styled('tbody' as unk as FC<HTP['tbody']>)(...p),\n  /** creates a 'td' component with css applied */\n  td: (...p: TSP) => styled('td' as unk as FC<HTP['td']>)(...p),\n  /** creates a 'textarea' component with css applied */\n  textarea: (...p: TSP) => styled('textarea' as unk as FC<HTP['textarea']>)(...p),\n  /** creates a 'tfoot' component with css applied */\n  tfoot: (...p: TSP) => styled('tfoot' as unk as FC<HTP['tfoot']>)(...p),\n  /** creates a 'th' component with css applied */\n  th: (...p: TSP) => styled('th' as unk as FC<HTP['th']>)(...p),\n  /** creates a 'thead' component with css applied */\n  thead: (...p: TSP) => styled('thead' as unk as FC<HTP['thead']>)(...p),\n  /** creates a 'time' component with css applied */\n  time: (...p: TSP) => styled('time' as unk as FC<HTP['time']>)(...p),\n  /** creates a 'tr' component with css applied */\n  tr: (...p: TSP) => styled('tr' as unk as FC<HTP['tr']>)(...p),\n  /** creates a 'u' component with css applied */\n  u: (...p: TSP) => styled('u' as unk as FC<HTP['u']>)(...p),\n  /** creates a 'ul' component with css applied */\n  ul: (...p: TSP) => styled('ul' as unk as FC<HTP['ul']>)(...p),\n  /** creates a 'video' component with css applied */\n  video: (...p: TSP) => styled('video' as unk as FC<HTP['video']>)(...p),\n})\n","import { createElement, CSSProperties, FC, forwardRef, HTMLAttributes } from 'react'\nimport css, { classJoin, ShorthandProps, shorthandProps, shorthandPropsMap, TemplateStringProps } from '@slimr/css'\n\nexport { css }\nexport * from '@slimr/css'\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends { className?: HTMLAttributes<any>['className'] }> = FC<T & SCProps>\n\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, (x) => x[1].toUpperCase())\n}\n\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as any)\n}\n\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-ignore\n        v = '[' + v.map((v) => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport default function styled<C extends FC<any>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef((props: SCProps, ref) => {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-ignore\n          _zx[k.slice(1)] = v\n          // @ts-ignore\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some((v) => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = { ...rest.style, ..._zx } as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n"],"mappings":"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","names":["withHtmlTags_exports","__export","css","withHtmlTags_default","src_exports","__export","css","styled","__reExport","css_star","createElement","forwardRef","classJoin","shorthandPropsMap","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","shorthandPropsMap","zxToCss","styled","Component","cssProps","className","css","CStyled","forwardRef","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr","createElement","classJoin","__reExport","withHtmlTags_exports","src_exports","withHtmlTags_default","styled","p"]}

package/src/withHtmlTags.ts

@@ -0,0 +1,197 @@
+import { FC } from 'react'
+import { TemplateStringProps } from '@slimr/css'
+import styled from './index.js'
+
+export * from './index.js'
+
+/** Shorthand type */
+type unk = unknown
+/** Shorthand type */
+type TSP = TemplateStringProps
+/** Shorthand type */
+type HTP = JSX.IntrinsicElements
+
+export default Object.assign(styled, {
+  /** creates a 'a' component with css applied */
+  a: (...p: TSP) => styled('a' as unk as FC<HTP['a']>)(...p),
+  /** creates a 'abbr' component with css applied */
+  abbr: (...p: TSP) => styled('abbr' as unk as FC<HTP['abbr']>)(...p),
+  /** creates a 'address' component with css applied */
+  address: (...p: TSP) => styled('address' as unk as FC<HTP['address']>)(...p),
+  /** creates a 'area' component with css applied */
+  area: (...p: TSP) => styled('area' as unk as FC<HTP['area']>)(...p),
+  /** creates a 'article' component with css applied */
+  article: (...p: TSP) => styled('article' as unk as FC<HTP['article']>)(...p),
+  /** creates a 'aside' component with css applied */
+  aside: (...p: TSP) => styled('aside' as unk as FC<HTP['aside']>)(...p),
+  /** creates a 'audio' component with css applied */
+  audio: (...p: TSP) => styled('audio' as unk as FC<HTP['audio']>)(...p),
+  /** creates a 'b' component with css applied */
+  b: (...p: TSP) => styled('b' as unk as FC<HTP['b']>)(...p),
+  /** creates a 'big' component with css applied; Deprecated so left out */
+  // big: (...p: TSP) => styled('big' as unk as FC<HTP['big']>)(...p),
+  /** creates a 'blockquote' component with css applied */
+  blockquote: (...p: TSP) => styled('blockquote' as unk as FC<HTP['blockquote']>)(...p),
+  /** creates a 'body' component with css applied; omitted bc doesnt seem useful */
+  // body: (...p: TSP) => styled('body' as unk as FC<HTP['body']>)(...p),
+  /** creates a 'br' component with css applied; omitted bc doesnt seem useful */
+  br: (...p: TSP) => styled('br' as unk as FC<HTP['br']>)(...p),
+  /** creates a 'button' component with css applied */
+  button: (...p: TSP) => styled('button' as unk as FC<HTP['button']>)(...p),
+  /** creates a 'caption' component with css applied */
+  caption: (...p: TSP) => styled('caption' as unk as FC<HTP['caption']>)(...p),
+  /** creates a 'cite' component with css applied */
+  cite: (...p: TSP) => styled('cite' as unk as FC<HTP['cite']>)(...p),
+  /** creates a 'code' component with css applied */
+  code: (...p: TSP) => styled('code' as unk as FC<HTP['code']>)(...p),
+  /** creates a 'col' component with css applied */
+  col: (...p: TSP) => styled('col' as unk as FC<HTP['col']>)(...p),
+  /** creates a 'colgroup' component with css applied */
+  colgroup: (...p: TSP) => styled('colgroup' as unk as FC<HTP['colgroup']>)(...p),
+  /** creates a 'dd' component with css applied */
+  dd: (...p: TSP) => styled('dd' as unk as FC<HTP['dd']>)(...p),
+  /** creates a 'del' component with css applied */
+  del: (...p: TSP) => styled('del' as unk as FC<HTP['del']>)(...p),
+  /** creates a 'details' component with css applied */
+  details: (...p: TSP) => styled('details' as unk as FC<HTP['details']>)(...p),
+  /** creates a 'dfn' component with css applied */
+  dfn: (...p: TSP) => styled('dfn' as unk as FC<HTP['dfn']>)(...p),
+  /** creates a 'dialog' component with css applied */
+  dialog: (...p: TSP) => styled('dialog' as unk as FC<HTP['dialog']>)(...p),
+  /** creates a 'div' component with css applied */
+  div: (...p: TSP) => styled('div' as unk as FC<HTP['div']>)(...p),
+  /** creates a 'dl' component with css applied */
+  dl: (...p: TSP) => styled('dl' as unk as FC<HTP['dl']>)(...p),
+  /** creates a 'dt' component with css applied */
+  dt: (...p: TSP) => styled('dt' as unk as FC<HTP['dt']>)(...p),
+  /** creates a 'em' component with css applied */
+  em: (...p: TSP) => styled('em' as unk as FC<HTP['em']>)(...p),
+  /** creates a 'embed' component with css applied */
+  embed: (...p: TSP) => styled('embed' as unk as FC<HTP['embed']>)(...p),
+  /** creates a 'fieldset' component with css applied */
+  fieldset: (...p: TSP) => styled('fieldset' as unk as FC<HTP['fieldset']>)(...p),
+  /** creates a 'figcaption' component with css applied */
+  figcaption: (...p: TSP) => styled('figcaption' as unk as FC<HTP['figcaption']>)(...p),
+  /** creates a 'figure' component with css applied */
+  figure: (...p: TSP) => styled('figure' as unk as FC<HTP['figure']>)(...p),
+  /** creates a 'footer' component with css applied */
+  footer: (...p: TSP) => styled('footer' as unk as FC<HTP['footer']>)(...p),
+  /** creates a 'form' component with css applied */
+  form: (...p: TSP) => styled('form' as unk as FC<HTP['form']>)(...p),
+  /** creates a 'h1' component with css applied */
+  h1: (...p: TSP) => styled('h1' as unk as FC<HTP['h1']>)(...p),
+  /** creates a 'h2' component with css applied */
+  h2: (...p: TSP) => styled('h2' as unk as FC<HTP['h2']>)(...p),
+  /** creates a 'h3' component with css applied */
+  h3: (...p: TSP) => styled('h3' as unk as FC<HTP['h3']>)(...p),
+  /** creates a 'h4' component with css applied */
+  h4: (...p: TSP) => styled('h4' as unk as FC<HTP['h4']>)(...p),
+  /** creates a 'h5' component with css applied */
+  h5: (...p: TSP) => styled('h5' as unk as FC<HTP['h5']>)(...p),
+  /** creates a 'h6' component with css applied */
+  h6: (...p: TSP) => styled('h6' as unk as FC<HTP['h6']>)(...p),
+  /** creates a 'header' component with css applied */
+  header: (...p: TSP) => styled('header' as unk as FC<HTP['header']>)(...p),
+  /** creates a 'hgroup' component with css applied */
+  hgroup: (...p: TSP) => styled('hgroup' as unk as FC<HTP['hgroup']>)(...p),
+  /** creates a 'hr' component with css applied */
+  hr: (...p: TSP) => styled('hr' as unk as FC<HTP['hr']>)(...p),
+  /** creates a 'i' component with css applied */
+  i: (...p: TSP) => styled('i' as unk as FC<HTP['i']>)(...p),
+  /** creates a 'iframe' component with css applied */
+  iframe: (...p: TSP) => styled('iframe' as unk as FC<HTP['iframe']>)(...p),
+  /** creates a 'img' component with css applied */
+  img: (...p: TSP) => styled('img' as unk as FC<HTP['img']>)(...p),
+  /** creates a 'input' component with css applied */
+  input: (...p: TSP) => styled('input' as unk as FC<HTP['input']>)(...p),
+  /** creates a 'ins' component with css applied */
+  ins: (...p: TSP) => styled('ins' as unk as FC<HTP['ins']>)(...p),
+  /** creates a 'kbd' component with css applied */
+  kbd: (...p: TSP) => styled('kbd' as unk as FC<HTP['kbd']>)(...p),
+  /** creates a 'label' component with css applied */
+  label: (...p: TSP) => styled('label' as unk as FC<HTP['label']>)(...p),
+  /** creates a 'legend' component with css applied */
+  legend: (...p: TSP) => styled('legend' as unk as FC<HTP['legend']>)(...p),
+  /** creates a 'li' component with css applied */
+  li: (...p: TSP) => styled('li' as unk as FC<HTP['li']>)(...p),
+  /** creates a 'main' component with css applied */
+  main: (...p: TSP) => styled('main' as unk as FC<HTP['main']>)(...p),
+  /** creates a 'map' component with css applied */
+  map: (...p: TSP) => styled('map' as unk as FC<HTP['map']>)(...p),
+  /** creates a 'mark' component with css applied */
+  mark: (...p: TSP) => styled('mark' as unk as FC<HTP['mark']>)(...p),
+  /** creates a 'meter' component with css applied */
+  meter: (...p: TSP) => styled('meter' as unk as FC<HTP['meter']>)(...p),
+  /** creates a 'nav' component with css applied */
+  nav: (...p: TSP) => styled('nav' as unk as FC<HTP['nav']>)(...p),
+  /** creates a 'object' component with css applied */
+  object: (...p: TSP) => styled('object' as unk as FC<HTP['object']>)(...p),
+  /** creates a 'ol' component with css applied */
+  ol: (...p: TSP) => styled('ol' as unk as FC<HTP['ol']>)(...p),
+  /** creates a 'optgroup' component with css applied */
+  optgroup: (...p: TSP) => styled('optgroup' as unk as FC<HTP['optgroup']>)(...p),
+  /** creates a 'option' component with css applied */
+  option: (...p: TSP) => styled('option' as unk as FC<HTP['option']>)(...p),
+  /** creates a 'output' component with css applied */
+  output: (...p: TSP) => styled('output' as unk as FC<HTP['output']>)(...p),
+  /** creates a 'p' component with css applied */
+  p: (...p: TSP) => styled('p' as unk as FC<HTP['p']>)(...p),
+  /** creates a 'picture' component with css applied */
+  picture: (...p: TSP) => styled('picture' as unk as FC<HTP['picture']>)(...p),
+  /** creates a 'pre' component with css applied */
+  pre: (...p: TSP) => styled('pre' as unk as FC<HTP['pre']>)(...p),
+  /** creates a 'progress' component with css applied */
+  progress: (...p: TSP) => styled('progress' as unk as FC<HTP['progress']>)(...p),
+  /** creates a 'q' component with css applied */
+  q: (...p: TSP) => styled('q' as unk as FC<HTP['q']>)(...p),
+  /** creates a 'rp' component with css applied */
+  rp: (...p: TSP) => styled('rp' as unk as FC<HTP['rp']>)(...p),
+  /** creates a 'rt' component with css applied */
+  rt: (...p: TSP) => styled('rt' as unk as FC<HTP['rt']>)(...p),
+  /** creates a 'ruby' component with css applied */
+  ruby: (...p: TSP) => styled('ruby' as unk as FC<HTP['ruby']>)(...p),
+  /** creates a 's' component with css applied */
+  s: (...p: TSP) => styled('s' as unk as FC<HTP['s']>)(...p),
+  /** creates a 'samp' component with css applied */
+  samp: (...p: TSP) => styled('samp' as unk as FC<HTP['samp']>)(...p),
+  /** creates a 'section' component with css applied */
+  section: (...p: TSP) => styled('section' as unk as FC<HTP['section']>)(...p),
+  /** creates a 'select' component with css applied */
+  select: (...p: TSP) => styled('select' as unk as FC<HTP['select']>)(...p),
+  /** creates a 'small' component with css applied */
+  small: (...p: TSP) => styled('small' as unk as FC<HTP['small']>)(...p),
+  /** creates a 'span' component with css applied */
+  span: (...p: TSP) => styled('span' as unk as FC<HTP['span']>)(...p),
+  /** creates a 'strong' component with css applied */
+  strong: (...p: TSP) => styled('strong' as unk as FC<HTP['strong']>)(...p),
+  /** creates a 'sub' component with css applied */
+  sub: (...p: TSP) => styled('sub' as unk as FC<HTP['sub']>)(...p),
+  /** creates a 'summary' component with css applied */
+  summary: (...p: TSP) => styled('summary' as unk as FC<HTP['summary']>)(...p),
+  /** creates a 'sup' component with css applied */
+  sup: (...p: TSP) => styled('sup' as unk as FC<HTP['sup']>)(...p),
+  /** creates a 'table' component with css applied */
+  table: (...p: TSP) => styled('table' as unk as FC<HTP['table']>)(...p),
+  /** creates a 'tbody' component with css applied */
+  tbody: (...p: TSP) => styled('tbody' as unk as FC<HTP['tbody']>)(...p),
+  /** creates a 'td' component with css applied */
+  td: (...p: TSP) => styled('td' as unk as FC<HTP['td']>)(...p),
+  /** creates a 'textarea' component with css applied */
+  textarea: (...p: TSP) => styled('textarea' as unk as FC<HTP['textarea']>)(...p),
+  /** creates a 'tfoot' component with css applied */
+  tfoot: (...p: TSP) => styled('tfoot' as unk as FC<HTP['tfoot']>)(...p),
+  /** creates a 'th' component with css applied */
+  th: (...p: TSP) => styled('th' as unk as FC<HTP['th']>)(...p),
+  /** creates a 'thead' component with css applied */
+  thead: (...p: TSP) => styled('thead' as unk as FC<HTP['thead']>)(...p),
+  /** creates a 'time' component with css applied */
+  time: (...p: TSP) => styled('time' as unk as FC<HTP['time']>)(...p),
+  /** creates a 'tr' component with css applied */
+  tr: (...p: TSP) => styled('tr' as unk as FC<HTP['tr']>)(...p),
+  /** creates a 'u' component with css applied */
+  u: (...p: TSP) => styled('u' as unk as FC<HTP['u']>)(...p),
+  /** creates a 'ul' component with css applied */
+  ul: (...p: TSP) => styled('ul' as unk as FC<HTP['ul']>)(...p),
+  /** creates a 'video' component with css applied */
+  video: (...p: TSP) => styled('video' as unk as FC<HTP['video']>)(...p),
+})

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src"]
+}