@strapi/design-system 2.0.0-rc.10 → 2.0.0-rc.12

package/dist/index.mjs

@@ -533,38 +533,43 @@ const AccordionRoot = styled(RadixAccordion.Root)`
 `;
 const Item$5 = React.forwardRef((props, forwardedRef) => {
   const { size } = useAccordion("Item");
-  return /* @__PURE__ */ jsx(AccordionItem, { $size: size, ref: forwardedRef, ...props });
+  return /* @__PURE__ */ jsx(AccordionItem, { $size: size, "data-size": size, ref: forwardedRef, ...props });
 });
 const AccordionItem = styled(RadixAccordion.Item)`
   overflow: hidden;
+  margin: 1px 0;
 
   &:first-child {
     border-top-left-radius: 0.3rem;
     border-top-right-radius: 0.3rem;
+    margin-top: 0;
   }
 
   &:last-child {
     border-bottom-left-radius: 0.3rem;
     border-bottom-right-radius: 0.3rem;
+    margin-bottom: 0;
   }
 
-  & + & {
-    border-top: ${(props) => props.$size === "S" ? `solid 1px ${props.theme.colors.neutral200}` : "unset"};
+  &[data-size='S'] {
+    & + & {
+      border-top: solid 1px ${(props) => props.theme.colors.neutral200};
+    }
   }
 
   &[data-state='open'] {
-    box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
+    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};
   }
 
-  &:hover {
-    box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
+  &:not([data-disabled]):hover {
+    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};
   }
 
   /* This applies our desired focus effect correctly. */
   &:focus-within {
     position: relative;
     z-index: 1;
-    box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
+    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};
   }
 
   @media (prefers-reduced-motion: no-preference) {
@@ -573,12 +578,12 @@ const AccordionItem = styled(RadixAccordion.Item)`
   }
 `;
 const Trigger$7 = React.forwardRef(
-  ({ caretPosition = "left", description, icon: Icon, children, ...restProps }, forwardedRef) => {
+  ({ caretPosition = "left", description, icon: Icon, iconProps, children, ...restProps }, forwardedRef) => {
     const { size } = useAccordion("Trigger");
     return /* @__PURE__ */ jsxs(AccordionTrigger, { $caretPosition: caretPosition, $size: size, ref: forwardedRef, ...restProps, children: [
       caretPosition === "left" ? /* @__PURE__ */ jsx(TriggerIcon, { $size: size, children: /* @__PURE__ */ jsx(CaretDown, { width: size === "S" ? "1.2rem" : "1.6rem", height: size === "S" ? "1.2rem" : "1.6rem" }) }) : null,
       /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
-        Icon ? /* @__PURE__ */ jsx(IconBox$4, { children: /* @__PURE__ */ jsx(Icon, {}) }) : null,
+        Icon && size === "S" ? /* @__PURE__ */ jsx(IconBox$4, { children: /* @__PURE__ */ jsx(Icon, { ...iconProps }) }) : null,
         /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", direction: "column", tag: "span", ref: forwardedRef, children: [
           /* @__PURE__ */ jsx(
             Typography,
@@ -599,6 +604,7 @@ const Trigger$7 = React.forwardRef(
 );
 const IconBox$4 = styled(Box)`
   color: ${(props) => props.theme.colors.neutral500};
+  display: flex;
 
   @media (prefers-reduced-motion: no-preference) {
     transition: ${(props) => props.theme.transitions.color};
@@ -2110,7 +2116,7 @@ const CheckboxEl = React.forwardRef(
       onChange: onCheckedChange
     });
     const composedRefs = useComposedRefs(checkboxRef, forwardedRef);
-    return /* @__PURE__ */ jsx(CheckboxRoot, { ref: composedRefs, checked, onCheckedChange: setChecked, ...props, children: /* @__PURE__ */ jsxs(Checkbox.Indicator, { style: { display: "inline-flex" }, children: [
+    return /* @__PURE__ */ jsx(CheckboxRoot, { ref: composedRefs, checked, onCheckedChange: setChecked, ...props, children: /* @__PURE__ */ jsxs(CheckboxIndicator, { style: { display: "inline-flex", pointerEvents: "auto" }, forceMount: true, children: [
       checked === true ? /* @__PURE__ */ jsx(CheckIcon, { width: "1.6rem", fill: "neutral0" }) : null,
       checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { fill: "neutral0" }) : null
     ] }) });
@@ -2149,10 +2155,16 @@ const CheckboxRoot = styled(Checkbox.Root)`
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
+    z-index: -1;
     min-width: 44px;
     min-height: 44px;
   }
 `;
+const CheckboxIndicator = styled(Checkbox.Indicator)`
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+`;
 const CheckboxImpl = React.forwardRef(({ children, ...restProps }, forwardedRef) => {
   const labelId = useId(restProps.id);
   if (!children) {
@@ -2276,8 +2288,8 @@ const Carousel = React.forwardRef(
           position: "relative",
           children: [
             childrenArray && childrenArray.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CarouselAction, { tag: "button", onClick: onPrevious, $area: "startAction", ref: prevActionRef, type: "button", children: /* @__PURE__ */ jsx(AccessibleIcon, { label: previousLabel, children: /* @__PURE__ */ jsx(ChevronLeft, { width: "6px", height: "10px", fill: "neutral600" }) }) }),
-              /* @__PURE__ */ jsx(CarouselAction, { tag: "button", onClick: onNext, $area: "endAction", ref: nextActionRef, type: "button", children: /* @__PURE__ */ jsx(AccessibleIcon, { label: nextLabel, children: /* @__PURE__ */ jsx(ChevronRight, { width: "6px", height: "10px", fill: "neutral600" }) }) })
+              /* @__PURE__ */ jsx(CarouselAction, { tag: "button", onClick: onPrevious, $area: "startAction", ref: prevActionRef, type: "button", children: /* @__PURE__ */ jsx(AccessibleIcon, { label: previousLabel, children: /* @__PURE__ */ jsx(ChevronLeft, { width: "1.6rem", height: "1.6rem", fill: "neutral600" }) }) }),
+              /* @__PURE__ */ jsx(CarouselAction, { tag: "button", onClick: onNext, $area: "endAction", ref: nextActionRef, type: "button", children: /* @__PURE__ */ jsx(AccessibleIcon, { label: nextLabel, children: /* @__PURE__ */ jsx(ChevronRight, { width: "1.6rem", height: "1.6rem", fill: "neutral600" }) }) })
             ] }),
             /* @__PURE__ */ jsx(CarouselSlides, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: childrenArray }),
             actions
@@ -8279,6 +8291,7 @@ const CarouselActions = ({ horizontal = true, ...props }) => /* @__PURE__ */ jsx
     position: "absolute",
     width: "100%",
     bottom: 1,
+    gap: 1,
     ...props
   }
 );
@@ -9089,6 +9102,7 @@ const StyledTrigger = styled(Flex)`
         `;
   }
 }}
