@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,18 +1,16 @@
1
- import { StyleResult } from '../shared';
1
+ import { ResponsiveValue } from '../../../utils/breakpoints';
2
+ import { StateProps, StyleResult } from '../shared';
2
3
  export type RoundedValue = "none" | "sm" | "md" | "lg" | "full";
3
4
  export type RoundnessProps = {
4
- rounded?: RoundedValue;
5
- roundedTop?: RoundedValue;
6
- roundedBottom?: RoundedValue;
7
- roundedLeft?: RoundedValue;
8
- roundedRight?: RoundedValue;
9
- roundedTopLeft?: RoundedValue;
10
- roundedTopRight?: RoundedValue;
11
- roundedBottomLeft?: RoundedValue;
12
- roundedBottomRight?: RoundedValue;
5
+ rounded?: ResponsiveValue<RoundedValue>;
6
+ roundedTop?: ResponsiveValue<RoundedValue>;
7
+ roundedBottom?: ResponsiveValue<RoundedValue>;
8
+ roundedLeft?: ResponsiveValue<RoundedValue>;
9
+ roundedRight?: ResponsiveValue<RoundedValue>;
10
+ roundedTopLeft?: ResponsiveValue<RoundedValue>;
11
+ roundedTopRight?: ResponsiveValue<RoundedValue>;
12
+ roundedBottomLeft?: ResponsiveValue<RoundedValue>;
13
+ roundedBottomRight?: ResponsiveValue<RoundedValue>;
13
14
  };
14
- export type RoundnessStateProps = {
15
- _hover?: RoundnessProps;
16
- };
17
- export declare function getRoundnessStyles(props: RoundnessProps & RoundnessStateProps): StyleResult;
15
+ export declare function getRoundnessStyles(props: RoundnessProps & StateProps<RoundnessProps>): StyleResult;
18
16
  //# sourceMappingURL=roundness.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"roundness.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/roundness/roundness.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEhE,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,kBAAkB,CAAC,EAAE,YAAY,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB,CAAC;AA+EF,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,cAAc,GAAG,mBAAmB,GAC1C,WAAW,CAkCb"}
1
+ {"version":3,"file":"roundness.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/roundness/roundness.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEhE,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C,cAAc,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAChD,iBAAiB,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACpD,CAAC;AA0CF,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,GACjD,WAAW,CAmBb"}
@@ -1,22 +1,6 @@
1
- import { STATE_CLASS_SUFFIXES } from "../shared/constants.js";
1
+ import { getEnumResponsiveStyles } from "../shared/responsive.js";
2
2
  import styles from "./roundness.module.css.js";
3
3
  import clsx from "clsx";
