All files styled.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185x
185x
185x
 
 
 
 
1x
148x
1x
 
 
1x
 
 
 
import { createElement } from "react";
import useStyledProps from "./useStyledProps";
import { tags } from "./tags";
 
import type { FC, ComponentProps } from "react";
import type { StylewindProps } from "stylewind-bridge";
import type { Tag } from "./tags";
 
export type StyledComponent<T extends Tag> = FC<ComponentProps<T>>;
 
export type TagMethods = {
  [T in Tag]: (props?: StylewindProps) => StyledComponent<T>;
};
 
function createComponent<T extends Tag>(el: T, props: StylewindProps = {}): StyledComponent<T> {
  return ({ children, className, ...componentProps }) => {
    const styledClassName = useStyledProps({ ...props, className });
    return createElement(el, { className: styledClassName, ...componentProps }, children);
  };
}
 
function getTagMethods(): TagMethods {
  const tagMethods = {} as TagMethods;
  tags.forEach(tag => Object.assign(tagMethods, { [tag]: (props?: StylewindProps) => createComponent(tag, props) }));
  return tagMethods;
}
 
const styled = Object.assign(createComponent, getTagMethods());
 
export default styled;