@tosui/react 0.1.3 → 0.1.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 +106 -60
- package/dist/components/Alert/Alert.d.ts.map +1 -1
- package/dist/components/Alert/Alert.js.map +1 -1
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Box/Box.d.ts +2 -7
- package/dist/components/Box/Box.d.ts.map +1 -1
- package/dist/components/Box/Box.js +1 -1
- package/dist/components/Box/Box.js.map +1 -1
- package/dist/components/Box/borders/borders.d.ts +11 -13
- package/dist/components/Box/borders/borders.d.ts.map +1 -1
- package/dist/components/Box/borders/borders.js +29 -62
- package/dist/components/Box/borders/borders.js.map +1 -1
- package/dist/components/Box/borders/borders.module.css +936 -40
- package/dist/components/Box/borders/borders.module.css.js +600 -40
- package/dist/components/Box/borders/borders.module.css.js.map +1 -1
- package/dist/components/Box/colors/colors.d.ts +6 -8
- package/dist/components/Box/colors/colors.d.ts.map +1 -1
- package/dist/components/Box/colors/colors.js +20 -30
- package/dist/components/Box/colors/colors.js.map +1 -1
- package/dist/components/Box/colors/colors.module.css +2537 -108
- package/dist/components/Box/colors/colors.module.css.js +1620 -108
- package/dist/components/Box/colors/colors.module.css.js.map +1 -1
- package/dist/components/Box/display/display.d.ts +2 -8
- package/dist/components/Box/display/display.d.ts.map +1 -1
- package/dist/components/Box/display/display.js +10 -33
- package/dist/components/Box/display/display.js.map +1 -1
- package/dist/components/Box/flexbox/flexbox.d.ts +12 -14
- package/dist/components/Box/flexbox/flexbox.d.ts.map +1 -1
- package/dist/components/Box/flexbox/flexbox.js +39 -102
- package/dist/components/Box/flexbox/flexbox.js.map +1 -1
- package/dist/components/Box/flexbox/flexbox.module.css +1210 -56
- package/dist/components/Box/flexbox/flexbox.module.css.js +727 -55
- package/dist/components/Box/flexbox/flexbox.module.css.js.map +1 -1
- package/dist/components/Box/grid/grid.d.ts +3 -2
- package/dist/components/Box/grid/grid.d.ts.map +1 -1
- package/dist/components/Box/grid/grid.js +24 -15
- package/dist/components/Box/grid/grid.js.map +1 -1
- package/dist/components/Box/grid/grid.module.css +68 -18
- package/dist/components/Box/grid/grid.module.css.js +14 -14
- package/dist/components/Box/inset/inset.d.ts.map +1 -1
- package/dist/components/Box/inset/inset.js +8 -52
- package/dist/components/Box/inset/inset.js.map +1 -1
- package/dist/components/Box/inset/inset.module.css +120 -120
- package/dist/components/Box/inset/inset.module.css.js +21 -161
- package/dist/components/Box/inset/inset.module.css.js.map +1 -1
- package/dist/components/Box/interactions/interactions.d.ts +6 -8
- package/dist/components/Box/interactions/interactions.d.ts.map +1 -1
- package/dist/components/Box/interactions/interactions.js +20 -30
- package/dist/components/Box/interactions/interactions.js.map +1 -1
- package/dist/components/Box/interactions/interactions.module.css +891 -38
- package/dist/components/Box/interactions/interactions.module.css.js +570 -38
- package/dist/components/Box/interactions/interactions.module.css.js.map +1 -1
- package/dist/components/Box/margin/margin.d.ts.map +1 -1
- package/dist/components/Box/margin/margin.js +8 -52
- package/dist/components/Box/margin/margin.js.map +1 -1
- package/dist/components/Box/margin/margin.module.css +120 -120
- package/dist/components/Box/margin/margin.module.css.js +21 -161
- package/dist/components/Box/margin/margin.module.css.js.map +1 -1
- package/dist/components/Box/opacity/opacity.d.ts +2 -8
- package/dist/components/Box/opacity/opacity.d.ts.map +1 -1
- package/dist/components/Box/opacity/opacity.js +10 -33
- package/dist/components/Box/opacity/opacity.js.map +1 -1
- package/dist/components/Box/overflow/overflow.d.ts +2 -8
- package/dist/components/Box/overflow/overflow.d.ts.map +1 -1
- package/dist/components/Box/overflow/overflow.js +24 -29
- package/dist/components/Box/overflow/overflow.js.map +1 -1
- package/dist/components/Box/padding/padding.d.ts.map +1 -1
- package/dist/components/Box/padding/padding.js +8 -52
- package/dist/components/Box/padding/padding.js.map +1 -1
- package/dist/components/Box/padding/padding.module.css +120 -120
- package/dist/components/Box/padding/padding.module.css.js +21 -161
- package/dist/components/Box/padding/padding.module.css.js.map +1 -1
- package/dist/components/Box/position/position.d.ts +2 -8
- package/dist/components/Box/position/position.d.ts.map +1 -1
- package/dist/components/Box/position/position.js +10 -33
- package/dist/components/Box/position/position.js.map +1 -1
- package/dist/components/Box/roundness/roundness.d.ts +12 -14
- package/dist/components/Box/roundness/roundness.d.ts.map +1 -1
- package/dist/components/Box/roundness/roundness.js +26 -62
- package/dist/components/Box/roundness/roundness.js.map +1 -1
- package/dist/components/Box/roundness/roundness.module.css +937 -40
- package/dist/components/Box/roundness/roundness.module.css.js +600 -40
- package/dist/components/Box/roundness/roundness.module.css.js.map +1 -1
- package/dist/components/Box/shadows/shadows.d.ts +2 -8
- package/dist/components/Box/shadows/shadows.d.ts.map +1 -1
- package/dist/components/Box/shadows/shadows.js +10 -33
- package/dist/components/Box/shadows/shadows.js.map +1 -1
- package/dist/components/Box/shared/index.d.ts +1 -0
- package/dist/components/Box/shared/index.d.ts.map +1 -1
- package/dist/components/Box/shared/responsive.d.ts +36 -0
- package/dist/components/Box/shared/responsive.d.ts.map +1 -0
- package/dist/components/Box/shared/responsive.js +65 -0
- package/dist/components/Box/shared/responsive.js.map +1 -0
- package/dist/components/Box/shared/types.d.ts +6 -0
- package/dist/components/Box/shared/types.d.ts.map +1 -1
- package/dist/components/Box/sizing/sizing.d.ts.map +1 -1
- package/dist/components/Box/sizing/sizing.js +5 -37
- package/dist/components/Box/sizing/sizing.js.map +1 -1
- package/dist/components/Box/sizing/sizing.module.css +175 -183
- package/dist/components/Box/sizing/sizing.module.css.js +31 -241
- package/dist/components/Box/sizing/sizing.module.css.js.map +1 -1
- package/dist/components/Box/text/text.d.ts +6 -8
- package/dist/components/Box/text/text.d.ts.map +1 -1
- package/dist/components/Box/text/text.js +24 -30
- package/dist/components/Box/text/text.js.map +1 -1
- package/dist/components/Box/text/text.module.css +562 -24
- package/dist/components/Box/text/text.module.css.js +360 -24
- package/dist/components/Box/text/text.module.css.js.map +1 -1
- package/dist/components/Box/typography/typography.d.ts +7 -9
- package/dist/components/Box/typography/typography.d.ts.map +1 -1
- package/dist/components/Box/typography/typography.js +33 -19
- package/dist/components/Box/typography/typography.js.map +1 -1
- package/dist/components/Box/typography/typography.module.css +890 -19
- package/dist/components/Box/typography/typography.module.css.js +570 -19
- package/dist/components/Box/typography/typography.module.css.js.map +1 -1
- package/dist/components/Box/zIndex/zIndex.d.ts +2 -8
- package/dist/components/Box/zIndex/zIndex.d.ts.map +1 -1
- package/dist/components/Box/zIndex/zIndex.js +10 -33
- package/dist/components/Box/zIndex/zIndex.js.map +1 -1
- package/dist/components/Flex/Flex.d.ts +5 -6
- package/dist/components/Flex/Flex.d.ts.map +1 -1
- package/dist/components/Flex/Flex.js +0 -1
- package/dist/components/Flex/Flex.js.map +1 -1
- package/dist/components/Grid/Grid.d.ts +8 -7
- package/dist/components/Grid/Grid.d.ts.map +1 -1
- package/dist/components/Grid/Grid.js.map +1 -1
- package/dist/components/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/IconButton/IconButton.js.map +1 -1
- package/dist/components/Menu/Menu.d.ts.map +1 -1
- package/dist/components/Menu/Menu.js +5 -5
- package/dist/components/Menu/Menu.js.map +1 -1
- package/dist/components/Popover/Popover.d.ts.map +1 -1
- package/dist/components/Popover/Popover.js +9 -9
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Progress/Progress.d.ts.map +1 -1
- package/dist/components/Progress/Progress.js.map +1 -1
- package/dist/components/Stack/Stack.d.ts +2 -1
- package/dist/components/Stack/Stack.d.ts.map +1 -1
- package/dist/components/Stack/Stack.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +5 -5
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/index.css +9313 -1632
- package/dist/styles/styles.css +7 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flexbox.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"flexbox.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import { ResponsiveValue } from '../../../utils/breakpoints';
|
|
1
2
|
import { StyleResult } from '../shared';
|
|
2
3
|
export type JustifySelfValue = "auto" | "start" | "end" | "center" | "stretch";
|
|
3
4
|
export type GridProps = {
|
|
4
5
|
justifySelf?: JustifySelfValue;
|
|
5
|
-
gridTemplateColumns?: string
|
|
6
|
-
gridTemplateRows?: string
|
|
6
|
+
gridTemplateColumns?: ResponsiveValue<string>;
|
|
7
|
+
gridTemplateRows?: ResponsiveValue<string>;
|
|
7
8
|
};
|
|
8
9
|
export type GridStateProps = {
|
|
9
10
|
_hover?: GridProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,mBAAmB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAqDF,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,WAAW,CAab"}
|
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getResponsiveVarStyles } from "../shared/responsive.js";
|
|
2
2
|
import styles from "./grid.module.css.js";
|
|
3
3
|
import clsx from "clsx";
|
|
4
4
|
function getJustifySelfClass(value, state) {
|
|
5
|
+
const STATE_CLASS_SUFFIXES = {
|
|
6
|
+
base: "",
|
|
7
|
+
hover: "\\:h",
|
|
8
|
+
focus: "\\:f",
|
|
9
|
+
active: "\\:a",
|
|
10
|
+
disabled: "\\:d"
|
|
11
|
+
};
|
|
5
12
|
const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
|
|
6
13
|
return stateClassSuffix ? styles[`justify-self-${value}${stateClassSuffix}`] : styles[`justify-self-${value}`];
|
|
7
14
|
}
|
|
@@ -10,25 +17,27 @@ function getGridStylesForState(props, state) {
|
|
|
10
17
|
const { justifySelf, gridTemplateColumns, gridTemplateRows } = props;
|
|
11
18
|
const classes = [];
|
|
12
19
|
const style = {};
|
|
13
|
-
const stateVarSuffix = STATE_SUFFIXES[state];
|
|
14
|
-
const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
|
|
15
20
|
if (justifySelf) {
|
|
16
21
|
const cls = getJustifySelfClass(justifySelf, state);
|
|
17
22
|
if (cls) classes.push(cls);
|
|
18
23
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
const colsResult = getResponsiveVarStyles(
|
|
25
|
+
styles,
|
|
26
|
+
"grid-cols",
|
|
27
|
+
"grid-cols",
|
|
28
|
+
gridTemplateColumns,
|
|
29
|
+
state
|
|
30
|
+
);
|
|
31
|
+
const rowsResult = getResponsiveVarStyles(
|
|
32
|
+
styles,
|
|
33
|
+
"grid-rows",
|
|
34
|
+
"grid-rows",
|
|
35
|
+
gridTemplateRows,
|
|
36
|
+
state
|
|
37
|
+
);
|
|
29
38
|
return {
|
|
30
|
-
className: clsx(...classes),
|
|
31
|
-
style
|
|
39
|
+
className: clsx(...classes, colsResult.className, rowsResult.className),
|
|
40
|
+
style: { ...style, ...colsResult.style, ...rowsResult.style }
|
|
32
41
|
};
|
|
33
42
|
}
|
|
34
43
|
function getGridStyles(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.js","sources":["../../../../src/components/Box/grid/grid.ts"],"sourcesContent":["import {\n
|
|
1
|
+
{"version":3,"file":"grid.js","sources":["../../../../src/components/Box/grid/grid.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n type StateKey,\n type StyleResult,\n getResponsiveVarStyles,\n} from \"../shared\";\nimport styles from \"./grid.module.css\";\nimport clsx from \"clsx\";\n\nexport type JustifySelfValue = \"auto\" | \"start\" | \"end\" | \"center\" | \"stretch\";\n\nexport type GridProps = {\n justifySelf?: JustifySelfValue;\n gridTemplateColumns?: ResponsiveValue<string>;\n gridTemplateRows?: ResponsiveValue<string>;\n};\n\nexport type GridStateProps = {\n _hover?: GridProps;\n};\n\nfunction getJustifySelfClass(value: JustifySelfValue, state: StateKey): string | undefined {\n const STATE_CLASS_SUFFIXES: Record<StateKey, string> = {\n base: \"\",\n hover: \"\\\\:h\",\n focus: \"\\\\:f\",\n active: \"\\\\:a\",\n disabled: \"\\\\:d\",\n };\n const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n return stateClassSuffix\n ? styles[`justify-self-${value}${stateClassSuffix}`]\n : styles[`justify-self-${value}`];\n}\n\nfunction getGridStylesForState(\n props: GridProps | undefined,\n state: StateKey\n): StyleResult {\n if (!props) return { className: \"\", style: {} };\n\n const { justifySelf, gridTemplateColumns, gridTemplateRows } = props;\n\n const classes: string[] = [];\n const style: Record<string, string> = {};\n\n if (justifySelf) {\n const cls = getJustifySelfClass(justifySelf, state);\n if (cls) classes.push(cls);\n }\n\n const colsResult = getResponsiveVarStyles(\n styles,\n \"grid-cols\",\n \"grid-cols\",\n gridTemplateColumns,\n state\n );\n const rowsResult = getResponsiveVarStyles(\n styles,\n \"grid-rows\",\n \"grid-rows\",\n gridTemplateRows,\n state\n );\n\n return {\n className: clsx(...classes, colsResult.className, rowsResult.className),\n style: { ...style, ...colsResult.style, ...rowsResult.style },\n };\n}\n\nexport function getGridStyles(\n props: GridProps & GridStateProps\n): StyleResult {\n const { justifySelf, gridTemplateColumns, gridTemplateRows, _hover } = props;\n\n const baseStyles = getGridStylesForState(\n { justifySelf, gridTemplateColumns, gridTemplateRows },\n \"base\"\n );\n const hoverStyles = getGridStylesForState(_hover, \"hover\");\n\n return {\n className: clsx(baseStyles.className, hoverStyles.className),\n style: { ...baseStyles.style, ...hoverStyles.style } as Record<string, string>,\n };\n}\n"],"names":[],"mappings":";;;AAqBA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,uBAAiD;AAAA,IACrD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAEZ,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,sBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,EAAE,aAAa,qBAAqB,iBAAA,IAAqB;AAE/D,QAAM,UAAoB,CAAA;AAC1B,QAAM,QAAgC,CAAA;AAEtC,MAAI,aAAa;AACf,UAAM,MAAM,oBAAoB,aAAa,KAAK;AAClD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,SAAS,WAAW,WAAW,WAAW,SAAS;AAAA,IACtE,OAAO,EAAE,GAAG,OAAO,GAAG,WAAW,OAAO,GAAG,WAAW,MAAA;AAAA,EAAM;AAEhE;AAEO,SAAS,cACd,OACa;AACb,QAAM,EAAE,aAAa,qBAAqB,kBAAkB,WAAW;AAEvE,QAAM,aAAa;AAAA,IACjB,EAAE,aAAa,qBAAqB,iBAAA;AAAA,IACpC;AAAA,EAAA;AAEF,QAAM,cAAc,sBAAsB,QAAQ,OAAO;AAEzD,SAAO;AAAA,IACL,WAAW,KAAK,WAAW,WAAW,YAAY,SAAS;AAAA,IAC3D,OAAO,EAAE,GAAG,WAAW,OAAO,GAAG,YAAY,MAAA;AAAA,EAAM;AAEvD;"}
|
|
@@ -1,19 +1,69 @@
|
|
|
1
1
|
/* justifySelf */
|
|
2
|
-
._justify-self-
|
|
3
|
-
._justify-self-auto\:
|
|
4
|
-
._justify-self-
|
|
5
|
-
._justify-self-start\:
|
|
6
|
-
._justify-self-
|
|
7
|
-
._justify-self-end\:
|
|
8
|
-
._justify-self-
|
|
9
|
-
._justify-self-center\:
|
|
10
|
-
._justify-self-
|
|
11
|
-
._justify-self-stretch\:
|
|
12
|
-
|
|
13
|
-
/* gridTemplateColumns
|
|
14
|
-
._grid-
|
|
15
|
-
._grid-cols\:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
._grid-
|
|
19
|
-
._grid-
|
|
2
|
+
._justify-self-auto_kqdg4_2 { justify-self: auto; }
|
|
3
|
+
._justify-self-auto\:h_kqdg4_3:hover { justify-self: auto; }
|
|
4
|
+
._justify-self-start_kqdg4_4 { justify-self: start; }
|
|
5
|
+
._justify-self-start\:h_kqdg4_5:hover { justify-self: start; }
|
|
6
|
+
._justify-self-end_kqdg4_6 { justify-self: end; }
|
|
7
|
+
._justify-self-end\:h_kqdg4_7:hover { justify-self: end; }
|
|
8
|
+
._justify-self-center_kqdg4_8 { justify-self: center; }
|
|
9
|
+
._justify-self-center\:h_kqdg4_9:hover { justify-self: center; }
|
|
10
|
+
._justify-self-stretch_kqdg4_10 { justify-self: stretch; }
|
|
11
|
+
._justify-self-stretch\:h_kqdg4_11:hover { justify-self: stretch; }
|
|
12
|
+
|
|
13
|
+
/* gridTemplateColumns */
|
|
14
|
+
._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols); }
|
|
15
|
+
._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols-h); }
|
|
16
|
+
|
|
17
|
+
@media (min-width: 640px) {
|
|
18
|
+
._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols_sm, var(--t-grid-cols)); }
|
|
19
|
+
._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols_sm-h, var(--t-grid-cols-h)); }
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@media (min-width: 768px) {
|
|
23
|
+
._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols_md, var(--t-grid-cols_sm, var(--t-grid-cols))); }
|
|
24
|
+
._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols_md-h, var(--t-grid-cols_sm-h, var(--t-grid-cols-h))); }
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@media (min-width: 1024px) {
|
|
28
|
+
._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols_lg, var(--t-grid-cols_md, var(--t-grid-cols_sm, var(--t-grid-cols)))); }
|
|
29
|
+
._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols_lg-h, var(--t-grid-cols_md-h, var(--t-grid-cols_sm-h, var(--t-grid-cols-h)))); }
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@media (min-width: 1280px) {
|
|
33
|
+
._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols_xl, var(--t-grid-cols_lg, var(--t-grid-cols_md, var(--t-grid-cols_sm, var(--t-grid-cols))))); }
|
|
34
|
+
._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols_xl-h, var(--t-grid-cols_lg-h, var(--t-grid-cols_md-h, var(--t-grid-cols_sm-h, var(--t-grid-cols-h))))); }
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@media (min-width: 1536px) {
|
|
38
|
+
._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols_2xl, var(--t-grid-cols_xl, var(--t-grid-cols_lg, var(--t-grid-cols_md, var(--t-grid-cols_sm, var(--t-grid-cols)))))); }
|
|
39
|
+
._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols_2xl-h, var(--t-grid-cols_xl-h, var(--t-grid-cols_lg-h, var(--t-grid-cols_md-h, var(--t-grid-cols_sm-h, var(--t-grid-cols-h)))))); }
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* gridTemplateRows */
|
|
43
|
+
._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows); }
|
|
44
|
+
._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows-h); }
|
|
45
|
+
|
|
46
|
+
@media (min-width: 640px) {
|
|
47
|
+
._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows_sm, var(--t-grid-rows)); }
|
|
48
|
+
._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows_sm-h, var(--t-grid-rows-h)); }
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@media (min-width: 768px) {
|
|
52
|
+
._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows_md, var(--t-grid-rows_sm, var(--t-grid-rows))); }
|
|
53
|
+
._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows_md-h, var(--t-grid-rows_sm-h, var(--t-grid-rows-h))); }
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media (min-width: 1024px) {
|
|
57
|
+
._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows_lg, var(--t-grid-rows_md, var(--t-grid-rows_sm, var(--t-grid-rows)))); }
|
|
58
|
+
._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows_lg-h, var(--t-grid-rows_md-h, var(--t-grid-rows_sm-h, var(--t-grid-rows-h)))); }
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@media (min-width: 1280px) {
|
|
62
|
+
._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows_xl, var(--t-grid-rows_lg, var(--t-grid-rows_md, var(--t-grid-rows_sm, var(--t-grid-rows))))); }
|
|
63
|
+
._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows_xl-h, var(--t-grid-rows_lg-h, var(--t-grid-rows_md-h, var(--t-grid-rows_sm-h, var(--t-grid-rows-h))))); }
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@media (min-width: 1536px) {
|
|
67
|
+
._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows_2xl, var(--t-grid-rows_xl, var(--t-grid-rows_lg, var(--t-grid-rows_md, var(--t-grid-rows_sm, var(--t-grid-rows)))))); }
|
|
68
|
+
._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows_2xl-h, var(--t-grid-rows_xl-h, var(--t-grid-rows_lg-h, var(--t-grid-rows_md-h, var(--t-grid-rows_sm-h, var(--t-grid-rows-h)))))); }
|
|
69
|
+
}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
const styles = {
|
|
2
|
-
"justify-self-auto": "_justify-self-
|
|
3
|
-
"justify-self-auto:h": "_justify-self-auto:
|
|
4
|
-
"justify-self-start": "_justify-self-
|
|
5
|
-
"justify-self-start:h": "_justify-self-start:
|
|
6
|
-
"justify-self-end": "_justify-self-
|
|
7
|
-
"justify-self-end:h": "_justify-self-end:
|
|
8
|
-
"justify-self-center": "_justify-self-
|
|
9
|
-
"justify-self-center:h": "_justify-self-center:
|
|
10
|
-
"justify-self-stretch": "_justify-self-
|
|
11
|
-
"justify-self-stretch:h": "_justify-self-stretch:
|
|
12
|
-
"grid-cols": "_grid-
|
|
13
|
-
"grid-cols:h": "_grid-cols:
|
|
14
|
-
"grid-rows": "_grid-
|
|
15
|
-
"grid-rows:h": "_grid-rows:
|
|
2
|
+
"justify-self-auto": "_justify-self-auto_kqdg4_2",
|
|
3
|
+
"justify-self-auto:h": "_justify-self-auto:h_kqdg4_3",
|
|
4
|
+
"justify-self-start": "_justify-self-start_kqdg4_4",
|
|
5
|
+
"justify-self-start:h": "_justify-self-start:h_kqdg4_5",
|
|
6
|
+
"justify-self-end": "_justify-self-end_kqdg4_6",
|
|
7
|
+
"justify-self-end:h": "_justify-self-end:h_kqdg4_7",
|
|
8
|
+
"justify-self-center": "_justify-self-center_kqdg4_8",
|
|
9
|
+
"justify-self-center:h": "_justify-self-center:h_kqdg4_9",
|
|
10
|
+
"justify-self-stretch": "_justify-self-stretch_kqdg4_10",
|
|
11
|
+
"justify-self-stretch:h": "_justify-self-stretch:h_kqdg4_11",
|
|
12
|
+
"grid-cols": "_grid-cols_kqdg4_14",
|
|
13
|
+
"grid-cols:h": "_grid-cols:h_kqdg4_15",
|
|
14
|
+
"grid-rows": "_grid-rows_kqdg4_43",
|
|
15
|
+
"grid-rows:h": "_grid-rows:h_kqdg4_44"
|
|
16
16
|
};
|
|
17
17
|
export {
|
|
18
18
|
styles as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inset.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/inset/inset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,
|
|
1
|
+
{"version":3,"file":"inset.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/inset/inset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,WAAW,CAAC;AAInB,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAIlC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAgCF,wBAAgB,cAAc,CAC5B,KAAK,EAAE,UAAU,GAAG,eAAe,GAClC,WAAW,CAyBb"}
|
|
@@ -1,40 +1,7 @@
|
|
|
1
|
-
import { STATE_SUFFIXES, STATE_CLASS_SUFFIXES, RESPONSIVE_KEYS } from "../shared/constants.js";
|
|
2
1
|
import { getRawValue } from "../shared/spacing.js";
|
|
2
|
+
import { getResponsiveVarStyles } from "../shared/responsive.js";
|
|
3
3
|
import styles from "./inset.module.css.js";
|
|
4
4
|
import clsx from "clsx";
|
|
5
|
-
function getInsetProp(key, value, state = "base") {
|
|
6
|
-
const result = { className: "", style: {} };
|
|
7
|
-
if (value === void 0) return result;
|
|
8
|
-
const stateSuffix = STATE_SUFFIXES[state];
|
|
9
|
-
const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
|
|
10
|
-
if (typeof value !== "object") {
|
|
11
|
-
const rawValue = getRawValue(value);
|
|
12
|
-
if (rawValue !== void 0) {
|
|
13
|
-
const className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
|
|
14
|
-
result.className = className || "";
|
|
15
|
-
result.style[`--t-${key}${stateSuffix}`] = rawValue;
|
|
16
|
-
}
|
|
17
|
-
return result;
|
|
18
|
-
}
|
|
19
|
-
for (const responsiveKey of RESPONSIVE_KEYS) {
|
|
20
|
-
const rawValue = getRawValue(value[responsiveKey]);
|
|
21
|
-
if (rawValue === void 0) continue;
|
|
22
|
-
let className;
|
|
23
|
-
let varName;
|
|
24
|
-
if (responsiveKey === "base") {
|
|
25
|
-
className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
|
|
26
|
-
varName = `--t-${key}${stateSuffix}`;
|
|
27
|
-
} else {
|
|
28
|
-
className = stateClassSuffix ? styles[`${key}_${responsiveKey}${stateClassSuffix}`] : styles[`${key}_${responsiveKey}`];
|
|
29
|
-
varName = `--t-${key}_${responsiveKey}${stateSuffix}`;
|
|
30
|
-
}
|
|
31
|
-
if (className) {
|
|
32
|
-
result.className = clsx(result.className, className);
|
|
33
|
-
}
|
|
34
|
-
result.style[varName] = rawValue;
|
|
35
|
-
}
|
|
36
|
-
return result;
|
|
37
|
-
}
|
|
38
5
|
function resolveInsetValue(key, props) {
|
|
39
6
|
const shorthandMap = {
|
|
40
7
|
top: "insetY",
|
|
@@ -45,25 +12,14 @@ function resolveInsetValue(key, props) {
|
|
|
45
12
|
return props[key] ?? props[shorthandMap[key]] ?? props.inset;
|
|
46
13
|
}
|
|
47
14
|
function getInsetStylesForState(props, state) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
const insetLeft = getInsetProp("left", resolveInsetValue("left", props), state);
|
|
15
|
+
if (!props) return { className: "", style: {} };
|
|
16
|
+
const keys = ["top", "right", "bottom", "left"];
|
|
17
|
+
const results = keys.map(
|
|
18
|
+
(key) => getResponsiveVarStyles(styles, key, key, resolveInsetValue(key, props), state, getRawValue)
|
|
19
|
+
);
|
|
54
20
|
return {
|
|
55
|
-
className: clsx(
|
|
56
|
-
|
|
57
|
-
insetRight.className,
|
|
58
|
-
insetBottom.className,
|
|
59
|
-
insetLeft.className
|
|
60
|
-
),
|
|
61
|
-
style: {
|
|
62
|
-
...insetTop.style,
|
|
63
|
-
...insetRight.style,
|
|
64
|
-
...insetBottom.style,
|
|
65
|
-
...insetLeft.style
|
|
66
|
-
}
|
|
21
|
+
className: clsx(...results.map((r) => r.className)),
|
|
22
|
+
style: Object.assign({}, ...results.map((r) => r.style))
|
|
67
23
|
};
|
|
68
24
|
}
|
|
69
25
|
function getInsetStyles(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inset.js","sources":["../../../../src/components/Box/inset/inset.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n
|
|
1
|
+
{"version":3,"file":"inset.js","sources":["../../../../src/components/Box/inset/inset.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n type StateKey,\n type StyleResult,\n getRawValue,\n getResponsiveVarStyles,\n} from \"../shared\";\nimport styles from \"./inset.module.css\";\nimport clsx from \"clsx\";\n\ntype InsetValue = string | number;\ntype InsetKey = \"top\" | \"right\" | \"bottom\" | \"left\";\ntype InsetShorthandKey = \"inset\" | \"insetX\" | \"insetY\";\n\nexport type InsetProps = {\n inset?: ResponsiveValue<InsetValue>;\n insetX?: ResponsiveValue<InsetValue>;\n insetY?: ResponsiveValue<InsetValue>;\n top?: ResponsiveValue<InsetValue>;\n right?: ResponsiveValue<InsetValue>;\n bottom?: ResponsiveValue<InsetValue>;\n left?: ResponsiveValue<InsetValue>;\n};\n\nexport type InsetStateProps = {\n _hover?: InsetProps;\n _focus?: InsetProps;\n _active?: InsetProps;\n _disabled?: InsetProps;\n};\n\nfunction resolveInsetValue(\n key: InsetKey,\n props: InsetProps\n): ResponsiveValue<InsetValue> | undefined {\n const shorthandMap: Record<InsetKey, InsetShorthandKey> = {\n top: \"insetY\",\n bottom: \"insetY\",\n right: \"insetX\",\n left: \"insetX\",\n };\n return props[key] ?? props[shorthandMap[key]] ?? props.inset;\n}\n\nfunction getInsetStylesForState(\n props: InsetProps | undefined,\n state: StateKey\n): StyleResult {\n if (!props) return { className: \"\", style: {} };\n\n const keys: InsetKey[] = [\"top\", \"right\", \"bottom\", \"left\"];\n const results = keys.map((key) =>\n getResponsiveVarStyles(styles, key, key, resolveInsetValue(key, props), state, getRawValue)\n );\n\n return {\n className: clsx(...results.map((r) => r.className)),\n style: Object.assign({}, ...results.map((r) => r.style)),\n };\n}\n\nexport function getInsetStyles(\n props: InsetProps & InsetStateProps\n): StyleResult {\n const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n const baseStyles = getInsetStylesForState(baseProps, \"base\");\n const hoverStyles = getInsetStylesForState(_hover, \"hover\");\n const focusStyles = getInsetStylesForState(_focus, \"focus\");\n const activeStyles = getInsetStylesForState(_active, \"active\");\n const disabledStyles = getInsetStylesForState(_disabled, \"disabled\");\n\n return {\n className: clsx(\n baseStyles.className,\n hoverStyles.className,\n focusStyles.className,\n activeStyles.className,\n disabledStyles.className\n ),\n style: {\n ...baseStyles.style,\n ...hoverStyles.style,\n ...focusStyles.style,\n ...activeStyles.style,\n ...disabledStyles.style,\n },\n };\n}\n"],"names":[],"mappings":";;;;AA+BA,SAAS,kBACP,KACA,OACyC;AACzC,QAAM,eAAoD;AAAA,IACxD,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAER,SAAO,MAAM,GAAG,KAAK,MAAM,aAAa,GAAG,CAAC,KAAK,MAAM;AACzD;AAEA,SAAS,uBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,OAAmB,CAAC,OAAO,SAAS,UAAU,MAAM;AAC1D,QAAM,UAAU,KAAK;AAAA,IAAI,CAAC,QACxB,uBAAuB,QAAQ,KAAK,KAAK,kBAAkB,KAAK,KAAK,GAAG,OAAO,WAAW;AAAA,EAAA;AAG5F,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;AAAA,IAClD,OAAO,OAAO,OAAO,IAAI,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAAA,EAAA;AAE3D;AAEO,SAAS,eACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,uBAAuB,WAAW,MAAM;AAC3D,QAAM,cAAc,uBAAuB,QAAQ,OAAO;AAC1D,QAAM,cAAc,uBAAuB,QAAQ,OAAO;AAC1D,QAAM,eAAe,uBAAuB,SAAS,QAAQ;AAC7D,QAAM,iBAAiB,uBAAuB,WAAW,UAAU;AAEnE,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO;AAAA,MACL,GAAG,WAAW;AAAA,MACd,GAAG,YAAY;AAAA,MACf,GAAG,YAAY;AAAA,MACf,GAAG,aAAa;AAAA,MAChB,GAAG,eAAe;AAAA,IAAA;AAAA,EACpB;AAEJ;"}
|