@uni-design-system/uni-react 4.0.0 → 5.1.0

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 (22) hide show
  1. package/LICENSE +21 -0
  2. package/dist/cjs/index.cjs +39 -15
  3. package/dist/cjs/index.cjs.map +1 -1
  4. package/dist/esm/index.js +39 -15
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/types/components/button/button.component.d.ts.map +1 -1
  7. package/dist/types/components/card/card.component.d.ts.map +1 -1
  8. package/dist/types/components/draggable/SortableList/components/SortableItem/sortableItem.component.d.ts +1 -1
  9. package/dist/types/components/draggable/SortableList/components/SortableItem/sortableItem.component.d.ts.map +1 -1
  10. package/dist/types/components/draggable/SortableList/components/SortableOverlay/sortableOverlay.component.d.ts +1 -4
  11. package/dist/types/components/draggable/SortableList/components/SortableOverlay/sortableOverlay.component.d.ts.map +1 -1
  12. package/dist/types/components/draggable/SortableList/sortableList.component.d.ts +1 -1
  13. package/dist/types/components/draggable/SortableList/sortableList.component.d.ts.map +1 -1
  14. package/dist/types/components/draggable/SortableList/sortableList.stories.d.ts +1 -1
  15. package/dist/types/core/layout/layout.provider.d.ts +2 -1
  16. package/dist/types/core/layout/layout.provider.d.ts.map +1 -1
  17. package/dist/types/core/transition/fade/fade.component.d.ts +1 -2
  18. package/dist/types/core/transition/fade/fade.component.d.ts.map +1 -1
  19. package/dist/types/core/transition/transition.utils.d.ts +3 -3
  20. package/dist/types/core/transition/transition.utils.d.ts.map +1 -1
  21. package/dist/types/tools/color-swatch/color-swatch.component.d.ts.map +1 -1
  22. package/package.json +9 -5