4
- function getRoundedTopLeftClass(value, state) {
5
- const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
6
- return stateClassSuffix ? styles[`rounded-tl-${value}${stateClassSuffix}`] : styles[`rounded-tl-${value}`];
7
- }
8
- function getRoundedTopRightClass(value, state) {
9
- const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
10
- return stateClassSuffix ? styles[`rounded-tr-${value}${stateClassSuffix}`] : styles[`rounded-tr-${value}`];
11
- }
12
- function getRoundedBottomRightClass(value, state) {
13
- const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
14
- return stateClassSuffix ? styles[`rounded-br-${value}${stateClassSuffix}`] : styles[`rounded-br-${value}`];
15
- }
16
- function getRoundedBottomLeftClass(value, state) {
17
- const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
18
- return stateClassSuffix ? styles[`rounded-bl-${value}${stateClassSuffix}`] : styles[`rounded-bl-${value}`];
19
- }
20
4
  function getRoundnessStylesForState(props, state) {
21
5
  if (!props) return { className: "", style: {} };
22
6
  const {
@@ -30,59 +14,39 @@ function getRoundnessStylesForState(props, state) {
30
14
  roundedBottomLeft,
31
15
  roundedBottomRight
32
16
  } = props;
33
- const classes = [];
34
17
  const topLeft = roundedTopLeft ?? roundedTop ?? roundedLeft ?? rounded;
35
18
  const topRight = roundedTopRight ?? roundedTop ?? roundedRight ?? rounded;
36
19
  const bottomRight = roundedBottomRight ?? roundedBottom ?? roundedRight ?? rounded;
37
20
  const bottomLeft = roundedBottomLeft ?? roundedBottom ?? roundedLeft ?? rounded;
38
- if (topLeft) {
39
- const cls = getRoundedTopLeftClass(topLeft, state);
40
- if (cls) classes.push(cls);
41
- }
42
- if (topRight) {
43
- const cls = getRoundedTopRightClass(topRight, state);
44
- if (cls) classes.push(cls);
45
- }
46
- if (bottomRight) {
47
- const cls = getRoundedBottomRightClass(bottomRight, state);
48
- if (cls) classes.push(cls);
49
- }
50
- if (bottomLeft) {
51
- const cls = getRoundedBottomLeftClass(bottomLeft, state);
52
- if (cls) classes.push(cls);
53
- }
54
- return { className: clsx(...classes), style: {} };
21
+ const tlResult = getEnumResponsiveStyles(styles, "rounded-tl", topLeft, state);
22
+ const trResult = getEnumResponsiveStyles(styles, "rounded-tr", topRight, state);
23
+ const brResult = getEnumResponsiveStyles(styles, "rounded-br", bottomRight, state);
24
+ const blResult = getEnumResponsiveStyles(styles, "rounded-bl", bottomLeft, state);
25
+ return {
26
+ className: clsx(
27
+ tlResult.className,
28
+ trResult.className,
29
+ brResult.className,
30
+ blResult.className
31
+ ),
32
+ style: {}
33
+ };
55
34
  }
56
35
  function getRoundnessStyles(props) {
57
- const {
58
- rounded,
59
- roundedTop,
60
- roundedBottom,
61
- roundedLeft,
62
- roundedRight,
63
- roundedTopLeft,
64
- roundedTopRight,
65
- roundedBottomLeft,
66
- roundedBottomRight,
67
- _hover
68
- } = props;
69
- const baseStyles = getRoundnessStylesForState(
70
- {
71
- rounded,
72
- roundedTop,
73
- roundedBottom,
74
- roundedLeft,
75
- roundedRight,
76
- roundedTopLeft,
77
- roundedTopRight,
78
- roundedBottomLeft,
79
- roundedBottomRight
80
- },
81
- "base"
82
- );
36
+ const { _hover, _focus, _active, _disabled, ...baseProps } = props;
37
+ const baseStyles = getRoundnessStylesForState(baseProps, "base");
83
38
  const hoverStyles = getRoundnessStylesForState(_hover, "hover");
39
+ const focusStyles = getRoundnessStylesForState(_focus, "focus");
40
+ const activeStyles = getRoundnessStylesForState(_active, "active");
41
+ const disabledStyles = getRoundnessStylesForState(_disabled, "disabled");
84
42
  return {
85
- className: clsx(baseStyles.className, hoverStyles.className),
43
+ className: clsx(
44
+ baseStyles.className,
45
+ hoverStyles.className,
46
+ focusStyles.className,
47
+ activeStyles.className,
48
+ disabledStyles.className
49
+ ),
86
50
  style: {}
87
51
  };
88
52
  }
@@ -1 +1 @@
1
- {"version":3,"file":"roundness.js","sources":["../../../../src/components/Box/roundness/roundness.ts"],"sourcesContent":["import {\n STATE_CLASS_SUFFIXES,\n type StateKey,\n type StyleResult,\n} from \"../shared\";\nimport styles from \"./roundness.module.css\";\nimport clsx from \"clsx\";\n\nexport type RoundedValue = \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n\nexport type RoundnessProps = {\n rounded?: RoundedValue;\n roundedTop?: RoundedValue;\n roundedBottom?: RoundedValue;\n roundedLeft?: RoundedValue;\n roundedRight?: RoundedValue;\n roundedTopLeft?: RoundedValue;\n roundedTopRight?: RoundedValue;\n roundedBottomLeft?: RoundedValue;\n roundedBottomRight?: RoundedValue;\n};\n\nexport type RoundnessStateProps = {\n _hover?: RoundnessProps;\n};\n\nfunction getRoundedTopLeftClass(value: RoundedValue, state: StateKey): string | undefined {\n const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n return stateClassSuffix\n ? styles[`rounded-tl-${value}${stateClassSuffix}`]\n : styles[`rounded-tl-${value}`];\n}\n\nfunction getRoundedTopRightClass(value: RoundedValue, state: StateKey): string | undefined {\n const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n return stateClassSuffix\n ? styles[`rounded-tr-${value}${stateClassSuffix}`]\n : styles[`rounded-tr-${value}`];\n}\n\nfunction getRoundedBottomRightClass(value: RoundedValue, state: StateKey): string | undefined {\n const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n return stateClassSuffix\n ? styles[`rounded-br-${value}${stateClassSuffix}`]\n : styles[`rounded-br-${value}`];\n}\n\nfunction getRoundedBottomLeftClass(value: RoundedValue, state: StateKey): string | undefined {\n const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n return stateClassSuffix\n ? styles[`rounded-bl-${value}${stateClassSuffix}`]\n : styles[`rounded-bl-${value}`];\n}\n\nfunction getRoundnessStylesForState(\n props: RoundnessProps | undefined,\n state: StateKey\n): StyleResult {\n if (!props) return { className: \"\", style: {} };\n\n const {\n rounded,\n roundedTop,\n roundedBottom,\n roundedLeft,\n roundedRight,\n roundedTopLeft,\n roundedTopRight,\n roundedBottomLeft,\n roundedBottomRight,\n } = props;\n\n const classes: string[] = [];\n\n // Cascading specificity: individual corner > side > all\n const topLeft = roundedTopLeft ?? roundedTop ?? roundedLeft ?? rounded;\n const topRight = roundedTopRight ?? roundedTop ?? roundedRight ?? rounded;\n const bottomRight = roundedBottomRight ?? roundedBottom ?? roundedRight ?? rounded;\n const bottomLeft = roundedBottomLeft ?? roundedBottom ?? roundedLeft ?? rounded;\n\n if (topLeft) {\n const cls = getRoundedTopLeftClass(topLeft, state);\n if (cls) classes.push(cls);\n }\n\n if (topRight) {\n const cls = getRoundedTopRightClass(topRight, state);\n if (cls) classes.push(cls);\n }\n\n if (bottomRight) {\n const cls = getRoundedBottomRightClass(bottomRight, state);\n if (cls) classes.push(cls);\n }\n\n if (bottomLeft) {\n const cls = getRoundedBottomLeftClass(bottomLeft, state);\n if (cls) classes.push(cls);\n }\n\n return { className: clsx(...classes), style: {} };\n}\n\nexport function getRoundnessStyles(\n props: RoundnessProps & RoundnessStateProps\n): StyleResult {\n const {\n rounded,\n roundedTop,\n roundedBottom,\n roundedLeft,\n roundedRight,\n roundedTopLeft,\n roundedTopRight,\n roundedBottomLeft,\n roundedBottomRight,\n _hover,\n } = props;\n\n const baseStyles = getRoundnessStylesForState(\n {\n rounded,\n roundedTop,\n roundedBottom,\n roundedLeft,\n roundedRight,\n roundedTopLeft,\n roundedTopRight,\n roundedBottomLeft,\n roundedBottomRight,\n },\n \"base\"\n );\n const hoverStyles = getRoundnessStylesForState(_hover, \"hover\");\n\n return {\n className: clsx(baseStyles.className, hoverStyles.className),\n style: {},\n };\n}\n"],"names":[],"mappings":";;;AA0BA,SAAS,uBAAuB,OAAqB,OAAqC;AACxF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,cAAc,KAAK,GAAG,gBAAgB,EAAE,IAC/C,OAAO,cAAc,KAAK,EAAE;AAClC;AAEA,SAAS,wBAAwB,OAAqB,OAAqC;AACzF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,cAAc,KAAK,GAAG,gBAAgB,EAAE,IAC/C,OAAO,cAAc,KAAK,EAAE;AAClC;AAEA,SAAS,2BAA2B,OAAqB,OAAqC;AAC5F,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,cAAc,KAAK,GAAG,gBAAgB,EAAE,IAC/C,OAAO,cAAc,KAAK,EAAE;AAClC;AAEA,SAAS,0BAA0B,OAAqB,OAAqC;AAC3F,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,cAAc,KAAK,GAAG,gBAAgB,EAAE,IAC/C,OAAO,cAAc,KAAK,EAAE;AAClC;AAEA,SAAS,2BACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,UAAoB,CAAA;AAG1B,QAAM,UAAU,kBAAkB,cAAc,eAAe;AAC/D,QAAM,WAAW,mBAAmB,cAAc,gBAAgB;AAClE,QAAM,cAAc,sBAAsB,iBAAiB,gBAAgB;AAC3E,QAAM,aAAa,qBAAqB,iBAAiB,eAAe;AAExE,MAAI,SAAS;AACX,UAAM,MAAM,uBAAuB,SAAS,KAAK;AACjD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,UAAU;AACZ,UAAM,MAAM,wBAAwB,UAAU,KAAK;AACnD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,aAAa;AACf,UAAM,MAAM,2BAA2B,aAAa,KAAK;AACzD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,YAAY;AACd,UAAM,MAAM,0BAA0B,YAAY,KAAK;AACvD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,SAAO,EAAE,WAAW,KAAK,GAAG,OAAO,GAAG,OAAO,GAAC;AAChD;AAEO,SAAS,mBACd,OACa;AACb,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,aAAa;AAAA,IACjB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,EAAA;AAEF,QAAM,cAAc,2BAA2B,QAAQ,OAAO;AAE9D,SAAO;AAAA,IACL,WAAW,KAAK,WAAW,WAAW,YAAY,SAAS;AAAA,IAC3D,OAAO,CAAA;AAAA,EAAC;AAEZ;"}
1
+ {"version":3,"file":"roundness.js","sources":["../../../../src/components/Box/roundness/roundness.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n type StateKey,\n type StateProps,\n type StyleResult,\n getEnumResponsiveStyles,\n} from \"../shared\";\nimport styles from \"./roundness.module.css\";\nimport clsx from \"clsx\";\n\nexport type RoundedValue = \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n\nexport type RoundnessProps = {\n rounded?: ResponsiveValue<RoundedValue>;\n roundedTop?: ResponsiveValue<RoundedValue>;\n roundedBottom?: ResponsiveValue<RoundedValue>;\n roundedLeft?: ResponsiveValue<RoundedValue>;\n roundedRight?: ResponsiveValue<RoundedValue>;\n roundedTopLeft?: ResponsiveValue<RoundedValue>;\n roundedTopRight?: ResponsiveValue<RoundedValue>;\n roundedBottomLeft?: ResponsiveValue<RoundedValue>;\n roundedBottomRight?: ResponsiveValue<RoundedValue>;\n};\n\nfunction getRoundnessStylesForState(\n props: RoundnessProps | undefined,\n state: StateKey\n): StyleResult {\n if (!props) return { className: \"\", style: {} };\n\n const {\n rounded,\n roundedTop,\n roundedBottom,\n roundedLeft,\n roundedRight,\n roundedTopLeft,\n roundedTopRight,\n roundedBottomLeft,\n roundedBottomRight,\n } = props;\n\n // Cascading specificity: individual corner > side > all\n const topLeft = roundedTopLeft ?? roundedTop ?? roundedLeft ?? rounded;\n const topRight = roundedTopRight ?? roundedTop ?? roundedRight ?? rounded;\n const bottomRight = roundedBottomRight ?? roundedBottom ?? roundedRight ?? rounded;\n const bottomLeft = roundedBottomLeft ?? roundedBottom ?? roundedLeft ?? rounded;\n\n const tlResult = getEnumResponsiveStyles(styles, \"rounded-tl\", topLeft, state);\n const trResult = getEnumResponsiveStyles(styles, \"rounded-tr\", topRight, state);\n const brResult = getEnumResponsiveStyles(styles, \"rounded-br\", bottomRight, state);\n const blResult = getEnumResponsiveStyles(styles, \"rounded-bl\", bottomLeft, state);\n\n return {\n className: clsx(\n tlResult.className,\n trResult.className,\n brResult.className,\n blResult.className\n ),\n style: {},\n };\n}\n\nexport function getRoundnessStyles(\n props: RoundnessProps & StateProps<RoundnessProps>\n): StyleResult {\n const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n const baseStyles = getRoundnessStylesForState(baseProps, \"base\");\n const hoverStyles = getRoundnessStylesForState(_hover, \"hover\");\n const focusStyles = getRoundnessStylesForState(_focus, \"focus\");\n const activeStyles = getRoundnessStylesForState(_active, \"active\");\n const disabledStyles = getRoundnessStylesForState(_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 };\n}\n"],"names":[],"mappings":";;;AAwBA,SAAS,2BACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAGJ,QAAM,UAAU,kBAAkB,cAAc,eAAe;AAC/D,QAAM,WAAW,mBAAmB,cAAc,gBAAgB;AAClE,QAAM,cAAc,sBAAsB,iBAAiB,gBAAgB;AAC3E,QAAM,aAAa,qBAAqB,iBAAiB,eAAe;AAExE,QAAM,WAAW,wBAAwB,QAAQ,cAAc,SAAS,KAAK;AAC7E,QAAM,WAAW,wBAAwB,QAAQ,cAAc,UAAU,KAAK;AAC9E,QAAM,WAAW,wBAAwB,QAAQ,cAAc,aAAa,KAAK;AACjF,QAAM,WAAW,wBAAwB,QAAQ,cAAc,YAAY,KAAK;AAEhF,SAAO;AAAA,IACL,WAAW;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO,CAAA;AAAA,EAAC;AAEZ;AAEO,SAAS,mBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,2BAA2B,WAAW,MAAM;AAC/D,QAAM,cAAc,2BAA2B,QAAQ,OAAO;AAC9D,QAAM,cAAc,2BAA2B,QAAQ,OAAO;AAC9D,QAAM,eAAe,2BAA2B,SAAS,QAAQ;AACjE,QAAM,iBAAiB,2BAA2B,WAAW,UAAU;AAEvE,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO,CAAA;AAAA,EAAC;AAEZ;"}