+  cursor: pointer;
 
   &[aria-disabled='true'] {
     color: ${(props) => props.theme.colors.neutral500};
@@ -9167,6 +9181,7 @@ const itemStyles = css`
   &:focus-visible {
     outline: none;
     background-color: ${({ theme }) => theme.colors.primary100};
+    cursor: pointer;
   }
 `;
 const StyledSelectItem = styled(Select.Item)`
@@ -9300,8 +9315,8 @@ const SingleSelect = React.forwardRef(
 const SingleSelectOption = React.forwardRef(
   ({ value, startIcon, children, ...restProps }, ref) => {
     return /* @__PURE__ */ jsxs(Item$2, { ref, value: value.toString(), ...restProps, children: [
-      startIcon && /* @__PURE__ */ jsx(Box, { tag: "span", "aria-hidden": true, children: startIcon }),
-      /* @__PURE__ */ jsx(Typography, { lineHeight: "20px", children: /* @__PURE__ */ jsx(ItemText, { children }) })
+      startIcon && /* @__PURE__ */ jsx(Flex, { tag: "span", "aria-hidden": true, children: startIcon }),
+      /* @__PURE__ */ jsx(Typography, { lineHeight: "20px", width: "100%", children: /* @__PURE__ */ jsx(ItemText, { children }) })
     ] });
   }
 );
@@ -10768,6 +10783,13 @@ const NumberInput = React.forwardRef(
         formatNumberAndSetInput(value2);
       }
     };
+    const getDecimalPlaces = (step2) => {
+      const stepString = step2.toString();
+      if (!stepString.includes("."))
+        return 0;
+      return stepString.split(".")[1].length;
+    };
+    const decimalPlaces = getDecimalPlaces(step);
     const increment = () => {
       if (!inputValue) {
         formatNumberAndSetInput(step);
@@ -10775,7 +10797,8 @@ const NumberInput = React.forwardRef(
       }
       const parsedValue = numberParserRef.current.parse(inputValue);
       const newValue = isNaN(parsedValue) ? step : parsedValue + step;
-      formatNumberAndSetInput(numberFormaterRef.current.format(newValue));
+      const roundedValue = parseFloat(newValue.toFixed(decimalPlaces));
+      formatNumberAndSetInput(numberFormaterRef.current.format(roundedValue));
     };
     const decrement = () => {
       if (!inputValue) {
@@ -10784,7 +10807,8 @@ const NumberInput = React.forwardRef(
       }
       const parsedValue = numberParserRef.current.parse(inputValue);
       const newValue = isNaN(parsedValue) ? -step : parsedValue - step;
-      formatNumberAndSetInput(numberFormaterRef.current.format(newValue));
+      const roundedValue = parseFloat(newValue.toFixed(decimalPlaces));
+      formatNumberAndSetInput(numberFormaterRef.current.format(roundedValue));
     };
     const handleKeyDown = (e) => {
       if (disabled)
@@ -11672,13 +11696,20 @@ const MultiSelectNested = ({ options, ...props }) => {
 const NestedOption = styled(MultiSelectOption)`
   padding-left: ${({ theme }) => theme.spaces[7]};
 `;
-const Status = ({ variant: variant2 = "primary", showBullet = true, size = "M", children, ...props }) => {
+const getPadding = (size) => {
+  if (size === "XS") {
+    return { paddingX: "0.6rem", paddingY: "0.2rem" };
+  }
+  if (size === "S") {
+    return { paddingX: 2, paddingY: 1 };
+  }
+  return { paddingX: 5, paddingY: 4 };
+};
+const Status = ({ variant: variant2 = "primary", size = "M", children, ...props }) => {
   const backgroundColor = `${variant2}100`;
   const borderColor = `${variant2}200`;
-  const bulletColor = `${variant2}600`;
   const textColor = `${variant2}600`;
-  const paddingX = size === "S" ? 2 : 5;
-  const paddingY = size === "S" ? 1 : 4;
+  const { paddingX, paddingY } = getPadding(size);
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -11691,10 +11722,7 @@ const Status = ({ variant: variant2 = "primary", showBullet = true, size = "M",
       paddingLeft: paddingX,
       paddingRight: paddingX,
       ...props,
-      children: showBullet ? /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
-        /* @__PURE__ */ jsx(Box, { background: bulletColor, width: "0.6rem", height: "0.6rem", borderRadius: "50%" }),
-        children
-      ] }) : children
+      children
     }
   );
 };