daleui 0.0.2 → 0.0.5
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 +43 -0
- package/dist/check-DEVerfH5.js +72 -0
- package/dist/components/Box/Box.d.ts +34 -0
- package/dist/components/Box/Box.js +34 -0
- package/dist/components/Button/Button.d.ts +37 -0
- package/dist/components/Button/Button.js +367 -0
- package/dist/components/Card/Card.d.ts +68 -0
- package/dist/components/Card/Card.js +132 -0
- package/dist/components/Checkbox/Checkbox.d.ts +34 -0
- package/dist/components/Checkbox/Checkbox.js +657 -0
- package/dist/components/Flex/Flex.d.ts +361 -0
- package/dist/components/Flex/Flex.js +65 -0
- package/dist/components/HStack/HStack.d.ts +23 -0
- package/dist/components/HStack/HStack.js +35 -0
- package/dist/components/Heading/Heading.d.ts +33 -0
- package/dist/components/Heading/Heading.js +67 -0
- package/dist/components/Icon/Icon.d.ts +20 -0
- package/dist/components/Icon/Icon.js +325 -0
- package/dist/components/Label/Label.d.ts +35 -0
- package/dist/components/Label/Label.js +74 -0
- package/dist/components/Link/Link.d.ts +33 -0
- package/dist/components/Link/Link.js +176 -0
- package/dist/components/PasswordInput/PasswordInput.d.ts +17 -0
- package/dist/components/PasswordInput/PasswordInput.js +151 -0
- package/dist/components/RadioGroup/RadioGroup.d.ts +82 -0
- package/dist/components/RadioGroup/RadioGroup.js +713 -0
- package/dist/components/Select/Select.d.ts +39 -0
- package/dist/components/Select/Select.js +222 -0
- package/dist/components/Tag/Tag.d.ts +26 -0
- package/dist/components/Tag/Tag.js +189 -0
- package/dist/components/Text/Text.d.ts +22 -0
- package/dist/components/Text/Text.js +115 -0
- package/dist/components/TextInput/TextInput.d.ts +21 -0
- package/dist/components/TextInput/TextInput.js +106 -0
- package/dist/components/VStack/VStack.d.ts +23 -0
- package/dist/components/VStack/VStack.js +35 -0
- package/dist/css-QiVVeZaw.js +212 -0
- package/dist/cva-BrKodHDH.js +57 -0
- package/dist/cx-DN21T1EH.js +9 -0
- package/dist/hstack-cCrHxysi.js +43 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +18 -0
- package/dist/index.js +37 -0
- package/dist/tokens/colors.d.ts +4 -0
- package/dist/tokens/iconography.d.ts +45 -0
- package/dist/tokens/spacing.d.ts +42 -0
- package/dist/tokens/typography.d.ts +312 -0
- package/dist/use-locale-context-DYXE7B4r.js +775 -0
- package/package.json +62 -39
- package/styled-system/css/conditions.mjs +36 -0
- package/styled-system/css/css.d.ts +22 -0
- package/styled-system/css/css.mjs +45 -0
- package/styled-system/css/cva.d.ts +6 -0
- package/styled-system/css/cva.mjs +87 -0
- package/styled-system/css/cx.d.ts +5 -0
- package/styled-system/css/cx.mjs +15 -0
- package/styled-system/css/index.d.ts +5 -0
- package/styled-system/css/index.mjs +4 -0
- package/styled-system/css/sva.d.ts +4 -0
- package/styled-system/css/sva.mjs +46 -0
- package/styled-system/helpers.mjs +316 -0
- package/styled-system/patterns/aspect-ratio.d.ts +20 -0
- package/styled-system/patterns/aspect-ratio.mjs +38 -0
- package/styled-system/patterns/bleed.d.ts +21 -0
- package/styled-system/patterns/bleed.mjs +24 -0
- package/styled-system/patterns/box.d.ts +20 -0
- package/styled-system/patterns/box.mjs +15 -0
- package/styled-system/patterns/center.d.ts +20 -0
- package/styled-system/patterns/center.mjs +21 -0
- package/styled-system/patterns/circle.d.ts +20 -0
- package/styled-system/patterns/circle.mjs +25 -0
- package/styled-system/patterns/container.d.ts +20 -0
- package/styled-system/patterns/container.mjs +21 -0
- package/styled-system/patterns/cq.d.ts +21 -0
- package/styled-system/patterns/cq.mjs +21 -0
- package/styled-system/patterns/divider.d.ts +22 -0
- package/styled-system/patterns/divider.mjs +25 -0
- package/styled-system/patterns/flex.d.ts +26 -0
- package/styled-system/patterns/flex.mjs +26 -0
- package/styled-system/patterns/float.d.ts +23 -0
- package/styled-system/patterns/float.mjs +52 -0
- package/styled-system/patterns/grid-item.d.ts +25 -0
- package/styled-system/patterns/grid-item.mjs +25 -0
- package/styled-system/patterns/grid.d.ts +24 -0
- package/styled-system/patterns/grid.mjs +27 -0
- package/styled-system/patterns/hstack.d.ts +21 -0
- package/styled-system/patterns/hstack.mjs +24 -0
- package/styled-system/patterns/index.d.ts +21 -0
- package/styled-system/patterns/index.mjs +20 -0
- package/styled-system/patterns/link-overlay.d.ts +20 -0
- package/styled-system/patterns/link-overlay.mjs +24 -0
- package/styled-system/patterns/spacer.d.ts +20 -0
- package/styled-system/patterns/spacer.mjs +21 -0
- package/styled-system/patterns/square.d.ts +20 -0
- package/styled-system/patterns/square.mjs +24 -0
- package/styled-system/patterns/stack.d.ts +23 -0
- package/styled-system/patterns/stack.mjs +24 -0
- package/styled-system/patterns/visually-hidden.d.ts +20 -0
- package/styled-system/patterns/visually-hidden.mjs +18 -0
- package/styled-system/patterns/vstack.d.ts +21 -0
- package/styled-system/patterns/vstack.mjs +24 -0
- package/styled-system/patterns/wrap.d.ts +24 -0
- package/styled-system/patterns/wrap.mjs +25 -0
- package/styled-system/tokens/index.d.ts +9 -0
- package/styled-system/tokens/index.mjs +3176 -0
- package/styled-system/tokens/tokens.d.ts +63 -0
- package/styled-system/types/composition.d.ts +224 -0
- package/styled-system/types/conditions.d.ts +310 -0
- package/styled-system/types/csstype.d.ts +21298 -0
- package/styled-system/types/global.d.ts +20 -0
- package/styled-system/types/index.d.ts +7 -0
- package/styled-system/types/parts.d.ts +8 -0
- package/styled-system/types/pattern.d.ts +78 -0
- package/styled-system/types/prop-type.d.ts +265 -0
- package/styled-system/types/recipe.d.ts +181 -0
- package/styled-system/types/selectors.d.ts +59 -0
- package/styled-system/types/static-css.d.ts +56 -0
- package/styled-system/types/style-props.d.ts +7504 -0
- package/styled-system/types/system-types.d.ts +269 -0
- package/.github/CODEOWNERS +0 -1
- package/.github/FUNDING.yml +0 -1
- package/.github/workflows/automation.yml +0 -13
- package/.github/workflows/chromatic.yml +0 -19
- package/.github/workflows/deployment.yml +0 -32
- package/.github/workflows/integration.yml +0 -15
- package/.github/workflows/storybook-tests.yml +0 -17
- package/.storybook/main.ts +0 -18
- package/.storybook/preview.ts +0 -29
- package/.storybook/test-runner.ts +0 -33
- package/bun.lock +0 -2099
- package/chromatic.config.json +0 -5
- package/eslint.config.js +0 -28
- package/index.html +0 -13
- package/panda.config.ts +0 -61
- package/postcss.config.cjs +0 -5
- package/public/logo.svg +0 -9
- package/src/App.tsx +0 -67
- package/src/assets/Discord.svg +0 -1
- package/src/assets/GitHub.svg +0 -1
- package/src/assets/LinkedIn.svg +0 -1
- package/src/assets/Medium.svg +0 -1
- package/src/assets/YouTube.svg +0 -1
- package/src/components/Button/Button.stories.tsx +0 -115
- package/src/components/Button/Button.test.tsx +0 -108
- package/src/components/Button/Button.tsx +0 -245
- package/src/components/Button/index.tsx +0 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +0 -129
- package/src/components/Checkbox/Checkbox.test.tsx +0 -169
- package/src/components/Checkbox/Checkbox.tsx +0 -190
- package/src/components/Heading/Heading.stories.tsx +0 -72
- package/src/components/Heading/Heading.test.tsx +0 -55
- package/src/components/Heading/Heading.tsx +0 -73
- package/src/components/Heading/index.tsx +0 -1
- package/src/components/Icon/Icon.stories.tsx +0 -106
- package/src/components/Icon/Icon.test.tsx +0 -44
- package/src/components/Icon/Icon.tsx +0 -116
- package/src/components/Icon/index.tsx +0 -1
- package/src/components/Text/Text.stories.tsx +0 -65
- package/src/components/Text/Text.test.tsx +0 -54
- package/src/components/Text/Text.tsx +0 -93
- package/src/components/Text/index.tsx +0 -1
- package/src/index.css +0 -2
- package/src/main.tsx +0 -10
- package/src/setupTests.tsx +0 -5
- package/src/styles/globalCss.ts +0 -43
- package/src/tokens/colors.mdx +0 -100
- package/src/tokens/colors.ts +0 -288
- package/src/tokens/iconography.mdx +0 -15
- package/src/tokens/iconography.tsx +0 -54
- package/src/tokens/typography.mdx +0 -38
- package/src/tokens/typography.ts +0 -132
- package/src/vite-env.d.ts +0 -2
- package/tsconfig.app.json +0 -25
- package/tsconfig.json +0 -7
- package/tsconfig.node.json +0 -22
- package/vite.config.ts +0 -16
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const dividerConfig = {
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { orientation, thickness, color, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
"--thickness": thickness,
|
|
9
|
+
width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
|
|
10
|
+
height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
|
|
11
|
+
borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
|
|
12
|
+
borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
|
|
13
|
+
borderColor: color,
|
|
14
|
+
...rest
|
|
15
|
+
};
|
|
16
|
+
},
|
|
17
|
+
defaultValues:{orientation:'horizontal',thickness:'1px'}}
|
|
18
|
+
|
|
19
|
+
export const getDividerStyle = (styles = {}) => {
|
|
20
|
+
const _styles = getPatternStyles(dividerConfig, styles)
|
|
21
|
+
return dividerConfig.transform(_styles, patternFns)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const divider = (styles) => css(getDividerStyle(styles))
|
|
25
|
+
divider.raw = getDividerStyle
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface FlexProperties {
|
|
9
|
+
align?: SystemProperties["alignItems"]
|
|
10
|
+
justify?: SystemProperties["justifyContent"]
|
|
11
|
+
direction?: SystemProperties["flexDirection"]
|
|
12
|
+
wrap?: SystemProperties["flexWrap"]
|
|
13
|
+
basis?: SystemProperties["flexBasis"]
|
|
14
|
+
grow?: SystemProperties["flexGrow"]
|
|
15
|
+
shrink?: SystemProperties["flexShrink"]
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
interface FlexStyles extends FlexProperties, DistributiveOmit<SystemStyleObject, keyof FlexProperties > {}
|
|
19
|
+
|
|
20
|
+
interface FlexPatternFn {
|
|
21
|
+
(styles?: FlexStyles): string
|
|
22
|
+
raw: (styles?: FlexStyles) => SystemStyleObject
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
export declare const flex: FlexPatternFn;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const flexConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
flexDirection: direction,
|
|
10
|
+
alignItems: align,
|
|
11
|
+
justifyContent: justify,
|
|
12
|
+
flexWrap: wrap2,
|
|
13
|
+
flexBasis: basis,
|
|
14
|
+
flexGrow: grow,
|
|
15
|
+
flexShrink: shrink,
|
|
16
|
+
...rest
|
|
17
|
+
};
|
|
18
|
+
}}
|
|
19
|
+
|
|
20
|
+
export const getFlexStyle = (styles = {}) => {
|
|
21
|
+
const _styles = getPatternStyles(flexConfig, styles)
|
|
22
|
+
return flexConfig.transform(_styles, patternFns)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export const flex = (styles) => css(getFlexStyle(styles))
|
|
26
|
+
flex.raw = getFlexStyle
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface FloatProperties {
|
|
9
|
+
offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
|
|
10
|
+
offsetY?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
|
|
11
|
+
offset?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
|
|
12
|
+
placement?: "bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start"
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
interface FloatStyles extends FloatProperties, DistributiveOmit<SystemStyleObject, keyof FloatProperties > {}
|
|
16
|
+
|
|
17
|
+
interface FloatPatternFn {
|
|
18
|
+
(styles?: FloatStyles): string
|
|
19
|
+
raw: (styles?: FloatStyles) => SystemStyleObject
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
export declare const float: FloatPatternFn;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const floatConfig = {
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { offset, offsetX, offsetY, placement, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "inline-flex",
|
|
9
|
+
justifyContent: "center",
|
|
10
|
+
alignItems: "center",
|
|
11
|
+
position: "absolute",
|
|
12
|
+
insetBlockStart: map(placement, (v) => {
|
|
13
|
+
const [side] = v.split("-");
|
|
14
|
+
const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
|
|
15
|
+
return map2[side];
|
|
16
|
+
}),
|
|
17
|
+
insetBlockEnd: map(placement, (v) => {
|
|
18
|
+
const [side] = v.split("-");
|
|
19
|
+
const map2 = { top: "auto", middle: "50%", bottom: offsetY };
|
|
20
|
+
return map2[side];
|
|
21
|
+
}),
|
|
22
|
+
insetInlineStart: map(placement, (v) => {
|
|
23
|
+
const [, align] = v.split("-");
|
|
24
|
+
const map2 = { start: offsetX, center: "50%", end: "auto" };
|
|
25
|
+
return map2[align];
|
|
26
|
+
}),
|
|
27
|
+
insetInlineEnd: map(placement, (v) => {
|
|
28
|
+
const [, align] = v.split("-");
|
|
29
|
+
const map2 = { start: "auto", center: "50%", end: offsetX };
|
|
30
|
+
return map2[align];
|
|
31
|
+
}),
|
|
32
|
+
translate: map(placement, (v) => {
|
|
33
|
+
const [side, align] = v.split("-");
|
|
34
|
+
const mapX = { start: "-50%", center: "-50%", end: "50%" };
|
|
35
|
+
const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
|
|
36
|
+
return `${mapX[align]} ${mapY[side]}`;
|
|
37
|
+
}),
|
|
38
|
+
...rest
|
|
39
|
+
};
|
|
40
|
+
},
|
|
41
|
+
defaultValues(props) {
|
|
42
|
+
const offset = props.offset || "0";
|
|
43
|
+
return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
|
|
44
|
+
}}
|
|
45
|
+
|
|
46
|
+
export const getFloatStyle = (styles = {}) => {
|
|
47
|
+
const _styles = getPatternStyles(floatConfig, styles)
|
|
48
|
+
return floatConfig.transform(_styles, patternFns)
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export const float = (styles) => css(getFloatStyle(styles))
|
|
52
|
+
float.raw = getFloatStyle
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface GridItemProperties {
|
|
9
|
+
colSpan?: ConditionalValue<number>
|
|
10
|
+
rowSpan?: ConditionalValue<number>
|
|
11
|
+
colStart?: ConditionalValue<number>
|
|
12
|
+
rowStart?: ConditionalValue<number>
|
|
13
|
+
colEnd?: ConditionalValue<number>
|
|
14
|
+
rowEnd?: ConditionalValue<number>
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
interface GridItemStyles extends GridItemProperties, DistributiveOmit<SystemStyleObject, keyof GridItemProperties > {}
|
|
18
|
+
|
|
19
|
+
interface GridItemPatternFn {
|
|
20
|
+
(styles?: GridItemStyles): string
|
|
21
|
+
raw: (styles?: GridItemStyles) => SystemStyleObject
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
export declare const gridItem: GridItemPatternFn;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const gridItemConfig = {
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
|
|
7
|
+
const spanFn = (v) => v === "auto" ? v : `span ${v}`;
|
|
8
|
+
return {
|
|
9
|
+
gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
|
|
10
|
+
gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
|
|
11
|
+
gridColumnStart: colStart,
|
|
12
|
+
gridColumnEnd: colEnd,
|
|
13
|
+
gridRowStart: rowStart,
|
|
14
|
+
gridRowEnd: rowEnd,
|
|
15
|
+
...rest
|
|
16
|
+
};
|
|
17
|
+
}}
|
|
18
|
+
|
|
19
|
+
export const getGridItemStyle = (styles = {}) => {
|
|
20
|
+
const _styles = getPatternStyles(gridItemConfig, styles)
|
|
21
|
+
return gridItemConfig.transform(_styles, patternFns)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const gridItem = (styles) => css(getGridItemStyle(styles))
|
|
25
|
+
gridItem.raw = getGridItemStyle
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface GridProperties {
|
|
9
|
+
gap?: SystemProperties["gap"]
|
|
10
|
+
columnGap?: SystemProperties["gap"]
|
|
11
|
+
rowGap?: SystemProperties["gap"]
|
|
12
|
+
columns?: ConditionalValue<number>
|
|
13
|
+
minChildWidth?: ConditionalValue<Tokens["sizes"] | Properties["width"]>
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
interface GridStyles extends GridProperties, DistributiveOmit<SystemStyleObject, keyof GridProperties > {}
|
|
17
|
+
|
|
18
|
+
interface GridPatternFn {
|
|
19
|
+
(styles?: GridStyles): string
|
|
20
|
+
raw: (styles?: GridStyles) => SystemStyleObject
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
export declare const grid: GridPatternFn;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const gridConfig = {
|
|
5
|
+
transform(props, { map, isCssUnit }) {
|
|
6
|
+
const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
|
|
7
|
+
const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
|
|
8
|
+
return {
|
|
9
|
+
display: "grid",
|
|
10
|
+
gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
|
|
11
|
+
gap,
|
|
12
|
+
columnGap,
|
|
13
|
+
rowGap,
|
|
14
|
+
...rest
|
|
15
|
+
};
|
|
16
|
+
},
|
|
17
|
+
defaultValues(props) {
|
|
18
|
+
return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
|
|
19
|
+
}}
|
|
20
|
+
|
|
21
|
+
export const getGridStyle = (styles = {}) => {
|
|
22
|
+
const _styles = getPatternStyles(gridConfig, styles)
|
|
23
|
+
return gridConfig.transform(_styles, patternFns)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export const grid = (styles) => css(getGridStyle(styles))
|
|
27
|
+
grid.raw = getGridStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface HstackProperties {
|
|
9
|
+
justify?: SystemProperties["justifyContent"]
|
|
10
|
+
gap?: SystemProperties["gap"]
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
interface HstackStyles extends HstackProperties, DistributiveOmit<SystemStyleObject, keyof HstackProperties > {}
|
|
14
|
+
|
|
15
|
+
interface HstackPatternFn {
|
|
16
|
+
(styles?: HstackStyles): string
|
|
17
|
+
raw: (styles?: HstackStyles) => SystemStyleObject
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export declare const hstack: HstackPatternFn;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const hstackConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { justify, gap, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: justify,
|
|
11
|
+
gap,
|
|
12
|
+
flexDirection: "row",
|
|
13
|
+
...rest
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
defaultValues:{gap:'8px'}}
|
|
17
|
+
|
|
18
|
+
export const getHstackStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(hstackConfig, styles)
|
|
20
|
+
return hstackConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const hstack = (styles) => css(getHstackStyle(styles))
|
|
24
|
+
hstack.raw = getHstackStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
export * from './box';
|
|
3
|
+
export * from './flex';
|
|
4
|
+
export * from './stack';
|
|
5
|
+
export * from './vstack';
|
|
6
|
+
export * from './hstack';
|
|
7
|
+
export * from './spacer';
|
|
8
|
+
export * from './square';
|
|
9
|
+
export * from './circle';
|
|
10
|
+
export * from './center';
|
|
11
|
+
export * from './link-overlay';
|
|
12
|
+
export * from './aspect-ratio';
|
|
13
|
+
export * from './grid';
|
|
14
|
+
export * from './grid-item';
|
|
15
|
+
export * from './wrap';
|
|
16
|
+
export * from './container';
|
|
17
|
+
export * from './divider';
|
|
18
|
+
export * from './float';
|
|
19
|
+
export * from './bleed';
|
|
20
|
+
export * from './visually-hidden';
|
|
21
|
+
export * from './cq';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export * from './box.mjs';
|
|
2
|
+
export * from './flex.mjs';
|
|
3
|
+
export * from './stack.mjs';
|
|
4
|
+
export * from './vstack.mjs';
|
|
5
|
+
export * from './hstack.mjs';
|
|
6
|
+
export * from './spacer.mjs';
|
|
7
|
+
export * from './square.mjs';
|
|
8
|
+
export * from './circle.mjs';
|
|
9
|
+
export * from './center.mjs';
|
|
10
|
+
export * from './link-overlay.mjs';
|
|
11
|
+
export * from './aspect-ratio.mjs';
|
|
12
|
+
export * from './grid.mjs';
|
|
13
|
+
export * from './grid-item.mjs';
|
|
14
|
+
export * from './wrap.mjs';
|
|
15
|
+
export * from './container.mjs';
|
|
16
|
+
export * from './divider.mjs';
|
|
17
|
+
export * from './float.mjs';
|
|
18
|
+
export * from './bleed.mjs';
|
|
19
|
+
export * from './visually-hidden.mjs';
|
|
20
|
+
export * from './cq.mjs';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface LinkOverlayProperties {
|
|
9
|
+
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit<SystemStyleObject, keyof LinkOverlayProperties > {}
|
|
13
|
+
|
|
14
|
+
interface LinkOverlayPatternFn {
|
|
15
|
+
(styles?: LinkOverlayStyles): string
|
|
16
|
+
raw: (styles?: LinkOverlayStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const linkOverlay: LinkOverlayPatternFn;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
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,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface SpacerProperties {
|
|
9
|
+
size?: ConditionalValue<Tokens["spacing"]>
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface SpacerStyles extends SpacerProperties, DistributiveOmit<SystemStyleObject, keyof SpacerProperties > {}
|
|
13
|
+
|
|
14
|
+
interface SpacerPatternFn {
|
|
15
|
+
(styles?: SpacerStyles): string
|
|
16
|
+
raw: (styles?: SpacerStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const spacer: SpacerPatternFn;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
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,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface SquareProperties {
|
|
9
|
+
size?: SystemProperties["width"]
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface SquareStyles extends SquareProperties, DistributiveOmit<SystemStyleObject, keyof SquareProperties > {}
|
|
13
|
+
|
|
14
|
+
interface SquarePatternFn {
|
|
15
|
+
(styles?: SquareStyles): string
|
|
16
|
+
raw: (styles?: SquareStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const square: SquarePatternFn;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
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,23 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface StackProperties {
|
|
9
|
+
align?: SystemProperties["alignItems"]
|
|
10
|
+
justify?: SystemProperties["justifyContent"]
|
|
11
|
+
direction?: SystemProperties["flexDirection"]
|
|
12
|
+
gap?: SystemProperties["gap"]
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
interface StackStyles extends StackProperties, DistributiveOmit<SystemStyleObject, keyof StackProperties > {}
|
|
16
|
+
|
|
17
|
+
interface StackPatternFn {
|
|
18
|
+
(styles?: StackStyles): string
|
|
19
|
+
raw: (styles?: StackStyles) => SystemStyleObject
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
export declare const stack: StackPatternFn;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
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,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface VisuallyHiddenProperties {
|
|
9
|
+
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit<SystemStyleObject, keyof VisuallyHiddenProperties > {}
|
|
13
|
+
|
|
14
|
+
interface VisuallyHiddenPatternFn {
|
|
15
|
+
(styles?: VisuallyHiddenStyles): string
|
|
16
|
+
raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const visuallyHidden: VisuallyHiddenPatternFn;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
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,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface VstackProperties {
|
|
9
|
+
justify?: SystemProperties["justifyContent"]
|
|
10
|
+
gap?: SystemProperties["gap"]
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
interface VstackStyles extends VstackProperties, DistributiveOmit<SystemStyleObject, keyof VstackProperties > {}
|
|
14
|
+
|
|
15
|
+
interface VstackPatternFn {
|
|
16
|
+
(styles?: VstackStyles): string
|
|
17
|
+
raw: (styles?: VstackStyles) => SystemStyleObject
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export declare const vstack: VstackPatternFn;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
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
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface WrapProperties {
|
|
9
|
+
gap?: SystemProperties["gap"]
|
|
10
|
+
rowGap?: SystemProperties["gap"]
|
|
11
|
+
columnGap?: SystemProperties["gap"]
|
|
12
|
+
align?: SystemProperties["alignItems"]
|
|
13
|
+
justify?: SystemProperties["justifyContent"]
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
interface WrapStyles extends WrapProperties, DistributiveOmit<SystemStyleObject, keyof WrapProperties > {}
|
|
17
|
+
|
|
18
|
+
interface WrapPatternFn {
|
|
19
|
+
(styles?: WrapStyles): string
|
|
20
|
+
raw: (styles?: WrapStyles) => SystemStyleObject
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
export declare const wrap: WrapPatternFn;
|