package/dist/esm/index.js CHANGED
@@ -924,7 +924,7 @@ const Background = ({
924
924
  minHeight,
925
925
  color: color2
926
926
  }) => {
927
- if (!!imageUrl) {
927
+ if (imageUrl) {
928
928
  image = `url(${imageUrl})`;
929
929
  }
930
930
  const style = {
@@ -15119,6 +15119,30 @@ function createRippleContainer(className2) {
15119
15119
  function isTouchDevice() {
15120
15120
  return "ontouchstart" in window || navigator.maxTouchPoints > 0 || (navigator?.msMaxTouchPoints ?? 0) > 0;
15121
15121
  }
15122
+ const verticalPadding = { xxs: 2, xs: 5, sm: 8, md: 12, lg: 16, xl: 20, xxl: 24 };
15123
+ const horizontalPadding = { xxs: 4, xs: 8, sm: 12, md: 18, lg: 24, xl: 30, xxl: 36 };
15124
+ const baseButton = {
15125
+ borderRadius: 100,
15126
+ color: "primary-container",
15127
+ contentColor: "on-primary-container",
15128
+ verticalPadding,
15129
+ horizontalPadding
15130
+ };
15131
+ const DEFAULT_BUTTONS = {
15132
+ elevated: { ...baseButton, color: "surface", contentColor: "on-surface", shadowElevation: "raised" },
15133
+ filled: { ...baseButton, color: "primary" },
15134
+ "filled-secondary": { ...baseButton, color: "secondary", contentColor: "on-secondary" },
15135
+ outlined: {
15136
+ ...baseButton,
15137
+ color: "transparent",
15138
+ borderColor: "primary",
15139
+ contentColor: "on-primary",
15140
+ borderWidth: 1
15141
+ },
15142
+ text: { ...baseButton, color: "transparent", contentColor: "on-surface" },
15143
+ icon: { ...baseButton, color: "transparent", contentColor: "on-surface", horizontalPadding: verticalPadding },
15144
+ "floating-action": { ...baseButton, color: "secondary", contentColor: "on-secondary" }
15145
+ };
15122
15146
  const Button = ({
15123
15147
  text,
15124
15148
  children,
@@ -15134,7 +15158,7 @@ const Button = ({
15134
15158
  const { deviceSize } = useLayout();
15135
15159
  const theme = useTheme();
15136
15160
  const [ref, createRipple2] = useRipple({ disabled: disableRipple || buttonType === "elevated" });
15137
- const buttonProps = theme.buttons[buttonType];
15161
+ const buttonProps = DEFAULT_BUTTONS[buttonType];
15138
15162
  const getOnColorToken = (color2) => `on-${color2}`;
15139
15163
  const contentColor = overrideContentColor || getOnColorToken(buttonProps.color);
15140
15164
  const [hover2, setHover] = useState(false);
@@ -15167,21 +15191,21 @@ const Button = ({
15167
15191
  function Style(theme, buttonType, size = "md", hover2, disabled, click) {
15168
15192
  const {
15169
15193
  color: color2,
15170
- horizontalPadding,
15171
- verticalPadding,
15194
+ horizontalPadding: horizontalPadding2,
15195
+ verticalPadding: verticalPadding2,
15172
15196
  borderColor,
15173
15197
  borderWidth,
15174
15198
  borderRadius,
15175
15199
  contentColor
15176
- } = theme.buttons[buttonType];
15200
+ } = DEFAULT_BUTTONS[buttonType];
15177
15201
  const styles = {
15178
15202
  overflow: "hidden",
15179
15203
  transition: "all 0.3s cubic-bezier(.25,.8,.25,1)",
15180
15204
  cursor: "pointer",
15181
- paddingTop: verticalPadding[size] + "px",
15182
- paddingBottom: verticalPadding[size] + "px",
15183
- paddingLeft: horizontalPadding[size] + "px",
15184
- paddingRight: horizontalPadding[size] + "px",
15205
+ paddingTop: verticalPadding2[size] + "px",
15206
+ paddingBottom: verticalPadding2[size] + "px",
15207
+ paddingLeft: horizontalPadding2[size] + "px",
15208
+ paddingRight: horizontalPadding2[size] + "px",
15185
15209
  borderRadius: borderRadius + "px",
15186
15210
  backgroundColor: theme.colors[color2],
15187
15211
  borderColor: theme.colors[borderColor],
@@ -15214,8 +15238,8 @@ function Card({
15214
15238
  style,
15215
15239
  ...rest
15216
15240
  }) {
15217
- const { colors, containers } = useTheme();
15218
- const { borderRadii } = containers.card;
15241
+ const { colors } = useTheme();
15242
+ const borderRadii = { xxs: 4, xs: 8, sm: 12, md: 16, lg: 20, xl: 24, xxl: 28 };
15219
15243
  const styles = {
15220
15244
  height,
15221
15245
  width,
@@ -19483,7 +19507,7 @@ const SortableItem = ({
19483
19507
  children,
19484
19508
  id: id2,
19485
19509
  style: userStyle,
19486
- onRemove
19510
+ onRemove: _onRemove
19487
19511
  }) => {
19488
19512
  const {
19489
19513
  attributes,
@@ -19527,7 +19551,7 @@ const SortableList = ({
19527
19551
  items,
19528
19552
  onChange,
19529
19553
  renderItem,
19530
- style: userStyle
19554
+ style: _userStyle
19531
19555
  }) => {
19532
19556
  const [active, setActive] = useState(null);
19533
19557
  const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
@@ -19661,14 +19685,14 @@ const createLocalStorageManager = (key2) => ({
19661
19685
  let value;
19662
19686
  try {
19663
19687
  value = localStorage.getItem(key2) || init;
19664
- } catch (e) {
19688
+ } catch {
19665
19689
  }
19666
19690
  return JSON.parse(value) || init;
19667
19691
  },
19668
19692
  set(value) {
19669
19693
  try {
19670
19694
  localStorage.setItem(key2, JSON.stringify(value));
19671
- } catch (e) {
19695
+ } catch {
19672
19696
  }
19673
19697
  }
19674
19698
  });