@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.
Files changed (146) hide show
  1. package/README.md +106 -60
  2. package/dist/components/Alert/Alert.d.ts.map +1 -1
  3. package/dist/components/Alert/Alert.js.map +1 -1
  4. package/dist/components/Badge/Badge.d.ts.map +1 -1
  5. package/dist/components/Badge/Badge.js.map +1 -1
  6. package/dist/components/Box/Box.d.ts +2 -7
  7. package/dist/components/Box/Box.d.ts.map +1 -1
  8. package/dist/components/Box/Box.js +1 -1
  9. package/dist/components/Box/Box.js.map +1 -1
  10. package/dist/components/Box/borders/borders.d.ts +11 -13
  11. package/dist/components/Box/borders/borders.d.ts.map +1 -1
  12. package/dist/components/Box/borders/borders.js +29 -62
  13. package/dist/components/Box/borders/borders.js.map +1 -1
  14. package/dist/components/Box/borders/borders.module.css +936 -40
  15. package/dist/components/Box/borders/borders.module.css.js +600 -40
  16. package/dist/components/Box/borders/borders.module.css.js.map +1 -1
  17. package/dist/components/Box/colors/colors.d.ts +6 -8
  18. package/dist/components/Box/colors/colors.d.ts.map +1 -1
  19. package/dist/components/Box/colors/colors.js +20 -30
  20. package/dist/components/Box/colors/colors.js.map +1 -1
  21. package/dist/components/Box/colors/colors.module.css +2537 -108
  22. package/dist/components/Box/colors/colors.module.css.js +1620 -108
  23. package/dist/components/Box/colors/colors.module.css.js.map +1 -1
  24. package/dist/components/Box/display/display.d.ts +2 -8
  25. package/dist/components/Box/display/display.d.ts.map +1 -1
  26. package/dist/components/Box/display/display.js +10 -33
  27. package/dist/components/Box/display/display.js.map +1 -1
  28. package/dist/components/Box/flexbox/flexbox.d.ts +12 -14
  29. package/dist/components/Box/flexbox/flexbox.d.ts.map +1 -1
  30. package/dist/components/Box/flexbox/flexbox.js +39 -102
  31. package/dist/components/Box/flexbox/flexbox.js.map +1 -1
  32. package/dist/components/Box/flexbox/flexbox.module.css +1210 -56
  33. package/dist/components/Box/flexbox/flexbox.module.css.js +727 -55
  34. package/dist/components/Box/flexbox/flexbox.module.css.js.map +1 -1
  35. package/dist/components/Box/grid/grid.d.ts +3 -2
  36. package/dist/components/Box/grid/grid.d.ts.map +1 -1
  37. package/dist/components/Box/grid/grid.js +24 -15
  38. package/dist/components/Box/grid/grid.js.map +1 -1
  39. package/dist/components/Box/grid/grid.module.css +68 -18
  40. package/dist/components/Box/grid/grid.module.css.js +14 -14
  41. package/dist/components/Box/inset/inset.d.ts.map +1 -1
  42. package/dist/components/Box/inset/inset.js +8 -52
  43. package/dist/components/Box/inset/inset.js.map +1 -1
  44. package/dist/components/Box/inset/inset.module.css +120 -120
  45. package/dist/components/Box/inset/inset.module.css.js +21 -161
  46. package/dist/components/Box/inset/inset.module.css.js.map +1 -1
  47. package/dist/components/Box/interactions/interactions.d.ts +6 -8
  48. package/dist/components/Box/interactions/interactions.d.ts.map +1 -1
  49. package/dist/components/Box/interactions/interactions.js +20 -30
  50. package/dist/components/Box/interactions/interactions.js.map +1 -1
  51. package/dist/components/Box/interactions/interactions.module.css +891 -38
  52. package/dist/components/Box/interactions/interactions.module.css.js +570 -38
  53. package/dist/components/Box/interactions/interactions.module.css.js.map +1 -1
  54. package/dist/components/Box/margin/margin.d.ts.map +1 -1
  55. package/dist/components/Box/margin/margin.js +8 -52
  56. package/dist/components/Box/margin/margin.js.map +1 -1
  57. package/dist/components/Box/margin/margin.module.css +120 -120
  58. package/dist/components/Box/margin/margin.module.css.js +21 -161
  59. package/dist/components/Box/margin/margin.module.css.js.map +1 -1
  60. package/dist/components/Box/opacity/opacity.d.ts +2 -8
  61. package/dist/components/Box/opacity/opacity.d.ts.map +1 -1
  62. package/dist/components/Box/opacity/opacity.js +10 -33
  63. package/dist/components/Box/opacity/opacity.js.map +1 -1
  64. package/dist/components/Box/overflow/overflow.d.ts +2 -8
  65. package/dist/components/Box/overflow/overflow.d.ts.map +1 -1
  66. package/dist/components/Box/overflow/overflow.js +24 -29
  67. package/dist/components/Box/overflow/overflow.js.map +1 -1
  68. package/dist/components/Box/padding/padding.d.ts.map +1 -1
  69. package/dist/components/Box/padding/padding.js +8 -52
  70. package/dist/components/Box/padding/padding.js.map +1 -1
  71. package/dist/components/Box/padding/padding.module.css +120 -120
  72. package/dist/components/Box/padding/padding.module.css.js +21 -161
  73. package/dist/components/Box/padding/padding.module.css.js.map +1 -1
  74. package/dist/components/Box/position/position.d.ts +2 -8
  75. package/dist/components/Box/position/position.d.ts.map +1 -1
  76. package/dist/components/Box/position/position.js +10 -33
  77. package/dist/components/Box/position/position.js.map +1 -1
  78. package/dist/components/Box/roundness/roundness.d.ts +12 -14
  79. package/dist/components/Box/roundness/roundness.d.ts.map +1 -1
  80. package/dist/components/Box/roundness/roundness.js +26 -62
  81. package/dist/components/Box/roundness/roundness.js.map +1 -1
  82. package/dist/components/Box/roundness/roundness.module.css +937 -40
  83. package/dist/components/Box/roundness/roundness.module.css.js +600 -40
  84. package/dist/components/Box/roundness/roundness.module.css.js.map +1 -1
  85. package/dist/components/Box/shadows/shadows.d.ts +2 -8
  86. package/dist/components/Box/shadows/shadows.d.ts.map +1 -1
  87. package/dist/components/Box/shadows/shadows.js +10 -33
  88. package/dist/components/Box/shadows/shadows.js.map +1 -1
  89. package/dist/components/Box/shared/index.d.ts +1 -0
  90. package/dist/components/Box/shared/index.d.ts.map +1 -1
  91. package/dist/components/Box/shared/responsive.d.ts +36 -0
  92. package/dist/components/Box/shared/responsive.d.ts.map +1 -0
  93. package/dist/components/Box/shared/responsive.js +65 -0
  94. package/dist/components/Box/shared/responsive.js.map +1 -0
  95. package/dist/components/Box/shared/types.d.ts +6 -0
  96. package/dist/components/Box/shared/types.d.ts.map +1 -1
  97. package/dist/components/Box/sizing/sizing.d.ts.map +1 -1
  98. package/dist/components/Box/sizing/sizing.js +5 -37
  99. package/dist/components/Box/sizing/sizing.js.map +1 -1
  100. package/dist/components/Box/sizing/sizing.module.css +175 -183
  101. package/dist/components/Box/sizing/sizing.module.css.js +31 -241
  102. package/dist/components/Box/sizing/sizing.module.css.js.map +1 -1
  103. package/dist/components/Box/text/text.d.ts +6 -8
  104. package/dist/components/Box/text/text.d.ts.map +1 -1
  105. package/dist/components/Box/text/text.js +24 -30
  106. package/dist/components/Box/text/text.js.map +1 -1
  107. package/dist/components/Box/text/text.module.css +562 -24
  108. package/dist/components/Box/text/text.module.css.js +360 -24
  109. package/dist/components/Box/text/text.module.css.js.map +1 -1
  110. package/dist/components/Box/typography/typography.d.ts +7 -9
  111. package/dist/components/Box/typography/typography.d.ts.map +1 -1
  112. package/dist/components/Box/typography/typography.js +33 -19
  113. package/dist/components/Box/typography/typography.js.map +1 -1
  114. package/dist/components/Box/typography/typography.module.css +890 -19
  115. package/dist/components/Box/typography/typography.module.css.js +570 -19
  116. package/dist/components/Box/typography/typography.module.css.js.map +1 -1
  117. package/dist/components/Box/zIndex/zIndex.d.ts +2 -8
  118. package/dist/components/Box/zIndex/zIndex.d.ts.map +1 -1
  119. package/dist/components/Box/zIndex/zIndex.js +10 -33
  120. package/dist/components/Box/zIndex/zIndex.js.map +1 -1
  121. package/dist/components/Flex/Flex.d.ts +5 -6
  122. package/dist/components/Flex/Flex.d.ts.map +1 -1
  123. package/dist/components/Flex/Flex.js +0 -1
  124. package/dist/components/Flex/Flex.js.map +1 -1
  125. package/dist/components/Grid/Grid.d.ts +8 -7
  126. package/dist/components/Grid/Grid.d.ts.map +1 -1
  127. package/dist/components/Grid/Grid.js.map +1 -1
  128. package/dist/components/IconButton/IconButton.d.ts.map +1 -1
  129. package/dist/components/IconButton/IconButton.js.map +1 -1
  130. package/dist/components/Menu/Menu.d.ts.map +1 -1
  131. package/dist/components/Menu/Menu.js +5 -5
  132. package/dist/components/Menu/Menu.js.map +1 -1
  133. package/dist/components/Popover/Popover.d.ts.map +1 -1
  134. package/dist/components/Popover/Popover.js +9 -9
  135. package/dist/components/Popover/Popover.js.map +1 -1
  136. package/dist/components/Progress/Progress.d.ts.map +1 -1
  137. package/dist/components/Progress/Progress.js.map +1 -1
  138. package/dist/components/Stack/Stack.d.ts +2 -1
  139. package/dist/components/Stack/Stack.d.ts.map +1 -1
  140. package/dist/components/Stack/Stack.js.map +1 -1
  141. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
  142. package/dist/components/Tooltip/Tooltip.js +5 -5
  143. package/dist/components/Tooltip/Tooltip.js.map +1 -1
  144. package/dist/index.css +9313 -1632
  145. package/dist/styles/styles.css +7 -0
  146. 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,EAIL,KAAK,WAAW,EACjB,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,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AA+CF,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,WAAW,CAab"}
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 { STATE_SUFFIXES, STATE_CLASS_SUFFIXES } from "../shared/constants.js";
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
- if (gridTemplateColumns !== void 0) {
20
- const gridColsClass = stateClassSuffix ? styles[`grid-cols${stateClassSuffix}`] : styles["grid-cols"];
21
- if (gridColsClass) classes.push(gridColsClass);
22
- style[`--t-grid-cols${stateVarSuffix}`] = gridTemplateColumns;
23
- }
24
- if (gridTemplateRows !== void 0) {
25
- const gridRowsClass = stateClassSuffix ? styles[`grid-rows${stateClassSuffix}`] : styles["grid-rows"];
26
- if (gridRowsClass) classes.push(gridRowsClass);
27
- style[`--t-grid-rows${stateVarSuffix}`] = gridTemplateRows;
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 STATE_SUFFIXES,\n STATE_CLASS_SUFFIXES,\n type StateKey,\n type StyleResult,\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?: string;\n gridTemplateRows?: string;\n};\n\nexport type GridStateProps = {\n _hover?: GridProps;\n};\n\nfunction getJustifySelfClass(value: JustifySelfValue, state: StateKey): string | undefined {\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 const stateVarSuffix = STATE_SUFFIXES[state];\n const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n // Enumerated prop\n if (justifySelf) {\n const cls = getJustifySelfClass(justifySelf, state);\n if (cls) classes.push(cls);\n }\n\n // Variable-based props\n if (gridTemplateColumns !== undefined) {\n const gridColsClass = stateClassSuffix ? styles[`grid-cols${stateClassSuffix}`] : styles[\"grid-cols\"];\n if (gridColsClass) classes.push(gridColsClass);\n style[`--t-grid-cols${stateVarSuffix}`] = gridTemplateColumns;\n }\n\n if (gridTemplateRows !== undefined) {\n const gridRowsClass = stateClassSuffix ? styles[`grid-rows${stateClassSuffix}`] : styles[\"grid-rows\"];\n if (gridRowsClass) classes.push(gridRowsClass);\n style[`--t-grid-rows${stateVarSuffix}`] = gridTemplateRows;\n }\n\n return {\n className: clsx(...classes),\n 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,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;AACtC,QAAM,iBAAiB,eAAe,KAAK;AAC3C,QAAM,mBAAmB,qBAAqB,KAAK;AAGnD,MAAI,aAAa;AACf,UAAM,MAAM,oBAAoB,aAAa,KAAK;AAClD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAGA,MAAI,wBAAwB,QAAW;AACrC,UAAM,gBAAgB,mBAAmB,OAAO,YAAY,gBAAgB,EAAE,IAAI,OAAO,WAAW;AACpG,QAAI,cAAe,SAAQ,KAAK,aAAa;AAC7C,UAAM,gBAAgB,cAAc,EAAE,IAAI;AAAA,EAC5C;AAEA,MAAI,qBAAqB,QAAW;AAClC,UAAM,gBAAgB,mBAAmB,OAAO,YAAY,gBAAgB,EAAE,IAAI,OAAO,WAAW;AACpG,QAAI,cAAe,SAAQ,KAAK,aAAa;AAC7C,UAAM,gBAAgB,cAAc,EAAE,IAAI;AAAA,EAC5C;AAEA,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,OAAO;AAAA,IAC1B;AAAA,EAAA;AAEJ;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
+ {"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-auto_1s4ho_2 { justify-self: auto; }
3
- ._justify-self-auto\:h_1s4ho_3:hover { justify-self: auto; }
4
- ._justify-self-start_1s4ho_4 { justify-self: start; }
5
- ._justify-self-start\:h_1s4ho_5:hover { justify-self: start; }
6
- ._justify-self-end_1s4ho_6 { justify-self: end; }
7
- ._justify-self-end\:h_1s4ho_7:hover { justify-self: end; }
8
- ._justify-self-center_1s4ho_8 { justify-self: center; }
9
- ._justify-self-center\:h_1s4ho_9:hover { justify-self: center; }
10
- ._justify-self-stretch_1s4ho_10 { justify-self: stretch; }
11
- ._justify-self-stretch\:h_1s4ho_11:hover { justify-self: stretch; }
12
-
13
- /* gridTemplateColumns (variable-based) */
14
- ._grid-cols_1s4ho_14 { grid-template-columns: var(--t-grid-cols); }
15
- ._grid-cols\:h_1s4ho_15:hover { grid-template-columns: var(--t-grid-cols-h); }
16
-
17
- /* gridTemplateRows (variable-based) */
18
- ._grid-rows_1s4ho_18 { grid-template-rows: var(--t-grid-rows); }
19
- ._grid-rows\:h_1s4ho_19:hover { grid-template-rows: var(--t-grid-rows-h); }
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-auto_1s4ho_2",
3
- "justify-self-auto:h": "_justify-self-auto:h_1s4ho_3",
4
- "justify-self-start": "_justify-self-start_1s4ho_4",
5
- "justify-self-start:h": "_justify-self-start:h_1s4ho_5",
6
- "justify-self-end": "_justify-self-end_1s4ho_6",
7
- "justify-self-end:h": "_justify-self-end:h_1s4ho_7",
8
- "justify-self-center": "_justify-self-center_1s4ho_8",
9
- "justify-self-center:h": "_justify-self-center:h_1s4ho_9",
10
- "justify-self-stretch": "_justify-self-stretch_1s4ho_10",
11
- "justify-self-stretch:h": "_justify-self-stretch:h_1s4ho_11",
12
- "grid-cols": "_grid-cols_1s4ho_14",
13
- "grid-cols:h": "_grid-cols:h_1s4ho_15",
14
- "grid-rows": "_grid-rows_1s4ho_18",
15
- "grid-rows:h": "_grid-rows:h_1s4ho_19"
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,EAKL,KAAK,WAAW,EAEjB,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;AAgGF,wBAAgB,cAAc,CAC5B,KAAK,EAAE,UAAU,GAAG,eAAe,GAClC,WAAW,CAyBb"}
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
- const result = { className: "", style: {} };
49
- if (!props) return result;
50
- const insetTop = getInsetProp("top", resolveInsetValue("top", props), state);
51
- const insetRight = getInsetProp("right", resolveInsetValue("right", props), state);
52
- const insetBottom = getInsetProp("bottom", resolveInsetValue("bottom", props), state);
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
- insetTop.className,
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 RESPONSIVE_KEYS,\n STATE_SUFFIXES,\n STATE_CLASS_SUFFIXES,\n type StateKey,\n type StyleResult,\n getRawValue,\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 getInsetProp(\n key: InsetKey,\n value: ResponsiveValue<InsetValue> | undefined,\n state: StateKey = \"base\"\n): StyleResult {\n const result: StyleResult = { className: \"\", style: {} };\n\n if (value === undefined) return result;\n\n const stateSuffix = STATE_SUFFIXES[state];\n const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n if (typeof value !== \"object\") {\n const rawValue = getRawValue(value);\n if (rawValue !== undefined) {\n const className = stateClassSuffix\n ? styles[`${key}${stateClassSuffix}`]\n : styles[key];\n result.className = className || \"\";\n result.style[`--t-${key}${stateSuffix}`] = rawValue;\n }\n return result;\n }\n\n for (const responsiveKey of RESPONSIVE_KEYS) {\n const rawValue = getRawValue(value[responsiveKey]);\n if (rawValue === undefined) continue;\n\n let className: string | undefined;\n let varName: string;\n\n if (responsiveKey === \"base\") {\n className = stateClassSuffix\n ? styles[`${key}${stateClassSuffix}`]\n : styles[key];\n varName = `--t-${key}${stateSuffix}`;\n } else {\n className = stateClassSuffix\n ? styles[`${key}_${responsiveKey}${stateClassSuffix}`]\n : styles[`${key}_${responsiveKey}`];\n varName = `--t-${key}_${responsiveKey}${stateSuffix}`;\n }\n\n if (className) {\n result.className = clsx(result.className, className);\n }\n result.style[varName] = rawValue;\n }\n\n return result;\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 const result: StyleResult = { className: \"\", style: {} };\n\n if (!props) return result;\n\n const insetTop = getInsetProp(\"top\", resolveInsetValue(\"top\", props), state);\n const insetRight = getInsetProp(\"right\", resolveInsetValue(\"right\", props), state);\n const insetBottom = getInsetProp(\"bottom\", resolveInsetValue(\"bottom\", props), state);\n const insetLeft = getInsetProp(\"left\", resolveInsetValue(\"left\", props), state);\n\n return {\n className: clsx(\n insetTop.className,\n insetRight.className,\n insetBottom.className,\n insetLeft.className\n ),\n style: {\n ...insetTop.style,\n ...insetRight.style,\n ...insetBottom.style,\n ...insetLeft.style,\n },\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":"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"}
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;"}