thread-ui 0.7.14 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -0
- package/dist/components/media/info-card/info-card.d.ts +3 -3
- package/dist/components/media/info-card/info-card.js +5 -5
- package/dist/components/media/info-card/info-card.js.map +1 -1
- package/dist/components/media/info-card/info-card.types.d.ts +3 -2
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -4
- package/dist/index.js.map +1 -1
- package/dist/internal-components/image/is-html-image-props.js +1 -2
- package/dist/internal-components/image/is-html-image-props.js.map +1 -1
- package/dist/styled-system/css/conditions..js +36 -0
- package/dist/styled-system/css/conditions.js +36 -0
- package/dist/styled-system/css/css..js +45 -0
- package/dist/styled-system/css/css.js +45 -0
- package/dist/styled-system/css/cva..js +87 -0
- package/dist/styled-system/css/cva.js +87 -0
- package/dist/styled-system/css/cx..js +15 -0
- package/dist/styled-system/css/cx.js +15 -0
- package/dist/styled-system/css/index..js +4 -0
- package/dist/styled-system/css/index.js +4 -0
- package/dist/styled-system/css/sva..js +46 -0
- package/dist/styled-system/css/sva.js +46 -0
- package/dist/styled-system/helpers..js +316 -0
- package/dist/styled-system/helpers.js +316 -0
- package/dist/styled-system/patterns/aspect-ratio..js +38 -0
- package/dist/styled-system/patterns/aspect-ratio.js +38 -0
- package/dist/styled-system/patterns/bleed..js +24 -0
- package/dist/styled-system/patterns/bleed.js +24 -0
- package/dist/styled-system/patterns/box..js +15 -0
- package/dist/styled-system/patterns/box.js +15 -0
- package/dist/styled-system/patterns/center..js +21 -0
- package/dist/styled-system/patterns/center.js +21 -0
- package/dist/styled-system/patterns/circle..js +25 -0
- package/dist/styled-system/patterns/circle.js +25 -0
- package/dist/styled-system/patterns/container..js +22 -0
- package/dist/styled-system/patterns/container.js +22 -0
- package/dist/styled-system/patterns/cq..js +21 -0
- package/dist/styled-system/patterns/cq.js +21 -0
- package/dist/styled-system/patterns/divider..js +25 -0
- package/dist/styled-system/patterns/divider.js +25 -0
- package/dist/styled-system/patterns/flex..js +26 -0
- package/dist/styled-system/patterns/flex.js +26 -0
- package/dist/styled-system/patterns/float..js +52 -0
- package/dist/styled-system/patterns/float.js +52 -0
- package/dist/styled-system/patterns/grid-item..js +25 -0
- package/dist/styled-system/patterns/grid-item.js +25 -0
- package/dist/styled-system/patterns/grid..js +27 -0
- package/dist/styled-system/patterns/grid.js +27 -0
- package/dist/styled-system/patterns/hstack..js +24 -0
- package/dist/styled-system/patterns/hstack.js +24 -0
- package/dist/styled-system/patterns/index..js +20 -0
- package/dist/styled-system/patterns/index.js +20 -0
- package/dist/styled-system/patterns/link-overlay..js +24 -0
- package/dist/styled-system/patterns/link-overlay.js +24 -0
- package/dist/styled-system/patterns/spacer..js +21 -0
- package/dist/styled-system/patterns/spacer.js +21 -0
- package/dist/styled-system/patterns/square..js +24 -0
- package/dist/styled-system/patterns/square.js +24 -0
- package/dist/styled-system/patterns/stack..js +24 -0
- package/dist/styled-system/patterns/stack.js +24 -0
- package/dist/styled-system/patterns/visually-hidden..js +18 -0
- package/dist/styled-system/patterns/visually-hidden.js +18 -0
- package/dist/styled-system/patterns/vstack..js +24 -0
- package/dist/styled-system/patterns/vstack.js +24 -0
- package/dist/styled-system/patterns/wrap..js +25 -0
- package/dist/styled-system/patterns/wrap.js +25 -0
- package/dist/styled-system/recipes/button..js +445 -0
- package/dist/styled-system/recipes/button.js +445 -0
- package/dist/styled-system/recipes/create-recipe..js +82 -0
- package/dist/styled-system/recipes/create-recipe.js +82 -0
- package/dist/styled-system/recipes/index..js +1 -0
- package/dist/styled-system/recipes/index.js +1 -0
- package/dist/styled-system/styles.css +1 -1
- package/dist/styled-system/tokens/index..js +2104 -0
- package/dist/styled-system/tokens/index.js +2104 -0
- package/dist/styles/theme.css +115 -0
- package/dist/styles/thread.css +3 -115
- package/dist/types/image/image.types.d.ts +1 -1
- package/package.json +3 -4
- /package/dist/styles/{styles.css → tailwind.css} +0 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export * from './container.js';
|
|
2
|
+
export * from './box.js';
|
|
3
|
+
export * from './flex.js';
|
|
4
|
+
export * from './stack.js';
|
|
5
|
+
export * from './vstack.js';
|
|
6
|
+
export * from './hstack.js';
|
|
7
|
+
export * from './spacer.js';
|
|
8
|
+
export * from './square.js';
|
|
9
|
+
export * from './circle.js';
|
|
10
|
+
export * from './center.js';
|
|
11
|
+
export * from './link-overlay.js';
|
|
12
|
+
export * from './aspect-ratio.js';
|
|
13
|
+
export * from './grid.js';
|
|
14
|
+
export * from './grid-item.js';
|
|
15
|
+
export * from './wrap.js';
|
|
16
|
+
export * from './divider.js';
|
|
17
|
+
export * from './float.js';
|
|
18
|
+
export * from './bleed.js';
|
|
19
|
+
export * from './visually-hidden.js';
|
|
20
|
+
export * from './cq.js';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers..js';
|
|
2
|
+
import { css } from '../css/index..js';
|
|
3
|
+
|
|
4
|
+
const linkOverlayConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
return {
|
|
7
|
+
_before: {
|
|
8
|
+
content: '""',
|
|
9
|
+
position: "absolute",
|
|
10
|
+
inset: "0",
|
|
11
|
+
zIndex: "0",
|
|
12
|
+
...props["_before"]
|
|
13
|
+
},
|
|
14
|
+
...props
|
|
15
|
+
};
|
|
16
|
+
}}
|
|
17
|
+
|
|
18
|
+
export const getLinkOverlayStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(linkOverlayConfig, styles)
|
|
20
|
+
return linkOverlayConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
|
|
24
|
+
linkOverlay.raw = getLinkOverlayStyle
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const linkOverlayConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
return {
|
|
7
|
+
_before: {
|
|
8
|
+
content: '""',
|
|
9
|
+
position: "absolute",
|
|
10
|
+
inset: "0",
|
|
11
|
+
zIndex: "0",
|
|
12
|
+
...props["_before"]
|
|
13
|
+
},
|
|
14
|
+
...props
|
|
15
|
+
};
|
|
16
|
+
}}
|
|
17
|
+
|
|
18
|
+
export const getLinkOverlayStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(linkOverlayConfig, styles)
|
|
20
|
+
return linkOverlayConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
|
|
24
|
+
linkOverlay.raw = getLinkOverlayStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers..js';
|
|
2
|
+
import { css } from '../css/index..js';
|
|
3
|
+
|
|
4
|
+
const spacerConfig = {
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { size, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
alignSelf: "stretch",
|
|
9
|
+
justifySelf: "stretch",
|
|
10
|
+
flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
|
|
11
|
+
...rest
|
|
12
|
+
};
|
|
13
|
+
}}
|
|
14
|
+
|
|
15
|
+
export const getSpacerStyle = (styles = {}) => {
|
|
16
|
+
const _styles = getPatternStyles(spacerConfig, styles)
|
|
17
|
+
return spacerConfig.transform(_styles, patternFns)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const spacer = (styles) => css(getSpacerStyle(styles))
|
|
21
|
+
spacer.raw = getSpacerStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const spacerConfig = {
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { size, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
alignSelf: "stretch",
|
|
9
|
+
justifySelf: "stretch",
|
|
10
|
+
flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
|
|
11
|
+
...rest
|
|
12
|
+
};
|
|
13
|
+
}}
|
|
14
|
+
|
|
15
|
+
export const getSpacerStyle = (styles = {}) => {
|
|
16
|
+
const _styles = getPatternStyles(spacerConfig, styles)
|
|
17
|
+
return spacerConfig.transform(_styles, patternFns)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const spacer = (styles) => css(getSpacerStyle(styles))
|
|
21
|
+
spacer.raw = getSpacerStyle
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers..js';
|
|
2
|
+
import { css } from '../css/index..js';
|
|
3
|
+
|
|
4
|
+
const squareConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { size, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
flex: "0 0 auto",
|
|
12
|
+
width: size,
|
|
13
|
+
height: size,
|
|
14
|
+
...rest
|
|
15
|
+
};
|
|
16
|
+
}}
|
|
17
|
+
|
|
18
|
+
export const getSquareStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(squareConfig, styles)
|
|
20
|
+
return squareConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const square = (styles) => css(getSquareStyle(styles))
|
|
24
|
+
square.raw = getSquareStyle
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const squareConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { size, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
flex: "0 0 auto",
|
|
12
|
+
width: size,
|
|
13
|
+
height: size,
|
|
14
|
+
...rest
|
|
15
|
+
};
|
|
16
|
+
}}
|
|
17
|
+
|
|
18
|
+
export const getSquareStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(squareConfig, styles)
|
|
20
|
+
return squareConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const square = (styles) => css(getSquareStyle(styles))
|
|
24
|
+
square.raw = getSquareStyle
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers..js';
|
|
2
|
+
import { css } from '../css/index..js';
|
|
3
|
+
|
|
4
|
+
const stackConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { align, justify, direction, gap, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
flexDirection: direction,
|
|
10
|
+
alignItems: align,
|
|
11
|
+
justifyContent: justify,
|
|
12
|
+
gap,
|
|
13
|
+
...rest
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
defaultValues:{direction:'column',gap:'8px'}}
|
|
17
|
+
|
|
18
|
+
export const getStackStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(stackConfig, styles)
|
|
20
|
+
return stackConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const stack = (styles) => css(getStackStyle(styles))
|
|
24
|
+
stack.raw = getStackStyle
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const stackConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { align, justify, direction, gap, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
flexDirection: direction,
|
|
10
|
+
alignItems: align,
|
|
11
|
+
justifyContent: justify,
|
|
12
|
+
gap,
|
|
13
|
+
...rest
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
defaultValues:{direction:'column',gap:'8px'}}
|
|
17
|
+
|
|
18
|
+
export const getStackStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(stackConfig, styles)
|
|
20
|
+
return stackConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const stack = (styles) => css(getStackStyle(styles))
|
|
24
|
+
stack.raw = getStackStyle
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers..js';
|
|
2
|
+
import { css } from '../css/index..js';
|
|
3
|
+
|
|
4
|
+
const visuallyHiddenConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
return {
|
|
7
|
+
srOnly: true,
|
|
8
|
+
...props
|
|
9
|
+
};
|
|
10
|
+
}}
|
|
11
|
+
|
|
12
|
+
export const getVisuallyHiddenStyle = (styles = {}) => {
|
|
13
|
+
const _styles = getPatternStyles(visuallyHiddenConfig, styles)
|
|
14
|
+
return visuallyHiddenConfig.transform(_styles, patternFns)
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
|
|
18
|
+
visuallyHidden.raw = getVisuallyHiddenStyle
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const visuallyHiddenConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
return {
|
|
7
|
+
srOnly: true,
|
|
8
|
+
...props
|
|
9
|
+
};
|
|
10
|
+
}}
|
|
11
|
+
|
|
12
|
+
export const getVisuallyHiddenStyle = (styles = {}) => {
|
|
13
|
+
const _styles = getPatternStyles(visuallyHiddenConfig, styles)
|
|
14
|
+
return visuallyHiddenConfig.transform(_styles, patternFns)
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
|
|
18
|
+
visuallyHidden.raw = getVisuallyHiddenStyle
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers..js';
|
|
2
|
+
import { css } from '../css/index..js';
|
|
3
|
+
|
|
4
|
+
const vstackConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { justify, gap, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: justify,
|
|
11
|
+
gap,
|
|
12
|
+
flexDirection: "column",
|
|
13
|
+
...rest
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
defaultValues:{gap:'8px'}}
|
|
17
|
+
|
|
18
|
+
export const getVstackStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(vstackConfig, styles)
|
|
20
|
+
return vstackConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const vstack = (styles) => css(getVstackStyle(styles))
|
|
24
|
+
vstack.raw = getVstackStyle
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const vstackConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { justify, gap, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: justify,
|
|
11
|
+
gap,
|
|
12
|
+
flexDirection: "column",
|
|
13
|
+
...rest
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
defaultValues:{gap:'8px'}}
|
|
17
|
+
|
|
18
|
+
export const getVstackStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(vstackConfig, styles)
|
|
20
|
+
return vstackConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const vstack = (styles) => css(getVstackStyle(styles))
|
|
24
|
+
vstack.raw = getVstackStyle
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers..js';
|
|
2
|
+
import { css } from '../css/index..js';
|
|
3
|
+
|
|
4
|
+
const wrapConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
flexWrap: "wrap",
|
|
10
|
+
alignItems: align,
|
|
11
|
+
justifyContent: justify,
|
|
12
|
+
gap,
|
|
13
|
+
columnGap,
|
|
14
|
+
rowGap,
|
|
15
|
+
...rest
|
|
16
|
+
};
|
|
17
|
+
}}
|
|
18
|
+
|
|
19
|
+
export const getWrapStyle = (styles = {}) => {
|
|
20
|
+
const _styles = getPatternStyles(wrapConfig, styles)
|
|
21
|
+
return wrapConfig.transform(_styles, patternFns)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const wrap = (styles) => css(getWrapStyle(styles))
|
|
25
|
+
wrap.raw = getWrapStyle
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const wrapConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
flexWrap: "wrap",
|
|
10
|
+
alignItems: align,
|
|
11
|
+
justifyContent: justify,
|
|
12
|
+
gap,
|
|
13
|
+
columnGap,
|
|
14
|
+
rowGap,
|
|
15
|
+
...rest
|
|
16
|
+
};
|
|
17
|
+
}}
|
|
18
|
+
|
|
19
|
+
export const getWrapStyle = (styles = {}) => {
|
|
20
|
+
const _styles = getPatternStyles(wrapConfig, styles)
|
|
21
|
+
return wrapConfig.transform(_styles, patternFns)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const wrap = (styles) => css(getWrapStyle(styles))
|
|
25
|
+
wrap.raw = getWrapStyle
|